/* ÖGV NachfolgeHub — gemeinsames Stylesheet
   Grundlage: Brandbook Österreichischer Gewerbeverein 2025 */

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

/* ══════════════════════════════════════════════
   ÖGV BRANDBOOK 2025 — verbindliche Tokens
   Rot #bf190e · Hellblau #dee6ef · Blau #5077b4
   Gelb #f9bd48 · Weiß #ffffff
   ══════════════════════════════════════════════ */
:root {
  --red:        #bf190e;
  --red-deep:   #8d120a;          /* nur Hover — abgeleitet */
  --red-12:     rgba(191,25,14,.12);
  --red-24:     rgba(191,25,14,.24);
  --red-60:     rgba(191,25,14,.60);
  --paper:      #dee6ef;
  --blue:       #5077b4;
  --yellow:     #f9bd48;
  --white:      #ffffff;

  /* Neutraltöne — im Brandbook nicht definiert.
     Übernommen aus dem Kampagnenmaterial missionnachfolge (LIESMICH des
     Social-Sets): Schiefer für Text, helle Fläche für ruhige Abschnitte. */
  --ink:        #2E3B4A;          /* Schiefer — Fliesstext */
  --ink-2:      #5A6472;
  --hair:       #C6D2E0;
  --surface:    #EEF1F4;          /* helle Fläche */

  --f-display: "Futura Display","Futura PT Bold","Futura","Jost","Century Gothic",sans-serif;
  --f-head:    "Futura","Futura PT","Jost","Century Gothic",Arial,sans-serif;
  --f-body:    "Assistant","Futura","Jost",Arial,sans-serif;

  /* Abstands-Skala 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --max: 1200px;
  --bar: 48px;
}

/* Grundskala. Fast alle Schriftgrößen sind in rem gesetzt und hängen an
   diesem Wert — eine Anhebung hier verschiebt die ganze Seite proportional,
   statt zwei Dutzend Einzelwerte auseinanderlaufen zu lassen. */
html { font-size: 112.5%; scroll-behavior:smooth; scroll-padding-top:112px; }

body {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Typografie-Basis ── */
.display {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.015em;
  color: var(--red);
}
h1,h2,h3,h4 { font-family: var(--f-head); font-weight:700; line-height:1.15; }
p { max-width: 68ch; }
a { color: var(--red); text-decoration:none; }

/* ══════════ KOPFLEISTE ROT (Brandbook-Element) ══════════ */
.oegv-bar {
  height: var(--bar);
  background: var(--red);
  color: var(--white);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--s3);
  font-family: var(--f-head);
  font-size: .82rem;
  letter-spacing: .04em;
}
.oegv-bar .right { opacity:.92; }

/* ══════════ NAVIGATION ══════════ */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.nav-inner {
  max-width: var(--max); margin:0 auto;
  padding: var(--s2) var(--s3);
  display:flex; align-items:center; justify-content:space-between; gap: var(--s3);
}
/* Offizielle ögv-Wortmarke (Quelle: gewerbeverein.at).
   Zulässige Varianten: rot freigestellt bzw. weiß freigestellt.
   Schutzraum rundum über padding, keine Rahmen, keine Effekte. */
.brand { display:flex; align-items:center; gap: var(--s2); }
.brand-logo {
  height: 30px; width:auto; color: var(--red);
  display:block; padding: 4px 0;
}
.brand-sep { width:1px; height:26px; background: var(--hair); }
.brand-name {
  font-family: var(--f-head); font-weight:700;
  font-size: 1.05rem; color: var(--ink); letter-spacing:-.01em;
}
.brand-name span { color: var(--red); }

.nav-links { display:flex; gap: var(--s3); list-style:none; align-items:center; }
.nav-links a {
  font-family: var(--f-head); font-size:.88rem; font-weight:500;
  color: var(--ink); letter-spacing:.01em; padding: 6px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--red); border-bottom-color: var(--red); }
.nav-links .nav-cta {
  background: var(--red); color: var(--white);
  padding: 11px 22px; border-radius: 999px; border:none;
}
.nav-links .nav-cta:hover { background: var(--red-deep); color:var(--white); }

.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  width:32px; height:24px; flex-direction:column; justify-content:space-between;
}
.nav-toggle span { display:block; height:2px; background: var(--red); border-radius:2px; }

/* ══════════ FORMEN — max. 2 pro Fläche, am Rand angeschnitten ══════════ */
.blob {
  position:absolute; background: var(--red);
  border-radius: 54% 46% 38% 62% / 48% 56% 44% 52%;
  pointer-events:none; z-index:0;
}
.blob-tr { top:-190px; right:-160px; width:520px; height:460px;
           border-radius: 46% 54% 62% 38% / 55% 42% 58% 45%; }
.blob-bl { bottom:-210px; left:-180px; width:480px; height:430px; }
.circle {
  position:absolute; border-radius:50%; background: var(--red);
  pointer-events:none; z-index:0;
}
.bar-shape {
  position:absolute; background: var(--red);
  width: 14px; pointer-events:none; z-index:0;
}

/* ══════════ SEKTIONEN ══════════ */
section { position:relative; padding: var(--s7) 0; overflow:hidden; }
.container { max-width: var(--max); margin:0 auto; padding: 0 var(--s3); position:relative; z-index:1; }

.bg-paper { background: var(--paper); }
.bg-red   { background: var(--red); }
.bg-red, .bg-red p, .bg-red li { color: var(--white); }
.bg-red .s-title, .bg-red .s-label { color: var(--white); }

.s-label {
  font-family: var(--f-head); font-weight:700;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--red); margin-bottom: var(--s3);
}
.s-title {
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height:1.02;
  letter-spacing:-.02em; color: var(--red);
  max-width: 20ch; margin-bottom: var(--s3);
}
.s-sub {
  font-size: 1.2rem; color: var(--ink-2);
  max-width: 68ch; margin-bottom: var(--s6);
}
.bg-red .s-sub { color: rgba(255,255,255,.86); }
.center { text-align:center; }
.center .s-title, .center .s-sub { margin-left:auto; margin-right:auto; }
.center .s-title { max-width: 24ch; }

/* ══════════ BUTTONS ══════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  height:48px; padding: 0 28px; border-radius:999px;
  font-family: var(--f-head); font-weight:600; font-size:.92rem;
  letter-spacing:.02em; border:1.5px solid transparent; cursor:pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-deep); color:var(--white); }
.btn-line { background:transparent; color: var(--red); border-color: var(--red); }
.btn-line:hover { background: var(--red); color: var(--white); }
.btn-white { background: var(--white); color: var(--red); }
.btn-white:hover { background: var(--paper); }

/* ══════════ HERO ══════════ */
.hero {
  background: var(--paper);
  padding: var(--s8) 0 var(--s7);
}
.hero-eyebrow {
  display:inline-block; background: var(--red); color: var(--white);
  font-family: var(--f-head); font-weight:600;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  padding: 9px 18px; border-radius:999px; margin-bottom: var(--s4);
}
.hero h1 {
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(3.6rem, 10.5vw, 8.5rem); line-height:.94;
  letter-spacing:-.03em; color: var(--red); margin-bottom: var(--s3);
}
.hero-lead {
  font-size: 1.4rem; color: var(--ink); max-width: 60ch;
  margin-bottom: var(--s5); line-height:1.5;
}
.hero-btns { display:flex; gap: var(--s2); flex-wrap:wrap; margin-bottom: var(--s8); }
.hero-stats {
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: var(--s3); border-top: 2px solid var(--red); padding-top: var(--s4);
}
.hero-stat .num {
  display:block; font-family: var(--f-display); font-weight:800;
  font-size: clamp(2.6rem,5vw,3.8rem); line-height:1; color: var(--red);
  letter-spacing:-.02em; margin-bottom: var(--s1);
}
.hero-stat .label {
  font-family: var(--f-head); font-size:.82rem; font-weight:500;
  color: var(--ink-2); letter-spacing:.03em;
}
.hero-motto {
  margin-top: var(--s6); font-family: var(--f-head);
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--red-60);
}

/* ══════════ KARTEN ══════════ */
.grid-3 { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: var(--s3); }
.grid-2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: var(--s3); }
.grid-4 { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-6 { margin-top: var(--s6); }

.card {
  background: var(--white); border-radius:12px; padding: var(--s4);
}
.bg-paper .card { background: var(--white); }
/* Weiße Bauteile auf weißer Fläche hätten keine Kontur — dort Hellblau */
section:not(.bg-paper):not(.bg-red) .card,
section:not(.bg-paper):not(.bg-red) .aud-card,
section:not(.bg-paper):not(.bg-red) .fmt-card,
section:not(.bg-paper):not(.bg-red) .pcol:not(.hl),
section:not(.bg-paper):not(.bg-red) .termin { background: var(--paper); }

.fact-num {
  font-family: var(--f-display); font-weight:800;
  font-size: 2.6rem; line-height:1; color: var(--red);
  letter-spacing:-.02em; margin-bottom: var(--s2);
}
.fact-label {
  font-family: var(--f-head); font-weight:700; font-size:.95rem;
  color: var(--ink); margin-bottom: var(--s1);
}
.card p { font-size:.92rem; color: var(--ink-2); }

/* Mission / Vision Panel */
.panel {
  margin-top: var(--s6); background: var(--white);
  border-radius:12px; padding: var(--s5);
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--s5);
}
.bg-paper .panel { background: var(--white); }
.panel ul { list-style:none; }
.panel li {
  font-size:.95rem; color: var(--ink-2); padding: var(--s1) 0;
  border-bottom: 1px solid var(--hair);
}
.panel li:last-child { border-bottom:none; }
.panel li::before { content:"→"; color: var(--red); font-weight:700; margin-right: var(--s1); }

/* Zielgruppen */
.aud-card { background: var(--white); border-radius:12px; padding: var(--s4); border-top: 4px solid var(--red); }
.aud-num {
  font-family: var(--f-display); font-weight:800; font-size:1.6rem;
  color: var(--red-24); line-height:1; margin-bottom: var(--s2);
}
.aud-card h3 { font-size:1.15rem; color: var(--ink); margin-bottom: var(--s2); }
.aud-card p { font-size:.92rem; color: var(--ink-2); }

/* Advisory */
.adv-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--s4); }
.adv { text-align:center; }
.adv-avatar {
  width:88px; height:88px; border-radius:50%; background: var(--red);
  color: var(--white); font-family: var(--f-head); font-weight:700;
  font-size:1.35rem; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto var(--s2);
}
.adv h4 { font-size:.98rem; color: var(--ink); margin-bottom:4px; }
.adv .role { font-size:.82rem; color: var(--red); font-weight:600; font-family: var(--f-head); }
.adv .org  { font-size:.76rem; color: var(--ink-2); margin-top:2px; }

.benefits { margin-top: var(--s7); display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: var(--s3); }
.benefit { display:flex; gap: var(--s2); align-items:flex-start; }
.benefit .dot { width:12px; height:12px; border-radius:50%; background: var(--red); flex-shrink:0; margin-top:7px; }
.benefit p { font-size:.92rem; color: var(--ink-2); }

/* Formate */
.fmt-card { background: var(--white); border-radius:12px; padding: var(--s4); }
.fmt-freq {
  display:inline-block; font-family: var(--f-head); font-weight:700;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--red); background: var(--red-12);
  padding: 6px 12px; border-radius:999px; margin-bottom: var(--s3);
}
.fmt-card h3 { font-size:1.1rem; margin-bottom: var(--s1); }
.fmt-card p { font-size:.9rem; color: var(--ink-2); }

/* Event-Kategorien */
.evt { background: var(--paper); border-radius:12px; padding: var(--s4); border-left: 4px solid var(--red); }
.evt h3 { font-size:1.05rem; color: var(--red); margin-bottom: var(--s2); }
.evt ul { list-style:none; }
.evt li { font-size:.9rem; color: var(--ink-2); padding: 5px 0; border-bottom:1px solid var(--hair); }
.evt li:last-child { border-bottom:none; }

/* Räume */
.venue { background: rgba(255,255,255,.10); border-radius:12px; padding: var(--s4); }
.venue h3 { font-size:1.1rem; color: var(--white); margin-bottom:6px; }
.venue .cap {
  font-family: var(--f-head); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  color: var(--yellow); margin-bottom: var(--s2);
}
.venue p { font-size:.88rem; color: rgba(255,255,255,.78); }

/* Content-Liste */
.clist { display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: var(--s4); }
.citem { display:flex; gap: var(--s3); align-items:flex-start; }
.cnum {
  font-family: var(--f-display); font-weight:800; font-size:1.7rem;
  color: var(--red); line-height:1; flex-shrink:0; min-width:44px;
}
.citem h3 { font-size:1.02rem; margin-bottom:4px; }
.citem p { font-size:.9rem; color: var(--ink-2); }

/* Plattform-Spalten */
.pcol { background: var(--white); border-radius:12px; padding: var(--s4); }
.pcol.hl { background: var(--red); }
.pcol.hl h3, .pcol.hl li { color: var(--white); }
.pcol .tag {
  display:inline-block; font-family: var(--f-head); font-weight:700;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--red); background: var(--red-12);
  padding: 6px 12px; border-radius:999px; margin-bottom: var(--s3);
}
.pcol.hl .tag { background: rgba(255,255,255,.20); color: var(--white); }
.pcol h3 { font-size:1.12rem; margin-bottom: var(--s3); }
.pcol ul { list-style:none; }
.pcol li { font-size:.9rem; color: var(--ink-2); padding: var(--s1) 0; border-bottom:1px solid var(--hair); }
.pcol.hl li { border-bottom-color: rgba(255,255,255,.24); }
.pcol li:last-child { border-bottom:none; }

/* Qualitätssiegel */
.siegel {
  margin-top: var(--s6); background: var(--red); border-radius:12px;
  padding: var(--s5); display:flex; gap: var(--s5); align-items:flex-start; flex-wrap:wrap;
}
.siegel-mark {
  width:104px; height:104px; border-radius:50%;
  border: 3px solid var(--white); color: var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--f-head); flex-shrink:0; text-align:center; line-height:1.1;
}
.siegel-mark .tick { font-size:1.9rem; font-weight:700; }
.siegel-mark .txt { font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; margin-top:2px; }
.siegel h3 { color: var(--white); font-size:1.3rem; margin-bottom: var(--s1); }
.siegel .intro { color: rgba(255,255,255,.86); font-size:.95rem; margin-bottom: var(--s3); }
.siegel ul { list-style:none; }
.siegel li {
  color: var(--white); font-size:.92rem; padding: var(--s1) 0;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.siegel li:last-child { border-bottom:none; }
.siegel li::before { content:"—"; margin-right: var(--s1); opacity:.6; }

/* Investition */
.inv { display:grid; gap: var(--s2); }
.inv-item {
  display:flex; gap: var(--s2); align-items:flex-start;
  background: rgba(255,255,255,.10); border-radius:12px; padding: var(--s3);
}
.inv-item .arrow { color: var(--yellow); font-weight:700; flex-shrink:0; }
.inv-item p { font-size:.95rem; color: var(--white); }

/* Partner */
.pf { padding: var(--s4) 0; border-bottom: 1px solid var(--hair); }
.pf:last-child { border-bottom:none; }
.pf h3 { font-size:1rem; color: var(--red); margin-bottom: var(--s2); }
.ptags { display:flex; gap: var(--s1); flex-wrap:wrap; }
.ptag {
  font-family: var(--f-head); font-size:.82rem; font-weight:500;
  color: var(--ink); background: var(--white);
  padding: 8px 16px; border-radius:999px;
}
.bg-paper .ptag { background: var(--white); }

/* Roadmap */
.roadmap { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: var(--s4); position:relative; }
.phase { position:relative; padding-top: var(--s4); border-top: 3px solid var(--hair); }
.phase.on { border-top-color: var(--red); }
.phase .dot {
  position:absolute; top:-9px; left:0; width:15px; height:15px;
  border-radius:50%; background: var(--white); border: 3px solid var(--hair);
}
.phase.on .dot { background: var(--red); border-color: var(--red); }
.phase .time {
  font-family: var(--f-head); font-weight:700; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--red);
  margin-bottom: var(--s1);
}
.phase h3 { font-size:1rem; margin-bottom:4px; }
.phase p { font-size:.86rem; color: var(--ink-2); }

/* Termine */
.termine { display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: var(--s2); }
.termin {
  display:flex; gap: var(--s3); align-items:center;
  background: var(--white); border-radius:12px; padding: var(--s3);
}
.t-date {
  background: var(--red); color: var(--white); border-radius:12px;
  width:60px; height:60px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--f-head); line-height:1;
}
.t-date .day { font-size:1.4rem; font-weight:700; }
.t-date .month { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
.termin h4 { font-size:.94rem; margin-bottom:2px; }
.termin .loc { font-size:.78rem; color: var(--ink-2); }

/* ══════════ FORMULARE ══════════ */
.tabs { display:flex; gap: var(--s1); flex-wrap:wrap; justify-content:center; margin-bottom: var(--s5); }
.tab {
  height:48px; padding: 0 24px; border-radius:999px;
  font-family: var(--f-head); font-weight:600; font-size:.88rem;
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--hair); cursor:pointer; transition: all .2s;
}
.tab:hover { border-color: var(--red); color: var(--red); }
.tab.active { background: var(--red); color: var(--white); border-color: var(--red); }

.fpanel { display:none; }
.fpanel.active { display:block; }
.fbox { background: var(--white); border-radius:12px; padding: var(--s5); max-width: 900px; margin:0 auto; }
.fbox h3 { font-size:1.35rem; color: var(--red); margin-bottom: var(--s1); }
.fbox > p { font-size:.95rem; color: var(--ink-2); margin-bottom: var(--s5); }

.fgrid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--s3); }
.fgrid .full { grid-column: 1 / -1; }
label {
  display:block; font-family: var(--f-head); font-weight:600;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-2); margin-bottom: var(--s1);
}
input, select, textarea {
  width:100%; font-family: var(--f-body); font-size:.98rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid transparent;
  border-radius:12px; padding: 13px 16px; transition: border-color .2s, background .2s;
}
textarea { min-height:130px; resize:vertical; }
input:focus, select:focus, textarea:focus {
  outline:none; border-color: var(--red); background: var(--white);
}
::placeholder { color: var(--ink-2); opacity:.7; }
.fsubmit { margin-top: var(--s5); display:flex; justify-content:flex-end; }
.fnote {
  margin-top: var(--s3); font-size:.8rem; color: var(--ink-2);
  background: var(--paper); border-radius:12px; padding: var(--s2) var(--s3);
}

/* ══════════ FOOTER ══════════ */
footer {
  position:relative; overflow:hidden;
  background: var(--red); color: var(--white);
  padding: var(--s7) var(--s3) var(--s5); text-align:center;
}
.f-mark {
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(2rem,5vw,3rem); line-height:1;
  letter-spacing:-.02em; color: var(--white); margin-bottom: var(--s3);
}
footer p { color: rgba(255,255,255,.86); font-size:.92rem; margin:0 auto; }
footer a { color: var(--white); text-decoration:underline; text-underline-offset:3px; }
.f-links { display:flex; gap: var(--s3); justify-content:center; flex-wrap:wrap; margin: var(--s5) 0 var(--s4); }
.f-links a {
  font-family: var(--f-head); font-size:.85rem; font-weight:500;
  color: rgba(255,255,255,.86); text-decoration:none;
}
.f-links a:hover { color: var(--white); }
.f-motto {
  font-family: var(--f-head); font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.72); margin-top: var(--s4);
}
.f-copy {
  margin-top: var(--s5); padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.24);
  font-size:.78rem; color: rgba(255,255,255,.6);
}

.f-logo { display:inline-block; margin-bottom: var(--s4); }
.f-logo-svg { height:44px; width:auto; color: var(--white); display:block; }

/* ══════════ ÖGV-QUERVERWEISE / LIVE-FEED ══════════ */
.feed-cols { display:grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: var(--s5); }
.feed-col > h3 {
  font-family: var(--f-head); font-size:1.05rem; color: var(--red);
  margin-bottom: var(--s3); padding-bottom: var(--s2);
  border-bottom: 2px solid var(--red);
  display:flex; align-items:baseline; justify-content:space-between; gap: var(--s2);
}
.feed-col > h3 a { font-size:.76rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; }
.feed-list { list-style:none; }
.feed-list li { border-bottom:1px solid var(--hair); }
.feed-list li:last-child { border-bottom:none; }
.feed-list a {
  display:flex; gap: var(--s3); align-items:baseline;
  padding: var(--s3) 0; color: var(--ink); transition: color .2s;
}
.feed-list a:hover { color: var(--red); }
.feed-date {
  font-family: var(--f-head); font-weight:700; font-size:.7rem;
  letter-spacing:.1em; text-transform:uppercase; color: var(--red);
  flex-shrink:0; min-width:76px;
}
.feed-title { font-size:.98rem; line-height:1.4; }
.feed-status { font-size:.9rem; color: var(--ink-2); padding: var(--s3) 0; }

/* Sieben Verweise gehen in keinem Raster glatt auf — ein Rest bleibt immer.
   Als linksbündige Reihe brachen sie 5 + 2 um und liessen zwei an der Kante
   kleben. Jetzt gleich breite Felder in mittig gesetzten Zeilen: Der Rest
   steht dann zentriert unter den anderen statt angeschnitten daneben. */
.oegv-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s2); margin-top: var(--s6);
}
.oegv-links .oegv-link { flex: 0 1 215px; }
.oegv-link {
  display:flex; align-items:center; justify-content:space-between; gap: var(--s1);
  font-family: var(--f-head); font-size:.85rem; font-weight:500;
  color: var(--ink); background: transparent;
  padding: 11px 20px; border-radius:999px;
  border:1.5px solid var(--hair); transition: all .2s;
}
.oegv-link:hover { border-color: var(--red); color: var(--red); }
.oegv-link::after { content:"↗"; color: var(--red); font-size:.85em; }

/* Seit das Ausklappmenü aufgelöst ist, stehen fünf Punkte plus Schaltfläche
   nebeneinander statt drei. Der Umschaltpunkt musste deshalb nach oben:
   bei 1280 px lief die Leiste sonst über und schnitt den CTA ab. */
@media (min-width: 1181px) and (max-width: 1400px) {
  .nav-links { gap: var(--s2); }
  .nav-links a { font-size: .84rem; }
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 1080px) {
  :root { --s7: 48px; --s8: 64px; }
  .nav-toggle { display:flex; }
  .nav-links {
    display:none; position:absolute; top:100%; left:0; right:0;
    background: var(--white); border-bottom:1px solid var(--hair);
    flex-direction:column; align-items:flex-start;
    gap: var(--s2); padding: var(--s3);
  }
  .nav-links.open { display:flex; }
  .oegv-bar { font-size:.7rem; padding: 0 var(--s2); }
  .oegv-bar .right { display:none; }
  .siegel { flex-direction:column; }
  .brand-logo { height:26px; }
  .f-logo-svg { height:36px; }
  .panel, .fbox { padding: var(--s4); }
}
@media (max-width: 520px) {
  .hero-btns .btn { width:100%; }
  .blob-tr, .page-hero .blob-tr { width:280px; height:250px; top:-120px; right:-110px; }
  .blob-bl { width:300px; height:270px; bottom:-130px; left:-120px; }
}

/* ══════════════════════════════════════════════
   UNTERSEITEN
   ══════════════════════════════════════════════ */

/* ── Navigation mit Ausklappmenü ── */
.nav-links li.has-drop { position:relative; }
.nav-drop-toggle {
  background:none; border:none; cursor:pointer;
  font-family: var(--f-head); font-size:.88rem; font-weight:500;
  color: var(--ink); letter-spacing:.01em; padding: 6px 0;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  border-bottom: 2px solid transparent; transition: color .2s, border-color .2s;
}
.nav-drop-toggle::after { content:"▾"; font-size:.8em; color: var(--red); }
.nav-drop-toggle:hover, li.has-drop.open .nav-drop-toggle { color: var(--red); border-bottom-color: var(--red); }
.nav-drop {
  position:absolute; top:calc(100% + 12px); left:-16px; min-width:250px;
  background: var(--white); border:1px solid var(--hair); border-radius:12px;
  padding: var(--s1); list-style:none; display:none; z-index:120;
}
li.has-drop.open .nav-drop { display:block; }
.nav-drop a {
  display:block; padding: 11px 16px; border-radius:8px;
  font-size:.88rem; border-bottom:none; white-space:nowrap;
}
.nav-drop a:hover { background: var(--paper); color: var(--red); border-bottom-color:transparent; }
.nav-links a.aktiv { color: var(--red); border-bottom-color: var(--red); }

/* ── Kopfbereich der Unterseiten ── */
.page-hero { background: var(--paper); padding: var(--s7) 0 var(--s6); }
/* Der Seitenkopf ist flacher als der Hero — die Form muss kleiner
   ausfallen und weiter außen sitzen, sonst läuft rote Schrift hinein. */
.page-hero .blob-tr {
  top:-210px; right:-170px; width:400px; height:360px;
}
.page-hero .container > * { position:relative; z-index:2; }
.page-hero h1 {
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(2.3rem, 5.5vw, 4rem); line-height:1.04;
  letter-spacing:-.025em; color: var(--red);
  max-width: 18ch; margin-bottom: var(--s3);
}
.page-hero .lead { font-size:1.15rem; color: var(--ink); max-width:62ch; }
.page-hero .hero-btns { margin-top: var(--s5); margin-bottom:0; }

/* ── Brotkrumen ── */
.krumen {
  font-family: var(--f-head); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ink-2); margin-bottom: var(--s3);
}
.krumen a { color: var(--ink-2); }
.krumen a:hover { color: var(--red); }
.krumen span { color: var(--red); }

/* ── Zweispalter Text + Akzentfläche ── */
.split { display:grid; grid-template-columns: 1.1fr .9fr; gap: var(--s6); align-items:start; }
.split-akzent {
  background: var(--red); border-radius:12px; padding: var(--s5);
  color: var(--white); position:relative; overflow:hidden;
}
.split-akzent h3 { color: var(--white); font-size:1.15rem; margin-bottom: var(--s3); }
.split-akzent ul { list-style:none; }
.split-akzent li {
  font-size:.95rem; padding: var(--s2) 0;
  border-bottom:1px solid rgba(255,255,255,.24);
}
.split-akzent li:last-child { border-bottom:none; }
.split-akzent li::before { content:"—"; margin-right: var(--s1); opacity:.6; }
.split-text p + p { margin-top: var(--s3); }
.split-text p { font-size:1rem; color: var(--ink-2); }

/* ── Nummerierte Schritte ── */
.steps { counter-reset: schritt; display:grid; gap: var(--s3); }
.step {
  display:flex; gap: var(--s4); align-items:flex-start;
  background: var(--white); border-radius:12px; padding: var(--s4);
}
section:not(.bg-paper):not(.bg-red) .step { background: var(--paper); }
.step::before {
  counter-increment: schritt; content: counter(schritt, decimal-leading-zero);
  font-family: var(--f-display); font-weight:800; font-size:1.7rem;
  color: var(--red); line-height:1; flex-shrink:0; min-width:48px;
}
.step h3 { font-size:1.05rem; margin-bottom:4px; }
.step p { font-size:.93rem; color: var(--ink-2); }

/* ── Prüfliste ── */
.haken { list-style:none; display:grid; gap: var(--s2); }
.haken li { display:flex; gap: var(--s2); align-items:flex-start; font-size:.95rem; color: var(--ink-2); }
.haken li::before {
  content:"✓"; color: var(--red); font-weight:700; flex-shrink:0;
  font-family: var(--f-head);
}
.bg-red .haken li { color: var(--white); }
.bg-red .haken li::before { color: var(--white); }

/* ── Roter Handlungsaufruf ── */
.cta-band { background: var(--red); text-align:center; }
.cta-band h2 {
  font-family: var(--f-display); font-weight:800;
  font-size: clamp(1.8rem,4vw,2.8rem); line-height:1.04;
  color: var(--white); max-width:22ch; margin:0 auto var(--s3);
}
.cta-band p { color: rgba(255,255,255,.86); max-width:60ch; margin:0 auto var(--s5); }
.cta-band .btn-white { margin:0 auto; }

/* ── Ressourcenkarte ── */
.res-card {
  background: var(--white); border-radius:12px; padding: var(--s4);
  display:flex; flex-direction:column; gap: var(--s2);
}
section:not(.bg-paper):not(.bg-red) .res-card { background: var(--paper); }
.res-tag {
  align-self:flex-start; font-family: var(--f-head); font-weight:700;
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--red); background: var(--red-12); padding:6px 12px; border-radius:999px;
}
.res-card h3 { font-size:1.02rem; }
.res-card p { font-size:.9rem; color: var(--ink-2); }
.res-status {
  margin-top:auto; padding-top: var(--s2);
  font-family: var(--f-head); font-size:.76rem; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink-2);
  border-top:1px solid var(--hair);
}

/* ── Kontakt ── */
.kontakt-grid { display:grid; grid-template-columns: 1fr 1.2fr; gap: var(--s6); align-items:start; }
.kontakt-block { padding: var(--s3) 0; border-bottom:1px solid var(--hair); }
.kontakt-block:last-child { border-bottom:none; }
.kontakt-block h3 {
  font-family: var(--f-head); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--red); margin-bottom:6px;
}
.kontakt-block p, .kontakt-block a { font-size:1rem; color: var(--ink); }

@media (max-width: 900px) {
  .split, .kontakt-grid { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 1080px) {
  .nav-drop { position:static; display:block; border:none; padding:0; min-width:0; background:transparent; }
  .nav-drop a { padding: 8px 0 8px 16px; color: var(--ink-2); }
  .nav-drop-toggle { pointer-events:none; }
  .nav-drop-toggle::after { display:none; }
}


/* ══════════════════════════════════════════════
   missionnachfolge — Absenderkombination
   Aufbau wie im Social-Set: Bildmarke, Wortmarke,
   Trennstrich, „Eine Initiative des" über der ögv-Marke.
   Die Bildmarke ist aus dem Profilbild nachgebaut:
   gefüllte Scheibe, am Ring mit Luft ausgespart.
   ══════════════════════════════════════════════ */
.brand { display:flex; align-items:center; gap:14px; }
.brand-marke {
  height:24px; width:auto; color: var(--red); display:block; flex:none;
}
.brand-wort {
  font-family: var(--f-head); font-weight:400; font-size:1.12rem;
  color: var(--red); letter-spacing:-.005em; white-space:nowrap;
}
.brand-wort b { font-weight:700; }
.brand-sep { width:1px; height:32px; background: var(--hair); flex:none; }
.brand-initiative { display:flex; flex-direction:column; gap:3px; }
.brand-initiative span {
  font-family: var(--f-head); font-size:.56rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.17em; color: var(--ink-2);
  white-space:nowrap; line-height:1;
}
.brand-oegv { height:21px; width:auto; color: var(--red); display:block; }

/* ── Partner im Fuss ──
   Die Logos sind dunkel auf hell; sie stehen deshalb auf einer weissen
   Fläche und werden nicht eingefärbt. Die Höhen folgen den Proportionen
   der Einladung (203 : 172 : 127), damit die Leiste optisch ruhig steht. */
.partner {
  margin: var(--s5) auto 0; max-width:820px;
  background: var(--white); border-radius:12px;
  padding: var(--s3) var(--s4);
  display:flex; align-items:center; justify-content:center;
  gap: var(--s3) var(--s4); flex-wrap:wrap;
}
.partner-label {
  font-family: var(--f-head); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color: var(--ink-2);
}
.partner-logos {
  display:flex; align-items:center; justify-content:center;
  gap: var(--s4); flex-wrap:wrap; list-style:none; margin:0; padding:0;
}
.partner-logos img { display:block; width:auto; max-width:100%; }
.p-incite { height:38px; }
.p-wu     { height:32px; }
.p-snow   { height:24px; }

@media (max-width:640px) {
  .brand-initiative, .brand-sep { display:none; }
  .brand-wort { font-size:1rem; }
  .partner { padding: var(--s3) var(--s2); gap: var(--s2) var(--s3); }
  .partner-logos { gap: var(--s3); }
  .p-incite { height:30px; } .p-wu { height:26px; } .p-snow { height:20px; }
}

/* ══════════════════════════════════════════════
   Bewegung, Medien und Bildeinsatz
   Angelehnt an ayw.at: vollflächiges Medienband mit
   Abdunklung darüber, Inhalte die beim Hereinscrollen
   erscheinen, Bilder mit ruhigem Zoom.
   Umgesetzt in ÖGV-Mitteln — Fotos bleiben rechteckig,
   wie es das Brandbook vorschreibt.
   ══════════════════════════════════════════════ */

/* ── Inhalte erscheinen beim Hereinscrollen ──
   Versteckt wird nur, wenn das Skript im Kopf die Klasse
   gesetzt hat. Bleibt es aus, steht alles sichtbar da —
   eine Seite darf nie leer bleiben, weil JavaScript fehlt. */
.reveal-an [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.2,.6,.2,1),
              transform .55s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--rd, 0s);
}
.reveal-an [data-reveal].sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal-an [data-reveal] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ── Medienband ──
   Video oder Bild vollflächig, darüber eine Abdunklung in
   Schiefer. Ohne sie steht heller Text auf hellen Stellen
   des Materials und wird unlesbar. */
.medienband { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.medienband > video,
.medienband > img.medienband-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
.medienband::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--ink); opacity: .48; pointer-events: none;
}
.medienband--leicht::after { opacity: .24; }
.medienband--stark::after  { opacity: .68; }
/* Rote Variante, wenn das Band eine Marken-Fläche sein soll */
.medienband--rot::after    { background: var(--red); opacity: .72; }
.medienband > .container, .medienband > :not(video):not(img) { position: relative; z-index: 2; }

/* ── Bilder ──
   Rechteckig, ohne Rundung — Vorgabe des Brandbooks.
   Beim Überfahren ein ruhiger Zoom; der Rahmen bleibt stehen. */
figure.bild { margin: 0; overflow: hidden; background: var(--surface); }
figure.bild img {
  display: block; width: 100%; height: auto;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
figure.bild:hover img, figure.bild:focus-within img { transform: scale(1.035); }
figure.bild figcaption {
  font-family: var(--f-head); font-size: .8rem; color: var(--ink-2);
  padding-top: var(--s1); line-height: 1.4;
}
figure.bild--hoch img { aspect-ratio: 3/4; object-fit: cover; }
figure.bild--breit img { aspect-ratio: 16/9; object-fit: cover; }

/* ── Video im Inhalt ──
   Startet nicht von selbst: Ton und Bewegung gehören dem
   Besucher. Vorschaubild bis zum Klick, dann erst lädt die Datei. */
.videobox { position: relative; overflow: hidden; background: var(--ink); }
.videobox video, .videobox img { display: block; width: 100%; height: auto; }
.videobox video { aspect-ratio: 16/9; object-fit: cover; }
.videobox-start {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; background: rgba(46,59,74,.28);
  transition: background .25s;
}
.videobox-start:hover { background: rgba(46,59,74,.12); }
.videobox-start:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
.videobox-start span {
  width: 76px; height: 76px; border-radius: 50%; background: var(--red);
  display: grid; place-items: center; transition: transform .25s;
}
.videobox-start:hover span { transform: scale(1.08); }
.videobox-start svg { width: 26px; height: 26px; fill: var(--white); margin-left: 4px; }
.videobox-text {
  font-family: var(--f-head); font-size: .8rem; color: var(--ink-2); padding-top: var(--s1);
}
@media (prefers-reduced-motion: reduce) {
  figure.bild img, .videobox-start, .videobox-start span { transition: none !important; }
}

/* ══════════════════════════════════════════════
   Team Nachfolge — Karussell
   Aufbau nach dem Vorbild der Darstellerleiste auf
   wettkampf-meines-lebens.vercel.app: die mittige Karte
   steht scharf und gross, die Nachbarn treten zurück.
   Darunter Name in Versalien, darunter die Rolle.
   ══════════════════════════════════════════════ */
.team { position: relative; margin-top: var(--s5); }

/* Scroll-Snap statt Skript-Positionierung: so wischt es auf dem
   Telefon von Haus aus richtig und funktioniert auch ohne JavaScript. */
.team-spur {
  display: flex; gap: var(--s3);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding: 4px calc(50% - 230px) var(--s2);
}
.team-spur::-webkit-scrollbar { display: none; }

/* Coverflow. Die Kennzahlen stammen aus dem Motion+-Beispiel
   examples.motion.dev/react/carousel-coverflow: ±20° Drehung über ±200 px
   Abstand, Massstab 0,7 bis 1, zIndex aus dem Abstand, Perspektive 500.
   Dort über die Carousel-Komponente aus motion-plus/react; hier dieselben
   Werte, vom Skript gesetzt — die Seite läuft ohne Build.

   Ohne JavaScript bleiben die Karten unverändert und lesbar: Die Drehung
   kommt ausschliesslich aus Inline-Stilen, hier steht keine. */
.team-karte {
  flex: 0 0 460px; max-width: 78vw;
  scroll-snap-align: center;
  transform-origin: center;
  will-change: transform, opacity;
}

/* Weicher Rand statt harter Kante — im Original eine Maske über der Leiste. */
.team-spur {
  mask-image: linear-gradient(to right, transparent 2%, #000 18%, #000 82%, transparent 98%);
  -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 18%, #000 82%, transparent 98%);
}

.team-bild {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--paper);
  display: grid; place-items: center;
}
.team-bild img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;      /* liegt über dem Monogramm */
}
/* Solange kein Foto da ist, trägt die Karte das Monogramm. */
.team-monogramm {
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: .04em;
  color: var(--red); opacity: .55; user-select: none;
}

/* Abspielknopf — erscheint nur, wenn der Karte ein Video hinterlegt ist. */
.team-play {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; cursor: pointer; padding: 7px 14px 7px 9px;
  border-radius: 999px; background: var(--red); color: var(--white);
  font-family: var(--f-head); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  transition: transform .2s, background .2s;
}
.team-play:hover { background: var(--red-deep); transform: translateY(-1px); }
.team-play:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.team-play svg { width: 13px; height: 13px; fill: currentColor; }

.team-karte h4 {
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  text-transform: uppercase; letter-spacing: .07em;
  text-align: center; margin-top: var(--s2); color: var(--ink);
}
.team-rolle {
  text-align: center; margin-top: 5px;
  font-family: var(--f-head); font-size: .82rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--red);
}

.team-steuerung { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--s2); }
.team-pfeil {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--hair); background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  transition: border-color .2s, color .2s, background .2s;
}
.team-pfeil:hover { border-color: var(--red); color: var(--red); }
.team-pfeil:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.team-pfeil[disabled] { opacity: .3; cursor: default; }

/* Punkte — zeigen Position und Anzahl, wie im Vorbild. */
.team-punkte { display: flex; align-items: center; gap: 9px; }
.team-punkt {
  width: 8px; height: 8px; border-radius: 50%; padding: 0;
  border: 0; background: var(--hair); cursor: pointer;
  transition: background .25s, width .25s;
}
.team-punkt[aria-current="true"] { background: var(--red); width: 22px; border-radius: 999px; }
.team-punkt:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.team-pfeil svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Ansprechpartner — ruhiger gesetzt, kein Karussell:
   drei Personen brauchen keine Blätterfunktion. */
.ansprech-grid {
  display: grid; gap: var(--s3); margin-top: var(--s4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  max-width: 820px; margin-inline: auto;
}
.ansprech { text-align: center; }
.ansprech .team-bild { aspect-ratio: 1; border-radius: 0; }
.ansprech h4 {
  font-family: var(--f-head); font-weight: 600; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .06em; margin-top: var(--s2); color: var(--ink);
}

@media (max-width: 760px) {
  .team-spur { padding-inline: calc(50% - 150px); }
  .team-karte { flex-basis: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-spur { scroll-behavior: auto; }
  .team-karte { transition: none; }
}

/* ══════════════════════════════════════════════
   Scroll Word Reveal
   Portiert vom freien Motion-Beispiel
   examples.motion.dev/react/text-scroll-word-reveal.
   Dort React mit useScroll; hier dieselbe Mechanik in
   Vanilla, weil die Seite ohne Build läuft.

   Aufbau: hohe Sektion, darin eine klebende Bühne. Der
   Scroll-Fortschritt über die Sektion steuert, wie hell
   jedes Wort steht — versetzt, Wort für Wort.
   ══════════════════════════════════════════════ */
/* section{} setzt oben overflow:hidden für die angeschnittenen Formen.
   Das macht jede Sektion zum Clipping-Container und hebelt das Kleben der
   Bühne aus — sie scrollt dann einfach mit. Hier also ausdrücklich zurück
   auf visible, und die Sektionspolsterung weg: die bringt die Bühne mit. */
.wortreveal { min-height: 210vh; overflow: visible; padding: 0; }

.wortreveal-buehne {
  position: sticky; top: 0;
  min-height: 100svh; display: flex; align-items: center;
  padding-block: var(--s6);
}
.wortreveal-layout {
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding-inline: var(--s3);
  display: grid; grid-template-columns: 2px minmax(0, 1fr);
  gap: var(--s4); align-items: start;
}

/* Dünner Fortschrittsbalken links — zeigt, wie weit der Satz gelesen ist. */
.wortreveal-fortschritt {
  position: relative; width: 2px; height: 140px;
  background: var(--hair); overflow: hidden;
}
.wortreveal-fortschritt span {
  position: absolute; inset: 0; display: block;
  background: var(--red); transform-origin: top;
  transform: scaleY(var(--fortschritt, 0));
}

.wortreveal-kicker {
  font-family: var(--f-head); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .17em;
  color: var(--red); margin-bottom: var(--s4);
}
.wortreveal-satz {
  font-family: var(--f-head); font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 4.2rem);
  line-height: 1.08; letter-spacing: -.025em;
  max-width: 24ch; text-wrap: balance; color: var(--ink);
}
/* Startwert, damit der Satz auch vor dem ersten Scrollen lesbar bleibt
   und nicht als leere Fläche dasteht. */
.wortreveal-satz span { opacity: .18; transition: opacity .12s linear; }

@media (max-width: 680px) {
  .wortreveal { min-height: 180vh; }
  .wortreveal-layout { grid-template-columns: 1fr; gap: 0; }
  .wortreveal-fortschritt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wortreveal { min-height: 0; }
  .wortreveal-buehne { position: static; min-height: 0; }
  .wortreveal-satz span { opacity: 1 !important; transition: none; }
  .wortreveal-fortschritt span { transform: scaleY(1); }
}

/* ══════════════════════════════════════════════
   Mitgliedschaften
   ══════════════════════════════════════════════ */
.m-grid {
  display: grid; gap: var(--s3); margin-top: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.m-karte {
  position: relative; background: var(--white);
  border: 1px solid var(--hair); border-radius: 12px;
  padding: var(--s4) var(--s3); display: flex; flex-direction: column;
}
.m-badge {
  position: absolute; top: -11px; left: var(--s3);
  background: var(--red); color: var(--white);
  font-family: var(--f-head); font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 4px 11px; border-radius: 999px;
}
.m-karte h3 { font-family: var(--f-head); font-size: 1.35rem; font-weight: 600; }
.m-text { font-size: .95rem; color: var(--ink-2); margin-top: 6px; }
.m-preis {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1;
  color: var(--red); margin-top: var(--s3);
  font-variant-numeric: tabular-nums;
}
.m-takt { font-size: .78rem; color: var(--ink-2); margin-top: 4px; }
.m-liste { list-style: none; margin: var(--s3) 0 var(--s3); padding: 0; flex: 1; }
.m-liste li {
  font-size: .92rem; color: var(--ink-2);
  padding: 7px 0 7px 20px; position: relative;
  border-bottom: 1px solid var(--hair);
}
.m-liste li::before {
  content: "→"; position: absolute; left: 0; color: var(--red);
}
.m-hinweis {
  margin-top: var(--s4); font-size: .9rem; color: var(--ink-2);
  max-width: 62ch; margin-inline: auto; text-align: center;
}

/* ══════════════════════════════════════════════
   Showreel unter dem Seitenkopf
   Aufbau nach stilkraft-film.vercel.app: Fläche über die
   volle Breite, darüber eine Leiste mit Abspielknopf,
   Titel und dem Weg zum Ton.
   ══════════════════════════════════════════════ */
.showreel { position: relative; overflow: hidden; background: var(--ink); }
.showreel-flaeche {
  position: relative; aspect-ratio: 16/9; width: 100%;
  display: grid; place-items: center; background: var(--red);
}
.showreel-flaeche video, .showreel-flaeche img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Solange kein Material da ist, trägt die Fläche die Bildmarke. */
.showreel-marke { width: min(34%, 260px); color: var(--white); opacity: .9; }

.showreel-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: linear-gradient(to top, rgba(22,25,28,.92), rgba(22,25,28,.55) 60%, transparent);
  color: var(--white);
}
.showreel-start {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); background: transparent;
  color: var(--white); cursor: pointer; display: grid; place-items: center;
  transition: background .2s, border-color .2s, transform .2s;
}
.showreel-start:hover { background: var(--white); color: var(--red); transform: scale(1.06); }
.showreel-start:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.showreel-start svg { width: 17px; height: 17px; fill: currentColor; margin-left: 3px; }

.showreel-text { flex: 1; min-width: 0; }
.showreel-text b {
  display: block; font-family: var(--f-head); font-weight: 600; font-size: 1.05rem;
}
.showreel-text span { font-size: .85rem; opacity: .78; }

.showreel-ton {
  flex: none; border: 1px solid rgba(255,255,255,.5); background: transparent;
  color: var(--white); border-radius: 999px; padding: 9px 20px; cursor: pointer;
  font-family: var(--f-head); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  transition: background .2s, color .2s;
}
.showreel-ton:hover { background: var(--white); color: var(--ink); }
.showreel-ton:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

@media (max-width: 680px) {
  .showreel-leiste { padding: var(--s2); gap: var(--s2); flex-wrap: wrap; }
  .showreel-text b { font-size: .95rem; }
  .showreel-ton { width: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .showreel-start { transition: none; }
}

/* Fussnavigation nach Themen gruppiert statt einer langen Reihe. */
.f-links {
  display: grid; gap: var(--s4) var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 820px; margin: var(--s5) auto 0; text-align: left;
}
.f-spalte { display: flex; flex-direction: column; gap: 9px; }
.f-spalte h5 {
  font-family: var(--f-head); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .17em;
  color: rgba(255,255,255,.58); margin-bottom: 4px;
}
.f-spalte a {
  color: var(--white); text-decoration: none; font-size: .95rem;
  border-bottom: 1px solid transparent; width: fit-content;
  transition: border-color .2s;
}
.f-spalte a:hover { border-bottom-color: rgba(255,255,255,.6); }
@media (max-width: 560px) { .f-links { text-align: center; } .f-spalte { align-items: center; } }

/* Burger-Menü schon ab 1180 px statt erst ab 1080 px.
   Seit das Ausklappmenü aufgelöst ist, stehen fünf Punkte plus Schaltfläche
   nebeneinander; dazwischen lief die Leiste über und schnitt den CTA ab.
   Bewusst als eigener Bereich, damit die Abstandswerte im 1080er-Block
   unberührt bleiben. */
@media (min-width: 1081px) and (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--hair);
    flex-direction: column; align-items: flex-start;
    gap: var(--s2); padding: var(--s3);
  }
  .nav-links.open { display: flex; }
}

/* Lange Seiten: Der Browser überspringt das Rendern von Abschnitten, die
   weit unterhalb des Sichtfelds liegen. Die Höhenangabe verhindert, dass
   die Bildlaufleiste dabei springt. Die ersten beiden Abschnitte bleiben
   aussen vor — sie stehen beim Laden im Bild. */
section:nth-of-type(n+3) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
/* Die klebende Bühne des Word Reveal verträgt das nicht: Mit
   content-visibility wird der Abschnitt zum Containment-Kontext und das
   Kleben setzt aus. */
section.wortreveal { content-visibility: visible; }