/* Anpfiff1, Design 2026: aus der Gestaltung des Spiels gebaut (Store-Bilder,
   Hauptmenue, Tabellenbildschirm). Kein Neon, keine Verlaeufe.
   Farben aus den Store-Bildern gemessen: Kopfband #1a482b, Goldlinie #f2ce6b,
   Kommentar-Kasten #0d2614, Tafel #212529, Knopf #2e593d, Sprechblase #f8f5ea. */
@font-face{font-family:Unifont;font-display:swap;src:url(/assets/fonts/unifont-sub.woff2) format("woff2")}
:root{
  --band:#1a482b;--gold:#f2ce6b;--kasten:#0d2614;--panel:#212529;
  --knopf:#2e593d;--knopf-hell:#3c8a55;--papier:#f8f5ea;--tinte:#1a2a20;
  --grund:#163a24;--hell:#eef3ea;--dim:#c4d4c7;--seite:250px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--grund);color:var(--hell);font:17px/1.65 Inter,system-ui,sans-serif}
.px,.px *{font-family:Unifont,"Courier New",monospace;letter-spacing:.03em}
a{color:var(--gold)}
img{max-width:100%}
.zum-inhalt{position:absolute;left:-999px;top:0;background:var(--gold);color:#000;padding:8px 14px;z-index:99}
.zum-inhalt:focus{left:8px;top:8px}

/* ---------- Seitenleiste ---------- */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--seite);background:var(--kasten);border-right:3px solid var(--gold);padding:14px 0 10px;overflow:auto;z-index:40;display:flex;flex-direction:column;font-family:Unifont,monospace}
.sidebar-logo a{display:flex;align-items:center;gap:10px;padding:0 20px 16px;border-bottom:2px solid #1f3f2b;color:#fff;text-decoration:none;font-size:24px}
.sidebar-logo img{height:34px;width:auto}
.nav-group-label{display:block;margin:14px 20px 4px;font-size:13px;color:var(--gold);letter-spacing:.12em}
.sidebar-nav{list-style:none;margin:0;padding:0}
.sidebar-nav a{display:block;color:var(--hell);text-decoration:none;padding:5px 20px;font-size:16px;border-left:5px solid transparent}
.sidebar-nav a:hover{background:#15301f}
.sidebar-nav a.active{background:var(--knopf);border-left-color:var(--gold);color:#fff}
.lang-switcher{display:flex;gap:6px;padding:8px 20px}
.lang-btn{flex:1;padding:7px 0;background:var(--panel);color:var(--hell);border:2px solid #1f3f2b;font:15px Unifont,monospace;cursor:pointer}
.lang-btn.active{background:var(--knopf-hell);color:#fff}
.sidebar-bottom{margin-top:auto;padding:12px 20px 0;font-size:14px}
.sidebar-legal{display:flex;gap:16px}
.sidebar-legal a{color:var(--dim)}
.mobile-topbar{display:none}
.sidebar-overlay{display:none}
.rahmen{margin-left:var(--seite)}

/* ---------- WM-Band ---------- */
#wm-edition-banner{margin-left:var(--seite);background:var(--gold);color:#1a2a20;padding:9px 16px;font-size:15px;display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;font-family:Unifont,monospace}
#wm-edition-banner a{color:#1a2a20;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
#wm-edition-banner a:last-child{text-decoration:underline;font-weight:700}
#wm-edition-banner img{width:22px;height:22px}

/* ---------- Kopfband ---------- */
.kopf{background:var(--band);border:3px solid var(--gold);border-top:0;padding:26px 5vw;display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.kopf h1{margin:0;font-size:clamp(44px,6.5vw,80px);line-height:1;color:#fff;font-weight:400}
.kopf .unter{color:var(--gold);font-size:clamp(14px,1.7vw,20px);margin:12px 0 0}
.sprech{display:flex;align-items:center}
.blase{background:var(--papier);color:var(--tinte);padding:15px 24px;border-radius:12px;font-size:18px;line-height:1.35;text-align:center;position:relative;margin-right:22px}
.blase:after{content:"";position:absolute;right:-15px;top:50%;margin-top:-13px;border:13px solid transparent;border-left:15px solid var(--papier);border-right:0}
.sprech img{height:108px;width:auto}

main{max-width:1180px;margin:0 auto;padding:44px 28px 40px}
section{scroll-margin-top:70px}
h2.abschnitt{font-size:clamp(28px,3.6vw,42px);margin:82px 0 28px;color:#fff;display:flex;align-items:center;gap:18px;font-weight:400}
h2.abschnitt:after{content:"";flex:1;height:3px;background:var(--gold);opacity:.8}
#hero h2.abschnitt{margin-top:0}

/* ---------- Fenster, Knoepfe, Papier ---------- */
.fenster{border:3px solid var(--gold);background:#000;margin:0}
.fenster .titel{background:var(--band);color:var(--gold);padding:7px 14px;font-size:14px;display:flex;justify-content:space-between;gap:12px;border-bottom:3px solid var(--gold)}
.fenster img{display:block;width:100%;height:auto}
.knopf{display:block;background:var(--knopf);color:#fff;text-decoration:none;text-align:center;padding:13px 14px;font-size:21px;border:2px solid #1f3f2b;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);font-family:Unifont,monospace}
.knopf:hover,.knopf:focus-visible{background:var(--knopf-hell)}
.knopf.erst{background:var(--knopf-hell);outline:2px solid var(--gold);outline-offset:2px}
.knopf small{display:block;font:14px Inter,system-ui,sans-serif;letter-spacing:0;color:#d3e4d6;margin-top:2px}
.papier{background:var(--papier);color:var(--tinte);padding:26px 28px;border-left:8px solid var(--band);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.papier h3{margin:0 0 10px;font-size:25px;color:var(--band);font-weight:400;font-family:Unifont,monospace}
.papier p,.papier li,.papier .karte-text{font-size:17px}
.papier p{margin:0 0 10px}
.papier ul{margin:0;padding-left:20px}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:minmax(300px,410px) 1fr;gap:34px;align-items:start}
.tafel{background:var(--panel);border:2px solid #c9ccc6;padding:22px}
.tafel h2{margin:0 0 4px;font-size:22px;text-align:center;color:#fff;font-weight:400}
.tafel>p{margin:0 0 16px;text-align:center;color:#aab4ac;font-size:14px}
.menue{display:grid;gap:11px}
.lead{margin:22px 0 0;color:#dbe7dc;font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.chips li{background:var(--kasten);border:2px solid #1f3f2b;padding:5px 12px;font-size:15px;color:var(--gold);font-family:Unifont,monospace}

/* ---------- Trailer ---------- */
.trailer-halter{position:relative;aspect-ratio:16/9;background:#000}
.trailer-halter img,.trailer-halter iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.trailer-start{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.55));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-family:Unifont,monospace}
.trailer-start .zeichen{font-size:38px;background:var(--knopf-hell);border:3px solid var(--gold);padding:10px 26px}
.trailer-start .wort{font-size:24px}
.trailer-start .hinweis{font:13px Inter,sans-serif;color:#dfe8e0;max-width:30ch}
.mehr{margin:14px 0 0}

/* ---------- Features ---------- */
.zeile{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center;margin-bottom:44px}
.zeile.rev{grid-template-columns:1fr 1.25fr}
.zeile.rev .fenster{order:2}
.unterzeile{margin:-10px 0 34px;color:var(--dim)}

/* ---------- Screenshots ---------- */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.screenshot-item{cursor:zoom-in;border:3px solid var(--gold);background:#000;transition:transform .12s}
.screenshot-item:hover{transform:translateY(-3px)}
.screenshot-item img{display:block;width:100%;height:auto}

/* ---------- Download ---------- */
.dl{display:grid;gap:14px}
.dl-karte{display:grid;grid-template-columns:230px 1fr 210px;gap:20px;align-items:center;background:var(--kasten);border:2px solid #1f3f2b;padding:16px 20px}
.dl-karte:hover{border-color:var(--gold)}
.dl-karte h3{margin:0;font-weight:400;font-size:24px;color:#fff}
.dl-karte p{margin:0;color:#d6e2d6;font-size:16px}
.dl-karte .knopf{font-size:18px;padding:10px}

/* ---------- Bestenliste ---------- */
.tabs{display:flex;gap:6px;margin-bottom:-3px;position:relative;z-index:1}
.tabs span{background:var(--kasten);color:#b9c8bb;padding:9px 26px;border:2px solid #1f3f2b;border-bottom:0;font-size:18px}
.tabs span.on{background:var(--knopf-hell);color:#fff}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.drei .papier{margin:0}

/* ---------- Ueber das Spiel ---------- */
.lead-text p{margin:0 0 12px;color:#dbe7dc;font-size:18px;max-width:70ch}
.drei.karten{margin-top:24px}

/* ---------- Weg ---------- */
.weg-lead{margin-top:0;color:#dbe7dc;font-size:18px;max-width:70ch}
.weg{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.weg li{display:grid;grid-template-columns:200px 1fr;gap:18px;background:var(--kasten);border:2px solid #143220;padding:12px 18px}
.weg-time{color:var(--gold);font-size:18px;font-family:Unifont,monospace}
.weg-text{color:#d6e2d6;font-size:16px}
.weg-stimmen-titel{font-size:26px;font-weight:400;margin:44px 0 0;color:#fff;font-family:Unifont,monospace}
.stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.stimmen figure{margin:0}
.stimmen blockquote{margin:0}
.stimmen figcaption{margin-top:10px;font-size:14px;color:#56705e}
.weg-dank{margin-top:30px}

/* ---------- FAQ ---------- */
details{background:var(--kasten);border:2px solid #1f3f2b;margin-bottom:10px}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:13px 18px;font-size:20px;font-family:Unifont,monospace}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";flex:none;width:38px;height:38px;background:var(--knopf);display:grid;place-items:center;font-size:26px;color:#fff}
details[open] summary:before{content:"-";background:var(--knopf-hell)}
details>div{padding:0 20px 18px 72px;color:#d6e2d6}
details>div p{margin:0}
.highlight{color:#fff}

/* ---------- Fuss ---------- */
footer{margin-left:var(--seite);border-top:3px solid var(--gold);background:var(--band);padding:30px 5vw;color:#cfe0d2;font-size:15px}
footer h3{margin:0 0 12px;font-size:26px;color:#fff;font-weight:400;font-family:Unifont,monospace}
.social-icons{display:flex;gap:14px;margin-bottom:16px}
.social-icon{color:var(--gold);display:inline-grid;place-items:center;width:40px;height:40px;border:2px solid #2e6a43;background:var(--kasten)}
.social-icon:hover{background:var(--knopf)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:14px;font-family:Unifont,monospace}
.footer-links a{color:var(--gold)}
.footer-credit{color:#b9cbbd}
.footer-credit a{color:var(--gold)}
.heart{color:var(--gold)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(5,15,9,.94);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}
.lightbox.active{display:flex}
.lightbox img{max-width:100%;max-height:100%;border:3px solid var(--gold)}
.lightbox-close{position:absolute;top:14px;right:22px;font-size:34px;color:var(--gold);cursor:pointer}

/* ---------- Klaro im Spielstil ---------- */
.klaro .cookie-modal,.klaro .cookie-notice{background:var(--panel)!important;border:2px solid #c9ccc6!important;border-radius:0!important;box-shadow:none!important;z-index:2001!important;color:var(--hell)!important}
.klaro .cm-btn,.klaro .cn-buttons button{background:var(--knopf)!important;color:#fff!important;border:2px solid #1f3f2b!important;border-radius:0!important;font:16px Unifont,monospace!important;padding:.7rem 1.2rem!important;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)!important}
.klaro .cm-btn.cm-btn-success,.klaro .cn-buttons .cm-btn-success{background:var(--knopf-hell)!important;outline:2px solid var(--gold)}
.klaro .cm-btn.cm-btn-decline{background:var(--knopf)!important;color:#fff!important}
.klaro h1,.klaro h2,.klaro h3{color:var(--gold)!important;font-family:Unifont,monospace!important}
.klaro p,.klaro span,.klaro label,.klaro li{color:var(--hell)!important}
.klaro a{color:var(--gold)!important}
.klaro .cm-app-input:checked+label .slider,.klaro .cm-switch.cm-toggle-all input:checked+label{background:var(--knopf-hell)!important}

/* ---------- Schmal ---------- */
@media(max-width:1000px){
  :root{--seite:0px}
  .sidebar{transform:translateX(-100%);transition:transform .2s;width:270px}
  .sidebar.open{transform:none}
  .sidebar-overlay.active{display:block;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:35}
  .mobile-topbar{display:flex;position:sticky;top:0;z-index:30;background:var(--kasten);border-bottom:3px solid var(--gold);padding:8px 16px;align-items:center;justify-content:space-between}
  .mobile-logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:22px Unifont,monospace}
  .mobile-logo img{height:30px;width:auto}
  .mobile-menu-btn{background:var(--knopf);border:2px solid var(--gold);padding:9px 10px;cursor:pointer;display:grid;gap:5px}
  .mobile-menu-btn span{display:block;width:22px;height:3px;background:#fff}
  .hero,.zeile,.zeile.rev,.drei,.stimmen,.shots{grid-template-columns:1fr}
  .zeile.rev .fenster{order:0}
  .dl-karte,.weg li{grid-template-columns:1fr;gap:8px}
  .sprech{display:none}
  details>div{padding-left:20px}
  main{padding:30px 16px 30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ====================================================================
   Unterseiten (2026): Verbindung zu den Inhalten der alten Seiten
   ==================================================================== */
:root{--text-muted:#c9d8cc;--text-dim:#b9cbbd;--text-light:#fff;--accent-green:#f2ce6b;--accent-yellow:#f2ce6b;--accent-red:#ff8b7a;
  --card-bg:#0d2614;--card-border:#1f3f2b;--bg-deep:#163a24;--bg-mid:#0d2614;--gold:#f2ce6b}
.lang-switcher{flex-wrap:wrap}
.lang-btn{flex:1 0 26%;text-decoration:none;text-align:center;display:block}
.sidebar-legal{flex-wrap:wrap;gap:6px 14px}
#app-rahmen .highscore-header,#app-rahmen .highscore-entry{display:grid;grid-template-columns:48px minmax(100px,1.8fr) 84px 44px 40px 40px 40px 40px 80px minmax(100px,2fr) 70px;gap:6px;align-items:center}
#app-rahmen .highscore-header .header-points{text-align:right;padding-right:8px}
#app-rahmen .highscore-header .header-cup,#app-rahmen .highscore-header .header-diff{text-align:center}
#app-rahmen .entry-points{text-align:right;padding-right:8px}
#app-rahmen .entry-cup,#app-rahmen .entry-difficulty,#app-rahmen .entry-platform{text-align:center}
#app-rahmen .entry-manager,#app-rahmen .entry-team{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app-rahmen .scroll-container{overflow-x:auto}
@media(max-width:900px){#app-rahmen .highscore-header{display:none}#app-rahmen .highscore-entry{grid-template-columns:40px 1fr 70px;row-gap:2px;padding:10px 6px}#app-rahmen .entry-cup,#app-rahmen .entry-difficulty,#app-rahmen .entry-platform,#app-rahmen .entry-team{grid-column:2 / 4;text-align:left;font-size:13px}#app-rahmen .entry-cup{display:inline}}
#app-rahmen .stats-footer{display:flex;justify-content:space-around;gap:20px;padding:14px;flex-wrap:wrap}
#app-rahmen .stat-item{text-align:center}
.kopf h1{font-size:clamp(28px,4.2vw,58px)}
body.start .kopf h1{font-size:clamp(44px,6.5vw,80px)}
.recht{color:var(--tinte)}
.recht p,.recht li,.recht td,.recht th,.recht div,.recht span,.recht em{color:var(--tinte)!important}
.recht a{color:#1a6b3a!important}
.kopf>div:first-child{flex:1 1 420px;min-width:0}
.sprech{flex:none}
.kopf h1{overflow-wrap:anywhere}
.sidebar{overflow-x:hidden}
h2.abschnitt{line-height:1.3}
.papier h3,.cl-karte h3,.recht h2,.recht h3{line-height:1.3}
.cta-reihe{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 10px}
.cta-reihe .knopf{min-width:160px}

/* Rechtstexte als Papier */
.recht{font-size:17px;line-height:1.7}
.recht h1,.recht h2,.recht h3{font-family:Unifont,monospace;color:var(--band);font-weight:400;line-height:1.25}
.recht h2{font-size:26px;margin:34px 0 10px;padding-top:6px;border-top:3px solid var(--band)}
.recht h2:first-child{margin-top:0;border-top:0}
.recht h3{font-size:21px;margin:22px 0 6px}
.recht p{margin:0 0 12px}
.recht ul,.recht ol{margin:0 0 14px;padding-left:24px}
.recht li{margin-bottom:4px}
.recht a{color:#1a6b3a;text-decoration:underline}
.recht strong{color:#10281a}
.recht .info-box,.recht .warning-box{background:#ece7d3;border-left:6px solid var(--band);padding:14px 18px;margin:12px 0 18px}
.recht .warning-box{background:#f4e2c2;border-left-color:#c2883a}
.recht .info-box p:last-child,.recht .warning-box p:last-child{margin-bottom:0}
.recht .toc{background:#ece7d3;border-left:6px solid var(--gold);padding:14px 18px;margin:0 0 24px}
.recht .toc ul,.recht .toc ol{margin:6px 0 0}
.recht table{border-collapse:collapse;width:100%;margin:10px 0 18px;font-size:15px}
.recht th,.recht td{border:1px solid #c9c2a4;padding:8px 10px;text-align:left;vertical-align:top}
.recht th{background:#e3dcc0}
.recht code{background:#ece7d3;padding:1px 5px}
.recht [data-lang]{display:block}

/* Changelog */
.cl-version{margin-bottom:10px}
.cl-datum{color:var(--gold);font-size:17px;margin:-8px 0 6px}
.cl-intro{margin:0 0 18px;color:#dbe7dc;max-width:75ch}
.cl-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.cl-karte{padding:20px 22px}
.cl-karte h3{font-size:21px;margin-bottom:8px}
.cl-karte ul{padding-left:18px}
.cl-karte li{margin-bottom:6px;font-size:16px}
.cl-version h2.abschnitt{margin-top:56px;font-size:clamp(24px,3vw,34px)}

/* Bestenliste (die App-Logik der alten Seite, im Spielstil) */
#app-rahmen #app{max-width:none;padding:0;display:block;min-height:0}
#app-rahmen .title{font:400 clamp(22px,3vw,30px) Unifont,monospace;color:#fff;text-align:left;margin:0 0 4px;text-shadow:none;letter-spacing:.03em}
#app-rahmen .subtitle{color:var(--gold);font-family:Unifont,monospace;letter-spacing:.06em;margin-bottom:16px;font-size:16px;text-transform:none;text-align:left}
#app-rahmen .separator{display:none}
#app-rahmen .tab-selector{display:flex;gap:6px;margin:0 0 -3px;position:relative;z-index:1;flex-wrap:wrap;justify-content:flex-start}
#app-rahmen .tab-btn{min-width:0;height:auto;padding:9px 22px;font:18px Unifont,monospace;background:var(--kasten);color:#b9c8bb;border:2px solid #1f3f2b;border-bottom:0;border-radius:0;box-shadow:none;cursor:pointer}
#app-rahmen .tab-btn.active{background:var(--knopf-hell);color:#fff;border-color:#1f3f2b;box-shadow:none}
#app-rahmen .tab-btn:hover{background:var(--knopf)}
#app-rahmen .highscore-panel{background:#0f1214;border:2px solid #c9ccc6;border-radius:0;padding:18px;backdrop-filter:none;gap:12px;max-width:none}
#app-rahmen .panel-title{font:400 22px Unifont,monospace;color:#fff;text-shadow:none;text-align:center}
#app-rahmen .highscore-header{background:none;border-bottom:1px solid #2a3338;color:#c9ccc6;font-family:Unifont,monospace;text-transform:none;letter-spacing:.02em;font-size:14px}
#app-rahmen .highscore-list{gap:0}
#app-rahmen .highscore-entry{background:none;border:0;border-bottom:1px solid #1d2326;border-radius:0;padding:8px 20px;transition:background .1s;font-family:Unifont,monospace}
#app-rahmen .highscore-entry:hover{background:#17301f;transform:none;box-shadow:none}
#app-rahmen .entry-rank{width:auto;height:auto;border:0;border-radius:0;background:none;font:400 18px Unifont,monospace;color:#34c24a;animation:none}
#app-rahmen .entry-rank.rank-1{color:var(--gold)}
#app-rahmen .entry-rank.rank-2{color:#c9ccc6}
#app-rahmen .entry-rank.rank-3{color:#cd9b62}
#app-rahmen .entry-manager{font:400 17px Unifont,monospace;color:#fff}
#app-rahmen .entry-points{font:400 17px Unifont,monospace;color:var(--gold);text-shadow:none}
#app-rahmen .entry-cup{font:400 16px Unifont,monospace}
#app-rahmen .entry-cup.cup-lp{color:#34c24a}
#app-rahmen .entry-cup.cup-cl{color:#62a8ff}
#app-rahmen .entry-cup.cup-el{color:#ffbf2b}
#app-rahmen .entry-cup.cup-ecl{color:#a9a2ff}
#app-rahmen .entry-team{font-family:Inter,sans-serif;color:#dfe8e0}
#app-rahmen .entry-difficulty{letter-spacing:0;font-size:12px}
#app-rahmen .stats-footer{background:var(--kasten);border:2px solid #1f3f2b;border-radius:0}
#app-rahmen .stat-value{font:400 20px Unifont,monospace;color:var(--gold);text-shadow:none}
#app-rahmen .stat-label{font-family:Unifont,monospace;text-transform:none;letter-spacing:.02em}
#app-rahmen .loading-spinner{border-color:rgba(242,206,107,.2);border-top-color:var(--gold)}
#app-rahmen .back-link,#app-rahmen #backLinkText{display:none}

/* Shopfeatures */
.shop .container{max-width:none;padding:0}
.shop section{padding:0;margin:0 0 48px}
.shop .h2{font:400 clamp(26px,3.4vw,38px) Unifont,monospace;color:#fff;margin:0 0 22px;display:flex;align-items:center;gap:16px}
.shop .h2:after{content:"";flex:1;height:3px;background:var(--gold);opacity:.8}
.shop .h3{font:400 22px Unifont,monospace;margin:0 0 8px}
.shop .lede{background:var(--papier);color:var(--tinte);padding:24px 28px;border-left:8px solid var(--band);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.shop .lede p{margin:0 0 12px}
.shop .lede p:last-child{margin-bottom:0}
.shop .lede .highlight{color:var(--band)}
.shop .prose{max-width:75ch;margin:0 0 22px;color:#dbe7dc}
.shop .features-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;max-width:none!important;margin:0!important}
.shop .feature-card,.shop .feature-row>div:first-child{background:var(--papier);color:var(--tinte);padding:22px 24px;border-left:8px solid var(--band);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.shop .feature-card .h3,.shop .feature-row .h3{color:var(--band)}
.shop .feature-card p{color:var(--tinte)!important}
.shop .feature-icon{display:none}
.shop .feature-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;margin-bottom:30px}
.shop .feature-row ul{padding-left:20px;margin:0}
.shop .feature-row p{margin:0 0 8px}
.shop figure.shot{margin:0 0 14px!important;max-width:none!important;border:3px solid var(--gold);background:#000}
.shop figure.shot img{display:block;width:100%;height:auto;cursor:zoom-in}
.shop figure.shot figcaption{background:var(--band);color:var(--gold);padding:8px 12px;font-size:14px;border-top:3px solid var(--gold)}
.shop .note{background:#f4e2c2;color:var(--tinte);border-left:8px solid #c2883a;padding:16px 22px;margin:18px 0}
.shop .note p{margin:0}
.shop .note a{color:#1a6b3a}
.shop .limit-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.shop .limit-list li{background:var(--kasten);border:2px solid #1f3f2b;padding:12px 18px;color:#d6e2d6}
.shop .limit-list b{color:#fff}
.shop .faq-group{font:400 22px Unifont,monospace;color:var(--gold);margin:28px 0 12px}
.shop .faq-item{background:var(--kasten);border:2px solid #1f3f2b;padding:14px 20px;margin-bottom:10px}
.shop .faq-item h3{font:400 19px Unifont,monospace;color:#fff;margin:0 0 6px}
.shop .faq-item p{margin:0;color:#d6e2d6}
.shop .highlight{color:#fff}
.shop a{color:var(--gold)}

/* Alte Fussballmanager */
.alt .lead{font-size:18px}
.alt h2{font:400 26px Unifont,monospace;color:var(--band);margin:30px 0 10px;border-top:3px solid var(--band);padding-top:6px}
.alt h2:first-of-type{border-top:0;margin-top:0}
.alt p{margin:0 0 12px}
.alt .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 22px}
.alt a.btn{display:inline-block;background:var(--knopf);color:#fff;padding:12px 20px;text-decoration:none;font:19px Unifont,monospace;border:2px solid #1f3f2b;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.alt a.btn-primary{background:var(--knopf-hell);outline:2px solid var(--gold);outline-offset:2px}
.alt a:not(.btn){color:#1a6b3a}
.alt ul{padding-left:22px;margin:0 0 14px}

/* Fanbanner: die Zaunfahne ueber dem Fuss. Ein Klick laesst sie springen. */
.fanbanner{margin-left:var(--seite);background:var(--grund);padding:44px 5vw 0;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;user-select:none;outline-offset:6px}
.fahne{position:relative;background:repeating-linear-gradient(90deg,var(--band) 0 46px,#22603a 46px 92px);border:3px solid var(--gold);padding:16px 38px;transform-origin:50% 0;animation:wehen 4.2s ease-in-out infinite;box-shadow:0 10px 0 rgba(0,0,0,.28)}
.fahne:before,.fahne:after{content:"";position:absolute;top:-34px;width:6px;height:34px;background:var(--gold)}
.fahne:before{left:16%}
.fahne:after{right:16%}
.fahne-text{display:block;font-size:clamp(18px,2.6vw,30px);color:#fff;text-align:center;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.fahne-zaehler{font-size:14px;color:var(--gold);min-height:20px;margin-bottom:26px}
.fanbanner.springt .fahne{animation:sprung .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes wehen{0%,100%{transform:rotate(-.6deg) skewX(0)}50%{transform:rotate(.6deg) skewX(-.8deg)}}
@keyframes sprung{0%{transform:translateY(0)}40%{transform:translateY(-34px) rotate(-1.5deg)}100%{transform:translateY(0)}}
.fanbanner:focus-visible .fahne{outline:3px solid #fff}
@media(prefers-reduced-motion:reduce){.fahne{animation:none}.fanbanner.springt .fahne{animation:none}}

@media(max-width:1000px){.shop .feature-row{grid-template-columns:1fr}.fanbanner{margin-left:0}}

/* ====================================================================
   Gimmicks (2026): Spielminute, Changelog-Live-Ticker, Besucherzaehler
   ==================================================================== */

/* Spielminute: beim Scrollen laeuft die Partie mit */
.minuten-leiste{position:sticky;top:0;z-index:30;background:var(--kasten);border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:18px;padding:8px 5vw;font-size:18px;color:#fff}
.minuten-leiste .m-label{color:var(--gold);font-size:14px;white-space:nowrap}
.minuten-leiste #mMinute{font-size:30px;color:var(--gold);min-width:3.6ch;text-align:right}
.minuten-leiste #mPhase{min-width:14ch;color:#cfe0d2;font-size:15px}
.m-strahl{position:relative;flex:1;height:14px;background:#0a1a0f;border:2px solid #1f3f2b}
.m-strahl i{position:absolute;top:-6px;left:0;width:22px;height:22px;margin-left:-11px;background:#fff;border:3px solid #111;border-radius:50%;box-shadow:0 0 0 2px var(--gold)}
.m-strahl b{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--gold);opacity:.8}
.m-strahl b.h{left:50%}
.m-strahl b.e{right:0}
.m-strahl .m-fuell{position:absolute;inset:0 auto 0 0;background:var(--knopf-hell);width:0}
@media(max-width:1000px){.minuten-leiste{top:56px}}
@media(max-width:700px){.minuten-leiste{gap:10px;font-size:14px}.minuten-leiste .m-label{display:none}.minuten-leiste #mPhase{min-width:0;font-size:12px}.minuten-leiste #mMinute{font-size:24px}}

/* Changelog als Live-Ticker */
.tk-umschalter{display:flex;align-items:center;gap:8px;margin:18px 0 26px;font-size:18px}
.tk-umschalter .live{background:#c0392b;color:#fff;padding:4px 14px;font-size:16px;margin-right:10px;animation:blink 1.4s steps(2,end) infinite}
.tk-umschalter button{font:18px Unifont,monospace;background:var(--kasten);color:#b9c8bb;border:2px solid #1f3f2b;padding:8px 22px;cursor:pointer}
.tk-umschalter button.on{background:var(--knopf-hell);color:#fff}
@keyframes blink{50%{opacity:.35}}
.tk-spiel{margin-bottom:54px}
.tk-anpfiff{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;background:var(--band);border:3px solid var(--gold);padding:14px 20px;font-size:clamp(18px,2.2vw,26px);color:#fff}
.tk-anpfiff b{font-weight:400;color:var(--gold)}
.tk-anpfiff small{font:15px Unifont,monospace;color:var(--gold);margin-left:auto}
.tk-intro{margin:10px 0 16px;color:#dbe7dc;max-width:80ch}
.tk-zeilen{display:grid;gap:8px}
.tk-zeile{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:start;background:var(--kasten);border:2px solid #143220;padding:10px 16px;font-size:18px;opacity:0;transform:translateX(-24px);transition:opacity .4s,transform .4s}
.tk-zeile.da{opacity:1;transform:none}
.tk-zeile b{font-weight:400;color:var(--gold);text-align:right}
.tk-zeile span{font-family:Inter,sans-serif;font-size:16px;color:#dfe8e0}
.tk-zeile:nth-child(even) span{font-style:italic;color:#bfe3c9}
.tk-zeile em{font:normal 17px Unifont,monospace;color:#fff;margin-right:6px}
.tk-abpfiff{text-align:right;margin-top:10px;color:var(--gold);font-size:18px}
@media(prefers-reduced-motion:reduce){.tk-zeile{opacity:1;transform:none;transition:none}.tk-umschalter .live{animation:none}}
@media(max-width:700px){.tk-zeile{grid-template-columns:48px 1fr;padding:8px 10px}}

/* Besucherzaehler wie auf alten Internetseiten */
.zaehler{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 16px;font-size:15px;color:#cfe0d2}
.zaehler[hidden]{display:none}
.z-ziffern{display:inline-flex;gap:3px}
.z-ziffern i{font-style:normal;display:inline-block;min-width:1.5ch;text-align:center;padding:3px 6px;background:#000;border:2px solid #555;border-top-color:#222;border-left-color:#222;color:#34c24a;font-size:22px;line-height:1.1;text-shadow:0 0 6px rgba(52,194,74,.55)}
.z-seit{font-size:13px;color:#8fa995}