<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#000000" />

    <!-- Preconnect & DNS Prefetch for Performance -->
    <link rel="preconnect" href="https://cjpulqkotakqyfhkgvgm.supabase.co" crossorigin>
    <link rel="preconnect" href="https://api.creativebase.com" crossorigin>
    <link rel="preconnect" href="https://the-spot-mediafilm.com" crossorigin>
    <link rel="dns-prefetch" href="https://images.pexels.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">

    <!-- Preload Critical Fonts -->
    <link rel="preload" href="/fonts/EuclidCircularA-Regular-WebM.woff2" as="font" type="font/woff2" crossorigin="anonymous" fetchpriority="high">
    <link rel="preload" href="/fonts/EuclidCircularA-Bold-WebM.woff2" as="font" type="font/woff2" crossorigin="anonymous" fetchpriority="high">

    <!-- Critical CSS for initial render -->
    <style>
      html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:'Euclid Circular A',system-ui,-apple-system,sans-serif}
      body{margin:0;padding:0;background:#fff;color:#111827;overflow-x:hidden}
      #root{min-height:100vh;display:flex;flex-direction:column}
      *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
      img,video{max-width:100%;height:auto;display:block}
      a{color:inherit;text-decoration:none}
      button{cursor:pointer;background:none;border:none;font:inherit}
      .loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#000}
      .loading::after{content:'';width:48px;height:48px;border:4px solid #fff;border-bottom-color:transparent;border-radius:50%;animation:spin 1s linear infinite}
      @keyframes spin{to{transform:rotate(360deg)}}
    </style>

    <!-- Standard favicon -->
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

    <!-- Apple Touch Icon -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- Android/Chrome -->
    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />
    <title>The Spot - Filmbranche Daten & Analysen | Aktuelle Kinocharts & Fernsehnews</title>
    <meta name="description" content="Ihr führendes Portal für Filmbranche-Daten, Kinocharts und Fernsehnews. Aktuelle Branchenanalysen, Box Office Daten und exklusive Berichte aus der Medienwelt." />
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://the-spot-mediafilm.com/" />
    <meta property="og:title" content="The Spot - Filmbranche Daten & Analysen | Aktuelle Kinocharts & Fernsehnews" />
    <meta property="og:description" content="Ihr führendes Portal für Filmbranche-Daten, Kinocharts und Fernsehnews. Aktuelle Branchenanalysen und exklusive Berichte." />
    <meta property="og:image" content="https://images.pexels.com/photos/7991579/pexels-photo-7991579.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://the-spot-mediafilm.com/" />
    <meta property="twitter:title" content="The Spot - Filmbranche Daten & Analysen | Aktuelle Kinocharts & Fernsehnews" />
    <meta property="twitter:description" content="Ihr führendes Portal für Filmbranche-Daten, Kinocharts und Fernsehnews. Aktuelle Branchenanalysen und exklusive Berichte." />
    <meta property="twitter:image" content="https://images.pexels.com/photos/7991579/pexels-photo-7991579.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" />
    <!-- Schema.org markup for Google -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "name": "The Spot Media Film",
        "url": "https://the-spot-mediafilm.com",
        "description": "Ihr führendes Portal für Filmbranche-Daten, Kinocharts und Fernsehnews",
        "potentialAction": {
          "@type": "SearchAction",
          "target": "https://the-spot-mediafilm.com/search?q={search_term_string}",
          "query-input": "required name=search_term_string"
        }
      }
    </script>
    <script type="module" crossorigin src="/assets/js/index-CKsBGR1M.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/css/index-Gn5GvP39.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>