/* ============================================================
   apiara — site / core.css
   Immer geladen. Reihenfolge ist bedeutsam: die Tokens zuerst.
   Alles ist auf `.site` gescopt: der SEO-Footer teilt sich das
   Dokument und benutzt Tailwind.
   ============================================================ */

/* ---------- components/site/theme.html.twig — Tokens, Reset, Typografie, Buttons, Keyframes ---------- */
/* ============================================================================
   TOKENS — semantisch benannt, damit ein Wechsel des Farbschemas nur diesen
   Block betrifft und keinen einzigen Regelkörper weiter unten.
   ========================================================================== */
:root{
  color-scheme:dark;
  /* Radius-Skala (theme-unabhängig). Anker 6/8/12/14/16/20/24 = die dominanten
     Ist-Werte (byte-identisch); nur Ausreißer werden auf die nächste Stufe angeglichen. */
  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:16px; --r-2xl:20px; --r-3xl:24px; --r-full:9999px;
  --sys:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  --bg-stack:
    radial-gradient(1200px 800px at 78% -8%, rgba(245,179,1,.14), transparent 60%),
    radial-gradient(1000px 900px at 8% 12%, rgba(232,130,12,.10), transparent 55%),
    radial-gradient(1400px 1200px at 50% 120%, rgba(245,179,1,.12), transparent 60%),
    linear-gradient(180deg,#0B0805 0%,#17100A 46%,#0C0805 78%,#0E0A06 100%);

  --heading:#FFF6E2;
  --text:#FBEAC6;
  --text-dim:rgba(251,234,198,.72);
  --text-mute:rgba(251,234,198,.46);
  --brand:#FBEAC6;

  --accent:#F5B301;
  --accent-bright:#FFC426;
  --accent-deep:#E8820C;
  --on-accent:#1C1403;
  --on-gold:#1C1403;

  --ok:#9BCB74;
  --ok-wash:rgba(155,203,116,.16);
  --danger:#FCA5A5;
  --danger-bg:rgba(220,38,38,.12);
  --danger-border:rgba(252,165,165,.35);

  --surface:rgba(26,18,11,.72);
  --surface-2:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  --surface-3:rgba(255,255,255,.03);
  /* Angehobene, DECKENDE Fläche für schwebende Elemente (Flash-Meldungen). Die
     halbtransparente `--surface` liegt optisch auf dem Seitengrund auf — eine
     Meldung, die über allem schwebt, muss sich davon abheben. */
  --surface-raised:linear-gradient(180deg,#2C2013,#231A0F);
  --border:rgba(245,179,1,.15);
  --border-strong:rgba(245,179,1,.30);

  --field-bg:rgba(255,255,255,.04);
  --field-border:rgba(251,234,198,.16);
  /* Deckendes Gegenstück zu --field-bg: der Autofill-Trick überdeckt Chromes gelben
     Kasten mit einem Inset-Schatten, und der braucht eine undurchsichtige Farbe. */
  --field-solid:#1C1510;

  --nav-bg:linear-gradient(180deg,rgba(11,8,5,.78),rgba(11,8,5,.3));
  --veil:
    linear-gradient(90deg,rgba(11,8,5,.94) 0%,rgba(11,8,5,.82) 32%,rgba(11,8,5,.44) 58%,rgba(11,8,5,.18) 78%,rgba(11,8,5,.4) 100%),
    linear-gradient(180deg,rgba(11,8,5,.6) 0%,transparent 24%,transparent 70%,#0E0A06 100%);
  --strip-bg:rgba(0,0,0,.3);
  --panel-bg:linear-gradient(160deg,rgba(33,23,8,.85),rgba(11,8,5,.7));
  --note-bg:rgba(0,0,0,.25);
  --eb-bg:linear-gradient(160deg,rgba(48,36,6,.75),rgba(12,10,6,.75));
  --eb-border:rgba(245,179,1,.3);
  --final-bg:transparent;

  --chip-bg:rgba(255,255,255,.03);
  --badge-bg:var(--surface);
  --eyebrow-bg:rgba(245,179,1,.06);
  --eyebrow-border:rgba(245,179,1,.22);
  --dot-ring:rgba(245,179,1,.18);
  --glow-wash:rgba(245,179,1,.14);
  --icon-bg:linear-gradient(145deg,rgba(245,179,1,.2),rgba(232,130,12,.1));
  --icon-soft:rgba(245,179,1,.14);

  --btn-primary-bg:linear-gradient(180deg,#FFC426,#F5B301 55%,#DFA000);
  --btn-primary-bg-hover:linear-gradient(180deg,#FFC426,#F5B301 55%,#DFA000);
  --btn-primary-shadow:0 14px 36px -16px rgba(245,179,1,.6);
  --btn-primary-shadow-hover:0 20px 46px -18px rgba(245,179,1,.72);
  --btn-gold-bg:linear-gradient(180deg,#FFC426,#F5B301);
  --btn-gold-bg-hover:linear-gradient(180deg,#FFD34D,#FFC426);
  --btn-gold-shadow:0 14px 34px -14px rgba(245,179,1,.7);
  --btn-gold-shadow-hover:0 20px 46px -16px rgba(245,179,1,.8);
  --hero-bg:linear-gradient(180deg,#2A1608,#1A1008);
  --orb-a:rgba(217,119,6,.5);
  --orb-b:rgba(251,191,36,.35);
  --orb-c:rgba(180,83,9,.45);
  --hero-veil:linear-gradient(180deg,rgba(20,12,6,.62),rgba(20,12,6,.88));
  /* Handlungs-Banner: im Dunkeln eine tiefe Bernstein-Flaeche statt eines
     leuchtenden Goldblocks. Der goldene Knopf traegt den Akzent allein. */
  --cta-bg:linear-gradient(135deg,#3A2510 0%,#241708 62%,#1B1108 100%);
  --cta-border:rgba(245,179,1,.20);
  --cta-fg:#FFF6E2;
  --btn-ghost-bg:rgba(255,255,255,.04);
  --btn-ghost-bg-hover:rgba(255,255,255,.08);
  --btn-ghost-border:rgba(251,234,198,.16);

  --glow-a:rgba(245,179,1,.4);
  --glow-b:rgba(232,130,12,.26);
  --phone-rim:0 0 0 1px rgba(245,179,1,.22),0 0 60px -10px rgba(245,179,1,.3);
  --plan-featured-bg:linear-gradient(180deg,rgba(40,28,8,.88),rgba(16,11,6,.88));
  --plan-featured-shadow:0 30px 70px -30px rgba(245,179,1,.5);

  --seat-bg:rgba(245,179,1,.1);
  --seat-border:rgba(245,179,1,.4);
  --seat-fg:#FFC426;
  --seat-taken-bg:rgba(255,255,255,.03);
  /* Eigener Akzent fürs Early-Bird-Panel: --accent-bright wäre auf dem hellen
     Amber-Panel zu blass, --accent-deep auf dem dunklen zu stumpf. */
  --eb-accent:#FFC426;

  --honeytext:linear-gradient(100deg,#FFC426,#F5B301 50%,#E8820C);
  --glyph:linear-gradient(180deg,#FFF6E2,#F5B301);
  --sel-bg:#F5B301;
  --sel-fg:#1C1403;

  --sh-sm:0 1px 2px rgba(0,0,0,.4),0 8px 22px -10px rgba(0,0,0,.6);
  --sh-md:0 2px 6px rgba(0,0,0,.5),0 26px 54px -20px rgba(0,0,0,.75);
  --sh-lg:0 40px 90px -30px rgba(0,0,0,.9);
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg-stack:
    radial-gradient(1200px 800px at 78% -8%, rgba(245,158,11,.10), transparent 60%),
    radial-gradient(1000px 900px at 8% 12%, rgba(217,119,6,.06), transparent 55%),
    linear-gradient(180deg,#FFFCF6 0%,#FFF7EA 62%,#FFFCF6 100%);

  --heading:#451a03;
  --text:#3A2A17;
  --text-dim:rgba(58,42,23,.70);
  --text-mute:rgba(58,42,23,.46);
  --brand:#78350f;

  --accent:#B45309;
  --accent-bright:#F59E0B;
  --accent-deep:#92400e;
  --on-accent:#FFFFFF;
  --on-gold:#3A2600;

  --ok:#4B6B34;
  --ok-wash:#EEF3E4;
  --danger:#B91C1C;
  --danger-bg:#FEF2F2;
  --danger-border:#FECACA;

  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#FFFFFF;
  --surface-raised:#FFFFFF;
  --border:#F2E4C6;
  --border-strong:#EBD9B4;

  --field-bg:#FFFFFF;
  --field-border:#EBD9B4;
  --field-solid:#FFFFFF;

  --nav-bg:linear-gradient(180deg,rgba(255,252,246,.9),rgba(255,252,246,.62));
  --veil:
    linear-gradient(90deg,rgba(255,252,246,.97) 0%,rgba(255,252,246,.92) 32%,rgba(255,252,246,.66) 54%,rgba(255,252,246,.3) 76%,rgba(255,252,246,.08) 100%),
    linear-gradient(180deg,rgba(255,252,246,.72) 0%,transparent 18%,transparent 74%,#FFFCF6 100%);
  --strip-bg:#FFFFFF;
  --panel-bg:linear-gradient(160deg,#FFF7EA,#FFFFFF);
  --note-bg:#FFFBEB;
  --eb-bg:linear-gradient(160deg,#FEF3C7,#FFFBEB 60%,#FFFFFF);
  --eb-border:#F59E0B;
  --final-bg:linear-gradient(180deg,#FFFCF6,#FFF7EA);

  --chip-bg:rgba(255,255,255,.72);
  --badge-bg:rgba(255,255,255,.92);
  --eyebrow-bg:rgba(255,255,255,.7);
  --eyebrow-border:#EBD9B4;
  --dot-ring:rgba(245,158,11,.18);
  --glow-wash:rgba(245,158,11,.12);
  --icon-bg:linear-gradient(145deg,#FEF3C7,#FFFBEB);
  --icon-soft:#FFFBEB;

  --btn-primary-bg:#B45309;
  --btn-primary-bg-hover:#92400e;
  --btn-primary-shadow:0 14px 32px -14px rgba(180,83,9,.6);
  --btn-primary-shadow-hover:0 20px 44px -16px rgba(180,83,9,.6);
  --btn-gold-bg:linear-gradient(180deg,#FBBF24,#F59E0B);
  --btn-gold-bg-hover:linear-gradient(180deg,#FCD34D,#FBBF24);
  --btn-gold-shadow:0 12px 28px -14px rgba(180,83,9,.42);
  --btn-gold-shadow-hover:0 18px 38px -16px rgba(180,83,9,.52);
  --hero-bg:linear-gradient(180deg,#FFF6E2,#FFFCF6);
  --orb-a:rgba(217,119,6,.16);
  --orb-b:rgba(251,191,36,.14);
  --orb-c:rgba(180,83,9,.12);
  --hero-veil:linear-gradient(180deg,rgba(255,250,238,.70),rgba(255,252,246,.92));
  --cta-bg:linear-gradient(135deg,#92400e,#78350f 62%,#B45309);
  --cta-border:transparent;
  --cta-fg:#FFFFFF;
  --btn-ghost-bg:rgba(255,255,255,.86);
  --btn-ghost-bg-hover:#FFFFFF;
  --btn-ghost-border:#EBD9B4;

  --glow-a:rgba(245,158,11,.34);
  --glow-b:rgba(251,191,36,.24);
  --phone-rim:0 0 0 2px rgba(120,53,15,.12);
  --plan-featured-bg:#FFFFFF;
  --plan-featured-shadow:0 30px 70px -30px rgba(245,158,11,.55);

  --seat-bg:rgba(255,255,255,.85);
  --seat-border:#F59E0B;
  --seat-fg:#B45309;
  --seat-taken-bg:#FEF3D9;
  --eb-accent:#92400e;

  --honeytext:linear-gradient(100deg,#F59E0B,#D97706 55%,#92400e);
  --glyph:linear-gradient(180deg,#D97706,#92400e);
  --sel-bg:#F59E0B;
  --sel-fg:#3A2600;

  --sh-sm:0 1px 2px rgba(120,53,15,.05),0 8px 22px -10px rgba(120,53,15,.16);
  --sh-md:0 2px 6px rgba(120,53,15,.06),0 26px 54px -20px rgba(120,53,15,.26);
  --sh-lg:0 40px 80px -26px rgba(120,53,15,.5);
}

/* ============ BASIS — alles unter .site gescopt ============ */
.site{margin:0;font-family:var(--sys);color:var(--text);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;background:var(--bg-stack);background-attachment:fixed}
.site *{margin:0;padding:0;box-sizing:border-box}
.site a{color:inherit;text-decoration:none}
.site img{max-width:100%;display:block}
.site ul{list-style:none}
.site ::selection{background:var(--sel-bg);color:var(--sel-fg)}
.site h1,.site h2,.site h3,.site h4{font-weight:800;letter-spacing:-.025em;line-height:1.06;color:var(--heading)}
.site section{scroll-margin-top:80px}
.site .wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.site :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)}
.site .skip{position:absolute;left:-9999px}
.site .skip:focus{left:24px;top:14px;z-index:99;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--r-sm);font-weight:700}

.site .eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);padding:8px 15px;border-radius:var(--r-full);
  border:1px solid var(--eyebrow-border);background:var(--eyebrow-bg);backdrop-filter:blur(6px)}
.site .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-bright);
  box-shadow:0 0 0 4px var(--dot-ring);animation:pulse 2.6s ease-in-out infinite}
/* padding-bottom gibt dem Farbverlauf Platz für Unterlängen (g, y, p): background-clip:text
   malt nur innerhalb der Elementbox — bei knapper line-height fällt die Unterlänge sonst
   heraus und wird transparent (sieht aus wie abgeschnitten). Bei inline-Nutzung ist das
   vertikale Padding layout-neutral (verschiebt keine Zeilen). */
.site .honeytext{background:var(--honeytext);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.12em;background-size:200% 200%;animation:gradient-shift 8s ease infinite}
.site .lead{color:var(--text-dim);font-size:clamp(1rem,2.1vw,1.18rem);line-height:1.62;max-width:56ch}

.site .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--sys);font-weight:700;
  font-size:1rem;padding:15px 26px;border-radius:var(--r-lg);cursor:pointer;border:1.5px solid transparent;white-space:nowrap;
  transition:transform .2s ease,box-shadow .28s var(--ease),background .2s,border-color .2s}
.site .btn svg{width:18px;height:18px}
.site .btn-primary{color:var(--on-accent);background:var(--btn-primary-bg);box-shadow:var(--btn-primary-shadow)}
.site .btn-primary:hover{transform:translateY(-2px);background:var(--btn-primary-bg-hover);box-shadow:var(--btn-primary-shadow-hover)}
.site .btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.site .btn-ghost{background:var(--btn-ghost-bg);color:var(--text);border-color:var(--btn-ghost-border);backdrop-filter:blur(8px)}
.site .btn-ghost:hover{transform:translateY(-2px);background:var(--btn-ghost-bg-hover);border-color:var(--accent)}
.site .btn-gold{color:var(--on-gold);background:var(--btn-gold-bg);box-shadow:var(--btn-gold-shadow)}
.site .btn-gold:hover{transform:translateY(-2px);background:var(--btn-gold-bg-hover);box-shadow:var(--btn-gold-shadow-hover)}
.site .btn .arw{transition:transform .18s ease}
.site .btn:hover .arw{transform:translateX(3px)}

/* Wortmark bleibt reiner Text — nur die Farbe folgt dem Modus. */
.site .brand{font-family:var(--sys);font-weight:800;font-size:1.375rem;color:var(--brand);letter-spacing:-.01em}

.site .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.site .reveal.in{opacity:1;transform:none}

/* Registriert, damit --rot beim Hover weich läuft statt zu springen.
   Browser ohne @property ignorieren die Regel — die Rotation schaltet dann hart um. */
@property --rot{syntax:'<angle>';initial-value:0deg;inherits:false}

@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-14px) rotate(var(--rot,0deg))}}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 var(--dot-ring)}50%{opacity:.7;box-shadow:0 0 0 6px transparent}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Basis SICHTBAR — Einblendung nur als Enhancement (Safari verwirft die
   animation-Shorthand mit var(); mit `both` + from{opacity:0} bleibt Text sichtbar). */
.site .rise{animation:fadeUp .85s var(--ease) both}
.site .d1{animation-delay:.08s}.site .d2{animation-delay:.16s}.site .d3{animation-delay:.24s}.site .d4{animation-delay:.32s}

@media (prefers-reduced-motion:reduce){
  .site *{animation:none!important;scroll-behavior:auto}
  .site .reveal{opacity:1;transform:none;transition:none}
}
@media(max-width:520px){
  .site .wrap{padding:0 18px}
}

/* ---------- assets/styles/site/core.css — Cookie-Banner, PWA-Prompt, App-Banner in der Site-Palette ---------- */
/* ---- Cookie-Banner ---- */
#cookie-consent-banner{background:var(--surface-raised);border-top-color:var(--border);box-shadow:var(--sh-lg)}
#cookie-consent-title{color:var(--heading)}
#cookie-consent-desc{color:var(--text-dim)}
#cookie-consent-desc a{color:var(--accent)}
#cookie-consent-desc a:hover{color:var(--accent-bright)}
#cookie-consent-reject{border-color:var(--border-strong);color:var(--text-dim)}
#cookie-consent-reject:hover{background:var(--chip-bg);color:var(--text)}
#cookie-consent-accept{background:var(--accent);color:var(--on-accent)}
#cookie-consent-accept:hover{background:var(--accent-bright)}

/* ---- Native-App-Banner + PWA-Install-Prompt ---- */
[data-app-banner],[data-pwa-install]{background:var(--surface-raised);border-color:var(--border)}
[data-app-banner] p:first-child,[data-pwa-install] p:first-child{color:var(--heading)}
[data-app-banner] p + p,[data-pwa-install] p + p{color:var(--text-mute)}
[data-app-banner-link],[data-pwa-install-btn]{background:var(--accent);color:var(--on-accent)}
[data-app-banner-link]:hover,[data-pwa-install-btn]:hover{background:var(--accent-bright)}
[data-app-banner-dismiss],[data-pwa-dismiss-btn]{color:var(--text-mute)}
[data-app-banner-dismiss]:hover,[data-pwa-dismiss-btn]:hover{color:var(--text);background:var(--chip-bg)}

/* Offline- und Sync-Banner brauchen nichts: dunkles Amber mit weisser Schrift
   traegt in beiden Modi. */

/* ---------- components/site/nav.html.twig — Kopfleiste ---------- */
.site .nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);
  background:var(--nav-bg);border-bottom:1px solid var(--border)}
.site .nav.static{position:sticky}
.site .nav-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.site .nav-links{display:flex;align-items:center;gap:30px}
.site .nav-links a{font-size:.94rem;font-weight:600;color:var(--text-dim);transition:color .18s}
.site .nav-links a:hover{color:var(--accent)}
.site .nav-links a[aria-current="page"]{color:var(--accent)}
.site .nav-cta{display:flex;align-items:center;gap:16px}
.site .nav-cta .btn{padding:11px 20px;font-size:.9rem;border-radius:var(--r-md)}
.site .nav-login{font-size:.94rem;font-weight:600;color:var(--text-dim)}
.site .nav-login:hover{color:var(--text)}
/* Der volle CTA-Satz sprengt auf ~375px die Leiste — dort die Kurzfassung. */
.site .cta-min{display:none}
@media(max-width:1140px){.site .nav-links{display:none}}
@media(max-width:760px){.site .nav-login{display:none}}
@media(max-width:560px){.site .cta-full{display:none}.site .cta-min{display:inline}}
/* Mobile-Burger: erscheint, sobald die Mittelnavigation (<=1140px) ausgeblendet ist. */
[x-cloak]{display:none!important}
.site .nav-burger{display:none;background:transparent;border:0;color:var(--text-dim);padding:8px;cursor:pointer;border-radius:var(--r-sm)}
.site .nav-burger:hover{color:var(--accent);background:var(--chip-bg)}
.site .nav-burger svg{width:24px;height:24px;display:block}
.site .nav-mobile{display:none}
@media(max-width:1140px){
  .site .nav-burger{display:inline-flex;align-items:center;justify-content:center}
  .site .nav-mobile{display:flex;flex-direction:column;gap:2px;padding:10px 20px 16px;
    background:var(--nav-bg);border-top:1px solid var(--border)}
  .site .nav-mobile a{padding:12px;font-size:1rem;font-weight:600;color:var(--text-dim);border-radius:var(--r-sm)}
  .site .nav-mobile a:hover,.site .nav-mobile a[aria-current="page"]{color:var(--accent);background:var(--chip-bg)}
  .site .nav-mobile-login{margin-top:4px;padding-top:14px;border-top:1px solid var(--border);border-radius:0}
}

/* ---------- components/site/lang.html.twig — Sprachumschalter ---------- */
.site .lang{position:relative}
/* Hoehe und Radius spiegeln `.theme-toggle` — die beiden stehen nebeneinander. */
.site .lang > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  height:40px;padding:0 12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--chip-bg);
  color:var(--text-dim);font-size:.8rem;font-weight:700;letter-spacing:.04em;
  transition:color .18s,border-color .18s}
.site .lang > summary::-webkit-details-marker{display:none}
.site .lang > summary:hover{color:var(--heading);border-color:var(--border-strong)}
.site .lang > summary svg{width:13px;height:13px;opacity:.7;transition:transform .18s}
.site .lang[open] > summary svg{transform:rotate(180deg)}
.site .lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:132px;padding:6px;
  border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface-raised);
  box-shadow:var(--sh-lg);backdrop-filter:blur(12px)}
.site .lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--text-dim);font-size:.875rem;font-weight:600;transition:background .15s,color .15s}
.site .lang-menu a:hover{background:var(--chip-bg);color:var(--heading)}
.site .lang-menu a[aria-current="true"]{color:var(--accent-bright);background:var(--chip-bg)}
.site .lang-menu .code{font-size:.7rem;letter-spacing:.06em;opacity:.6}
/* Der Umschalter ist Zusatznavigation — auf schmalen Geraeten weicht er dem CTA. */
@media(max-width:860px){
  .site .lang{display:none}
}

/* ---------- components/site/flashes.html.twig — Zentrierte Meldungen ---------- */
.site-flash-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;
  pointer-events:none;gap:12px;grid-auto-flow:row;align-content:center}
/* Deckende, angehobene Fläche statt der halbtransparenten `--surface` — sonst
   verschwimmt die Meldung mit dem Seitengrund darunter. */
.site-flash{pointer-events:auto;display:flex;align-items:flex-start;gap:13px;min-width:min(420px,100%);max-width:min(520px,100%);
  padding:16px 16px 16px 18px;border-radius:var(--r-2xl);font-family:var(--sys);
  background:var(--surface-raised);border:1px solid var(--border-strong);box-shadow:var(--sh-lg)}
.site-flash .ic{width:34px;height:34px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;margin-top:1px}
.site-flash .ic svg{width:18px;height:18px}
.site-flash p{flex:1;min-width:0;margin:0;font-size:.95rem;font-weight:700;line-height:1.4;color:var(--heading)}
.site-flash button{flex:none;padding:5px;border:0;border-radius:var(--r-sm);background:none;cursor:pointer;color:var(--text-mute);
  display:inline-flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.site-flash button:hover{color:var(--text);background:var(--chip-bg)}
.site-flash button svg{width:15px;height:15px}
.site-flash.is-success .ic{background:var(--ok-wash);color:var(--ok)}
.site-flash.is-error .ic{background:var(--danger-bg);color:var(--danger)}
.site-flash.is-warn .ic{background:var(--icon-soft);color:var(--accent)}
.site-flash.is-info .ic{background:var(--icon-soft);color:var(--accent)}
.site-flash.is-success{border-color:var(--ok)}
.site-flash.is-error{border-color:var(--danger-border)}
@media(prefers-reduced-motion:reduce){.site-flash{transition:none!important}}


/* ---------- layout_public.html.twig — Seitengeruest ---------- */
    /* Tailwinds Preflight laeuft mit (app.css), setzt aber keine Hintergrundfarbe.
       Ohne die naechste Zeile blitzt beim Ueberscrollen Browser-Weiss durch. */
    html{background:var(--bg-stack);background-attachment:fixed}
    /* Die feste Kopfleiste ueberdeckt sonst den Seitenanfang. */
    .site .page{padding-top:70px}