/* ============================================================
   SpiFa-Fachärztetag 2027 — SITE v3 (BOLD UPGRADE)
   Baut auf design/stilA.css auf. Alle Klassen der v1/v2 bleiben
   kompatible — Visualsprache wird deutlicher, bolder, editorial.
   Regeln: STYLE_GUIDE.html (6 CD-Farben, flach, 1 CTA, A11y AA)
   ============================================================ */

:root{
  --offwhite:#f5f0eb;
  --dur-fast:.18s; --dur-med:.35s; --dur-slow:.7s;
  --ease:cubic-bezier(.22,.68,0,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
}
html,body{overflow-x:clip} /* clip statt hidden — hidden bricht position:sticky im Header */
html{background:var(--offwhite)} /* alt-2.8.105 (Sebastian 30.09): CANSAS-GRUND explizit (war Browser-Default Weiß) — wird von shared.js bei Footer-Sichtbarkeit auf --ink umgestellt, damit die transluzente iOS-Safari-Bottom-Bar das Dunkelblau dahinter sieht (sonst „harte weiße Kante" am Seitenende). */
::selection{background:var(--accent);color:#fff}

/* ── A11y: Focus + Reduced Motion ── */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.pill:focus-visible,.navpill a:focus-visible,.ag:focus-visible,.logo:focus-visible{outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Pills: kräftiger ── */
.pill{transition:transform var(--dur-fast) var(--ease),background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.pill:active{transform:scale(.97)}
.pill .ar{transition:transform var(--dur-fast) var(--ease)}
.pill:hover .ar{transform:translate(2px,-2px)}
.pill--lg{padding:19px 38px;font-size:14.5px}
.hd .navpill a{padding:11px 20px;font-size:13px;transition:background var(--dur-fast),color var(--dur-fast)}

/* ══ v3 SIGNATUR 1: DIAGONALER FUCHSIA-TICKER (Container: Bold Blue, Test 05.09) ══ */
/* Container = Bold Blue Fläche über voller Breite; das Fuchsia-Band bleibt diagonal INNERHALB und ragt über die Containerkanten */
.ticker{background:var(--blue);position:relative;z-index:130;margin:0;padding:14px 0} /* v-alt-1.0.0: z-index 130 > Nav (120) — Ticker bleibt beim Scrollen im Vordergrund */
.ticker .band{position:absolute;left:0;right:0;top:calc(50% + 15px);height:60px;background:#e63264;transform:translateY(-50%) rotate(-1.6deg) scale(1.06);overflow:hidden;display:flex;align-items:center} /* 25.09 Client-FB: SPIFA-FUCHSIA #E63264 — Ticker soll mehr herausstechen */
.ticker .track{display:flex;gap:0;width:max-content;animation:tickflat 26s linear infinite;padding:0}
/* v-alt-2.8.5: LOOP-SPRUNG-FIX (offen seit 16.09). translateX(-50%) = Subpixel-
   Rundung am Loop-Punkt (Track/2 vs. Copy-A-Breite unterscheiden sich um <1px).
   JS (shared.js) misst Copy-A-Breite pixelgenau → --shift auf .ticker (px-Wert).
   Fallback ohne JS bleibt -50% (wie bisher). Separator (✦) UNANGETASTET. */
@keyframes tickflat{from{transform:translateX(0)}to{transform:translateX(var(--shift, -50%))}}
.ticker:hover .track{animation-play-state:paused}
.ticker .ti{display:inline-flex;align-items:center;position:relative;padding:0 33px;font-size:12px;font-weight:900;letter-spacing:.26em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* v0.4.47: Separator (✦) EXAKT mittig zwischen Ende des vorherigen Textes und
   Anfang des nächsten. Lücke = 33px (rechtes Padding prev.) + 33px (linkes Padding
   dieses Items) = 66px → Mitte = linkes Item-Rand = left:0 (translate -50% zentriert).
   v0.4.46-Fehler: left:33px = Text-Start → Stern überlappte den ersten Buchstaben.
   v0.4.45-Istzustand: Stern im Flow, wirkte leicht „angehaftet". */
.ticker .ti .st{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);color:var(--ink);opacity:.55;font-size:14px}
@keyframes tickflat{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:760px){.ticker{transform:rotate(-1deg) scale(1.04) translateY(-8px);padding:12px 0}.ticker .ti{font-size:10.5px;letter-spacing:.2em;padding:0 18px}}
@media (prefers-reduced-motion:reduce){.ticker .track{animation:none;padding:15px 24px}}

/* ══ v3 HERO: EDITORIAL, LINKSBÜNGIG, WASSERZEICHEN ══ */
.hero{position:relative;overflow:hidden;padding:84px 0 30px}
/* v-alt-2.0.0: HERO-SLIDESHOW (ersetzt die alt-0.3.0 hardgecodete Foto-Regel).
   Layer-Reihenfolge (von unten):
   1. --ink (Midnight-Sky, Basis — bleibt bei 0 Fotos = reines Midnight-Design wie Live)
   2. .hero-slides (absolute, 1–3 Fotos, Crossfade + Ken-Burns — Keyframes kommen inline aus PHP)
   3. .hero-scrim (Midnight-Gradient: oben 80%, unten 100% — Lesbarkeit, wie alt-0.4.0)
   4. .wm (Wasserzeichen "27", z-1) + Content (.wrap, z-2) */
.hero-slides{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(15,30,60,.8) 0%,rgba(15,30,60,1) 100%)}
.hero .cta{margin-top:54px}
/* TEST 05.09 — ✅ BESTÄTIGT (Sebastian): Display-Headlines kleinschreibung. Micro-Labels, Pills, Ticker bleiben Uppercase (Signatur). */
/* alt-2.8.73 (Sebastian-FB 29.09): KLEINSCHR. RAUS — Display-Headlines zeigen jetzt exakt, wie sie im WP-Backend stehen (Kunde entscheidet Case). Micro-Labels/Pills/Badges/Nav/Ticker bleiben Uppercase (Signatur). */
.hero h1{text-transform:none}
.hero .yr{text-transform:none}
.sec h2,.sechead h2,.pagehero h1,.legalpage h1,.dbody h1,.taghead h3,.channelcard .txt h3{text-transform:none}
/* v0.4.11: SPEAKER-NAMEN in Normal-Schreibweise (vorher text-transform:lowercase
   aus dieser Regel) — Dr. med. Anna Berger statt „dr. med. anna berger" */
.spk .nm h3{text-transform:none}
/* ══ v-alt-2.2.0: MOBILE-BURGER-MENÜ (≤960px) ══
   Burger rechtsbündig in der Header-Zeile (gleiche Höhe wie Logo),
   Anmelden-Button + Nav-Zeile werden mobile ausgeblendet (eine Zeile).
   Bottom-Sheet: dunkelblau, schiebt von UNTEN, Höhe = Content,
   abgerundete obere Ecken (Apple-Card), Menüpunkte + Anmelden + Datum.
   z-index 200 = über Sticky-Header (120), Ticker (130) + Sticky-CTA (120). */
.burger{display:none}
/* v-alt-2.2.1: Sheet + Scrim auf DESKTOP komplett unsichtbar (default) —
   ohne diese Base-Regel renderten .mnav/.mscrim im MQ-Freien Raum als
   normaler Inline-Text im Header ("Start Programm ... Anmelden ... Datum"). */
.mscrim,.mnav{display:none}
/* v-alt-2.2.0: Beim Öffnen hebt der Sticky-Header-Wrapper (Sticky-Context) sein z-index
   über den Ticker (130), damit Scrim + Sheet wirklich die ganze Seite bedecken. */
.wp-site-blocks>.wp-block-template-part.z-top{z-index:300}
@media (max-width:960px){
  .burger{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
    width:46px;height:46px;border:0;border-radius:10px;background:transparent;cursor:pointer;padding:0}
  .burger .bx{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--offwhite);
    transition:transform .3s var(--ease),opacity .2s}
  .burger[aria-expanded="true"] .bx:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] .bx:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] .bx:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Header: NUR eine Zeile (Logo links, Burger rechts) — keine zweite Nav-Zeile */
  .hd .wrap{height:var(--hh);flex-wrap:nowrap;row-gap:0;padding-top:0;padding-bottom:0}
  .hd .navpill{display:none}
  .hd .right .pill--ink{display:none}
  /* Bottom-Sheet (Apple-Card-Style) */
  .mscrim,.mnav{display:block}
  .mscrim{position:fixed;inset:0;z-index:199;background:rgba(8,15,32,.55);opacity:0;visibility:hidden;
    transition:opacity .35s var(--ease),visibility 0s .35s}
  .hd.open .mscrim{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
  .mnav{position:fixed;left:0;right:0;bottom:0;z-index:200;
    transform:translateY(100%);visibility:hidden;
    transition:transform .42s var(--ease),visibility 0s .42s}
  .hd.open .mnav{transform:translateY(0);visibility:visible;transition:transform .42s var(--ease)}
  .mnav-in{background:var(--blue);border-radius:24px 24px 0 0;
    padding:14px 24px calc(26px + env(safe-area-inset-bottom));
    box-shadow:0 -18px 50px rgba(8,15,32,.45);
    max-height:82vh;overflow-y:auto}
  .mnav-in::before{content:"";display:block;width:40px;height:4px;border-radius:2px;
    background:rgba(245,240,235,.35);margin:0 auto 18px}
  .mnav-links{display:flex;flex-direction:column;gap:2px}
  .mnav-links a{color:var(--offwhite);text-decoration:none;font-size:15px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;padding:15px 4px;
    border-bottom:1px solid rgba(245,240,235,.14)}
  .mnav-links a.active{color:#fff;text-decoration:underline;text-decoration-color:var(--accent);
    text-decoration-thickness:2px;text-underline-offset:8px}
  /* alt-2.8.112 (Sebastian 30.09): Mobile-Nav „Anmelden"-Button = RUND wie alle anderen Buttons
     (war border-radius:14px, jetzt var(--rp)=999px wie .pill) — Sebastian: „die ecken maximal
     abrunden, wie bei allen anderen buttons auch" */
  .mnav-anm{display:block;margin-top:18px;background:var(--offwhite);color:var(--accent);
    text-decoration:none;text-align:center;font-size:14px;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;padding:16px 20px;border-radius:var(--rp)}
  .mnav-date{margin:14px 0 0;text-align:center;color:rgba(245,240,235,.65);
    font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
  /* reduced-motion: Sheet ohne Slide (bleibt sonst 0.01ms → springt) */
  @media (prefers-reduced-motion:reduce){
    .mnav,.mscrim{transition:none}
    .burger .bx{transition:none}
  }
}
/* ══ ENDE BURGER-MENÜ ══ */
/* 05.09 — Agenda-Sessionstitel, Video-/Newsletter-/CTA-Headlines: normale gemischte Schreibweise */
.ag .bd h3,.vside h3,.news h2,.ctaband h2{text-transform:none}

/* ══ HEADER IN BOLD-BLUE (05.09) — aktiv im Design. v-alt-2.1.1: NUR die
   Nav-Regeln (Pille/Hover/aktive) entfernt — die gehören jetzt zur
   Teal-Variante (Outline weg, aktive = Teal-Unterlinie). Blue-Header,
   weißes Logo, weißer Anmelden-Button bleiben. ══ */
.hd{background:var(--blue)}
.hd .brand img{filter:brightness(0) invert(1)} /* Logo → Weiß (bold-blue wäre unsichtbar) */
.hd .navpill a{color:var(--offwhite)} /* Nav-Text auf Blue-Header: Weiß (v-alt-2.1.1: keine Hover-Bubble, keine Aktive-Pille) */
/* v-alt-2.8.66 (Sebastian-FB 29.09): Header-„Anmelden"-Button OUTLINE (transparente Füllung, weißer Rand + weißer Text) statt weißer Füllung — Hover füllt WEISS mit Blue-Text. Folgt dem etablierten Blue-Outline-Muster (.sec--blue .pill--line). War: weiß gefüllt + Teal-Text, kein sichtbarer Hover (Regel überschrieb .pill--ink:hover). */
.hd .right .pill--ink{background:transparent;color:var(--offwhite);border-color:var(--offwhite)}
.hd .right .pill--ink:hover{background:var(--offwhite);color:var(--blue)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,240,235,.13) 1.4px,transparent 1.5px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 82%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 82%);}
.hero .wrap{position:relative;z-index:2}
.hero .wm{position:absolute;right:-4vw;bottom:-7vw;z-index:2;font-size:min(46vw,560px);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--ink);-webkit-text-stroke:2px rgba(245,240,235,.14);paint-order:stroke fill;user-select:none;pointer-events:none} /* v-alt-2.0.0: z-1→z-2, über dem Slideshow-Scrim */
.hero .sidelabel{position:absolute;right:22px;top:64px;writing-mode:vertical-rl;font-size:10px;font-weight:800;letter-spacing:.5em;text-transform:uppercase;color:rgba(245,240,235,.4);z-index:2}
@media (max-width:960px){.hero .sidelabel{display:none}}
.hero .livetop{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:44px;padding-bottom:16px;border-bottom:1px solid rgba(245,240,235,.22)}
.hero h1{text-align:left;font-size:clamp(56px,11.5vw,168px);line-height:.88}
.hero .lead{margin-left:0;max-width:560px;font-size:17px;text-align:left}
.hero .lead strong{font-weight:800} /* 25.09: Intro-Erstsatz bold (Trennung hero_lead_bold/hero_lead_rest) */
.hero .cta{justify-content:flex-start}
/* v0.4.36: MOBILE — Hero-Headline passte auf iPhone 12 (390px) nicht
   („fachärztetag" lief über den Canvas, User-FB 11.09) → Schrift minimal kleiner. */
@media (max-width:600px){.hero h1{font-size:clamp(46px,11vw,168px)}}
.outline{color:var(--offwhite);-webkit-text-stroke:0 var(--offwhite);paint-order:stroke fill}
@media (max-width:600px){.outline{color:var(--offwhite)}}

/* Live-Indikator */
.live{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,235,.9)}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--pulse);box-shadow:0 0 0 0 rgba(250,100,50,.55);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(250,100,50,.55)}70%{box-shadow:0 0 0 10px rgba(250,100,50,0)}100%{box-shadow:0 0 0 0 rgba(250,100,50,0)}}

/* Info-Karten: alle dunkelblau (Ink) mit Outline-Farbe (Off-White) — ruhig, einheitlich (05.09) */
.infos{margin-top:64px;padding-bottom:0}
.info{background:var(--ink);border:2px solid rgba(245,240,235,.25);color:var(--offwhite)} /* alt-2.8.114 (Sebastian 30.09): graue Outline WIEDER ZURÜCK (Sebastian nach 2.8.113-Vergleich: „finde es im direkten Vergleich mit der Outline besser, müssten die also wieder zurückholen") — border:2px solid rgba(245,240,235,.25) wieder drin wie vor 2.8.113 */
.info .k{color:rgba(245,240,235,.65)}
.info .v{font-size:22px;color:var(--offwhite)}
.info .v .big{font-size:34px}
.info .s{color:rgba(245,240,235,.55)}
.info:nth-child(2){background:var(--ink);color:var(--offwhite)}
.info:nth-child(2) .k{color:rgba(245,240,235,.65)}
.info:nth-child(2) .v{color:var(--offwhite)}
.info:nth-child(2) .s{color:rgba(245,240,235,.55)}

/* ══ v3 STATS-BAND: Full-Bleed, riesige Zahlen, 2px-Trenner ══ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;padding-bottom:0;border-top:2px solid rgba(245,240,235,.28);border-bottom:2px solid rgba(245,240,235,.28)}
.stat{border:none;border-left:2px solid rgba(245,240,235,.28);border-radius:0;background:transparent;padding:34px 26px;text-align:left}
.stat:first-child{border-left:none}
.stat .n{font-size:clamp(44px,5.4vw,76px);font-weight:900;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.stat .n .u{font-size:.5em;color:var(--offwhite);margin-left:3px}
.stat .l{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,240,235,.65);margin-top:12px}

/* ══ v3 COUNTDOWN-BAND: Full-Bleed, riesig, flach ══ */
.cd{display:grid;grid-template-columns:repeat(4,1fr);margin-top:0;padding:0}
.cd .cell{background:transparent;border:none;border-radius:0;padding:36px 26px;text-align:left}
.cd .num{font-size:clamp(48px,6.4vw,96px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--offwhite)}
.cd .lbl{font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,240,235,.6);margin-top:12px}
.cd .cell.hot .num{color:var(--offwhite)}
.cd .cell.hot{background:transparent}
@media (max-width:760px){
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:26px 20px}
  .stat:nth-child(odd){border-left:none}
  .stat:nth-child(n+3){border-top:2px solid rgba(245,240,235,.28)}
  .cd{grid-template-columns:1fr 1fr}
  .cd .cell{padding:28px 20px}
  .cd .cell:nth-child(n+3){border-top:2px solid rgba(245,240,235,.28)}
}

/* ══ v3 SEKTIONEN: Nummer + großzügiger Rhythmus ══ */
body{counter-reset:sec}
.sec{counter-increment:sec;position:relative;padding:120px 0;isolation:isolate} /* alt-2.8.116: isolation:isolate — .sec = Stack-Context, damit .sec::before (z-index:-1) über dem Section-Hintergrund, aber UNTER ALLEM Content gemalt wird (Nummern 01–05) */
.sec::before{content:"0" counter(sec);position:absolute;top:44px;right:28px;font-size:clamp(72px,10vw,140px);font-weight:900;line-height:1;letter-spacing:-.03em;color:#fff;-webkit-text-stroke:2px rgba(15,30,60,.13);paint-order:stroke fill;pointer-events:none;user-select:none;z-index:-1} /* alt-2.8.116: z-index:-1 + .sec isolation:isolate — Nummer IMMER unter dem Section-Content (war: kein z-index → inkoherent, mal über Headlines) */
.sec--white::before{color:#fff;-webkit-text-stroke-color:rgba(15,30,60,.11)}
.sec--offwhite::before{color:var(--offwhite);-webkit-text-stroke-color:rgba(15,30,60,.11)} /* alt-2.8.133 (Sebastian 01.10): Nummer-Füllung = Sektions-Hintergrund (Off-White) statt #fff — konsistent mit sec--surface/sec--ink Muster */ /* v-alt-2.8.69: große Sektions-Nummer wie sec--white (heller Grund → dunkle Kontur) */
.sec--surface::before{color:var(--surface)}
.sec--ink::before{color:var(--ink);-webkit-text-stroke-color:rgba(245,240,235,.15)}
.sechead h2{font-size:clamp(38px,6.4vw,88px);line-height:.95}
.sechead p{max-width:460px;font-size:16px}
.sechead .eyebrow .mlabel{font-size:12px}
@media (max-width:960px){.sec{padding:84px 0}}

/* Tag-Badges (Tag 1 / Tag 2): Off-White statt dunkelblau/teal (05.09) */
.taghead .b{background:var(--offwhite);color:var(--ink);border:2px solid rgba(15,30,60,.18)}
/* 4.2 Client-FB 25.09: Archiv Tag-Badges — Tag1=ORANGE, Tag2=BLAU (wie Startseite B1).
   v-alt-2.8.67 (Sebastian-FB 29.09): Spezifität .b--t1/.b--t2 → .b.b--t1/.b.b--t2 (2→3 Klassen).
   Grund: die spätere Basis-Regel .taghead .b{background:var(--ink)} (unten, „Programm: Tag-Header")
   hat GLEICHE Spezifität (2) und stand später in der Kaskade → hat Orange/Blau auf /programm/
   weggedrückt (Badges waren dunkelblau statt orange/blau). Mit 3-Klassen-Spezifität gewinnen die
   Tag-Farben jetzt unabhängig von der Datei-Reihenfolge (Home bleibt unverändert — .agcol--N-Regeln). */
.taghead .b.b--t1{background:#fa6432;color:#fff;border:none;font-weight:900;letter-spacing:.22em}
.taghead .b.b--t2{background:#00468c;color:#fff;border:none;font-weight:900;letter-spacing:.22em}
/* v-alt-2.8.22 Client-FB 25.09: Archiv-Badges "Tag 1/Tag 2 · Datum" — Outline raus.
   NUR im Archiv (.taghead OHNE .agcol-head); Home .agcol-Badges (B1 orange/blau) behalten den Border. */
.taghead:not(.agcol-head) .b{border:none}
.taghead .b--teal{background:var(--offwhite)}
/* Sektionen auf Midnight (Impressionen): Kontur-Button muss hell bleiben (05.09) */
.sec--ink .pill--line{color:var(--offwhite);border-color:rgba(245,240,235,.6)}
.sec--ink .pill--line:hover{background:var(--offwhite);color:var(--ink)}
/* v0.4.13: Video-Box ohne Rahmen — Container ist exakt 16:9 (aspect-ratio:16/9),
   das Video füllt die Box vollständig; die 2px-Kontur (05.09) sah bei gefülltem
   16:9-Video aus wie ein Fehler (User-FB 10.09). */
/* ══ 05.09 — SPEAKERS SEKTION AUF BOLD BLUE ══ */
.sec--blue{background:var(--blue)}
.sec--blue::before{color:var(--blue);-webkit-text-stroke-color:rgba(245,240,235,.16)}
.sec--blue .sechead h2{color:var(--offwhite)}
.sec--blue .sechead p{color:rgba(245,240,235,.68)}
.sec--blue .sechead .eyebrow .mlabel{color:var(--offwhite)}
.sec--blue .sechead .eyebrow .mlabel .bk{opacity:.5}
.sec--blue .pill--line{color:var(--offwhite);border-color:rgba(245,240,235,.6)}
.sec--blue .pill--line:hover{background:var(--offwhite);color:var(--blue)}
/* Feature-Karte: Fuchsia statt Midnight — hebt sich kräftig vom Blue ab */
.sec--blue .spk--feat{background:#0f1e3c} /* v-alt-2.4.1: NIGHT BLUE #0F1E3C (Sebastian-Korrektur: „night blue! #0f1e3c", nicht var(--blue)) */
.sec--blue .spk--feat .nm .role{color:var(--teal)} /* alt-2.8.135 (Sebastian 01.10): KATEGORIE-ZEILE = Spifa-Teal (war: Off-White auf Blue) */
.sec--blue .spk--feat .nm .org{color:rgba(245,240,235,.6)}
.sec--blue .spk--feat .nm .bio{color:rgba(245,240,235,.78)}
/* Standard-Karten: Off-White bleiben (Karten auf Blue), Kontur kräftiger */
/* v0.4.11: TEST — Outline der nicht-Präsidentin-Karten entfernt (User-Wunsch).
   Präsidentin-Karte (.spk--feat) bleibt abgesetzt (Fuchsia). */
.sec--blue .spk:not(.spk--feat){border:none}
/* ══ ENDE ══ */

/* ══ v3 SPEAKERS: Ken-Burns + kräftigeres Bento (alle Karten gleiche Höhe) ══ */
/* v0.4.10: FIXE WERTE — jede Karte exakt 560px, jedes Bild exakt 240px.
   Vorher: grid-auto-rows minmax(440px,auto) + .ph flex:1 → Bildhöhe schwankte
   je nach Textlänge (Karten unterschiedlich hoch). Jetzt: fixe Werte.
   v0.4.11: Textabschnitt etwas niedriger → Karte 560px → 510px. */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:620px;gap:18px} /* alt-2.8.115: 640→620px (Sebastian 30.09: Speaker-Cards 20px niedriger) · alt-2.8.93: 560→640px (Karte etwas höher) */
.bento .spk{grid-column:span 1;display:flex;flex-direction:column}
.bento .spk:not(.spk--feat){height:100%;min-height:0}
.bento .spk .ph{flex:0 0 auto;height:240px;aspect-ratio:auto;min-height:0;overflow:hidden}
.spk .nm .bio{font-size:13px;color:rgba(15,30,60,.6);margin-top:10px;line-height:1.5;
  overflow:visible} /* alt-2.8.84: line-clamp raus — Fließtext fließt weiter, Fade passiert im .spk-foot-Gradient (Karte overflow:hidden) */
.bento .spk{transition:transform var(--dur-med) var(--ease)}
/* Ken-Burns läuft auf der Hintergrund-Ebene — die Tags (.ph .tag) bleiben starr oben links */
.spk .ph{background:none}
.spk .ph::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(160deg,rgba(0,125,105,.9),rgba(0,70,140,.9)),linear-gradient(0deg,#334,#778);
  background-blend-mode:multiply,normal;background-size:cover;background-position:center;
  animation:kenburns 16s ease-in-out infinite alternate}
.spk .ph .tag{z-index:3}
/* v-alt-2.8.23 Client-FB 25.09: ANIMIERTE TAGGS — weisse LEUCHTENDE KANTE (B4 neu).
   KEIN Puls, KEINE Groessen-Aenderung: eine weisse 2px-Kante als Gradient (Kopf 50% weiss
   -> Schweif 0% weiss) laeuft kontinuierlich um den Tag — kommende/spiegelnde Kante.
   Stagger pro Karte via animation-delay (unverändert). Technik: @property --spifaTagAngle
   animiert den Startwinkel eines conic-gradient auf einer 2px-Ringkante um den Tag
   (::before, z-index -1 = hinter Chip-Fuellung, ueber dem Foto). Ohne @property: statisch. */
@property --spifaTagAngle{syntax:'<angle>';inherits:true;initial-value:0deg}
.spk .ph .tag{--spifaTagAngle:0deg;animation:spifaTagShine 3.4s linear infinite}
.spk .ph .tag::before{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;padding:2px;
  border-radius:calc(var(--rp) + 2px);
  background:conic-gradient(from var(--spifaTagAngle),
     rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 80%, rgba(255,255,255,0) 100%),
  var(--tag, var(--accent));
  /* RING-MASK: NUR die 2px-Kante sichtbar (Chip-Füllung + Text bleiben unberührt).
     Base = Tagg-Farbe (--tag) → Linie ist DURECHGEND (nicht abgehackt); weisser Glanz laeuft drueber. */
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude}
@keyframes spifaTagShine{from{--spifaTagAngle:0deg}to{--spifaTagAngle:360deg}}

.bento .spk:nth-child(2) .ph .tag{animation-delay:.5s}
.bento .spk:nth-child(3) .ph .tag{animation-delay:1s}
.bento .spk:nth-child(4) .ph .tag{animation-delay:1.5s}
.bento .spk:nth-child(5) .ph .tag{animation-delay:2s}
.bento .spk:nth-child(6) .ph .tag{animation-delay:2.5s}
a.spk{display:block;text-decoration:none;color:inherit;cursor:pointer}
@media (prefers-reduced-motion:reduce){.spk .ph .tag{animation:none}}
.spk .ph::after{z-index:1}
.spk--feat .ph::before{animation:none}
.spk:nth-child(2) .ph::before{animation-delay:-4s}
.spk:nth-child(3) .ph::before{animation-delay:-8s}
.spk:nth-child(4) .ph::before{animation-delay:-12s}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.spk--feat{background:var(--ink);display:flex;flex-direction:column;position:relative;overflow:hidden} /* alt-2.8.84: relative+hidden → Bio wird an der Kantenlinie geclippt, Gradient-Zone darüber */
.spk--feat .ph{aspect-ratio:auto;flex:0 0 auto;height:240px;min-height:0;overflow:hidden}
.spk--feat .nm{padding:26px 30px;position:relative;z-index:1} /* alt-2.8.84: Text unter der Gradient-Zone (z1 < z3) */
.spk--feat .nm h3{font-size:clamp(22px,2.8vw,34px);font-weight:900;letter-spacing:-.01em;color:var(--offwhite)}
.spk--feat .nm .role{color:var(--teal);letter-spacing:.2em} /* alt-2.8.135 (Sebastian 01.10): KATEGORIE-ZEILE = Spifa-Teal (war: --tealtint helles Tint) */
.spk--feat .nm .org{color:rgba(245,240,235,.6)}
.spk--feat .nm .bio{font-size:14px;color:rgba(245,240,235,.7);margin-top:12px;line-height:1.65;max-width:52ch;
  overflow:visible} /* alt-2.8.84: line-clamp raus — Fließtext fließt weiter unter den .spk-foot-Gradient (Fade) */
.spk .nm h3{font-size:17px}
/* v0.4.10: Name (h3) max. 2 Zeilen — lange Titel brechen die Kartenhöhe nicht */
.bento .spk h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* alt-2.8.84 (Kunde 29.09): Speaker-Karte — „Mehr erfahren" LINKSBÜNDIG, statisch
   unten, auf einer statischen GRADIENT-ZONE (.spk-foot). Zone = Gradient
   SPIFA-DUNKELBLAU unten 100% (solid #0f1e3c) -> oben 0% (transparent).
   Fließtext fließt bei Überlänge unter die Zone und wird ausgefaded
   (Text z1 unter Gradient z3). Link IMMER sichtbar (z4, über Gradient),
   linksbündig. Zone ist IMMER vorhanden (auch ohne Programmpunkt-Auswahl,
   dann ohne Link) — Position statisch, unabhängig von Textlänge. */
.spk-foot{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:3;
  background:linear-gradient(to top,var(--ink) 0%,rgba(15,30,60,0) 100%);
  display:flex;align-items:flex-end;box-sizing:border-box;padding:0 26px 21px} /* alt-2.8.86: padding-bottom 16→21px — „Mehr erfahren" ~5px nach oben (Kunde: „dann ist es perfekt") */
.spk-more{position:relative;z-index:4;
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--offwhite);text-decoration:none;
  transition:color .2s var(--ease)} /* alt-2.8.85: UNDERLINE (border-bottom) RAUS — fette Schrift + Pfeil reicht (Kunde) */
.spk-more .ar{font-size:13px;transition:transform var(--dur-fast) var(--ease)}
.spk-more:hover{color:#fff}
.spk-more:hover .ar{transform:translate(2px,-2px)}
@media (max-width:960px){
  .bento{grid-template-columns:1fr 1fr}
  .bento-extra-in{grid-template-columns:1fr 1fr} /* v-alt-2.6.1: Wrapper-Raster folgt dem 2er-Breite-Breakpoint */
}
@media (max-width:600px){.bento{grid-template-columns:1fr}}

/* ══ v0.4.0 SPEAKERS: UNBEGRENZT + Desktop „Mehr" + Mobile-Swipe ══ */
/* DESKTOP (>600px): Karten ab Index 4 eingeklappt, „Mehr"-Button zeigt sie
   v-alt-2.6.0: SMOOTHES AUFFAHREN (war: hartes display:none/flex-Toggle).
   Wrapper .bento-extra (grid-Item, Zeile 2) animiert height 0↔510px + Fade.
   Base-Karten behalten ihre 510px als eigene Höhe (war: grid-auto-rows),
   daher .bento--more auf grid-auto-rows:auto (Wrapper-Zeile darf 0 werden). */
.bento--more{grid-auto-rows:auto;row-gap:0;transition:row-gap .55s var(--ease)}
.bento--more .spk{height:620px} /* alt-2.8.115: 640→620px · alt-2.8.93: 560→640px (Karten wieder höher) */
.bento-extra{grid-column:1/-1;min-height:0;height:0;overflow:hidden;opacity:0;
  transition:height .55s var(--ease),opacity .45s var(--ease)}
.bento--more.bento--open .bento-extra{height:620px;opacity:1} /* alt-2.8.115: 640→620px (Aufklapp-Wrapper = Kartenhöhe) · alt-2.8.93: 560→640px */
.bento--more.bento--open{row-gap:18px}
.bento-extra-in{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:18px} /* v-alt-2.6.1: 4er-Raster — Karten bleiben 1/4-Breite wie Reihe 1 (war: 1fr 1fr → 50%-Karten, Sebastian-Bug) */
.bento-more{display:flex;justify-content:center;margin-top:48px} /* v-alt-2.5.0: Abstand zu den Karten vergrößert (war 22px — saß zu nah) */
.bento-more-btn .ar{display:inline-block;transition:transform var(--dur-med) var(--ease)}
.bento-more-btn:hover .ar{transform:translate(2px,-2px)}
.bento--open ~ .bento-more .bento-more-btn .ar{transform:rotate(-45deg)}
/* MOBILE (≤600px): horizontales Swipe-Carousel, 1 Karte ≈ 78% Breite */
@media (max-width:600px){
  /* v-alt-2.6.0: Aufklapp-Wrapper im Mobile-Carousel AUFLÖSEN — Karten sind
     wieder direkte Flex-Items des Swipe-Bands (wie vor der Desktop-Animation). */
  .bento-extra,.bento-extra-in{display:contents}
  .bento--more{
    display:flex;
    flex-wrap:nowrap;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    /* v-alt-2.3.2: BAND BRÜCKT EXAKT DAS .WRAP-PADDING (28px) → Band = Full-Width
       (Display-Rand = Band-Rand) → angeschnittene Karten berühren den Rand (keine
       blaue Lücke). INNEN-Padding 28px links/rechts = Content-Rand für 1. + letzte
       Karte (nicht angeklebt). War alt-2.3.1: -30px zu viel → Karten klebten an
       den Rändern. */
    margin:0 -28px;
    width:calc(100% + 56px);
    /* v-alt-2.3.2: Snap-Punkte = 28px (Content-Rand) LINKS UND RECHTS →
       1. Karte 28px vom linken Rand, LETZTE Karte 28px vom rechten Rand
       (war: scroll-padding nur links → letztes Ende klebte am Rand).
       Angechnittene Karten DAZWISCHEN gehen bis zum Display-Rand (Band = Full-Width). */
    scroll-padding-inline:28px;
    padding:4px 28px 18px;
  }
  .bento--more .spk{
    display:flex;
    flex:0 0 auto;
    width:78vw;
    max-width:340px;
    min-width:0;
    scroll-snap-align:start;
    flex-direction:column;
  }
  .bento--more .spk--feat .ph{aspect-ratio:4/5}
  .bento--more .spk .ph{aspect-ratio:4/5;min-height:0}
  /* v0.4.6: MOBILE-BILD-BUG — die Desktop-Regel
     .bento .spk:not(.spk--feat) .ph{aspect-ratio:auto;flex:1} (4-Klassen-Spezifität)
     schlug die 3-Klassen-Mobilregel → Foto-Fläche kollabierte auf Höhe 0.
     Fix: hier mit gleicher Spezifität + späterer Stelle in der Datei überschreiben. */
  .bento .spk:not(.spk--feat) .ph{aspect-ratio:4/5;flex:none;min-height:0}
  .bento .spk--feat .ph{aspect-ratio:4/5;flex:none;min-height:0}
  .bento .spk{height:auto;min-height:0}
  /* alt-2.8.118 (Sebastian 30.09): MOBILE-Bio-Clamp ENTFERNT (war: -webkit-line-clamp:3) — wie Desktop seit 2.8.84: Text fließt vollständig weiter */
  /* „Mehr"-Button nur auf Desktop */
  .bento-more{display:none}
  /* Swipe-Hinweis */
  .bento-swipe-hint{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,235,.55);margin:10px 0 0;text-align:center}
}
@media (min-width:601px){.bento-swipe-hint{display:none}}

/* ══ v3 AGENDA: SWEEP-HOVER (Ink füllt die Zeile) ══ */
.ag{position:relative;overflow:hidden}
.ag::before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .95s var(--ease-out);z-index:0}
.ag:hover::before{transform:scaleX(1)}
.ag:hover{background:#fff;transform:none}
.ag .tm,.ag .bd,.ag .typ{position:relative;z-index:1}
.ag .tm .d{transition:color var(--dur-med)}
.ag .tm .t,.ag .bd h3,.ag .bd .who{transition:color var(--dur-med)}
.ag:hover .tm .d{color:var(--tealtint)}
.ag:hover .tm .t{color:var(--offwhite)}
.ag:hover .bd h3{color:var(--offwhite)}
.ag:hover .bd .who{color:rgba(245,240,235,.65)}
.ag .bd h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ag .bd h3::after{content:"↗";font-size:18px;opacity:0;transform:translateX(-8px);transition:opacity var(--dur-med),transform var(--dur-med) var(--ease)}
.ag:hover .bd h3::after{opacity:1;transform:none}

/* ══ v-alt-2.8.0 AGENDA-VORSCHAU: 2 SPALTEN (Tag 1 | Tag 2) + je 5 + 1 Button ══
   .agx = Sektions-Container (ersetzt das alte .agenda auf der Home).
   .agcols = 2er-Grid — grid-Stretch (Default) macht beide Spalten GLEICH HOCH
   (User: "spalten einfach gleich lang, je nachdem welcher Tag länger ist").
   Collapsen = moderne grid-rows 0fr→1fr (animiert auf die ECHTE Content-Höhe —
   besser als Speaker 510px-Fixhöhe, weil Agenda-Items unterschiedlich hoch sind). */
.agx{margin-top:8px}
.agcols{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch}
.agcol{display:flex;flex-direction:column;min-width:0}
.taghead.agcol-head{margin:0 0 20px}
.agcol-list{display:grid;gap:14px}
.agcol-empty{font-size:14px;line-height:1.6;color:rgba(15,30,60,.5);margin:0}
/* v-alt-2.8.2: Badge OBEN RECHTS (war alt-2.8.1: unten rechts).
   Zeile 1: Zeit (links) + Typ-Badge (rechts, oben) · Zeile 2: Title + Who (vollbreit).
   NUR im .agx-Kontext — die /programm-Archiv-Karten (.ag, ohne .agx) behalten das alte Layout. */
.agx .ag{grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:14px 24px;align-items:start}
.agx .tm{grid-column:1;grid-row:1;display:block;min-width:0}
.agx .tm .t{margin-top:0;font-size:20px;color:var(--accent)}
/* v-alt-2.8.21 Client-FB 25.09: Agenda-Vorschau Tag-Farben — Tag 1 = ORANGE, Tag 2 = BOLD BLUE (B1). */
.agx .agcol--1 .taghead .b{background:#fa6432;color:#fff;border:none}
.agx .agcol--2 .taghead .b{background:#00468c;color:#fff;border:none;font-weight:900;letter-spacing:.22em} /* v-alt-2.8.22 Client-FB 25.09: Outline raus (Füll-Farbe bleibt) */
.agx .typ{grid-column:2;grid-row:1;justify-self:end;align-self:start}
.agx .bd{grid-column:1 / -1;grid-row:2}
/* v-alt-2.8.3: Link-Pfeil (↗) in der Home-Karte raus — der Pfeil war das
   „verlinkt"-Symbol aus dem Sweep-Hover (.ag .bd h3::after). NUR .agx:
   /programm-Archiv-Karten behalten den Hover-Pfeil. */
.agx .ag .bd h3{gap:0}
.agx .ag .bd h3::after{content:none}
/* Aufklapp-Wrapper (PRO SPALTE) — 0fr→1fr = animiert auf die echte Rest-Höhe.
   .agx-extra-in = Clip-Container (overflow hidden + min-height 0): bei 0fr wird
   Inhalt+Padding weggeclippt, bei 1fr wächst die Spur auf die echte Höhe. */
.agx-extra{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s var(--ease),opacity .4s var(--ease)}
.agx--open .agx-extra{grid-template-rows:1fr;opacity:1}
.agx-extra-in{overflow:hidden;min-height:0;display:grid;gap:14px;padding-top:14px}
/* Button-Zeile (gemeinsam für beide Spalten, wie Speaker „Mehr") */
.agx-more{display:flex;justify-content:center;margin-top:44px}
.agx-more-btn .ar{display:inline-block;transition:transform var(--dur-med) var(--ease)}
.agx-more-btn:hover .ar{transform:translate(2px,-2px)}
.agx--open .agx-more .agx-more-btn .ar{transform:rotate(-45deg)}
/* Mobile (≤900px): Spalten stapeln, Aufklappen bleibt erhalten. */
@media (max-width:900px){
  .agcols{grid-template-columns:1fr;gap:34px}
  .taghead.agcol-head{margin-bottom:16px}
  /* v-alt-2.8.3: Home-Karte — Badge OBEN RECHTS, dann Zeit, dann Title/Who; Pfeil raus. */
  .agx .ag{grid-template-columns:1fr auto;gap:14px 24px;align-items:start}
  .agx .tm{grid-column:1;grid-row:2;min-width:0}
  .agx .bd{grid-column:1 / -1;grid-row:3}
  .agx .typ{grid-column:2;grid-row:1;justify-self:end;align-self:start}
  .agx .ag .bd h3{gap:0}
  .agx .ag .bd h3::after{content:none}
}

/* ══ v3 LOGO-WALL: v0.4.16 — Hover-Farben + Box-Höhen ENTFERNT (User-FB 10.09:
   „keine hover-farbe bei den logos“). Logos sind frei auf Off-White, ohne Box. ══ */

/* ══ v3 CTA-BAND: Riesentypo + Outline-Marquee im Hintergrund ══ */
.ctaband{position:relative;overflow:hidden;padding:110px 0;background:var(--accent);color:var(--offwhite)}
/* v0.4.48: Marquee-Text kommt aus dem CMS (ctaband_marquee) statt aus dem CSS-Content —
   .mqit = 6 identische Kopien (wie zuvor), tickflat -50% = exakt 3 Kopien = nahtlos. */
.ctaband .mq{position:absolute;bottom:-2vw;left:0;width:max-content;white-space:nowrap;pointer-events:none;user-select:none;z-index:0;animation:tickflat 48s linear infinite}
.ctaband .mqit{display:inline-block;font-size:clamp(80px,11vw,160px);font-weight:900;letter-spacing:-.02em;color:var(--accent);-webkit-text-stroke:2px rgba(255,255,255,.22);paint-order:stroke fill}
.ctaband .in{position:relative;z-index:1}
/* v-alt-2.8.21 Client-FB 25.09: Save-the-Date-Hintergrund = SPIFA-FUCHSIA (B2). */
.ctaband{background:#e63264!important}
.ctaband .mqit{-webkit-text-stroke:2px rgba(255,255,255,.28)}
/* v-alt-2.8.22 Client-FB 25.09: Save-the-Date Marquee-Lauftext = SPIFA-FUCHSIA.
   Box-BG ist fuchsia (B2); der Lauf-Text war noch var(--accent)=Teal -> passt nicht.
   Jetzt Fuchsia = saubere Ghost-Text-Marquee (weisse Kontur bleibt). */
.ctaband .mqit{color:#e63264}
.ctaband h2{font-size:clamp(44px,8vw,124px);line-height:.9;color:var(--offwhite)}
.ctaband .eyebrow .mlabel{color:var(--ink);opacity:.75;font-size:12px}
@media (prefers-reduced-motion:reduce){.ctaband .mq{animation:none}}

/* ══ v3 FOOTER: Giant-Wordmark ══ */
.ft{padding:72px 0 0;overflow:hidden} /* v-alt-2.2.2: overflow:hidden — Edge rendert das ::after-Wort (line-height .85) über die Line-Box hinaus → unter den Footer-Hintergrund ragte ein weißer Streifen. Jetzt wird das Wort an der Footer-Kante sauber beschnitten (Design-Intent: Wort verschwindet im Rand). */
/* alt-2.8.105 (Sebastian 30.09): iOS-Safari Bottom-Toolbar (URL-Leiste) = Footer-Blau.
   ROOT CAUSE (belegt, 30.09): iOS 26 Safari IGNORET das <meta name="theme-color">
   (Apple hat die Unterstützung in Safari 26 entfernt). Stattdessen sampelt Safari
   die Farbe eines position:fixed/sticky-Elements mit SOLIDEM Background, das die
   untere Viewport-Kante berührt (min. ~6px hoch, volle Breite) → genau deshalb
   funktionieren .mnav (Blue, z-200) und .stickycta (Teal, z-120): beide fixed+bottom:0.
   Der Footer ist im Normalfluss → nichts am unteren Rand → helle Kante (Body-Grund).
   FIX: fixe Ink-Leiste (≥8px, = safe-area-inset-bottom wenn verfügbar) am Viewport-Boden,
   NUR wenn body.spifa-ft-bottom gesetzt ist (shared.js: Footer ≤ Viewport-Boden,
   CTA ausgeblendet, Menü geschlossen). z-index 110 = ÜBER dem Footer-Inhalt,
   UNTER Sticky-CTA (120) und Menü (200) → CTA bleibt Teal, Menü bleibt Blue.
   pointer-events:none → keinerlei Interaktions-/Layout-Eingriff.
   NUR ≤960px (Mobile; dort sind CTA+Menü aktiv) — Desktop: theme-color + keine Leiste.
   Höhe = max(safe-area-inset-bottom, 34px): muss die ~6px-Sampling-Schwelle von
   Safari 26 deutlich übertreffen; gleiche Navy-Farbe wie der Footer → unsichtbar
   auf dem Footer, malt aber in die Toolbar. */
.spifa-fbstrip{position:fixed;left:0;right:0;bottom:0;height:max(env(safe-area-inset-bottom,0px),34px);background:var(--ink);z-index:110;pointer-events:none;display:none}
@media (max-width:960px){
  body.spifa-ft-bottom .spifa-fbstrip{display:block}
}
.ft::after{content:"SPIFA 2027";display:block;text-align:center;font-size:clamp(64px,15vw,220px);font-weight:900;line-height:.85;letter-spacing:-.04em;text-transform:lowercase;color:var(--ink);-webkit-text-stroke:2px rgba(245,240,235,.16);paint-order:stroke fill;margin-top:4px;margin-bottom:calc(-0.5em + 30px);padding-bottom:0;user-select:none;pointer-events:none} /* alt-2.8.92 (Sebastian-FB 29.09): Wort war zu weit im Anschnitt — margin-bottom -0.5em → calc(-0.5em + 30px) = exakt +30px sichtbarer Bereich nach unten (skaliert mit der fluiden clamp()-Schrift 64-220px → überall gleich +30px). Alt-2.8.91: Wort ~60px höher (margin-top 64→4px) + untere Wort-Hälfte im Seitenanschnitt (margin-bottom:-0.5em, .ft-overflow:hidden-Kante) + padding-bottom 14→0px. */

/* ══ v3 HERO-Stagger-Load ══ */
body.js .stagger{opacity:0;transform:translateY(30px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
body.js .stagger.on{opacity:1;transform:none}
body.js .rv{transition-duration:.7s;transition-timing-function:var(--ease-out)}

/* ══ v3 STICKY-CTA (mobil) ══ */
/* v0.4.36: MAGENTA-HINTERGRUND (User-FB 11.09) + Scroll-Verhalten:
   runter scrollen → Leiste gleitet aus dem Screen, hoch scrollen → sie kommt zurück.
   (Transform-Steuerung in shared.js, .hide = 110% nach unten.) */
.stickycta{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--accent);border-top:2px solid rgba(15,30,60,.35);transition:transform .4s var(--ease-out)}
.stickycta.hide{transform:translateY(110%)}
.stickycta .txt{color:var(--offwhite);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.stickycta .pill{white-space:nowrap}
/* Button auf Magenta: weißes Pill mit Magenta-Text (scharf, kein Verschwinden) */
.stickycta .pill--accent{background:#fff;color:var(--accent);border-color:#fff}
@media (max-width:960px){
  body.has-sticky .ft{padding-bottom:120px}
  .stickycta{display:flex}
}

/* v0.4.36: MOBILE — Speaker-Karten GLEICHE HÖHE (User-FB 11.09: „orientieren
   sich noch an den Textlängen"). Bild ist bei fixer Kartenbreite (78vw) +
   4/5-Verhältnis bereits einheitlich — der Hebel ist der Textblock:
   min-Höhe auf .nm → Name/Rolle/Org/Bio-Länge zahlt sich nicht in der
   Kartenhöhe aus. */
@media (max-width:600px){
  .bento .spk .nm{min-height:210px}
}

/* v0.4.37: MOBILE — Newsletter: E-Mail-Feld lief über den Screen (User-FB 11.09).
   Ursache-Kandidaten: input min-width:240px + form flex-basis 340px + 28px
   Wrap-Padding. Fix: auf Mobile wird das Feld 100% der Spalte (kein min-width),
   beide Spalten = 100% Breite, und die Sektion darf horizontal nicht überrollen. */
@media (max-width:600px){
  .news .in{gap:30px}
  .news .in>div:first-child,.news form{flex:1 1 100%;max-width:100%}
  .news form input[type=email]{min-width:0;width:100%;max-width:100%}
  .sec--ink.news{overflow-x:hidden}
}

/* ============================================================
   SEITEN-SPEZIFIK
   ============================================================ */

/* ── Seiten-Hero (Subpages): bolder + Wasserzeichen ── */
.pagehero{position:relative;background:var(--ink);color:#fff;padding:64px 0 72px;overflow:hidden}
.pagehero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,240,235,.12) 1.4px,transparent 1.5px);
  background-size:30px 30px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 82%);
          mask-image:linear-gradient(180deg,#000 0%,transparent 82%);}
.pagehero::after{content:"2027";position:absolute;right:2vw;bottom:-5vw;font-size:clamp(120px,22vw,340px);font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--ink);-webkit-text-stroke:2px rgba(245,240,235,.12);paint-order:stroke fill;pointer-events:none;user-select:none;z-index:0}
/* alt-2.8.100 (Sebastian 30.09): „2027“-Outline auf der Impressionen-Seite nach oben rücken,
   damit die Zahl nicht so abgeschnitten wirkt. NUR /impressionen/ (body.spifa-page-impressionen,
   via body_class-Filter) — bottom -5vw → 0 = die Zahl steht voll im Sektions-Rand, kein Anschnitt.
   Alle anderen Seiten unverändert. */
body.spifa-page-impressionen .pagehero::after{bottom:0}
.pagehero .wrap{position:relative;z-index:1}
.pagehero .eyebrow{margin-bottom:22px}
.pagehero .eyebrow .mlabel{color:#9fe6d8;font-size:12px}
.pagehero h1{font-weight:900;font-size:clamp(44px,8.5vw,112px);line-height:.92;letter-spacing:-.02em;text-transform:none;color:var(--offwhite)} /* alt-2.8.73: uppercase→none (Kunde entscheidet Case) */
.pagehero .lead{max-width:640px;margin-top:22px;font-size:17px;color:rgba(245,240,235,.82)}
.pagehero .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.crumbs{display:flex;gap:8px;align-items:center;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,235,.5);margin-bottom:24px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--offwhite)}
.crumbs .sep{opacity:.5}

/* ── Programm: Tag-Header ── */
.taghead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:64px 0 28px}
.taghead:first-of-type{margin-top:0}
.taghead .b{font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;padding:10px 20px;border-radius:var(--rp);background:var(--ink);color:#fff}
.taghead .b--teal{background:var(--teal)}
.taghead h3{font-size:24px;font-weight:900;text-transform:none;letter-spacing:-.01em} /* alt-2.8.73: uppercase→none (Kunde entscheidet Case) */
.taghead .s{font-size:14px;color:rgba(15,30,60,.55)}
.taghead .line{flex:1;height:2px;background:var(--ink);opacity:.14;min-width:40px}

/* ── Programm-Punkt: Detail ── */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start} /* alt-2.8.123: minmax(0,*) → Spalten wachsen NICHT mehr auf Wort-Mindestbreite an */ /* v-alt-2.6.4: TEXTBLOCK NOCH SCHMALERER (Sebastian: „sieht hochwertiger aus") — war: 1fr/1.3fr */
.dphoto{border-radius:var(--r);overflow:hidden;position:sticky;top:calc(var(--hh) + 24px)}
.dphoto .ph{aspect-ratio:4/5;position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(0,125,105,.9),rgba(0,70,140,.9)),linear-gradient(0deg,#334,#778);background-blend-mode:multiply,normal}
.dphoto .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.15),transparent 60%)}
.dphoto .cap{background:var(--ink);color:rgba(255,255,255,.65);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:14px 18px;position:absolute;left:0;right:0;bottom:0;z-index:5;transition:height .5s ease}
/* v-alt-2.8.33 (26.09): Bildbeschreibung rotiert in der .cap-Leiste (synchron mit dem Crossfade).
   Statische Caption (1 Bild) = normaler Flow; animierte .ccap = absolute Überlagerung. */
/* v-alt-2.8.35 (26.09): Caption UNTEN VERANKERT; .cap wächst NACH OBEN.
   Sizer (unsichtbar, längste Caption) bestimmt die Höhe; animierte .ccap = absolut, bottom:0. */
.dphoto .cap .ccap-sizer{display:block;visibility:hidden;padding-left:10px}
.dphoto .cap .ccap{position:absolute;left:0;right:0;bottom:0;display:block;padding:14px 18px;padding-left:28px;opacity:0}
/* Statik (1 Bild, kein data-delay) + no-JS-Fallback: erste Caption sichtbar. */
.dphoto .cap .ccap:not([data-delay]){opacity:1}
body:not(.js) .dphoto .cap .ccap[data-delay]{display:none}
body:not(.js) .dphoto .cap .ccap-sizer{visibility:visible}
.dbody{background:none;border:none;padding:0} /* v-alt-2.6.2: RAHMEN/BOX WEG (Sebastian: „Textblock nicht extra framen — cleaner") — war: background:#fff;border:2px solid var(--ink);border-radius;padding:40px */
.dbody .meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.dbody .meta .chip{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:var(--rp);color:#fff}
.dbody h1{font-size:clamp(28px,4vw,48px);font-weight:900;line-height:1.02;letter-spacing:-.02em;text-transform:none} /* alt-2.8.73: uppercase→none (Kunde entscheidet Case) */
.dbody .who{margin-top:18px;font-size:15.5px;color:rgba(15,30,60,.6)}
.dbody .who b{color:var(--ink)}
.dbody .who.orgline{margin-top:6px;font-size:14.5px}
.dbody .besch{font-size:15.5px;line-height:1.65;color:rgba(15,30,60,.85);margin-bottom:34px}
.dbody .besch p{margin:0 0 12px}
.dbody .besch p:last-child{margin-bottom:0}
.dbody .rule{height:2px;background:var(--ink);opacity:.12;margin:28px 0}
.dbody h2{font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.dbody p{font-size:15.5px;color:rgba(15,30,60,.75);margin-bottom:16px}
.dbody .facts{margin-top:8px}
.dbody .facts .row{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid rgba(15,30,60,.1);font-size:14.5px}
.dbody .facts .row b{font-weight:800}
@media (max-width:960px){.detail{grid-template-columns:minmax(0,1fr)}.dphoto{position:relative;top:0}} /* alt-2.8.123: mobile 1fr → minmax(0,1fr) — Wort kann Container NICHT mehr weiten · alt-2.8.124: top:0 — Desktop-Sticky-`top:calc(var(--hh)+24px)` wirkt bei position:relative als ABSATZ (98px nach UNTEN) → reset */
/* alt-2.8.121 (Sebastian 30.09, 2. Runde): PROGRAMMDETAIL MOBILE — Foto DEUTLICH HÖHER + 1. Tagg weiter unten.
   1. Runde (120) = „nur minimaler Effekt“ (vermutlich gecachter CSS auf dem Gerät) → 2. Runde:
     (a) Hero→Foto-Lücke 156px → ~40px: pagehero padding-bottom 16→6px + .sec--white padding-top 40→20px.
     (b) Sektions-Nummer „01“ (.sec--white::before) top 20→10px (bleibt über dem Foto sichtbar, Peek).
     (c) 1. Tagg-Zeile (.dbody .meta) 40→90px über dem Foto (Sebastian: „noch ~50px nach unten“).
   NUR mobile (≤960px) + NUR body.single-agenda — Desktop + alle anderen Seiten unverändert.
   Neue ?ver= (121) erzwingt frischen CSS-Load (Cache-Bust). */
@media (max-width:960px){
  
  body.single-agenda .sec--white{padding-top:20px}
  body.single-agenda .sec--white::before{top:10px}
  
}

/* alt-2.8.122 (Sebastian 30.09, 3. Runde): PROGRAMMDETAIL MOBILE — Foto NOCH DEUTLICH HÖHER.
   Taggs-Abstand = KLAR (121, bleibt: .dbody .meta margin-top:90px).
   NUR die Navy-Leiste über dem Foto wird komprimiert (mobile, NUR body.single-agenda):
     (a) .pagehero padding 64px 0 72px → 28px 0 6px (oben 64→28, unten 72→6)
     (b) .pagehero .eyebrow margin-bottom 22→10px
     (c) .crumbs margin-bottom 24→12px
     (d) .sec--white padding-top 20→10px
   Desktop + alle anderen Seiten unverändert. Neue ?ver= (122) = Cache-Bust. */
@media (max-width:960px){
  
  body.single-agenda .pagehero .eyebrow{margin-bottom:10px}
  body.single-agenda .crumbs{margin-bottom:12px}
  body.single-agenda .sec--white{padding-top:10px}
}

/* alt-2.8.123 (Sebastian 30.09): LANG-WORT-OVERFLOW MOBILE (z.B. „Gesundheitsversorgung:“ in Headline).
   2 Probleme, 2 Fixes:
   (1) CONTAINER-SCHUTZ: mobile .detail-Grid war 1fr (= minmax(auto,1fr)) → auto ließ die Spalte
       auf die Mindestbreite des langen Worts anwachsen = Container weitet sich + Text rückt raus.
       Fix: grid-template-columns → minmax(0,1fr) (oben + mobile) + .dbody/.dphoto min-width:0
       → Spalten sind jetzt EXAKT so breit wie das Grid, langes Wort kann Container NICHT mehr weiten.
   (2) WORT-TRENNUNG (Wahl Sebastian ①: nur bei Überlänge, kein Bindestrich, Normaltext unverändert):
       overflow-wrap:break-word auf Headlines + Detail-Text + Chips → trennt NUR wenn ein einzelnes
       Wort die Zeilenbreite sprengt (z.B. „Gesundheitsversorgung:“ → bricht sauber innerhalb der Box).
       Normaltext = 100 % unverändert (overflow-wrap greift nie bei normaler Länge).
   Scope: global (Headlines/Detail/Chips) — wirkt nur bei Überlänge, also auf allen Seiten sicher. */
.dbody,.dphoto{min-width:0}
.pagehero h1,.dbody h1,.dbody h2,.sechead h2,.legalpage h1,.taghead h3,.channelcard .txt h3,.detail h1,.detail h2,.detail h3{overflow-wrap:break-word;min-width:0}
.detail,.detail *{min-width:0}
.dbody .meta,.dbody .meta .chip,.dbody p,.dbody .who,.dbody .besch,.dbody .facts .row,.pagehero .lead,.crumbs{overflow-wrap:break-word}


/* ── Formulare ── */
.form{background:#fff;border:2px solid var(--ink);border-radius:var(--r);padding:40px}
.form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.fld label{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.fld label .opt{color:rgba(15,30,60,.45);letter-spacing:.1em}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{padding:15px 16px;border:2px solid rgba(15,30,60,.25);border-radius:12px;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;appearance:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld textarea{min-height:96px;resize:vertical}
.fld .hint{font-size:12.5px;color:rgba(15,30,60,.5)}
.checks{display:flex;flex-direction:column;gap:14px;margin:6px 0 26px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:rgba(15,30,60,.75);line-height:1.5}
.check input{width:20px;height:20px;margin-top:1px;accent-color:var(--accent);flex:none}
.check a{color:var(--accent);font-weight:700}
.form .submitrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.form .submitrow .note{font-size:12.5px;color:rgba(15,30,60,.5)}
@media (max-width:760px){.form .grid2{grid-template-columns:1fr}}

/* ── Rechtliches ── */
.legalpage{background:#fff;padding:84px 0}
.legalpage .wrap{max-width:840px}
.legalpage h1{font-size:clamp(38px,6vw,72px);font-weight:900;line-height:.96;letter-spacing:-.02em;text-transform:none;margin-bottom:14px} /* alt-2.8.73: uppercase→none (Kunde entscheidet Case) */
.legalpage .sub{font-size:15.5px;color:rgba(15,30,60,.6);margin-bottom:48px}
.legalpage h2{font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:44px 0 12px}
.legalpage p,.legalpage li{font-size:15px;color:rgba(15,30,60,.75);line-height:1.65;margin-bottom:14px}
.legalpage ul{padding-left:22px;margin-bottom:14px}
.legalpage .card{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:26px 28px;margin-top:24px}
.legalpage .card .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid rgba(15,30,60,.1);font-size:14.5px}
.legalpage .card .row:last-child{border-bottom:none}
.legalpage .card .row b{font-weight:800}
.legalpage a{color:var(--accent);font-weight:700}

/* ── Video-Seite ── */
.bigvideo{border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.bigvideo iframe{width:100%;height:100%;border:0;display:block}
.bigvideo .placeholder{display:flex;flex-direction:column;align-items:center;gap:18px;color:rgba(255,255,255,.5);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:24px}
.bigvideo .placeholder .play{width:96px;height:96px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;border:4px solid #fff}
.bigvideo .placeholder .play::after{content:"";border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px}
/* alt-2.8.100 (Sebastian 30.09): Abstand über dem großen Video-Container nach oben verringern (~-50px).
   .bigvideo ist NUR auf der Impressionen-Seite → kein Impact auf andere Seiten. */
.bigvideo{margin-top:-50px}
.channelcard{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.channelcard .txt h3{font-size:22px;font-weight:900}
.channelcard .txt p{font-size:14px;color:rgba(15,30,60,.6);margin-top:6px}

/* ─────────────────────────────────────────────────────────────
   alt-2.8.94 — IMPRESSIONEN-SEITE: KURATIERTES VIDEO-GRID
   Unter dem großen Trailer: 2–4 Karten (Keynotes / Digital Dialogues).
   Jede Karte = 16:9-Embed + Titel-Unterkante. 2 Spalten (Desktop),
   1 Spalte (Mobil). Kontext-Text (.vintro) über dem Grid.
   ───────────────────────────────────────────────────────────── */
.vgrid{margin-top:36px}
.vintro{margin-bottom:22px;max-width:720px}
.vintro p{margin:0 0 10px;font-size:15px;line-height:1.55;color:rgba(15,30,60,.72)}
.vintro p:last-child{margin-bottom:0}
.vintro-k{font-weight:700;color:var(--ink)}
.vgrid-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media (max-width:720px){.vgrid-cols{grid-template-columns:1fr}}
.vcard{margin:0;display:flex;flex-direction:column}
.vcard-frame{border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:16/9;position:relative}
.vcard-frame iframe{width:100%;height:100%;border:0;display:block}
.vcard-cap{margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink);line-height:1.35}

/* ─────────────────────────────────────────────────────────────
   v0.4.38 — IMPRESSIONEN FOTO-GALLERY (bestätigte Skizze v7)
   CodePen-Mechanik 1:1: fluid Spalten (auto-fit minmax), Feature-Spans
   ab 600px, Container-Captions. NUR gefüllte Slots werden gerendert
   (kein Foto = keine Box) — Logik in blocks.php / spifa_gallery().
   ───────────────────────────────────────────────────────────── */
.galwrap{margin-top:64px}
.galhead{margin-bottom:20px}
.galhead .mlabel{color:var(--tealtint);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

/* FLUIDES RASTER: Spalten zählen sich pro Breite neu (1–5).
   minmax(min(200px,100%),1fr) → keine Überlappung auf sehr schmalen Boxen. */
.impgallery{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  grid-auto-rows:200px;
  grid-auto-flow:dense;
  gap:10px}

/* FEATURE-SPANS ab 600px (wie im Pen):
   Item 1 = 2×2 (groß) · jedes 4n+1 = hoch · jedes 4n+2 = breit.
   dense-Flow füllt die Lücken automatisch.
   alt-2.8.79 FIX: :nth-child → :nth-of-type — zählt NUR <figure> (die Fotos).
   Der unsichtbare .impg-gap-<div> (Leerraum) wird NICHT mitgezählt → die
   Feature-Spans bleiben exakt auf den GLEICHEN Fotos (2.8.79 hatte sie verschoben). */
@media (min-width:600px){
  .impgallery .impg-cell:nth-of-type(1)    {grid-area:span 2 / span 2}
  .impgallery .impg-cell:nth-of-type(4n+1) {grid-row:span 2}
  .impgallery .impg-cell:nth-of-type(4n+2) {grid-column:span 2}
}

/* Unter 600px: keine Spans → einheitliche WÜRFEL (1:1). */
@media (max-width:599px){
  .impgallery{grid-auto-rows:auto}
  .impg-cell{aspect-ratio:1/1}
}

/* CELL = Raster-Zelle (Radius 5px + Clipping) + Container für die Caption. */
.impg-cell{position:relative;border-radius:5px;overflow:hidden;background:var(--ink2);
  container-name:impg;container-type:inline-size}
/* alt-2.8.80 FIX (Sebastian-FB 29.09: „2 fotos umgebrochen“):
   INTENTIONALER LEERRAUM in Zeile 1 — unsichtbarer Grid-Slot, EXAKT 1 ZELLE
   an Position 5 (Zeile 1), dort wo Photo 3 natuerlich stehen wuerde.
   Photo 3 bricht in Zeile 2 um; Photo 1 (2x2) + Photo 2 (breit) bleiben in
   Zeile 1. NUR bei 5 Spalten (Desktop, vw>=1096) sichtbar — bei 4/3/2 Spalten
   AUS: das Bento-Grid (2x2/breit-Feature-Spans) bricht dort ohnehin anders,
   ein Slot wuerde dort Doppel-Leerraeume erzeugen.
   (2.8.79 war grid-column:3/-1 = 3 Spalten breit → hat Foto 2 UND Foto 3
   rausgedraengt = „2 fotos umgebrochen“. Jetzt genau 1 Zelle.) */
.impg-gap{background:transparent;border:0;min-height:100%;display:none}
@media (min-width:1096px){.impg-gap{display:block;grid-column:5;grid-row:1}}

/* FILL = Foto (cover-Crop) · HOVER = langsames, dezentes Zoom + Helligkeit. */
.impg-fill{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);transition:transform 1.4s cubic-bezier(.22,.61,.36,1),filter 1.4s ease;will-change:transform}
.impg-cell:hover .impg-fill{transform:scale(1.04);filter:brightness(1.06)}
@media (prefers-reduced-motion:reduce){
  .impg-fill,.impg-cell:hover .impg-fill{transition:none;transform:none}
}

/* CAPTION — einheitlich Weiß + sanftes Dark-Scrim unten (Lesbarkeit auf hellen Fotos).
   ROBUST: Standard = SICHTBAR; wird NUR auf kleinen Kacheln (< 320px) ausgeblendet
   (Container-Query). Ältere Browser ohne CQ zeigen die Caption trotzdem (OK). */
.impg-cap{position:absolute;left:12px;bottom:10px;z-index:2;pointer-events:none;
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(8,15,32,.4)}
.impg-cell::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,15,32,.62),rgba(8,15,32,0))}
@container impg (width < 20rem){
  .impg-cap{display:none}
  .impg-cell::after{opacity:0}
}

/* ─────────────────────────────────────────────────────────────
   ABBINDER-BAND (HOME) — v-alt-2.8.76 (Sebastian-FB 29.09)
   Animiertes Text+Logo-Band, weißer Grund, läuft rechts→links.
   Position: unter dem Hero/Countdown, über den Sprechern.
   Inhalt = Footer-Abbindler (CMS-Text ft_abbinder + positive Dachverband-Logo).
   MOTIV (2.8.76): EINE EINHEIT = [Text][Logo] zusammen (.abband-unit,
   Gap 22px, KEIN Stern drin). ✦ = NUR die Trennung ZWISCHEN zwei Einheiten.
   5 Einheiten pro Kopie → jede Viewport-Breite wird gedeckt (kein Weiß-Rand).
   Animation = bewährte lgoBand-Naht-Mathematik: 2 identische Kopien
   (.abband-copy), shared.js misst Copy-A-Breite → --shift (px) auf .abband →
   translateX 0 → --shift = EXAKT eine Periode = nahtloser Loop. Fallback -50%.
   ───────────────────────────────────────────────────────────── */
/* alt-2.8.81 (Sebastian-FB 29.09): +30px Abstand ÜBER dem Band (margin-top),
   NUR das — Band-Inhalt/Padding/Animation unverändert. */
.abband{background:#fff;overflow:hidden;position:relative;z-index:110;padding:20px 0}
.abband-row{position:relative;overflow:hidden}
.abband-track{display:flex;width:max-content;will-change:transform;animation:abbandSlide 64s linear infinite}
@keyframes abbandSlide{from{transform:translateX(0)}to{transform:translateX(var(--shift,-50%))}}
.abband-copy{display:flex;align-items:center;flex:0 0 auto}
.abband-unit{display:inline-flex;align-items:center;gap:22px;padding:0 8px;white-space:nowrap;flex:0 0 auto}
.abband-tx{font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);white-space:nowrap}
.abband-logo{height:34px;width:auto;object-fit:contain;flex:0 0 auto;display:block}
.abband-sep{display:inline-flex;align-items:center;justify-content:center;width:64px;flex:0 0 auto;font-size:13px;color:var(--teal);line-height:1}
@media (max-width:760px){
  .abband{padding:14px 0}
  .abband-unit{gap:14px;padding:0 6px}
  .abband-logo{height:26px}
  .abband-tx{font-size:12px}
  .abband-sep{width:44px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .abband-track{animation:none}
}

/* ─────────────────────────────────────────────────────────────
   alt-2.8.95 (Sebastian 30.09): IMPRESSIONEN-SEITE — INTEGRIERTES
   15-ZELLEN-GRID (Fotos + Videos + Text-Blöcke + Leerstellen)
   EINES Grids (5 Spalten × 3 Zeilen, Bento-Asymmetrie):
   · Zelle 1 = 2×2 (Feature) · Zelle 2 + 7 = 2×1 (breit) · Rest 1×1
   · Zelle 5 + 13 = Leerstellen (intentionaler Leerraum, .pg-cell--gap)
   · Je Zelle: Foto (.pg-fill) ODER Video (iframe) ODER Text (.pg-cell--text)
   Dunkle Section (sec--ink) + HOME-Typografie (.sechead/.mlabel/.vside-Stil).
   ───────────────────────────────────────────────────────────── */
.pgwrap{margin-top:56px}
.pghead{margin-bottom:20px}
.pghead .mlabel{color:var(--tealtint);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}

/* FLUIDES RASTER: 5 Spalten (Default ab 1000px) · 4 (720–999) · 2 (<720) · 1 (<420).
   grid-auto-flow:dense füllt nur ECHTE Löcher (nicht die platzierten Spans). */
.pggrid{display:grid;gap:10px;grid-auto-flow:dense;grid-auto-rows:220px;grid-template-columns:repeat(5,1fr)}
@media (max-width:999px){.pggrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:719px){.pggrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:419px){.pggrid{grid-template-columns:1fr}}

/* BENTO-SPANS (NUR ab 720px): Zelle 1 = 2×2 (Feature) · Zelle 2 + 7 = 2×1 (breit, Videos).
   .pgc1/.pgc2/.pgc7 = feste Klassen pro Zellen-Position (PHP .pgc1…pgc15).
   Unter 720px: keine Spans (sonst 2-Zeilen-Foto in 2-Spalten-Raster bricht das Grid). */
@media (min-width:720px){
  .pggrid .pgc1{grid-area:span 2 / span 2}
  .pggrid .pgc2{grid-column:span 2}
  .pggrid .pgc7{grid-column:span 2}
}
@media (max-width:719px){
  .pggrid .pgc1,.pggrid .pgc2,.pggrid .pgc7{grid-area:auto;grid-column:auto;grid-row:auto}
}
/* alt-2.8.103 (Sebastian 30.09): MOBILE — Leer-Container der Galerie (.pg-cell--gap,
   transparenter Platzhalter) AUSBLenden. In 2/1-Spalten-Rastern würden sie zu viele
   vertikale Leerflächen erzeugen; ohne sie fließen Foto/Video/Text nacheinander.
   Nur <720px; Desktop/Tablet (≥720px) behalten den bewussten Leerraum. */
@media (max-width:719px){.pggrid .pg-cell--gap{display:none}}

/* CELL-BASIS: Radius 5px (SpiFa-Konvention) + Clipping + Dark-Grund (Fotos/
   Videos füllen; Text-Zellen bekommen eigene Hintergrundfarbe; Gap = unsichtbar). */
.pg-cell{position:relative;border-radius:5px;overflow:hidden;background:var(--ink2);container-name:pgc;container-type:inline-size}

/* FILL = Foto (cover-Crop) · HOVER = langsames, dezentes Zoom + Helligkeit
   (1:1 wie HOME .impg-fill). */
.pg-fill{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1);transition:transform 1.4s cubic-bezier(.22,.61,.36,1),filter 1.4s ease;will-change:transform}
.pg-cell--photo:hover .pg-fill{transform:scale(1.04);filter:brightness(1.06)}
@media (prefers-reduced-motion:reduce){
  .pg-fill,.pg-cell--photo:hover .pg-fill{transition:none;transform:none}
}

/* CAPTION — einheitlich Weiß + sanftes Dark-Scrim unten (wie HOME .impg-cap). */
.pg-cap{position:absolute;left:12px;bottom:10px;z-index:2;pointer-events:none;
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(8,15,32,.4)}
.pg-cell--photo::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,15,32,.62),rgba(8,15,32,0))}
@container pgc (width < 20rem){
  .pg-cap{display:none}
  .pg-cell--photo::after{opacity:0}
}

/* VIDEO-ZELLE: iframe füllt die Zelle; Titel unten (Weiß + Scrim, wie Foto-Caption). */
.pg-cell--video iframe{pointer-events:auto}
.pg-vtitle{position:absolute;left:12px;bottom:10px;z-index:2;pointer-events:none;
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 2px rgba(8,15,32,.5)}
.pg-cell--video::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,15,32,.55),rgba(8,15,32,0))}
@container pgc (width < 20rem){.pg-vtitle{display:none}}

/* TEXT-ZELLE: dunkelblauer Kachel-Grund (deutlich vom --ink2 der Foto-Gaps
   abgesetzt) + HOME-Typografie (Eyebrow [.mlabel-Stil] + H3 + P wie .vside). */
.pg-cell--text{background:var(--ink);display:flex;flex-direction:column;justify-content:center;
  padding:22px 20px;gap:0}
.pg-eyebrow{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--tealtint)}
.pg-eyebrow .bk{opacity:.55}
.pg-cell--text h3{font-size:22px;font-weight:900;margin-top:10px;line-height:1.12;color:var(--offwhite);text-transform:none}
.pg-cell--text p{font-size:13.5px;line-height:1.55;color:rgba(245,240,235,.75);margin:10px 0 0}
@container pgc (width < 20rem){
  .pg-cell--text{padding:14px 12px}
  .pg-cell--text h3{font-size:16px}
  .pg-cell--text p{font-size:12px}
  .pg-eyebrow{font-size:9px}
}

/* LEERSTELLE (intentionaler Leerraum): unsichtbar, bleibt im Raster stehen. */
.pg-cell--gap{background:transparent}

/* KANAL-KARTE auf Dark: helle Karte (Kontrast zu sec--ink) mit dunklem Text. */
.sec--ink .channelcard{background:var(--surface);border-color:var(--ink)}
/* alt-2.8.102 (Sebastian 30.09): Box „SpiFa auf YouTube" — gefüllte Hintergrundfarbe RAUS,
   SUBTILE Bold-Blue-OUTLINE (transparenter Grund + blauer 2px-Rand). Text + Button WEISS
   (sonst wäre der dunkle Karten-Text auf dem Dark-Grund unsichtbar). NUR diese Box. */
.sec--ink .channelcard{background:transparent;border-color:var(--blue)}
.sec--ink .channelcard .txt h3{color:var(--offwhite)}
.sec--ink .channelcard .txt p{color:rgba(245,240,235,.8)}
.sec--ink .channelcard .pill--ink{background:var(--offwhite);color:var(--blue)}
.sec--ink .channelcard .pill--ink:hover{background:#fff}

/* ─────────────────────────────────────────────────────────────
   alt-2.8.96 (Sebastian 30.09): LIGHTBOX — Foto vergrößern
   Klick auf eine Foto-Zelle → Foto öffnet sich groß im Seitencontainer
   (Logo → Anmelden = .wrap, max 1240px), mit sanfter Animation,
   Vorher/Nächster-Navigation + Zähler + Esc/Pfeiltasten.
   ───────────────────────────────────────────────────────────── */
/* Foto-Zellen: Hand-Cursor + dezenter Hover-Hinweis (Zoom-Ikone unten rechts). */
.pg-cell--photo{cursor:zoom-in}
.pg-cell--photo .pg-zoomhint{position:absolute;right:10px;bottom:9px;z-index:3;pointer-events:none;
  width:26px;height:26px;border-radius:4px;display:grid;place-items:center;
  background:rgba(8,15,32,.55);border:1px solid rgba(255,255,255,.28);
  font-size:13px;line-height:1;color:#fff;opacity:.55;transition:opacity .3s ease,transform .3s ease}
.pg-cell--photo .pg-zoomhint::before{content:"⤢"}
.pg-cell--photo:hover .pg-zoomhint,.pg-cell--photo:focus-visible .pg-zoomhint{opacity:1;transform:scale(1.06)}
@container pgc (width < 20rem){.pg-cell--photo .pg-zoomhint{display:none}}

/* OVERLAY: fix, voller Viewport, Midnight-Hintergrund (passt zur Dark-Section)
   + sanftes Einblenden. z-index 130: über Header (120) + Ticker (100). */
.pglb{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  visibility:hidden;opacity:0;transition:opacity .42s ease,visibility 0s linear .42s}
.pglb.is-open{visibility:visible;opacity:1;transition:opacity .42s ease}
.pglb-backdrop{position:absolute;inset:0;background:rgba(8,15,32,.9);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* FRAME: das vergößerte Foto — BREITE = Seitencontainer (Logo→Anmelden, .wrap ~1240px),
   HÖHE max. ~86vh (bleibt innerhalb des Viewports, kein Scrollen). */
.pglb-frame{position:relative;z-index:1;width:min(1240px,calc(100% - 56px));
  max-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:scale(.96) translateY(10px);opacity:0;
  transition:transform .5s cubic-bezier(.22,.61,.36,1),opacity .42s ease}
.pglb.is-open .pglb-frame{transform:scale(1) translateY(0);opacity:1}
.pglb-fig{margin:0;display:flex;flex-direction:column;align-items:center;width:100%}
.pglb-img{width:100%;max-width:100%;max-height:calc(88vh - 44px);height:auto;object-fit:contain;
  border-radius:5px;box-shadow:0 24px 80px rgba(4,9,22,.6);display:block;
  opacity:0;transition:opacity .45s ease}
.pglb-img.is-loaded{opacity:1}
.pglb-cap{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,240,235,.85);text-align:center;padding:0 20px}
.pglb-cap:empty{display:none}
.pglb-count{position:absolute;right:0;top:-2px;font-size:10px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(245,240,235,.5)}

/* NAVIGATION: links/rechts (dezent, rund, Dark) + Schließen oben rechts. */
.pglb-nav,.pglb-x{position:fixed;z-index:2;width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(245,240,235,.25);background:rgba(8,15,32,.5);color:var(--offwhite);
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .3s ease,border-color .3s ease,transform .3s ease}
.pglb-nav:hover,.pglb-x:hover{background:rgba(24,40,72,.75);border-color:rgba(245,240,235,.5);transform:scale(1.05)}
.pglb-nav:focus-visible,.pglb-x:focus-visible{outline:2px solid var(--tealtint);outline-offset:2px}
.pglb-prev{left:22px;top:50%;transform:translateY(-50%)}
.pglb-next{right:22px;top:50%;transform:translateY(-50%)}
.pglb-prev:hover{transform:translateY(-50%) scale(1.05)}
.pglb-next:hover{transform:translateY(-50%) scale(1.05)}
.pglb-x{right:22px;top:22px;font-size:16px}
@media (max-width:719px){
  .pglb-frame{width:calc(100% - 24px)}
  .pglb-img{max-height:calc(80vh - 44px)}
  .pglb-prev{left:10px}.pglb-next{right:10px}
  .pglb-nav,.pglb-x{width:40px;height:40px}
  .pglb-x{top:14px;right:14px}
}

/* REDUCED-MOTION: kein Scale/Translate, nur Fade. */
@media (prefers-reduced-motion:reduce){
  .pglb,.pglb-frame,.pglb-nav,.pglb-x,.pg-cell--photo .pg-zoomhint{transition:opacity .2s ease}
  .pglb-frame{transform:none}
  .pglb.is-open .pglb-frame{transform:none}
}

/* SICHERHEIT: Scroll-Lock am html-Element (Hintergrund scrollt nicht weg).
   Bild-Fade: JS setzt .is-loaded (onload/onerror/1800ms-Fallback) → immer sichtbar. */
.pglb-lock{overflow:hidden}



/* ═══════════════════════════════════════════════════════════════════
   alt-2.8.128 — DEFINITIV: Scoped @media-Regeln greifen NICHT bei Sebastian
   (Gelb/global wirkt, scoped nicht). → GLOBAL + !important, NUR body.single-agenda
   OBNEN: Lücke Navy-Leiste→Foto = 46px (war ~10-16px, zu knapp)
   UNTEN: Lücke Foto→Taggs = 40px (war ~91px, zu weit)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:960px){
body.single-agenda .pagehero{padding-bottom:46px !important}
body.single-agenda .dbody .meta{margin-top:0 !important}
body.single-agenda .detail{gap:40px !important}
}



/* ═══ alt-2.8.129 — OBEN-LÜCKE (weiße Lücke Navy-Leiste→Foto) ═══
   ROOT CAUSE (129): Die weiße Lücke = sec--white padding-top (10px) + margin des Fotos.
   120-128 haben pagehero padding-bottom geändert = verlängert nur die NAVY-LEISTE,
   die weiße Lücke blieb 10px → "Foto unverändert" (Sebastian 01.10).
   FIX (Sebastian-Formulierung): .dphoto margin-top:20px → weiße Lücke 10+20=30px. */
@media (max-width:960px){
body.single-agenda .dphoto{margin-top:20px}
}

/* ============================================================
   alt-2.8.131 (Sebastian 01.10): MOBILE BUTTONS — EINHEITLICHE 45px-STUFE
   Eine einzige Button-Größe für mobile (<=960px), angelehnt an Apple-
   Systemelemente (Browserleiste ~44-48px). Alle bisherigen Größen lagen
   DARUeber: .pill--lg 63.75px / .mnav-anm 53px / .pill 51.5px -> alles auf
   saubere 45px. DESKTOP bleibt 1:1 (diese Regeln greifen NUR <=960px).
   height:45px bei border-box = 2px-Border INKLUDIERT -> exakt 45px,
   unabh. von line-height. align-items:center zentriert den Text.
   Font-Groessen bleiben unveraendert (nur die Hoehe/Stufe wird vereinheitlicht).
   ============================================================ */
@media (max-width:960px){
  .pill{
    height:45px;
    padding:0 24px;
  }
  /* .mnav-anm ist ein block-Button (volle Breite im Mobile-Nav-Sheet)
     -> volle Breite BEIBEHALTEN, nur Hoehe 45px + Content zentriert. */
  .mnav-anm{
    height:45px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
  }
}

/* ============================================================
   alt-2.8.132 (Sebastian 01.10): SPEAKER-CARDS HOME MOBILE ~40px NIEDRIGER
   Mobile (<=600px, Swipe-Carousel) Speaker-Card-Photo: aspect-ratio 4/5 -> 9/10.
   Foto-Hoehe (Karte ~78vw=304px auf iPhone): 380px -> 337.8px = ~ -42px (Ziel ~-40px).
   Die Karte folgt exakt (Foto dominiert die Hoehre); Name/Bio/Taggs unveraendert.
   Skalier: aspect-ratio folgt der Viewport-Breite (78vw), keine starre px-Hoehe.
   DESKTOP (>600px) bleibt 1:1 (diese Regeln greifen NUR <=600px).
   Alle 4 mobilen aspect-ratio:4/5-Selektoren werden ueberschrieben (gleiche
   Spezifitaet, spaetere Datei-Stelle = gewinnt).
   ============================================================ */
@media (max-width:600px){
  .bento .spk .ph,
  .bento .spk:not(.spk--feat) .ph,
  .bento .spk--feat .ph,
  .bento--more .spk .ph,
  .bento--more .spk--feat .ph{
    aspect-ratio:9/10;
  }
}

/* ============================================================
   alt-2.8.136 (Sebastian 01.10): LOGO-WALL "SpiFa UNTERSTÜTZER" (Standard-Row)
   MOBILE (<=600px): 1 Spalte -> 2 SPALTEN.
   PREMIUM (suprow--premium) + MITGLIEDSVERBÄNDE (Logo-Band, kein .supgrid) UNVERÄNDERT.
   DESKTOP (4 Spalten) UNVERÄNDERT.
   .suprow--standard .supgrid (0,2,0) schlägt stilA.css .supgrid (0,1,0) im <=600px-MQ.
   ============================================================ */
@media (max-width:600px){
  .suprow--standard .supgrid{grid-template-columns:1fr 1fr}
}

/* ============================================================
   alt-2.8.137 (Sebastian 01.10): LOGO-WALL „SpiFa UNTERSTÜTZER“ (Standard-Row)
   MOBILE (<=600px) — CANVAS-OVERFLOW-FIX (FB: „zweispaltigkeit umgesetzt ABER
   layout läuft an dieser Stelle aus dem canvas“).
   ROOT-CAUSE: 136 setzte „1fr 1fr“ — 1fr = minmax(auto,1fr), und .logoimg hat
   FIXE 190px + .logo-Padding 12px = 214px Min-Breite pro Spalte → Grid wächst
   auf 448px → rechte Spalte läuft 86px aus dem 390px-Canvas (body scrollWidth
   476px, gemessen @390px). FIX: minmax(0,1fr) (Spalten dürfen unter Inhalt
   schrumpfen) + .logoimg skaliert responsiv (width:100%, max-width:130px,
   height:38px; background-size:contain bleibt → Logo zentriert, keine Stauchung).
   PREMIUM-Row (1 Spalte, 190px passt) + MITGLIEDSVERBÄNDE-Grid + DESKTOP UNVERÄNDERT.
   ============================================================ */
@media (max-width:600px){
  .suprow--standard .supgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suprow--standard .logo{padding:0 8px}
  .suprow--standard .logoimg{width:100%;max-width:130px;height:38px}
}

/* ══════════════════════════════════════════════════════════════
   alt-2.9.139 (Kunde 02.10, P4): LOGO-WALL REIHE 2 (Partner) = BOLD BLUE
   "wir dürfen aber nicht von 'SpiFa-Unterstützern' reden … ‚Premium-Unterstützer'
   gänzlich grün [bleibt] und darunter ‚Unterstützer' in einer anderen Farbe?"
   → Reihe 1 [Premium] bleibt Teal/Grün (var(--accent), stilA.css).
     Reihe 2 [Partner] = Bold Blue #00468c (var(--blue)).
   Basis = site137.css (1:1 Kopie) + diese 1 Regel. Neue Datei = Cache-Killer.
   ══════════════════════════════════════════════════════════════ */
.suprow--standard .lab .b{background:var(--blue)}

/* alt-2.9.143 (Sebastian 02.10): HERO-SIDELABEL 50px NACH UNTEN
   "Spitzenverband Fachärzt:innen und Fachärzte Deutschlands" (vertikaler
   Randtext rechts) sitzt zu hoch (top:64px) → 64px + 50px = top:114px.
   Basis = site139.css (1:1 Kopie) + diese 1 Override-Regel. Neue Datei = Cache-Killer. */
.hero .sidelabel{top:114px}

/* alt-2.9.144 (Sebastian 02.10): HERO-SIDELABEL WEITER 30px NACH UNTEN
   "ist schon besser, bitte noch 30px runter dann haben wir es" → top:114px + 30px = top:144px (FINAL).
   Basis = site143.css (1:1 Kopie) + diese 1 Override-Regel. Neue Datei = Cache-Killer. */
.hero .sidelabel{top:144px}

/* ============================================================
   alt-2.9.150 (Sebastian 05.10): VUE-BOX auf /anmeldung/
   Volle Breite, SpiFa-Blue (var(--ink) #0f1e3c), 2 Spalten:
   links "Gut zu wissen" (Termin/Ort/Format/Kosten) +
   rechts statische Venue-Karte (assets/img/map-venue.png, OSM-Stillbild
   mit dunkelblauem Overlay + Pin — KEIN Google, KEINE Cookies, KEIN JS).
   ============================================================ */
.vbox{background:var(--ink);color:#fff;margin-top:16px}
.vbox-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:44px;align-items:center;
  max-width:1080px;margin:0 auto;padding:44px 28px}
.vbox-info .eyebrow{margin-bottom:12px}
.vbox-info h3{font-size:24px;font-weight:900;color:var(--offwhite)}
.vbox-rows{margin-top:16px;font-size:15px;line-height:1.65}
.vbox-rows .row{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid rgba(245,240,235,.14)}
.vbox-rows .row:last-child{border-bottom:none}
.vbox-rows .row b{color:#fff;flex:none;min-width:74px;font-weight:800}
.vbox-rows .row span,.vbox-rows .row div{color:rgba(245,240,235,.78)}
.vbox-map{margin:0;min-width:0}
.vbox-map img{display:block;width:100%;height:auto;border-radius:10px;
  border:2px solid rgba(245,240,235,.28);aspect-ratio:1/1;object-fit:cover}
@media (max-width:820px){
  .vbox-in{grid-template-columns:minmax(0,1fr);gap:26px;padding:32px 20px}
  .vbox-map img{max-width:420px;margin:0 auto}
}

/* ============================================================
   alt-2.9.151 (Sebastian 05.10): /anmeldung/ — VUE-BOX direkt am
   Fuchsia "SAVE THE DATE"-Band. Abschnitt-Unten-Padding (120px,
   Off-White-Lücke zwischen den beiden Blöcken) = 0.
   Scope: NUR die Section, die die .vbox enthält (Nur /anmeldung/).
   Das Band-Interne-Padding (Fuchsia) bleibt — das gehört zum Band.
   ============================================================ */
section:has(> .vbox){padding-bottom:0}

/* ============================================================
   alt-2.9.152 (Sebastian 05.10): /anmeldung/ — FORMULAR-ABSTÄNDE
   oben = unten (Symmetrie). Oben = Section-Padding (120px Desktop /
   84px ≤960px) = "sehr gut" (Sebastian). Unten (Formular -> Venue-Box)
   war 16px ("zu wenig") → jetzt identisch: .vbox margin-top 120px / 84px.
   Scope: NUR die /anmeldung/-Section (Nur die .vbox dort).
   ============================================================ */
.vbox{margin-top:120px}
@media (max-width:960px){
  .vbox{margin-top:84px}
}


/* alt-2.9.159 (Sebastian 06.10): ANMELDUNG-Formular — DARK OUTLINE RAUS von der weißen Fläche.
   NUR der 2px var(--ink)-Border wird entfernt; Weißgrund/Padding/Radius/Abstände bleiben (Literal-Scope). */
.form{border:0 solid transparent}