/* Bildung PRO · „Das Legespiel“
   Alles liegt auf Karten. Verdeckt = Königsblau mit Bogenmuster,
   aufgedeckt = Weiß, gefunden = Textmarker-Gelb. Farbe zeigt Zustand. */

@font-face {
  font-family: "League Spartan";
  src: url("../fonts/league-spartan-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --blau: #2B33C9;
  --blau-tief: #1F26A0;
  --blau-kante: #161B78;
  --blau-licht: #4A53E6;
  --blau-hauch: #E6E8FD;
  --gelb: #E8F53A;
  --gelb-kante: #B5C10F;
  --tinte: #0E0F2B;
  --tinte-70: #45475F;
  --tisch: #EEF0F6;
  --tisch-kante: #D4D8E6;
  --papier: #FFFFFF;
  --papier-kante: #C9CDE6;
  --linie: rgba(14, 15, 43, .14);
  --weiss-80: rgba(255, 255, 255, .84);

  --display: "League Spartan", "Futura", "Avenir Next", system-ui, sans-serif;
  --text: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --rand: clamp(16px, 4vw, 48px);
  --breite: 1320px;
  --radius: 14px;
  --kante: 6px;
  --schritt: clamp(72px, 10vw, 136px);
  --ease: cubic-bezier(.2, .75, .2, 1);
  --kopf: 84px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 16px); }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--text); font-size: 1.125rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
sub { font-size: .62em; line-height: 0; vertical-align: -.18em; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; margin: 0; letter-spacing: -.025em; line-height: 1; }
::selection { background: var(--gelb); color: var(--tinte); }

:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 6px; }
.auf-blau :focus-visible, .auf-tinte :focus-visible { outline-color: var(--gelb); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--gelb); color: var(--tinte); padding: 12px 18px; border-radius: 10px; font-family: var(--display); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.name { white-space: nowrap; -webkit-hyphens: manual; hyphens: manual; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rahmen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

@media (max-width: 560px) { h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }

/* ---------- Logo ---------- */
.bp-logo { height: 100%; width: auto; overflow: visible; }
.bp-t1 { fill: var(--blau); } .bp-l1 { fill: var(--papier); }
.bp-t2 { fill: var(--gelb); } .bp-l2 { fill: var(--blau); }
.bp-w { fill: var(--blau); }
.bp-t2, .bp-l2 { transition: fill .35s var(--ease); }
.logo-dunkel .bp-w { fill: var(--papier); }
.logo-dunkel .bp-l2 { fill: var(--tinte); }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__in { display: flex; align-items: center; gap: 24px; height: var(--kopf); }
.kopf__marke { display: block; height: 50px; flex: none; text-decoration: none; border-radius: 8px; }
.kopf__marke:hover .bp-t2 { fill: var(--blau); }
.kopf__marke:hover .bp-l2 { fill: var(--gelb); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.005em; text-decoration: none; padding: 11px 14px 9px; border-radius: 10px; color: var(--tinte); transition: background .2s, color .2s; }
.nav a:hover { background: var(--tisch); }
.nav a[aria-current="page"] { background: var(--blau-hauch); color: var(--blau); }
.nav a.knopf { margin-left: 10px; color: var(--k-fg); background: var(--k-bg); padding: 13px 18px 11px; }
.nav-schalter { display: none; margin-left: auto; width: 52px; height: 52px; border: 0; border-radius: 12px; background: var(--blau); color: var(--papier); cursor: pointer; box-shadow: 0 4px 0 var(--blau-kante); place-items: center; }
.nav-schalter:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--blau-kante); }
.nav-schalter .auf { display: none; }
.nav-schalter[aria-expanded="true"] .auf { display: block; }
.nav-schalter[aria-expanded="true"] .zu { display: none; }

@media (max-width: 1020px) {
  :root { --kopf: 72px; }
  .kopf { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--papier); }
  .kopf__marke { height: 42px; }
  .nav-schalter { display: grid; }
  .nav { position: fixed; inset: var(--kopf) 0 0 0; background: var(--papier); border-top: 1px solid var(--linie); flex-direction: column; align-items: stretch; gap: 0; padding: 20px var(--rand) 40px; margin: 0; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; overflow-y: auto; }
  .nav.ist-offen { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav a { color: var(--tinte); font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; padding: 16px 0 12px; border-radius: 0; border-bottom: 1px solid var(--linie); }
  .nav a:hover, .nav a[aria-current="page"] { background: none; color: var(--blau); }
  .nav a.knopf, .nav a.knopf[aria-current="page"] { --k-bg: var(--gelb); --k-fg: var(--tinte); --k-kante: var(--gelb-kante); margin: 32px 0 0; align-self: flex-start; font-size: 1.15rem; border-bottom: 0; padding: 18px 26px 16px; background: var(--k-bg); color: var(--k-fg); }
  body.nav-offen { overflow: hidden; }
}

/* ---------- Knöpfe: Karten mit Kante ---------- */
.knopf {
  --k-bg: var(--gelb); --k-fg: var(--tinte); --k-kante: var(--gelb-kante);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1;
  padding: 19px 24px 16px; border-radius: 12px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--k-bg); color: var(--k-fg);
  box-shadow: 0 var(--kante) 0 var(--k-kante);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .2s;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--kante) + 2px) 0 var(--k-kante); }
.knopf:active { transform: translateY(calc(var(--kante) - 1px)); box-shadow: 0 1px 0 var(--k-kante); }
.knopf svg { width: 20px; height: 20px; flex: none; margin-top: -3px; transition: transform .2s var(--ease); }
.knopf:hover svg { transform: translateX(3px); }
.knopf--runter:hover svg { transform: translateY(3px); }
.knopf--weiss { --k-bg: var(--papier); --k-fg: var(--blau); --k-kante: var(--papier-kante); }
.knopf--blau { --k-bg: var(--blau); --k-fg: var(--papier); --k-kante: var(--blau-kante); }
.knopf--klein { font-size: .98rem; padding: 14px 18px 11px; --kante: 4px; }
.auf-blau .knopf--weiss { --k-kante: #11166A; }

.textlink { font-family: var(--display); font-weight: 700; font-size: 1.05rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 3px solid var(--blau); padding-bottom: 2px; transition: gap .2s var(--ease); }
.textlink svg { width: 18px; height: 18px; margin-top: -2px; }
.textlink:hover { gap: 12px; }

.etikett { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: .92rem; letter-spacing: .01em; line-height: 1; padding: 10px 12px 7px; border-radius: 8px; background: var(--gelb); color: var(--tinte); }
.etikett--blau { background: var(--blau); color: var(--papier); }
.etikett--hauch { background: var(--blau-hauch); color: var(--blau); }

.haken { display: inline-block; width: .95em; height: .95em; vertical-align: -.12em; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--schritt); position: relative; }
.auf-blau { background: var(--blau); color: var(--papier); }
.auf-tinte { background: var(--tinte); color: var(--papier); }
.auf-tisch { background: var(--tisch); }
.auf-gelb { background: var(--gelb); color: var(--tinte); }
.auf-hell { background: var(--papier); }

.kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.kopfzeile h2 { font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: .95; letter-spacing: -.035em; text-wrap: balance; }
.kopfzeile p { font-size: 1.2rem; max-width: 34em; margin: 0; color: var(--tinte-70); }
.auf-blau .kopfzeile p { color: var(--weiss-80); }
.kopfzeile .etikett { margin-bottom: 22px; }
@media (max-width: 860px) { .kopfzeile { grid-template-columns: 1fr; gap: 18px; } }

.lead { font-size: clamp(1.18rem, 1.6vw, 1.36rem); line-height: 1.55; }

/* ---------- Bühne (Startseite) ---------- */
.buehne { background: var(--tisch); color: var(--tinte); padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 104px); overflow: hidden; position: relative; }
.buehne__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.buehne h1 { font-size: clamp(3.4rem, 8.4vw, 7.4rem); line-height: .86; letter-spacing: -.045em; margin: 28px 0 30px; }
.buehne h1 span { display: block; }
.buehne h1 em { font-style: normal; color: var(--blau); }
.buehne .lead { color: var(--tinte-70); max-width: 30em; margin-bottom: 36px; }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: 16px 14px; }
.buehne__direkt { margin: 36px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; font-size: 1rem; color: var(--tinte-70); }
.buehne__direkt a { font-family: var(--display); font-weight: 700; color: var(--tinte); text-decoration: none; border-bottom: 2px solid var(--blau); padding-bottom: 1px; transition: color .2s; }
.buehne__direkt a:hover { color: var(--blau); }
.buehne .spiel { justify-self: end; width: 100%; max-width: max(440px, calc((100svh - var(--kopf) - 210px) * 1.33)); }
@media (max-width: 1020px) {
  .buehne__in { grid-template-columns: 1fr; }
  .buehne h1 { font-size: clamp(3.4rem, 11vw, 7rem); }
  .buehne .spiel { justify-self: start; max-width: 660px; }
}

/* ---------- Legespiel ---------- */
.spiel { --spalten: 4; --luecke: clamp(8px, 1.1vw, 14px); }
.spiel__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.spiel__kopf strong { font-family: var(--display); font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; }
.spiel__kopf span { font-size: .98rem; color: var(--tinte-70); }
.spiel__feld { display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: var(--luecke); perspective: 1400px; }
.spiel__fuss { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; }
.spiel__stand { font-family: var(--display); font-weight: 700; font-size: 1.08rem; display: flex; align-items: center; gap: 12px; min-height: 44px; }
.spiel__punkte { display: flex; gap: 5px; flex: none; }
.spiel__punkte i { width: 14px; height: 14px; border-radius: 4px; background: rgba(14, 15, 43, .14); transition: background .3s, transform .3s var(--ease); }
.spiel__punkte i.an { background: var(--blau); transform: scale(1.12); }
.spiel__hinweis { font-size: .9rem; color: var(--tinte-70); margin: 14px 0 0; }
.spiel noscript p { margin: 0; padding: 20px; border-radius: var(--radius); background: var(--papier); }
@media (max-width: 560px) { .spiel { --spalten: 3; } .spiel.wortpaare { --spalten: 4; } }

.karte { position: relative; aspect-ratio: 1; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; border-radius: var(--radius); }
.karte__innen { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s var(--ease); }
.karte.ist-offen .karte__innen, .karte.ist-gefunden .karte__innen { transform: rotateY(180deg); }
.karte__seite { position: absolute; inset: 0; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.karte__ruecken { background: var(--blau); color: var(--blau-licht); box-shadow: 0 var(--kante) 0 var(--blau-kante); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.karte__ruecken svg { position: absolute; inset: 0; width: 100%; height: 100%; }
button.karte:not(.ist-offen):not(.ist-gefunden):hover .karte__ruecken, .karte.zwinkern .karte__ruecken { transform: translateY(-4px); box-shadow: 0 calc(var(--kante) + 4px) 0 var(--blau-kante); }
.karte__front { transform: rotateY(180deg); background: var(--papier); color: var(--tinte); box-shadow: 0 var(--kante) 0 var(--papier-kante); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(8px, 1vw, 14px); text-align: left; transition: background .35s, box-shadow .35s; }
.karte.ist-gefunden .karte__front { background: var(--gelb); box-shadow: 0 var(--kante) 0 var(--gelb-kante); }
.karte__fach { font-family: var(--display); font-weight: 700; font-size: clamp(.62rem, .82vw, .78rem); letter-spacing: .05em; text-transform: uppercase; color: var(--blau); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.karte.ist-gefunden .karte__fach { color: var(--tinte); }
.karte__wert { align-self: center; justify-self: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.05rem, 2vw, 1.9rem); letter-spacing: -.03em; line-height: 1; text-align: center; padding: 4px 2px 0; }
.karte__wert.lang { font-size: clamp(.95rem, 1.5vw, 1.42rem); }
.karte__wert svg { width: 62%; height: auto; margin: auto; }
.karte__haken { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: clamp(.62rem, .8vw, .74rem); font-family: var(--display); font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity .3s .2s, transform .3s .2s var(--ease); }
.karte.ist-gefunden .karte__haken { opacity: 1; transform: none; }
.karte.ist-gefunden { cursor: default; }
.karte.wackeln .karte__innen { animation: wackeln .38s var(--ease); }
@keyframes wackeln { 0%, 100% { transform: rotateY(180deg) translateX(0); } 30% { transform: rotateY(180deg) translateX(-5px); } 65% { transform: rotateY(180deg) translateX(4px); } }
.karte.ist-gefunden.frisch .karte__front { animation: plopp .5s var(--ease); }
@keyframes plopp { 0%, 100% { transform: rotateY(180deg) scale(1); } 40% { transform: rotateY(180deg) scale(1.06); } }
.spiel__feld.austeilen .karte { animation: austeilen .5s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes austeilen { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.spiel.ist-fertig .karte { animation: welle .6s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes welle { 0%, 100% { transform: none; } 45% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .karte__innen { transition: none; }
  .karte.wackeln .karte__innen, .karte.ist-gefunden.frisch .karte__front, .spiel__feld.austeilen .karte, .spiel.ist-fertig .karte { animation: none; }
}

/* ---------- Statische Karten ---------- */
.kachel { border-radius: var(--radius); background: var(--papier); color: var(--tinte); box-shadow: 0 var(--kante) 0 var(--papier-kante); position: relative; }
.kachel--blau { background: var(--blau); color: var(--papier); box-shadow: 0 var(--kante) 0 var(--blau-kante); }
.kachel--tief { background: var(--blau-tief); color: var(--papier); box-shadow: 0 var(--kante) 0 var(--blau-kante); }
.kachel--gelb { background: var(--gelb); color: var(--tinte); box-shadow: 0 var(--kante) 0 var(--gelb-kante); }
.kachel--tisch { background: var(--tisch); box-shadow: 0 var(--kante) 0 var(--tisch-kante); }
.kachel--muster svg { width: 100%; height: 100%; border-radius: inherit; }
.kachel--rand { box-shadow: inset 0 0 0 2px var(--papier-kante), 0 var(--kante) 0 var(--papier-kante); }
.weg.kachel--rand:hover { box-shadow: inset 0 0 0 2px var(--papier-kante), 0 calc(var(--kante) + 6px) 0 var(--papier-kante); }

/* ---------- Wege ---------- */
.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.weg { --k: var(--papier-kante); display: grid; grid-template-rows: auto 1fr auto; min-height: clamp(440px, 38vw, 520px); padding: clamp(22px, 2.4vw, 32px); text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.weg:hover { transform: translateY(-6px); box-shadow: 0 calc(var(--kante) + 6px) 0 var(--k); }
.weg.kachel--blau { --k: var(--blau-kante); } .weg.kachel--gelb { --k: var(--gelb-kante); }
.weg__etikett { display: flex; justify-content: space-between; gap: 12px; font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: .02em; padding-bottom: 12px; border-bottom: 2px solid currentColor; }
.weg__etikett span:last-child { text-align: right; opacity: .78; }
.weg__bild { display: grid; place-items: center; padding-block: 28px; }
.weg__bild svg { width: min(58%, 190px); height: auto; transition: transform .4s var(--ease); }
.weg:hover .weg__bild svg { transform: rotate(-4deg) scale(1.04); }
.weg h3 { font-size: clamp(2rem, 2.8vw, 2.6rem); letter-spacing: -.035em; margin-bottom: 12px; }
.weg p { margin-bottom: 22px; font-size: 1.08rem; }
.weg .mehr { font-family: var(--display); font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.weg .mehr svg { width: 20px; height: 20px; margin-top: -3px; transition: transform .2s var(--ease); }
.weg:hover .mehr svg { transform: translateX(4px); }
@media (max-width: 900px) { .wege { grid-template-columns: 1fr; } .weg { min-height: 0; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 22px; } .weg__etikett { grid-column: 1 / -1; } .weg__bild { padding-block: 22px 0; align-self: start; } .weg__bild svg { width: 84px; } .weg > div:last-child { padding-top: 22px; } }
@media (max-width: 460px) { .weg { grid-template-columns: 1fr; } .weg__bild { place-items: start; } .weg__bild svg { width: 72px; } }

/* ---------- Gepaukt / Gefestigt ---------- */
.vergleich { display: grid; gap: clamp(28px, 4vw, 44px); }
.reihe { display: grid; grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr); gap: clamp(16px, 3vw, 40px); align-items: center; }
.reihe__text h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.03em; margin-bottom: 8px; }
.reihe__text p { margin: 0; color: var(--tinte-70); font-size: 1.04rem; }
.reihe__karten { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, 1vw, 12px); perspective: 1200px; }
.reihe__karten .karte { cursor: default; --kante: 5px; }
.reihe__karten .karte__wert { font-size: clamp(.82rem, 1.3vw, 1.2rem); }
.reihe__karten .karte__ruecken, .zustaende .karte__ruecken { background: var(--blau); }
.vergleich__fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.vergleich__fuss p { margin: 0; font-size: .95rem; color: var(--tinte-70); }
@media (max-width: 760px) { .reihe { grid-template-columns: 1fr; } .reihe__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Prinzipien ---------- */
.prinzipien { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.prinzip { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 14px; min-height: 340px; }
.prinzip__nr { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.6rem; padding-top: 5px; background: var(--blau); color: var(--papier); }
.kachel--gelb .prinzip__nr, .kachel--blau .prinzip__nr { background: var(--papier); color: var(--blau); }
.prinzip h3 { font-size: clamp(1.5rem, 1.9vw, 1.85rem); letter-spacing: -.03em; line-height: 1.02; margin-top: auto; text-wrap: balance; }
.prinzip p { margin: 0; font-size: 1.02rem; }
@media (max-width: 1100px) { .prinzipien { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .prinzipien { grid-template-columns: 1fr; } .prinzip { min-height: 0; } .prinzip h3 { margin-top: 18px; } }

/* ---------- Text + Bild ---------- */
.zweier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.zweier h2 { font-size: clamp(2.3rem, 4.6vw, 4.2rem); letter-spacing: -.035em; line-height: .96; margin: 22px 0 26px; text-wrap: balance; }
.zweier--oben { align-items: start; }
@media (max-width: 900px) { .zweier { grid-template-columns: 1fr; } }

.stapel { position: relative; aspect-ratio: 5 / 4; max-width: 560px; width: 100%; justify-self: center; }
.stapel .kachel { position: absolute; width: 46%; aspect-ratio: 1; display: grid; place-items: center; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; text-align: center; padding: 12px; line-height: .95; transition: transform .5s var(--ease); }
.stapel:hover .kachel:nth-child(1) { transform: rotate(-10deg) translate(-6px, -4px) !important; }
.stapel:hover .kachel:nth-child(3) { transform: translate(6px, -4px) !important; }
/* Karte mit dem Logo von PRO Technologies: nie gedreht (Markenhandbuch PRO), Schutzzone 2 s = 174/1568 der Kartenbreite,
   Logo oben, damit die p-Karte unten links nicht in die Schutzzone ragt */
.stapel .kachel--pro { padding: 0; align-items: start; }
.stapel .kachel--pro img { width: 77.8%; height: auto; margin-top: 11.1%; }
.stapel .kachel svg { width: 64%; }

/* ---------- Schluss-Aufruf ---------- */
.aufruf { padding-block: var(--schritt); }
.aufruf__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.aufruf h2 { font-size: clamp(3rem, 7vw, 6.6rem); line-height: .88; letter-spacing: -.045em; margin-bottom: 26px; text-wrap: balance; }
.aufruf p { font-size: 1.25rem; max-width: 30em; margin-bottom: 34px; }
.aufruf__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aufruf__karten .kachel { aspect-ratio: 1; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.8rem); letter-spacing: -.03em; overflow: hidden; text-align: center; padding: 6px; }
@media (max-width: 900px) { .aufruf__in { grid-template-columns: 1fr; } .aufruf__karten { max-width: 420px; } }

/* ---------- Unterseiten ---------- */
.seitenkopf { background: var(--tisch); color: var(--tinte); padding-block: clamp(44px, 7vw, 104px) clamp(56px, 7vw, 104px); position: relative; overflow: hidden; }
.seitenkopf__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.seitenkopf h1 { font-size: clamp(3rem, 7vw, 6.8rem); line-height: .88; letter-spacing: -.045em; margin: 26px 0 28px; text-wrap: balance; }
.seitenkopf h1 em { font-style: normal; color: var(--blau); }
.seitenkopf .lead { color: var(--tinte-70); max-width: 32em; margin: 0; }
.seitenkopf__bild { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 420px; justify-self: end; width: 100%; }
.seitenkopf__bild .kachel { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.seitenkopf__bild .kachel > svg { width: 64%; height: auto; }
.seitenkopf__bild .kachel--muster > svg { width: 100%; height: 100%; }
.seitenkopf__bild .kachel span { font-family: var(--display); font-weight: 800; font-size: clamp(1.2rem, 2.2vw, 2rem); letter-spacing: -.03em; text-align: center; padding: 8px; line-height: 1.02; }
@media (max-width: 900px) { .seitenkopf__in { grid-template-columns: 1fr; } .seitenkopf__bild { justify-self: start; max-width: 300px; } }
@media (max-width: 560px) { .seitenkopf__bild { max-width: 220px; gap: 10px; } .seitenkopf__bild .kachel span { font-size: 1.05rem; } }
.seite-hell .seitenkopf h1 { margin-bottom: 0; }

.liste-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.liste-karten .kachel { padding: clamp(22px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 12px; min-height: 260px; }
.liste-karten h3 { font-size: clamp(1.45rem, 1.9vw, 1.8rem); letter-spacing: -.03em; line-height: 1.04; margin-top: auto; text-wrap: balance; }
.liste-karten p { margin: 0; font-size: 1.02rem; }
.liste-karten a.kachel { text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.liste-karten a.kachel:hover { transform: translateY(-5px); }
.marke-klein { font-family: var(--display); font-weight: 700; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; color: var(--blau); }
.kachel--blau .marke-klein { color: var(--gelb); }
@media (max-width: 960px) { .liste-karten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .liste-karten { grid-template-columns: 1fr; } .liste-karten .kachel { min-height: 0; } .liste-karten h3 { margin-top: 10px; } }

.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.schritt { padding: clamp(22px, 2.2vw, 30px); min-height: 300px; display: flex; flex-direction: column; }
.schritt__nr { font-family: var(--display); font-weight: 800; font-size: clamp(4.4rem, 7vw, 6.4rem); line-height: .8; letter-spacing: -.05em; color: var(--blau); margin-bottom: auto; }
.kachel--blau .schritt__nr { color: var(--gelb); }
.schritt h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); letter-spacing: -.03em; margin: 28px 0 10px; }
.schritt p { margin: 0; font-size: 1.02rem; }
@media (max-width: 860px) { .schritte { grid-template-columns: 1fr; } .schritt { min-height: 0; } }

.fliess { max-width: 46rem; }
.fliess h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); letter-spacing: -.03em; margin: 56px 0 18px; line-height: 1.02; }
.fliess h2:first-child { margin-top: 0; }
.fliess h3 { font-size: 1.4rem; letter-spacing: -.02em; margin: 34px 0 10px; }
.fliess ul { padding-left: 1.2em; margin: 0 0 1em; }
.fliess li { margin-bottom: .4em; }
.fliess a { color: var(--blau); }
.platzhalter { background: var(--gelb); padding: 1px 6px; border-radius: 4px; font-weight: 500; }
.hinweisbox { border-radius: var(--radius); background: var(--blau-hauch); padding: 22px 24px; margin: 0 0 40px; font-size: 1.02rem; }
.hinweisbox strong { font-family: var(--display); }

/* ---------- Kontakt ---------- */
.formular { display: grid; gap: 24px; }
.feld { display: grid; gap: 8px; }
.feld > label, .feld legend { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
.feld input:not([type="radio"]):not([type="checkbox"]), .feld textarea { font: inherit; font-size: 1.08rem; color: var(--tinte); background: var(--papier); border: 2px solid var(--papier-kante); border-radius: 12px; padding: 14px 16px; width: 100%; transition: border-color .2s, box-shadow .2s; }
.feld textarea { min-height: 180px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: 0; border-color: var(--blau); box-shadow: 0 0 0 4px var(--blau-hauch); }
.feld [aria-invalid="true"] { border-color: #C0262D !important; }
.feld__fehler { font-size: .95rem; color: #A3141B; font-weight: 500; margin: 0; }
.feld__fehler:empty { display: none; }
.feld fieldset { border: 0; padding: 0; margin: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.wahl span { display: block; font-family: var(--display); font-weight: 700; font-size: 1rem; padding: 14px 16px 11px; border-radius: 10px; background: var(--papier); border: 2px solid var(--papier-kante); box-shadow: 0 4px 0 var(--papier-kante); transition: background .18s, border-color .18s, box-shadow .18s, transform .18s var(--ease); }
.wahl label:hover span { transform: translateY(-2px); }
.wahl input:checked + span { background: var(--gelb); border-color: var(--gelb-kante); box-shadow: 0 4px 0 var(--gelb-kante); }
.wahl input:focus-visible + span { outline: 3px solid var(--blau); outline-offset: 3px; }
.feld > label.zustimmung { font-family: var(--text); font-weight: 400; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: 1.02rem; cursor: pointer; }
.zustimmung input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--blau); }
.zustimmung a { color: var(--blau); }
.formular__meldung { font-size: 1.02rem; margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--blau-hauch); }
.formular__meldung:empty { display: none; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.kontakt-raster aside .kachel { padding: 28px; }
.kontakt-raster aside h2 { font-size: 1.7rem; letter-spacing: -.03em; margin-bottom: 14px; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }

/* ---------- Fehlerseite ---------- */
.fehlerseite { min-height: 70svh; display: grid; align-items: center; }
.fehlerseite__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: 12px; margin-bottom: 40px; }

/* ---------- Fuß ---------- */
.fuss__band { height: 20px; background: var(--blau) url("../muster/bogen-licht.svg") 0 0 / 40px 40px; }
.fuss { background: var(--papier); color: var(--tinte-70); padding-block: 72px 32px; }
.fuss__oben { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.fuss__marke { height: 64px; display: inline-block; margin-bottom: 22px; border-radius: 8px; }
.fuss__oben p { font-size: 1rem; max-width: 26em; margin: 0; }
.fuss h2 { font-family: var(--display); font-size: .95rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blau); margin-bottom: 14px; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fuss a { text-decoration: none; color: var(--tinte); }
.fuss li a:hover { color: var(--blau); }
.fuss__unten { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: .92rem; color: var(--tinte-70); }
.plakette { display: inline-block; line-height: 0; border-radius: 999px; }
.plakette img { height: 32px; width: auto; }
.plakette--klein img { height: 28px; }
.plakette-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; font-size: 1rem; color: var(--tinte-70); }
@media (max-width: 860px) { .fuss__oben { grid-template-columns: 1fr 1fr; } .fuss__oben > div:first-child { grid-column: 1 / -1; } }

/* ---------- Markenhandbuch (intern) ---------- */
.markenbuehne { display: grid; place-items: center; padding: clamp(40px, 8vw, 120px) 24px; border-radius: 20px; background: var(--papier); box-shadow: 0 var(--kante) 0 var(--papier-kante); }
.markenbuehne svg { width: min(100%, 720px); height: auto; }
.varianten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.variante { margin: 0; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.variante__flaeche { display: grid; place-items: center; padding: 44px 28px; min-height: 230px; flex: 1; }
.variante__flaeche svg { height: clamp(84px, 8vw, 126px); width: auto; max-width: 100%; }
.variante__flaeche .nur-marke { height: 140px; }
.variante__info { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: var(--papier); color: var(--tinte); font-size: .95rem; border-top: 1px solid var(--linie); }
.variante__info strong { font-family: var(--display); }
.variante__info a { font-family: var(--display); font-weight: 700; color: var(--blau); text-decoration: none; white-space: nowrap; }
.variante__info a:hover { text-decoration: underline; }
@media (max-width: 900px) { .varianten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .varianten { grid-template-columns: 1fr; } }

.farben { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.farbe { border-radius: var(--radius); overflow: hidden; box-shadow: 0 var(--kante) 0 var(--papier-kante); background: var(--papier); }
.farbe__feld { aspect-ratio: 1 / 1.05; padding: 18px; display: flex; align-items: flex-end; font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; }
.farbe__werte { padding: 14px 18px 16px; font-size: .9rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.farbe__werte strong { font-family: var(--display); font-size: 1rem; display: block; }
@media (max-width: 960px) { .farben { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .farben { grid-template-columns: 1fr 1fr; } }

.schriften { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.schrift { padding: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 320px; }
.schrift__probe { font-size: clamp(3rem, 5vw, 4.6rem); line-height: .9; letter-spacing: -.04em; margin-top: auto; }
.schrift__probe svg { width: 100%; height: auto; max-width: 260px; }
.schrift small { font-size: .95rem; color: var(--tinte-70); }
@media (max-width: 900px) { .schriften { grid-template-columns: 1fr; } .schrift { min-height: 0; } }

.zustaende { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.zustand { display: grid; gap: 14px; align-content: start; }
.zustand .karte { pointer-events: none; max-width: 240px; width: 100%; }
.zustand h3 { font-size: 1.5rem; letter-spacing: -.03em; }
.zustand p { margin: 0; font-size: 1rem; }
@media (max-width: 760px) { .zustaende { grid-template-columns: 1fr; } .zustand .karte { max-width: 200px; } }
.zustaende--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 560px; }
.zustaende--klein .karte { max-width: none; }

.anwendungen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.anwendung { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--papier); display: grid; place-items: center; padding: 40px 24px 52px; position: relative; }
.anwendung figcaption { position: absolute; left: 18px; bottom: 14px; font-family: var(--display); font-weight: 700; font-size: .86rem; color: var(--tinte-70); }
.anwendung--icon { grid-column: span 3; } .anwendung--karte { grid-column: span 5; } .anwendung--post { grid-column: span 4; }
@media (max-width: 960px) { .anwendung--icon, .anwendung--karte, .anwendung--post { grid-column: span 12; } }
.appicon { width: 150px; aspect-ratio: 1; border-radius: 34px; overflow: hidden; box-shadow: 0 18px 40px rgba(14, 15, 43, .25); }
.visitenkarten { display: grid; gap: 14px; width: 100%; max-width: 360px; }
.visitenkarte { aspect-ratio: 85 / 55; border-radius: 8px; box-shadow: 0 10px 26px rgba(14, 15, 43, .16); padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; font-size: .76rem; line-height: 1.35; }
.visitenkarte strong { font-family: var(--display); font-size: .98rem; letter-spacing: -.01em; }
.post { width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--tisch); color: var(--tinte); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 26px rgba(14, 15, 43, .16); }
.post h3 { font-size: 2.1rem; line-height: .88; letter-spacing: -.045em; }
.post h3 em { font-style: normal; color: var(--blau); }
.post__karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.post__karten i { aspect-ratio: 1; border-radius: 6px; background: var(--blau); box-shadow: 0 3px 0 var(--blau-kante); }
.post__karten i.g { background: var(--gelb); box-shadow: 0 3px 0 var(--gelb-kante); }

.regeln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.regel { border-radius: var(--radius); background: var(--papier); box-shadow: 0 var(--kante) 0 var(--papier-kante); overflow: hidden; }
.regel__bild { display: grid; place-items: center; padding: 24px 20px; height: 200px; background: var(--papier); border-bottom: 1px solid var(--linie); }
.regel__bild svg { width: min(100%, 200px); max-height: 120px; height: auto; }
.regel__text { padding: 16px 18px 18px; font-size: .98rem; }
.regel__text strong { font-family: var(--display); display: flex; gap: 8px; align-items: center; font-size: 1.05rem; margin-bottom: 4px; }
.regel__text strong i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: var(--papier); flex: none; }
.regel__text strong i svg { width: 14px; height: 14px; }
.regel--ja strong i { background: #1E8A4C; }
.regel--nein strong i { background: #C0262D; }
@media (max-width: 960px) { .regeln { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .regeln { grid-template-columns: 1fr; } }

.maske { width: 78%; height: auto; overflow: visible; }
.verwandlung { display: grid; justify-items: center; gap: 22px; }
.verwandlung__svg { width: min(100%, 340px); height: auto; overflow: visible; }
.vw-kachel { transition: opacity .6s var(--ease); }
.vw-l { fill: var(--blau); transition: fill .6s var(--ease); }
.vw-unten { transition: transform .8s var(--ease); }
.vw-dreh { transform-box: view-box; transform-origin: 50px 100px; transition: transform 1s var(--ease); }
[data-stufe="v1"] .vw-kachel, [data-stufe="v2"] .vw-kachel, [data-stufe="v3"] .vw-kachel { opacity: 0; }
[data-stufe="v1"] .vw-l, [data-stufe="v2"] .vw-l, [data-stufe="v3"] .vw-l { fill: var(--blau); }
[data-stufe="v2"] .vw-unten, [data-stufe="v3"] .vw-unten { transform: translateY(-8px); }
[data-stufe="v3"] .vw-dreh { transform: rotate(90deg); }
.verwandlung__stufen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; counter-reset: st; }
.verwandlung__stufen li { counter-increment: st; font-family: var(--display); font-weight: 700; font-size: .9rem; line-height: 1.15; padding: 12px 10px 10px; border-radius: 10px; background: var(--papier); color: var(--tinte-70); transition: background .3s, color .3s; hyphens: auto; }
.verwandlung__stufen li::before { content: counter(st); display: block; font-size: 1.4rem; margin-bottom: 4px; }
[data-verwandlung]:not([data-stufe]) li:nth-child(1), [data-stufe=""] li:nth-child(1), [data-stufe="v1"] li:nth-child(2), [data-stufe="v2"] li:nth-child(3), [data-stufe="v3"] li:nth-child(4) { background: var(--gelb); color: var(--tinte); }
@media (max-width: 520px) { .verwandlung__stufen { grid-template-columns: 1fr 1fr; } }

/* ---------- Deutsch PRO ---------- */
.produktkopf { background: var(--tisch); padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 104px); overflow: hidden; }
.produktkopf__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
.produktkopf__logo { height: clamp(96px, 11vw, 150px); margin: 26px 0 30px; }
.dp-logo { height: 100%; width: auto; display: block; }
.produktkopf h1 { font-size: clamp(3rem, 6.4vw, 6.2rem); line-height: .88; letter-spacing: -.045em; margin-bottom: 26px; }
.produktkopf h1 em { font-style: normal; color: var(--blau); }
.produktkopf .lead { color: var(--tinte-70); max-width: 32em; margin-bottom: 34px; }
.eckdaten { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eckdaten li { font-family: var(--display); font-weight: 700; font-size: .95rem; padding: 10px 12px 7px; border-radius: 8px; background: var(--papier); box-shadow: 0 3px 0 var(--papier-kante); }
@media (max-width: 1020px) { .produktkopf__in { grid-template-columns: 1fr; } }
.weg__bild .dp-marke { width: auto !important; height: clamp(110px, 11vw, 150px); }
@media (max-width: 900px) { .weg__bild .dp-marke { height: 96px; } }

.runde { background: var(--papier); border-radius: 20px; padding: clamp(18px, 2.4vw, 30px); box-shadow: 0 var(--kante) 0 var(--papier-kante); max-width: 520px; width: 100%; justify-self: end; }
.runde__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.runde__kopf strong { font-family: var(--display); font-weight: 700; font-size: 1.12rem; }
.runde__kopf span { font-size: .95rem; color: var(--tinte-70); font-variant-numeric: tabular-nums; }
.runde__tisch { position: relative; display: grid; place-items: center; padding: 16px 0 34px; }
.runde__stapel { position: absolute; inset: 16px 0 34px; display: grid; place-items: center; }
.runde__stapel i { position: absolute; width: min(56%, 230px); aspect-ratio: 1; border-radius: var(--radius); background: var(--blau); box-shadow: 0 var(--kante) 0 var(--blau-kante); }
.runde__stapel i:nth-child(1) { transform: rotate(-8deg) translate(-16px, 8px); opacity: .5; }
.runde__stapel i:nth-child(2) { transform: rotate(6deg) translate(14px, 4px); opacity: .78; }
.runde__stapel i:nth-child(3) { transform: rotate(-2deg); }
.runde__karte { position: relative; z-index: 1; width: min(56%, 230px); aspect-ratio: 1; border-radius: var(--radius); background: var(--papier); box-shadow: inset 0 0 0 2px var(--papier-kante), 0 var(--kante) 0 var(--papier-kante); display: grid; grid-template-rows: auto 1fr auto; padding: 14px 16px; text-align: center; transition: background .3s, box-shadow .3s; }
.runde__fach { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--blau); text-align: left; }
.runde__wort { align-self: center; font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.5rem); letter-spacing: -.03em; line-height: 1.05; }
.runde__info { font-size: .92rem; font-family: var(--display); font-weight: 700; min-height: 1.4em; }
.runde__info button { font: inherit; color: var(--blau); background: none; border: 0; border-bottom: 2px solid var(--blau); padding: 0; cursor: pointer; }
.runde__karte.richtig { background: var(--gelb); box-shadow: 0 var(--kante) 0 var(--gelb-kante); }
.runde__karte.richtig .runde__fach { color: var(--tinte); }
.runde__karte.falsch { animation: rutteln .4s var(--ease); }
@keyframes rutteln { 30% { transform: translateX(-6px); } 65% { transform: translateX(5px); } }
.runde__karte.neu { animation: kommen .45s var(--ease); }
@keyframes kommen { from { transform: translateY(-14px) rotate(-3deg); opacity: 0; } }
.runde__knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.art { font-family: var(--display); font-weight: 800; font-size: 1.3rem; padding: 17px 0 13px; border: 0; border-radius: 12px; color: #fff; cursor: pointer; --kante: 5px; box-shadow: 0 var(--kante) 0 var(--k); transition: transform .15s var(--ease), box-shadow .15s var(--ease), opacity .2s; }
.art:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 calc(var(--kante) + 2px) 0 var(--k); }
.art:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--k); }
.art:disabled { opacity: .45; cursor: default; }
.art--der { background: #2762C4; --k: #1A4691; }
.art--die { background: #C4295D; --k: #8F1C43; }
.art--das { background: #17784C; --k: #0F5235; }
.a-der { color: #2762C4; } .a-die { color: #C4295D; } .a-das { color: #17784C; }
.runde__karte.richtig [class^="a-"] { color: var(--tinte); }
.runde__sitzt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; min-height: 32px; }
.runde__sitzt span { font-family: var(--display); font-weight: 700; font-size: .88rem; padding: 8px 10px 5px; border-radius: 7px; background: var(--gelb); box-shadow: 0 3px 0 var(--gelb-kante); animation: kommen .4s var(--ease); }
.runde__hinweis { font-size: .88rem; color: var(--tinte-70); margin: 14px 0 0; }
@media (max-width: 1020px) { .runde { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .runde__karte.falsch, .runde__karte.neu, .runde__sitzt span { animation: none; } }

.pfade { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-items: end; }
.pfade li { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.pfade li:nth-child(1) { min-height: 210px; } .pfade li:nth-child(2) { min-height: 250px; } .pfade li:nth-child(3) { min-height: 290px; } .pfade li:nth-child(4) { min-height: 330px; } .pfade li:nth-child(5) { min-height: 370px; }
.pfad__stufe { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.02em; margin-bottom: auto; }
.pfade h3 { font-size: 1.25rem; letter-spacing: -.02em; }
.pfade p { margin: 0; font-size: .98rem; }
@media (max-width: 900px) { .pfade { grid-template-columns: 1fr; } .pfade li { min-height: 0 !important; } .pfad__stufe { margin-bottom: 10px; } }

.zeitleiste { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 16px); align-items: end; }
.zeitleiste__stufe { display: grid; gap: 10px; justify-items: center; text-align: center; }
.zeitleiste__stufe .kachel { width: calc(46% + var(--anteil) * 54%); aspect-ratio: 1; display: grid; place-items: center; }
.zeitleiste__stufe .kachel b { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.9rem); padding-top: 4px; }
.zeitleiste__stufe small { font-family: var(--display); font-weight: 700; font-size: clamp(.76rem, 1vw, .95rem); color: var(--tinte-70); line-height: 1.2; }
@media (max-width: 700px) { .zeitleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; } }

.module { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.modul { padding: 22px; min-height: 210px; display: flex; flex-direction: column; gap: 10px; }
.modul h3 { font-size: 1.45rem; letter-spacing: -.025em; line-height: 1.05; }
.modul p { margin: auto 0 0; font-size: 1rem; }
@media (max-width: 1100px) { .module { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .module { grid-template-columns: 1fr; } .modul { min-height: 0; } }

.berufe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.berufe ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.berufe li { padding: 15px 16px 12px; font-family: var(--display); font-weight: 700; font-size: 1.05rem; --kante: 4px; }
@media (max-width: 860px) { .berufe { grid-template-columns: 1fr; } }

.sprachen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sprachen li { font-family: var(--display); font-weight: 700; font-size: 1rem; padding: 11px 13px 8px; border-radius: 9px; background: var(--tisch); box-shadow: 0 3px 0 var(--tisch-kante); }
.sprachen li.mit { background: var(--gelb); box-shadow: 0 3px 0 var(--gelb-kante); }
.sprachen__legende { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: .95rem; color: var(--tinte-70); }
.sprachen__legende i { width: 16px; height: 16px; border-radius: 4px; background: var(--gelb); box-shadow: 0 2px 0 var(--gelb-kante); }
.ehrlich { padding: clamp(24px, 3vw, 36px); }
.ehrlich h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -.03em; margin: 12px 0; line-height: 1.02; }
.ehrlich p { margin: 0; }

/* ---------- Einblendungen ---------- */
.zeigen { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.zeigen.ist-da { opacity: 1; transform: none; }
.no-js .zeigen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .zeigen { opacity: 1; transform: none; transition: none; }
  .vw-kachel, .vw-l, .vw-unten, .vw-dreh { transition: none; }
}

@media print {
  .kopf, .fuss__band, .nav-schalter, .spiel__fuss, .vergleich__fuss { display: none !important; }
  .buehne, .seitenkopf, .auf-blau, .auf-gelb { background: none !important; color: #000 !important; }
  .zeigen { opacity: 1 !important; transform: none !important; }
}
.variante--breit { grid-column: span 2; }
.variante__flaeche .zeile { height: clamp(56px, 7vw, 92px); width: auto; max-width: 100%; }
@media (max-width: 900px) { .variante--breit { grid-column: 1 / -1; } }