:root{
    --nacht:#070d1a; --nacht-2:#0f172a; --gold:#fbbf24; --gold-warm:#f59e0b;
    --gold-hell:#fde68a; --text:#e8edf5; --leise:#8fa0b8; --linie:rgba(251,191,36,.2);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--nacht); color:var(--text);
    font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
    line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }

  /* ── Wien als Spielbrett: Ring, Radialen, Donaukanal ── */
  .karte{position:fixed;inset:0;z-index:0;pointer-events:none}
  .karte img{width:100%;height:100%;object-fit:cover;object-position:center 44%;
    /* ⚠️ Hier stand brightness(1.55): der Stadtplan wurde AUFGEHELLT, seine
       gelben Häuserblöcke leuchteten mitten im Lesebereich durch die
       halbdurchsichtigen Kästen. Der Fließtext war deshalb stellenweise
       schwer zu lesen — nicht weil er zu dunkel wäre (7,4:1, klar über der
       Anforderung), sondern weil der Grund unter ihm unruhig war. */
    opacity:.85;filter:brightness(.62) contrast(1.06) saturate(.9)}
  .spur-ebene{position:absolute;inset:0;width:100%;height:100%}
  .spur{
    /* War als CSS-Variable --len per Inline-style="--len:2100" gesetzt (fixer
       Wert, kein Laufzeit-Zustand) – jetzt fest hinterlegt, damit style-src
       ohne 'unsafe-inline' auskommt. */
    fill:none;stroke:url(#spurverlauf);stroke-width:3.2;stroke-linecap:round;
    stroke-dasharray:2100;stroke-dashoffset:2100;
    animation:zeichnen 5s ease-in-out forwards;
  }
  @keyframes zeichnen{to{stroke-dashoffset:0}}
  .ort{fill:var(--gold);animation:leuchten 3.5s ease-in-out infinite}
  .ort-hof{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;animation:welle 3.5s ease-out infinite}
  /* Die vier Wegpunkt-Verzögerungen standen als style="animation-delay:…" an
     den <circle>-Elementen (gleicher Grund wie oben: feste Werte). */
  .spur-ebene g > :nth-child(3),.spur-ebene g > :nth-child(4){animation-delay:.7s}
  .spur-ebene g > :nth-child(5),.spur-ebene g > :nth-child(6){animation-delay:1.4s}
  .spur-ebene g > :nth-child(7),.spur-ebene g > :nth-child(8){animation-delay:2.1s}
  .spur-ebene g > :nth-child(9),.spur-ebene g > :nth-child(10){animation-delay:2.8s}
  @keyframes leuchten{0%,100%{opacity:.45;r:3}50%{opacity:1;r:4}}
  @keyframes welle{0%{opacity:.55;r:4}70%,100%{opacity:0;r:17}}
  .dunst{position:fixed;inset:0;z-index:1;pointer-events:none;
    background:
      radial-gradient(ellipse 82% 70% at 50% 44%,transparent 42%,rgba(7,13,26,.34) 76%,rgba(7,13,26,.8) 100%),
      linear-gradient(180deg,rgba(7,13,26,.42),transparent 14%,transparent 80%,rgba(7,13,26,.9))}
  @media (prefers-reduced-motion:reduce){
    .spur{animation:none;stroke-dashoffset:0}
    .ort,.ort-hof{animation:none}.ort-hof{opacity:.25}
  }

  .buehne{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;
    align-items:center;justify-content:center;padding:72px 24px 48px;text-align:center}
  /* Leseschutz: dunkelt nur den Textbereich ab und laeuft weich aus,
     damit die Karte ringsum sichtbar bleibt. */
  .buehne::before{
    content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:min(1150px,104vw);height:min(1050px,108vh);z-index:-1;pointer-events:none;
    background:radial-gradient(ellipse 50% 46% at 50% 48%,
      rgba(5,10,20,.93) 0%,rgba(5,10,20,.88) 38%,rgba(5,10,20,.6) 62%,
      rgba(5,10,20,.28) 80%,transparent 100%);
  }
  .logo{width:auto;height:clamp(74px,11vw,104px);margin-bottom:26px;
    /* Etwas mehr Schein, seit das Logo selbst golden ist: sonst verschwimmt
       es mit dem warmen Licht der Karte dahinter. */
    filter:drop-shadow(0 2px 10px rgba(7,13,26,.85)) drop-shadow(0 0 34px rgba(251,191,36,.28))}
  .marke{font-size:.7rem;letter-spacing:.46em;text-transform:uppercase;
    color:var(--gold-warm);margin-bottom:30px;font-weight:600;
    text-shadow:0 1px 3px rgba(5,10,20,1),0 2px 16px rgba(5,10,20,.98)}
  h1{
    font-family:'Cinzel',Palatino,'Palatino Linotype','Book Antiqua',Georgia,serif;
    /* ⚠️ Der Titel lief auf schmalen Geräten aus dem Bild: das geschützte
       Leerzeichen im Markup erzwang eine Zeile, und die kleinste Stufe war
       mit 2.9rem dafür zu groß. Beides ist behoben. */
    font-size:clamp(2.1rem,9vw,6.4rem);font-weight:600;line-height:1.03;letter-spacing:-.01em;
    text-wrap:balance;
    background:linear-gradient(175deg,#fffbeb 8%,var(--gold-hell) 38%,var(--gold-warm) 88%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 3px 26px rgba(7,13,26,.9)) drop-shadow(0 0 60px rgba(251,191,36,.2));
    margin-bottom:20px;
  }
  .unterzeile{font-family:'Cinzel',Palatino,Georgia,serif;
    font-size:clamp(.98rem,2.5vw,1.28rem);color:var(--gold);letter-spacing:.14em;margin-bottom:38px;
    text-shadow:0 1px 3px rgba(5,10,20,1),0 2px 22px rgba(5,10,20,.98)}
  .teaser{max-width:610px;color:var(--text);font-size:clamp(1.02rem,2.4vw,1.2rem);
    margin-bottom:14px;text-wrap:balance;
    text-shadow:0 1px 3px rgba(5,10,20,1),0 2px 20px rgba(5,10,20,1),0 0 46px rgba(5,10,20,.95)}
  .teaser strong{color:var(--gold-hell);font-weight:600}
  .teaser-2{max-width:560px;color:var(--leise);font-size:1rem;margin-bottom:56px;
    text-shadow:0 1px 3px rgba(5,10,20,1),0 2px 18px rgba(5,10,20,.98)}

  /* Der Aufruf im ersten Bildschirm. Bewusst kein gefüllter Knopf: Es gibt
     noch nichts zu kaufen und nichts zu starten, nur etwas zu erfahren. Eine
     goldene Linie lädt ein, ohne etwas zu versprechen. */
  .ruf{margin:6px 0 46px}
  .ruf a{display:inline-flex;align-items:center;gap:.6em;min-height:44px;
    padding:11px 26px;border:1px solid rgba(251,191,36,.45);border-radius:999px;
    color:var(--gold-hell);text-decoration:none;font-size:.96rem;letter-spacing:.02em;
    background:rgba(251,191,36,.06);backdrop-filter:blur(4px);
    transition:background .3s,border-color .3s,transform .3s}
  .ruf a::after{content:"\2193";font-size:1.05em;opacity:.8}
  .ruf a:hover{background:rgba(251,191,36,.13);border-color:rgba(251,191,36,.7)}
  .ruf a:active{transform:translateY(1px)}
  .ruf a:focus-visible{outline:2px solid var(--gold-hell);outline-offset:3px}
  @media (prefers-reduced-motion:reduce){.ruf a{transition:none}}

  .saeulen{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    max-width:900px;width:100%;margin-bottom:60px;
    background:var(--linie);border:1px solid var(--linie);border-radius:16px;overflow:hidden}
  .saeule{padding:30px 24px;background:rgba(5,10,20,.9);backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(3px);transition:background .35s}
  .saeule:hover{background:rgba(251,191,36,.055)}
  .saeule .zeichen{font-size:1.35rem;margin-bottom:14px;display:block;color:var(--gold)}
  .saeule h2{font-family:'Cinzel',Palatino,Georgia,serif;font-size:1.04rem;
    color:var(--gold-hell);margin-bottom:10px;font-weight:600;letter-spacing:.03em}
  .saeule p{font-size:.93rem;color:var(--leise);line-height:1.6}

  .bald{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--linie);
    border-radius:999px;padding:12px 26px;font-size:.8rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);margin-bottom:34px;
    background:rgba(5,10,20,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(3px)}
  .puls{width:7px;height:7px;border-radius:50%;background:var(--gold);
    animation:puls 2.4s ease-in-out infinite}
  @keyframes puls{0%,100%{opacity:.35;box-shadow:0 0 0 0 rgba(251,191,36,.5)}
    50%{opacity:1;box-shadow:0 0 0 8px rgba(251,191,36,0)}}
  @media (prefers-reduced-motion:reduce){.puls{animation:none}}

  .anmeldung{width:100%;max-width:470px;padding:26px 24px;border-radius:16px;
    background:rgba(5,10,20,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(4px);
    border:1px solid rgba(251,191,36,.13)}
  .anmeldung > p{font-size:1rem;color:var(--text);margin-bottom:18px}
  /* Das E-Mail-Feld nimmt mit flex:1 die ganze Zeile, deshalb rutscht der
     Knopf auf schmalen Geräten in die zweite — und stand dort linksbündig
     unter einem Feld, das die volle Breite hat. `justify-content:center`
     wirkt nur dann, wenn tatsächlich umgebrochen wird: nebeneinander bleibt
     alles wie bisher, weil kein Platz frei ist. */
  .feldzeile{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .feldzeile input[type=email]{flex:1;min-width:200px;padding:14px 17px;font-size:.97rem;
    font-family:inherit;color:var(--text);background:rgba(255,255,255,.055);
    border:1px solid var(--linie);border-radius:10px;outline:none;transition:border-color .2s}
  .feldzeile input::placeholder{color:#5b6b82}
  .feldzeile input[type=email]:focus{border-color:var(--gold-warm);
    box-shadow:0 0 0 3px rgba(251,191,36,.1)}
  .feldzeile button{padding:14px 28px;font-size:.95rem;font-weight:600;font-family:inherit;
    cursor:pointer;color:#1a1204;background:linear-gradient(180deg,var(--gold-hell),var(--gold-warm));
    border:none;border-radius:10px;transition:transform .15s,filter .15s}
  .feldzeile button:hover{transform:translateY(-1px);filter:brightness(1.08)}

  .zustimmung{display:flex;gap:11px;align-items:flex-start;margin-top:16px;text-align:left}
  .zustimmung input[type=checkbox]{margin-top:.25em;width:17px;height:17px;flex-shrink:0;
    accent-color:var(--gold-warm);cursor:pointer}
  .zustimmung label{font-size:.83rem;color:var(--leise);line-height:1.5;cursor:pointer}
  .zustimmung a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

  .bestaetigung{text-align:center;color:var(--text)}
  .bestaetigung svg{color:var(--gold);margin-bottom:14px}
  .bestaetigung p{margin-bottom:9px;font-size:.97rem}
  .bestaetigung p strong{color:var(--gold-hell);font-size:1.08rem}
  .bestaetigung .hinweis{color:var(--leise);font-size:.86rem;margin-bottom:0}

  .schutz{margin-top:50px;font-size:.85rem;color:var(--leise);
    display:inline-flex;align-items:center;gap:10px;
    text-shadow:0 1px 3px rgba(5,10,20,1),0 2px 16px rgba(5,10,20,.98)}
  .schutz svg{flex-shrink:0;color:var(--gold-warm)}

  footer{position:relative;z-index:2;border-top:1px solid rgba(251,191,36,.09);
    padding:28px 24px;text-align:center;font-size:.82rem;color:#5b6b82}
  footer a{color:var(--leise);text-decoration:none;margin:0 12px}
  footer a:hover{color:var(--gold)}
  footer .ort-hinweis{margin-top:10px;font-size:.78rem}

/* Ausgelagert aus Inline-style-Attributen (CSP: style-src ohne 'unsafe-inline') */
.sr-nur{position:absolute;left:-9999px}
.ml-ziel{position:absolute;width:0;height:0;border:0;visibility:hidden}