/* Schrift lokal eingebunden (kein Google-Fonts-Abruf, DSGVO-freundlich) */
    @font-face {
      font-family: "Orbitron";
      src: url("/fonts/Orbitron-Black.ttf") format("truetype");
      font-weight: 900;
      font-display: swap;
    }

    :root {
      --gruen: #546223;
      --gruen-dunkel: #2b3312;
      --gruen-tief: #1a1f0b;
      --weiss: #ffffff;
      --text-gedimmt: rgba(255, 255, 255, .72);
      --linie: rgba(255, 255, 255, .10);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body { height: 100%; }

    body {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      background-color: var(--gruen-dunkel);
      background-image:
        radial-gradient(ellipse 80% 70% at 50% 40%, var(--gruen) 0%, var(--gruen-dunkel) 62%, var(--gruen-tief) 100%);
      color: var(--weiss);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* Dezentes Leiterbahn-Raster im Hintergrund */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(var(--linie) 1px, transparent 1px),
        linear-gradient(90deg, var(--linie) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 0%, transparent 75%);
    }

    main {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 48px 16px 32px;
    }

    .logo {
      width: min(320px, 70vw);
      height: auto;
      filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .25));
      animation: einblenden 1.1s ease-out both;
    }

    .trenner {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 44px 0 22px;
      width: min(360px, 80vw);
      animation: einblenden 1.1s .25s ease-out both;
    }
    .trenner span { flex: 1; height: 2px; background: rgba(255, 255, 255, .55); }
    .trenner i {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--weiss);
      animation: pulsieren 2.4s ease-in-out infinite;
    }
    .trenner i:last-child { animation-delay: 1.2s; }

    h1 {
      font-family: "Orbitron", system-ui, sans-serif;
      font-weight: 900;
      font-size: clamp(1.6rem, 6vw, 3rem);
      letter-spacing: .22em;
      /* Ausgleich für das letzte Zeichen, damit der Text optisch zentriert bleibt */
      margin-right: -.22em;
      text-transform: uppercase;
      animation: einblenden 1.1s .4s ease-out both;
    }

    p.hinweis {
      margin-top: 18px;
      max-width: 34ch;
      font-size: clamp(1rem, 2.6vw, 1.15rem);
      line-height: 1.6;
      color: var(--text-gedimmt);
      animation: einblenden 1.1s .55s ease-out both;
    }

    footer {
      position: relative;
      padding: 20px 16px 28px;
      text-align: center;
      font-size: .85rem;
      color: rgba(255, 255, 255, .55);
    }

    @keyframes einblenden {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes pulsieren {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
      50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; }
    }