/* EconSocial V7 (04.10.2026, auf Basis V6). Ein Stylesheet, keine Fremdbibliotheken.
   Grundsätze: Weiß, Navy, ein Orange. Haarlinien statt Karten. Scharfe Kanten, keine Schatten,
   keine Verläufe, keine Glows, keine Hover-Sprünge. Archivo als einzige Schrift. */

:root{
  --navy:#13233c;
  --ink:#171a20;
  --text:#2a2f38;
  --muted:#626977;
  --line:#e3e5e9;
  --line-dark:#2a2d33;
  --bg:#ffffff;
  --bg-soft:#f4f5f6;
  --black:#050608;
  --orange:#c94a06;      /* 4,7:1 auf Weiß (WCAG AA für Knopftext); #e8590c hatte nur 3,6:1 */
  --orange-dark:#a83d05;
  --wrap:1280px;
  --gutter:20px;
  --font:"Archivo","Helvetica Neue",Arial,sans-serif;
}
@media (min-width:760px){:root{--gutter:40px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--navy)}
h1,h2,h3,h4{margin:0;color:var(--navy);font-weight:600;letter-spacing:-.02em;line-height:1.08;font-stretch:108%}
h1{font-size:clamp(2.3rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(1.85rem,3.6vw,3rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.25}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
strong,b{font-weight:600;color:var(--ink)}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Knöpfe */
.knopf{display:inline-block;padding:15px 24px;border:1px solid var(--navy);border-radius:2px;background:var(--navy);color:#fff;font-weight:600;font-size:16px;line-height:1.2;text-decoration:none;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s}
.knopf:hover{background:#0c1729;border-color:#0c1729;color:#fff}
.knopf-orange{background:var(--orange);border-color:var(--orange)}
.knopf-orange:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.knopf-hell{background:#fff;border-color:#fff;color:var(--navy)}
.knopf-hell:hover{background:#eceef2;border-color:#eceef2;color:var(--navy)}
.knopf-gross{padding:18px 30px;font-size:17px}
.textlink{font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.textlink:hover{color:var(--orange)}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line)}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.marke img{height:54px;width:auto}
@media (max-width:959px){.marke img{height:46px}}
.nav{display:none;align-items:center;gap:30px}
.nav a{text-decoration:none;font-weight:500;font-size:15.5px;color:var(--ink);padding:6px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--navy);color:var(--navy)}
.nav a.nav-cta{padding:12px 18px;font-size:15px;border:1px solid var(--orange);color:#fff;margin-left:6px}
.nav a.nav-cta:hover{border-color:var(--orange-dark);color:#fff}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:0 8px;background:none;border:0;cursor:pointer}
.burger span{display:block;height:2px;background:var(--navy);transition:transform .2s,opacity .2s}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.kopf-termin{display:none}
@media (max-width:959px){.kopf-termin{display:inline-block;margin-left:auto;padding:10px 16px;font-size:15px}.kopf-zeile{gap:12px}}
@media (min-width:960px){.nav{display:flex}.burger{display:none}}
@media (max-width:959px){
  .nav.offen{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);padding:6px var(--gutter) 22px}
  .nav.offen a{padding:15px 0;border-bottom:1px solid var(--line);font-size:18px}
  .nav.offen a.nav-cta{margin:18px 0 0;text-align:center;border-bottom:1px solid var(--orange)}
  .nav.offen a[aria-current=page]{border-bottom-color:var(--line);color:var(--orange)}
}

/* Abschnitte */
.abschnitt{padding:72px 0}
@media (min-width:760px){.abschnitt{padding:112px 0}}
.abschnitt-eng{padding:56px 0}
@media (min-width:760px){.abschnitt-eng{padding:80px 0}}
.linie-oben{border-top:1px solid var(--line)}
.weich{background:var(--bg-soft)}
.dunkel{background:var(--black);color:#c9ccd3}
.dunkel h2,.dunkel h3{color:#fff}
.dunkel .kicker{color:#f07a3a}
.navy .kicker{color:#f07a3a}
.dunkel p{color:#b3b8c2}
.dunkel a:hover{color:#fff}
.navy{background:var(--navy);color:#d5dae4}
.navy h2,.navy h3{color:#fff}
.navy p{color:#c2c9d8}
.kicker{display:block;font-size:15px;font-weight:500;color:var(--orange);margin-bottom:16px}
.einleitung{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;color:var(--muted);max-width:44rem}
.dunkel .einleitung{color:#b3b8c2}
.kopfzeile{display:grid;gap:20px;margin-bottom:44px;max-width:52rem}
@media (min-width:760px){.kopfzeile{margin-bottom:64px}}
.kopfzeile-breit{max-width:none;grid-template-columns:1fr;align-items:end}
@media (min-width:960px){.kopfzeile-breit{grid-template-columns:7fr 5fr;gap:60px}.kopfzeile-breit .einleitung{margin-bottom:8px}}

/* Hero Startseite: Claim auf Weiß, Foto als volles Band darunter (kein Text über dem Bild) */
.hero{padding:32px 0 28px}
.hero .wrap{gap:20px}
@media (max-width:759px){.hero h1{font-size:2.15rem}.hero-neben{gap:18px}.hero .einleitung{font-size:1.05rem}}
@media (min-width:760px){.hero{padding:88px 0 56px}}
.hero .wrap{display:grid;gap:28px}
@media (min-width:960px){.hero .wrap{grid-template-columns:7fr 5fr;gap:60px;align-items:start}.hero .hero-neben .einleitung{margin-top:calc(clamp(2.3rem,5.6vw,4.6rem) * .462 - .59em)}}
/* Versatz oben: Großbuchstaben-Oberkante der Einleitung liegt auf der von „Anzeigetafeln.“ (gerendert gemessen 960 bis 2000 px) */
.hero h1{max-width:none}
.hero-neben{display:grid;gap:26px;justify-items:start}
.hero-neben .einleitung{margin:0;max-width:34rem}
.hinweis{margin:0;max-width:34rem;font-size:14.5px;line-height:1.5;color:var(--muted)}
.hero .einleitung{color:var(--text)}
.nw{white-space:nowrap}
.hero-foto{position:relative;background:var(--black);margin:0}
.hero-foto .mobil{display:none}
@media (max-width:759px){.hero-foto .desktop{display:none}.hero-foto .mobil{display:block}}
.hero-foto img{width:100%;height:auto}
/* Tor-Ablauf auf der Tafel im Titelbild: echte Software-Aufnahme, deckungsgleich eingepasst (werkzeuge/hero_tor) */
.hero-bild{position:relative}
.hero-foto video.hero-tor{position:absolute;max-width:none;opacity:0;transition:opacity .35s ease;pointer-events:none;object-fit:fill}
.hero-foto video.hero-tor.laeuft{opacity:1}
/* Rand des Ausschnitts (Foto-Pixel) weich auslaufen lassen, damit kein Kasten entsteht */
.hero-foto video.hero-tor{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 1.6%,#000 98.4%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3.6%,#000 96.4%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 0,#000 1.6%,#000 98.4%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 3.6%,#000 96.4%,transparent 100%);mask-composite:intersect}
.hero-foto video.hero-tor.desktop{left:35.2778%;top:11.1293%;width:28.6806%;height:29.4599%}
.hero-foto video.hero-tor.mobil{left:17.7778%;top:10.9259%;width:67.7778%;height:29.8148%}
@media (prefers-reduced-motion:reduce){.hero-foto video.hero-tor{display:none!important}}
.hero-foto figcaption{font-size:13.5px;color:#8a909c;padding:10px var(--gutter)}

/* Fakten-Zeile unter dem Hero: Text, keine Zahlen-Leiste */
.fakten{display:grid;gap:22px 40px;padding-top:36px;padding-bottom:36px}
@media (min-width:760px){.fakten{grid-template-columns:repeat(3,1fr);padding-top:44px;padding-bottom:44px}}
.fakten div{padding-top:14px;border-top:1px solid var(--navy)}
.fakten h3{font-size:1.05rem;margin-bottom:6px}
.fakten p{margin:0;color:var(--muted);font-size:15.5px}

/* Tafel-Video als Tafel */

/* Tafel-Show: eine große Tafel, Reiter zum Durchklicken. Bilder sind echte Software-Ausgabe, nur Überblenden */
.show{display:grid;gap:22px;margin-top:56px}
@media (min-width:1000px){.show{grid-template-columns:minmax(0,1fr) 330px;gap:56px;align-items:start}.show-buehne{position:sticky;top:110px}}
.tafel-rahmen{position:relative;background:#0b0c0f;border:1px solid var(--line-dark)}
.tafel-rahmen::before{content:"";display:block;aspect-ratio:1152/720}  /* Planig-Tafel 384x240 (Efe 06.10.) */
@media (min-width:760px){.tafel-rahmen{padding:14px}}
.tafel-rahmen [data-bild]{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;background:#000;opacity:0;transition:opacity .45s ease}
@media (min-width:760px){.tafel-rahmen [data-bild]{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px)}}
.tafel-rahmen [data-bild].aktiv{opacity:1}
.show-fuss{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:#8a909c}
.show-zaehler{font-variant-numeric:tabular-nums}
.show-zaehler b{color:#fff;font-weight:500}
.show-text{display:none}
.show-reiter{list-style:none;margin:0;padding:0}
.show-reiter button{position:relative;display:block;width:100%;margin:0;padding:13px 0 13px 44px;border:0;border-top:1px solid var(--line-dark);background:none;color:#8a909c;font:inherit;font-size:16px;text-align:left;cursor:pointer}
.show-reiter li:last-child button{border-bottom:1px solid var(--line-dark)}
.show-reiter button:hover{color:#fff}
.show-reiter button:focus-visible{outline:2px solid #f07a3a;outline-offset:2px}
.show-reiter .nr{position:absolute;left:0;top:15px;font-size:13px;font-variant-numeric:tabular-nums;color:#5d636e}
.show-reiter .titel{display:block}
.show-reiter .text{display:none;margin-top:4px;font-size:14px;line-height:1.5;color:#b3b8c2}
.show-reiter [aria-selected="true"]{color:#fff}
.show-reiter [aria-selected="true"] .nr{color:#f07a3a}
.show-reiter [aria-selected="true"] .text{display:block}
.show-reiter .lauf{position:absolute;left:0;top:-1px;height:1px;width:0;background:#f07a3a}
.show.laeuft .show-reiter [aria-selected="true"] .lauf{animation:show-lauf var(--show-dauer,4500ms) linear forwards}
.show.pause .show-reiter [aria-selected="true"] .lauf{animation-play-state:paused}
@keyframes show-lauf{from{width:0}to{width:100%}}
@media (max-width:999px){
  .show-text{display:block;margin:6px 0 0;font-size:15px;color:#b3b8c2;min-height:3em}
  .show-reiter{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter) 4px}
  .show-reiter::-webkit-scrollbar{display:none}
  .show-reiter li{flex:0 0 auto}
  .show-reiter button,.show-reiter li:last-child button{width:auto;padding:9px 14px;border:1px solid var(--line-dark);font-size:15px;white-space:nowrap;overflow:hidden}
  .show-reiter .nr,.show-reiter [aria-selected="true"] .text{display:none}
  .show-reiter [aria-selected="true"]{border-color:#8a909c}
  .show-reiter .lauf{top:auto;bottom:0;height:2px}
}
@media (prefers-reduced-motion:reduce){.tafel-rahmen [data-bild]{transition:none}}
.an-bord{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px;color:#c9ccd3}
.an-bord li:first-child{color:#8a909c}

/* Zweispalter mit Gerät */
.split{display:grid;gap:44px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:5fr 7fr;gap:80px}.split.rechts{grid-template-columns:7fr 5fr}.split.rechts .split-bild{order:2}}
.geraet{margin:0 auto;width:min(100%,330px);border:8px solid #101418;border-radius:34px;background:#101418;overflow:hidden}
.geraet img{border-radius:24px;width:100%}
.geraet-tablet{width:min(100%,560px);border-radius:22px;border-width:10px}
.geraet-tablet img{border-radius:12px}
.liste{border-top:1px solid var(--line)}
.liste li{padding:20px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
@media (min-width:640px){.liste li{grid-template-columns:200px 1fr;gap:24px}}
.liste h3{font-size:1.05rem;font-stretch:100%}
.liste p{margin:0;color:var(--muted);font-size:16px}
.dunkel .liste{border-color:var(--line-dark)}
.dunkel .liste li{border-color:var(--line-dark)}
.dunkel .liste p{color:#b3b8c2}
.liste-2{display:grid;gap:0 60px}
@media (min-width:900px){.liste-2{grid-template-columns:1fr 1fr}}

/* Drei Spalten Text mit Haarlinien */
.spalten{display:grid;gap:36px}
@media (min-width:760px){.spalten{grid-template-columns:repeat(3,1fr);gap:48px}}
.spalten > div{border-top:1px solid var(--navy);padding-top:22px}
.spalten h3{margin-bottom:10px}
.spalten p{color:var(--muted);font-size:16px;margin:0}
.spalten ul{margin-top:14px;border-top:1px solid var(--line)}
.spalten ul li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px}

/* Ablauf */
.ablauf{counter-reset:schritt;display:grid;gap:0 60px;border-top:1px solid var(--line)}
@media (min-width:900px){.ablauf{grid-template-columns:1fr 1fr}}
.ablauf li{counter-increment:schritt;padding:24px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:96px 1fr;gap:16px}
.ablauf li::before{content:"Schritt " counter(schritt);font-size:14px;color:var(--muted);padding-top:5px}
.ablauf h3{font-size:1.1rem;margin-bottom:4px;font-stretch:100%}
.ablauf p{margin:0;color:var(--muted);font-size:16px}

/* Vereine */
.vereine{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 22px;margin-top:36px}
.vereine li{display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;text-align:center;font-size:13px;color:var(--muted);line-height:1.3}
.vereine img{height:56px;width:56px;object-fit:contain}

/* Zwei Wege */
.wege{display:grid;gap:44px}
@media (min-width:760px){.wege{grid-template-columns:1fr 1fr;gap:40px}}
.weg{display:grid;gap:18px;align-content:start}
.weg img{width:100%;aspect-ratio:1152/480;object-fit:cover;background:#000;border:1px solid var(--line)}
.weg .foto{aspect-ratio:3/2}
.weg h3{font-size:clamp(1.35rem,2vw,1.7rem)}
.weg p{color:var(--muted);margin:0}

/* Paare (Vergleich, Partner-Modell) */
.paar{display:grid;gap:40px}
@media (min-width:760px){.paar{grid-template-columns:1fr 1fr;gap:60px}}
.paar > div{border-top:1px solid var(--navy);padding-top:22px}
.paar .label{font-size:14px;color:var(--orange);font-weight:500;margin-bottom:8px;display:block}
.paar h3{font-size:clamp(1.35rem,2vw,1.7rem);margin-bottom:8px}
.paar p{color:var(--muted)}
.paar ul{border-top:1px solid var(--line);margin:18px 0 24px}
.paar ul li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.paar .schwach h3{color:var(--muted)}
.paar .schwach ul li{color:var(--muted)}

/* Pakete */
.pakete{display:grid;gap:36px}
@media (min-width:760px){.pakete{grid-template-columns:repeat(3,1fr);gap:40px}}
.paket{border-top:1px solid var(--navy);padding-top:22px;display:grid;gap:0;align-content:start}
.paket .label{font-size:14px;color:var(--orange);font-weight:500;min-height:22px;display:block}
.paket h3{font-size:clamp(1.5rem,2.2vw,2rem);margin:6px 0 2px}
.paket .preis{color:var(--muted);font-size:15.5px;margin-bottom:16px}
.paket ul{border-top:1px solid var(--line);margin-bottom:24px}
.paket ul li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}

/* FAQ */
.faq{border-top:1px solid var(--line);max-width:52rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;color:var(--navy);font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;font-weight:300;color:var(--navy)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:46rem}

/* Schluss */
.schluss{padding:80px 0}
@media (min-width:760px){.schluss{padding:120px 0}}
.schluss .wrap{display:grid;gap:26px;justify-items:start}
.schluss h2{max-width:20ch}
.schluss p{margin:0;max-width:38rem;font-size:1.1rem}

/* Foto-Band */
.band{background:var(--black)}
.band img{width:100%;height:min(70vh,720px);object-fit:cover}
@media (max-width:759px){.band img{height:min(60vh,520px)}}
.band figcaption{font-size:13.5px;color:#8a909c;padding:10px var(--gutter)}

/* Seitenkopf Unterseiten */
.seitenkopf{padding:64px 0 48px}
@media (min-width:760px){.seitenkopf{padding:96px 0 72px}}
.seitenkopf .wrap{display:grid;gap:22px;max-width:calc(var(--wrap));}
.seitenkopf h1{max-width:16ch}
.seitenkopf .einleitung{max-width:40rem}
.seitenkopf .knopf{justify-self:start}

/* Rechtstexte */
.recht{padding:64px 0 96px}
.recht .wrap{max-width:820px;overflow-wrap:anywhere}
.recht h1{margin-bottom:36px}
.recht h2{font-size:1.4rem;margin:36px 0 12px;font-stretch:100%}
.recht h3{font-size:1.1rem;margin:28px 0 8px;font-stretch:100%}
.recht p,.recht li{color:var(--text);font-size:16px}
.recht ul{list-style:disc;padding-left:22px;margin-bottom:1em}
.recht ul li{margin-bottom:4px}
.recht a{color:var(--navy)}

/* Kontakt / Buchung */
.buchung{display:grid;grid-template-columns:minmax(0,1fr);gap:44px;padding-bottom:96px}   /* minmax(0,…): Tagesleiste darf die Spalte nicht aufweiten */
@media (min-width:960px){.buchung{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:80px}}
.panel{border:1px solid var(--line);padding:26px;min-width:0}
@media (min-width:760px){.panel{padding:36px}}
.panel-head h2{font-size:1.5rem;margin-bottom:6px;font-stretch:100%}
.panel-head p{color:var(--muted);margin-bottom:24px}
.booking-step{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:10px}
.day-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scroll-snap-type:x mandatory;scrollbar-width:none}
.day-strip::-webkit-scrollbar{display:none}
.day-card{flex:0 0 78px;padding:12px 0 10px;background:#fff;border:1px solid var(--line);border-radius:2px;text-align:center;cursor:pointer;scroll-snap-align:start;font-family:inherit;color:var(--ink);transition:border-color .15s,background .15s,color .15s}
.day-card:hover{border-color:var(--navy)}
.day-card.selected{background:var(--navy);border-color:var(--navy);color:#fff}
.day-card .wd{font-size:12px;font-weight:500;color:var(--muted)}
.day-card.selected .wd,.day-card.selected .mo{color:rgba(255,255,255,.8)}
.day-card .num{font-size:24px;font-weight:600;margin-top:2px;line-height:1;font-variant-numeric:tabular-nums}
.day-card .mo{font-size:12px;color:var(--muted);margin-top:3px}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.slot{padding:11px 10px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:2px;font-size:15px;font-weight:500;color:var(--ink);cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s,color .15s}
.slot:hover:not(:disabled){border-color:var(--navy)}
.slot.selected{background:var(--navy);color:#fff;border-color:var(--navy)}
.slot:disabled{color:#b6bac2;cursor:not-allowed;text-decoration:line-through;border-color:var(--line)}
.booking-form{display:none;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.booking-form.show{display:block}
.selected-slot-info{border-left:3px solid var(--orange);padding:10px 14px;font-size:15px;font-weight:600;color:var(--navy);margin-bottom:22px;background:var(--bg-soft)}
.form-row{display:grid;gap:0 16px}
@media (min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:6px}
.form-group input,.form-group textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #c9cdd4;border-radius:2px;background:#fff;color:var(--ink)}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--navy)}
.form-group textarea{min-height:110px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text);margin:6px 0 20px}
.check input{margin-top:5px;width:16px;height:16px;flex:0 0 16px;accent-color:var(--navy)}
.submit-btn{display:inline-block;padding:15px 24px;border:1px solid var(--orange);border-radius:2px;background:var(--orange);color:#fff;font-weight:600;font-size:16px;font-family:inherit;cursor:pointer}
.submit-btn:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.submit-btn:disabled{opacity:.6;cursor:wait}
.form-note{font-size:13.5px;color:var(--muted);margin-top:12px}
.msg{display:none;padding:14px 16px;margin-top:18px;font-size:15px;line-height:1.5;border-left:3px solid var(--navy);background:var(--bg-soft)}
.msg.show{display:block}
.msg.success{border-left-color:#1d8a4b}
.msg.error{border-left-color:#c0392b}
.loading{padding:28px 12px;text-align:center;color:var(--muted);font-size:14.5px}
.seite{display:grid;gap:28px;align-content:start}
.seite .block{border-top:1px solid var(--navy);padding-top:18px}
.seite h3{font-size:1.05rem;margin-bottom:10px;font-stretch:100%}
.seite ol{list-style:decimal;padding-left:20px;color:var(--muted);font-size:15.5px}
.seite ol li{margin-bottom:6px}
.seite ul li{font-size:15.5px;padding:8px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.seite ul li b{font-size:13px;color:var(--muted);font-weight:500}
.seite p{color:var(--muted);font-size:15.5px;margin:0}

/* Fuß */
.fuss{border-top:1px solid var(--line);padding:56px 0 32px;font-size:15px;color:var(--muted)}
.fuss-raster{display:grid;gap:36px 40px}
@media (min-width:760px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.fuss-marke img{height:50px;width:auto;margin-bottom:16px}
.fuss-marke p{margin:0;line-height:1.55}
.fuss-titel{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:12px;letter-spacing:0;font-stretch:100%}
.fuss ul li{padding:5px 0}
.fuss a{text-decoration:none}
.fuss a:hover{text-decoration:underline;color:var(--navy)}
.fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px}

/* Einblenden beim Scrollen (dezent) */
.zeig{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.zeig.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.zeig{opacity:1;transform:none;transition:none}}
.no-js .zeig{opacity:1;transform:none}

/* V7: Fotostreifen Werbeschleife (echte Fotos eines Spiels, gleiche Tafel, wechselnde Partner) */
.schleife{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:900px){.schleife{grid-template-columns:repeat(4,1fr);gap:16px}}
.schleife figure{margin:0}
.schleife img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#000}
.schleife figcaption{font-size:13.5px;color:#8a909c;margin-top:8px;font-variant-numeric:tabular-nums}
.schleife-note{margin-top:18px;font-size:14px;color:#8a909c}
.split-bild .schleife{grid-template-columns:repeat(2,1fr)}

/* V7: Vertrag in Kürze */
.vertrag{display:grid;gap:0 60px;border-top:1px solid var(--navy)}
@media (min-width:900px){.vertrag{grid-template-columns:1fr 1fr}}
.vertrag li{padding:20px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.vertrag h3{font-size:1.05rem;font-stretch:100%}
.vertrag p{margin:0;color:var(--muted);font-size:16px}
.vertrag-fuss{margin-top:28px;color:var(--muted);font-size:16px;max-width:46rem}
.weich .vertrag li{border-color:#dfe2e6}

/* V7: Vereinslogos größer */
.vereine{gap:32px 18px}
.vereine li{width:114px;font-size:13.5px}
.vereine img{height:72px;width:72px}
/* Efe 04.10.2026: immer nur ein Verein sichtbar, weich ein- und ausgeblendet (Steuerung in site.js). Ohne JS bleibt die Reihe. */
.vereine.wechsel.an{display:grid;justify-content:center;margin-top:28px;min-height:170px}
.vereine.wechsel.an li{grid-area:1/1;width:240px;font-size:15px;gap:12px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
.vereine.wechsel.an li.sichtbar{opacity:1;visibility:visible;transition:opacity .25s ease}
.vereine.wechsel.an img{height:112px;width:112px}
@media (prefers-reduced-motion:reduce){.vereine.wechsel.an li,.vereine.wechsel.an li.sichtbar{transition:none}}

/* V7: Pakete mit Eckdaten */
.paket ul li b{font-weight:600;color:var(--ink)}
.paket-preis{font-size:clamp(1.2rem,1.8vw,1.45rem);color:var(--navy);font-weight:600;margin:0 0 6px}
.zusatz{margin-top:36px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted);max-width:52rem;font-size:16px}

/* V7: große Szenen (Am Platz) */
.szenen-gross{display:grid;gap:20px}
@media (min-width:760px){.szenen-gross{grid-template-columns:1fr 1fr;gap:24px}}
@media (min-width:1000px){.szenen-gross{grid-template-columns:repeat(3,1fr)}}   /* Efe 04.10.: GA-Abendrot als drittes Bild */
.szenen-gross figure{margin:0}
.szenen-gross img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.szenen-gross figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.szenen-hinweis{margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.band picture{display:block}
@media (max-width:759px){.band picture img{height:auto;aspect-ratio:4/5;object-position:50% 30%}}

/* Bewegung wie im Infovideo v34 (Efe 06.10.2026: „Animation so wie auf dem Werbevideo“).
   Übernommen: Wort-Einblendung aus der Maske (Zeile), federnde Karten (Kachel/Schlag), orangener Strich (Pfeil Sz. 12),
   Haken mit Feder, Blende (Zoom + Unschärfe), Glanz über Fotos, Tafel und Knopf, langsames Heranfahren (Platz).
   Bewusst NICHT: Blitz, Wackler, orange Glows/Verläufe im Hintergrund (Regel „kein KI-Look“).
   Alles hängt an html.b. Die Klasse setzt site.js nur ohne „reduzierte Bewegung“, ohne JS bleibt alles sichtbar. */
.b .b-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em 0 .16em;margin:-.14em 0 -.16em}
.b .b-w > span{display:inline-block;transform:translateY(118%) skewY(7deg);opacity:0;transition:transform .9s cubic-bezier(.2,1.25,.35,1),opacity .35s ease;transition-delay:calc(var(--d,0ms) + var(--i,0) * 55ms)}
.b .b-an .b-w > span{transform:none;opacity:1}
.b .zeig.b-ohne{opacity:1;transform:none;transition:none}
.b .b-auf{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .6s ease,transform .85s cubic-bezier(.2,1.1,.3,1),filter .6s ease;transition-delay:var(--d,0ms)}
.b .b-auf.b-an{opacity:1;transform:none;filter:none}
.b .b-pop{position:relative;opacity:0;transform:translateY(30px) scale(.93) rotate(var(--r,0deg));transition:opacity .4s ease,transform .8s cubic-bezier(.3,1.55,.5,1);transition-delay:var(--d,0ms)}
.b .b-pop.b-an{opacity:1;transform:none}
.b-strich{position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--d,0ms) + .3s);pointer-events:none}
.dunkel .b-strich{background:#f07a3a}
.b-an > .b-strich{transform:scaleX(1)}
.b .b-mit-haken{padding-right:40px}
.b-haken{position:absolute;right:0;top:20px;width:24px;height:24px;transform:scale(0) rotate(-35deg);transition:transform .55s cubic-bezier(.3,1.9,.5,1);transition-delay:calc(var(--d,0ms) + .35s);pointer-events:none}
.fakten .b-haken{top:16px}
.b-haken svg{display:block;width:100%;height:100%;color:var(--orange)}
.dunkel .b-haken svg{color:#f07a3a}
.b-an > .b-haken{transform:none}
.b-bild{display:block;position:relative;overflow:hidden}
.b .b-bild img{transform:scale(1.14);filter:blur(8px);opacity:0;transition:transform 1.3s cubic-bezier(.2,.8,.2,1),filter .9s ease,opacity .6s ease;transition-delay:var(--d,0ms)}
.b .b-bild.b-an img{transform:none;filter:none;opacity:1}
.b .b-bild.b-ruhe img{animation:b-heran 18s ease-in-out infinite alternate}
@keyframes b-heran{to{transform:scale(1.06)}}
.b-bild::after,.tafel-rahmen::after{content:"";position:absolute;top:-50%;bottom:-50%;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-200%) rotate(18deg);pointer-events:none;z-index:1}
.b-bild.b-an::after{animation:b-glanz 1.1s ease-in-out forwards;animation-delay:calc(var(--d,0ms) + .75s)}
.tafel-rahmen.b-glanz::after{animation:b-glanz .9s ease-in-out .15s}
@keyframes b-glanz{from{transform:translateX(-200%) rotate(18deg)}to{transform:translateX(560%) rotate(18deg)}}
.b .b-frei{opacity:0;transform:translateY(36px) scale(.95) rotate(var(--r,0deg));filter:blur(8px);transition:opacity .6s ease,transform 1s cubic-bezier(.25,1.3,.4,1),filter .8s ease;transition-delay:var(--d,0ms)}
.b .b-frei.b-an{opacity:1;transform:none;filter:none}
.b-zoomrahmen{overflow:hidden}
.b .b-zoom{display:block;animation:b-ran 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes b-ran{from{transform:scale(1.1)}to{transform:none}}
.b .tafel-rahmen{overflow:hidden}
.b .tafel-rahmen [data-bild]{transform:scale(1.05);filter:blur(5px);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.9,.2,1),filter .5s ease}
.b .tafel-rahmen [data-bild].aktiv{transform:none;filter:none}
.b .knopf-orange{position:relative;overflow:hidden}
.b .knopf-orange::after{content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-160%) rotate(18deg);animation:b-knopfglanz 6s ease-in-out 1.6s infinite;pointer-events:none}
@keyframes b-knopfglanz{0%{transform:translateX(-160%) rotate(18deg)}20%,100%{transform:translateX(420%) rotate(18deg)}}
@media print{.b .b-w > span,.b .b-auf,.b .b-pop,.b .b-bild img,.b .b-frei{opacity:1!important;transform:none!important;filter:none!important}}