/* ============================================================
   schlauspielen.ch — helles Swiss-Design · Stand 2026-07
   Eine Datei für alle ~600 Seiten (extern, gecacht).
   ============================================================ */
:root{
  --ink:#17181A; --ink-soft:#4C4F54; --ink-faint:#898E95;
  --paper:#FFFFFF; --warm:#F7F5F1; --line:#E7E3DC;
  --acc:#B0402C; --acc-dark:#8F3323; --acc-tint:#F7ECE8;
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",system-ui,sans-serif;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
::selection{background:var(--acc);color:#fff}
img{max-width:100%;display:block}
a{color:var(--acc);text-decoration:none}
a:hover{color:var(--acc-dark)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px;flex-wrap:wrap}
.brand{font-weight:700;font-size:17.5px;letter-spacing:-.01em;color:var(--ink)}
.brand b{color:var(--acc);font-weight:700}
nav.main{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:14px;font-weight:500}
nav.main a{color:var(--ink-soft)}
nav.main a:hover{color:var(--ink)}
.langs{display:flex;gap:10px;border-left:1px solid var(--line);padding-left:14px;font-size:13px}
.langs a{color:var(--ink-faint)}
.langs a[aria-current]{color:var(--ink);font-weight:700;box-shadow:0 2px 0 var(--acc)}

/* ---------- Typo-Bausteine ---------- */
.label{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--acc);display:block}
h1{font-size:clamp(34px,5.4vw,60px);line-height:1.05;letter-spacing:-.025em;font-weight:700}
h1 em{font-style:normal;color:var(--acc)}
h2{font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.015em;font-weight:700}
.lead{font-family:var(--serif);font-size:clamp(17px,1.9vw,20px);line-height:1.6;color:var(--ink-soft);max-width:58ch}
.sect-lead{color:var(--ink-soft);max-width:60ch;margin:14px 0 0}
.shead{display:flex;flex-direction:column;gap:12px}

/* ---------- Hero ---------- */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--line)}
.hero .label{margin-bottom:18px}
.hero h1{max-width:22ch;margin-bottom:20px}
.hero .lead{margin-bottom:30px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--acc);color:#fff;font-weight:600;font-size:15px;padding:13px 24px;border:1px solid var(--acc);border-radius:3px;cursor:pointer}
.btn:hover{background:var(--acc-dark);border-color:var(--acc-dark);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* Faktenband */
.facts-band{background:var(--warm);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stats div{padding:22px 20px 22px 0}
.stats div+div{border-left:1px solid var(--line);padding-left:22px}
.stats b{display:block;font-size:22px;letter-spacing:-.02em}
.stats span{font-size:13px;color:var(--ink-faint)}

/* ---------- Sektionen ---------- */
section{padding:72px 0}
section.why,section.tips{background:var(--warm);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px}
.cell{background:var(--paper);padding:26px 24px}
.cell h3{font-size:16.5px;letter-spacing:-.01em;margin-bottom:8px}
.cell p{font-size:14.5px;color:var(--ink-soft)}
.cell .n{font-size:12px;color:var(--acc);font-weight:600;display:block;margin-bottom:12px;font-variant-numeric:tabular-nums}

/* ---------- Filter-Toolbar ---------- */
.toolbar{border:1px solid var(--line);background:var(--paper);padding:16px 18px;margin:28px 0 8px;display:flex;flex-direction:column;gap:10px;position:sticky;top:62px;z-index:30}
.frow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.frow .lbl{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);min-width:86px}
.fchip{border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);font-family:var(--sans);font-weight:500;font-size:13.5px;padding:6px 12px;border-radius:3px;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.fchip i{width:9px;height:9px;border-radius:2px;display:inline-block}
.fchip:hover{border-color:var(--ink)}
.fchip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.frow input[type=search]{flex:1;min-width:170px;padding:9px 13px;border:1px solid var(--line);border-radius:3px;font:500 14px var(--sans);outline:none;background:var(--paper)}
.frow input[type=search]:focus{border-color:var(--acc)}
.frow select{padding:9px 12px;border:1px solid var(--line);border-radius:3px;background:var(--paper);font:500 13.5px var(--sans);color:var(--ink-soft)}
.frow .reset{background:none;border:none;color:var(--acc);font:600 13.5px var(--sans);cursor:pointer}
.frow .cnt{font-size:13px;color:var(--ink-faint);margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.noresults{display:none;text-align:center;color:var(--ink-faint);padding:40px 0}

/* ---------- Spielkarten ---------- */
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:18px;margin-top:24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;color:inherit}
.card:hover{border-color:var(--ink);color:inherit}
.cover{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .ini{position:absolute;right:-10px;bottom:-42px;font-family:var(--serif);font-size:150px;line-height:1;color:rgba(255,255,255,.16);font-weight:700}
.cover.hasimg .ini{display:none}
.cover .age{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.cover .badge{position:absolute;right:12px;top:12px;background:rgba(23,24,26,.78);color:#fff;font-size:12px;font-weight:600;padding:4px 8px;border-radius:3px;font-variant-numeric:tabular-nums}
.cbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.cbody h3{font-size:17.5px;letter-spacing:-.01em}
.meta{font-size:12.5px;color:var(--ink-faint)}
.cbody p{font-size:14px;color:var(--ink-soft);flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line);background:var(--warm);padding:3px 8px;border-radius:3px;display:inline-flex;align-items:center;gap:6px}
.tag i{width:8px;height:8px;border-radius:2px;display:inline-block}
.rec{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}

/* ---------- Detailseite ---------- */
.detail .wrap{padding-top:28px;padding-bottom:64px}
.bc{font-size:13px;color:var(--ink-faint);margin-bottom:26px}
.bc a{color:var(--ink-faint)}
.bc a:hover{color:var(--acc)}
.dhead{display:grid;grid-template-columns:340px 1fr;gap:36px;align-items:center;margin-bottom:40px}
.dhead .cover{border-radius:4px;border:1px solid var(--line)}
.dhead .cover.hasimg{background:#fff!important}
.dhead .cover.hasimg img{object-fit:contain;padding:10px}
.dhead .label{margin-bottom:12px}
.dhead h1{margin-bottom:14px}
.layout{display:grid;grid-template-columns:1.65fr 1fr;gap:44px;align-items:start}
.rv h2{font-size:21px;margin:30px 0 10px}
.rv h2:first-child{margin-top:0}
.rv p{color:var(--ink-soft);font-family:var(--serif);font-size:16.5px;line-height:1.7;margin-bottom:14px}
.note{background:var(--acc-tint);border-left:3px solid var(--acc);padding:12px 16px;margin:16px 0;font-size:14.5px;color:var(--ink-soft)}
.voice,.ptip{background:var(--warm);border:1px solid var(--line);padding:16px 20px;margin:18px 0;font-size:15px;color:var(--ink-soft)}
.voice b,.ptip b{color:var(--ink)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.duo .col{border:1px solid var(--line);padding:16px 18px}
.duo h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.duo .pro h3{color:#3F7A5B}.duo .con h3{color:var(--acc)}
.duo ul{list-style:none;font-size:14.5px;color:var(--ink-soft)}
.duo li{padding:4px 0 4px 20px;position:relative}
.duo .pro li::before{content:"✓";position:absolute;left:0;color:#3F7A5B;font-weight:700}
.duo .con li::before{content:"–";position:absolute;left:0;color:var(--acc);font-weight:700}
.train{margin:16px 0 6px}
.train .tr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.train .tr:last-child{border-bottom:0}
.train .pips{letter-spacing:2px;color:var(--acc);white-space:nowrap}
.train .pips span{opacity:.18}
.adl .it{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--ink-soft)}
.adl .it:last-child{border-bottom:0}
.adl b{color:var(--ink)}
.adl .dot{width:10px;height:10px;border-radius:2px;flex:none;position:relative;top:1px}
/* Fazit, Einstieg und Haeufige Fragen unter dem Review; Teilwerte der Note im Faktenkasten (#78) */
.rv ul.einstieg{list-style:none;margin:0 0 14px}
.rv ul.einstieg li{position:relative;padding:5px 0 5px 24px;color:var(--ink-soft);font-family:var(--serif);font-size:16.5px;line-height:1.7}
.rv ul.einstieg li::before{content:"→";position:absolute;left:0;color:var(--acc);font-weight:700;font-family:var(--sans)}
.rv .fragen h3{font-size:16px;line-height:1.4;margin:20px 0 6px;color:var(--ink)}
.rv .fragen h3:first-child{margin-top:4px}
.rv .fragen p{margin-bottom:6px}
/* «Im Detail»: Vertiefung der wichtigsten Spiele mit Quellenliste */
.rv .vertiefung h3{font-size:16px;line-height:1.4;margin:20px 0 6px;color:var(--ink)}
.rv .vertiefung p a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.rv ul.quellen,.hubquellen ul.quellen{list-style:none;margin:0 0 14px}
.rv ul.quellen li,.hubquellen ul.quellen li{padding:3px 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.rv ul.quellen a,.hubquellen ul.quellen a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.facts .teilwerte{font-size:12.5px;line-height:1.5;color:var(--ink-faint);margin-top:10px}
.facts .teilwerte a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
/* Anker auf der Methodik-Seite («sterne», #78): der Kopf der Seite klebt oben und verdeckt sonst die Ueberschrift */
.prose h2[id]{scroll-margin-top:88px}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.gal img{border:1px solid var(--line);border-radius:4px}
.facts{border:1px solid var(--line);background:var(--warm);padding:22px 24px;position:sticky;top:86px}
.facts h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.facts .row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.facts dt{color:var(--ink-faint)}
.facts dd{font-weight:600;text-align:right}
.btnrow{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.btnrow .btn{text-align:center}
.buynote{font-size:12px;color:var(--ink-faint);text-align:center;margin-top:10px}
.rel{padding:54px 0 0}
.rel h2{font-size:24px;margin-bottom:16px}
.rellist{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rellist a{display:flex;align-items:center;gap:13px;background:var(--paper);padding:13px 15px;color:inherit}
.rellist a:hover{background:var(--warm)}
.rellist .rthumb{flex:none;width:72px;height:54px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--warm);display:flex;align-items:center;justify-content:center}
.rellist .rthumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.rellist .rthumb .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:26px;color:rgba(255,255,255,.9)}
.rellist .rtxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.rellist .rn{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.2}
.rellist a:hover .rn{color:var(--acc)}
.rellist .rm{font-size:12px;color:var(--ink-faint)}
@media(max-width:720px){.rellist{grid-template-columns:1fr}}
.backrow{margin-top:36px}
.more{font-weight:600;font-size:14.5px}

/* ---------- Rechtsseiten ---------- */
.legal{padding:48px 0}
.legal h1{font-size:clamp(28px,4vw,42px);margin-bottom:20px}
.prose{font-size:15.5px;line-height:1.7;color:var(--ink-soft)}
.prose p{margin-bottom:14px}
.prose h2{font-size:20px;margin:28px 0 10px;color:var(--ink)}
/* Wortmarke im Fliesstext (Seite «Über uns & Methodik», #71): die Endung wie der Rest des Satzes */
.prose .marke b{font-weight:inherit}
.credits{list-style:none;margin-top:20px}
.credits li{padding:8px 0;border-bottom:1px solid var(--line)}
.credits b{color:var(--ink)}

/* ---------- FAQ ---------- */
#faq details{border:1px solid var(--line);background:var(--paper);margin-top:12px;padding:16px 20px;border-radius:3px}
#faq summary{font-weight:600;font-size:16px;cursor:pointer}
#faq details p{color:var(--ink-soft);margin-top:12px;font-size:15px}

/* ---------- Footer ---------- */
footer.site{background:var(--ink);color:#B7BBC1;margin-top:72px}
footer.site .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;padding-top:52px;padding-bottom:40px}
footer .b{font-weight:700;font-size:17px;color:#fff}
footer .b b{color:#E08A6F}
footer.site p{font-size:13.5px;line-height:1.8;margin-top:10px;max-width:36ch}
footer h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:8px;font-weight:600}
footer.site a{color:#D3D6DA}
footer.site a:hover{color:#fff}
/* Ausgabenwahl (#57): dieselbe Seite in allen Laender- und Sprachausgaben,
   zwischen den Spalten und der Copyright-Zeile. Eine Liste mit vier Eintraegen:
   die Schweiz mit einer Unterliste ihrer drei Sprachen, dann je ein Markt. Die
   Trennstriche zeichnet das CSS, nicht der Text - ein Screenreader liest
   Listeneintraege, keine Zeichen. Umbricht auf schmalen Bildschirmen von selbst. */
footer.site .ausgaben{border-top:1px solid #2C2E31;padding:14px 0}
footer.site .ausgaben .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px}
footer.site .ausgaben h4{margin:0}
footer.site .ausgaben ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;font-size:13px}
footer.site .ausgaben li{margin:0}
footer.site .ausgaben .wrap>ul>li+li{margin-left:12px;padding-left:12px;border-left:1px solid #44474B}
footer.site .ausgaben .wrap>ul>li:first-child>ul{display:inline-flex;margin-left:6px}
footer.site .ausgaben li li+li::before{content:"·";content:"·" / "";margin:0 6px}
footer.site .ausgaben a[aria-current]{color:#fff;font-weight:600}
.copy{border-top:1px solid #2C2E31;font-size:12px;color:#84888E;padding:16px 0}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .dhead{grid-template-columns:1fr;gap:22px}
  .dhead .cover{max-width:420px}
  .layout{grid-template-columns:1fr}
  .facts{position:static}
  .grid4{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  section{padding:52px 0}
  .hero{padding:54px 0 44px}
  .stats{grid-template-columns:1fr 1fr}
  .stats div+div{border-left:0;padding-left:0}
  .stats div:nth-child(even){border-left:1px solid var(--line);padding-left:18px}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr}
  footer.site .foot{grid-template-columns:1fr}
  .toolbar{position:static}
  nav.main{gap:14px;font-size:13px}
}
/* ---------- Einwilligungsbanner (assets/consent.js) ----------
   Hier und nicht in einer eigenen Datei oder einem <style>-Block: scripts/ausgabe.py
   weist Stilbloecke in Seiten ab (assetziele_pruefen).
   "Ablehnen" und "Akzeptieren" tragen dieselbe Klasse .cc-b: gleiche Groesse,
   Farbe, Schrift und Ebene. Kein Akzent fuer "Akzeptieren" - das waere
   Lenkung (CNIL: refuser aussi simple qu'accepter).
   BEWUSST OHNE @keyframes/animation und ohne display:none, opacity:0 und
   Verwandte: tests/test_kennzeichnung.py verbietet beides in style.css, weil
   das Stylesheet auch das Impressum gestaltet (pruefe_css_text). Erlaubt und
   genutzt ist transition. Die zugeklappte Auswahl versteckt consent.js mit
   dem hidden-Attribut, nicht mit einer Regel hier. */
.cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;justify-content:center;pointer-events:none}
.cc-in{pointer-events:auto;position:relative;width:100%;max-width:760px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 32px rgba(23,24,26,.16);padding:20px 22px 18px}
.cc-t{font-weight:700;font-size:15.5px;letter-spacing:-.005em;margin:0 36px 6px 0}
.cc-p{font-size:13.5px;line-height:1.6;color:var(--ink-soft);max-width:none}
.cc-p a{text-decoration:underline;text-underline-offset:2px}
.cc-wahl{margin-top:12px;border-top:1px solid var(--line)}
.cc-opt{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--ink-soft);cursor:pointer}
.cc-opt input{flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:var(--acc);cursor:pointer}
.cc-opt b{display:block;color:var(--ink);font-weight:600}
.cc-btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
.cc-b{flex:1 1 150px;font:inherit;font-size:14.5px;font-weight:600;line-height:1.2;padding:12px 18px;border:1px solid var(--ink);border-radius:3px;background:var(--paper);color:var(--ink);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.cc-b:hover{background:var(--ink);color:#fff}
.cc-l{flex:0 0 auto;font:inherit;font-size:13.5px;color:var(--ink-soft);background:none;border:0;padding:8px 4px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cc-l:hover{color:var(--ink)}
.cc-x{position:absolute;top:8px;right:8px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font:inherit;font-size:22px;line-height:1;color:var(--ink-faint);background:none;border:0;border-radius:3px;cursor:pointer}
.cc-x:hover{color:var(--ink);background:var(--warm)}
.cc-b:focus-visible,.cc-l:focus-visible,.cc-x:focus-visible,.cc-opt input:focus-visible,.cc-fl:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
footer.site .cc-fl{font:inherit;color:#D3D6DA;background:none;border:0;padding:0;cursor:pointer;text-align:left}
footer.site .cc-fl:hover{color:#fff}
@media(max-width:720px){
  .cc{left:0;right:0;bottom:0}
  .cc-in{border-radius:0;border-left:0;border-right:0;padding:14px 16px 12px;max-height:85vh;overflow:auto}
  .cc-t{font-size:15px}
  .cc-p,.cc-opt{font-size:13px;line-height:1.5}
  .cc-btns{gap:8px;margin-top:12px}
  .cc-b{flex:1 1 40%;padding:11px 12px}
  .cc-l{width:100%;text-align:center}
}

/* ---------- Sammelseiten (Alter, Förderbereiche, Geschenke) ---------- */
.hub .hubkopf{max-width:780px;padding:6px 0 8px}
.hub .hubkopf .label{margin-bottom:14px}
.hub .hubkopf h1{font-size:clamp(30px,4.4vw,48px);margin-bottom:24px}
.hub .hubkopf .lead{max-width:66ch;margin-bottom:16px}
.hub .hubkopf .lead+.lead{font-size:clamp(16px,1.6vw,18px)}
.hub section{padding:0}
.hubliste{margin-top:44px}
.hubliste+.hubliste{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.hub .hubinfo{max-width:780px;margin-top:64px;padding:22px 26px;background:var(--warm);border-left:3px solid var(--acc);border-radius:3px}
.hubinfo h2{font-size:19px;letter-spacing:0;margin-bottom:8px}
.hubinfo p{color:var(--ink-soft);font-size:15px}
/* Quellenblock der Sammelseiten (#294): Abstand und Breite wie die Fragen, die Liste wie «Im Detail» */
.hubfaq,.hubquellen{max-width:780px;margin-top:56px}
.hubfaq h2,.hubquellen h2{margin-bottom:6px}
.hub .hublinks{margin-top:64px;padding-top:36px;border-top:1px solid var(--line)}
.hubgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px 48px;margin-top:22px}
.hubgrid h3{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.hubgrid ul{list-style:none}
.hubgrid li{border-top:1px solid var(--line)}
.hubgrid li:last-child{border-bottom:1px solid var(--line)}
.hubgrid a{display:block;padding:10px 0;color:var(--ink);font-size:15px;line-height:1.35}
.hubgrid a:hover{color:var(--acc)}
@media(max-width:720px){.hubliste{margin-top:32px}.hub .hubinfo{margin-top:44px;padding:18px}.hub .hublinks{margin-top:44px}}
.ratgeber{border-top:1px solid var(--line)}
.ratgeber .hubgrid{margin-top:30px}

/* ============================================================
   Designrichtung C «Galerie» (Entscheid Thomas 08.10.2026):
   mehr Raum und Licht, weiche Tiefe, Bewegung beim Ueberfahren.
   Nur transition/transform/box-shadow - keine Animationen und nichts
   Versteckendes (tests/test_kennzeichnung.py prueft dieses Stylesheet,
   weil es auch das Impressum gestaltet).
   ============================================================ */
:root{
  --schatten-leicht:0 1px 3px rgba(23,24,26,.06);
  --schatten-schild:0 2px 6px rgba(23,24,26,.06),0 22px 50px rgba(23,24,26,.10);
  --schatten-hover:0 18px 40px rgba(23,24,26,.14);
  --weich:cubic-bezier(.2,.7,.2,1);
}
header.site{box-shadow:0 1px 0 var(--line),0 6px 18px rgba(23,24,26,.04)}

/* Navigation als Pillen */
nav.main{gap:4px}
nav.main>a{padding:6px 12px;border-radius:999px;transition:background .2s,color .2s}
nav.main>a:hover{background:var(--ink);color:#fff}
.langs a{padding:2px 7px;border-radius:999px;transition:background .2s,color .2s}
.langs a:hover{background:var(--warm);color:var(--ink)}

/* Knoepfe: Pille mit Pfeilkreis */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:11px 14px 11px 22px;transition:background .2s,border-color .2s,box-shadow .25s,color .2s}
.btn::after{content:"→";display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);font-weight:600;line-height:1;transition:transform .25s var(--weich),background .2s}
.btn:hover{box-shadow:0 10px 24px rgba(176,64,44,.28)}
.btn:hover::after{transform:translateX(4px);background:rgba(255,255,255,.3)}
.btn.ghost::after{background:rgba(23,24,26,.07)}
.btn.ghost:hover{box-shadow:0 10px 24px rgba(23,24,26,.18)}
.btn.ghost:hover::after{background:rgba(255,255,255,.2)}
.btn:focus-visible,.fchip:focus-visible,.card:focus-visible,nav.main>a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.btnrow .btn{justify-content:space-between}

/* Startseite: Licht und gestaffelte Spielschachteln */
.hero{padding:76px 0 64px;background:linear-gradient(180deg,var(--paper) 0%,var(--warm) 100%);border-bottom:0}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:36px;align-items:center}
.hero-text{min-width:0}
.hero .stack{position:relative;height:300px}
.hero .stack figure{position:absolute;width:56%;aspect-ratio:4/3;margin:0;background:var(--paper);border-radius:14px;box-shadow:var(--schatten-schild);overflow:hidden;transition:transform .5s var(--weich)}
.hero .stack img{width:100%;height:100%;object-fit:contain;padding:10px}
.hero .stack figure:nth-child(1){left:2%;top:14%;transform:rotate(-4deg)}
.hero .stack figure:nth-child(2){left:40%;top:0;transform:rotate(3deg)}
.hero .stack figure:nth-child(3){left:24%;top:42%;transform:rotate(-1deg);z-index:2}
.hero .stack:hover figure:nth-child(1){transform:rotate(-6deg) translate(-8px,4px)}
.hero .stack:hover figure:nth-child(2){transform:rotate(5deg) translate(8px,-4px)}
.hero .stack:hover figure:nth-child(3){transform:rotate(0deg) translateY(-6px)}
.facts-band{border-top:1px solid var(--line)}
section{padding:84px 0}

/* Filter und Werkzeugleiste */
.toolbar{border-color:transparent;border-radius:16px;box-shadow:var(--schatten-leicht)}
.fchip{border-radius:999px;transition:background .2s,color .2s,border-color .2s}
.fchip:hover{border-color:var(--ink);color:var(--ink)}
.frow input[type=search],.frow select{border-radius:999px}

/* Spielkarten: Bild zuerst, schwebt beim Ueberfahren */
.games{gap:30px}
.card{border:0;border-radius:0;background:transparent;overflow:visible}
.card:hover{border-color:transparent}
.card .cover{border-radius:14px;box-shadow:var(--schatten-leicht);transition:transform .35s var(--weich),box-shadow .35s}
.card .cover.hasimg{background:var(--paper)!important}
.card .cover.hasimg img{object-fit:contain;padding:10px}
.card .cover::after{content:"Review lesen →";position:absolute;left:0;right:0;bottom:0;padding:9px 14px;background:rgba(23,24,26,.86);color:#fff;font-size:13px;font-weight:600;transform:translateY(101%);transition:transform .3s var(--weich)}
:lang(fr) .card .cover::after{content:"Lire l’avis →"}
:lang(it) .card .cover::after{content:"Leggi la recensione →"}
:lang(es) .card .cover::after{content:"Leer la reseña →"}
:lang(en) .card .cover::after{content:"Read the review →"}
:lang(pt-BR) .card .cover::after{content:"Ler a resenha →"}
:lang(pt-PT) .card .cover::after{content:"Ler a análise →"}
.card:hover .cover,.card:focus-visible .cover{transform:translateY(-4px);box-shadow:var(--schatten-hover)}
.card:hover .cover::after,.card:focus-visible .cover::after{transform:translateY(0)}
.card .cbody{padding:14px 2px 0}
.card:hover h3{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px}

/* Startseite, schmal: «Mehr laden» (#73, scripts/mehr_laden.py). Karten und Knopf blendet das
   Filterskript per style.display aus, nicht diese Datei; ohne JavaScript bleibt der Knopf weg
   und alle Karten stehen. Leer (breit, wenige Treffer) nimmt der Block keinen Platz. */
.mehr{text-align:center}
.mehr-zahl{margin:0;color:var(--ink-soft);font-size:14px;font-variant-numeric:tabular-nums}
.mehr-zahl:not(:empty){margin-top:34px}
.mehr .btn{margin-top:14px;font-family:var(--sans);line-height:1.3}
.mehr .btn::after{content:"↓";content:"↓" / ""}

/* Raster-Kacheln (Warum spielen, Eltern-Tipps) */
.grid4,.grid3{border-radius:16px;overflow:hidden;border-color:transparent;box-shadow:var(--schatten-leicht)}
.cell{transition:background .2s}
.cell:hover{background:var(--warm)}

/* Spielseite: Kaufkasten wie ein Schild */
.dhead .cover{border:0;border-radius:16px;box-shadow:var(--schatten-schild)}
.facts{border:0;border-radius:16px;background:var(--paper);box-shadow:var(--schatten-schild)}
.voice,.ptip{border-radius:12px;border-color:transparent;box-shadow:var(--schatten-leicht)}
.duo .col{border-radius:12px}
.hub .hubinfo{border-radius:0 12px 12px 0}
.rellist{border-radius:14px;overflow:hidden;border-color:transparent;box-shadow:var(--schatten-leicht)}
.rellist a{transition:background .2s}
.rellist .rthumb{border-radius:8px;transition:transform .3s var(--weich)}
.rellist a:hover .rthumb{transform:scale(1.05)}
#faq details{border-radius:12px;transition:border-color .2s,box-shadow .2s}
#faq details:hover{border-color:var(--ink);box-shadow:var(--schatten-leicht)}

header.site .wrap{height:auto;min-height:62px;padding-block:6px;row-gap:4px}
@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:20px}
  .hero .stack{height:210px;max-width:400px;width:100%}
}
@media(max-width:720px){
  header.site{position:static}
  header.site .wrap{padding-block:10px}
  .hero{padding:36px 0 40px}
  section{padding:56px 0}
  nav.main{gap:2px;font-size:13px}
  nav.main>a{padding:5px 9px}
  .langs{padding-left:8px;gap:4px}
}
/* Sprachumschalter als Ausklappmenue (Thomas 21.10.2026): ein Knopf mit der aktuellen Sprache, darunter die Liste.
   <details> klappt ohne JavaScript auf; die Liste .langs wird zum schwebenden Feld unter dem Knopf. */
.sprachwahl{position:relative;border-left:1px solid var(--line);padding-left:10px;font-size:13px}
.sprachwahl summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;font-weight:700;color:var(--ink);user-select:none;transition:background .2s}
.sprachwahl summary::-webkit-details-marker{display:none}
.sprachwahl summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.sprachwahl[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.sprachwahl summary:hover,.sprachwahl[open] summary{background:var(--warm)}
.sprachwahl summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sprachwahl .langs{position:absolute;right:0;top:calc(100% + 8px);z-index:60;flex-direction:column;gap:2px;min-width:76px;padding:6px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(23,24,26,.12)}
.sprachwahl .langs a{display:block;padding:7px 12px;border-radius:8px;color:var(--ink-soft)}
.sprachwahl .langs a[aria-current]{color:var(--ink);box-shadow:none;background:var(--warm)}
/* Flaggen statt Kuerzel (#259, Variante A, Thomas 22.10.2026): ein Markt zeigt die Flagge seines Landes (21x14), die
   Schweizer Fassung die Schweizer Flagge (13x13) mit dem Sprachkuerzel unten rechts darueber (26x19). Die SVG-Farben
   stehen fest im Markup, nur Rand und Hinterlegung kommen aus den Farben der Seite. Der Knopf ist mit dem breiteren
   Symbol knapper gepolstert (7px statt 10px, Abstand 5px statt 7px), damit der Kopf nicht frueher umbricht als mit dem
   Kuerzel; jeder Eintrag der Liste ist gleich hoch, ob Flagge oder Schweizer Symbol. */
.sprachwahl .langs a{display:flex;align-items:center;min-height:33px}
/* Alle Ausgaben auf jeder Seite (#269): die Liste als Raster in drei Spalten - oben die drei Schweizer Fassungen, darunter
   die Maerkte in der Reihenfolge der Sprachen (DE FR IT, ES GB PT). So bleibt das Menue mit neun Eintraegen niedrig. */
.sprachwahl .langs{display:grid;grid-template-columns:repeat(3,auto)}
.sprachwahl .langs a{justify-content:center}
.flagge{position:relative;display:inline-block;flex:none;width:21px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 .5px var(--line);font-style:normal;line-height:1;vertical-align:middle}
.flagge svg{display:block;width:100%;height:100%}
.flagge.breit{width:28px}
.flagge.ch{width:26px;height:19px;border-radius:0;overflow:visible;box-shadow:none}
.flagge.ch svg{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:2px;box-shadow:0 0 0 .5px var(--line)}
.flagge.ch b{position:absolute;right:0;bottom:0;padding:0 1px;border-radius:2px;background:var(--paper);color:var(--ink);font-size:11px;font-weight:500;line-height:1.05;letter-spacing:.01em}
/* Auf dem Handy scrollt der Kopf mit (position:static oben); relative statt static, damit sein z-index wirkt und das
   aufgeklappte Menue ueber dem Inhalt liegt statt unter dem Produktbild. */
/* Das Raster (#269) ist breiter als die alte Spalte: unter dem Knopf zentriert ragte es links aus dem Bild, wo der Knopf
   nach dem Umbruch am linken Rand steht. .sprachwahl ist darum static, und die Liste haengt am Kopf, mittig im Bild. */
@media(max-width:720px){.sprachwahl{padding-left:6px;position:static}header.site{position:relative}.sprachwahl .langs{right:auto;left:50%;top:calc(100% - 4px);transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}

/* ---------- Sammelseiten: Kasten «Unsere Empfehlungen» (#74) ----------
   Drei Spiele unmittelbar unter dem Kopf der Seite (Weihnachten: vier, eines je
   Altersstufe), jedes mit Bild, Name, Meta, Kartentext und den Shop-Buttons der
   Spielseite. Ruhig, wie die uebrigen Kaesten: heller Grund, weicher Schatten.
   Mobil stehen die Eintraege untereinander. Nur Farben, Abstaende und Schatten:
   nichts Versteckendes, keine Animation (tests/test_kennzeichnung.py). */
.hub .empfehlungen{margin-top:36px;padding:28px;background:var(--warm);border-radius:16px}
.empfehlungen>h2{font-size:clamp(21px,2.4vw,26px);margin-bottom:20px}
.emps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.emp{display:flex;flex-direction:column;min-width:0;background:var(--paper);border-radius:14px;box-shadow:var(--schatten-leicht);overflow:hidden}
.emp .cover{border-radius:0;box-shadow:none}
.emp .cover.hasimg{background:var(--paper)!important}
.emp .cover.hasimg img{object-fit:contain;padding:10px}
.empbody{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 18px 18px}
.empkopf{display:flex;flex-wrap:wrap;gap:2px 12px}
.emp .stufe{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
.empbody h3{font-size:18px;letter-spacing:-.01em}
.empbody h3 a{color:var(--ink)}
.empbody h3 a:hover{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:2px;text-underline-offset:4px}
.empbody p:not(.buynote){flex:1;font-size:14px;color:var(--ink-soft)}
.empbody .buynote{margin-top:6px}
.empbody .btnrow{margin-top:8px}
@media(min-width:901px) and (max-width:1099px){.emps.vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.emps.vier{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}}
@media(max-width:900px){.emps{grid-template-columns:1fr}}
@media(max-width:720px){.hub .empfehlungen{margin-top:28px;padding:18px 14px}.emp .cover{aspect-ratio:16/9}}