<!doctype html>
<html lang="en" class="js-loaded stylesheets-loaded" style="visibility: visible; opacity: 1;" data-images-loaded="true">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/zosel-digital-favicon.svg" />
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
    <link rel="manifest" href="/favicon/site.webmanifest" />
    <link rel="mask-icon" href="/zosel-digital-favicon.svg" color="#1a1a1a" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta name="msapplication-TileColor" content="#1a1a1a" />
    <meta name="msapplication-config" content="/favicon/browserconfig.xml" />
    <meta name="theme-color" content="#ffffff" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover" />
    
    <!-- CSP wird über HTTP-Header in vercel.json konfiguriert -->
    
    <title>Zosel Digital - Professional Web Development Services</title>
    <meta
      name="description"
      content="Zosel Digital - Professional Web Development Services tailored to your needs. Creating modern, responsive, and user-friendly websites."
    />
    <meta
      name="keywords"
      content="web development, website design, WordPress, custom websites, responsive design, Luxembourg"
    />
    <meta name="author" content="Björn Zosel" />
    <meta
      property="og:title"
      content="Zosel Digital - Professional Web Development Services"
    />
    <meta
      property="og:description"
      content="Professional web development services tailored to your needs. Creating modern, responsive, and user-friendly websites."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://zosel.lu" />
    <meta property="og:image" content="/bjorn-zosel-portrait.jpg" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="Zosel Digital - Professional Web Development Services"
    />
    <meta
      name="twitter:description"
      content="Professional web development services tailored to your needs. Creating modern, responsive, and user-friendly websites."
    />
    <meta name="twitter:image" content="/bjorn-zosel-portrait.jpg" />
    <link rel="canonical" href="https://zosel.lu" />

    <!-- Kritisches CSS-Laden optimieren -->
    <noscript></noscript>

    <!-- Kritische Styles inline mit CSP-konformer Implementierung -->
    <style>
      /* Verhindert Layout-Shifts während des Seitenladens */
      body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }
      #root {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      /* Container für Hero-Bilder mit festen Dimensionen */
      .aspect-\[3\/4\] {
        position: relative;
        padding-bottom: 133.33%;
        height: 0;
        overflow: hidden;
      }
      /* Allgemeine Style-Placeholder für initiales Rendering */
      .container {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1rem;
      }
      
      /* Layout-Rendering optimieren */
      html {
        visibility: visible;
        opacity: 1;
      }

      /* Sicherstellen, dass sr-only Elemente sofort versteckt sind */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
    </style>

    <!-- Verzögere Rendering bis kritisches CSS geladen ist -->
    <!-- Script entfernt und durch externes Script ersetzt -->
    <script type="module" crossorigin src="/assets/js/index-UXp_jiui.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/vendor-B3ZcCDBG.js">
    <link rel="stylesheet" crossorigin href="/assets/style.BNcFgMf2.css">
  </head>
  <body class="apple-device" data-loaded="true">
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:p-4 focus:top-2 focus:left-2 focus:bg-background focus:z-[100] focus:rounded focus:border focus:border-primary focus:outline-none focus:shadow-md" tabindex="0">Skip to main content</a>
    <a href="#footer" class="sr-only focus:not-sr-only focus:absolute focus:p-4 focus:top-2 focus:left-2 focus:bg-background focus:z-[100] focus:rounded focus:border focus:border-primary focus:outline-none focus:shadow-md" tabindex="0">Skip to footer</a>
    <div id="root">
      <header class="fixed w-full z-50 transition-all duration-200 bg-background/95 backdrop-blur-sm " role="banner" aria-label="Site header"></header>
      <div id="main-content"></div>
      <footer id="footer" class="bg-muted/30 py-12 relative" role="contentinfo"></footer>
    </div>
    <!-- Externes Script für Renderingverzögerung -->
    
    <!-- Safari-spezifisches Rendering-Fix -->
  </body>
</html>
