/* ============================================================
   ZwoaZam – Oberfläche (Stufe 1) im Look von 4farben.de
   Tokens, Tische, Kartengründe und Rückseiten 1:1 aus dem
   freigegebenen Muster (muster2/template.html).
   ============================================================ */
/* ---------- Schriften: lokal ausgeliefert (keine Google-Server) ----------
   Die woff2-Dateien liegen noch nicht vor (Ordner schriften/, siehe doku/SEITEN.md).
   Bis dahin greifen die Ersatzschriften der Tokens --serif und --sans. */
/* Schriften: css/schriften.css */
:root{
  --filz:#1d3a2c; --filz-tief:#14281f; --filz-hell:#27503c;
  --karton:#f3eee1; --karton-warm:#e8e0cd;
  --tinte:#22201b; --tinte-weich:#5c574c;
  --messing:#c8952c; --messing-hell:#e8c36a; --dunkelgruen:#163226;
  --herz:#b0242a; --eichel:#59401f; --gras:#2c6b3f; --schellen:#c07f10;
  --linie:rgba(34,32,27,.16);
  --radius:7px;
  --serif:"Zilla Slab",Rockwell,"Bookman Old Style",Georgia,serif;
  --sans:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --messing-verlauf:linear-gradient(145deg,#f1d68a 0%,#c8952c 32%,#94681a 58%,#d9ac4c 80%,#a87a22 100%);
  --welt:#1F8A8A; --welt-tief:#166868; --welt-hell:#d6eeee;
  --seite-hintergrund:#f3eee1;   /* Betreiber-Gestaltung (motive/gestaltung.json) setzt diese Werte inline */
  --emblem:url("../logo/zwoazam-emblem-zz.svg");
}
[data-welt="pflaume"]{--welt:#6B3A6B; --welt-tief:#4f2a4f; --welt-hell:#efe2ef}

/* ---------- Tischdesigns ---------- */
[data-tisch="wirtshaus"]{
  --t-flaeche:url("tex/filz.svg"),radial-gradient(ellipse at 50% 38%,var(--filz-hell) 0%,var(--filz) 58%,var(--filz-tief) 100%);
  --t-rahmen:var(--messing-verlauf); --t-rahmen-b:7px;
  --t-text:#f3eee1; --t-text2:rgba(243,238,225,.72); --t-status:#fff;
  --t-k2-bg:rgba(243,238,225,.1); --t-k2-rand:rgba(243,238,225,.22); --t-k2-text:#f3eee1;
  --t-kasten:#f3eee1;
}
[data-tisch="stube"]{
  --t-flaeche:url("tex/papier.svg"),url("tex/faser.svg"),radial-gradient(ellipse at 50% 30%,#f7f3e8 0%,#f3eee1 60%,#e9e2cf 100%);
  --t-rahmen:linear-gradient(#163226,#163226); --t-rahmen-b:9px;
  --t-text:#22201b; --t-text2:#5a5548; --t-status:#22201b;
  --t-k2-bg:#fffdf8; --t-k2-rand:#d8cba9; --t-k2-text:#22201b;
  --t-kasten:#fffdf8;
}
[data-tisch="holz"]{
  --t-flaeche:radial-gradient(ellipse at 50% 40%,rgba(255,214,150,.10) 0%,transparent 55%,rgba(20,8,0,.38) 100%),
    url("tex/holz.svg"),
    repeating-linear-gradient(0deg,rgba(32,14,4,.55) 0 2px,rgba(255,220,170,.10) 2px 3px,transparent 3px 72px),
    repeating-linear-gradient(0deg,rgba(255,226,180,.05) 0 1px,transparent 1px 6px,rgba(60,28,8,.06) 6px 8px,transparent 8px 13px),
    repeating-linear-gradient(0deg,#8a5833 0 72px,#7a4b2a 72px 144px,#93603a 144px 216px,#80502d 216px 288px);
  --t-rahmen:var(--messing-verlauf); --t-rahmen-b:5px;
  --t-text:#fbf3e2; --t-text2:rgba(251,243,226,.78); --t-status:#fff;
  --t-k2-bg:rgba(34,20,8,.28); --t-k2-rand:rgba(251,243,226,.3); --t-k2-text:#fbf3e2;
  --t-kasten:#f3eee1;
}
[data-tisch="marmor"]{
  --t-flaeche:url("tex/marmor.svg") center/cover,radial-gradient(ellipse at 40% 30%,#24211d 0%,#141311 60%,#0b0a09 100%);
  --t-rahmen:var(--messing-verlauf); --t-rahmen-b:7px;
  --t-text:#f3eee1; --t-text2:rgba(243,238,225,.68); --t-status:#e8c36a;
  --t-k2-bg:rgba(243,238,225,.07); --t-k2-rand:rgba(232,195,106,.35); --t-k2-text:#f3eee1;
  --t-kasten:#f3eee1;
}

/* ---------- Kartengründe ---------- */
[data-grund="hellblau2"]{--g-aussen:#cfe6f7;--g-pad:0px;--g-feld:#cfe6f7;--g-feldrand:0 solid transparent;--g-rand:rgba(31,78,140,.28)}
[data-grund="hellblau"]{--g-aussen:#dbeefb;--g-pad:0px;--g-feld:#dbeefb;--g-feldrand:0 solid transparent;--g-rand:rgba(31,78,140,.25)}
[data-grund="creme"]{--g-aussen:#f3eee1;--g-pad:0px;--g-feld:#f3eee1;--g-feldrand:0 solid transparent;--g-rand:rgba(34,32,27,.18)}
[data-grund="papier"]{--g-aussen:#fffdf8;--g-pad:0px;--g-feld:#fffdf8;--g-feldrand:0 solid transparent;--g-rand:rgba(34,32,27,.16)}
[data-grund="warm"]{--g-aussen:#e8e0cd;--g-pad:0px;--g-feld:#e8e0cd;--g-feldrand:0 solid transparent;--g-rand:rgba(34,32,27,.2)}
[data-grund="rahmen"]{--g-aussen:#163226;--g-pad:7%;--g-feld:#fffdf8;--g-feldrand:0 solid transparent;--g-rand:rgba(0,0,0,.35)}
[data-grund="gold"]{--g-aussen:#f3eee1;--g-pad:6%;--g-feld:#f3eee1;--g-feldrand:1.5px solid #c8952c;--g-rand:rgba(34,32,27,.18)}
[data-grund="frei"]{--g-aussen:var(--frei-grund,#cfe6f7);--g-pad:0px;--g-feld:var(--frei-grund,#cfe6f7);--g-feldrand:0 solid transparent;--g-rand:rgba(34,32,27,.22)}

/* ---------- Rückseiten ---------- */
[data-rueck="gruen"]{--r-bg:url("tex/raute-gruen.svg") center/12px 18px,#1d3a2c;--r-kante:#f3eee1;--r-linie:rgba(232,195,106,.75);--r-emblem:none}
[data-rueck="dunkel"]{--r-bg:radial-gradient(ellipse at 50% 40%,#1e4030 0%,#163226 60%,#10261c 100%);--r-kante:rgba(200,149,44,.6);--r-linie:#c8952c;--r-emblem:var(--emblem)}
[data-rueck="bordeaux"]{--r-bg:url("tex/raute-bordeaux.svg") center/12px 18px,#b0242a;--r-kante:#f3eee1;--r-linie:rgba(232,195,106,.8);--r-emblem:none}
[data-rueck="welt"]{--r-bg:radial-gradient(ellipse at 50% 40%,color-mix(in srgb,var(--welt) 82%,#fff) 0%,var(--welt) 55%,var(--welt-tief) 100%);--r-kante:rgba(232,195,106,.75);--r-linie:#e8c36a;--r-emblem:var(--emblem)}
[data-rueck="frei"]{--r-bg:var(--frei-rueck,#163226);--r-kante:rgba(232,195,106,.65);--r-linie:rgba(232,195,106,.85);--r-emblem:var(--emblem)}

/* ---------- Ränder (Ebene über dem Kartengrund) ---------- */
[data-rand]{--rd-sh:none;--rd-pad:initial;--rd-bg:initial}
[data-rand="duenn"]{--rd-sh:inset 0 0 0 1.5px #22201b}
[data-rand="messing"]{--rd-sh:inset 0 0 0 2px #c8952c}
[data-rand="dunkel"]{--rd-sh:inset 0 0 0 1px rgba(0,0,0,.35);--rd-pad:6%;--rd-bg:#163226}

/* ============================================================
   Grundgerüst
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--seite-hintergrund);color:var(--tinte);font-family:var(--sans);font-size:17px;line-height:1.62;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.14;letter-spacing:-.01em;margin:0 0 .5em}
button,input,select{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:8px;top:-60px;z-index:100;background:#163226;color:#f3eee1;padding:10px 14px;border-radius:8px}
.sprung:focus{top:8px}
:focus-visible{outline:3px solid var(--messing);outline-offset:2px}
.huelle{width:min(1080px,100% - 2.5rem);margin-inline:auto}
.huelle.breit{width:min(1180px,100% - 2rem)}
.kicker{color:#9a6e18;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.72rem}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(200,149,44,.16);border:1px solid rgba(200,149,44,.45);color:#7a5a14;padding:5px 12px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}

/* ---------- Kopfzeile (schlank, nach 4farben.de) ---------- */
:root{--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px)}
.kopf{padding:var(--sa-t) var(--sa-r) 0 var(--sa-l);position:sticky;top:0;z-index:40;background:rgba(243,238,225,.93);background:color-mix(in srgb,var(--seite-hintergrund) 93%,transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-bottom:1px solid var(--linie)}
.kopf__inhalt{display:flex;align-items:center;gap:.7rem 1.4rem;padding:.45rem 0;width:min(1180px,100% - 2rem);margin-inline:auto}
.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinte);min-height:44px;flex:0 0 auto;padding-right:1rem;border-right:1px solid rgba(200,149,44,.35)}
.marke__wappen{position:relative;width:44px;height:58px;flex:0 0 auto;border-radius:7px;overflow:hidden;box-shadow:0 5px 12px rgba(0,0,0,.18);margin:-6px 0 -6px;background:#f7f1e3}
.marke__wappen img{width:100%;height:100%;display:block;object-fit:cover}
.welt-band{position:absolute;left:-22px;top:9px;width:80px;background:var(--welt);color:#fff;font:700 .44rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:.22rem 0;transform:rotate(-38deg);box-shadow:0 0 0 1px rgba(232,195,106,.75),0 2px 5px rgba(0,0,0,.2)}
.wortmarke{display:flex;flex-direction:column;justify-content:center;line-height:1}
.wortmarke b{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.wortmarke small{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9a6e18;margin-top:4px}
.kopf nav{display:flex;gap:.2rem 1.3rem;align-items:center;flex:1;min-width:0}
.kopf nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--tinte-weich);font-size:.92rem;font-weight:600;border-bottom:3px solid transparent;padding-top:3px;white-space:nowrap}
.kopf nav a:hover{color:var(--tinte);border-bottom-color:rgba(200,149,44,.6)}
.kopf nav a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--welt)}
.welt-icon{width:34px;height:34px;border-radius:8px;overflow:hidden;flex:0 0 auto;outline:2px solid var(--messing);outline-offset:2px;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.welt-icon img{width:100%;height:100%;display:block}
/* Platz der Login-Pille: der Konto-Kern (K0-6b) setzt hier seine Pille „Z“ ein (konto/ui/kopfleiste.css), ohne Kern bleibt .kopf__login.
   K0-6d (P2-L13): als Flex-Kind darf der Platz schrumpfen (min-width:0) – ein langer Name endet dann mit „…“ statt aus dem Kopf zu ragen. */
.kopf__konto{display:flex;align-items:center;flex:0 1 auto;min-width:0;min-height:44px;margin-left:8px}
.kopf__konto .kopf__login{margin-left:0}
/* Kern-Pille auf dem HELLEN Kopf (Tisch, Meine Spiele …): nur Schrift und Rand dunkler (Kontrast; Kern-Werte sind für dunkle
   Köpfe gemacht). Kreis, Form, Größe und das Menü bleiben wie im Kern. Auf dem dunklen Startkopf gelten die Kern-Werte. */
.kopf__konto .lp.lp--z{--lp-text:#7a5a14;--lp-rand:rgba(122,90,20,.45)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .kopf__konto .lp.lp--z{--lp-text:#e8c36a;--lp-rand:rgba(200,149,44,.5)}
.kopf__login{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:8px;text-decoration:none;color:var(--messing);font-size:.86rem;font-weight:700;white-space:nowrap}
.kopf__login .pille-z{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#163226;border:2px solid var(--welt);color:#e8c36a;font:700 1.05rem/1 var(--serif);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.kopf__login:hover{color:#94681a}
.kopf__login:hover .pille-z{border-color:#e8c36a}
.kopf__portal{font-size:.8rem;font-weight:600;color:var(--messing);text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:700px){
  .kopf__inhalt{flex-wrap:wrap;gap:0 .6rem;padding:.35rem 0 0;width:calc(100% - 24px)}
  .marke{border-right:0;padding-right:0;flex:1;min-width:0}
  .marke__wappen{width:34px;height:44px;margin:0}
  .welt-band{font-size:.36rem;left:-24px;top:6px}
  .wortmarke b{font-size:1.15rem}
  .wortmarke small{font-size:.6rem}
  .kopf nav{order:3;flex:1 1 100%;justify-content:space-between;gap:0;border-top:1px solid var(--linie);margin-top:.3rem}
  .kopf nav a{flex:1 1 auto;justify-content:center;font-size:.84rem}
  .kopf__portal{display:none}
  .welt-icon{width:30px;height:30px}
}

@media (max-width:400px){
  .kopf nav a{font-size:.78rem;letter-spacing:-.005em}
}

/* ============================================================
   Startseite: Schnellstart (Entwurf B „Türkiser Tisch“, doku/STARTSEITE.md)
   Der Tisch nutzt dieselben Variablen wie der Spieltisch (--t-flaeche aus --filz*, --welt, Rückseite [data-rueck]),
   damit die Betreiber-Gestaltung durchschlägt. Ringsum ein dunkler Grund aus dem Filz (kein Grün als Fläche).
   ============================================================ */
[data-tisch="wirtshaus"]{--start-a:color-mix(in srgb,var(--filz) 72%,#000);--start-b:color-mix(in srgb,var(--filz-tief) 82%,#000);--start-c:color-mix(in srgb,var(--filz-tief) 56%,#000)}
[data-tisch="holz"]{--start-a:#4a2e18;--start-b:#36210f;--start-c:#221408}
[data-tisch="marmor"]{--start-a:#26231f;--start-b:#181614;--start-c:#0b0a09}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]){background:var(--start-c)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) body{background:radial-gradient(ellipse at 50% 0%,var(--start-a) 0%,var(--start-b) 45%,var(--start-c) 100%) no-repeat,var(--start-c)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .kopf{background:color-mix(in srgb,var(--start-b) 92%,transparent);border-bottom:3px solid var(--messing)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .marke{color:var(--karton);border-right-color:rgba(232,195,106,.3)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .marke__wappen{box-shadow:0 0 0 1.5px var(--messing),0 5px 12px rgba(0,0,0,.35)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .wortmarke small{color:var(--messing-hell)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .kopf nav a{color:#cfe3df}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .kopf nav a:hover{color:var(--karton)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .kopf__login{color:var(--messing-hell)}
html:is([data-sicht="uebersicht"],[data-sicht="einstellungen"]):not([data-tisch="stube"]) .gast-hinweis{box-shadow:0 8px 20px rgba(0,0,0,.3)}

.start{padding:22px 0 30px}
.start__rahmen{border-radius:30px}
.start__tisch{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:22px;align-items:stretch;padding:22px 24px;border-radius:23px}
.start .hero{display:flex;flex-direction:column;gap:16px;min-width:0}
.start .hero__marke{display:flex;align-items:center;gap:20px}
.start .hero__wappen{position:relative;width:96px;height:128px;flex:0 0 auto;border-radius:12px;overflow:hidden;background:#f7f1e3;box-shadow:0 0 0 2px var(--messing),0 0 0 5px var(--filz-tief),0 14px 28px rgba(0,0,0,.45)}
.start .hero__wappen img{width:100%;height:100%;display:block;object-fit:cover}
.start .hero__wappen .welt-band{font-size:.56rem;left:-30px;top:15px;width:116px;padding:.3rem 0}
.start h1{font-size:clamp(2.4rem,5vw,4.2rem);margin:0;line-height:1;color:var(--t-status);text-shadow:0 2px 0 rgba(0,0,0,.25);overflow-wrap:anywhere}
[data-tisch="stube"] .start h1{text-shadow:none}
.start .hero__satz{font-size:1.08rem;line-height:1.45;color:var(--t-text);opacity:.88;margin:8px 0 0;max-width:30ch}

.start .sofort{display:flex;align-items:center;justify-content:center;gap:12px;align-self:flex-start;min-height:64px;padding:0 34px;border-radius:16px;background:var(--messing-verlauf);color:#221a06;border:1px solid var(--messing-hell);font:700 1.5rem/1 var(--serif);cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 0 0 3px var(--filz-tief),0 12px 24px rgba(0,0,0,.35);transition:transform .15s,filter .15s}
.start .sofort:hover{transform:translateY(-1px);filter:brightness(1.06)}
.start .sofort:active{transform:none}
.start .sofort .los__pfeil{font-size:1.6em}

/* Kartenfächer: 7 echte Karten (5 decken sich beim Laden auf, 2 Rückseiten) */
.start .filz{position:relative;flex:1;min-height:280px}
.start .filz__fuss{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;color:var(--t-text2);font-size:.84rem;padding:0 16px}
.start .filz__fuss b{color:var(--messing-hell);font-family:var(--serif)}
[data-tisch="stube"] .start .filz__fuss b{color:#7a5a14}
.faecher{--k:122px;--r:380px;--w:10deg;--dreh:calc(var(--r) + var(--k) / 2);position:absolute;left:50%;top:84px;width:var(--k);height:var(--k);margin-left:calc(var(--k) / -2)}
.faecher .platz{position:absolute;inset:0;transform-origin:50% var(--dreh);transform:rotate(calc(var(--i) * var(--w)));z-index:calc(10 - var(--a))}
.faecher .karte{width:100%;cursor:default}
.faecher .karte__innen{animation:aufdecken .62s cubic-bezier(.3,.7,.3,1) forwards;animation-delay:calc(.35s + var(--n) * .14s)}
.faecher .platz--zu .karte__innen{animation:none}
@keyframes aufdecken{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.faecher .platz--mitte .karte__vorn{box-shadow:inset 0 0 0 1px var(--g-rand),0 0 0 3px var(--messing-hell),0 10px 22px rgba(0,0,0,.4)}

/* Partie-Kasten (Karton auf dem Tisch) */
.neue-partie{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;background:#f3eee1;color:var(--tinte);border-radius:20px;border-top:3px solid var(--messing);box-shadow:0 0 0 1px rgba(200,149,44,.45),0 18px 36px rgba(0,0,0,.32);padding:20px 24px 22px}
.neue-partie::before{content:"";position:absolute;inset:6px;top:4px;border:1px solid rgba(200,149,44,.3);border-radius:15px;pointer-events:none}
.neue-partie h2{font-size:1.45rem;margin:0;color:var(--dunkelgruen);display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.neue-partie h2 small{font:700 .7rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#9a6e18}
.neue-partie .feld{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:6px 14px;padding-top:12px;border-top:1px solid #ece3cc}
.neue-partie .feld--oben{align-items:start}
.neue-partie .feld__name{font:700 .98rem/1.2 var(--serif);color:var(--tinte)}
.neue-partie .feld__name small{display:block;font:500 .74rem/1.3 var(--sans);color:var(--tinte-weich);margin-top:2px}
.neue-partie .spieler{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kk{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:#fffdf8;border:2px solid var(--welt);cursor:pointer;text-align:left;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 4px 10px rgba(19,82,82,.08);min-width:0}
.kk:hover{transform:translateY(-2px)}
.kk[aria-pressed="true"]{background:#fbf1d8;border-color:var(--messing);box-shadow:0 0 0 3px color-mix(in srgb,var(--welt) 35%,transparent),0 8px 16px rgba(19,82,82,.14)}
.kk > span:last-child{min-width:0}
.kk b{display:block;font:700 1.18rem/1.1 var(--serif);color:var(--dunkelgruen);overflow-wrap:anywhere}
.kk small{display:block;font-size:.76rem;color:var(--tinte-weich);line-height:1.3;margin-top:2px}
.mini{position:relative;width:40px;height:44px;flex:0 0 auto}
.mini i{position:absolute;top:0;left:0;width:34px;height:34px;border-radius:5px;background:var(--r-bg);box-shadow:inset 0 0 0 1.5px var(--messing-hell),0 3px 6px rgba(0,0,0,.2)}
.mini i::after{content:"";position:absolute;inset:20%;background:var(--r-emblem) center/contain no-repeat}
.mini i+i{left:8px;top:9px;transform:rotate(8deg)}
.mehr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px;font-size:.8rem;color:var(--tinte-weich)}
.mehr button{border:1.5px solid color-mix(in srgb,var(--welt) 55%,transparent);background:transparent;border-radius:999px;padding:3px 11px;font-size:.8rem;font-weight:700;color:var(--welt-tief);cursor:pointer;min-height:32px}
.mehr button[aria-pressed="true"]{background:var(--welt);color:#fff;border-color:var(--welt)}
/* Spielerplakette wie am Tisch: Initiale, Name als Eingabe, Partien · Siege */
.start-plakette{display:flex;align-items:center;gap:10px;min-width:0;padding:5px 12px 5px 6px;border-radius:14px;background:#fffdf8;border:1.5px solid #d8cba9;box-shadow:inset 5px 0 0 var(--welt)}
.start-plakette:focus-within{border-color:var(--welt);box-shadow:inset 5px 0 0 var(--welt),0 0 0 3px color-mix(in srgb,var(--welt) 28%,transparent)}
.start-plakette .kreis{width:34px;height:34px;font-size:.98rem;margin-left:4px}
.start-plakette__name{flex:1 1 auto;min-width:0;width:100%;min-height:40px;border:0;background:transparent;padding:4px 2px;font:700 1.08rem var(--serif);color:var(--tinte)}
.start-plakette__name:focus{outline:none}
.start-plakette__stand{flex:0 1 auto;font-size:.78rem;color:var(--tinte-weich);white-space:nowrap;text-align:right;line-height:1.2}
.start-plakette__stand b{font-family:var(--serif);font-size:1rem;color:var(--welt-tief)}
.wahl2{display:flex;flex-wrap:wrap;gap:6px}
.wahl2 button{flex:1 1 auto;min-height:44px;border-radius:10px;border:1.5px solid #d8cba9;background:#fffdf8;font-size:.86rem;font-weight:700;color:var(--tinte);cursor:pointer;padding:6px 12px}
.wahl2 button:hover{border-color:var(--welt)}
.wahl2 button[aria-pressed="true"]{border-color:var(--welt);background:var(--welt);color:#fff;box-shadow:inset 0 0 0 1px rgba(232,195,106,.7)}
/* Spielaufbau: Zeile „Spielart“ (zuletzt gespielte, „ändern ▾“ klappt die Kacheln im Kasten auf) und Schwierigkeit
   (Variante A mit aufklappbarer Kachel, Elmar 14.10.2026; Handy 2, PC 3 Kacheln je Reihe) */
.neue-partie .feld.feld--art,.neue-partie .feld.feld--stufe{grid-template-columns:minmax(0,1fr)}
.neue-partie .feld.feld--art{padding-top:0;border-top:0}
.neue-partie .feld--art .feld__name,.neue-partie .feld--stufe .feld__name{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.neue-partie .feld--art .feld__name small,.neue-partie .feld--stufe .feld__name small{margin-top:0;text-align:right}
.art-wahl{min-width:0}
.art-aktuell{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 12px;border:2px solid var(--messing);border-radius:12px;background:#fffdf8;color:var(--tinte);font:inherit;text-align:left;cursor:pointer}
.art-aktuell:hover{background:#fffaf0}
.art-aktuell.auf{border-radius:12px 12px 0 0;border-bottom-color:transparent}
.art-aktuell__txt{display:grid;flex:1;min-width:0}
.art-aktuell__txt b{font:700 1.1rem/1.2 var(--serif);color:var(--dunkelgruen)}
.art-aktuell__txt small{font-size:.76rem;color:var(--tinte-weich);line-height:1.3}
.art-aktuell__aendern{color:var(--welt-tief);font-weight:700;font-size:.86rem;white-space:nowrap}
.art-paar{display:flex;flex:0 0 auto}
.art-k{--g:42px;display:grid;place-items:center;width:var(--g);height:var(--g);border-radius:7px;background:#cfe6f7;box-shadow:inset 0 0 0 1.5px var(--messing),0 2px 4px rgba(0,0,0,.15);overflow:hidden;flex:0 0 auto}
.art-k img{width:80%;height:80%;object-fit:contain;display:block}
.art-paar .art-k+.art-k{margin-left:-10px;transform:rotate(6deg)}
.art-aktuell .art-k{--g:44px}
.art-klappe{border:2px solid var(--messing);border-top:0;border-radius:0 0 12px 12px;background:#fbf7ec;padding:10px;margin-top:-2px;animation:art-auf .2s ease-out}
.art-klappe[hidden]{display:none}
@keyframes art-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.art-klappe{animation:none}}
.arten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.art{position:relative;display:grid;gap:6px;justify-items:start;align-content:start;min-width:0;padding:10px;border:2px solid #e4d9bf;border-radius:12px;background:#fffdf8;color:var(--tinte);font:inherit;text-align:left;cursor:pointer}
.art:hover{border-color:#d8c08a}
.art b{font-size:.95rem;line-height:1.2;overflow-wrap:anywhere;hyphens:auto;max-width:100%}
.art small{font-size:.76rem;color:var(--tinte-weich);line-height:1.3;max-width:100%}
.art[aria-pressed="true"]{border-color:var(--messing);box-shadow:0 0 0 3px rgba(232,195,106,.45)}
.art[aria-pressed="true"]::after{content:"✓";position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--welt);color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700}
.art-hinweis{margin:6px 0 0;font-size:.76rem;color:#8a3b12}
.art-hinweis[hidden]{display:none}
.stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.stufe{display:grid;justify-items:center;align-content:start;gap:2px;min-height:48px;min-width:0;padding:8px 6px;border:1.5px solid #d8cba9;border-radius:10px;background:#fffdf8;color:var(--tinte);font:inherit;cursor:pointer}
.stufe:hover{border-color:var(--welt)}
.stufe b{font-size:.95rem}
.stufe small{font-size:.72rem;color:var(--tinte-weich);text-align:center;line-height:1.2;overflow-wrap:anywhere}
.stufe__punkte{letter-spacing:2px;color:var(--messing);font-size:.8rem;line-height:1}
.stufe[aria-pressed="true"]{border-color:var(--messing);background:#fdf6e3;box-shadow:0 0 0 3px rgba(232,195,106,.45)}
/* Am Tisch: Spielart wechseln (Auswahl unter den Knöpfen, Rückfrage S-4) */
.tisch-art{display:grid;gap:10px;margin:12px auto 0;max-width:640px;padding:14px;border-radius:16px;background:#f3eee1;color:var(--tinte);box-shadow:0 0 0 2px var(--messing),0 10px 24px rgba(0,0,0,.28)}
.tisch-art[hidden]{display:none}
.tisch-art__titel{margin:0;font:700 1.15rem/1.2 var(--serif);color:var(--dunkelgruen)}
.tisch-art .arten{grid-template-columns:repeat(4,minmax(0,1fr))}
.tisch-art__frage{display:grid;gap:10px;padding:14px;border-radius:12px;background:#fffdf8;border:2px solid var(--messing)}
.tisch-art__frage[hidden]{display:none}
.tisch-art__frage h3{margin:0;font:700 1.1rem/1.25 var(--serif)}
.tisch-art__frage p{margin:0;font-size:.9rem}
.tisch-art__kn{display:flex;flex-wrap:wrap;gap:8px}
.tisch-art__kn .knopf{flex:1 1 200px}
@media (max-width:700px){
  .arten,.tisch-art .arten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .art{padding:8px}
  .art-k{--g:36px}
  .art-aktuell{gap:10px;padding:8px 10px}
  .art-aktuell .art-k{--g:38px}
  .art-aktuell__txt b{font-size:1rem}
  .art-aktuell__txt small{font-size:.7rem}
  .art-aktuell__aendern{font-size:.78rem}
  .stufe{padding:6px 4px}
  .stufe small{font-size:.66rem}
  .neue-partie .feld.feld--spieler{padding-top:9px;border-top:1px solid #ece3cc}
}
.zahl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.zahl__feld{display:inline-flex;align-items:center;border:1.5px solid #d8cba9;border-radius:10px;overflow:hidden;background:#fff}
.zahl__feld button{width:44px;height:44px;border:0;background:#f3eee1;font-size:1.3rem;font-weight:700;color:var(--welt-tief);cursor:pointer}
.zahl__feld button:hover:not(:disabled){background:#e8e0cd}
.zahl__feld button:disabled{opacity:.35;cursor:default}
.zahl__feld output{min-width:56px;text-align:center;font:700 1.35rem/1 var(--serif)}
.zahl__tipp{font-size:.78rem;color:var(--tinte-weich)}
.zahl__tipp b{color:var(--welt-tief)}
.los{display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;border-radius:14px;background:var(--messing);color:#221a06;border:1px solid var(--messing-hell);font:700 1.35rem/1 var(--serif);cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 0 0 2px var(--welt),0 10px 22px rgba(0,0,0,.18);margin-top:2px;transition:background .15s,transform .15s}
.los:hover{background:#d4a03a;transform:translateY(-1px)}
.los__pfeil{font-size:1.6rem;line-height:.8}
.los__info{margin:-4px 0 0;text-align:center;font-size:.78rem;color:var(--tinte-weich)}
.los__info b{color:var(--tinte)}
.los__aendern{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--welt-tief);text-decoration:underline;cursor:pointer;min-height:24px}

/* Unter dem Tisch: Motivwelt und Stand als Karton-Kästen */
.start .unten{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;margin-top:18px;align-items:start}
.kasten-k{background:#f3eee1;color:var(--tinte);border-radius:16px;border-top:3px solid var(--messing);box-shadow:0 0 0 1px rgba(200,149,44,.35),0 18px 36px rgba(0,0,0,.28);padding:16px 20px 18px;min-width:0}
.kasten-k h2{font-size:1.4rem;margin:0;color:var(--dunkelgruen)}
.welten{scroll-margin-top:90px}
.welten:focus{outline:none}
.welten__kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-bottom:12px}
.welten__kopf p{margin:0;font-size:.86rem;color:var(--tinte-weich)}
.pillen{display:flex;flex-wrap:wrap;gap:10px}
.pille{position:relative;display:inline-flex;align-items:center;gap:9px;padding:4px 16px 4px 4px;border-radius:999px;border:1.5px solid #d8cba9;background:#fffdf8;font-size:.9rem;font-weight:700;color:var(--tinte);cursor:pointer;min-height:44px;white-space:nowrap}
.pille:hover{border-color:var(--welt)}
.pille img,.pille .alle{width:34px;height:34px;border-radius:50%;background:#cfe6f7;box-shadow:inset 0 0 0 1.5px var(--messing);padding:5px;flex:0 0 auto;object-fit:contain}
.pille .alle{display:grid;place-items:center;padding:0;background:var(--welt);color:#fff;font:700 .95rem/1 var(--serif);box-shadow:inset 0 0 0 1.5px var(--messing-hell)}
.pille[aria-pressed="true"]{border-color:var(--welt);background:var(--welt-hell);box-shadow:inset 0 0 0 1px var(--welt)}
.pille[aria-pressed="true"]::after{content:"✓";margin-left:-2px;color:var(--welt-tief);font-size:.85rem}
.stand{display:flex;flex-direction:column;gap:10px;font-size:.88rem}
.stand p{margin:0;color:var(--tinte-weich)}
.stand__zuletzt b{font-family:var(--serif);color:var(--tinte)}
.stand__links{display:flex;flex-wrap:wrap;gap:6px 18px}
.stand__links a{color:var(--welt-tief);font-weight:700;text-decoration:none;min-height:32px;display:inline-flex;align-items:center;gap:.3em}
.stand__links a:hover{text-decoration:underline}

@media (max-width:900px){.start__tisch,.start .unten{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
  .start{padding:10px 0 24px}
  .start .huelle.breit{width:calc(100% - 32px)}
  .start__rahmen{border-radius:20px;--t-rahmen-b:5px}
  .start__tisch{padding:12px 10px;border-radius:15px;gap:6px}
  .start .hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center}
  .start .hero__marke{display:contents}
  .start .hero__wappen{width:50px;height:67px;border-radius:8px;grid-row:1;box-shadow:0 0 0 2px var(--messing),0 0 0 4px var(--filz-tief),0 8px 16px rgba(0,0,0,.4)}
  .start .hero__wappen .welt-band{font-size:.38rem;left:-26px;top:7px;width:84px;padding:.2rem 0}
  .start h1{font-size:1.9rem}
  .start .hero__satz{font-size:.84rem;margin-top:3px;line-height:1.35}
  .start .sofort{grid-column:1/-1;align-self:stretch;min-height:56px;font-size:1.3rem}
  .start .filz{grid-column:1/-1;min-height:0;height:96px}
  .start .filz__fuss{display:none}
  .faecher{--k:54px;--r:200px;--w:9deg;top:14px}
  .neue-partie{padding:12px 12px 14px;gap:9px;border-radius:16px}
  .neue-partie h2{display:none}
  .neue-partie .feld{grid-template-columns:100px minmax(0,1fr);gap:4px 10px;padding-top:9px}
  .neue-partie .feld--spieler{grid-template-columns:minmax(0,1fr);padding-top:0;border-top:0}
  .neue-partie .feld--spieler .feld__name{display:none}
  .neue-partie .feld--name,.neue-partie .feld--drei{grid-template-columns:minmax(0,1fr)}
  .neue-partie .feld__name{font-size:.84rem}
  .neue-partie .feld__name small{display:none}
  .neue-partie .mini{display:none}
  .kk{padding:8px 10px}
  .kk b{font-size:1.02rem}
  .kk small{font-size:.7rem}
  .mehr{margin-top:6px;font-size:.74rem}
  .mehr button{min-height:30px;padding:2px 10px;font-size:.76rem}
  .start-plakette{padding:3px 10px 3px 4px}
  .start-plakette .kreis{width:30px;height:30px;font-size:.88rem}
  .start-plakette__name{min-height:36px;font-size:1rem}
  .start-plakette__stand{font-size:.7rem;white-space:normal;max-width:8em}
  .wahl2{gap:4px;flex-wrap:nowrap}
  .wahl2 button{min-height:38px;font-size:.76rem;padding:4px 6px;flex:1 1 0}
  .zahl{gap:8px;flex-wrap:nowrap}
  .zahl__feld button{width:40px;height:40px}
  .zahl__feld output{min-width:40px;font-size:1.15rem}
  .zahl__tipp{font-size:.72rem;flex:1;min-width:0;line-height:1.25}
  .los{min-height:50px;font-size:1.2rem}
  .los__info{display:none}
  .start .unten{margin-top:18px}
  .kasten-k{padding:14px}
  .kasten-k h2{font-size:1.2rem}
  .pillen{gap:8px}
  .pille{font-size:.84rem;padding-right:12px;gap:7px;min-height:42px}
  .pille img,.pille .alle{width:30px;height:30px;padding:4px}
}
@media (prefers-reduced-motion:reduce){.faecher .karte__innen{animation:none;transform:rotateY(180deg)}.faecher .platz--zu .karte__innen{transform:none}.kk,.los,.sofort{transition:none}.kk:hover,.los:hover{transform:none}}

/* ============================================================
   Karte – 3D-Drehung, Gründe, Rückseiten (quadratisch)
   ============================================================ */
.karte{position:relative;display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;background:none;perspective:700px;cursor:pointer;border-radius:var(--radius);-webkit-tap-highlight-color:transparent;font:inherit}
.karte:focus-visible{outline:3px solid #e8c36a;outline-offset:3px}
.karte[disabled],.karte[aria-disabled="true"]{cursor:default}
.karte__innen{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.karte.offen .karte__innen,.karte.gefunden .karte__innen{transform:rotateY(180deg)}
.karte__rueck,.karte__vorn{position:absolute;inset:0;border-radius:var(--radius);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.karte__rueck{background:var(--r-bg);box-shadow:inset 0 0 0 2px var(--r-kante),0 1px 0 rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.2),0 7px 14px rgba(0,0,0,.26)}
.karte__rueck::before{content:"";position:absolute;inset:max(4px,7%);border:1px solid var(--r-linie);border-radius:3px}
.karte__rueck::after{content:"";position:absolute;inset:18%;background:var(--r-emblem) center/contain no-repeat}
[data-rueck="dunkel"] .karte__rueck::before,[data-rueck="welt"] .karte__rueck::before{border-width:1.5px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 0 0 2.6px rgba(200,149,44,.55)}
.karte:not(.offen):not(.gefunden):not([aria-disabled="true"]):hover .karte__rueck{box-shadow:inset 0 0 0 2px var(--messing-hell),0 0 0 2px rgba(232,195,106,.35),0 7px 14px rgba(0,0,0,.3)}
.karte__vorn{transform:rotateY(180deg);background:var(--rd-bg,var(--g-aussen));padding:var(--rd-pad,var(--g-pad));box-shadow:inset 0 0 0 1px var(--g-rand),0 2px 0 rgba(0,0,0,.16),0 7px 14px rgba(0,0,0,.24);display:flex}
.karte__vorn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--rd-sh)}
.karte__feld{position:relative;flex:1;display:grid;place-items:center;background:var(--g-feld);border:var(--g-feldrand);border-radius:calc(var(--radius) - 3px);min-width:0;min-height:0;overflow:hidden}
/* Motiv mittig mit 12 % Rand */
.karte__feld img{width:80%;height:80%;min-width:0;min-height:0;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Schmale Motive (Variante B): -40° gedreht, 6 % Rand – Maße setzt karten.js */
/* Sonderspielarten (js/sonderkarten.js): Schatten = dasselbe Motiv einfarbig; Rechen-, Formen- und Wortkarten als SVG über das ganze Feld */
.karte__feld img.schatten,.art-k img.schatten{filter:brightness(0) opacity(.82)}
.karte__feld svg.sonder{width:92%;height:92%;display:block;pointer-events:none;user-select:none}
.art-k svg.sonder{width:90%;height:90%;display:block}
.karte__feld img.schraeg{position:absolute;left:50%;top:50%;max-width:none;transform:translate(-50%,-50%) rotate(-40deg)}
.karte.gefunden .karte__vorn{box-shadow:inset 0 0 0 1px var(--g-rand),0 0 0 3px #c8952c,0 0 0 5px rgba(232,195,106,.45),0 0 16px 3px rgba(232,195,106,.4),0 7px 14px rgba(0,0,0,.24)}
/* Haken in Weltfarbe */
.karte.gefunden::after{content:"";position:absolute;right:-7px;top:-7px;width:24px;height:24px;border-radius:50%;background:var(--welt) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 6.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat;border:2px solid #e8c36a;box-shadow:0 2px 5px rgba(0,0,0,.3);z-index:2;animation:haken .3s ease-out}
@keyframes haken{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.karte__besitzer{position:absolute;left:-6px;bottom:-6px;z-index:2;width:clamp(15px,22%,22px);height:clamp(15px,22%,22px);box-shadow:0 2px 5px rgba(0,0,0,.3);border-radius:50%;display:none;place-items:center;background:var(--welt-tief);color:#e8c36a;border:1.5px solid #c8952c;font:700 clamp(.55rem,1.2vw,.72rem)/1 var(--serif)}
.karte.gefunden .karte__besitzer{display:grid}
/* Motivnamen (Option): Titel als Streifen am unteren Rand der Vorderseite, nur auf aufgedeckten/gefundenen Karten */
.karte__name{display:none}
[data-motivnamen="an"] .karte:not(.klein){container-type:inline-size}
[data-motivnamen="an"] .karte:not(.klein).offen .karte__vorn,[data-motivnamen="an"] .karte:not(.klein).gefunden .karte__vorn{font-size:10px;font-size:clamp(9px,9cqw,13px)}
[data-motivnamen="an"] .karte:not(.klein).offen .karte__feld,[data-motivnamen="an"] .karte:not(.klein).gefunden .karte__feld{margin-bottom:2em}
[data-motivnamen="an"] .karte:not(.klein).offen .karte__name:not(:empty),[data-motivnamen="an"] .karte:not(.klein).gefunden .karte__name:not(:empty){
  display:block;position:absolute;left:calc(var(--rd-pad,var(--g-pad)) + 2px);right:calc(var(--rd-pad,var(--g-pad)) + 2px);bottom:calc(var(--rd-pad,var(--g-pad)) + .15em);z-index:1;
  padding:.1em .5em;border-radius:.6em;background:rgba(255,253,248,.85);color:#22201b;
  font:600 1em/1.45 var(--serif);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* Der Besitzer-Kreis wandert nach oben links, damit er den Namen nicht verdeckt */
[data-motivnamen="an"] .karte:not(.klein) .karte__besitzer{bottom:auto;top:-6px}
.karte.klein{--radius:5px}
.karte.klein.gefunden::after{width:15px;height:15px;right:-4px;top:-4px;border-width:1.5px}
.karte.klein .karte__besitzer{left:-4px;bottom:-4px}
.karte.schluss .karte__vorn{animation:schluss 1.1s ease-in-out 2}
@keyframes schluss{50%{box-shadow:inset 0 0 0 1px var(--g-rand),0 0 0 4px var(--welt),0 0 0 7px var(--messing-hell),0 0 26px 8px rgba(232,195,106,.75)}}
.karte.zuletzt .karte__vorn{box-shadow:inset 0 0 0 1px var(--g-rand),0 0 0 3px var(--welt),0 7px 14px rgba(0,0,0,.24)}

/* ============================================================
   Tisch
   ============================================================ */
.tisch-rahmen{padding:var(--t-rahmen-b);background:var(--t-rahmen);border-radius:calc(18px + var(--t-rahmen-b));box-shadow:0 18px 40px rgba(0,0,0,.22),0 0 0 1px rgba(0,0,0,.15)}
/* Tischkante: innerer Streifen in Weltfarbe am Messingrahmen */
.tisch{background:var(--t-flaeche);color:var(--t-text);border-radius:18px;padding:1.1rem 1rem 1.3rem;box-shadow:0 0 0 3px var(--welt),0 0 0 4px rgba(232,195,106,.55),inset 0 0 0 1px rgba(243,238,225,.08),inset 0 2px 14px rgba(0,0,0,.35);position:relative}
[data-tisch="stube"] .tisch{box-shadow:0 0 0 3px var(--welt),0 0 0 4px rgba(232,195,106,.6),inset 0 0 0 1px rgba(200,149,44,.55),inset 0 2px 12px rgba(60,40,10,.12)}
.tisch__kopf{display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:space-between;margin-bottom:.85rem;min-height:1.7rem}
.tisch__status{font-family:var(--serif);font-weight:600;color:var(--t-status);font-size:1.12rem;display:inline-flex;align-items:center;gap:8px}
.tisch__status .punkt{width:10px;height:10px;border-radius:50%;background:var(--welt);box-shadow:0 0 0 2px #e8c36a}
.tisch__meta{font-size:.88rem;color:var(--t-text2);font-variant-numeric:tabular-nums}
.spielseite{padding:18px 0 34px}
@media (max-width:600px){
  .spielseite{padding:10px 0 18px}
  .huelle.breit{width:calc(100% - 16px)}
  .tisch{padding:.7rem .55rem .9rem;border-radius:14px}
  .tisch-rahmen{border-radius:calc(14px + var(--t-rahmen-b));--t-rahmen-b:5px}
  [data-tisch="stube"] .tisch-rahmen{--t-rahmen-b:6px}
}

/* ---------- Knöpfe ---------- */
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:10px;font-size:.86rem;font-weight:700;letter-spacing:.02em;cursor:pointer;text-decoration:none;white-space:nowrap;border:1px solid transparent}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf--messing{background:#c8952c;color:#221a06;border-color:#e8c36a;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 14px rgba(0,0,0,.22)}
.knopf--messing:hover:not(:disabled){background:#d4a03a}
/* Sekundärknopf in Weltfarbe */
.knopf--welt{background:var(--welt);color:#fff;border-color:rgba(232,195,106,.75);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 4px 10px rgba(0,0,0,.18)}
.knopf--welt:hover:not(:disabled){background:var(--welt-tief);border-color:#e8c36a}
.knopf--tisch{background:var(--t-k2-bg);color:var(--t-k2-text);border-color:var(--t-k2-rand)}
.knopf--tisch:hover{border-color:#c8952c}
.knopf--hell{background:#fffdf8;color:var(--tinte);border-color:#d8cba9}
.knopf--hell:hover{border-color:#c8952c}
.knopf svg{width:16px;height:16px;flex:0 0 auto}

/* Kleine Bausteine, die außerhalb der Einstellungen weiterleben: Welt-Pille (Ergebnis), Wahl (Tempo), Hinweis, Initialen-Kreis */
.welt-pille{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:var(--welt);color:#fff;border:1.5px solid rgba(232,195,106,.75);padding:3px 11px 3px 8px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;width:fit-content}
.welt-pille::before{content:"";width:8px;height:8px;border-radius:50%;background:#e8c36a;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.wahl{display:flex;flex-wrap:wrap;gap:3px;background:#e8e0cd;border-radius:11px;padding:3px;width:fit-content;max-width:100%}
.wahl button{min-height:44px;min-width:44px;padding:6px 13px;border:0;border-radius:8px;background:transparent;color:#5c574c;font-size:.86rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.wahl button:hover{color:var(--tinte)}
.wahl button[aria-pressed="true"]{background:#fffdf8;color:#163226;box-shadow:0 0 0 1.5px #c8952c,0 2px 6px rgba(34,32,27,.12)}
.hinweis{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(200,149,44,.12);border:1px solid rgba(200,149,44,.4);font-size:.8rem;color:#5a4410;line-height:1.45}
.hinweis svg{flex:0 0 auto;margin-top:1px}
.kreis{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--welt-tief);color:#e8c36a;border:2px solid #c8952c;font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1;flex:0 0 auto}

/* ============================================================
   Einstellungen (Entwurf A „Karten“, doku/ENGINE.md „Einstellungen (A Karten)“)
   Klebende Titelleiste mit Kurzfassung und „Spiel starten“ (Handy: Startknopf als feste Leiste unten),
   darauf Karton-Kästen auf dem Tisch: 1 Spieler & Gegner · 2 Partie · 3 Motivwelten, darunter 4 Karten & Tische.
   Ringsum derselbe dunkle Tischgrund wie auf der Startseite (Regeln oben, [data-sicht="einstellungen"]).
   ============================================================ */
.einst-a{padding:0 0 34px;--titel-bg:var(--seite-hintergrund);--titel-text:var(--dunkelgruen);--titel-kurz:var(--tinte-weich);--titel-b:#7a5a14}
html[data-sicht="einstellungen"]:not([data-tisch="stube"]) .einst-a{--titel-bg:var(--start-b);--titel-text:var(--karton);--titel-kurz:#cfe3df;--titel-b:var(--messing-hell)}
.einst-titel{position:sticky;top:var(--kopf-h,62px);z-index:30;display:flex;align-items:center;gap:14px;padding:14px 0 12px;margin-bottom:6px;background:var(--titel-bg)}
.einst-titel::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(var(--titel-bg),transparent);pointer-events:none}
.einst-titel__wappen{position:relative;width:40px;height:53px;border-radius:7px;overflow:hidden;flex:0 0 auto;background:#f7f1e3;box-shadow:0 0 0 1.5px var(--messing),0 6px 12px rgba(0,0,0,.3)}
.einst-titel__wappen img{width:100%;height:100%;display:block;object-fit:cover}
.einst-titel__text{min-width:0;flex:1}
.einst-titel h1,.einst-titel h2{margin:0;font-size:1.7rem;color:var(--titel-text);line-height:1}
.einst-titel__kurz{margin:5px 0 0;font-size:.84rem;color:var(--titel-kurz);line-height:1.3}
.einst-titel__kurz b{color:var(--titel-b);font-weight:700}
.einst-titel__fehler{margin:4px 0 0;font-size:.8rem;font-weight:700;color:#fff;background:var(--herz);border-radius:6px;padding:2px 8px;width:fit-content;max-width:100%}
.einst-titel__fehler:empty{display:none}
.motive-fehler{font-weight:700;color:#fff;background:var(--herz);border-radius:8px;padding:8px 12px}
.start-hinweis{margin:12px 0 0;font-size:.9rem}
.start-hinweis[hidden]{display:none}
.einst-titel__start{flex:0 0 auto}
.einst-titel .knopf--messing{min-height:50px;padding:10px 24px;font:700 1.12rem/1 var(--serif);letter-spacing:0;border-radius:12px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 0 0 2px var(--welt),0 8px 18px rgba(0,0,0,.3)}
.einst-titel .knopf--messing svg{width:15px;height:15px}

.einst-a__rahmen{border-radius:30px}
.einst-a__tisch{border-radius:23px;padding:22px}
.reihe{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.94fr) minmax(0,1.06fr);gap:18px;align-items:stretch}
.karton{position:relative;background:#f3eee1;color:var(--tinte);border-radius:16px;border-top:3px solid var(--messing);box-shadow:0 0 0 1px rgba(200,149,44,.45),0 16px 30px rgba(0,0,0,.3);padding:16px 18px 18px;min-width:0}
.karton::before{content:"";position:absolute;inset:6px;top:4px;border:1px solid rgba(200,149,44,.28);border-radius:11px;pointer-events:none}
.karton__kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.karton h2{font-size:1.22rem;margin:0;color:var(--dunkelgruen);display:flex;align-items:center;gap:8px}
.karton h2 .nr{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;background:var(--welt);color:#fff;font-size:.78rem;box-shadow:inset 0 0 0 1.5px var(--messing-hell);flex:0 0 auto}
.karton__zusatz{font:700 .66rem/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#7a5a14;text-align:right}
.kt{margin-top:18px;scroll-margin-top:calc(var(--kopf-h,62px) + 96px)}
.kt:focus{outline:none}

/* Zeile: Beschriftung links, Wahl rechts */
.z{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 0;border-top:1px solid #e4d9bf;flex-wrap:wrap}
.karton > .z:first-of-type{border-top:0;padding-top:0}
.z__name{font:700 .95rem/1.2 var(--serif);color:var(--tinte);display:inline-flex;align-items:center;gap:6px}
.z__name label{cursor:pointer}
.z--stapel{display:block}
.z--stapel .z__name{margin-bottom:8px}
.z__info{flex:1 1 100%;margin:-2px 0 0;font-size:.76rem;color:var(--tinte-weich);text-align:right}
.z__info:empty{display:none}
.z__info.warnung{color:var(--herz);font-weight:700;text-align:left}
.leise{font:500 .74rem var(--sans);color:var(--tinte-weich)}

/* ⓘ mit Tooltip: Maus/Tastatur zeigen, Touch per Tipp (Klasse .zeigen, js/ui.js) */
.info{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--messing);background:#fffdf8;color:#7a5a14;font:700 .66rem/1 var(--serif);cursor:help;padding:0;flex:0 0 auto;letter-spacing:0}
.info::before{content:"";position:absolute;inset:-13px}
.info:focus-visible,.info.zeigen{background:var(--messing);color:#fff}
.tipp{position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(calc(-50% + var(--tipp-dx,0px)));width:max-content;max-width:min(250px,calc(100vw - 24px));background:var(--dunkelgruen);color:#f3eee1;font:500 .78rem/1.4 var(--sans);text-align:left;text-transform:none;padding:8px 10px;border-radius:8px;box-shadow:0 0 0 1px rgba(232,195,106,.6),0 8px 18px rgba(0,0,0,.3);display:none;z-index:35;pointer-events:none;white-space:normal;letter-spacing:0;cursor:default}
.tipp::after{content:"";position:absolute;left:calc(50% - var(--tipp-dx,0px));top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--dunkelgruen)}
.info:focus-visible .tipp,.info.zeigen .tipp{display:block}
@media (hover:hover){.info:hover{background:var(--messing);color:#fff}.info:hover .tipp{display:block}}
.info.unten .tipp{bottom:auto;top:calc(100% + 9px)}
.info.unten .tipp::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--dunkelgruen)}

/* Wahl als Segmente */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;background:#e8e0cd;border-radius:10px;padding:3px;max-width:100%}
.seg button{min-height:38px;min-width:38px;padding:4px 9px;border:0;border-radius:7px;background:transparent;color:var(--tinte-weich);font-size:.84rem;font-weight:700;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--tinte)}
.seg button[aria-pressed="true"]{background:#fffdf8;color:var(--dunkelgruen);box-shadow:0 0 0 1.5px var(--messing),0 2px 5px rgba(34,32,27,.12)}
.seg--zahl button{font:700 1rem/1 var(--serif);min-width:42px}

/* Zahl mit − + (Karten, Zugzeit) */
.stepper{display:inline-flex;align-items:center;border:1.5px solid #d8cba9;border-radius:10px;background:#fffdf8;overflow:hidden}
.stepper button{width:38px;height:40px;border:0;background:#f3eee1;font-size:1.15rem;font-weight:700;color:var(--welt-tief);cursor:pointer;padding:0}
.stepper button:hover:not(:disabled){background:#e8e0cd}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output,.stepper input{min-width:46px;width:52px;text-align:center;font:700 1.15rem/1 var(--serif);color:var(--tinte);border:0;background:transparent;padding:0}
.stepper input{height:40px;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:2px solid var(--messing);outline-offset:-2px}
.stepper input[aria-invalid="true"]{color:var(--herz)}
.stepper--klein button{width:30px;height:34px;font-size:1rem}
.stepper--klein output{min-width:0;width:46px;font-size:.92rem;white-space:nowrap}

/* Schalter (Motivnamen) */
.schalter{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:3px 12px 3px 5px;border-radius:999px;border:1.5px solid #d8cba9;background:#fffdf8;font:600 .84rem var(--sans);color:var(--tinte);cursor:pointer;text-align:left}
.schalter__knopf{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:#cfc6ae;transition:background .2s}
.schalter__knopf::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s}
.schalter[aria-checked="true"]{border-color:var(--welt)}
.schalter[aria-checked="true"] .schalter__knopf{background:var(--welt)}
.schalter[aria-checked="true"] .schalter__knopf::after{transform:translateX(16px)}

/* Kasten 1: Spielerplakette und Gegnerzeilen */
.ich{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;background:linear-gradient(135deg,var(--welt-tief),var(--welt));border-radius:12px;padding:10px 12px;box-shadow:inset 0 0 0 1.5px var(--messing-hell),0 6px 14px rgba(0,0,0,.18);margin-bottom:12px}
.ich .kreis{width:42px;height:42px;font-size:1.2rem;background:var(--dunkelgruen)}
.ich__name{display:flex;flex-direction:column;min-width:0;color:var(--welt-hell);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ich__name input{margin-top:3px;width:100%;min-height:38px;border:1.5px solid rgba(232,195,106,.6);border-radius:8px;background:rgba(255,253,248,.97);padding:4px 10px;font:700 1.08rem var(--serif);color:var(--tinte);letter-spacing:0;text-transform:none}
.ich__name input:focus{outline:2px solid var(--messing-hell);outline-offset:1px}
.ich__stand{text-align:right;color:var(--welt-hell);font-size:.7rem;font-weight:600;line-height:1.35;max-width:9.5em}
.ich__stand b{font:700 1.15rem/1 var(--serif);color:var(--messing-hell)}
.gegnerliste{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.gegner-z{display:grid;grid-template-columns:30px minmax(0,1fr) 140px 112px;align-items:center;gap:10px;background:#fffdf8;border:1px solid #e4d9bf;border-radius:10px;padding:6px 8px 6px 7px}
.gegner-z .kreis{width:30px;height:30px;font-size:.88rem;border-width:1.5px}
.gegner-z__name{min-width:0;width:100%;min-height:36px;border:1.5px solid transparent;border-radius:7px;background:transparent;padding:2px 6px;font:700 1rem var(--serif);color:var(--tinte)}
.gegner-z__name:hover,.gegner-z__name:focus{border-color:#d8cba9;background:#fff;outline:none}
.gegner-z__name:focus-visible{outline:2px solid var(--messing);outline-offset:0}
.staerke{display:inline-flex;align-items:center;gap:6px}
.staerke__balken{display:inline-flex;align-items:flex-end;gap:2px;height:24px}
.staerke__balken button{position:relative;width:10px;border:0;padding:0;border-radius:2px;background:#d8cba9;cursor:pointer}
.staerke__balken button::before{content:"";position:absolute;inset:-10px -2px}
.staerke__balken button:nth-child(1){height:9px}
.staerke__balken button:nth-child(2){height:15px}
.staerke__balken button:nth-child(3){height:22px}
.staerke__balken button.an{background:var(--welt)}
.staerke__balken button:hover{outline:1.5px solid var(--messing);outline-offset:1px}
.staerke__text{border:0;background:none;padding:4px 2px;min-height:32px;font-size:.76rem;font-weight:700;color:var(--welt-tief);width:98px;text-align:left;cursor:pointer;white-space:nowrap}
.staerke__text:hover{text-decoration:underline;text-underline-offset:3px}
.zugzeit-a{display:inline-flex;align-items:center;gap:6px}
.zugzeit-a__etikett{display:none;font-size:.72rem;color:var(--tinte-weich);font-weight:600}
.spalten-kopf{display:grid;grid-template-columns:30px minmax(0,1fr) 140px 112px;gap:10px;padding:0 9px 0 16px;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7a5a14;margin:4px 0 2px}
.gegner-leer{margin:4px 0 0;font-size:.8rem;color:var(--tinte-weich);background:#fffdf8;border:1px dashed #d8cba9;border-radius:10px;padding:10px 12px;text-align:center}

/* Kasten 3: Motivwelten */
/* Kasten 3 oben: Kartenstil (Darstellung B: drei Kacheln mit Musterkarte Lebkuchenherz, Elmar 13.10.2026) */
.kartenstil{display:grid;gap:6px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #e4d9bf}
.stile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.stile--zwei{grid-template-columns:repeat(2,minmax(0,1fr));max-width:320px}
.stil{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;min-height:44px;min-width:0;padding:8px 4px 8px;border-radius:10px;border:2px solid #e4d9bf;background:#f7f2e6;font:inherit;color:var(--tinte);text-align:center;cursor:pointer}
.stil:hover{border-color:#d8c08a}
.stil[aria-pressed="true"]{border-color:var(--messing);background:#fffdf8;box-shadow:0 0 0 3px rgba(232,195,106,.35)}
.stil__muster{display:flex;justify-content:center;padding:2px 0 3px;height:58px;align-items:center}
.stil__karte{display:grid;place-items:center;width:50px;height:50px;border-radius:9px;background:#cfe6f7;box-shadow:inset 0 0 0 1.5px var(--messing),0 2px 4px rgba(0,0,0,.15);flex:0 0 auto}
.stil__karte img{width:80%;height:80%;object-fit:contain;display:block}
.stil__muster--zwei .stil__karte{width:44px;height:44px;transform:rotate(-6deg)}
.stil__muster--zwei .stil__karte+.stil__karte{margin-left:-10px;transform:rotate(6deg)}
.stil__name{font:700 .78rem/1.2 var(--sans);overflow-wrap:anywhere;hyphens:auto;max-width:100%}
.stil__zusatz{font-size:.68rem;color:var(--tinte-weich);line-height:1.2}
.kartenstil__hinweis{margin:0;font-size:.74rem;color:#8a3b12}
.kartenstil__hinweis[hidden]{display:none}
/* Kasten 3 „C1“: oben Alle Welten / Auswahl leeren, darunter Themen-Balken (immer nur einer offen) mit Welten-Kacheln */
.welten-kopf{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.wpille{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;border:1.5px solid #d8cba9;background:#fffdf8;font:700 .82rem/1.2 var(--sans);color:var(--tinte);cursor:pointer;min-height:44px;max-width:100%;text-align:center}
.wpille:hover{border-color:var(--welt)}
.wpille[aria-pressed="true"]{border-color:var(--welt);background:var(--welt-hell);color:var(--welt-tief);box-shadow:inset 0 0 0 1px var(--welt)}
.wpille--leeren{border-color:var(--welt);background:var(--welt-hell);color:var(--welt-tief)}
.wpille[hidden]{display:none}
.themen{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-auto-flow:row dense;gap:8px}
.thema{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;border-radius:12px;border:2px solid #e4d9bf;background:#fffdf8;font:inherit;color:var(--tinte);text-align:left;cursor:pointer;min-width:0}
.thema:hover{border-color:color-mix(in srgb,var(--welt) 55%,#e4d9bf)}
.thema[aria-expanded="true"]{border-color:var(--welt);background:var(--welt-hell)}
.thema__text{display:grid;flex:1;min-width:0;gap:1px}
.thema__name{font:700 .9rem/1.2 var(--sans);color:var(--dunkelgruen);overflow-wrap:break-word}
.thema__zahl{font-size:.74rem;color:var(--tinte-weich)}
.thema__gewaehlt{font-size:.74rem;font-weight:700;color:var(--welt-tief)}
.thema__gewaehlt[hidden]{display:none}
.thema__pfeil{flex:0 0 auto;font-size:1.05rem;line-height:1;color:var(--welt-tief);width:18px;text-align:center}
.thema__inhalt{grid-column:1/-1;display:grid;gap:10px;padding:12px;border:2px solid var(--welt);border-radius:14px;background:#fffdf8;min-width:0}
.thema__inhalt[hidden]{display:none}
.thema__leiste{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.thema__hinweis{font-size:.76rem;color:var(--tinte-weich)}
.thema__ganz{min-height:44px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--messing);background:#fffdf8;font:700 .8rem/1.2 var(--sans);color:var(--dunkelgruen);cursor:pointer}
.thema__ganz:hover{background:#faf1d6}
.welten-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(128px,calc(50% - 3px)),1fr));gap:6px}
.welt{position:relative;display:grid;align-content:start;justify-items:start;gap:5px;min-height:44px;min-width:0;padding:8px 8px 9px;border-radius:10px;border:2px solid #e4d9bf;background:#f7f2e6;font:inherit;color:var(--tinte);text-align:left;cursor:pointer}
.welt:hover{border-color:#d8c08a}
.welt[aria-pressed="true"]{border-color:var(--messing);background:#fffdf8;box-shadow:0 0 0 3px rgba(232,195,106,.35)}
.welt__name{font:700 .8rem/1.2 var(--sans);overflow-wrap:break-word;hyphens:auto;max-width:100%}
.welt__zahl{font-size:.7rem;color:var(--tinte-weich);margin-top:-3px}
.welt__haken{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#1F8A8A;color:#fff;display:none;place-items:center;box-shadow:0 0 0 2px #fffdf8}
.welt[aria-pressed="true"] .welt__haken{display:grid}
/* drei leicht gedrehte Musterkarten (hellblau, Messingrand, Motiv 80 %) */
.muster3{display:flex;flex:0 0 auto;padding:3px 2px}
.muster3__karte{--mk:34px;display:grid;place-items:center;width:var(--mk);height:var(--mk);border-radius:7px;background:#cfe6f7;box-shadow:inset 0 0 0 1.5px var(--messing),0 2px 4px rgba(0,0,0,.15);flex:0 0 auto;transform:rotate(-6deg)}
.muster3__karte+.muster3__karte{margin-left:-10px;transform:rotate(0deg)}
.muster3__karte:nth-child(3){transform:rotate(6deg)}
.muster3__karte img{width:80%;height:80%;object-fit:contain;display:block}
.welt .muster3__karte{--mk:30px}
.welt .muster3__karte+.muster3__karte{margin-left:-9px}
.welt .muster3{padding-right:26px}
.welten-info{margin:10px 0 0;font-size:.74rem;color:var(--tinte-weich)}
.gedaechtnis{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin-top:10px;padding-top:8px;border-top:1px solid #e4d9bf}
.linkknopf{border:0;background:none;padding:6px 0;font:700 .8rem var(--sans);color:var(--welt-tief);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:36px}
.gedaechtnis__info{flex:1 1 100%;font-size:.76rem;color:var(--gras);font-weight:600}
.gedaechtnis__info:empty{display:none}

/* Kasten 4: Karten & Tische */
.kt__raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
.kt__regler{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;align-content:start}
.kt__regler .z{border-top:1px solid #e4d9bf;padding:10px 0}
.kt__regler > div.z:nth-of-type(-n+2){border-top:0;padding-top:0}
.kt__regler .z--breit{grid-column:1/-1}
.kt__regler .hinweis{grid-column:1/-1;margin:0 0 8px}
.muster{display:flex;flex-wrap:wrap;gap:6px}
.muster button{display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;padding:4px 3px 3px;border-radius:9px;cursor:pointer;font-size:.7rem;font-weight:700;line-height:1.15;color:var(--tinte-weich);min-width:54px;max-width:84px;text-align:center}
.muster button i{display:block;width:44px;height:44px;border-radius:7px;box-shadow:0 0 0 1px rgba(34,32,27,.2),0 2px 5px rgba(0,0,0,.12)}
.muster--rund button i{border-radius:50%;width:36px;height:36px}
.muster--breit button i{width:64px;height:40px;border-radius:9px}
.muster button:hover{color:var(--tinte)}
.muster button[aria-pressed="true"]{color:var(--dunkelgruen);background:#fffdf8;box-shadow:0 0 0 1.5px var(--messing)}
.muster button[aria-pressed="true"] i{outline:2px solid var(--welt);outline-offset:2px}
.palette{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;align-items:center}
.palette button{width:22px;height:22px;padding:0;border:1px solid rgba(34,32,27,.22);border-radius:5px;cursor:pointer;position:relative}
.palette button::before{content:"";position:absolute;inset:-3px}
.palette button[aria-pressed="true"]{outline:2.5px solid var(--messing);outline-offset:1px}
.palette label{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;color:var(--dunkelgruen);margin-left:6px;min-height:30px}
.palette input[type=color]{width:30px;height:26px;padding:0;border:1px solid rgba(34,32,27,.25);border-radius:5px;background:none;cursor:pointer}

.vorschau{position:sticky;top:calc(var(--kopf-h,62px) + 96px)}
.vorschau__titel{font:700 .7rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#7a5a14;margin:0 0 8px}
.vorschau .tisch-rahmen{--t-rahmen-b:6px;border-radius:22px}
.vorschau .tisch{padding:14px;border-radius:16px}
.vorschau__karten{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vorschau__karten figure{margin:0;text-align:center}
.vorschau__karten figcaption{font-size:.7rem;color:var(--t-text2);margin-top:6px;font-weight:600}
.vorschau__klein{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}

/* Tablet: zwei Kästen nebeneinander, Motivwelten darunter */
@media (max-width:1100px){
  .reihe{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .reihe .karton--welten{grid-column:1/-1}
}
@media (max-width:860px){
  .kt__raster{grid-template-columns:minmax(0,1fr)}
  .vorschau{position:static;order:-1}
  .vorschau__karten{grid-template-columns:repeat(2,minmax(0,120px));justify-content:center;gap:18px}
  .vorschau__klein{display:none}
  .vorschau__karten figcaption{display:none}
}
/* Handy: Kästen untereinander, „Spiel starten“ als feste Leiste unten */
@media (max-width:700px){
  .einst-a{padding-bottom:calc(84px + var(--sa-b))}
  .einst-a .huelle.breit{width:calc(100% - 32px)}
  .einst-titel{position:static;padding:12px 0 10px;gap:10px;background:none}
  .einst-titel::after{display:none}
  .einst-titel__wappen{width:34px;height:45px}
  .einst-titel h1,.einst-titel h2{font-size:1.35rem}
  .einst-titel__kurz{font-size:.76rem}
  .einst-titel__start{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px calc(16px + var(--sa-r)) calc(10px + var(--sa-b)) calc(16px + var(--sa-l));background:color-mix(in srgb,var(--titel-bg) 94%,transparent);border-top:2px solid var(--messing);box-shadow:0 -8px 20px rgba(0,0,0,.25)}
  .einst-titel .knopf--messing{width:100%;min-height:52px;font-size:1.12rem}
  .einst-a__rahmen{border-radius:20px;--t-rahmen-b:5px}
  .einst-a__tisch{padding:10px;border-radius:15px}
  .reihe{grid-template-columns:minmax(0,1fr);gap:12px}
  .karton{padding:14px 14px 16px}
  .kt{margin-top:12px;scroll-margin-top:calc(var(--kopf-h,62px) + 8px)}
  .kt__regler{grid-template-columns:minmax(0,1fr)}
  .kt__regler > div.z:nth-of-type(2){border-top:1px solid #e4d9bf;padding-top:10px}
  .ich{grid-template-columns:auto minmax(0,1fr);gap:6px 10px}
  .ich__stand{grid-column:2;text-align:left;max-width:none;margin-top:-2px}
  .ich__stand b{font-size:.92rem}
  .gegner-z{grid-template-columns:28px minmax(0,1fr) auto;gap:4px 8px}
  .gegner-z .zugzeit-a{grid-column:2/-1;justify-self:start}
  .zugzeit-a__etikett{display:inline}
  .spalten-kopf{display:none}
  .staerke__text{width:auto;min-width:5.5em}
  .muster button{min-width:48px}
  .muster button i{width:40px;height:40px}
  .muster--breit button i{width:56px;height:36px}
  .muster--rund button i{width:34px;height:34px}
  .vorschau__karten{grid-template-columns:repeat(2,minmax(0,96px))}
  .vorschau .tisch{padding:10px}
}

/* ============================================================
   Spieltisch: Plaketten, Uhr, Raster
   ============================================================ */
.plaketten{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 auto 16px}
.plakette{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-width:200px;max-width:260px;padding:7px 14px 7px 8px;border-radius:14px;background:#f3eee1;color:var(--tinte);border:2px solid #c8952c;box-shadow:inset 0 0 0 2px #f3eee1,inset 0 0 0 3px rgba(200,149,44,.45),inset 6px 0 0 0 var(--welt),0 6px 14px rgba(0,0,0,.25);transition:box-shadow .3s,background .3s}
.plakette.aktiv{background:linear-gradient(90deg,var(--welt-hell),#f3eee1 70%);box-shadow:inset 0 0 0 2px #f3eee1,inset 0 0 0 3px rgba(200,149,44,.45),inset 9px 0 0 0 var(--welt),0 0 0 3px rgba(232,195,106,.6),0 0 22px 6px rgba(232,195,106,.45),0 6px 14px rgba(0,0,0,.25)}
.plakette.aktiv .plakette__name{color:var(--welt-tief)}
.plakette::before,.plakette::after{content:"";position:absolute;top:50%;width:7px;height:7px;background:#c8952c;transform:translateY(-50%) rotate(45deg);box-shadow:0 0 0 1.5px #f3eee1}
.plakette::before{left:-5px}.plakette::after{right:-5px}
.uhr{position:relative;width:48px;height:48px;display:grid;place-items:center}
.uhr svg{position:absolute;inset:0;transform:rotate(-90deg)}
.uhr .spur{fill:none;stroke:rgba(34,32,27,.12);stroke-width:4}
.uhr .lauf{fill:none;stroke:var(--welt);stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .3s}
.uhr .kreis{width:36px;height:36px;font-size:1rem}
.uhr.knapp .lauf{stroke:#b0242a}
.plakette__name{display:block;font-family:var(--serif);font-weight:700;font-size:1.08rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plakette__info{display:block;font-size:.74rem;color:#5a5548;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plakette__stand{display:block;font-size:.66rem;color:#7a5a14;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.plakette__info b{font-family:var(--serif);font-size:.9rem;color:var(--tinte)}
.uhr.knapp + div .plakette__info b{color:#b0242a}
.plakette__zahl{text-align:center;padding-left:12px;border-left:1px solid #e4d9bf;line-height:1}
.plakette__zahl b{display:block;font-family:var(--serif);font-weight:700;font-size:1.65rem}
.plakette__zahl small{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a5a14}
.denkt{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.denkt i{width:4px;height:4px;border-radius:50%;background:#7a5a14;animation:punkt 1.2s infinite}
.denkt i:nth-child(2){animation-delay:.2s}.denkt i:nth-child(3){animation-delay:.4s}
@keyframes punkt{0%,80%,100%{opacity:.2}40%{opacity:1}}
.raster{--spalten:5;--luecke:12px;display:grid;grid-template-columns:repeat(var(--spalten),minmax(0,1fr));gap:var(--luecke);width:min(100%,calc(var(--spalten) * var(--kmax,128px) + (var(--spalten) - 1) * var(--luecke)));margin:0 auto}
.raster.eng{--luecke:8px}
.zuglog{font-size:.84rem;text-align:center;margin:12px 0 0;color:var(--t-text2);min-height:1.3em}
.zuglog--info{margin-top:4px;font-size:.78rem;opacity:.85}
.knopf--klein{min-height:36px;padding:6px 14px;font-size:.8rem}
.zuglog b{color:var(--t-text);font-family:var(--serif)}
@media (max-width:600px){
  .plaketten{gap:8px;margin-bottom:12px}
  .plakette{min-width:0;max-width:none;flex:1 1 calc(50% - 8px);padding:5px 9px 5px 6px;gap:7px}
  .plakette::before,.plakette::after{display:none}
  .uhr{width:40px;height:40px}.uhr .kreis{width:30px;height:30px;font-size:.9rem}
  .plakette__name{font-size:.95rem}
  .plakette__zahl{padding-left:8px}.plakette__zahl b{font-size:1.3rem}
  .plakette__info{font-size:.68rem}
  .plakette__stand{font-size:.6rem;white-space:normal;line-height:1.15}
  .plakette__zahl small{font-size:.54rem;letter-spacing:.04em}
  .plakette .lang{display:none}
  .raster{--luecke:7px}
  .tisch__status{font-size:1rem}
  .tisch__meta{font-size:.78rem}
  .spiel .knopfreihe .knopf{flex:1 1 0;padding:10px 8px}
  .karte.gefunden::after{width:18px;height:18px;right:-5px;top:-5px;border-width:1.5px}
}

/* ---------- Wiedergabe-Leiste ---------- */
.leiste{background:var(--welt-tief);color:#f3eee1;border-radius:14px;border-top:3px solid #c8952c;padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 auto 14px;max-width:820px;box-shadow:0 0 0 1px rgba(232,195,106,.25),0 6px 14px rgba(0,0,0,.25)}
.leiste__knoepfe{display:flex;gap:4px}
.leiste button{width:44px;height:44px;border-radius:10px;border:1px solid rgba(243,238,225,.18);background:rgba(243,238,225,.08);color:#f3eee1;display:grid;place-items:center;cursor:pointer;padding:0}
.leiste button:hover{border-color:#c8952c}
.leiste button.haupt{background:#c8952c;color:#221a06;border-color:#e8c36a}
.leiste button svg{width:18px;height:18px}
.leiste__zeit{flex:1;display:flex;align-items:center;gap:10px;min-width:200px}
.leiste__zeit input{flex:1;accent-color:#c8952c;height:44px;min-width:100px}
.leiste__stand{font-size:.8rem;color:#d9d3bf;white-space:nowrap}
.leiste__stand b{font-family:var(--serif);color:#e8c36a;font-size:.98rem}
.leiste .wahl{background:rgba(243,238,225,.1)}
.leiste .wahl button{width:auto;height:auto;min-height:44px;border:0;background:transparent;color:#d9d3bf;font-size:.78rem}
.leiste .wahl button[aria-pressed="true"]{background:#f3eee1;color:var(--welt-tief);box-shadow:none}
@media (max-width:640px){.leiste{padding:8px}.leiste__zeit{flex-basis:100%}}

/* ============================================================
   Ergebnis
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding:6vh 14px 20px;background:rgba(10,20,15,.55);overflow-y:auto;animation:einblenden .25s ease-out}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.ergebnis{width:min(100%,620px);background:#f3eee1;color:var(--tinte);border-radius:16px;border-top:4px solid #c8952c;box-shadow:0 0 0 1px rgba(200,149,44,.45),0 24px 50px rgba(0,0,0,.45);padding:20px 24px 22px;position:relative}
.ergebnis::before{content:"";position:absolute;inset:6px;top:4px;border:1px solid rgba(200,149,44,.3);border-radius:11px;pointer-events:none}
.ergebnis__kopf{text-align:center;margin-bottom:14px;display:flex;flex-direction:column;align-items:center}
.ergebnis__kopf h2{font-size:1.75rem;margin:8px 0 2px}
.ergebnis__kopf p{margin:0;color:#5a5548;font-size:.88rem}
.rang{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.rang li{display:grid;grid-template-columns:34px 38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 12px 7px 8px;background:#fffdf8;border:1px solid #e4d9bf;border-radius:12px}
.rang li.erster{border-color:#c8952c;box-shadow:inset 5px 0 0 var(--welt),0 0 0 1px rgba(200,149,44,.35)}
.rang__platz{font-family:var(--serif);font-weight:700;font-size:1.2rem;text-align:center;color:#7a5a14}
.erster .rang__platz{width:30px;height:30px;border-radius:50%;background:var(--messing-verlauf);color:#221a06;display:grid;place-items:center;font-size:1rem;box-shadow:0 0 0 1.5px #f3d98a}
.rang__name{font-family:var(--serif);font-weight:700;font-size:1.05rem;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rang__name small{display:block;font-family:var(--sans);font-weight:500;font-size:.72rem;color:#5a5548}
.rang__paare{font-family:var(--serif);font-weight:700;font-size:1.45rem;text-align:right;line-height:1}
.rang__paare small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#7a5a14;font-weight:700}
.statistik{width:100%;border-collapse:collapse;font-size:.84rem;margin:4px 0 8px}
.statistik th{font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a5a14;text-align:right;padding:6px 8px;border-bottom:1.5px solid #c8952c}
.statistik th:first-child,.statistik td:first-child{text-align:left}
.statistik td{text-align:right;padding:7px 8px;border-bottom:1px solid #e4d9bf;font-variant-numeric:tabular-nums}
.statistik td:first-child{font-family:var(--serif);font-weight:700;max-width:9em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statistik tfoot td{font-weight:700;border-bottom:0;border-top:1.5px solid #c8952c}
.kennzahlen{display:grid;grid-template-columns:repeat(3,1fr);margin:6px 0 10px;border:1px solid #e4d9bf;border-radius:12px;background:#fffdf8}
.kennzahl{padding:10px 8px;text-align:center}
.kennzahl+.kennzahl{border-left:1px solid #e4d9bf}
.kennzahl b{display:block;font-family:var(--serif);font-weight:700;font-size:1.4rem;line-height:1.1}
.kennzahl span{font-size:.68rem;color:#5a5548;font-weight:600}
.ergebnis .knopfreihe{margin-top:14px}
@media (max-width:600px){
  .overlay{padding:12px 8px}
  .ergebnis{padding:16px 12px}
  .ergebnis__kopf h2{font-size:1.4rem}
  .statistik{font-size:.76rem}.statistik th,.statistik td{padding:6px 4px}
  .ergebnis .knopfreihe .knopf{flex:1 1 calc(50% - 8px)}
  .ergebnis .knopfreihe .knopf--messing{flex-basis:100%}
}


/* ---------- Ergebnisleiste (ERGEBNIS_LEISTE in js/ui.js): fährt von unten hoch, Tisch bleibt sichtbar ---------- */
body.mit-ergebnisleiste{padding-bottom:var(--ergebnis-h,0px)}
.ergebnisleiste{position:fixed;left:0;right:0;bottom:0;z-index:80;pointer-events:none}
.ergebnisleiste > *{pointer-events:auto}
.ansicht{margin-left:var(--sa-l);margin-right:var(--sa-r);margin-bottom:var(--sa-b)}
.ergebnisleiste .ergebnis{width:100%;max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;border-radius:18px 18px 0 0;border-top:4px solid var(--messing);padding:16px max(20px,calc((100% - 1180px) / 2),calc(var(--sa-r) + 12px)) calc(18px + var(--sa-b)) max(20px,calc((100% - 1180px) / 2),calc(var(--sa-l) + 12px));
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kopf rang zahlen" "knoepfe rang tabelle";gap:6px 22px;align-items:start;
  box-shadow:0 0 0 1px rgba(200,149,44,.45),0 -14px 36px rgba(0,0,0,.35);animation:hochschieben .45s cubic-bezier(.2,.8,.2,1)}
@keyframes hochschieben{from{transform:translateY(100%)}to{transform:none}}
.ergebnisleiste .ergebnis::before{border-radius:14px 14px 0 0;bottom:0}
.ergebnisleiste .ergebnis__kopf{grid-area:kopf;text-align:left;align-items:flex-start;margin:0}
.ergebnisleiste .ergebnis__kopf h2{font-size:1.6rem;margin:6px 0 2px}
.ergebnisleiste .rang{grid-area:rang;margin:0}
.ergebnisleiste .kennzahlen{grid-area:zahlen;margin:0}
.ergebnisleiste .statistik{grid-area:tabelle;margin:0}
.ergebnisleiste .knopfreihe{grid-area:knoepfe;justify-content:flex-start;margin-top:8px}
.ergebnis-zeile{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;padding:9px calc(16px + var(--sa-r)) calc(9px + var(--sa-b)) calc(16px + var(--sa-l));background:#f3eee1;border-top:3px solid var(--messing);box-shadow:0 -8px 22px rgba(0,0,0,.28)}
.ergebnis-zeile .welt-pille{font-size:.74rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){
  .ergebnisleiste .ergebnis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kopf kopf" "knoepfe knoepfe" "rang zahlen" "rang tabelle"}
}
@media (max-width:600px){
  .ergebnisleiste .ergebnis{max-height:42vh;padding:12px calc(12px + var(--sa-r)) calc(14px + var(--sa-b)) calc(12px + var(--sa-l));grid-template-columns:minmax(0,1fr);grid-template-areas:"kopf" "knoepfe" "rang" "zahlen" "tabelle";gap:8px}
  .ergebnisleiste .ergebnis__kopf h2{font-size:1.3rem;margin-top:4px}
  .ergebnisleiste .ergebnis__kopf p{font-size:.8rem}
  .ergebnisleiste .knopfreihe{margin-top:2px;gap:6px}
  .ergebnisleiste .knopfreihe{flex-wrap:nowrap}
  .ergebnisleiste .knopfreihe .knopf{flex:1 1 auto;min-width:0;min-height:42px;padding:8px 8px;font-size:.78rem;letter-spacing:0}
}

/* Handy, Spieltisch: Kopfzeile scrollt mit, damit Statuszeile und Plaketten nicht darunter verschwinden */
@media (max-width:560px){
  html[data-sicht="spielen"] .kopf{position:relative}
}

/* ============================================================
   Meine Spiele
   ============================================================ */
.konto-seite{padding:22px 0 40px}
.konto-seite h1,.konto-seite h2.h1{font-size:clamp(1.6rem,4vw,2.2rem);margin:10px 0 4px}
.konto-seite .einleitung{color:#5a5548;margin:0 0 6px;font-size:.95rem}
.konto-seite > .hinweis{margin:8px 0 18px;max-width:640px}
.partien{display:grid;gap:10px}
.partie{background:#fffdf8;border:1px solid #e4d9bf;border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 16px;align-items:center;box-shadow:inset 4px 0 0 var(--welt)}
.partie__datum{text-align:center;min-width:58px;padding-right:14px;border-right:1px solid #e4d9bf;line-height:1.05}
.partie__datum b{display:block;font-family:var(--serif);font-size:1.6rem}
.partie__datum span{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a5a14}
.partie__titel{font-family:var(--serif);font-weight:700;font-size:1.08rem;margin:0}
.partie__titel .sieg{color:var(--gras)}.partie__titel .niederlage,.partie__titel .abgebrochen{color:var(--herz)}.partie__titel .unentschieden{color:#7a5a14}
.partie__meta{margin:2px 0 0;font-size:.8rem;color:#5a5548;line-height:1.45}
.partie__meta b{color:var(--tinte);font-weight:600}
.partie__knoepfe{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.leer{background:#fffdf8;border:1px dashed #d8cba9;border-radius:16px;padding:22px;text-align:center;color:#5a5548}
.leer p{margin:0 0 12px}
/* Meine Spiele für Gäste und nicht Angemeldete: Hinweiskasten statt Liste */
.meine-gast{display:flex;gap:12px;align-items:flex-start;margin:14px 0 0;max-width:640px;padding:16px 18px;border-radius:16px;background:#fffaf0;border:1.5px solid #c8952c;color:#3d2e07;line-height:1.5}
.meine-gast svg{flex:0 0 auto;margin-top:2px}
.meine-gast p{margin:0 0 12px}
.meine-gast__knoepfe{display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:640px){
  .konto-seite{padding:16px 0 30px}
  .huelle{width:calc(100% - 24px)}
  .partie{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .partie__knoepfe{grid-column:1/-1}
  .partie__knoepfe .knopf{flex:1}
  .partie__datum{min-width:48px;padding-right:10px}
}

@media (prefers-reduced-motion:reduce){.karte__innen{transition:none}.denkt i{animation:none}.overlay,.karte.gefunden::after,.ergebnisleiste .ergebnis,.karte.schluss .karte__vorn{animation:none}}

/* Einmaliger Hinweis für Gäste (Konto-Kern-Gastsitzung) */
.gast-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 16px auto 0; padding: 12px 16px; max-width: 960px;
  background: #fffaf0; border: 1px solid #c8952c; border-radius: 10px; color: #163226;
}
.gast-hinweis p { margin: 0; flex: 1 1 260px; }
.gast-hinweis a { color: #1F8A8A; font-weight: 600; }

/* ============================================================
   Querformat, kurze Höhe (Handy quer): alles Wichtige ohne Scrollen
   (dieselbe Bedingung steht in js/karten.js: QUER_BEDINGUNG)
   ============================================================ */
@media (max-height:500px) and (orientation:landscape){
  .kopf{position:relative}
  .kopf__inhalt{gap:0 .9rem;padding:.15rem 0;width:min(1180px,100% - 24px)}
  .marke{min-height:34px;gap:.5rem;padding-right:.7rem}
  .marke__wappen{width:26px;height:34px;margin:0}
  .welt-band{font-size:.3rem;left:-18px;top:4px;width:60px}
  .wortmarke b{font-size:1.02rem}
  .wortmarke small{display:none}
  .kopf__inhalt{flex-wrap:nowrap}
  .marke{flex:0 0 auto;border-right:1px solid rgba(200,149,44,.35)}
  .kopf nav{order:0;flex:1 1 auto;justify-content:flex-start;gap:.1rem 1rem;border-top:0;margin-top:0}
  .kopf nav a{flex:0 0 auto;min-height:34px;font-size:.84rem;padding-top:2px}
  .kopf__konto{min-height:34px;margin-left:0}
  .kopf__login{min-height:34px;margin-left:0;font-size:.8rem}
  .kopf__login .pille-z{width:26px;height:26px;font-size:.9rem}
  .kopf__portal{min-height:34px}

  /* Spieltisch */
  .spielseite{padding:6px 0 8px;min-height:100vh}
  .huelle.breit{width:calc(100% - 16px)}
  .tisch-rahmen{--t-rahmen-b:4px;border-radius:calc(12px + var(--t-rahmen-b))}
  .tisch{padding:6px 8px 6px;border-radius:12px}
  .tisch__kopf{margin:0;min-height:0;display:contents}
  .spiel{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"status plaketten" "raster raster" "knoepfe knoepfe";gap:4px 10px;align-items:center}
  .spiel > .leiste{grid-column:1/-1;margin:0 0 4px}
  .spiel .tisch__status{grid-area:status;font-size:.95rem;min-width:0}
  .spiel .tisch__meta{display:none}
  .spiel .plaketten{grid-area:plaketten;margin:0;gap:6px;flex-wrap:nowrap;justify-content:flex-end}
  .spiel .raster{grid-area:raster;--luecke:6px;align-self:start}
  .spiel .zuglog{display:none}
  .spiel #knoepfe-spiel,.spiel #knoepfe-wiedergabe{grid-area:knoepfe;margin:0;gap:6px}
  .spiel .knopfreihe .knopf{flex:0 1 auto;min-height:34px;padding:4px 18px;font-size:.8rem}
  .plakette{min-width:0;max-width:none;flex:0 1 auto;padding:2px 8px 2px 5px;gap:5px;border-radius:10px;box-shadow:inset 0 0 0 1.5px #f3eee1,inset 4px 0 0 0 var(--welt),0 3px 8px rgba(0,0,0,.25)}
  .plakette.aktiv{box-shadow:inset 0 0 0 1.5px #f3eee1,inset 5px 0 0 0 var(--welt),0 0 0 2px rgba(232,195,106,.7),0 0 12px 3px rgba(232,195,106,.4)}
  .plakette::before,.plakette::after{display:none}
  .uhr{width:30px;height:30px}.uhr .kreis{width:22px;height:22px;font-size:.78rem}
  .plakette__name{font-size:.82rem}
  .plakette__info{font-size:.62rem}
  .plakette__stand{display:none}
  .plakette .lang{display:none}
  .plakette__zahl{padding-left:6px}.plakette__zahl b{font-size:1.05rem}
  .plakette__zahl small{display:none}

  /* Ergebnisleiste: höchstens die halbe Höhe, scrollbar */
  .ergebnisleiste .ergebnis{max-height:50vh;padding:8px calc(14px + var(--sa-r)) calc(10px + var(--sa-b)) calc(14px + var(--sa-l));gap:4px 14px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kopf rang" "knoepfe rang" "zahlen tabelle"}
  .ergebnisleiste .ergebnis__kopf h2{font-size:1.15rem;margin:2px 0}
  .ergebnisleiste .ergebnis__kopf p{font-size:.78rem}
  .ergebnisleiste .knopfreihe{margin-top:2px;flex-wrap:wrap}
  .ergebnisleiste .knopfreihe .knopf{min-height:34px;padding:4px 10px;font-size:.76rem;flex:0 1 auto}
  .ergebnisleiste .rang li{padding:3px 8px 3px 6px}
  .ergebnis-zeile{padding:5px calc(12px + var(--sa-r)) calc(5px + var(--sa-b)) calc(12px + var(--sa-l))}

  /* Startseite: Hero und Kasten nebeneinander */
  .start{padding:6px 0 14px}
  .start .huelle.breit{width:calc(100% - 20px)}
  .start__rahmen{--t-rahmen-b:4px;border-radius:16px}
  .start__tisch{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:10px;padding:8px 10px;border-radius:12px;align-items:start}
  .start .hero{display:flex;flex-direction:column;gap:2px}
  .start .hero__marke{display:flex;gap:10px;align-items:center}
  .start .hero__wappen{width:44px;height:58px;border-radius:7px}
  .start .hero__wappen .welt-band{font-size:.34rem;left:-22px;top:6px;width:72px}
  .start h1{font-size:1.7rem}
  .start .hero__satz{font-size:.74rem;line-height:1.3;margin-top:2px}
  .start .sofort{align-self:stretch;min-height:44px;margin:4px 0;font-size:1.05rem;padding:0 12px}
  .start .filz{flex:none;min-height:0;height:100px}
  .start .filz__fuss{display:none}
  .faecher{--k:50px;--r:180px;--w:9deg;top:18px}
  .neue-partie{padding:8px 12px 10px;gap:5px;border-radius:14px}
  .neue-partie h2{display:none}
  .neue-partie .feld{grid-template-columns:78px minmax(0,1fr);gap:2px 8px;padding-top:5px}
  .neue-partie .feld--spieler{grid-template-columns:minmax(0,1fr);padding-top:0;border-top:0}
  .neue-partie .feld--spieler .feld__name{display:none}
  .neue-partie .feld__name{font-size:.8rem}
  .neue-partie .feld__name small{display:none}
  .neue-partie .mini{display:none}
  .kk{padding:4px 8px}.kk b{font-size:.92rem}.kk small{font-size:.64rem;margin-top:0}
  .mehr{margin-top:3px;font-size:.7rem}
  .mehr button{min-height:26px;padding:1px 9px;font-size:.72rem}
  .start-plakette{padding:1px 8px 1px 4px}
  .start-plakette .kreis{width:26px;height:26px;font-size:.8rem}
  .start-plakette__name{min-height:30px;font-size:.92rem}
  .start-plakette__stand{font-size:.66rem}
  .wahl2{gap:4px;flex-wrap:nowrap}
  .wahl2 button{min-height:32px;font-size:.74rem;padding:2px 6px;flex:1 1 0}
  .zahl{gap:8px;flex-wrap:nowrap}
  .zahl__feld button{width:34px;height:34px}
  .zahl__feld output{min-width:36px;font-size:1.05rem}
  .zahl__tipp{font-size:.68rem;flex:1;min-width:0;line-height:1.2}
  .los{min-height:42px;font-size:1.1rem}
  .los__info{display:none}
  .start .unten{grid-template-columns:minmax(0,1fr) 230px;margin-top:10px;gap:10px}
  .kasten-k{padding:10px 12px}
  .kasten-k h2{font-size:1.1rem}
  .pille{min-height:38px;font-size:.8rem}
}

/* Karten offen lassen (Kasten 2): sieben Zahlen immer in einer Zeile, auch am Handy (375 px) */
.seg--offen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;max-width:330px}
.seg--offen button{min-width:0;padding:4px 0}

/* ---------- Spielarten mit eigenem Bildsatz und fester Rückseite (21.10.2026, S-14 bis S-18) ---------- */
.stufen.stufen--vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:420px){.stufen.stufen--vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
.karte__feld img.sonder--bild{width:92%;height:92%;object-fit:contain;display:block;pointer-events:none;user-select:none}
/* Feste Rückseiten: Spieler können sie nicht ändern; Hintergrund A = Creme, B je Marke (Betreiber, Verwaltung) */
[data-rueck-fest] .karte__rueck{background:#f0ede4;box-shadow:inset 0 0 0 2px #c9b98f,0 2px 0 rgba(0,0,0,.2),0 7px 14px rgba(0,0,0,.26)}
[data-rueck-fest] .karte__rueck::before{border:1px solid #d6c8a2;box-shadow:none}
[data-rueck-fest] .karte__rueck::after{inset:16%;background:none center/contain no-repeat}
[data-rueck-fest="passagiere"] .karte__rueck::after{background-image:url(../bildsaetze/rueck/ready-to-fly.webp)}
[data-rueck-fest="passagiere"][data-rueck-variante="b"] .karte__rueck{background:radial-gradient(circle at 50% 40%,#eaf5fc,#c9e3f4)}
[data-rueck-fest="pasch"] .karte__rueck::after{inset:20%;background-image:url(../bildsaetze/rueck/paschduell-wuerfel.webp)}
[data-rueck-fest="pasch"][data-rueck-variante="b"] .karte__rueck{background:radial-gradient(circle at 50% 40%,#2c5a45,#163226)}
[data-rueck-fest="pasch"][data-rueck-variante="b"] .karte__rueck::before{border-color:rgba(232,195,106,.55)}
[data-rueck-fest="tenpai"] .karte__rueck::after{inset:13% 14%;background:url(../bildsaetze/rueck/tenpai-wortmarke-a.webp) center top/88% auto no-repeat,url(../bildsaetze/rueck/tenpai-zeichen.webp) center 92%/52% auto no-repeat}
[data-rueck-fest="tenpai"][data-rueck-variante="b"] .karte__rueck{background:radial-gradient(circle at 50% 40%,#2f6b55,#1b4334)}
[data-rueck-fest="tenpai"][data-rueck-variante="b"] .karte__rueck::before{border-color:rgba(232,195,106,.55)}
[data-rueck-fest="tenpai"][data-rueck-variante="b"] .karte__rueck::after{background-image:url(../bildsaetze/rueck/tenpai-wortmarke-b.webp),url(../bildsaetze/rueck/tenpai-zeichen.webp)}
.art-k img.sonder--bild,.art-k img{object-fit:contain}

/* Sprachwahl bei Bild & Wort / Wort & Wort (21.10.2026) */
.sprachen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.sprachen[hidden]{display:none}
.sprachen__titel{font-size:.78rem;font-weight:700;color:var(--tinte-weich);margin-right:4px}
.sprache{border:1.5px solid #d8cba9;border-radius:999px;background:#fffdf8;color:var(--tinte);font:inherit;font-size:.82rem;padding:5px 11px;cursor:pointer;min-height:32px}
.sprache[aria-pressed="true"]{border-color:var(--messing);background:#fdf6e3;box-shadow:0 0 0 3px rgba(232,195,106,.45)}

/* Fuß der Startseite (Links zu Regeln und Spielarten, 21.10.2026) */
.start-fuss{width:min(1180px,100% - 32px);margin:0 auto;padding:8px 0 40px;font-size:.88rem;color:var(--tinte-weich);text-align:center}
.start-fuss a{color:#166868;font-weight:600}