/* tafelbunt.css – eduki-Look der Tafelbunt-Homepage (Pilot 01.10.2026)
   Farben, Schriften, Zierrahmen, Pfeilschild, Tafel und Foto mit Klebestreifen stammen aus
   6R Deutsch banana\eduki-assets\eduki-stunde.css und eduki-index.css – hier nur für die Homepage
   zusammengestellt, nichts neu erfunden. Schriften liegen lokal in fonts/ (kein Nachladen von Google).
   Alle Maße der Rahmen-Ornamente in „Rahmen-mm“ (--mm = Pixel je mm des A4-Rahmens). */

@font-face { font-family: 'Mansalva'; font-weight: 400; font-display: swap; src: url(fonts/mansalva-latin.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: 'Mansalva'; font-weight: 400; font-display: swap; src: url(fonts/mansalva-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chilanka'; font-weight: 400; font-display: swap; src: url(fonts/chilanka-latin.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: 'Chilanka'; font-weight: 400; font-display: swap; src: url(fonts/chilanka-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Playpen Sans'; font-weight: 300; font-display: swap; src: url(fonts/playpen-sans-300.woff2) format('woff2'), url(fonts/playpen-sans-300.ttf) format('truetype'); }
@font-face { font-family: 'Playpen Sans'; font-weight: 500; font-display: swap; src: url(fonts/playpen-sans-500.woff2) format('woff2'), url(fonts/playpen-sans-500.ttf) format('truetype'); }

:root {
  --papier: #F4EEE3; --blatt: #FFFFFF; --zettel: #FFFEFA;
  --teal: #54A4A6; --teal-dk: #1E7D88; --teal-hell: #E2EFED;
  --navy: #042A43; --ink: #1D2327; --grau: #5B6770;
  --beere: #A44363; --beere-hell: #F7E9EE; --tag: #C8C1C1; --tag-schatten: #1B1B1B; --blase: #F5F7F6;
  --sk: #154854; --stift: #1F4E9C; --gruen: #23974A; --gruen-hell: #E7F3EA;
  --f1: #1E63C6; --f2: #1E7D88; --f3: #946B00; --f4: #6B3FA0; --f5: #A44363;   /* ruhige Abschnittsfarben */
  --gelb: #E8B33A; --orange: #E79059;                                           /* aus dem Tafelbunt-Logo */
  --tafel: #28453C; --holz: #8A6440; --kreide: #F6F5EE; --kreide-leise: #D9E6DE; --kreide-gelb: #F2E7B8;
  --f-text: 'Playpen Sans', 'Segoe UI', sans-serif;
  --f-pinsel: 'Mansalva', 'Segoe Print', cursive;
  --f-hand: 'Chilanka', 'Playpen Sans', cursive;
  --mm: 2.6px;
  --text: clamp(17px, calc(1vw + 6px), 20px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.tb {
  margin: 0; padding: 18px 14px 30px; background: var(--papier); color: var(--ink);
  font-family: var(--f-text); font-weight: 300; font-size: var(--text); line-height: 1.6; letter-spacing: .005em;
}
/* Grundregeln mit :where() – so überschreibt jede Klasse sie ohne !important */
:where(.tb) strong, :where(.tb) b { font-weight: 500; }
:where(.tb) img { max-width: 100%; }
:where(.tb) button, :where(.tb) input { font: inherit; color: inherit; }
:where(.tb) p { margin: 0 0 .6em; }
.tb :focus-visible { outline: 3px solid var(--teal-dk); outline-offset: 3px; border-radius: 4px; }
.tb [hidden] { display: none !important; }
.tb-seite { max-width: 1180px; margin: 0 auto; }
.tb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pinselschrift: „calt“ aus, sonst wird das große S zum Schnörkel */
:where(.tb) h1, :where(.tb) h2, :where(.tb) h3, .tb-pinsel {
  font-family: var(--f-pinsel); font-weight: 400; font-feature-settings: "calt" 0, "liga" 0; font-variant-ligatures: none;
  letter-spacing: .01em; color: var(--navy); margin: 0; line-height: 1.15;
}
.tb-fachbegriff { font-family: var(--f-text); font-weight: 300; color: var(--teal-dk); letter-spacing: .03em; }
.tb-f1 { --farbe: var(--f1); } .tb-f2 { --farbe: var(--f2); } .tb-f3 { --farbe: var(--f3); }
.tb-f4 { --farbe: var(--f4); } .tb-f5 { --farbe: var(--f5); }

/* ================================================================
   BLATT mit eduki-Rahmen (Strich = CSS-Rand, Ornamente = Teile aus rahmen/)
   ================================================================ */
.ek-blatt {
  position: relative; background: var(--blatt);
  border: calc(1.6 * var(--mm)) solid var(--teal); border-radius: calc(3 * var(--mm));
  padding: calc(15 * var(--mm)) calc(12 * var(--mm)) calc(29 * var(--mm));
  margin: calc(8 * var(--mm)) calc(6 * var(--mm)) calc(10 * var(--mm));
}
.ek-rahmen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.ek-rahmen i { position: absolute; display: block; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.r-ol-e { left: calc(-1.6 * var(--mm)); top: calc(-1.6 * var(--mm)); width: calc(11.3 * var(--mm)); height: calc(9.9 * var(--mm)); background-image: url(rahmen/ol-ecke.svg); }
.r-ol-s { left: calc(9.7 * var(--mm)); right: calc(50% + 11 * var(--mm)); top: calc(-1.6 * var(--mm)); height: calc(9.9 * var(--mm)); background-image: url(rahmen/ol-schwung.svg); }
.r-om   { left: calc(50% - 7 * var(--mm)); width: calc(14 * var(--mm)); top: calc(-5 * var(--mm)); height: calc(17.2 * var(--mm)); background-image: url(rahmen/om.svg); }
.r-or-s { left: calc(50% + 11 * var(--mm)); right: calc(9.7 * var(--mm)); top: calc(-1.6 * var(--mm)); height: calc(9.9 * var(--mm)); background-image: url(rahmen/or-schwung.svg); }
.r-or-e { right: calc(-1.6 * var(--mm)); top: calc(-1.6 * var(--mm)); width: calc(11.3 * var(--mm)); height: calc(9.9 * var(--mm)); background-image: url(rahmen/or-ecke.svg); }
.r-ul-e { left: calc(-1.6 * var(--mm)); bottom: calc(-1.6 * var(--mm)); width: calc(11.3 * var(--mm)); height: calc(9.8 * var(--mm)); background-image: url(rahmen/ul-ecke.svg); }
.r-ul-s { left: calc(9.7 * var(--mm)); right: calc(50% + 12.7 * var(--mm)); bottom: calc(-1.6 * var(--mm)); height: calc(9.8 * var(--mm)); background-image: url(rahmen/ul-schwung.svg); }
.r-um   { left: calc(50% - 15.5 * var(--mm)); width: calc(31 * var(--mm)); bottom: calc(-3.3 * var(--mm)); height: calc(27.5 * var(--mm)); background-image: url(rahmen/um.svg); }
.r-ur-s { left: calc(50% + 12.7 * var(--mm)); right: calc(9.7 * var(--mm)); bottom: calc(-1.6 * var(--mm)); height: calc(9.8 * var(--mm)); background-image: url(rahmen/ur-schwung.svg); }
.r-ur-e { right: calc(-1.6 * var(--mm)); bottom: calc(-1.6 * var(--mm)); width: calc(11.3 * var(--mm)); height: calc(9.8 * var(--mm)); background-image: url(rahmen/ur-ecke.svg); }
.r-l-o  { left: calc(-5.8 * var(--mm)); width: calc(6.4 * var(--mm)); top: calc(1.5 * var(--mm)); bottom: calc(50% + 15.2 * var(--mm)); background-image: url(rahmen/l-oben.svg); }
.r-l-p  { left: calc(-5.8 * var(--mm)); width: calc(11.1 * var(--mm)); top: calc(50% - 15.2 * var(--mm)); height: calc(30.4 * var(--mm)); background-image: url(rahmen/l-pik.svg); }
.r-l-u  { left: calc(-5.8 * var(--mm)); width: calc(6.4 * var(--mm)); top: calc(50% + 15.2 * var(--mm)); bottom: calc(7.5 * var(--mm)); background-image: url(rahmen/l-unten.svg); }
.r-r-o  { right: calc(-5.8 * var(--mm)); width: calc(6.4 * var(--mm)); top: calc(1.5 * var(--mm)); bottom: calc(50% + 15.2 * var(--mm)); background-image: url(rahmen/r-oben.svg); }
.r-r-p  { right: calc(-5.8 * var(--mm)); width: calc(11.1 * var(--mm)); top: calc(50% - 15.2 * var(--mm)); height: calc(30.4 * var(--mm)); background-image: url(rahmen/r-pik.svg); }
.r-r-u  { right: calc(-5.8 * var(--mm)); width: calc(6.4 * var(--mm)); top: calc(50% + 15.2 * var(--mm)); bottom: calc(7.5 * var(--mm)); background-image: url(rahmen/r-unten.svg); }
/* kurze Blätter (setzt tafelbunt.js): keine gedehnten Seitenschwünge, nur der Pik */
.ek-kurz .r-l-o, .ek-kurz .r-l-u, .ek-kurz .r-r-o, .ek-kurz .r-r-u { display: none; }
.ek-sehr-kurz .r-l-p, .ek-sehr-kurz .r-r-p { display: none; }

/* ================================================================
   JS-Zeichnungen (Skizzenkasten, Merke-Strichelung, Papier, Sprechblase) aus stil_helpers.js
   ================================================================ */
[data-ek] { position: relative; isolation: isolate; }
.ek-deko { position: absolute; z-index: -1; pointer-events: none; line-height: 0; }
.ek-deko svg { display: block; overflow: visible; }
/* Ersatz ohne JavaScript */
html:not(.ek-js) [data-ek="sketch"] { background: #fff; border: 2px solid var(--sk); box-shadow: 5px 6px 0 var(--sk); }
html:not(.ek-js) [data-ek="dashed"] { border: 2.5px dashed var(--beere); border-radius: 18px; }
html:not(.ek-js) [data-ek="paper"] { background: var(--zettel); border: 1.5px solid var(--sk); box-shadow: 6px 6px 0 var(--teal-hell); }
html:not(.ek-js) [data-ek="blase"] { background: var(--blase); border: 1.5px solid #111; border-radius: 22px; }

/* ================================================================
   GRAUES PFEILSCHILD (Knöpfe und Links)
   ================================================================ */
.tb-tag {
  --h: 2.5em;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5em;
  min-height: var(--h); padding: .4em 1.65em .4em 1em; margin: 0 .35em .45em .25em;
  font-family: var(--f-text); font-weight: 500; font-size: .95em; line-height: 1.2; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; text-align: left; white-space: nowrap;
  background: none; border: 0; border-radius: 0; cursor: pointer; transition: transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.tb-tag::before, .tb-tag::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  clip-path: polygon(0 3px, 3px 0, calc(100% - .95em) 0, 100% 50%, calc(100% - .95em) 100%, 3px 100%, 0 calc(100% - 3px));
}
.tb-tag::before { background: var(--tag-schatten); transform: translate(-3px, 4px); z-index: -2; }
.tb-tag::after { background: var(--tag); }
.tb-tag:hover { transform: translate(1px, -1px); }
.tb-tag:hover::after { background: #BDB5B5; }
.tb-tag:active { transform: translate(-2px, 3px); }
.tb-tag:active::before { transform: translate(-1px, 1px); }
.tb-tag-haupt { color: #fff; }
.tb-tag-haupt::after { background: var(--teal-dk); }
.tb-tag-haupt:hover::after { background: #176670; }
.tb-tag-gross { font-size: 1.12em; --h: 2.7em; padding-left: 1.2em; padding-right: 1.9em; }
.tb-tag:disabled, .tb-tag[aria-disabled="true"] { cursor: default; opacity: .42; }
.tb-tag:disabled:hover, .tb-tag[aria-disabled="true"]:hover { transform: none; }
.tb-tag:disabled:hover::after { background: var(--tag); }
.tb-tag .tb-ico { display: inline-flex; width: 1.25em; height: 1.25em; flex-shrink: 0; }
.tb-tag .tb-ico svg, .tb-tag .tb-ico img { width: 100%; height: 100%; display: block; }
.tb-zurueck { font-size: .82em; }

/* ================================================================
   BAUSTEINE: Siegel, Foto mit Klebestreifen, Tafel, große Ziffer, Notizzettel, Fuß
   ================================================================ */
.tb-siegel { display: block; width: 84px; height: 84px; flex-shrink: 0; border-radius: 50%; }

.tb-foto { position: relative; display: inline-block; flex-shrink: 0; background: #fff; padding: 9px 9px 26px;
  border: 1px solid #D9D2C5; transform: rotate(-2.2deg); line-height: 0; }
.tb-foto::before { content: ''; position: absolute; left: 50%; top: -13px; width: 84px; height: 24px; margin-left: -42px;
  background: rgba(164, 67, 99, .30); transform: rotate(-3deg); z-index: 2;
  clip-path: polygon(0 0, 100% 0, 97% 25%, 100% 50%, 97% 75%, 100% 100%, 0 100%, 3% 75%, 0 50%, 3% 25%); }
.tb-foto img { display: block; width: 150px; height: 150px; object-fit: cover; object-position: 50% 30%; }

.tb-tafel {
  position: relative; background: var(--tafel); color: var(--kreide);
  background-image: radial-gradient(ellipse 60% 45% at 22% 30%, rgba(255,255,255,.045), transparent 70%),
                    radial-gradient(ellipse 50% 40% at 78% 72%, rgba(255,255,255,.035), transparent 70%);
  border: 14px solid var(--holz); border-radius: 10px; padding: 24px 34px 24px;
  box-shadow: 7px 8px 0 #1B1B1B; font-family: var(--f-hand); letter-spacing: .02em;
}
.tb-tafel::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -26px; height: 11px; background: #B89C73; border-radius: 2px; }
.tb-tafel .tb-gelb { color: var(--kreide-gelb); }

.tb-bignum {
  font-family: var(--f-text); font-weight: 500; line-height: .95; color: var(--farbe, var(--teal));
  text-shadow: .014em .014em 0 #F5E2E5, .03em .03em 0 var(--navy), .045em .042em 0 var(--navy), .06em .052em 0 var(--navy), .075em .062em 0 var(--navy);
  font-feature-settings: normal; letter-spacing: 0;
}

.tb-zettel { position: relative; background: var(--zettel); border: 1.6px solid var(--sk); border-radius: 4px;
  box-shadow: 6px 6px 0 var(--teal-hell), 6px 6px 0 1.4px rgba(21, 72, 84, .45); }
.tb-zettel::before { content: ''; position: absolute; left: calc(50% - 36px); top: -11px; width: 72px; height: 20px;
  background: rgba(164, 67, 99, .30); transform: rotate(-2.5deg); z-index: 2; }

.tb-fuss { text-align: center; color: var(--grau); font-size: .8em; margin: 6px 0 0; }
.tb-noscript { max-width: 640px; margin: 20px auto; padding: 16px 20px; background: #fff; border: 2.5px dashed var(--beere); border-radius: 18px; }

/* Papier-Konfetti (nur bei Gold/Silber und beim Battle-Sieg; aus bei „weniger Bewegung“) */
.tb-konfetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 50; }
.tb-konfetti i { position: absolute; top: -24px; width: 11px; height: 16px; opacity: .92; animation: tb-fall 2.6s cubic-bezier(.25, .6, .5, 1) forwards; }
@keyframes tb-fall { to { transform: translate3d(var(--dx, 0), 108vh, 0) rotate(var(--rot, 300deg)); opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .tb-konfetti { display: none; }
  .tb *, .tb *::before, .tb *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ================================================================
   STARTSEITE / SPIELE-ÜBERSICHT
   ================================================================ */
.st-kopf { display: grid; grid-template-columns: 1fr auto; gap: 18px 34px; align-items: center; }
.st-logo { display: block; width: min(420px, 100%); height: auto; margin: 0 0 20px; }
.st-kopf h1 { font-size: clamp(34px, 4.4vw, 58px); }
.st-kopf .tb-fachbegriff { margin: .5em 0 0; font-size: clamp(18px, 1.7vw, 24px); }
.st-kopf .st-einleitung { margin: 1em 0 0; max-width: 40em; }
.st-figuren { display: flex; align-items: flex-end; gap: 2px; }
.st-figuren img { height: 250px; width: auto; }
.st-figuren img.gespiegelt { transform: scaleX(-1); }

.st-abschnitt { margin: 6px calc(6 * var(--mm)) 0; }
.st-abschnitt > h2 { font-size: clamp(27px, 3vw, 38px); margin: 26px 0 4px;
  text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.st-abschnitt > .st-unter { color: var(--teal-dk); margin: 10px 0 26px; }
.st-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px 30px; margin: 0 6px 34px 0; }
.st-karte { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 16px; color: inherit; text-decoration: none; transition: transform .12s ease; }
a.st-karte:hover { transform: translate(-2px, -2px); }
.st-karte-kopf { display: flex; align-items: center; gap: 14px; }
.st-karte-kopf img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 3px solid var(--teal); padding: 2px; background: #fff; flex-shrink: 0; }
.st-karte .st-nr { font-weight: 500; font-size: .8em; color: var(--grau); letter-spacing: .04em; }
.st-karte h3 { font-size: 25px; color: var(--farbe, var(--navy)); line-height: 1.18; }
.st-karte p { margin: 0; font-size: .88em; line-height: 1.45; color: #333; }
.st-karte .tb-tag { align-self: flex-start; margin-top: auto; }
.st-karte .st-luft { flex: 1; min-height: 6px; }
.st-battle { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 26px; padding: 24px 26px 20px; }
.st-battle .st-battle-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.st-battle h3 { font-size: clamp(27px, 3vw, 36px); color: var(--navy); }
.st-battle .st-mini { display: grid; grid-template-columns: repeat(5, 30px); gap: 6px; flex-shrink: 0; transform: rotate(-2deg); }
.st-battle .st-mini i { display: block; height: 22px; border: 2px solid var(--sk); border-radius: 3px 5px 4px 6px; background: #fff; box-shadow: 2px 3px 0 var(--sk); }
.st-battle .st-mini i:nth-child(5n+1) { background: #DCE8FA; } .st-battle .st-mini i:nth-child(5n+2) { background: var(--teal-hell); }
.st-battle .st-mini i:nth-child(5n+3) { background: #F6ECCB; } .st-battle .st-mini i:nth-child(5n+4) { background: #EADFF5; }
.st-battle .st-mini i:nth-child(5n+5) { background: var(--beere-hell); }
.st-merke { position: relative; margin: 8px 6px 26px 0; padding: 20px 26px 18px; max-width: 900px; background: #fff; border-radius: 24px; }
.st-merke h3 { font-size: 27px; margin: 0 0 6px; color: #111; }
.st-merke p { margin: 0 0 .5em; }
.st-hinweis { font-size: .85em; color: var(--grau); }

@media (max-width: 760px) {
  body.tb { --mm: 1.75px; padding: 10px 6px 24px; }
  .ek-blatt { padding: calc(15 * var(--mm)) 18px calc(30 * var(--mm)); margin-left: 10px; margin-right: 10px; }
  .st-kopf { grid-template-columns: 1fr; }
  .st-figuren { display: none; }
  .st-abschnitt { margin-left: 12px; margin-right: 12px; }
  .st-battle { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   STARTSEITE DER HOMEPAGE: Startbild, Idee, Hör-Beispiel, „So hilfst du mit“
   ================================================================ */
.lp-nav { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 2px 4px; margin: 0 calc(6 * var(--mm)); font-size: .86em; }
.lp-nav .tb-tag { margin-bottom: 0; }
.lp-abschnitt, .lp-beispiel { scroll-margin-top: 16px; }

.lp-held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 26px 46px; align-items: center; margin-top: calc(5 * var(--mm)); }
.lp-held .st-logo { width: min(330px, 100%); margin: 0 0 18px; }
.lp-held h1 { font-size: clamp(40px, 5.2vw, 70px); line-height: 1.05; }
.lp-held .tb-fachbegriff { margin: .45em 0 0; font-size: clamp(19px, 1.9vw, 26px); }
.lp-kern { margin: 1em 0 1.2em; max-width: 33em; }
.lp-knoepfe { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.lp-szene { position: relative; }
.lp-szene .tb-tafel { padding: 24px 22px 100px; text-align: center; transform: rotate(-.7deg); }
.lp-spruch { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.28; margin: 0 0 .3em; }
.lp-hashtag { font-size: clamp(23px, 2.3vw, 31px); line-height: 1.2; margin: 0; }
.lp-hashtag .k1 { color: #F2D675; }
.lp-hashtag .k2 { color: #9FDAD6; }
.lp-hashtag .k3 { color: #F5B58A; }
.lp-kinder { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; margin: -88px 0 0; }
.lp-kinder img { display: block; flex: none; height: clamp(140px, 13.4vw, 182px); width: auto; margin: 0 -12px; }
.lp-kinder img:nth-child(odd) { height: clamp(133px, 12.7vw, 173px); }
.lp-kinder img.gespiegelt { transform: scaleX(-1); }

.lp-abschnitt { margin: 4px calc(6 * var(--mm)) 0; }
.lp-abschnitt > h2, .lp-beispiel > h2 { font-size: clamp(29px, 3.2vw, 42px); }
.lp-abschnitt > h2 { margin: 30px 0 18px; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.lp-lead { margin: 0 0 1.3em; max-width: 46em; }
.lp-idee { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 26px 52px; align-items: start; }
.lp-idee p { max-width: 38em; margin: 0 0 .8em; }
.lp-begleiter { font-weight: 500; }
.lp-zettel { padding: 26px 22px 14px; transform: rotate(1.6deg); margin: 8px 12px 12px 0; }
.lp-zettel h3 { font-size: 27px; margin: 0 0 8px; color: var(--f4); }
.lp-zettel p { font-size: .92em; line-height: 1.5; margin: 0 0 .6em; }

.lp-beispiel { margin-top: calc(11 * var(--mm)); }
.lp-beispiel > h2 { margin: 0 0 10px; }
.lp-schritte { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 30px; }
.lp-schritte li, .lp-kreislauf li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; }
.lp-schritte .tb-bignum, .lp-kreislauf .tb-bignum { grid-row: 1 / span 2; font-size: 62px; padding-right: 4px; }
.lp-schritte h3, .lp-kreislauf h3 { font-size: 27px; color: var(--farbe); margin: 4px 0 2px; }
.lp-schritte p, .lp-kreislauf p { margin: 0; font-size: .92em; line-height: 1.5; }
.lp-hoer { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 30px 50px; align-items: start; }
.lp-hoer-bild { padding: 16px 0 0 6px; }
.lp-hoer-bild .tb-foto { display: block; transform: rotate(-1.6deg); }
.lp-hoer-bild .tb-foto img { width: 100%; height: auto; }
.lp-hoer-spiel h3 { font-size: 29px; margin: 0 0 2px; }
.lp-hoer-titel { color: var(--teal-dk); font-size: .88em; margin: 0 0 14px; }
.lp-clip { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; margin: 0 0 6px; }
.lp-clip .tb-tag { margin-bottom: .3em; }
.lp-kopf { width: 44px; height: 44px; object-fit: cover; object-position: 50% 4%; border-radius: 50%; border: 2.5px solid var(--teal); background: #fff; }
.lp-ton, .lp-mikro { color: #fff; }
.lp-ton::after { background: var(--f1); }
.lp-ton:hover::after, .lp-ton.spielt::after { background: #174FA0; }
.lp-ton.spielt .tb-ico { animation: lp-puls 1s ease-in-out infinite; }
@keyframes lp-puls { 50% { opacity: .4; } }
.lp-mikro::after, .lp-mikro:disabled:hover::after { background: var(--beere); }
.lp-dauer { font-size: .78em; color: var(--grau); }
.lp-mitlesen { margin: 22px 14px 14px 2px; padding: 18px 22px 14px; min-height: 112px; }
.lp-mitlesen-titel { font-family: var(--f-pinsel); font-size: 22px; color: var(--navy); margin: 0 0 4px; font-feature-settings: "calt" 0, "liga" 0; }
.lp-mitlesen p:last-child { margin: 0; font-size: .92em; line-height: 1.5; }

.lp-kreislauf { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
.lp-kreislauf li { padding: 18px 22px 18px 20px; margin: 0 22px 28px 2px; min-height: 136px; }
.lp-ziele h3 { font-size: 27px; margin: 0 0 8px; }
.lp-striche { list-style: none; margin: 0 0 18px; padding: 0; max-width: 46em; }
.lp-striche li { position: relative; padding-left: 1.2em; margin: 0 0 .4em; }
.lp-striche li::before { content: '-'; position: absolute; left: .15em; top: 0; font-weight: 500; }

.lp-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 44px; align-items: start; margin-top: 36px; }
.lp-merke { padding: 20px 26px 16px; background: #fff; border-radius: 24px; }
.lp-merke h3, .lp-plan h3 { font-size: 27px; margin: 0 0 6px; color: #111; }
.lp-plan { padding: 26px 24px 12px; transform: rotate(-1deg); margin: 4px 12px 12px 0; }
.lp-plan h3 { color: var(--f3); }
.lp-merke p, .lp-plan p { margin: 0 0 .5em; }

.lp-schluss { text-align: center; margin: 38px 12px 12px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; }
.lp-raute { display: inline-block; margin-left: .4em; font-family: var(--f-text); font-weight: 500; font-size: .6em; color: #fff; background: var(--teal-dk);
  padding: .25em .8em; border-radius: 4px 9px 5px 10px / 9px 5px 10px 4px; vertical-align: .22em; white-space: nowrap; }

/* Übersicht der Lernspiele: Siegel oben rechts im Kopf, die Figuren stehen links daneben */
.st-kopf { position: relative; }
.st-siegel { position: absolute; top: calc(6 * var(--mm)); right: calc(7 * var(--mm)); width: 78px; height: 78px; }
.tb-spiele .st-figuren { margin-right: 76px; }

@media (max-width: 1000px) {
  .lp-held { grid-template-columns: 1fr; }
  .lp-szene { width: 100%; max-width: 520px; margin: 0 auto; }
  .lp-idee, .lp-hoer { grid-template-columns: 1fr; }
  .lp-zettel { max-width: 440px; }
  .lp-hoer-bild { max-width: 470px; }
}
@media (max-width: 760px) {
  .lp-nav { justify-content: flex-start; margin: 0 10px; font-size: .78em; }
  .lp-nav a:nth-child(2) { display: none; }                 /* „Beispiel“ steht auf dem Handy schon als Knopf im Startbild */
  .tb-spiele .st-kopf h1 { padding-right: 58px; }
  .lp-held h1 { font-size: 39px; }
  .lp-held .st-logo { width: 240px; margin-bottom: 14px; }
  .lp-szene .tb-tafel { padding: 16px 12px 80px; border-width: 10px; box-shadow: 5px 6px 0 #1B1B1B; }
  .lp-kinder { margin-top: -74px; }
  .lp-kinder img, .lp-kinder img:nth-child(odd) { height: 130px; margin: 0 -9px; }
  .lp-kinder img:nth-child(1), .lp-kinder img:nth-child(7) { display: none; }
  .lp-abschnitt { margin-left: 12px; margin-right: 12px; }
  .lp-schritte, .lp-kreislauf, .lp-paar { grid-template-columns: 1fr; }
  .lp-kreislauf li { min-height: 0; margin-bottom: 26px; }
  .lp-schritte .tb-bignum, .lp-kreislauf .tb-bignum { font-size: 52px; }
  .lp-mitlesen { padding: 16px 16px 12px; margin-right: 10px; }
  .st-siegel { width: 54px; height: 54px; top: calc(7 * var(--mm)); right: 12px; }
}

/* ================================================================
   SPIEL 1: „HOL DIR DEN HIGHSCORE“
   ================================================================ */
body.tb-spiel { --mm: 2.3px; padding-top: 8px; }
.tb-spiel .tb-leiste { display: flex; justify-content: space-between; align-items: center; margin: 0 calc(6 * var(--mm)); min-height: 34px; }
.tb-spiel .ek-blatt { margin-top: calc(6 * var(--mm)); margin-bottom: calc(8 * var(--mm)); padding-top: calc(14 * var(--mm)); }

/* --- Startbild --- */
.hs-start-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; margin: 0 0 26px; }
.hs-start-kopf h1 { font-size: clamp(36px, 4.6vw, 60px); }
.hs-start-kopf .tb-fachbegriff { margin: .4em 0 0; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.25; }
.hs-start-kopf .hs-zeile { margin: .7em 0 0; font-size: .8em; color: var(--grau); }
.hs-start-mitte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: end; margin: 0 0 34px; }
.hs-regeln { padding: 22px 34px 22px; }
.hs-regeln .hs-regeln-titel { color: var(--kreide-leise); font-size: 21px; margin: 0 0 8px; }
.hs-regeln ul { list-style: none; margin: 0; padding: 0; font-size: clamp(20px, 1.9vw, 25px); line-height: 1.4; }
.hs-regeln li { position: relative; padding-left: 1.3em; margin: 0 0 .32em; }
.hs-regeln li::before { content: ''; position: absolute; left: .1em; top: .52em; width: .42em; height: .42em; border-radius: 50%; background: var(--kreide-gelb); }
.hs-start-figur { display: grid; justify-items: center; gap: 2px; width: 300px; }
.hs-start-figur .hs-blase { width: 100%; min-height: 0; text-align: center; padding: 14px 20px; }
.hs-start-figur img { height: 250px; width: auto; }
.hs-start-knopf { text-align: center; }

/* --- Spiel --- */
.hs-kopfzeile { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; margin: 0 0 16px; }
.hs-titelblock { flex: 1 1 250px; min-width: 0; }
.hs-titel { font-size: clamp(23px, 2.3vw, 29px); margin: 0 !important; }
.hs-thema { margin: 2px 0 0 !important; color: var(--teal-dk); font-size: .78em; line-height: 1.25; }
.hs-leiter { display: flex; gap: 13px; list-style: none; margin: 0; padding: 0; }
.hs-stufe { display: grid; justify-items: center; gap: 4px; }
.hs-kreise { display: flex; gap: 5px; }
.hs-kreise i { display: block; width: 19px; height: 19px; border: 2px solid #111; border-radius: 50%; background: #fff no-repeat center / 76%; }
.hs-kreise i.ok { border-color: var(--gruen);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.4 4 8 8.6 2.2' fill='none' stroke='%2323974A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hs-kreise i.jetzt { border-color: var(--teal-dk); background-color: var(--teal-hell); box-shadow: 0 0 0 3px rgba(84, 164, 166, .38); animation: hs-puls 1.6s ease-in-out infinite; }
.hs-kreise i.falsch { border-color: var(--beere);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 2.2 7.8 7.8M7.8 2.2 2.2 7.8' stroke='%23A44363' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
@keyframes hs-puls { 50% { box-shadow: 0 0 0 6px rgba(84, 164, 166, .16); } }
.hs-wert { font-size: 12.5px; color: var(--grau); line-height: 1; white-space: nowrap; }
.hs-stufe.aktiv .hs-wert { color: var(--teal-dk); font-weight: 500; }
.hs-punkte { display: flex; align-items: baseline; gap: 10px; }
.hs-punkte-label { font-size: .8em; color: var(--teal-dk); letter-spacing: .04em; }
.hs-punkte-zahl { font-size: 44px; min-width: 1.3em; text-align: right; display: inline-block; }
.hs-punkte-zahl.plus { animation: hs-huepf .45s ease; }
@keyframes hs-huepf { 40% { transform: translateY(-7px) scale(1.12); } }
.hs-kopfzeile .tb-siegel { width: 62px; height: 62px; }

.hs-tisch { display: grid; grid-template-columns: minmax(0, 1fr) 404px; gap: 24px; align-items: stretch; margin: 0 0 34px; }
.hs-tafel { min-height: 204px; display: flex; flex-direction: column; }
.hs-tafel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 20px; color: var(--kreide-leise); }
.hs-wert-kreide { color: var(--kreide-gelb); font-size: 22px; line-height: 1.2; padding: 3px 15px 0; border: 2px solid var(--kreide-gelb); border-radius: 50% / 48%; transform: rotate(-2deg); white-space: nowrap; }
.hs-frage { margin: auto 0 !important; padding: 12px 0 8px; font-size: clamp(21px, 2.05vw, 28px); line-height: 1.45; outline: none; }
.hs-helfer { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 8px; align-items: end; }
.hs-blasenspalte { align-self: start; display: grid; gap: 12px; justify-items: start; padding-top: 4px; }
.hs-blase { width: 100%; min-height: 92px; padding: 13px 18px 12px; font-size: .88em; line-height: 1.45; }
.hs-blase p { margin: 0 0 .35em; }
.hs-blase p:last-child { margin-bottom: 0; }
.hs-blase .hs-ruf { font-family: var(--f-pinsel); font-size: 1.36em; line-height: 1.15; font-feature-settings: "calt" 0, "liga" 0; white-space: nowrap; }
.hs-blase .hs-ruf.gut { color: var(--gruen); }
.hs-blase .hs-ruf.schade { color: var(--beere); }
.hs-blase .hs-mit-birne { display: flex; gap: 10px; align-items: flex-start; }
.hs-blase .hs-mit-birne img { width: 26px; height: auto; flex-shrink: 0; margin-top: -2px; }
.hs-figur { display: block; width: 108px; height: 204px; object-fit: contain; object-position: 50% 100%; }
.hs-figur.gespiegelt { transform: scaleX(-1); }
.hs-weiter { margin: 0 0 0 .25em; }

/* Klassen-Joker: Balken wie mit dem Stift gezeichnet */
.hs-stimmen { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 9px; align-items: center; margin: 6px 0 0; }
.hs-stimmen b { font-weight: 500; }
.hs-stimmen .hs-balken { height: 13px; border: 1.6px solid var(--sk); border-radius: 2px 5px 3px 6px; background: #fff; overflow: hidden; }
.hs-stimmen .hs-balken i { display: block; height: 100%; background: repeating-linear-gradient(-58deg, var(--teal) 0 3px, #8CC3C4 3px 5px); border-right: 1.6px solid var(--sk); }
.hs-stimmen .hs-pz { font-size: .92em; text-align: right; font-variant-numeric: tabular-nums; }

.hs-antworten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin: 0; padding: 0; }
.hs-antwort {
  display: flex; align-items: center; gap: 16px; text-align: left; min-height: 66px; padding: 9px 16px 9px 16px;
  margin: 0 18px 24px 2px; background: none; border: 0; border-radius: 0; cursor: pointer; line-height: 1.35;
  transition: transform .12s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent;
}
.hs-antwort:hover:not(:disabled) { transform: translate(-1px, -2px); }
.hs-antwort:active:not(:disabled) { transform: translate(2px, 3px); }
.hs-antwort:disabled { cursor: default; }
.hs-buchstabe { font-size: 34px; width: 1.05em; text-align: center; flex-shrink: 0; }
.hs-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.hs-antwort.weg { opacity: .3; }
.hs-antwort.weg .hs-text { text-decoration: line-through; text-decoration-thickness: 2px; }
.hs-antwort.richtig .hs-buchstabe { --farbe: var(--gruen); }
.hs-antwort.falsch .hs-buchstabe { --farbe: var(--beere); }
.hs-antwort.falsch { animation: hs-wackel .4s ease; }
@keyframes hs-wackel { 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } 85% { transform: translateX(-2px); } }
.hs-zeichen { width: 32px; height: 32px; flex-shrink: 0; }
.hs-zeichen path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: hs-strich .35s ease-out forwards; }
.hs-zeichen path + path { animation-delay: .18s; }
@keyframes hs-strich { to { stroke-dashoffset: 0; } }

.hs-fuss { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.hs-joker-titel { font-size: 25px; margin-right: 6px; }
.hs-joker { display: flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; }
.hs-joker .tb-tag { margin-bottom: 0; }
.hs-joker .tb-tag.verbraucht { text-decoration: line-through; text-decoration-thickness: 2px; }
.hs-joker .tb-kurz { display: none; }
.hs-tasten { margin-left: auto; font-size: .72em; color: var(--grau); }
/* Kurzmeldung und zweiter Weiter-Knopf: nur in der festen Leiste auf schmalen Bildschirmen */
.hs-kurzruf, .hs-weiter-unten { display: none; }
.hs-kurzruf { font-size: 25px; line-height: 1.1; white-space: nowrap; }
.hs-kurzruf.gut { color: var(--gruen); }
.hs-kurzruf.schade { color: var(--beere); }

/* --- Urkunde --- */
.hs-ende { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr) 190px; gap: 10px 24px; align-items: center; text-align: center; }
.hs-ende .tb-siegel { position: absolute; top: -6px; right: -4px; width: 70px; height: 70px; }
.hs-ende-mitte { display: grid; justify-items: center; gap: 4px; }
.hs-ende h1 { font-size: clamp(38px, 5vw, 62px); }
.hs-ende h1:focus { outline: none; }
.hs-ende .hs-fuer { color: var(--teal-dk); margin: 6px 0 12px; line-height: 1.3; }
.hs-endpunkte { font-size: clamp(60px, 8.5vw, 104px); margin: 0 0 2px; }
.hs-von { font-family: var(--f-pinsel); font-size: clamp(24px, 2.6vw, 32px); color: var(--navy); margin: 0 0 12px !important; font-feature-settings: "calt" 0, "liga" 0; }
.hs-spruch { font-weight: 500; margin: 0 0 2px !important; }
.hs-note { display: inline-block; margin: 12px 0 2px !important; padding: 8px 20px 7px; font-size: .88em; }
.hs-note small { display: block; font-size: .82em; color: var(--grau); }
.hs-rekord { color: var(--teal-dk); font-size: .88em; margin: 8px 0 0 !important; }
.hs-ende-knoepfe { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; }
.hs-medaille svg { display: block; width: 100%; max-width: 172px; height: auto; margin: 0 auto; }
.hs-ende-figur img { height: 290px; width: auto; }
.hs-ende-figur img.gespiegelt { transform: scaleX(-1); }

@media (max-height: 760px) and (min-width: 901px) {
  body.tb-spiel { --mm: 2px; padding-top: 4px; }
  .hs-tisch { margin-bottom: 30px; }
  .hs-tafel { min-height: 186px; }
  .hs-figur { height: 186px; }
  .hs-antwort { min-height: 60px; margin-bottom: 22px; }
}
@media (max-width: 1150px) and (min-width: 901px) {
  .hs-tisch { grid-template-columns: minmax(0, 1fr) 344px; }
}

/* Handy und Tablet hochkant: eine Spalte, Helfer unter der Tafel, Joker und „Weiter“ in einer festen Leiste unten */
@media (max-width: 900px) {
  .hs-start-kopf { grid-template-columns: 1fr auto; }
  .hs-start-kopf .tb-foto { display: none; }
  .hs-start-mitte { grid-template-columns: 1fr; gap: 24px; margin-bottom: 22px; }
  .hs-start-figur { width: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; gap: 10px; }
  .hs-start-figur .hs-blase { align-self: start; text-align: left; }
  .hs-start-figur img { height: 150px; }
  .hs-tisch { grid-template-columns: 1fr; gap: 34px; margin-bottom: 14px; }
  .hs-tafel { min-height: 150px; }
  .hs-helfer { grid-template-columns: minmax(0, 1fr) 84px; scroll-margin: 12px 0 100px; }
  .hs-helfer .hs-weiter { display: none; }
  .hs-blase { min-height: 86px; }
  .hs-figur { width: 84px; height: 136px; }
  .hs-antworten { grid-template-columns: 1fr; }
  .hs-tasten, .hs-joker-titel { display: none; }
  body.hs-im-spiel { padding-bottom: 96px; }
  .hs-fuss { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; min-height: 72px; justify-content: center;
    padding: 12px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--zettel);
    border-top: 2px solid var(--sk); box-shadow: 0 -5px 0 rgba(21, 72, 84, .1); }
  .hs-fuss.beantwortet { justify-content: space-between; flex-wrap: nowrap; padding-left: 18px; }
  .hs-fuss.beantwortet .hs-joker { display: none; }
  .hs-fuss.beantwortet .hs-kurzruf { display: block; }
  .hs-weiter-unten { display: inline-flex; margin: 0 .2em .3em 0; }
  .hs-joker { justify-content: center; }
  .hs-ende { grid-template-columns: 1fr 1fr; gap: 6px 22px; }
  .hs-medaille { grid-column: 1; grid-row: 1; justify-self: end; width: 124px; }
  .hs-ende-figur { grid-column: 2; grid-row: 1; justify-self: start; }
  .hs-ende-mitte { grid-column: 1 / -1; grid-row: 2; }
  .hs-ende-figur img { height: 170px; }
  .hs-ende .tb-siegel { width: 54px; height: 54px; top: -10px; right: -6px; }
}
@media (max-width: 760px) {
  .tb-spiel .ek-blatt { padding-left: 14px; padding-right: 14px; }
  body.hs-im-spiel .tb-leiste { display: none; }
  .hs-start-kopf { gap: 12px; margin-bottom: 14px; }
  .hs-start-kopf h1 { font-size: 31px; }
  .hs-start-kopf .tb-fachbegriff { font-size: 18px; }
  .hs-start-kopf .hs-zeile { font-size: 13px; margin-top: .5em; }
  .hs-nur-breit { display: none; }
  .hs-start-kopf .tb-siegel { width: 52px; height: 52px; align-self: start; }
  .hs-start-mitte { gap: 30px; margin-bottom: 12px; }
  .hs-regeln { padding: 12px 16px 12px; border-width: 10px; box-shadow: 5px 6px 0 #1B1B1B; }
  .hs-regeln .hs-regeln-titel { font-size: 16px; margin-bottom: 4px; }
  .hs-regeln ul { font-size: 18px; line-height: 1.32; }
  .hs-start-figur img { height: 112px; }
  .hs-start-figur .hs-blase { padding: 10px 14px; }
  .hs-kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin-bottom: 14px; }
  .hs-titel { font-size: 21px; }
  .hs-thema { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hs-kopfzeile .tb-siegel { grid-column: 2; grid-row: 1; width: 44px; height: 44px; }
  .hs-leiter { grid-column: 1; grid-row: 2; gap: 7px; }
  .hs-kreise { gap: 2px; }
  .hs-kreise i { width: 13px; height: 13px; border-width: 1.5px; }
  .hs-kreise i.jetzt { box-shadow: 0 0 0 2px rgba(84, 164, 166, .38); animation: none; }
  .hs-wert { font-size: 10px; }
  .hs-punkte { grid-column: 2; grid-row: 2; justify-self: end; }
  .hs-punkte-label { display: none; }
  .hs-punkte-zahl { font-size: 32px; min-width: 0; }
  .tb-tafel.hs-tafel { padding: 12px 16px 14px; border-width: 10px; box-shadow: 5px 6px 0 #1B1B1B; min-height: 132px; }
  .hs-tafel-kopf { font-size: 16px; }
  .hs-wert-kreide { font-size: 17px; padding: 2px 10px 0; }
  .hs-frage { font-size: 19.5px; line-height: 1.4; padding: 8px 0 4px; }
  .hs-tisch { gap: 32px; }
  .hs-helfer { grid-template-columns: minmax(0, 1fr) 66px; gap: 6px; }
  .hs-figur { width: 66px; height: 108px; }
  .hs-blase { min-height: 72px; padding: 10px 14px 9px; }
  .hs-antwort { min-height: 54px; padding: 7px 12px; gap: 12px; margin: 0 16px 20px 2px; font-size: .97em; }
  .hs-buchstabe { font-size: 27px; }
  .hs-zeichen { width: 26px; height: 26px; }
  .hs-joker .tb-tag { font-size: .86em; padding-left: .75em; padding-right: 1.45em; margin-right: .1em; }
  .hs-joker .tb-lang { display: none; }
  .hs-joker .tb-kurz { display: inline; }
  .hs-ende h1 { font-size: 36px; }
}
@media (max-width: 350px) {
  .hs-kreise i { width: 11px; height: 11px; }
  .hs-leiter { gap: 5px; }
  .hs-wert { display: none; }
}

/* ================================================================
   SPIEL 2: QUIZ-BATTLE (für den Beamer)
   ================================================================ */
.qb-seite { max-width: 1500px; }
.qb-brett { --karte-h: clamp(54px, calc((100vh - 466px) / 4 - 22px), 132px); }
.qb-oben { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr) auto; gap: 14px 22px; align-items: center; margin: 2px calc(6 * var(--mm)) 0; }
.qb-titel h1 { font-size: clamp(32px, 3.6vw, 50px); }
.qb-titel .tb-fachbegriff { margin: .25em 0 0; font-size: .8em; line-height: 1.3; }
.qb-teams { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 16px; padding: 12px 6px 8px 0; }
.qb-team { display: grid; justify-items: center; gap: 3px; padding: 14px 8px 9px; min-width: 0; transform: rotate(-1deg); transition: transform .15s ease; }
.qb-team:nth-child(even) { transform: rotate(1.1deg); }
.qb-team::before { background: var(--farbe); opacity: .45; width: 60px; left: calc(50% - 30px); top: -10px; height: 18px; }
.qb-team.vorn { box-shadow: 6px 6px 0 var(--teal-hell), 6px 6px 0 1.4px rgba(21, 72, 84, .45), 0 0 0 3px var(--gelb); }
.qb-name { width: 100%; min-width: 0; text-align: center; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 0 2px;
  font-family: var(--f-pinsel) !important; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.2; color: var(--farbe) !important; font-feature-settings: "calt" 0, "liga" 0; }
.qb-name:hover, .qb-name:focus { border-bottom-color: var(--farbe); outline: none; }
.qb-stand { font-size: clamp(34px, 3.4vw, 52px); --farbe: var(--teal); min-height: 1em; display: block; }
.qb-stand.plus { animation: hs-huepf .45s ease; }
.qb-knoepfe { display: flex; gap: 8px; margin-top: 2px; }
.qb-knoepfe button { min-width: 50px; height: 30px; padding: 0 8px; cursor: pointer; background: #fff; border: 1.6px solid var(--sk);
  border-radius: 3px 7px 4px 8px / 7px 4px 8px 3px; font-weight: 500; font-size: 14px; line-height: 1; box-shadow: 2px 2px 0 var(--sk); }
.qb-knoepfe button:hover { background: var(--teal-hell); }
.qb-knoepfe button:active { transform: translate(2px, 2px); box-shadow: none; }
.qb-oben .tb-siegel { width: 78px; height: 78px; }

.qb-brett-blatt { padding-bottom: calc(27 * var(--mm)) !important; }
.qb-sieger { display: flex; align-items: center; gap: 16px; margin: 0 26px 22px 2px; padding: 12px 22px 10px; }
.qb-sieger img { height: 92px; width: auto; margin: -22px 0 -10px; }
.qb-sieger h2 { font-size: clamp(25px, 2.6vw, 36px); }
.qb-sieger p { margin: 2px 0 0; }
.qb-brett { display: grid; grid-auto-flow: column; grid-template-columns: repeat(var(--kat, 5), minmax(0, 1fr)); grid-template-rows: auto repeat(4, auto); gap: 0 12px; }
.qb-kat { align-self: end; margin: 0 16px 14px 2px; padding: 0 2px 7px; border-bottom: 3px solid var(--farbe); color: var(--farbe) !important;
  font-size: clamp(20px, 2.05vw, 30px) !important; line-height: 1.12 !important; min-height: 2.3em; display: flex; align-items: flex-end; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.qb-brett.viele { gap: 0 8px; }
.qb-brett.viele .qb-kat { font-size: clamp(14px, 1.22vw, 19px) !important; margin-right: 8px; min-height: 3.4em; }
.qb-brett.viele .qb-karte { margin-right: 10px; }
.qb-karte { display: flex; align-items: center; justify-content: center; height: var(--karte-h, 76px); margin: 0 18px 22px 2px; padding: 0;
  background: none; border: 0; cursor: pointer; transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.qb-karte:hover { transform: translate(-1px, -3px); }
.qb-karte:active { transform: translate(2px, 3px); }
.qb-karte .tb-bignum { font-size: clamp(34px, calc(var(--karte-h, 76px) * .62), 74px); }
.qb-karte.gespielt .tb-bignum { color: #C9C4BA; text-shadow: none; text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--teal-dk); }
.qb-unten { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 0 calc(6 * var(--mm)); font-size: .9em; }
.qb-anzahl { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.qb-anzahl button { width: 36px; height: 36px; cursor: pointer; background: #fff; border: 1.6px solid var(--sk); border-radius: 50%; font-weight: 500; }
.qb-anzahl button[aria-pressed="true"] { background: var(--teal-dk); color: #fff; border-color: var(--teal-dk); }

/* Frage an der Tafel (Dialog) */
.qb-dialog { border: 0; padding: 0 12px 34px 0; background: transparent; width: min(1080px, 94vw); max-width: none; max-height: 96vh; overflow: visible; color: inherit; }
.qb-dialog::backdrop { background: rgba(244, 238, 227, .86); }
.qb-dialog.ersatz { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 100; box-shadow: 0 0 0 100vmax rgba(244, 238, 227, .86); }
.qb-tafel { padding: 22px 34px 24px; }
.qb-innen { max-height: calc(96vh - 130px); overflow: auto; padding: 2px 4px 2px 2px; }
.qb-d-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px 22px; flex-wrap: wrap; color: var(--kreide-leise); font-size: clamp(19px, 1.8vw, 25px); }
.qb-d-kat b { font-weight: 400; color: var(--kreide-gelb); margin-left: .4em; padding: 2px 14px 0; border: 2px solid var(--kreide-gelb); border-radius: 50% / 48%; display: inline-block; transform: rotate(-2deg); white-space: nowrap; }
.qb-uhr { display: flex; align-items: center; gap: 8px; }
.qb-zeit { font-size: 1.45em; color: var(--kreide); min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.qb-kk { cursor: pointer; background: transparent; color: var(--kreide) !important; border: 2px solid var(--kreide); border-radius: 5px 11px 6px 12px / 11px 6px 12px 5px;
  padding: 5px 16px 3px; font-family: var(--f-hand) !important; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.3; letter-spacing: .02em; }
.qb-kk:hover { background: rgba(255, 255, 255, .12); }
.qb-kk:active { transform: translate(1px, 2px); }
.qb-kk.gelb { color: var(--kreide-gelb) !important; border-color: var(--kreide-gelb); }
.qb-kk.klein { font-size: 16px; padding: 3px 11px 1px; }
.qb-kk:focus-visible { outline-color: var(--kreide-gelb); }
.qb-d-frage { margin: 26px 0 22px !important; font-size: clamp(25px, 3vw, 44px); line-height: 1.36; text-align: center; }
.qb-d-antwort { margin: 0 0 22px; padding: 16px 0 0; border-top: 2px dashed rgba(246, 245, 238, .5); color: var(--kreide-gelb); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.42; }
.qb-d-antwort span { display: block; color: var(--kreide-leise); font-size: .72em; margin: 0 0 2px; }
.qb-d-antwort p { margin: 0; }
.qb-d-fuss { display: grid; justify-items: start; gap: 14px; }
.qb-vergabe { display: flex; align-items: center; gap: 8px 9px; flex-wrap: wrap; }
.qb-vergabe > span { color: var(--kreide-leise); font-size: clamp(17px, 1.5vw, 21px); margin-right: 2px; }
.qb-kk { white-space: nowrap; }
.qb-vergabe .qb-kk { padding-left: 12px; padding-right: 13px; font-size: clamp(16px, 1.38vw, 20px); }
.qb-vergabe .qb-kk i { display: inline-block; width: .72em; height: .72em; border-radius: 50%; background: var(--farbe); margin-right: .45em; border: 1.5px solid var(--kreide); }
.qb-d-zurueck { margin: 16px 0 0; text-align: right; }

@media (max-width: 1100px) {
  .qb-oben { grid-template-columns: 1fr auto; }
  .qb-teams { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  .qb-teams { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 18px 12px; }
  .qb-team { padding: 12px 4px 8px; }
  .qb-knoepfe { gap: 5px; }
  .qb-knoepfe button { min-width: 40px; padding: 0 5px; font-size: 13px; }
  .qb-oben .tb-siegel { width: 56px; height: 56px; }
  .qb-brett { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: 0 4px; }
  .qb-kat { grid-column: 1 / -1; min-height: 0; margin-top: 6px; }
  .qb-karte { margin-right: 14px; --karte-h: 58px; }
  .qb-tafel { padding: 14px 16px 16px; border-width: 10px; }
  .qb-vergabe { margin-left: 0; }
  .qb-sieger img { display: none; }
}

/* ================================================================
   SPIELE-ÜBERSICHT NACH FACH UND KLASSE, KAPITELLEISTE
   ================================================================ */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: 0 0 14px; }
.lp-klasse { flex-direction: column; align-items: flex-start; gap: 0; padding-top: .45em; padding-bottom: .45em; margin-bottom: .6em; white-space: nowrap; }
.lp-klasse small { font-weight: 300; font-size: .74em; color: #444; }
.kl-leiste { display: flex; flex-wrap: wrap; gap: 0 6px; }
.kl-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 4px calc(6 * var(--mm)) 10px; font-size: .84em; }
.kl-nav .tb-tag { white-space: normal; margin-bottom: .3em; }
.st-mini { grid-template-columns: repeat(var(--kat, 5), 30px) !important; }
@media (max-width: 760px) {
  .kl-nav { margin-left: 12px; margin-right: 12px; font-size: .78em; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
  .kl-nav .tb-tag { white-space: nowrap; flex: none; }
  .st-mini { grid-template-columns: repeat(min(var(--kat, 5), 5), 22px) !important; max-width: 60vw; overflow: hidden; }
}