:root{--navy:#102a43;--navy2:#173b5b;--orange:#f26b38;--yellow:#f5c542;--blue:#2f80c9;--green:#4faf5a;--cream:#fff8ea;--ink:#142231;--muted:#62707d;--white:#fff;--line:#e8edf2;--max:1180px;--shadow:0 22px 60px rgba(16,42,67,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}a{color:inherit;text-decoration:none}.wrap{max-width:var(--max);margin:auto;padding:0 24px}img{max-width:100%;height:auto;display:block}
header{position:sticky;top:0;z-index:20;background:rgba(16,42,67,.96);backdrop-filter:blur(12px);color:#fff;border-bottom:1px solid #ffffff1a}nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:11px;font-weight:950}.brand img{width:46px;height:46px;background:#fff;border-radius:12px;padding:3px;object-fit:contain}.brand strong{font-size:19px}.navlinks{display:flex;gap:19px;font-size:13px;font-weight:800;color:#d9e4ec}.navlinks a:hover{color:var(--yellow)}.navcta{background:var(--yellow);color:var(--navy);padding:10px 16px;border-radius:999px;font-weight:950}
.hero{background:var(--navy);color:#fff;padding:78px 0 88px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.eyebrow,.kicker{color:var(--yellow);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.13em}.hero h1{font-size:clamp(47px,6vw,78px);line-height:.92;letter-spacing:-.065em;margin:18px 0}.hero h1 em{color:var(--orange);font-style:normal}.hero p{font-size:19px;color:#d9e4ec;max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:999px;font-weight:950;border:2px solid transparent}.primary{background:var(--yellow);color:var(--navy)}.secondary{border-color:#fff;color:#fff}.hero-art{position:relative}.hero-art>img{border-radius:28px;box-shadow:var(--shadow);transform:rotate(1deg)}.hero-logo{position:absolute;top:-20px;left:-20px;width:105px!important;background:#fff;padding:8px;border-radius:20px;transform:none!important}
.band{background:var(--yellow);color:var(--navy);font-weight:950;text-transform:uppercase;letter-spacing:.08em;padding:12px 0;text-align:center;font-size:13px}
section{padding:88px 0}.head{max-width:760px;margin-bottom:40px}.head h2{font-size:clamp(36px,4.5vw,58px);line-height:1;letter-spacing:-.05em;margin:10px 0 15px}.head p{font-size:18px;color:var(--muted)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 10px 30px #102a430b}.icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:950;margin-bottom:18px}.c1{background:var(--orange)}.c2{background:#e4b800}.c3{background:var(--green)}.c4{background:var(--blue)}.card h3{margin:0 0 7px}.card p{margin:0;color:var(--muted);font-size:14px}
.dark{background:var(--navy);color:#fff}.dark .head p{color:#c9d6e0}.pills{display:flex;flex-wrap:wrap;gap:10px}.pill{background:#fff;color:var(--navy);padding:11px 16px;border-radius:999px;font-weight:900;font-size:14px}.pill:nth-child(2){background:#ff5262;color:#fff}.pill:nth-child(3){background:#f4a927}.pill:nth-child(4){background:#55ad58;color:#fff}.pill:nth-child(5){background:#8064c9;color:#fff}.pill:nth-child(6){background:#2f80c9;color:#fff}.pill:nth-child(7){background:#1aa6a0;color:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.photo{border-radius:26px;box-shadow:var(--shadow);overflow:hidden;background:#0c2236;padding:14px}.photo img{border-radius:15px}.checks{display:grid;gap:16px}.check{display:flex;gap:13px}.num{flex:0 0 30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:950}.check b{display:block}.check span{font-size:14px;color:var(--muted)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.shot{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 12px 30px #102a430c}.shot .mock{height:180px;background:linear-gradient(135deg,#0d3150,#2c7db4);padding:20px;color:#fff}.shot .mock .bar{height:16px;background:#ffffff33;border-radius:5px;margin-bottom:12px}.shot .mock .rows{display:grid;gap:7px}.shot .mock .row{height:20px;background:#ffffff1e;border-radius:5px}.shot .body{padding:20px}.shot h3{margin:0 0 5px}.shot p{margin:0;color:var(--muted);font-size:13px}
.notice{background:#fff;border:1px solid var(--line);border-radius:25px;padding:28px}.notice strong{color:var(--orange)}
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.module{background:#fff;border-radius:22px;padding:28px;border:1px solid var(--line)}.module:nth-child(1){border-top:5px solid var(--orange)}.module:nth-child(2){border-top:5px solid var(--blue)}.module:nth-child(3){border-top:5px solid var(--green)}
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.price{background:#fff;border:1px solid var(--line);border-radius:23px;padding:25px;position:relative}.price.featured{border:3px solid var(--orange);transform:translateY(-8px);box-shadow:var(--shadow)}.price .badge{position:absolute;right:15px;top:15px;background:var(--orange);color:#fff;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:950}.price h3{margin:0 0 5px;font-size:22px}.amount{font-size:36px;font-weight:1000;letter-spacing:-.05em}.amount small{font-size:12px;color:var(--muted)}.price ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:8px;font-size:13px;color:var(--muted)}.price li:before{content:"✓";color:var(--green);font-weight:950;margin-right:7px}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #102a430b}th,td{text-align:left;padding:14px 13px;border-bottom:1px solid var(--line);font-size:13px}th{background:var(--navy);color:#fff}td:not(:first-child),th:not(:first-child){text-align:center}.yes{color:var(--green);font-weight:950}.limited{color:#e19a00;font-weight:900}.no{color:#a5afb7}
.faq{display:grid;gap:10px}.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px 20px}.faq summary{cursor:pointer;font-weight:900}
.cta{background:var(--orange);color:#fff;border-radius:30px;padding:45px;display:flex;align-items:center;justify-content:space-between;gap:25px}.cta h2{margin:0;font-size:42px;line-height:1}.cta p{color:#fff3ee}.cta .btn{background:var(--yellow);color:var(--navy)}
footer{background:#0b2032;color:#b8c7d2;padding:35px 0}.foot{display:flex;justify-content:space-between;gap:20px;font-size:13px}
@media(max-width:950px){.navlinks{display:none}.hero-grid,.split{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}.prices{grid-template-columns:repeat(2,1fr)}.modules{grid-template-columns:1fr}.price.featured{transform:none}}
@media(max-width:600px){.wrap{padding:0 17px}nav{height:68px}.navcta{font-size:12px;padding:9px 12px}.hero{padding:55px 0 65px}.hero h1{font-size:48px}.grid4,.gallery,.prices{grid-template-columns:1fr}.hero-logo{width:78px!important;left:-5px;top:-14px}.cta{display:block;padding:32px}.cta h2{font-size:34px}.foot{display:block}.foot div{margin:7px 0}section{padding:65px 0}table{font-size:11px}}

/* v3 poster-inspired layer */
.site-header{box-shadow:0 10px 30px rgba(10,31,50,.18)}
.topnav{min-height:78px;height:auto;padding:10px 0}
.brand{gap:10px}.brand img{width:50px;height:50px;border-radius:14px;padding:2px}.brand span{display:flex;flex-direction:column;line-height:1}.brand strong{font-size:20px;letter-spacing:-.03em}.brand small{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#9eb4c4;margin-top:6px;font-weight:900}
.navlinks{align-items:center;gap:15px}.navlinks a{padding:9px 7px;border-radius:9px}.navlinks a:hover{background:#ffffff12}.navactions{display:flex;gap:9px;align-items:center}.live-link{border:1px solid #ffffff55;color:#fff;padding:9px 13px;border-radius:10px;font-weight:900;font-size:12px}.live-link:hover{background:#fff1}
.hero-poster{background:radial-gradient(circle at 80% 0%,#2e74a4 0,rgba(46,116,164,0) 36%),var(--navy)}
.hero-copy{position:relative;z-index:2}.paint{display:flex;align-items:flex-end;gap:10px;margin-top:18px}.paint span{background:var(--yellow);color:var(--navy);padding:4px 12px 6px;font-weight:1000;transform:rotate(-2deg);font-size:19px}.paint strong{font-size:clamp(42px,5.6vw,76px);line-height:.84;letter-spacing:-.07em;text-transform:uppercase}.hero h1{margin:10px 0 18px;font-size:clamp(50px,7vw,92px)}.hero h1 em{color:#55b6ff;text-shadow:5px 5px 0 #0b1d2e}.hero-visual{position:relative}.hero-visual img{width:100%;border-radius:25px;box-shadow:0 30px 80px rgba(0,0,0,.34);border:6px solid #fff;transform:rotate(1.4deg)}.sticker{position:absolute;right:-26px;top:-32px;width:138px;height:138px;border-radius:50%;background:#e63946;color:#fff;display:grid;place-items:center;text-align:center;font-weight:1000;font-size:17px;line-height:1.03;transform:rotate(9deg);box-shadow:0 16px 30px rgba(0,0,0,.25);border:5px solid #fff}.sticker b{color:var(--yellow)}
.microproof{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.microproof span{font-size:11px;font-weight:900;background:#ffffff12;border:1px solid #ffffff1c;border-radius:999px;padding:7px 10px;color:#eff6fb}.campaign{padding:42px 0 10px;background:var(--cream)}.campaign-image{width:100%;border-radius:28px;box-shadow:0 25px 70px rgba(16,42,67,.18);border:1px solid #fff}.campaign-caption{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:12px;padding:0 6px;color:var(--muted);font-size:12px}.campaign-caption b{color:var(--navy);font-size:14px}.poster-section{position:relative;overflow:hidden}.poster-section:after{content:"";position:absolute;right:-120px;top:-100px;width:360px;height:360px;border:80px solid #ffffff0b;border-radius:50%}
.device-card{position:relative;background:#0a2134;padding:14px;border-radius:30px;box-shadow:0 30px 80px rgba(0,0,0,.3);transform:rotate(1deg)}.device-card img{border-radius:18px}.device-note{display:block;font-size:10px;color:#b8c9d5;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin:9px 4px 0}.screens{padding-top:70px}.darkbtn{background:#fff;color:var(--navy)!important;border-color:#fff!important}.gallery-realistic{grid-template-columns:1.15fr 1fr 1fr}.shot img{width:100%;height:220px;object-fit:cover;background:#dfe7ed}.live-frame{height:220px;background:#0b2032;overflow:hidden}.live-frame iframe{width:125%;height:125%;border:0;transform:scale(.8);transform-origin:0 0;background:#fff}.shot .body{min-height:112px}.textlink{display:inline-block;margin-top:13px;color:var(--blue);font-weight:950;font-size:13px}.outline-light{border:2px solid #fff!important;background:transparent!important;color:#fff!important}.hero-mini{background:#0a2134;padding:10px;border-radius:26px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.hero-mini img{border-radius:18px}.inner-hero{padding:62px 0 72px}.inner-hero h1{font-size:clamp(48px,6vw,82px)}
@media(max-width:1120px){.navlinks{gap:6px}.navlinks a{font-size:12px}.live-link{display:none}}
@media(max-width:780px){.topnav{align-items:flex-start}.brand small{display:none}.navlinks{display:none}.navactions{margin-left:auto}.campaign-caption{display:block}.campaign-caption span{display:block;margin-top:4px}.sticker{right:-8px;top:-20px;width:110px;height:110px;font-size:13px}.gallery-realistic{grid-template-columns:1fr}.live-frame{height:260px}}
@media(max-width:600px){.paint{display:block}.paint span{display:inline-block;margin-bottom:7px}.paint strong{display:block;font-size:45px}.hero-visual img{transform:none}.sticker{right:5px;top:-14px}.microproof{display:grid;grid-template-columns:1fr 1fr}.microproof span{font-size:10px}.campaign{padding-top:25px}.hero-mini{margin-top:10px}}

/* Original app screenshots */
.real-shot img{height:auto!important;max-height:390px;object-fit:contain!important;background:#e9edf5!important;padding:5px}.real-shot .body{min-height:118px}.real-gallery{align-items:start}.real-caption{display:inline-block;margin:0 0 15px;padding:6px 10px;border-radius:999px;background:#d9ed91;color:#17324b;font-size:11px;font-weight:950;letter-spacing:.05em;text-transform:uppercase}

/* Button and sticker fit fixes */
.navactions{flex-shrink:0;white-space:nowrap}
.navcta{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:0 0 auto;min-width:max-content;padding:10px 16px;line-height:1.2}
.btn{white-space:nowrap;line-height:1.2}
.sticker{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px;line-height:1.02;overflow:hidden}
.sticker span{display:block}
.sticker b{display:block;font-size:.82em;white-space:nowrap}
@media(max-width:780px){.navcta{padding:9px 14px;font-size:12px}.sticker{padding:11px;gap:4px}.sticker b{font-size:.78em}}

/* Header CTA without drop shadow */
.navcta{box-shadow:none;transform:none}

/* Platform choice, contact and club setup pages */
.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}.download-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 10px 30px #102a430b;display:flex;flex-direction:column}.download-card h2{font-size:25px;margin:8px 0}.download-card p{color:var(--muted)}.download-card .btn{margin-top:auto;align-self:flex-start}.download-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:27px}.download-card:nth-child(2) .download-icon{background:var(--green)}.download-card:nth-child(3) .download-icon{background:var(--blue)}.platform-note{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px;color:var(--muted)}.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.contact-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:25px}.contact-card h2{margin:0 0 8px;font-size:22px}.contact-card p{color:var(--muted)}.contact-card a:not(.btn){color:var(--blue);font-weight:900}.setup-steps{counter-reset:setup;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.setup-step{counter-increment:setup;background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px}.setup-step:before{content:counter(setup);display:grid;place-items:center;background:var(--yellow);color:var(--navy);font-weight:950;width:38px;height:38px;border-radius:50%;margin-bottom:12px}.setup-step h3{margin:0 0 6px}.setup-step p{margin:0;color:var(--muted)}.contact-card .btn,.download-card .btn{white-space:nowrap}
@media(max-width:1050px){.navlinks{display:none}.navactions{margin-left:auto}}
@media(max-width:780px){.download-grid,.setup-steps,.contact-grid{grid-template-columns:1fr}.download-card{padding:23px}.download-card .btn{align-self:stretch}.contact-card .btn{white-space:normal}}
@media(max-width:400px){.topnav{gap:12px}.brand img{width:42px;height:42px}.brand strong{font-size:17px}.navcta{padding:8px 11px;font-size:11px}}

/* Verweise im Fliesstext der FAQ: als Link erkennbar, aber ohne Knopf-Abstand. */
.faq details a{color:var(--blue);font-weight:800;text-decoration:underline;text-underline-offset:2px}

/* ── Abstaende halbiert ──────────────────────────────────────────────────
   Gewuenscht (mit Bild): „Teilweise sind noch grosse leere Bereiche zu
   sehen — diese Abstaende halbieren." Sektionen, Kopfbereiche und der
   Abstand unter den Ueberschriften auf die Haelfte; die Kampagnenflaeche hat
   ihre eigenen, schon knappen Werte. */
section{padding:44px 0}
.hero{padding:39px 0 44px}
.inner-hero{padding:31px 0 36px}
.head{margin-bottom:20px}
@media(max-width:600px){section{padding:33px 0}.hero{padding:28px 0 33px}}
.screens{padding-top:35px}
/* Der helle Hinweiskasten traegt seine Schrift selbst — in dunklen
   Abschnitten (.dark) erbte er sonst Weiss auf Weiss. Gemeldet mit Bild:
   „Hier ist die Schrift im rechten Panel ebenfalls weiss, deshalb sieht man
   nichts." */
.notice{color:var(--ink)}
.notice h3{color:var(--navy);margin-top:0}
.notice p{color:var(--muted)}
.notice .textlink{color:var(--blue)}

/* ── Anklickbare Knoepfe im Kampagnenbild ────────────────────────────────
   „Jetzt kostenlos starten" und „Live-Ansicht ansehen" sind ins Bild
   gemalt. Unsichtbare Flaechen liegen genau darueber — in Prozent des
   Bildes (1536 x 575, vermessen), damit sie bei jeder Breite passen. */
.campaign-frame{position:relative}
.campaign-hit{position:absolute;top:79.2%;height:9.8%;border-radius:12px}
.campaign-hit-start{left:7.5%;width:21.7%}
.campaign-hit-live{left:29.5%;width:18.2%}
.campaign-hit:hover{background:rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(16,42,67,.25)}
.campaign-hit:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* Die Live-Ansicht laesst sich nicht einbetten (frame-ancestors 'none') —
   statt des leeren Rahmens ein Bild des Demo-Turniers, das dorthin fuehrt. */
.live-shot{display:block}
.live-shot img{width:100%;height:100%;object-fit:cover;object-position:top left}
.live-shot:hover img{filter:brightness(1.04)}
/* Verbandslizenz (Preise): ruhige Liste im hellen Kasten. */
.verband-liste{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--muted)}
.verband-liste b{color:var(--navy)}
/* Tarifkarten: die Knoepfe stehen auf einer Hoehe. Gewuenscht mit Bild:
   „Die Knoepfe der Tarife sollen auf derselben Hoehe sein." Die Karte ist
   eine Spalte, der Knopf rutscht ans Ende — und die hervorgehobene Karte
   wird nicht mehr angehoben, sonst stuende ihr Knopf acht Punkte hoeher. */
.price{display:flex;flex-direction:column}
.price .btn{margin-top:auto;align-self:flex-start}
.price.featured{transform:none}
.price.featured{padding:23px}

/* Hauptueberschriften eine Stufe kleiner (Wunsch 02.10.2026). */
.hero h1{font-size:clamp(42px,5.8vw,76px)}
.inner-hero h1{font-size:clamp(40px,5vw,68px)}
@media(max-width:600px){.hero h1,.inner-hero h1{font-size:40px}}

/* Funktionen: eigene Symbole statt Zeichen im Farbquadrat. */
.icon.sym{width:64px;height:64px;border-radius:0;background:none;margin-bottom:14px}
.icon.sym img{width:100%;height:100%;object-fit:contain}

/* Zusatzmodule: Hinweis „In Arbeit" oben rechts in der Kachel. */
.module{position:relative}
.wip-inline{display:inline-block;vertical-align:middle;margin-left:6px;background:#fff4d6;color:#8a5a00;border:1px solid #f5c542;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:900;letter-spacing:.02em;line-height:1.5;white-space:nowrap}
.wip{position:absolute;right:18px;top:18px;background:#fff4d6;color:#8a5a00;border:1px solid #f5c542;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:900;letter-spacing:.02em}

/* Startseite: Hinweis auf die Pre-Release-Version mit Tester-Anmeldung. */
.prerelease{background:var(--yellow);color:var(--navy)}
.prerelease-inner{display:flex;align-items:center;gap:16px;padding-top:12px;padding-bottom:12px}
.prerelease-tag{background:var(--navy);color:#fff;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.prerelease p{margin:0;flex:1;font-size:14px;line-height:1.45}
.prerelease .prerelease-cta{background:var(--navy);color:#fff;padding:10px 18px;font-size:14px;white-space:nowrap}
@media(max-width:700px){.prerelease-inner{flex-wrap:wrap;gap:10px}.prerelease p{flex-basis:100%}}
/* Smartphone: eine schmale Zeile statt eines Kastens ueber den halben
   Bildschirm (gewuenscht 03.10.2026: „Das Pre-Release-Banner auf Smartphone
   muss deutlich kleiner sein"). Kurzer Satz, kleines Schild, kleiner Knopf. */
.prerelease-kurz{display:none}
@media(max-width:600px){
  .prerelease-lang{display:none}
  .prerelease-kurz{display:inline}
  .prerelease-inner{flex-wrap:nowrap;gap:8px;padding-top:7px;padding-bottom:7px}
  .prerelease p{flex-basis:auto;font-size:12px;line-height:1.3}
  .prerelease-tag{padding:3px 7px;font-size:9px;letter-spacing:.05em}
  .prerelease .prerelease-cta{padding:6px 10px;font-size:12px;min-height:0}
}

/* ── Smartphone ──────────────────────────────────────────────────────────
   Gewuenscht (02.10.2026): „Die Seiten muessen fuer Smartphone optimiert
   werden."

   Menue: Unter 1050 px verschwanden die Menuepunkte bisher ersatzlos — auf
   dem Handy gab es ausser „Jetzt starten" keinen Weg zu Preisen, FAQ oder
   Kontakt. Der Knopf ☰ klappt sie unter der Kopfzeile auf. */
.menu-btn{display:none}
@media(max-width:1050px){
  .site-header .topnav{position:relative}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid #ffffff55;background:transparent;color:#fff;font-size:21px;line-height:1;cursor:pointer;flex:none}
  .menu-btn:hover{background:#ffffff12}
  .site-header.menu-open .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;left:-24px;right:-24px;top:100%;background:#102a43;padding:8px 24px 16px;border-bottom:1px solid #ffffff1a;box-shadow:0 18px 30px rgba(0,0,0,.25)}
  .site-header.menu-open .navlinks a{font-size:16px;padding:12px 10px;color:#d9e4ec;text-decoration:none}
}
@media(max-width:600px){
  .site-header.menu-open .navlinks{left:-17px;right:-17px;padding-left:17px;padding-right:17px}
}
/* Breite Tabellen (Tarifvergleich) rollen seitlich, statt die Seite zu
   verbreitern. */
.tabellen-rolle{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Preis-Reiter: nur auf dem Handy. Statt vier Karten untereinander steht
   oben Frei · Basis · Komplett · VIP, darunter genau eine Karte. */
.preis-reiter{display:none}
@media(max-width:600px){
  .preis-reiter{display:flex;gap:6px;margin:0 0 12px;padding:4px;background:#e9eef3;border-radius:999px}
  .preis-reiter button{flex:1 1 0;min-width:0;min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--navy);font:inherit;font-size:13px;font-weight:900;cursor:pointer;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .preis-reiter button[aria-selected="true"]{background:#fff;box-shadow:0 2px 8px #102a431f;color:var(--orange)}
  .prices.mit-reiter .price{display:none}
  .prices.mit-reiter .price.aktiv{display:flex}
  .prices.mit-reiter .price.featured{border-width:2px}
  /* Tarifvergleich: Die Spalte „Funktion" bleibt beim seitlichen Rollen
     stehen, sonst weiss man bei „✓" nicht mehr, wofuer es steht. Die Rundung
     uebernimmt die Rolle, denn overflow:hidden an der Tabelle hebelt
     position:sticky aus. */
  .tabellen-rolle{border-radius:16px}
  .tabellen-rolle table{overflow:visible;border-radius:0}
  .tabellen-rolle th:first-child,.tabellen-rolle td:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line)}
  .tabellen-rolle th:first-child{background:var(--navy)}
}
@media(max-width:600px){
  .tabellen-rolle table{min-width:460px;font-size:12px}
  /* Ein langes Wort wie „TURNIERAUSLOSUNG." passt bei 40 px nicht in 375 px. */
  .hero h1,.inner-hero h1{font-size:clamp(30px,9.4vw,40px);overflow-wrap:anywhere}
  .microproof span{font-size:12px}
}
/* Download: Die Knoepfe haben lange Texte („Windows-Programm herunterladen")
   und durften nicht umbrechen — die Karten liefen ueber den Rand. */
@media(max-width:780px){
  .download-card .btn{white-space:normal;align-self:stretch;text-align:center}
}

/* ── Kacheln auf dem Smartphone ───────────────────────────────────────────
   Gewuenscht (03.10.2026): „Die weissen Kacheln sollen kompakter sein und
   kleineren Schriftsatz haben." Weniger Polster, kleinere Ueberschriften —
   und bei Kacheln mit Symbol steht es links neben dem Text statt darueber:
   Eine Kachel mit drei Zeilen Text war sonst so hoch wie der Bildschirm
   breit. */
@media(max-width:600px){
  .grid4,.modules,.download-grid,.contact-grid,.setup-steps,.prices{gap:10px}
  .card,.module,.download-card,.contact-card,.setup-step,.price,.notice{padding:15px 16px;border-radius:16px}
  .card h3,.module h3,.setup-step h3{font-size:16px;margin:0 0 4px}
  .card p,.module p,.setup-step p,.contact-card p,.download-card p{font-size:13px;line-height:1.45}
  .card:has(> .icon){display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:start}
  .card:has(> .icon) > .icon{grid-row:1 / span 3;margin:2px 0 0;width:38px;height:38px;border-radius:11px;font-size:13px}
  .card:has(> .icon) > .icon.sym{width:46px;height:46px}
  .module h2{font-size:19px;margin:6px 0}
  .module .kicker{font-size:10px}
  .module .icon{width:38px;height:38px;border-radius:11px;font-size:13px;margin-bottom:10px}
  .wip{right:12px;top:12px;font-size:10px;padding:3px 8px}
  .setup-step:before{width:30px;height:30px;margin-bottom:8px;font-size:14px}
  .download-card h2{font-size:19px;margin:6px 0}
  .download-icon{width:44px;height:44px;border-radius:13px;font-size:20px}
  .contact-card h2{font-size:17px}
  .price h3{font-size:18px}
  .amount{font-size:28px}
  .price ul{margin:12px 0;gap:6px;font-size:12.5px}
  .notice p{font-size:14px}
  .faq details{padding:12px 14px;border-radius:13px;font-size:14px}
  .shot .body{padding:14px 15px;min-height:0}
  .shot h3{font-size:16px}
  .shot p{font-size:13px}
  .price.featured{padding:13px 14px}
  .module:has(> .icon){display:grid;grid-template-columns:auto 1fr;column-gap:13px;align-items:start}
  .module:has(> .icon) > .icon{grid-row:1 / span 3;margin:2px 0 0}
  .module:has(> .icon) > h3{padding-right:70px}
  .module:has(> .icon) > .textlink{grid-column:2;margin-top:8px}
}

/* ── Knopfpaare auf dem Smartphone ─────────────────────────────────────────
   Gewuenscht (03.10.2026): „Die Buttons sollen unter Smartphone in einer
   Zeile stehen." Zwei Knoepfe teilen sich die Breite; ein langer Text bricht
   im Knopf um, statt den zweiten Knopf in die naechste Zeile zu schieben. */
@media(max-width:600px){
  .actions{flex-wrap:nowrap;gap:8px;margin:20px 0}
  /* Breite nach Inhalt, der Rest wird geteilt: Der Knopf mit dem laengeren
     Text darf breiter sein, statt umzubrechen. Erst wenn beide zusammen
     nicht passen (sehr schmale Geraete), bricht der Text doch. */
  .actions .btn{flex:1 1 auto;min-width:0;padding:11px 12px;font-size:13px;line-height:1.2;white-space:normal;text-align:center}
  .actions .btn[hidden]{display:none}
}

/* ── Abstand Text/Bild auf dem Smartphone ─────────────────────────────────
   Gewuenscht (03.10.2026): „Ueber dem Screenshot und unter den Buttons soll
   der Abstand halbiert werden." Untereinander gestapelt lagen 55 px Raster-
   abstand plus 20 px Rand der Knopfzeile dazwischen — jetzt die Haelfte. */
@media(max-width:600px){
  /* An allen Stellen dieser Art (gewuenscht: „am besten an allen Stellen
     dieser Art"): Text mit Knoepfen ueber einem Bild — die zweispaltigen
     Abschnitte (.split) und der Kopf mit App-Bild daneben (.hero-grid). */
  .split,.hero-grid{gap:28px}
  :is(.split,.hero-grid) .actions:last-child{margin-bottom:10px}
  .hero-grid .hero-mini{margin-top:0}
}

/* Download: echte Symbole fuer Windows, Google Play und Browser statt
   Zeichen (gewuenscht 03.10.2026). */
.download-icon svg{width:30px;height:30px;display:block}
@media(max-width:600px){
  .download-icon svg{width:23px;height:23px}
  /* Symbol und Ueberschrift in einer Zeile (gewuenscht 03.10.2026). */
  .download-card{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .download-card > .download-icon{margin:0}
  .download-card > h2{margin:0}
  .download-card > :not(.download-icon):not(h2){grid-column:1 / -1}
  .download-card > p{margin:10px 0 12px}
}

/* Turniersysteme: die empfohlene Feldgroesse unter der Beschreibung. */
.card p.feldgroesse{margin-top:10px;font-size:12px;font-weight:800;color:var(--blue)}

/* Englische Startseite: Hinweis, dass die Unterseiten deutsch sind. */
.en-hinweis{margin:14px 4px 0;color:var(--muted);font-size:13px;text-align:center}
.paint span{white-space:nowrap}

/* ── Smartphone-Helfer aus v2.js (gewuenscht 03.10.2026) ─────────────────── */
/* Bilder antippen → bildschirmfuellend, mit den Fingern zoombar. */
img.zoombar{cursor:zoom-in}
.bildbox{position:fixed;inset:0;z-index:300;background:rgba(8,20,32,.94);display:flex;flex-direction:column}
.bildbox-rolle{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:56px 10px 20px;touch-action:pinch-zoom pan-x pan-y}
.bildbox-rolle img{width:100%;max-width:560px;height:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.bildbox.quer .bildbox-rolle img{max-width:none;width:min(1400px,240vw)}
@media(min-width:900px){.bildbox-rolle img,.bildbox.quer .bildbox-rolle img{width:auto;max-width:96vw;max-height:88vh}}
.bildbox-zu{position:fixed;top:10px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#102a43;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}
html.bildbox-offen{overflow:hidden}

/* „Nach oben" — nur auf dem Handy, erst nach anderthalb Bildschirmen. */
.nach-oben{position:fixed;right:14px;bottom:16px;z-index:60;width:44px;height:44px;border-radius:50%;border:0;background:#102a43;color:#fff;font-size:20px;font-weight:900;box-shadow:0 8px 20px rgba(0,0,0,.25);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s}
.nach-oben.sichtbar{opacity:1;pointer-events:auto;transform:none}
.nach-oben.ueber-leiste{bottom:84px}
@media(min-width:601px){.nach-oben{display:none}}

/* Feste Leiste unten: zwei Knoepfe in Daumenreichweite (nur Handy). */
.daumenleiste{display:none}
@media(max-width:600px){
  .daumenleiste{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(16,42,67,.96);backdrop-filter:blur(10px);box-shadow:0 -8px 24px rgba(0,0,0,.18);transform:translateY(110%);transition:transform .25s}
  .daumenleiste.sichtbar{transform:none}
  .daumenleiste .btn{flex:1 1 0;justify-content:center;padding:11px 10px;font-size:14px;min-height:46px}
  .daumenleiste .btn.secondary{background:transparent;color:#fff;border:2px solid #fff}
  body[data-leiste] footer{padding-bottom:84px}
}

/* Sprungleiste unter dem Seitenkopf langer Seiten (nur Handy). */
.sprungleiste{display:none}
@media(max-width:600px){
  .sprungleiste{display:flex;gap:8px;overflow-x:auto;padding:12px 17px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:68px;z-index:15;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sprungleiste::-webkit-scrollbar{display:none}
  .sprungleiste a{flex:none;padding:8px 13px;border-radius:999px;background:#eef3f8;color:var(--navy);font-size:13px;font-weight:800;text-decoration:none;white-space:nowrap}
  main > section[id]{scroll-margin-top:130px}
}

/* FAQ: Suchfeld ueber den Fragen. */
.faq-suche{margin:0 0 4px}
.faq-suche input{width:100%;box-sizing:border-box;padding:13px 16px;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)}
.faq-suche input:focus{outline:2px solid var(--blue);outline-offset:1px}
.faq-leer{margin:10px 4px 0;color:var(--muted)}
.faq details{scroll-margin-top:100px}

/* Download: Reihenfolge nach Geraet (v2.js setzt .os-android / .os-ios). */
@media(max-width:780px){
  .download-card.dl-win{order:3}
  .os-android .download-card.dl-play{order:-1}
  .os-ios .download-card.dl-web{order:-1}
}

/* Handy-Aufnahmen des Demo-Turniers (<picture>): Auf dem Handy steht dort
   ein hohes Bild — schmaler und mittig, damit es nicht den ganzen Schirm
   fuellt. */
.hero-visual picture,.device-card picture{display:block}
@media(max-width:600px){
  .hero-visual picture img,.device-card picture img{width:78%;margin:0 auto;display:block}
  .hero-visual picture img{transform:none;border-width:4px}
}

/* Dunkle Abschnitte: Erklaerzeilen unter den nummerierten Punkten waren
   grau auf Dunkelblau kaum lesbar (gemeldet 03.10.2026). */
.dark .check span,.poster-section .check span{color:#c9d6e0}

/* Turniersysteme: Kennzeichen „100–500" und der Kasten fuer grosse Felder. */
.gross-badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:2px 8px;border-radius:999px;background:#fff4d6;color:#8a5a00;border:1px solid #f5c542;font-size:11px;font-weight:900;letter-spacing:.02em}
.grossfeld{margin-top:22px;background:var(--navy);color:#fff;border-radius:22px;padding:24px 26px}
.grossfeld h3{margin:6px 0 10px;font-size:22px}
.grossfeld ul{margin:0 0 12px;padding-left:20px;display:grid;gap:8px}
.grossfeld li{color:#dfe8ef;line-height:1.5}
.grossfeld li b{color:#fff}
.grossfeld p{margin:0;color:#c9d6e0;font-size:14px}
@media(max-width:600px){.grossfeld{padding:18px 17px;border-radius:16px}.grossfeld h3{font-size:18px}.grossfeld li{font-size:14px}}

/* ── iPhone (gewuenscht 03.10.2026) ──────────────────────────────────────
   Home-Bildschirm-Hinweis nur auf iPhone/iPad (v2.js setzt .os-ios). */
.ios-tipp{display:none;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:#eef5fc;border:1px solid #cfe2f5;font-size:13px;color:var(--ink)}
.os-ios .ios-tipp{display:block}
.ios-tipp ol{margin:6px 0;padding-left:20px}
.ios-tipp li{margin:2px 0}
.ios-tipp span{color:var(--muted)}
.ios-tipp svg.teilen{width:16px;height:16px;vertical-align:-3px;color:var(--blue)}
@media(max-width:780px){.download-card > .ios-tipp{grid-column:1 / -1}}
/* Kamera-Aussparung im Querformat (viewport-fit=cover): Inhalte bleiben
   frei, die farbigen Flaechen gehen bis an den Rand. */
.wrap{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
@media(max-width:600px){.wrap{padding-left:max(17px,env(safe-area-inset-left));padding-right:max(17px,env(safe-area-inset-right))}}
.daumenleiste{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.nach-oben{right:max(14px,env(safe-area-inset-right))}

/* Turniersysteme: die Pyramide aus dem Programm (benchmark/website_pyramide_bild_test.dart). */
.pyramide-bild{margin:0;justify-self:center}
.pyramide-bild img{display:block;width:100%;max-width:440px;height:auto;border-radius:18px;border:1px solid #ffffff22;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.pyramide-bild figcaption{margin-top:10px;text-align:center;font-size:12px;color:#c9d6e0}
@media(max-width:600px){.pyramide-bild img{max-width:320px}}

/* ── Schaubild: vernetzte Geraete (von der bisherigen Website uebernommen).
   Gewuenscht (03.10.2026): „Bitte baue dieses Schaubild an einer geeigneten
   Stelle wieder ein; auf der website-v2 soll auch das Thema der
   Offlinefaehigkeit ueber WLAN-Verbund erklaert werden." Die Farbtoken der
   alten Seite werden hier auf die neue Palette gelegt. */
.netz-card{--brand:var(--blue);--bg-soft:#fbfcfd;--bg-card:#fff;--fg:var(--ink);--fg-muted:var(--muted);--radius:22px}
.netz-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px clamp(10px, 3vw, 36px);
}
.netz-svg {
  width: 100%; height: auto; display: block;
  font-family: inherit;
  max-width: 760px; margin: 0 auto;
}
/* Geräte-Körper (erstes Rechteck jeder Gruppe) */
.netz-device > rect:first-of-type {
  fill: var(--bg-soft); stroke: var(--line); stroke-width: 2.5;
}
.netz-screen {
  fill: color-mix(in srgb, var(--brand) 12%, transparent);
  stroke: color-mix(in srgb, var(--brand) 35%, transparent);
  stroke-width: 1.5;
}
.netz-bar { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.netz-row { stroke: color-mix(in srgb, var(--fg-muted) 55%, transparent); stroke-width: 4; stroke-linecap: round; }
.netz-rowG { stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.netz-stand { fill: var(--bg-soft); stroke: var(--line); stroke-width: 2.5; }
.netz-score { fill: var(--brand); font-weight: 800; font-size: 24px; }
.netz-tscore { fill: var(--brand); font-weight: 800; font-size: 24px; }
.netz-tscoreM { fill: var(--fg-muted); font-weight: 700; font-size: 22px; }
.netz-ok { fill: var(--brand); }
.netz-okmark { stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Hotspot + Funkwellen */
.netz-hotspot rect { fill: var(--brand); }
.netz-led { fill: #ffd966; }
.netz-signal path { stroke: #3aa0ff; }
.netz-signal path:nth-child(1) { opacity: .9; }
.netz-signal path:nth-child(2) { opacity: .55; }
.netz-signal path:nth-child(3) { opacity: .3; }
/* Verbindungen + wandernde Datenpunkte */
.netz-links line {
  stroke: color-mix(in srgb, var(--brand) 45%, transparent);
  stroke-dasharray: 2 9;
}
.netz-dot { fill: #ffd966; }
/* Zweig zur oeffentlichen Webansicht: Internet-Wolke, Weg, Globus.
   Die vorhandenen Regeln greifen nur auf <line>/<path>, daher eigene. */
.netz-cloud { fill: color-mix(in srgb, var(--brand) 16%, #ffffff); }
.netz-web path, .netz-web line {
  stroke: color-mix(in srgb, var(--brand) 45%, transparent);
  fill: none;
}
.netz-globe circle, .netz-globe ellipse, .netz-globe line {
  stroke: #3aa0ff; fill: none; stroke-width: 2.5;
}
/* Beschriftungen */
.netz-name { fill: var(--fg); font-weight: 700; font-size: 19px; }
.netz-sub { fill: var(--fg-muted); font-size: 15px; }

/* Pre-Release-Hinweis (Startseite, direkt unter dem Header).
   Die Klassen heissen weiterhin `beta-banner*` — ein Umbenennen ueber
   HTML, CSS und JS hinweg brachte hier nichts ausser der Gelegenheit,
   eine Stelle zu vergessen. Gesprochen wird von Pre-Release. */
.beta-banner {
  background: color-mix(in srgb, #ffd966 22%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, #ffd966 45%, var(--line));
}
/* Textfluss statt Flexzeile.
   Als Flexzeile war der Knopf ein eigenes Element in der Reihe: Passte er
   nicht mehr daneben, rutschte er in eine zweite Zeile und das Banner wurde
   doppelt so hoch. Jetzt schwimmt er rechts, und der Text laeuft links an ihm
   vorbei und darunter weiter — das Banner bleibt so flach, wie der Text es
   zulaesst. */
.beta-banner__inner {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* Die Schwimmer aus dem Fluss nehmen, sonst ragen sie unten heraus. */
.beta-banner__inner::after {
  content: "";
  display: block;
  clear: both;
}
/* Die Marke links, der Text rechts daneben — mit einer durchgehenden Kante.
   Der Schwimmer allein reichte dafuer nicht: Der Text lief um ihn herum, die
   ersten Zeilen begannen rechts von ihm, die letzte sprang unter ihn an den
   linken Rand. „Feedback willkommen!" stand dadurch versetzt zum Rest. Den
   Rest erledigt `.beta-banner__text` (siehe dort). */
.beta-banner__tag {
  float: left;
  margin: 1px 10px 0 0;
  background: #f5b73a;
  color: #2a1d00;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .3px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
/* Der Text als eigener Block NEBEN der Marke, nicht um sie herum.
   `overflow: hidden` ist hier kein Abschneiden, sondern der Kniff: Es macht
   aus dem Text einen eigenen Formatierungskontext, und so einer stellt sich
   neben einen Schwimmer, statt sich um ihn zu legen. Jede Zeile beginnt
   dadurch an derselben Kante — der rechten Seite der Marke. */
.beta-banner__text {
  display: block;
  overflow: hidden;
  color: var(--fg);
  font-size: 16px;
}
.beta-banner__cta {
  float: right;
  margin: 0 0 6px 16px;
  background: #f5b73a;
  color: #2a1d00;
  font-weight: 800;
  padding: 7px 16px;
}
/* Auf schmalen Schirmen taugt der Textfluss nicht: Neben dem Knopf blieben
   drei Woerter je Zeile. Dann untereinander, der Knopf ueber die volle
   Breite — dort ist Hoehe ohnehin billiger als Gedraengel. */
@media (max-width: 640px) {
  /* Nebeneinander bleiben zwei Woerter je Zeile uebrig. Also die Marke
     darueber und der Text mit voller Breite darunter. */
  .beta-banner__tag { float: none; display: inline-block; margin-bottom: 8px; }
  .beta-banner__cta {
    float: none;
    display: block;
    margin: 10px 0 0;
    text-align: center;
  }
}
.beta-banner__cta:hover {
  background: #ffc94f;
  text-decoration: none;
  transform: translateY(-1px);
}


.netz-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center}
.netz-text .check span{color:var(--muted)}
.netz-hinweis{margin:16px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:950px){.netz-grid{grid-template-columns:1fr}}
@media(max-width:600px){.netz-card{padding:10px 6px;border-radius:16px}}

/* ── Schaubild: Verband und Vereine (Preise) ─────────────────────────────── */
.vb-schaubild{margin-top:26px;background:#fff;border-radius:22px;padding:26px 24px;color:var(--ink)}
.vb-ebene{display:flex;justify-content:center}
.vb-verband{background:var(--navy);color:#fff;border-radius:16px;padding:16px 26px;text-align:center;min-width:min(100%,360px)}
.vb-kicker{font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.vb-titel{font-size:22px;font-weight:950;margin:4px 0 2px}
.vb-sub{font-size:13px;color:#c9d6e0}
.vb-pfeil{display:flex;flex-direction:column;align-items:center;margin:4px 0}
.vb-pfeil::before{content:"";width:3px;height:22px;background:var(--navy);opacity:.35}
.vb-pfeil span{font-size:12px;font-weight:900;color:var(--muted);background:#f1f4f7;padding:3px 10px;border-radius:999px;margin:4px 0}
.vb-pfeil::after{content:"";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:10px solid var(--navy);opacity:.35}
.vb-vereine{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;padding-top:18px}
.vb-vereine::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:3px;background:var(--navy);opacity:.2;border-radius:2px}
.vb-verein{background:#f8fafc;border:1px solid var(--line);border-radius:14px;padding:14px 14px 12px;position:relative}
.vb-verein::before{content:"";position:absolute;top:-18px;left:50%;width:3px;height:18px;background:var(--navy);opacity:.2}
.vb-kopf{font-weight:900;display:flex;align-items:center;gap:8px;font-size:15px}
.vb-punkt{width:12px;height:12px;border-radius:50%;background:var(--vb);flex:none}
.vb-verein ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.vb-verein li::before{content:"✓ ";color:var(--green);font-weight:900}
.vb-tarif{margin-top:10px;display:inline-block;font-size:11px;font-weight:900;color:var(--navy);background:#fff4d6;border:1px solid #f5c542;border-radius:999px;padding:3px 9px}
.vb-mehr{border-style:dashed;background:#fff}
.vb-fuss{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
@media(max-width:780px){.vb-vereine{grid-template-columns:repeat(2,1fr)}.vb-vereine::before{left:25%;right:25%}}
@media(max-width:600px){.vb-schaubild{padding:16px 14px;border-radius:16px}.vb-vereine{grid-template-columns:1fr 1fr;gap:8px}.vb-verein{padding:10px}.vb-titel{font-size:18px}}

/* Schaubilder im Vergroesserungsfenster: breit genug zum Lesen, seitlich
   wisch- und zoombar. Auf dem Handy zeigt ein kleiner Hinweis, dass man
   tippen kann. */
@media(max-width:780px){
  [data-schaubild]{cursor:zoom-in;position:relative}
  [data-schaubild]::after{content:"⤢ Zum Vergrößern tippen";position:absolute;right:10px;bottom:8px;font-size:11px;font-weight:800;color:var(--navy);background:#fff4d6;border:1px solid #f5c542;border-radius:999px;padding:2px 8px;pointer-events:none}
  .vb-schaubild[data-schaubild]::after{bottom:auto;top:8px}
}
.bildbox.schaubild .bildbox-rolle{align-items:flex-start;padding:60px 12px 24px}
.bildbox-klon{flex:none;width:960px;max-width:none;background:#fff;border-radius:14px;padding:10px}
.bildbox-klon .netz-card{padding:12px}
.bildbox-klon .vb-schaubild{margin:0}
.bildbox-klon .vb-vereine{grid-template-columns:repeat(4,1fr)!important}
.bildbox-klon .vb-vereine::before{left:12.5%!important;right:12.5%!important}
.bildbox-klon [data-schaubild]::after{display:none}

/* Handy-Bilder im <picture>: Die <source> traegt width/height (gegen
   Springen beim Laden). Ohne height:auto bliebe die Hoehe 1100 px stehen,
   waehrend die Breite schrumpft — das Bild wurde schmal gequetscht. */
picture img{height:auto}

/* ── Fusszeile in Spalten ─────────────────────────────────────────────────
   Bisher standen dort nur Anleitung, Live-Ansicht, Kontakt und Rechtliches.
   Wer unten ankam, fand weder Preise noch FAQ noch den Download. */
footer .foot{align-items:flex-start}
footer .foot-spalten{display:grid;grid-template-columns:repeat(4,auto);gap:8px 40px}
footer .foot-spalten div{display:grid;gap:6px;align-content:start;margin:0}
footer .foot-spalten b{color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
footer .foot-spalten a{color:inherit;text-decoration:none}
footer .foot-spalten a:hover{color:var(--yellow)}
@media(max-width:780px){
  footer .foot{display:block}
  footer .foot-spalten{grid-template-columns:1fr 1fr;gap:20px 20px;margin-top:18px}
  footer .foot-spalten a{padding:4px 0}
}

/* Preise: Ersparnis der Jahreszahlung gegenueber zwoelf Monatsraten. */
.spar{display:inline-block;margin-left:4px;background:#e6f5e8;color:#23722c;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:900;white-space:nowrap}

/* Download: Voraussetzung, Stand und der Hinweis zur Windows-Abfrage. */
.download-card .dl-fakten{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--ink)}
.download-card .dl-fakten span{display:block;font-weight:400;color:var(--muted)}
.download-card .dl-hinweis{margin:0 0 14px;font-size:12.5px;line-height:1.45}

/* Grossturniere (Funktionen): Schlusszeile unter den Kacheln. */
.gross-fuss{margin:18px 0 0;color:#c9d6e0;font-size:14px}
.dark .card{color:var(--ink)}

/* ── Schalter: Pre-Release vorbei ─────────────────────────────────────────
   Das Banner, die Schilder „In Arbeit" und die dazugehoerigen Saetze
   (Klasse .vorab) stehen auf vielen Seiten. Sie verschwinden ueberall auf
   einmal, sobald die folgende Regel gilt — dazu nur die beiden
   Kommentarzeichen um sie herum entfernen. Danach einmal
   `python scripts/website_v2_abgleich.py` laufen lassen: Es nimmt die
   Vorab-Frage auch aus den strukturierten Daten der FAQ. */
/* VORAB-AUS .vorab,.prerelease,.wip,.wip-inline{display:none!important} */

/* ── Textseiten: Anleitung, Impressum, Datenschutz, AGB, Fehlerseite ──────
   Sie liefen bisher mit dem Stylesheet der alten Website (styles.css) und
   einer Huelle darueber (v2-shell.css). Jetzt tragen sie dieselben Farben,
   Schriften und Karten wie der Rest — aus dieser einen Datei. Die
   Formularseiten (Abo, Passwort, Konto loeschen, Bestaetigungen) bleiben
   bei styles.css + v2-shell.css: Ihre Skripte haengen an dessen Klassen. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:999;padding:10px 16px;background:var(--blue);color:#fff;border-radius:0 0 10px 10px;font-weight:800;transition:top .15s}
.skip-link:focus{top:0}
.textseite{padding:28px 0 52px}
/* Die Schaubilder der Anleitung sind mit den Farbnamen der alten Seite
   gezeichnet — hier auf die neue Palette gelegt. */
.legal{--brand:var(--blue);--brand-ink:#fff;--brand-soft:#2569a6;--bg:var(--cream);--bg-soft:#f8fafc;--bg-card:#fff;--fg:var(--ink);--fg-muted:var(--muted);--radius:16px;
  max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px #102a430b;padding:36px 40px}
.legal h1{font-size:clamp(30px,4.4vw,46px);line-height:1.05;letter-spacing:-.04em;margin:0 0 8px;color:var(--navy)}
.legal .meta{color:var(--muted);font-size:16px;margin:0 0 28px}
.legal h2{font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--navy);margin:34px 0 10px;padding-top:20px;border-top:1px solid var(--line);scroll-margin-top:100px}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal h3{font-size:17px;margin:22px 0 6px;scroll-margin-top:100px}
.legal p{margin:0 0 12px}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:4px}
.legal a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal blockquote{margin:12px 0;padding:12px 16px;border-left:4px solid var(--yellow);background:var(--cream);border-radius:0 12px 12px 0}
.legal blockquote p{margin:0}
.legal table{margin:12px 0 20px;box-shadow:none;border:1px solid var(--line);border-radius:12px}
.legal th,.legal td{text-align:left!important;padding:10px 12px;font-size:14px;vertical-align:top}
.legal th{background:#eef3f8;color:var(--navy)}
.legal code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;padding:2px 6px;border-radius:5px;background:#f1f5f9;border:1px solid var(--line)}
.legal figure{margin:0}
/* Anleitung: Einstieg nach Rolle, nummerierte Aufbauten, Schaubilder. */
.rollen{display:grid;gap:14px;margin:22px 0 34px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rolle{padding:18px 18px 14px;border-radius:16px;border:1px solid var(--line);background:#fbfcfd;border-top:5px solid var(--blue)}
.rolle:nth-child(1){border-top-color:var(--orange)}
.rolle:nth-child(3){border-top-color:var(--green)}
.rolle-icon{font-size:26px;line-height:1;display:block;margin-bottom:8px}
.legal .rolle h3{margin:0 0 4px;font-size:17px}
.legal .rolle h3 a{color:var(--navy);text-decoration:none}
.rolle > p{margin:0 0 10px;color:var(--muted);font-size:14px}
.legal .rolle ol{margin:0;padding-left:20px;font-size:14px}
.rolle ol li{margin:3px 0}
.legal h3.konfig{display:flex;align-items:center;gap:12px;margin:34px 0 12px;padding:12px 16px;border-left:5px solid var(--blue);border-radius:0 12px 12px 0;background:#f1f6fb;font-size:18px;line-height:1.3}
.konfig-nr{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-size:16px;font-weight:900}
.legal .schaubild{margin:20px 0;padding:14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
.schaubild svg{display:block;width:100%;height:auto}
.schaubild figcaption{margin-top:10px;color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:600px){
  .textseite{padding:14px 0 34px}
  .legal{padding:20px 17px;border-radius:16px}
  .legal h2{font-size:19px;margin-top:26px}
  .legal h3.konfig{font-size:16px;padding:10px 12px}
  .legal table{display:block;overflow-x:auto;font-size:12px}
}
/* Fehlerseite */
.nf-card{max-width:560px;margin:28px auto;padding:32px 28px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px #102a430b;text-align:center}
.nf-card .mark{font-size:46px;line-height:1;margin-bottom:10px}
.nf-card h1{margin:0 0 8px;font-size:26px;letter-spacing:-.03em;color:var(--navy)}
.nf-card p{color:var(--muted);margin:0 0 16px}
.nf-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn.rand{border-color:var(--navy);color:var(--navy)}
.nf-more{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:16px;justify-content:center;flex-wrap:wrap;font-size:14px}
.nf-more a{color:var(--blue);font-weight:800}

/* ── Anleitung: Inhaltsverzeichnis mit Suche (v2.js, Abschnitt 6) ─────────
   Die Anleitung hat ueber vierzig Kapitel — auf dem Handy fast hundert
   Bildschirme. Breit steht das Verzeichnis links und laeuft mit; schmal ist
   es ein Knopf unter der Kopfzeile, der Suche und Kapitel aufklappt. */
.anl-nav[hidden]{display:none}
.anl-layout.mit-nav{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px;align-items:start}
.anl-layout.mit-nav .legal{margin:0;max-width:none}
.anl-nav{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 10px 30px #102a430b}
.anl-knopf{display:none}
.anl-nav input{width:100%;padding:11px 13px;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.anl-nav input:focus{outline:2px solid var(--blue);outline-offset:1px}
.anl-treffer{margin:8px 3px 0;font-size:12px;color:var(--muted)}
.anl-liste{list-style:none;margin:10px 0 0;padding:0;max-height:calc(100vh - 215px);overflow:auto;position:relative;font-size:13px}
.anl-liste a{display:block;padding:6px 8px;border-radius:8px;color:var(--ink);line-height:1.3}
.anl-liste a:hover{background:#eef3f8}
.anl-liste a[aria-current]{background:var(--navy);color:#fff;font-weight:800}
.anl-fund{animation:anl-fund 2s ease-out}
@keyframes anl-fund{0%,40%{background:#fff4d6;box-shadow:0 0 0 6px #fff4d6}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
@media(max-width:1000px){
  .anl-layout.mit-nav{display:block}
  .anl-nav{top:var(--kopf,79px);z-index:15;margin:0 0 12px;padding:6px;border-radius:14px}
  .anl-knopf{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:#eef3f8;color:var(--navy);font:inherit;font-size:14px;font-weight:900;cursor:pointer}
  .anl-knopf::after{content:"▾";font-size:16px}
  .anl-nav.offen .anl-knopf::after{content:"▴"}
  .anl-feld{display:none;padding:8px 2px 2px}
  .anl-nav.offen .anl-feld{display:block}
  .anl-liste{max-height:52vh;font-size:14px}
  .anl-liste a{padding:9px 8px}
  .legal h2,.legal h3{scroll-margin-top:150px}
}
@media print{
  header,footer,.anl-nav,.daumenleiste,.nach-oben,.skip-link{display:none!important}
  body{background:#fff}
  .textseite{padding:0}
  .anl-layout.mit-nav{display:block}
  .legal{max-width:none;border:0;box-shadow:none;padding:0}
  .legal h2{break-after:avoid}
  .legal blockquote,.legal table,.legal figure{break-inside:avoid}
}

/* ── Ablauf im Zeitraffer (Startseite; v2.js, Abschnitt 7) ────────────────
   Die vier Kacheln Anmeldung · Auslosung · Ergebnisse · Live-Anzeige werden
   zur Schrittleiste: Unter ihnen wechselt das Bild zum jeweiligen Schritt,
   von selbst alle sechs Sekunden oder per Klick. Ohne Skript steht das
   erste Bild; wer weniger Bewegung wuenscht (Systemeinstellung), bekommt
   keinen selbsttaetigen Wechsel. */
.ablauf{max-width:980px;margin:22px auto 0;background:var(--navy);border-radius:24px;padding:14px;box-shadow:var(--shadow)}
.ablauf-buehne{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#0a2134}
.ablauf-bild{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.ablauf-bild.aktiv{opacity:1;visibility:visible}
.ablauf-bild img{flex:1 1 0;min-height:0;width:100%;height:100%;object-fit:contain}
.ablauf-bild figcaption{flex:none;padding:10px 14px;color:#dfe8ef;font-size:14px;line-height:1.4}
.ablauf-bild figcaption b{color:var(--yellow);margin-right:6px;white-space:nowrap}
.ablauf-leiste{display:none;align-items:center;justify-content:center;gap:6px;margin-top:8px}
.ablauf-an .ablauf-leiste{display:flex}
.ablauf-pause{width:34px;height:34px;border-radius:50%;border:1px solid #ffffff55;background:transparent;color:#fff;font-size:11px;cursor:pointer;margin-right:6px}
.ablauf-punkte{display:flex}
.ablauf-punkte button{width:30px;height:30px;border:0;background:none;padding:0;cursor:pointer;position:relative}
.ablauf-punkte button::before{content:"";position:absolute;left:10px;top:10px;width:10px;height:10px;border-radius:50%;background:#ffffff55}
.ablauf-punkte button[aria-current]::before{background:var(--yellow)}
.ablauf-an .ablauf-karte{cursor:pointer;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .2s,border-color .2s}
.ablauf-an .ablauf-karte.aktiv{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy),0 10px 30px #102a431a}
.ablauf-an .ablauf-karte.aktiv::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--orange);transform-origin:left center;animation:ablauf-lauf 6s linear forwards;animation-play-state:paused}
.ablauf-sichtbar:not(.ablauf-haelt) .ablauf-karte.aktiv::after{animation-play-state:running}
@media(hover:hover){.ablauf-sichtbar.ablauf-an:hover .ablauf-karte.aktiv::after{animation-play-state:paused}}
@keyframes ablauf-lauf{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
  .ablauf-an .ablauf-karte.aktiv::after{animation:none}
  .ablauf-bild{transition:none}
  .ablauf-pause{display:none}
}
@media(max-width:600px){
  .ablauf{padding:8px;border-radius:16px;margin-top:12px}
  .ablauf-buehne{aspect-ratio:4/3.6;border-radius:10px}
  .ablauf-bild figcaption{font-size:13px;padding:8px 8px 4px}
}
/* Englische Seiten: der Hinweis an den Schaubildern. */
@media(max-width:780px){html[lang="en"] [data-schaubild]::after{content:"⤢ Tap to enlarge"}}

/* Preise: Steuerhinweis direkt unter den Tarifkarten. */
.preis-hinweis{margin:14px 4px 0;color:var(--muted);font-size:13px;text-align:center}

/* Kopfzeile: Menuepunkte bleiben einzeilig („Tournament day" brach um). */
.navlinks a{white-space:nowrap}

/* Turniersysteme: Abschnitt Supermêlée — Schlusszeile im hellen Kasten. */
.notice .sm-fuss{margin:14px 0 0;font-size:14px}
#supermelee{scroll-margin-top:90px}

/* ── Tarifkacheln: unter der Maus groesser und mit Lichtkranz ─────────────
   Gewuenscht (04.10.2026): „Beim onmouseover soll die jeweilige Kachel
   vergroessert werden und einen Halo bekommen." Nur mit echter Maus
   (hover:hover) — auf dem Handy bliebe die Kachel nach dem Antippen sonst
   vergroessert stehen. Wer weniger Bewegung wuenscht, bekommt nur den Kranz. */
.price{transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){
  .price:hover{transform:scale(1.04);z-index:2;box-shadow:0 0 0 4px rgba(245,197,66,.55),0 0 34px 6px rgba(245,197,66,.45),0 22px 60px rgba(16,42,67,.18)}
  .price.featured:hover{transform:scale(1.04);box-shadow:0 0 0 4px rgba(242,107,56,.35),0 0 34px 6px rgba(242,107,56,.4),0 22px 60px rgba(16,42,67,.18)}
}
@media(prefers-reduced-motion:reduce){.price{transition:none}.price:hover,.price.featured:hover{transform:none}}

/* Dieselbe Wirkung fuer die Kacheln in den Viererrastern (Turniersysteme,
   Funktionen, Startseite) — gewuenscht (04.10.2026): „Die Kacheln sollen
   denselben onmouseover-Effekt bekommen wie die Tarif-Kacheln." */
.grid4 > .card{transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover){
  .grid4 > .card:hover{transform:scale(1.04);z-index:2;box-shadow:0 0 0 4px rgba(245,197,66,.55),0 0 34px 6px rgba(245,197,66,.45),0 22px 60px rgba(16,42,67,.18)}
}
@media(prefers-reduced-motion:reduce){.grid4 > .card{transition:none}.grid4 > .card:hover{transform:none}}

/* ── Lesbarkeit und Tippflaechen auf dem Smartphone ───────────────────────
   Gemessen (04.10.2026, 390 px): 17 Textarten unter 12 px und 16 Arten von
   Tippzielen unter 40 px Hoehe. Schrift jetzt mindestens 12 px (einzige
   Ausnahme: das Schild im Pre-Release-Banner, das ausdruecklich klein sein
   soll), Tippziele mindestens 40 px — wo das Aussehen bleiben soll, waechst
   nur die Flaeche (::after), nicht der Knopf. */
/* FAQ: Die ganze Zeile der Frage klappt auf, nicht nur ihre Textzeile. */
.faq details{padding:0}
.faq summary{padding:17px 20px}
.faq details > p{margin:0;padding:0 20px 17px}
@media(max-width:600px){
  .faq details{padding:0}
  .faq summary{padding:13px 14px}
  .faq details > p{padding:0 14px 13px}
  footer .foot-spalten b,.wip,.wip-inline,.module .kicker,.device-note,.real-caption,.price .badge,.spar,.vb-kicker,.vb-tarif,.gross-badge{font-size:12px}
  .prerelease-tag{font-size:10px}
  .navcta{font-size:12px;min-height:40px}
  footer .foot-spalten a{padding:10px 0}
  footer .foot-spalten div{gap:0}
  .contact-card a:not(.btn){display:inline-block;padding:10px 0}
  .textlink{padding:10px 0;margin-top:4px}
  .sprungleiste a{padding:10px 13px}
  .ablauf-pause{width:40px;height:40px}
  .ablauf-punkte button{width:38px;height:40px}
  .ablauf-punkte button::before{left:14px;top:15px}
  .prerelease .prerelease-cta,.campaign-hit{position:relative}
  .prerelease .prerelease-cta::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
  .campaign-hit{position:absolute}
  .campaign-hit::after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
}
@media(max-width:400px){.navcta{font-size:12px}}

/* Verweise im Fliesstext der Geraete-Abschnitte (Fernseher: APK, Anleitung,
   bouleboy.de/tafel) — sonst sind sie vom Text nicht zu unterscheiden. */
.download-card p a,.poster-section .split p a{text-decoration:underline;text-underline-offset:2px;font-weight:700}
.download-card p a{color:var(--blue)}

/* ── Startseite am Handy: weniger auf einmal (07.10.2026) ────────────────
 * Gewuenscht: „Die Fuelle an Informationen ist zu viel fuer eine
 * Smartphone-Ansicht.“ Am Rechner aendert sich nichts: Die Klapper
 * (details.klapp) bleiben offen, ihre Zeile sieht aus wie der Kopf. Am
 * Handy klappt v2.js sie zu — man sieht Dachzeile und Ueberschrift, der
 * Rest kommt auf Tipp. Dazu: zwei statt vier Haekchen, kein Laufband, drei
 * Sinnbilder statt der Netzgrafik, drei Systeme statt sechzehn, die
 * Bildschirmfotos als Wischreihe, vier Links statt fuenfzehn im Fuss. */
.klapp>summary{list-style:none;cursor:default}
.klapp>summary::-webkit-details-marker{display:none}
.klapp>summary .kicker{display:block}
.klapp-zeile,.hv-kurz,.netz-kurz,.pill-mehr,.foot-kurz,.foot-alle>summary{display:none}
@media(max-width:600px){
  body[data-start] .band{display:none}
  .microproof .mp-mehr{display:none}
  .microproof{grid-template-columns:1fr 1fr}
  .hv-lang{display:none}.hv-kurz{display:inline}
  .klapp>summary{cursor:pointer;position:relative;padding-right:36px;-webkit-tap-highlight-color:transparent}
  .klapp>summary::after{content:"";position:absolute;right:8px;top:18px;width:12px;height:12px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:rotate(45deg);opacity:.65;transition:transform .2s}
  .klapp[open]>summary::after{transform:rotate(-135deg);top:26px}
  .klapp>summary.head{margin-bottom:0}
  .klapp[open]>summary.head{margin-bottom:20px}
  .klapp:not([open])>summary.head p{display:none}
  .klapp>summary.head h2{margin-bottom:6px}
  .klapp-zeile{display:block;font-weight:900;padding:12px 0;border-top:1px solid #ffffff22;margin-top:6px}
  /* Nur wo die drei Sinnbilder davorstehen — auf den anderen Seiten bleibt
     die Netzgrafik, wie sie ist. */
  .netz-kurz+.netz-card{display:none}
  .netz-kurz{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:14px 8px;border-radius:16px;background:#fff;border:1px solid var(--line);margin-bottom:14px}
  .netz-kurz>span{display:grid;justify-items:center;text-align:center;font-size:28px;line-height:1;flex:1 1 0}
  .netz-kurz b{font-size:13px;margin-top:6px;color:var(--ink)}
  .netz-kurz i{font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
  .netz-kurz .pfeil{flex:0 0 auto;font-size:20px;color:var(--muted)}
  body[data-start] .netz-hinweis{display:none}
  body[data-start] .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -17px;padding:4px 17px 14px;scrollbar-width:none}
  body[data-start] .gallery::-webkit-scrollbar{display:none}
  body[data-start] .gallery .shot{flex:0 0 84%;scroll-snap-align:center}
  body[data-start] .real-shot .body{min-height:0}
  body[data-start] .pills .pill:nth-child(n+4):not(.pill-mehr){display:none}
  .pill-mehr{display:inline-block;background:transparent;color:#fff;border:2px solid #ffffff66;text-decoration:none}
  .foot-kurz{display:flex;flex-wrap:wrap;gap:4px 22px;margin:12px 0 6px;font-size:15px;font-weight:800}
  .foot-kurz a{color:#fff;text-decoration:none;padding:8px 0}
  .foot-alle>summary{display:block;cursor:pointer;color:#b8c7d2;padding:10px 0;font-size:13px;list-style:none}
  .foot-alle>summary::-webkit-details-marker{display:none}
  .foot-alle>summary::before{content:"+ "}
  .foot-alle[open]>summary::before{content:"– "}
  .foot-alle>summary::after{display:none}
  /* Der Vorab-Hinweis in EINER Zeile (Vorschlag 4). */
  .prerelease-kurz{white-space:nowrap}
}

/* Kachel „Android-App“ (Download-Seite): am Smartphone ohne den Absatz zum
 * Fernseher (gewuenscht 07.10.2026). Wer die Seite am Handy oeffnet, will
 * die App aufs Handy — die APK fuer Fire TV und der Weg ueber den Browser
 * des Fernsehers sind dort drei Zeilen, die niemand braucht. Am Rechner
 * bleibt der Absatz. */
@media(max-width:600px){.dl-tv{display:none}}