/* ============================================================
   SpiFa-Fachärztetag 2027 — VARIANTE D · "STIL A" (IT/CONF-DNA)
   Flache Farbblöcke · keine Schatten/Gradients · Pills & Squircles
   Riesige Display-Typo + winzige Uppercase-Micro-Labels · 3-spaltige Info-Karten · Duotone-Fotos
   Farbwelt = SpiFa CD V15
   ============================================================ */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-ExtraLight.ttf") format("truetype"); font-weight: 200; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Light.ttf") format("truetype"); font-weight: 300; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); font-weight: 800; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Black.ttf") format("truetype"); font-weight: 900; }

:root{
  --ink:#0f1e3c;        /* Midnight — Ink, Karten, CTA */
  --ink2:#1a2c55;
  --accent:#007d69;     /* Teal-Variante: Fuchsia → Deep Teal (reiner Farb-Swap) — Hero-Panel, Eyebrow, aktiv */
  --surface:#f5f0eb;    /* Off-White — neutrale Flächen */
  --teal:#007d69;       /* Deep Teal — Duotone, sekundär */
  --blue:#00468c;       /* Bold Blue — Duotone */
  --pulse:#fa6432;      /* Pulse — Akzent */
  --tealtint:#9fd8cd;   /* helles Teal-Tint für Micro-Labels auf dunklem */
  --offwhite:#f5f0eb;   /* Alias für --surface (wird von .hero h1 / .ctaband verwendet) */
  --white:#fff;
  --hh:74px; --maxw:1240px; --r:20px; --rp:999px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Montserrat",system-ui,sans-serif;font-weight:400;line-height:1.5;color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* Micro-Label — das Signatur-Motiv: winzig, Uppercase, breiter Tracking, eckige Klammern */
.mlabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.28em}
.mlabel .bk{color:inherit;opacity:.55}

/* Pill-CTA mit Pfeil (IT/CONF-Motiv) */
.pill{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:var(--rp);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .14s,background .14s,color .14s}
.pill:hover{transform:translateY(-2px)}
.pill .ar{font-size:15px;transform:translateY(-1px)}
.pill--ink{background:var(--ink);color:#fff}
.pill--ink:hover{background:#FA6432} /* v-alt-1.1.0: solid-Buttons → ORANGE im Hover (statt #000) */
.ctaband .pill--ink:hover{background:#fff;color:var(--ink)} /* v-alt-2.8.47 (Sebastian-FB 26.09): Save-the-Date „JETZT ANMELDEN" Hover orange→WEISS (nur im CTA-Band; andere pill--ink-Buttons bleiben orange) */
.pill--accent{background:var(--accent);color:#fff}
.pill--accent:hover{background:#FA6432}
.pill--line{background:transparent;color:var(--ink);border-color:var(--ink)}
.pill--line:hover{background:var(--ink);color:#fff}
.pill--line-w{background:transparent;color:#fff;border-color:#fff}
.pill--line-w:hover{background:#fff;color:var(--ink)}
.pill--lg{padding:17px 34px;font-size:14px}

/* ══ HEADER ══ */
.hd{top:0;z-index:120;background:var(--surface)}
/* v-alt-0.9.0: Sticky am Template-Part-Wrapper (WP rendert <header class="hd"> in einen
   nur 144px-hohen <header class="wp-block-template-part">-Parent — sticky bricht an dessen
   unterer Kante los. Wrapper so groß wie der Rest der Seite → Nav klebt dauerhaft oben.
   z-index 120: über Ticker (100) + Content-Layern. .hd selbst bleibt im Layout-Flow. */
.wp-site-blocks>.wp-block-template-part:first-child{position:sticky;top:0;z-index:120}
.hd .wrap{height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:20px}
.hd .brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.hd .brand img{height:44px;width:auto}
.hd .brand .sub{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);opacity:.5;line-height:1.3}
/* v-alt-2.1.1: NAV (Sebastian-Fix): Hover-Bubble WEG + Unterlinie ECHT AM TEXT
   (text-decoration, nur Textbreite — kein box-shadow über das ganze Padding). */
.hd .navpill{display:flex;align-items:center;gap:2px;border:0;border-radius:0;padding:0}
.hd .navpill a{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:9px 18px;border-radius:var(--rp)}
.hd .navpill a.active{background:none;color:var(--offwhite);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:7px}
.hd .right{display:flex;align-items:center;gap:16px}
.hd .de{display:flex;align-items:center;gap:8px}
.hd .de .w{font-weight:900;font-size:20px;letter-spacing:-.02em}
.hd .de .w i{font-style:normal;color:var(--accent)}
.hd .de small{display:block;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.5}

/* ══ HERO — Fuchsia-Panel, zentriert, riesige Caps + 3 Info-Karten ══ */
.hero{background:var(--ink);padding:56px 0 0;color:#fff}
.hero .top{display:flex;justify-content:center;margin-bottom:44px}
.hero .eyebrow{text-align:center;margin-bottom:22px}
.hero .eyebrow .mlabel{color:#9fe6d8}
.hero h1{text-align:center;font-weight:900;font-size:clamp(46px,9.2vw,124px);line-height:.92;letter-spacing:-.02em;text-transform:uppercase;color:var(--offwhite)}
.hero h1 .ln{display:block}
.hero h1 .yr{color:var(--accent)}
.hero .lead{text-align:center;max-width:560px;margin:26px auto 0;color:rgba(245,240,235,.85);font-size:16px}
.hero .cta{display:flex;justify-content:center;gap:14px;margin-top:34px;flex-wrap:wrap}

/* 3-spaltige Info-Karten — das IT/CONF-Signatur-Element (WHEN/WHERE/WHO) */
.infos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;padding-bottom:64px}
.info{background:var(--accent);border-radius:var(--r);padding:26px 28px;color:#fff}
.info .k{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.info .v{font-size:20px;font-weight:800;margin-top:10px;line-height:1.15}
.info .s{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:6px}
.info .v .big{font-size:30px;font-weight:900;display:block}

/* Countdown-Stripe (flach) */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}
.cd .cell{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:20px;text-align:center}
.cd .num{font-size:40px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.cd .lbl{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);opacity:.55;margin-top:6px}
.cd .cell.hot{background:var(--teal);border-color:var(--ink)}
.cd .cell.hot .num,.cd .cell.hot .lbl{color:#fff}
.cd .cell.hot .lbl{opacity:.85}

/* ══ SECTION BASICS ══ */
.sec{padding:92px 0}
.sec--white{background:#fff}
.sec--offwhite{background:var(--offwhite)} /* v-alt-2.8.69 (Sebastian-FB 29.09): Sektion-Hintergrund SPIFA-OFFWHITE (#f5f0eb) für „hinter dem Programm" — weißer Karten-Rahmen + Weiß-Text treten auf dem Off-White deutlicher hervor (mehr Kontrast, war: #fff auf #fff). Eigener Modifier im Muster sec--white/surface/ink/teal; NUR /programm/-Agenda-Sektion (blocks.php agenda_archive). */
.sec--surface{background:var(--surface)}
.sec--ink{background:var(--ink);color:#fff}
.sec--teal{background:var(--teal);color:#fff}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:48px}
.sechead .eyebrow{margin-bottom:14px}
.sechead .eyebrow .mlabel{color:var(--accent)}
.sechead h2{font-weight:900;font-size:clamp(30px,4.6vw,56px);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.sechead p{max-width:420px;font-size:15px;color:rgba(15,30,60,.6);margin-top:14px}
.sec--ink .sechead .eyebrow .mlabel{color:var(--tealtint)}
.sec--ink .sechead p{color:rgba(255,255,255,.6)}
.sec--ink .sechead h2{color:#fff}

/* ══ SPEAKERS — Duotone-Karten ══ */
.speakers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.spk{border-radius:var(--r);overflow:hidden;background:var(--surface)}
.spk .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;background-size:cover;background-position:center}
.spk .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.15),transparent 60%)}
.spk .ph .tag{position:absolute;top:12px;right:12px;left:auto;z-index:2;background:var(--tag,var(--accent));color:var(--tagtxt,var(--offwhite));font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;border-radius:var(--rp)} /* v-alt-2.5.0: RECHTSBÜNDIG · v-alt-2.7.0: KATEGORIE-FARBE via --tag (typ--* Klassen), Fallback = Teal */
.spk .nm{padding:16px 18px}
.spk .nm .role{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.spk .nm h3{font-size:16px;font-weight:800;margin-top:7px;line-height:1.2}
.spk .nm .org{font-size:13px;color:rgba(15,30,60,.55);margin-top:4px}

/* ══ AGENDA / PROGRAMM — flache Listen-Karten ══ */
.agenda{display:grid;gap:14px}
.ag{display:grid;grid-template-columns:150px 1fr auto;gap:24px;align-items:center;background:#fff;border:none;border-radius:var(--r);padding:22px 26px;text-decoration:none;transition:transform .14s,background .14s} /* v-alt-2.8.68 (Sebastian-FB 29.09): Rahmen „2px solid var(--ink)" (voller dunkler Rahmen) → "2px solid rgba(15,30,60,.14)" = EXAKT wie Referenz .taghead .line (2px + --ink @ opacity .14). Betrifft Home (.agx .ag) + /programm/ (.agenda .ag) gleichermaßen (beide erben von .ag). Weißer Hintergrund bleibt. */
.ag:hover{transform:none;background:#fff}
.ag .tm .d{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ag .tm .t{font-size:22px;font-weight:900;margin-top:4px}
.ag .bd h3{font-size:19px;font-weight:800}
.ag .bd .who{font-size:13.5px;color:rgba(15,30,60,.55);margin-top:4px}
.ag .typ{position:relative;z-index:1;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 15px;border-radius:var(--rp);color:#fff}
/* alt-2.8.93 (Sebastian-FB 29.09): „wandernde halbtransparente Outline" (3D-Optik) der
   Speaker-Karten-TAGGS (site.css .spk .ph .tag, 2.8.23–.26) 1:1 ADAPTIERT auf ALLE
   Programm-Taggs (Kategorie [Programm] = .typ auf JEDEM Programmpunkt: Home-Vorschau
   .agx + /programm/ .agenda + jede Detailkarte). Gleiche Technik: @property
   --spifaTagAngle + conic-gradient-Ring (::before, 2px-Kante via mask-xor), Basis-Farbe
   = Tagg-Farbe (--tag, wird von den typ--*-Klassen gesetzt) → durchgehende Linie,
   weißer Glanz läuft 3.4s um den Chip. .ag .typ braucht position:relative für den
   ::before (sonst absolviert er sich an .ag). Textfarbe (.typ{color:#fff}) wird bei
   .ag:hover NICHT invertiert → auf der dunkelblauen Hover-Füllung bleibt der Kontrast.
   Stagger über die Agenda-Liste (gleicher Effekt wie .bento .spk:nth-child). */
.ag .typ{--spifaTagAngle:0deg;animation:spifaTagShine 3.4s linear infinite}
.ag .typ::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));
  -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}
.agenda .ag:nth-child(2) .typ{animation-delay:.5s}
.agenda .ag:nth-child(3) .typ{animation-delay:1s}
.agenda .ag:nth-child(4) .typ{animation-delay:1.5s}
.agenda .ag:nth-child(5) .typ{animation-delay:2s}
.agenda .ag:nth-child(6) .typ{animation-delay:2.5s}
@media (prefers-reduced-motion:reduce){.ag .typ{animation:none}}
.typ--teal{background:var(--teal);--tag:var(--teal)}
.typ--blue{background:var(--blue);--tag:var(--blue)}
.typ--fuchsia{background:#e63264;--tag:#e63264} /* v-alt-2.7.1: ECHTES Fuchsia (war: var(--accent)=Teal in dieser Variante) — Akzent-Tag */
.typ--ink{background:var(--ink);--tag:var(--ink)}
/* v-alt-2.7.0: TAG-PALLETTE (Sebastian) — 5 Kategorien = 5 Brand-Colors;
   --tag wird vom Speaker-Card-Tag (.spk .ph .tag) geerbt, damit dort die
   Kategorie-Farbe anstatt des starren Teal erscheint. */
.typ--pulse{background:var(--pulse);--tag:var(--pulse)}
.typ--midnight{background:var(--ink);--tag:var(--ink)}
.typ--offwhite{background:var(--surface);color:var(--ink);--tag:var(--surface);--tagtxt:var(--ink)}
/* 6.+ Kategorien: Abstufungen (Tints) — deterministisch pro Kategorie-Slug */
.typ--t1{background:#47a08f;--tag:#47a08f}
.typ--t2{background:#4478b0;--tag:#4478b0}
.typ--t3{background:#f88f63;--tag:#f88f63}
.typ--t4{background:#2e4a78;--tag:#2e4a78}
.typ--t5{background:#176d85;--tag:#176d85}

/* ══ VIDEO / IMPRESSIONEN ══ */
.videowrap{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.vframe{background:var(--ink);border-radius:var(--r);aspect-ratio:16/9;position:relative;overflow:hidden;
  background:
   radial-gradient(ellipse at 25% 20%, rgba(0,125,105,.5), transparent 55%),
   radial-gradient(ellipse at 80% 85%, rgba(0,125,105,.3), transparent 50%),
   linear-gradient(150deg,#16264d,#0f1e3c)}
.vframe .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;border:4px solid #fff}
.vframe .play::after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.vframe .lbl{position:absolute;bottom:16px;left:20px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
/* v0.4.12: Eindrücken-Infobox auf Corporate-Gradient (User-Entscheidung 10.09) —
   Bold Blue → Deep Teal, 45° = unten links → oben rechts, Text weiß/Off-White. */
/* v0.4.51: Verlauf (die "Outline") raus — ABER Box bleibt als dezentes dunkles Panel (User-Option A, 17.09).
   v0.4.50 hatte zu viel rausgenommen (transparent + Padding weg) → hier korrigiert. */
.vside{background:transparent;border:none;border-radius:var(--r);padding:32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;color:var(--offwhite)}
.vside .k{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,240,235,.65)}
.vside h3{font-size:26px;font-weight:900;margin-top:12px;line-height:1.1;color:var(--offwhite)}
.vside p{font-size:14.5px;color:rgba(245,240,235,.78);margin:14px 0 24px}
.vside .pill--ink{background:transparent;color:var(--offwhite);border-color:var(--offwhite)}
.vside .pill--ink:hover{background:var(--offwhite);color:var(--ink)}

/* ══ UNTERSTÜTZER — flaches Logo-Grid ══ */
/* v0.4.15: Headlines zentriert + mehr Luft (User-FB 10.09) */
/* v0.4.18: Abstände ZU DEN HEADLINES auch vergrößert (User-FB 11.09):
   Headline→Logos 36→66px, Premium-Logos→Standard-Headline 56→86px. */
.suprow .lab{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:66px}
.suprow .lab .b{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;padding:7px 16px;border-radius:var(--rp)}
.suprow .lab .l{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
/* v0.4.17: Vertikaler Logo-Abstand +30px (User-FB 10.09): Zeilen 28px → 58px. */
.supgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:58px 20px;margin-bottom:86px}
/* v0.4.14: Logo-Box ENTFERNT (User-FB 10.09) — keine Hintergrundflächen,
   keine Outlines. Transparente Logos schweben frei auf der Off-White-Sektion. */
/* v0.4.15: Hover-Lift ENTFERNT (User-FB 10.09) */
.logo{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;text-align:center;padding:0 12px;color:rgba(15,30,60,.45)}
/* 25.09 Client-FB: LOGOS IN ORIGINAL-4C — KEIN Farboverlay, KEIN Filter.
   v0.4.19-Nachtblau-Maske (background-color + -webkit-mask) ENTFERNT —
   das PNG wird 1:1 als background-image gerendert (contain, zentriert).
   Größe unverändert: 46px hoch, Breite max. 190px. v-alt-2.8.48: Puls (v0.4.31) ENTFERNT (Sebastian-FB: Vereins-Marquee genügt). */
.logoimg{display:inline-block;width:190px;height:46px;
  background-image:var(--logo);background-position:center;background-repeat:no-repeat;background-size:contain;}
/* v-alt-2.8.48 (Sebastian-FB 26.09): spifaLogoPulse + Stagger-Entfernt — die Marquee-Band-Animation der Vereinspartner genügt, kein zusätzlicher Puls-Effekt im [Unterstützer]-Block. */
/* a11y: Wer Bewegungsempfindlichkeit einstellt, sieht statische Logos. */
@media (prefers-reduced-motion:reduce){
  .logoimg{animation:none}
}
.suprow--premium .lab .b{background:var(--accent);color:#fff}
.suprow--standard .lab .b{background:var(--teal);color:#fff}

/* ══ VEREINS-LOGOS — 35 Slots, 2 gegenläufige Marquee-Reihen (v-alt-2.8.41) ══
   3. Reihe am Ende des Partner-Blocks. Off-White (--surface) bleibt der
   Sektions-Hintergrund. Logos = 4C Original (keine Maske), feste Höhe 44px +
   width:auto → jedes Logo behält sein Aspect-Ratio (Quadratisch 1:1 bis
   Ultra-breit 9.8:1 — width:contain wäre gestaucht, fixe Box zu winzig).
   Naht-Mathematik wie Ticker (shared.js): 2 identische Kopien pro Reihe,
   JS misst die Naht (offsetLeft erstes Logo der Copy B) → --shift (px).
   Reihe 1 nach links, Reihe 2 nach rechts (gegenläufig). Reduced-Motion: statisch. */
.lgoBand{margin-top:86px}
/* v-alt-2.8.44 (Sebastian-FB „läuft nicht von rand zu rand“): Kein Clip mehr auf .lgoBand —
   die Reihen brechen jetzt wirklich aus .wrap aus (width:100vw). Stattdessen EDGE-FADES:
   Logos weichen an den Viewport-Enden weich ins off-white aus statt hart abzuschneiden. */
.lgoBand-row{overflow:hidden;margin-top:50px;position:relative} /* alt-2.8.90: 20→50px (+30px Abstand Band 1↔Band 2) */
.lgoBand-row::before,.lgoBand-row::after{content:"";position:absolute;top:0;bottom:0;width:70px;z-index:2;pointer-events:none}
.lgoBand-row::before{left:0;background:linear-gradient(90deg,var(--surface) 0%,rgba(245,240,235,0) 100%)}
.lgoBand-row::after{right:0;background:linear-gradient(270deg,var(--surface) 0%,rgba(245,240,235,0) 100%)}
.lgoBand-lab{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:64px} /* alt-2.8.89: 44→64px (+20px Abstand Tagg→Logos) */
.lgoBand-lab .b{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 16px;border-radius:var(--rp);background:transparent;color:rgba(15,30,60,.55);
  border:2px solid rgba(15,30,60,.18)}
.lgoBand-lab .suf{font-size:13px;font-weight:600;letter-spacing:.01em;color:rgba(15,30,60,.55);white-space:nowrap} /* alt-2.8.88: reiner Text neben dem Tagg */
.lgoBand-row:first-of-type{margin-top:0}
.lgoBand-track{display:flex;width:max-content;animation:lgoBandSlide 80s linear infinite;will-change:transform}
.lgoBand-row--r2 .lgoBand-track{animation-name:lgoBandSlideRev}
.lgoBand:hover .lgoBand-track{animation-play-state:paused}
.lgoBand-copy{display:flex;align-items:center;gap:96px;padding:0 48px}
@keyframes lgoBandSlide{from{transform:translateX(0)}to{transform:translateX(var(--shift,-50%))}}
@keyframes lgoBandSlideRev{from{transform:translateX(var(--shift,-50%))}to{transform:translateX(0)}}
.lgoBand-logo{height:38px;width:120px;object-fit:contain;object-position:center;flex:0 0 120px;display:block;opacity:.92}
.lgoBand-logoLink{flex:0 0 120px;display:block;line-height:0}
.lgoBand-logoLink:focus-visible{outline:2px solid #FA6432;outline-offset:3px;border-radius:4px}
@media (max-width:760px){
  .lgoBand{margin-top:56px}
  .lgoBand-logo{height:32px;width:100px;flex:0 0 100px}
  .lgoBand-logoLink{flex:0 0 100px}
  .lgoBand-copy{gap:64px;padding:0 32px}
}
/* a11y: Wer Bewegungsempfindlichkeit einstellt, sieht statische Logos (Reihe 1 sichtbar). */
@media (prefers-reduced-motion:reduce){
  .lgoBand-track{animation:none}
}


/* v-alt-2.8.57 (Sebastian-FB 29.09): VEREINS-LOGOS auf der /unterstuetzer/-Seite
   als KACHEL-GRID — 5 Spalten, engmaschig, Logos KLEINER als die Hauptpartner
   (Hauptpartner = 190×46px). Home bleibt beim Marquee-Band (.lgoBand).
   v-alt-2.8.58 (Sebastian-FB 29.09): Vertikales Gap deutlich erhöht (34→84px, „ca. 50px mehr");
   das Wort „Logos" neben dem Vereinspartner-Tag ENTFERNT (nur noch der Tag). */
.lgoGrid-sec{margin-top:86px}
.lgoGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:84px 14px}
.lgoGrid-cell{display:flex;align-items:center;justify-content:center;min-height:46px;padding:4px 2px}
.lgoGrid-logo{height:34px;width:150px;object-fit:contain;object-position:center;display:block;opacity:.95}
@media (max-width:960px){
  .lgoGrid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .lgoGrid{grid-template-columns:repeat(2,1fr)}
  .lgoGrid-logo{height:28px;width:110px}
}
/* v-alt-2.8.59 (Sebastian-FB 29.09): Zweispaltige Partner-Textbox (2 separate
   CMS-Textfelder). v-alt-2.8.60 (Sebastian-FB 29.09): Position = ÜBER dem kompletten
   Partner-Bereich (vor Premium-Unterstützern, als Intro-Text für die Logos darunter)
   + TEXT LINKSBÜNDIG (war zentriert) + volle Breite (war max 900px).
   2 gefüllte Spalten nebeneinander; 1 gefüllt = 1 Spalte; beide leer = unsichtbar.
   v-alt-2.8.61 (Sebastian-FB 29.09): Unterer Abstand 64→114px („+50px, Premium weiter abrücken"). */
.lgoIntro{max-width:1100px;margin:0 0 114px;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px 56px;text-align:left}
.lgoIntro-col p{margin:0;font-size:17px;line-height:1.75;color:rgba(15,30,60,.82);font-weight:400}

/* ══ NEWSLETTER ══ */
/* v0.4.21: 2-Spalten-Layout — Text links, Formular rechts (User-FB 11.09).
   Formular = BLOCK (vorher flex in einer Reihe → rohes Tag daneben). */
.news .in{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.news h2{font-weight:900;font-size:clamp(28px,4vw,46px);line-height:1;text-transform:uppercase}
.news .eyebrow{margin-bottom:12px}
.news .eyebrow .mlabel{color:var(--tealtint)}
.news p{color:rgba(255,255,255,.65);margin-top:12px;max-width:440px}
.news .in > div:first-child{flex:1 1 320px;max-width:440px}
.news form{flex:1 1 340px;max-width:440px;display:block}
/* v0.4.28: E-Mail-Feld 40px NACH UNTEN → Alignment mit Headline „Nichts verpassen" (Richtung korrigiert, User-FB 11.09) */
.news form{margin-top:40px}
.news form p{margin:0 0 14px;color:rgba(255,255,255,.75);max-width:none}
/* v0.4.29: Button 10px weiter nach unten (User-FB 11.09) → Abstand Checkbox→Button 44px */
.news form p:last-of-type{margin-bottom:0;margin-top:44px}
.news form label{display:block;font-size:14px;line-height:1.5}
.news form input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent);vertical-align:middle;margin-right:8px;flex:0 0 auto}
.news form .wpcf7-form-control-wrap{display:block}
/* v0.4.22: Checkbox saubere Flex-Zeile (User-FB 11.09) — CF7-Default
   .wpcf7-list-item{display:inline-block} erzeugt das „schwimmende" Label. */
.news form .wpcf7-checkbox{display:block}
.news form .wpcf7-list-item{display:flex;align-items:flex-start;gap:10px;margin:0}
/* v0.4.23: Checkbox NICHT von .news input{flex:1;min-width:240px} betroffen
   (User-FB 11.09: 350px-Spalte zwischen Checkbox + Label). */
.news form .wpcf7-list-item input[type=checkbox]{flex:0 0 auto;min-width:0;width:18px;height:18px;margin:3px 0 0}
.news form .wpcf7-list-item-label{display:inline;line-height:1.6;font-size:13px;color:rgba(255,255,255,.7)}
.news form input[type=email]{flex:1;min-width:240px;padding:16px 20px;border-radius:var(--rp);border:2px solid #fff;background:rgba(255,255,255,.08);color:#fff;font-family:inherit;font-size:15px}
.news form input[type=email]::placeholder{color:rgba(255,255,255,.5)}
.news form .wpcf7-submit{display:inline-block;padding:15px 30px;border-radius:999px;border:2px solid var(--accent);background:var(--accent);color:#fff;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:background .2s,color .2s}
.news form .wpcf7-submit:hover{background:#FA6432;border-color:#FA6432;color:#fff} /* v-alt-1.2.0: solid-Button orange im Hover (war transparent/Teal-Text = wirke wie Outline) | v-alt-1.3.0: + border-color orange (war Teal-Rand im Hover) */

/* ══ CTA-BAND ══ */
.ctaband{background:var(--accent);color:var(--offwhite);padding:64px 0}
.ctaband .in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ctaband h2{font-weight:900;font-size:clamp(30px,4.4vw,54px);line-height:.98;text-transform:uppercase}
.ctaband .eyebrow{margin-bottom:14px}
.ctaband .eyebrow .mlabel{color:var(--ink);opacity:.7}

/* ══ FOOTER ══ */
.ft{background:var(--ink);color:rgba(245,240,235,.7);padding:56px 0 40px;font-size:14px}
.ft .cols{display:flex;gap:44px;flex-wrap:wrap;justify-content:space-between}
.ft h5{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.ft a{display:block;padding:5px 0;text-decoration:none}
.ft a:hover{color:var(--accent)}
.ft .legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
/* v-alt-2.8.62 (Sebastian-FB 29.09): ABBINDLER — unterstes Ende jeder Seite
   (ganz unten im Footer, vor dem dekorativen „SPIFA 2027“-Wort): Veranstalter-
   Satz + SPIFA-Dachverband-Logo (Negativ = passt auf den Midnight-Footer).
   v-alt-2.8.63 (Sebastian-FB 29.09): Satz + Logo UNTEREINANDER + MITTIG im Footer
   (war: nebeneinander, linksbündig). Logo folgt auf den Satz („…des“ → Logo). */
.ft .abbinder{margin-top:36px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;font-size:13.5px;color:rgba(245,240,235,.82)}
.ft .abbinder p{margin:0}
.ft .abbinder img{height:56px;width:auto;flex:0 0 auto;display:block} /* v-alt-2.8.64 (Sebastian-FB 29.09): Logo minimal größer (46→56px) */
@media (max-width:600px){
  .ft .abbinder{gap:12px}
  .ft .abbinder img{height:40px} /* v-alt-2.8.64: mobil 34→40px */
}

/* reveal (nur mit JS) */
body.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
body.js .rv.on{opacity:1;transform:none}

/* responsive */
@media (max-width:960px){
  /* v-alt-2.2.0: Header-Mobil-Regeln (2. Zeile, Nav-Scroll) ENTFERNT — Burger-Menü +
     Bottom-Sheet (site.css) regeln jetzt die mobile Navigation. */
  .hd .de{display:none}
  .infos,.speakers,.supgrid{grid-template-columns:1fr 1fr}
  .videowrap{grid-template-columns:1fr}
  .ag{grid-template-columns:1fr;gap:10px}
  .ag .typ{justify-self:start}
}
@media (max-width:600px){
  .infos,.speakers,.supgrid{grid-template-columns:1fr}
  .cd{grid-template-columns:1fr 1fr}
  .sec{padding:64px 0}
  .hd .brand img{height:38px}
}