/* =====================================================================
   site.css - Website von Quartetto (index.asp, index_en.asp, index_es.asp)
   und die zwoelf Rechtstexte. NICHT die App (index.html) und NICHT Hilfe
   oder Bildnachweise (css/hilfe.css).

   Welt seit 06.10.2026: "Die Faltschachtel" (Entwurf 2 der Runde unter
   .claude-workshop/_quartetto/impeccable/entwuerfe/), Deckel mit der
   Kartenwand aus Entwurf 3, Typen-Streifen aus Entwurf 3, Probepartie
   aus Entwurf 4. Beschreibung: DESIGN.md.

   Die Startseiten entstehen aus .claude-workshop/_quartetto/sql/make_website.js
   - nie die .asp von Hand aendern.

   Schriften lokal unter fonts/ (SIL OFL): Gabarito, Azeret Mono.
   ===================================================================== */
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/azeret-mono-400_700-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Azeret Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/azeret-mono-400_700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/gabarito-400_900-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Gabarito';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/gabarito-400_900.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =====================================================================
   1. Farben - vier Bloecke wie ueberall in der Familie
   Hell zuerst: bedruckter Karton. Dunkel: dieselbe Schachtel am Abend.
   Tuerkis (--accent) ist die Marke und der Handlungsknopf, --print der
   Aufdruck (Text in Tuerkis, lesbar auf Karton). --win = gewonnener Wert.
   ===================================================================== */
:root{
  --bg:#dfe3e6; --surface:#fbfcfc; --panel:#fbfcfc; --ink:#14181c; --ink-soft:#4c5660;
  --border:rgba(20,24,28,.16); --link:#00737d; --accent:#12b5c3; --accent-hover:#3cc8d3; --accent-ink:#04191b;
  --print:#0b8f9b; --win:#bfeef2; --win-ink:#04191b; --cut:rgba(20,24,28,.55); --fold:rgba(20,24,28,.32);
  --tab:#cdd3d7; --accent-soft:#d6eff1; --header-bg:rgba(223,227,230,.9); --btn-secondary-bg:#d3d8dc;
  --wall-dim:rgba(251,252,252,.35); --plus-bg:#0b7f8a;
  --shadow:0 1px 2px rgba(20,24,28,.12),0 12px 30px rgba(20,24,28,.12);
  --card-shadow:rgba(20,24,28,.18);
  --display:'Gabarito',system-ui,-apple-system,sans-serif; --text:'Gabarito',system-ui,-apple-system,sans-serif;
  --num:'Azeret Mono',ui-monospace,monospace; --cond:'Azeret Mono',ui-monospace,monospace;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
@media (prefers-color-scheme:dark){:root:not(.theme-forced){
  --bg:#101417; --surface:#1a2025; --panel:#1a2025; --ink:#e9eef1; --ink-soft:#a1acb5;
  --border:rgba(233,238,241,.14); --link:#5fdbe4; --accent:#2fd0dc; --accent-hover:#62dde6; --accent-ink:#04191b;
  --print:#3fd6e1; --win:#155a60; --win-ink:#ffffff; --cut:rgba(233,238,241,.5); --fold:rgba(233,238,241,.26);
  --tab:#242b31; --accent-soft:#163a3e; --header-bg:rgba(16,20,23,.88); --btn-secondary-bg:#242b31;
  --wall-dim:rgba(16,20,23,.45); --plus-bg:#155a60;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.4); --card-shadow:rgba(0,0,0,.45);
}}
body.theme-dark{
  --bg:#101417; --surface:#1a2025; --panel:#1a2025; --ink:#e9eef1; --ink-soft:#a1acb5;
  --border:rgba(233,238,241,.14); --link:#5fdbe4; --accent:#2fd0dc; --accent-hover:#62dde6; --accent-ink:#04191b;
  --print:#3fd6e1; --win:#155a60; --win-ink:#ffffff; --cut:rgba(233,238,241,.5); --fold:rgba(233,238,241,.26);
  --tab:#242b31; --accent-soft:#163a3e; --header-bg:rgba(16,20,23,.88); --btn-secondary-bg:#242b31;
  --wall-dim:rgba(16,20,23,.45); --plus-bg:#155a60;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.4); --card-shadow:rgba(0,0,0,.45);
}
body.theme-light{
  --bg:#dfe3e6; --surface:#fbfcfc; --panel:#fbfcfc; --ink:#14181c; --ink-soft:#4c5660;
  --border:rgba(20,24,28,.16); --link:#00737d; --accent:#12b5c3; --accent-hover:#3cc8d3; --accent-ink:#04191b;
  --print:#0b8f9b; --win:#bfeef2; --win-ink:#04191b; --cut:rgba(20,24,28,.55); --fold:rgba(20,24,28,.32);
  --tab:#cdd3d7; --accent-soft:#d6eff1; --header-bg:rgba(223,227,230,.9); --btn-secondary-bg:#d3d8dc;
  --wall-dim:rgba(251,252,252,.35); --plus-bg:#0b7f8a;
  --shadow:0 1px 2px rgba(20,24,28,.12),0 12px 30px rgba(20,24,28,.12); --card-shadow:rgba(20,24,28,.18);
}

/* =====================================================================
   2. Gemeinsam - Startseite und Rechtstexte
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scrollbar-color:var(--fold) var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;padding-top:64px;overflow-x:hidden}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--print);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 16px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------------------------------------------------------------------
   EINHEITLICHE MASSE - in ALLEN Apps der Familie dieselben Zahlen.
     Kopfzeile 64px, 12px Abstand; body padding-top 64px; Sprungziele 76px;
     Klappmenue bei 64px (ab 860px abwaerts); Fuss 1px Strich, 28px/40px.
   REIHENFOLGE: Wortmarke - Navigation - Farbmodus - Sprachwahl - Knopf - Menue.
   .navlinks margin-inline:auto, Wortmarke ohne margin-right:auto.
   --------------------------------------------------------------------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--header-bg);
  backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;gap:12px;height:64px}
.brand{font-family:var(--display);font-weight:900;text-decoration:none;color:var(--ink);
  font-size:24px;line-height:1;white-space:nowrap;letter-spacing:-.02em}
.navlinks{display:flex;align-items:center;gap:2px;margin-inline:auto}
.navlinks a{text-decoration:none;color:var(--ink-soft);font-size:16px;font-weight:700;padding:12px 14px;
  border-radius:999px;min-height:48px;display:flex;align-items:center;transition:color .18s ease,background-color .18s ease}
@media (hover:hover){.navlinks a:hover{color:var(--ink);background:var(--btn-secondary-bg)}}

/* Knoepfe: Pille, wie ein runder Aufkleber auf der Schachtel. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;
  border-radius:999px;font:inherit;font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:transparent;color:var(--ink);border:1.5px solid var(--border);
  transition:transform .16s var(--ease-out),border-color .18s ease,background-color .18s ease,color .18s ease}
@media (hover:hover){.btn:hover{border-color:var(--ink-soft)}}
.btn:active{transform:scale(.97)}
.btn-primary,.navlinks a.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (hover:hover){.btn-primary:hover,.navlinks a.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}}
.btn i{font-size:.95em}
.iconbtn{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);background:var(--surface);
  color:var(--ink);font:inherit;font-size:15px;cursor:pointer;display:grid;place-content:center;
  transition:border-color .18s ease,color .18s ease,transform .16s var(--ease-out)}
@media (hover:hover){.iconbtn:hover{border-color:var(--print);color:var(--print)}}
.iconbtn:active{transform:scale(.94)}
.burger{display:none}

/* Sprachwahl. NUR auf den Startseiten, dort zweimal im Markup. */
.lang-switch{display:flex;align-items:center;gap:8px;font-family:var(--num);font-weight:600;font-size:13px}
.lang-switch a{color:var(--ink-soft);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent;transition:color .18s ease}
@media (hover:hover){.lang-switch a:hover{color:var(--print)}}
.lang-switch a.active{color:var(--ink);border-bottom-color:var(--accent)}
.lang-switch .sep{color:var(--border)}

@media (max-width:860px){
  .burger{display:grid}
  .navlinks{position:absolute;top:64px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:2px;
    padding:10px 16px 16px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 12px 24px var(--card-shadow)}
  .navlinks.open{display:flex}
  .nav > .brand{margin-right:auto}
  .nav > .btn{display:none}
  .navlinks a.cta-menu{display:flex;justify-content:center;width:100%;margin-top:12px}
  .nav > .lang-switch{display:none}
  .navlinks .lang-switch{padding:13px 4px;border-top:1px solid var(--border);margin-top:8px}
}
@media (min-width:861px){.navlinks .lang-switch,.navlinks a.cta-menu{display:none}}

/* FUSSZEILE: Wortmarke, Luecke, Rechtstexte, Hilfe. Kein Betreibersatz. */
footer{border-top:1px solid var(--border);padding:28px 0 40px;color:var(--ink-soft);font-size:15px}
footer .fl{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap}
footer .grow{flex:1 1 auto}
footer .fl > a{white-space:nowrap;padding:6px 0}
footer .brand-sm{white-space:nowrap;flex:0 0 auto;font-size:20px}
@media (max-width:640px){
  footer .fl{justify-content:center;text-align:center;row-gap:12px;column-gap:16px}
  footer .grow{display:none}
  footer .brand-sm{flex:0 0 100%;justify-content:center}
}
footer a{color:var(--ink-soft);text-decoration:none;transition:color .18s ease}
@media (hover:hover){footer a:hover{color:var(--ink)}}
footer a.brand{color:var(--ink)}

/* HILFE: Panel von rechts, hilfe_<sprache>.html im iframe (js/site.js). */
.help-overlay{position:fixed;inset:0;z-index:1090;background:rgba(10,14,16,.55);display:none;opacity:0;transition:opacity .3s ease}
.help-overlay.open{display:block;opacity:1}
.help-panel{position:fixed;top:0;right:0;height:100%;width:40%;max-width:520px;min-width:320px;background:var(--surface);
  border-left:1px solid var(--border);z-index:1100;visibility:hidden;display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .32s var(--ease-out),visibility 0s linear .32s}
.help-panel.open{transform:translateX(0);visibility:visible;box-shadow:-30px 0 60px -20px rgba(0,0,0,.5);
  transition:transform .32s var(--ease-out),visibility 0s}
@media (max-width:800px){.help-panel{width:100%;max-width:none;min-width:0}}
.help-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.help-panel-header h3{margin:0;font-size:18px;font-weight:800;color:var(--ink)}
.help-panel iframe{flex:1;width:100%;border:0;background:#fff}
.help-close{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--ink);
  font:inherit;font-size:17px;line-height:1;cursor:pointer;display:grid;place-content:center}
@media (hover:hover){.help-close:hover{border-color:var(--print);color:var(--print)}}

/* =====================================================================
   3. Nur die Startseite (.page-home) - "Die Faltschachtel"
   Die Seite ist der flach ausgelegte Zuschnitt einer Quartett-Schachtel:
   Deckel (Hero mit Kartenwand), Seitenwaende, Rueckseite, Boden, Laschen.
   Falzlinien gestrichelt, Schnittkanten durchgezogen. Waende klappen beim
   Hereinscrollen um ihre Falzkante auf (js/site.js setzt .in).
   ===================================================================== */
.page-home h1,.page-home h2,.page-home h3{margin:0;font-weight:900;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
.page-home p{margin:0}
.page-home .h2{font-size:clamp(32px,3.6vw,50px)}
.page-home .sub{color:var(--ink-soft);margin-top:12px;max-width:54ch;font-size:18px}
.page-home section[id],.page-home div[id]{scroll-margin-top:76px}
.small{font:500 12.5px/1.5 var(--num);color:var(--ink-soft)}

.net{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) minmax(0,190px);margin:40px auto 72px;perspective:1600px}
.p{background:var(--panel);position:relative;padding:clamp(24px,3.4vw,52px);border:1px solid var(--cut)}
.p + .p{margin-top:-1px}
.fold-t{border-top:1.5px dashed var(--fold)}
.fold-b{border-bottom:1.5px dashed var(--fold)}
.fold-l{border-left:1.5px dashed var(--fold)}
.fold-r{border-right:1.5px dashed var(--fold)}
.c{grid-column:2}
.lft{grid-column:1;border-right:0}
.rgt{grid-column:3;border-left:0}
.tab{background:var(--tab);border:1px solid var(--cut);border-radius:0 0 18px 18px}
.tab.up{border-radius:18px 18px 0 0}
.tab.l{border-radius:18px 0 0 18px}
.tab.r{border-radius:0 18px 18px 0}
.net > .front,.net > .hero-side{grid-row:2}
.lid-tab{height:70px;display:flex;align-items:center;justify-content:center;text-align:center}
.end-tab{height:56px}
@media (max-width:960px){
  .net{grid-template-columns:1fr;margin:20px auto 48px}
  .c,.lft,.rgt{grid-column:1;border:1px solid var(--cut)}
  .net > .front,.net > .hero-side{grid-row:auto}
  .tab.l,.tab.r{display:none}
}
html.js .unfold{transform-origin:50% 0;transform:rotateX(-38deg);opacity:0;transition:transform .9s var(--ease-out),opacity .5s ease}
html.js .unfold.from-l{transform-origin:100% 50%;transform:rotateY(42deg)}
html.js .unfold.from-r{transform-origin:0 50%;transform:rotateY(-42deg)}
html.js .unfold.in{transform:none;opacity:1}
@media (max-width:960px){html.js .unfold.from-l,html.js .unfold.from-r{transform-origin:50% 0;transform:rotateX(-38deg)}html.js .unfold.in{transform:none}}

/* Deckel = Hero: Wand aus echten Kartenfotos, darauf der Titelkasten. */
.front{padding:0;overflow:hidden;min-height:min(620px,calc(100dvh - 190px));display:grid;align-items:end}
.wall{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:3px;align-content:start;overflow:hidden}
.wall img{width:100%;aspect-ratio:4/3;object-fit:cover;opacity:0;animation:tile .6s ease forwards}
.wall::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--wall-dim) 0%,transparent 35%,var(--wall-dim) 70%)}
@keyframes tile{to{opacity:1}}
.hero-box{position:relative;z-index:2;background:var(--panel);margin:clamp(20px,3vw,40px);padding:clamp(22px,3vw,40px);
  border:1px solid var(--cut);box-shadow:var(--shadow);max-width:680px}
.hero-box h1{font-size:clamp(36px,4.2vw,60px)}
.hero-box h1 em{font-style:normal;color:var(--print)}
.hero-box .lead{color:var(--ink-soft);font-size:clamp(17px,1.4vw,19px);margin-top:14px;max-width:44ch}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
@media (max-width:960px){.front{min-height:560px}}
@media (max-width:640px){.wall{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}.hero-box{margin:16px}}

/* Seitenwaende */
.side{display:flex;flex-direction:column;gap:14px;justify-content:center}
.side .sh{font-size:clamp(18px,1.6vw,22px);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;font-weight:900;letter-spacing:-.025em;line-height:1.05;color:var(--ink)}
.side p{color:var(--ink-soft);font-size:15.5px}
.backs{display:flex}
.backs img{width:62px;border-radius:5px;box-shadow:var(--shadow);background:#222}
.backs img + img{margin-left:-20px}
.backs img:nth-child(1){transform:rotate(-8deg)}
.backs img:nth-child(3){transform:rotate(7deg)}
.side .big{font-size:40px;color:var(--print);line-height:1}

/* Drei Arten zu spielen */
.modes{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:clamp(24px,4vw,56px);margin-top:28px;align-items:start}
.ways{display:grid;gap:0;border-top:1px solid var(--border)}
.ways > div{display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding:20px 0;border-bottom:1px solid var(--border)}
.ways i{font-size:24px;color:var(--print);grid-row:span 2;padding-top:3px}
.ways b{font-size:20px;letter-spacing:-.015em}
.ways p{color:var(--ink-soft);font-size:16px;grid-column:2}
.phone{border-radius:26px;overflow:hidden;border:7px solid var(--ink);box-shadow:var(--shadow);background:var(--ink)}
.phone img.shot-dark{display:none}
@media (prefers-color-scheme:dark){html:not(.theme-forced) .phone img.shot-light{display:none}html:not(.theme-forced) .phone img.shot-dark{display:block}}
body.theme-dark .phone img.shot-light{display:none}body.theme-dark .phone img.shot-dark{display:block}
body.theme-light .phone img.shot-light{display:block}body.theme-light .phone img.shot-dark{display:none}
@media (max-width:760px){.modes{grid-template-columns:1fr}.modes .phone{max-width:220px}}

/* Die Quartettkarte - Bauplan wie renderCard() in der App. Masse in cqw. */
.qk{container-type:inline-size;position:relative;background:#f6f5fb;border-radius:10px;padding:2.2%;color:#1c1822;
  box-shadow:0 2px 4px rgba(0,0,0,.18),0 14px 30px rgba(0,0,0,.22)}
.qk-in{border-radius:7px;overflow:hidden;background:var(--qa,#eee)}
.qk-foto{position:relative;aspect-ratio:4/3;overflow:hidden;background:#222}
.qk-foto img{width:100%;height:100%;object-fit:cover}
.qk-name{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.2cqw 4cqw;background:var(--qb,#333);color:#fff;
  font:italic 800 7.2cqw/1.1 system-ui,-apple-system,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-tab{position:absolute;top:0;right:0;background:var(--qc,#555);color:#fff;font:700 6.4cqw/1 system-ui,sans-serif;padding:2.2cqw 3cqw;border-bottom-left-radius:7px}
.qk-body{display:grid;grid-template-columns:11cqw minmax(0,1fr)}
.qk-side{background:var(--qc,#555);display:flex;justify-content:center;padding-top:3cqw}
.qk-flag{width:8.5cqw;height:8.5cqw;border-radius:50%;background:#fff;color:#1c1822;display:grid;place-items:center;font:700 3.6cqw/1 system-ui,sans-serif}
.qk-rows{display:flex;flex-direction:column}
.qk-row{all:unset;box-sizing:border-box;display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;width:100%;
  padding:2.3cqw 3.6cqw;background:var(--qa,#eee);font:500 5.8cqw/1.15 system-ui,-apple-system,sans-serif;color:#1c1822;transition:background-color .2s ease,opacity .2s ease}
.qk-row:nth-child(even){background:var(--qr,#e4e4e4)}
.qk-row .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk-row .v{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.qk-row .d{font-size:.7em;opacity:.45;margin-right:1.2cqw}
button.qk-row{cursor:pointer}
button.qk-row:focus-visible{outline:2px solid #1c1822;outline-offset:-2px}
@media (hover:hover){button.qk-row:hover{filter:brightness(.93)}}
.qk-row.gewinnt{background:#8ee6ec!important;color:#04191b}
.qk-row.verliert{opacity:.5}

/* Probepartie: fuenf Runden an einer Stelle. */
.game{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(180px,.8fr);gap:clamp(16px,2.6vw,32px);margin-top:30px;align-items:start}
.game .who{font:600 13px var(--num);color:var(--ink-soft);margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
.game .who b{color:var(--ink);font-weight:700}
.board .who{display:block}
.hand{position:relative}
.hand .qk{position:relative;z-index:2;transition:transform .5s var(--ease-out),opacity .4s ease,filter .4s ease}
.hand::before,.hand::after{content:"";position:absolute;inset:0;border-radius:10px;background:var(--tab);border:1px solid var(--border);z-index:1}
.hand::before{transform:rotate(-3deg) translate(-6px,6px)}
.hand::after{transform:rotate(2.5deg) translate(6px,4px);z-index:0}
.hand.leer::before,.hand.leer::after{display:none}
.flip{perspective:1200px;position:relative;z-index:2}
.flip-in{position:relative;transition:transform .7s var(--ease-out);transform-style:preserve-3d}
.flip .front-s,.flip .back-s{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .back-s{position:absolute;inset:0;transform:rotateY(180deg)}
.flip .back-s img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:var(--shadow)}
.flip:not(.open) .flip-in{transform:rotateY(180deg)}
.hand.verloren .qk{opacity:.55;filter:saturate(.3);transform:translateY(8px) rotate(-1deg)}
.board{display:grid;gap:14px;align-content:start}
.score{display:flex;align-items:baseline;gap:10px;font:700 42px/1 var(--num);font-variant-numeric:tabular-nums}
.score span{font-size:24px;color:var(--ink-soft)}
.score-who{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft);margin-top:-6px;max-width:150px}
.pips{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.pips li{flex:1;height:8px;border-radius:4px;background:var(--tab)}
.pips li.w{background:var(--print)}
.pips li.l{background:var(--ink-soft)}
.pips li.t{background:var(--fold)}
.msg{color:var(--ink-soft);font-size:16px;min-height:4.8em}
.msg b{color:var(--ink)}
.game .btn[hidden]{display:none}
@media (max-width:860px){.game{grid-template-columns:1fr 1fr}.board{grid-column:1 / -1}}
@media (max-width:420px){.game{gap:12px}.score{font-size:34px}}

/* Typen als Streifen: Tipp oeffnet einen Streifen. */
.strips{display:flex;gap:5px;height:min(480px,60vh);margin-top:32px}
.strip{all:unset;box-sizing:border-box;position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;border-radius:4px;
  transition:flex-grow .5s cubic-bezier(.77,0,.175,1)}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.8);transition:filter .4s ease}
.strip .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 16px;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff}
.strip .cap b{display:block;font-size:21px;font-weight:900;letter-spacing:-.02em;white-space:nowrap}
.strip .cap small{display:block;opacity:0;font-size:14.5px;max-width:34ch;transition:opacity .3s ease}
.strip.open{flex-grow:5}
.strip.open img{filter:none}
.strip.open .cap small{opacity:.92}
.strip .v{position:absolute;left:50%;bottom:22px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;color:#fff;
  font-weight:900;font-size:18px;white-space:nowrap;transition:opacity .2s;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.strip.open .v{opacity:0}
.strip:not(.open) .cap{opacity:0;visibility:hidden}
.strip:focus-visible{outline:2px solid var(--print);outline-offset:2px}
@media (max-width:760px){
  .strips{flex-direction:column;height:auto}
  .strip{flex:none;height:64px}
  .strip.open{height:240px}
  .strip .v{display:none}
  .strip:not(.open) .cap{opacity:1;visibility:visible}
  .strip:not(.open) .cap small{display:none}
  .strip .cap{padding:12px 16px}
  .strip .cap small{white-space:normal}
}

/* Season Pass: Punkte, zwei Spuren wie in der Stufenleiter der App, Themen als Season-Ruecken.
   Raster nach der Breite des Abschnitts (Containerabfrage), nicht nach dem Schirm. */
.season{container-type:inline-size;display:grid;gap:clamp(26px,3.6vw,40px);margin-top:28px}
.season h3{font-size:22px;letter-spacing:-.02em}
.qsp dl{margin:12px 0 0;display:grid}
.qsp dl > div{display:grid;grid-template-columns:64px minmax(0,1fr);align-content:start;gap:16px;padding:16px 0;border-top:1.5px dashed var(--fold)}
.qsp dt{font:700 34px/1 var(--num);color:var(--print);font-variant-numeric:tabular-nums}
.qsp dd{margin:0;min-width:0;overflow-wrap:break-word}
.qsp dd b{display:block;font-size:17px;line-height:1.3}
.qsp dd span{display:block;color:var(--ink-soft);font-size:15.5px;margin-top:3px}
@container (min-width:640px){
  .qsp dl{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .qsp dl > div{grid-template-columns:1fr;gap:10px}
}
.tracks{display:grid;border:1px solid var(--cut);border-radius:14px;overflow:hidden}
.track{padding:20px 20px 22px;background:var(--surface);min-width:0}
.track + .track{border-top:1.5px dashed var(--fold)}
.track.pass{background:var(--accent-soft)}
.track .kind{font:600 12.5px/1.45 var(--num);color:var(--ink-soft);margin:4px 0 14px}
.track ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:16px;line-height:1.4}
.track li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start;overflow-wrap:break-word}
.track li i{color:var(--print);padding-top:3px;text-align:center}
@container (min-width:480px){
  .tracks{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .track + .track{border-top:0;border-left:1.5px dashed var(--fold)}
}
.seasons{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
.seasons li{display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-content:center;min-width:0}
.seasons img{grid-row:span 2;width:46px;border-radius:5px;box-shadow:0 1px 2px var(--card-shadow),0 6px 14px var(--card-shadow);
  transition:transform .2s var(--ease-out)}
.seasons b{align-self:end;font-size:15.5px;line-height:1.2;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.seasons span{font:500 12.5px/1.4 var(--num);color:var(--ink-soft)}
@container (min-width:520px){
  .seasons{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}
  .seasons li{grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:2px}
  .seasons img{grid-row:auto;width:min(100%,104px);margin-bottom:10px}
  .seasons b{font-size:16.5px}
}
@container (max-width:400px){
  .seasons{column-gap:10px}
  .seasons li{grid-template-columns:38px minmax(0,1fr);column-gap:10px}
  .seasons img{width:38px}
  .seasons b{font-size:14.5px}
}
@media (hover:hover){.seasons li:hover img{transform:translateY(-4px) rotate(-2deg)}}
.page-home .season + .note{margin-top:28px}

/* Shop (22.10.2026): drei Faecher in der Bauform der Season-Spuren (.track), oben die Paeckchen
   und Mega Boxen als freigestellte WebP aus make_shop_bilder.js (passen zu Hell und Dunkel). Die
   Bildzeile hat ein festes Seitenverhaeltnis, damit die Texte der drei Faecher auf einer Hoehe beginnen. */
.shop{display:grid;margin-top:28px;border:1px solid var(--cut);border-radius:14px;overflow:hidden}
.shop h3{font-size:22px;letter-spacing:-.02em}
.shop-pics{display:flex;justify-content:center;align-items:center;aspect-ratio:4/3;max-width:380px;margin:-6px auto 8px}
.shop-pics img{min-width:0;height:auto}
.shop-pack img{width:54%;margin:0 -14%}
.shop-pack img:nth-child(1){transform:rotate(-7deg) translateY(-2%)}
.shop-pack img:nth-child(2){position:relative;z-index:1}
.shop-pack img:nth-child(3){transform:rotate(7deg) translateY(-2%)}
.shop-mix img{width:62%}
.shop-box img{width:68%;margin:0 -14%}
.shop-box img:nth-child(1){transform:translateY(-12%)}
.shop-box img:nth-child(2){position:relative;z-index:1;transform:translateY(12%)}
@media (min-width:861px){
  .shop{grid-template-columns:repeat(3,minmax(0,1fr))}
  .shop .track + .track{border-top:0;border-left:1.5px dashed var(--fold)}
}

/* Spielregel */
.rules{columns:2;column-gap:clamp(24px,4vw,56px);margin-top:26px}
.rules p{break-inside:avoid;margin:0 0 18px;font-size:16.5px}
.rules p b{display:block;font-size:18px;margin-bottom:2px}
.rules p span{color:var(--ink-soft)}
@media (max-width:700px){.rules{columns:1}}

/* Preise als Aufkleber */
.stickers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px;align-items:start}
.st{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 20px 18px;box-shadow:var(--shadow)}
.st:nth-child(1){transform:rotate(-1.6deg)}
.st:nth-child(2){transform:rotate(.9deg);margin-top:14px}
.st:nth-child(3){transform:rotate(-.5deg)}
.st h3{font-size:26px}
.st .kind{font:600 12.5px var(--num);color:var(--ink-soft);margin:4px 0 14px}
.st.plus{background:var(--plus-bg);color:#fff;border-color:transparent}
.st.plus .kind,.st.plus dt{color:rgba(255,255,255,.85)}
.st dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:7px 12px;font-size:15px}
.st dt{color:var(--ink-soft)}
.st dd{margin:0;font-weight:800;text-align:right}
.note{margin-top:22px;color:var(--ink-soft);font-size:15px}
@media (max-width:860px){.stickers{grid-template-columns:1fr}.st:nth-child(n){transform:none;margin-top:0}}

/* Schluss */
.end{text-align:center;display:grid;justify-items:center;gap:16px}
.end img{width:88px;height:88px;border-radius:22%;box-shadow:var(--shadow)}
.end .sub{margin:0}
.soon{font:600 13px var(--num);color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){
  html.js .unfold,html.js .unfold.from-l,html.js .unfold.from-r{transform:none;opacity:1;transition:none}
  .wall img{animation:none;opacity:1}
  .strip,.flip-in,.hand .qk{transition:none}
}

/* =====================================================================
   4. Nur die Rechtstexte (.page-legal)
   ===================================================================== */
.page-legal main{padding:56px 0 72px}
.page-legal .legal{max-width:78ch;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.page-legal .legal h1{font-family:var(--display);font-weight:900;font-size:clamp(28px,7.4vw,48px);line-height:1.05;letter-spacing:-.025em;margin:0 0 12px;color:var(--ink)}
.page-legal .legal .stand{color:var(--ink-soft);font-size:15px;margin:0 0 34px}
.page-legal .legal h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin:44px 0 12px;padding-top:28px;border-top:1px dashed var(--fold);color:var(--ink)}
.page-legal .legal h2:first-of-type{border-top:none;padding-top:0}
.page-legal .legal h3{font-size:18px;font-weight:800;margin:26px 0 8px;color:var(--ink)}
.page-legal .legal p,.page-legal .legal ul,.page-legal .legal ol{color:var(--ink-soft);font-size:17px;line-height:1.65;margin:0 0 14px}
.page-legal .legal ul,.page-legal .legal ol{padding-left:22px}
.page-legal .legal li{margin-bottom:7px}
.page-legal .legal strong{color:var(--ink)}
.page-legal address{font-style:normal}
.page-legal .legal code{font-family:var(--num);font-size:.92em;background:var(--accent-soft);padding:2px 6px;border-radius:4px}
.page-legal .legal .box{background:var(--surface);border:1px solid var(--cut);border-radius:10px;box-shadow:var(--shadow);padding:20px 24px;margin:0 0 20px;color:var(--ink)}
.page-legal .legal table{border-collapse:collapse;width:100%;font-size:15.5px}
.page-legal .legal th,.page-legal .legal td{border-bottom:1px solid var(--border);padding:8px 10px;text-align:left;color:var(--ink-soft)}
.page-legal .legal th{color:var(--ink)}
.page-legal .toc{background:var(--surface);border:1px solid var(--cut);border-radius:10px;box-shadow:var(--shadow);padding:18px 24px;margin:0 0 38px}
.page-legal .toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px;font-size:16px;line-height:1.7}
@media (max-width:640px){
  .page-legal .toc ol{columns:1}
  .page-legal .toc{padding:16px 18px}
  .page-legal .legal table{font-size:14px}
  .page-legal .legal th,.page-legal .legal td{padding:7px 6px;overflow-wrap:anywhere}
  .page-legal .legal .box{padding:16px 16px}
}
.page-legal .toc a{text-decoration:none}
@media (hover:hover){.page-legal .toc a:hover{text-decoration:underline}}
.page-legal h2[id],.page-legal section[id]{scroll-margin-top:76px}

/* CMS2-Groessenstufen je Kasten (design.json "groessen"); Werte gehoeren der Site.
   Block: Breite ueber max-width. Raster: Spannweite in Spalten. Reihe (flex): Anteil. Raster selbst: Spaltenzahl. */
.cms2-b-s { max-width: 40rem; margin-inline: auto; }
.cms2-b-m { max-width: 60rem; margin-inline: auto; }
.cms2-b-v { max-width: none; width: 100%; }
.cms2-sp-2 { grid-column: span 2; }
.cms2-sp-3 { grid-column: span 3; }
.cms2-sp-voll { grid-column: 1 / -1; }
.cms2-f-25 { flex: 0 1 25%; }
.cms2-f-33 { flex: 0 1 33.333%; }
.cms2-f-50 { flex: 0 1 50%; }
.cms2-f-66 { flex: 0 1 66.666%; }
.cms2-f-75 { flex: 0 1 75%; }
.cms2-f-100 { flex: 0 0 100%; }
.cms2-g-1 { grid-template-columns: minmax(0, 1fr) !important; }
.cms2-g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.cms2-g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.cms2-g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.cms2-h-s { min-height: 12rem; }
.cms2-h-m { min-height: 24rem; }
.cms2-h-l { min-height: 40rem; }
@media (max-width: 640px) {
  .cms2-b-s, .cms2-b-m { max-width: none; }
  .cms2-sp-2, .cms2-sp-3 { grid-column: 1 / -1; }
  .cms2-f-25, .cms2-f-33, .cms2-f-50, .cms2-f-66, .cms2-f-75 { flex-basis: 100%; }
  .cms2-g-3, .cms2-g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cms2-h-m { min-height: 16rem; }
  .cms2-h-l { min-height: 24rem; }
}

/* Mobiles Menue: der Kopf steht fest, das offene Menue scrollt in sich, wenn es hoeher als der Bildschirm ist
   (Querformat, Navigation mit Unterpunkten). Sonst waeren die unteren Punkte und die Aktion nicht erreichbar. */
@media (max-width:860px){
  .navlinks{box-sizing:border-box;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain}
}