/* findMATCH Pitch. Drei Bildsprachen aus der App: Klartext, Karteikarte, Sternbild.
   Gelb #FFD60A ist in allen dreien der Akzent, Pink #ff4080 nur in der Wortmarke. */

:root {
  --gelb: #FFD60A;
  --pink: #ff4080;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --breite: 1160px;
}

/* ===== KLARTEXT: Leitsystem ===== */
[data-theme="klartext"] {
  color-scheme: light;
  --grund: #F3F3EF;
  --grund-2: #E6E6E0;
  --flaeche: #FFFFFF;
  --tinte: #0B0B0C;
  --leise: #4A4D52;
  --linie: #0B0B0C;
  --auf-gelb: #0B0B0C;
  --ton: #0B0B0C;
  --rand: 3px;
  --radius: 4px;
  --schatten: none;
  --schrift-titel: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --schrift: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --titel-gewicht: 800;
  --titel-laufweite: -0.035em;
}

/* ===== KARTEIKARTE: Schreibtisch ===== */
[data-theme="karteikarte"] {
  color-scheme: light;
  --grund: #EFE7D4;
  --grund-2: #E4D9BF;
  --flaeche: #FFFCF3;
  --tinte: #1E2A44;
  --leise: #4C5670;
  --linie: #1E2A44;
  --auf-gelb: #1E2A44;
  --ton: #B23524;
  --rot: #C43D2B;
  --blau: #8FA9D6;
  --rand: 1px;
  --radius: 2px;
  --schatten: 0 1px 0 rgb(30 42 68 / .08), 0 10px 24px -12px rgb(30 42 68 / .35);
  --schrift-titel: "Literata", Georgia, serif;
  --schrift: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --titel-gewicht: 600;
  --titel-laufweite: -0.02em;
}

/* ===== STERNBILD: Nachthimmel ===== */
[data-theme="sternbild"] {
  color-scheme: dark;
  --grund: #0A1030;
  --grund-2: #111A44;
  --flaeche: rgb(255 255 255 / .045);
  --tinte: #EEF0FF;
  --leise: #A9B1D9;
  --linie: rgb(238 240 255 / .22);
  --auf-gelb: #0A1030;
  --ton: #FFD60A;
  --rand: 1px;
  --radius: 18px;
  --schatten: 0 0 0 1px rgb(255 214 10 / .06), 0 18px 40px -18px rgb(0 0 0 / .8);
  --schrift-titel: "Lexend", system-ui, sans-serif;
  --schrift: "Lexend", system-ui, sans-serif;
  --mono: "Lexend", system-ui, sans-serif;
  --titel-gewicht: 600;
  --titel-laufweite: -0.03em;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--grund); }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinte);
  background: var(--grund);
  overflow-x: hidden;
  transition: background-color .5s var(--ease), color .4s var(--ease);
}

[data-theme="klartext"] body {
  background-image:
    linear-gradient(color-mix(in srgb, var(--tinte) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--tinte) 6%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
}

[data-theme="karteikarte"] body {
  background-image:
    radial-gradient(ellipse at 20% 0%, rgb(255 255 255 / .55), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgb(196 61 43 / .07), transparent 50%);
}

[data-theme="sternbild"] body {
  background-image:
    radial-gradient(ellipse at 50% -20%, #1D2A6B, transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgb(255 214 10 / .06), transparent 45%);
  background-attachment: fixed;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
em { font-style: normal; font-weight: 700; }
strong, b { font-weight: 700; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--tinte);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--gelb);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 40;
  padding: .6rem .9rem;
  background: var(--tinte);
  color: var(--grund);
  font-weight: 700;
}
.skip:focus { top: 1rem; }

#sternfeld { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.korn {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.6'/></svg>");
}
[data-theme="karteikarte"] .korn { opacity: .22; mix-blend-mode: multiply; }
[data-theme="sternbild"] .korn { opacity: .12; mix-blend-mode: overlay; }

.vorhang {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  background: var(--gelb);
  transform: translateX(-101%);
}
.vorhang.is-wisch { animation: wisch .72s var(--ease) forwards; }
@keyframes wisch {
  0% { transform: translateX(-101%); }
  40% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

/* ===== Kopf ===== */
.mast {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: .65rem 1.3rem;
  background: color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--rand) solid var(--linie);
}
[data-theme="sternbild"] .mast { border-bottom-color: rgb(238 240 255 / .12); }

.mast-marke {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  min-width: 0;
}
.mast-marke img { width: 38px; height: 38px; }

.wortmarke {
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.wortmarke b { font-weight: 800; color: var(--pink); }
.wm-text { white-space: nowrap; }
.wm-text b { font-weight: 800; color: var(--pink); }

.mast-kicker {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leise);
  white-space: nowrap;
}

.mast-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem 1rem;
}
.mast-nav a {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
}
.mast-nav a:hover { border-bottom-color: var(--gelb); }

.werkzeug, .knopf, .kopieren, .reiter, .theme-knopf {
  font: inherit;
  color: inherit;
  background: transparent;
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius);
  cursor: pointer;
  appearance: none;
}
[data-theme="karteikarte"] .werkzeug,
[data-theme="karteikarte"] .knopf,
[data-theme="karteikarte"] .kopieren,
[data-theme="karteikarte"] .reiter { border-width: 1.5px; }

.werkzeug {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5rem .8rem;
  min-height: 40px;
}
.werkzeug:hover { background: var(--gelb); color: var(--auf-gelb); border-color: var(--gelb); }
[data-theme="klartext"] .werkzeug:hover { border-color: var(--linie); }

/* ===== Theme-Wahl ===== */
.mast-werkzeug { display: flex; align-items: center; gap: .5rem; }
.einstellung { position: relative; }
.icon-werkzeug { display: grid; place-items: center; width: 40px; padding: 0; }
.icon-werkzeug[aria-expanded="true"] { background: var(--gelb); color: var(--auf-gelb); border-color: var(--gelb); }
[data-theme="klartext"] .icon-werkzeug[aria-expanded="true"] { border-color: var(--linie); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.theme-dock {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 22;
  display: grid;
  min-width: 10rem;
  background: var(--flaeche);
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
[data-theme="klartext"] .theme-dock { box-shadow: 6px 6px 0 var(--tinte); }
[data-theme="sternbild"] .theme-dock { background: rgb(17 26 68 / .92); backdrop-filter: blur(8px); }

.theme-knopf {
  display: grid;
  text-align: left;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tinte) 18%, transparent);
  padding: .55rem .8rem;
  min-height: 44px;
}
.theme-dock[hidden] { display: none; }
.theme-knopf:last-child { border-bottom: 0; }
.theme-name { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.theme-hinweis { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.theme-knopf.is-an { background: var(--gelb); color: var(--auf-gelb); }
.theme-knopf.is-an .theme-hinweis { color: var(--auf-gelb); }

/* ===== Folien ===== */
main {
  position: relative;
  z-index: 2;
  width: min(var(--breite), calc(100% - 2.5rem));
  margin: 0 auto;
  padding-bottom: 5rem;
}

.folie { padding: 5rem 0 2.5rem; scroll-margin-top: 4.5rem; }

.augenbraue {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leise);
}

.nr {
  display: inline-grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 .4rem;
  font-weight: 800;
  letter-spacing: .02em;
}
[data-theme="klartext"] .nr { background: var(--gelb); color: var(--auf-gelb); border: var(--rand) solid var(--tinte); }
[data-theme="karteikarte"] .nr { color: var(--ton); border: 2px solid var(--rot); border-radius: 50%; transform: rotate(-6deg); font-family: var(--schrift-titel); font-size: .95rem; }
[data-theme="sternbild"] .nr { color: var(--gelb); border: 1px solid rgb(255 214 10 / .5); border-radius: 999px; box-shadow: 0 0 18px rgb(255 214 10 / .25); }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: var(--titel-gewicht);
  letter-spacing: var(--titel-laufweite);
  line-height: 1.02;
  margin: 0 0 .8rem;
}
h1 { font-size: clamp(2.8rem, 6.6vw, 6.2rem); margin-bottom: 1.6rem; }
h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); max-width: 18ch; }
h3 { font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; }
.unter { margin-top: 2.5rem; }

.deck, .held-lead {
  max-width: 44rem;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0 0 1.6rem;
}
.fein {
  max-width: 50rem;
  margin: 1.2rem 0 0;
  font-size: .92rem;
  color: var(--leise);
}

/* Sternbild: die breite Lexend Zetta nur für kurze Etiketten */
[data-theme="sternbild"] .augenbraue,
[data-theme="sternbild"] .mast-kicker,
[data-theme="sternbild"] .theme-hinweis,
[data-theme="sternbild"] .paar-rolle { font-family: "Lexend Zetta", "Lexend", sans-serif; }

/* Markierung: Leitsystem-Band, Textmarker, Leuchten */
.markiert { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-theme="klartext"] .markiert { background: var(--gelb); color: var(--auf-gelb); padding: 0 .12em; }
[data-theme="karteikarte"] .markiert {
  font-style: italic;
  background: linear-gradient(100deg, transparent .2em, rgb(255 214 10 / .85) .3em, rgb(255 214 10 / .7) calc(100% - .3em), transparent calc(100% - .2em)) 0 85% / 100% 42% no-repeat;
}
[data-theme="sternbild"] .markiert { color: var(--gelb); text-shadow: 0 0 28px rgb(255 214 10 / .45); }

/* ===== Held ===== */
.held { padding-top: 4rem; }
.held-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 3rem;
  align-items: center;
}
.held-zeile { display: block; }
.held-zeile-2 { margin-top: .08em; }
.held-lead em { color: var(--ton); }
[data-theme="klartext"] .held-lead em { background: linear-gradient(transparent 62%, var(--gelb) 62%); }

.held-paar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.2rem;
  align-items: stretch;
}
.paar-karte { padding: 1.1rem 1.2rem; }
.paar-karte p { margin: 0; }
.paar-rolle { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.paar-zahl { font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 2.1rem; line-height: 1.1; margin: .1rem 0 .4rem !important; color: var(--ton); }
.paar-bruecke {
  align-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--leise);
}

/* Kacheln in allen Varianten */
.paar-karte, .kachel, .pitch, .loesungen li, .bausteine li, .zeitleiste li, .mischpult, .pakete li {
  background: var(--flaeche);
  border: var(--rand) solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
[data-theme="klartext"] .paar-karte,
[data-theme="klartext"] .kachel,
[data-theme="klartext"] .pitch,
[data-theme="klartext"] .mischpult { box-shadow: 8px 8px 0 var(--tinte); }
[data-theme="karteikarte"] .paar-karte,
[data-theme="karteikarte"] .kachel,
[data-theme="karteikarte"] .pitch,
[data-theme="karteikarte"] .loesungen li,
[data-theme="karteikarte"] .zeitleiste li {
  border-color: rgb(30 42 68 / .14);
  border-top: 3px solid var(--rot);
  background:
    repeating-linear-gradient(transparent 0 1.55em, rgb(143 169 214 / .45) 1.55em calc(1.55em + 1px)) 0 2.2em / 100% calc(100% - 2.2em) no-repeat,
    var(--flaeche);
}
[data-theme="karteikarte"] .raster .kachel:nth-child(odd) { transform: rotate(-.4deg); }
[data-theme="karteikarte"] .raster .kachel:nth-child(even) { transform: rotate(.5deg); }
[data-theme="sternbild"] .paar-karte,
[data-theme="sternbild"] .kachel,
[data-theme="sternbild"] .pitch,
[data-theme="sternbild"] .loesungen li,
[data-theme="sternbild"] .bausteine li,
[data-theme="sternbild"] .zeitleiste li,
[data-theme="sternbild"] .mischpult,
[data-theme="sternbild"] .pakete li { backdrop-filter: blur(6px); }

/* ===== Handy-Muster ===== */
.handy { margin: 0; justify-self: center; }
.handy-rahmen {
  width: 290px;
  padding: 14px;
  border-radius: 38px;
  background: #0B0B0C;
  box-shadow: 0 30px 60px -25px rgb(0 0 0 / .55), inset 0 0 0 2px #2A2B2F;
  display: grid;
  gap: 10px;
  font-family: var(--schrift);
}
.handy-kopf, .handy-karte, .handy-hinweis, .handy-knopf { margin: 0; }
.handy-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .7rem .8rem;
  border-radius: 22px 22px 0 0;
  background: var(--gelb);
  color: #0B0B0C;
  font-weight: 800;
  font-size: .78rem;
}
.handy-groesse { display: inline-flex; align-items: center; gap: .35rem; }
.personen { display: inline-flex; gap: 2px; }
.personen i { width: 6px; height: 11px; border-radius: 3px 3px 1px 1px; background: #0B0B0C; }
.handy-karte {
  margin-top: -10px !important;
  padding: 1rem .9rem .9rem;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  color: #0B0B0C;
  border: 3px solid #0B0B0C;
  border-top: 0;
}
.handy-text { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.handy-etikett { margin: auto 0 .3rem; font-size: .7rem; font-weight: 800; color: #575A5F; }
.handy-nummer {
  margin: 0;
  align-self: flex-start;
  padding: .2rem .7rem;
  border-radius: 6px;
  background: linear-gradient(#2A2B2F 50%, #16171A 50%);
  color: #FFFFFF;
  font-family: "Atkinson Hyperlegible Mono", monospace;
  font-size: 1.8rem;
  font-weight: 800;
}
.handy-hinweis { color: #FFFFFF; font-size: .82rem; font-weight: 700; line-height: 1.35; padding: .2rem .3rem; }
.handy-knopf {
  display: flex;
  justify-content: space-between;
  padding: .8rem .9rem;
  border-radius: 10px;
  background: #FFFFFF;
  color: #0B0B0C;
  font-weight: 800;
  font-size: .9rem;
}
[data-theme="karteikarte"] .handy-kopf { background: #FFFCF3; border-bottom: 3px solid var(--rot); }
[data-theme="karteikarte"] .handy-karte { background: repeating-linear-gradient(transparent 0 26px, rgb(143 169 214 / .5) 26px 27px), #FFFCF3; border: 0; font-family: "Literata", serif; }
[data-theme="karteikarte"] .handy-text { font-family: "Literata", serif; font-weight: 600; }
[data-theme="sternbild"] .handy-rahmen { background: #060A22; box-shadow: 0 30px 70px -25px rgb(255 214 10 / .25), inset 0 0 0 2px #1D2A6B; }
[data-theme="sternbild"] .handy-kopf { background: #111A44; color: #EEF0FF; border-radius: 22px 22px 0 0; }
[data-theme="sternbild"] .personen i { background: var(--gelb); }
[data-theme="sternbild"] .handy-karte { background: radial-gradient(120% 60% at 50% 0, #1D2A6B, transparent 70%), #0E1538; color: #EEF0FF; border: 1px solid #2A3570; border-top: 0; }
[data-theme="sternbild"] .handy-etikett { color: #A9B1D9; }
[data-theme="sternbild"] .handy-knopf { background: var(--gelb); }

/* ===== Mischpult ===== */
.mischpult {
  position: relative;
  height: 460px;
  padding: 0;
  overflow: hidden;
}
[data-theme="klartext"] .mischpult { background: #FFFFFF; }
[data-theme="karteikarte"] .mischpult { background: #E2D5B6; border: 0; box-shadow: inset 0 2px 12px rgb(30 42 68 / .18); }

.mp-feld { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.mp-karte {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--kb, 170px);
  min-height: var(--kh, 112px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .75rem;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform .9s var(--ease), box-shadow .3s;
  background: #FFFFFF;
  color: #0B0B0C;
  border: 3px solid #0B0B0C;
  border-radius: 4px;
  font-weight: 800;
  line-height: 1.2;
}
.mp-text { font-size: var(--kf, 1.05rem); hyphens: auto; overflow-wrap: anywhere; }
.mp-nr {
  align-self: flex-start;
  padding: .05rem .45rem;
  border-radius: 4px;
  background: #16171A;
  color: #FFFFFF;
  font-family: "Atkinson Hyperlegible Mono", monospace;
  font-size: .85rem;
}
[data-theme="karteikarte"] .mp-karte {
  border: 0;
  border-top: 3px solid var(--rot);
  border-radius: 2px;
  background: repeating-linear-gradient(transparent 0 1.45em, rgb(143 169 214 / .5) 1.45em calc(1.45em + 1px)) 0 .5em / 100% 100% no-repeat, #FFFCF3;
  color: #1E2A44;
  font-family: "Literata", serif;
  font-weight: 600;
  box-shadow: 0 8px 18px -10px rgb(30 42 68 / .6);
}
[data-theme="karteikarte"] .mp-nr { background: transparent; color: var(--ton); border: 1.5px solid var(--rot); font-family: "IBM Plex Mono", monospace; }
[data-theme="sternbild"] .mp-karte {
  border: 1px solid #2A3570;
  border-radius: 14px;
  background: radial-gradient(120% 70% at 50% 0, #1D2A6B, transparent 75%), #0E1538;
  color: #EEF0FF;
  font-weight: 500;
  box-shadow: 0 12px 28px -14px rgb(0 0 0 / .9);
}
[data-theme="sternbild"] .mp-nr { background: transparent; color: var(--gelb); border: 1px solid rgb(255 214 10 / .45); font-family: "Lexend", sans-serif; }
.mischpult.is-gefunden .mp-karte { box-shadow: 0 0 0 4px var(--gelb); }
[data-theme="karteikarte"] .mischpult.is-gefunden .mp-karte { box-shadow: 0 0 0 3px rgb(255 214 10 / .9), 0 8px 18px -10px rgb(30 42 68 / .6); }
[data-theme="sternbild"] .mischpult.is-gefunden .mp-karte { box-shadow: 0 0 0 1px var(--gelb), 0 0 26px rgb(255 214 10 / .35); }

.mp-zeichen { position: absolute; inset: 0; pointer-events: none; }
.mp-schild {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transform: translate(var(--x, 0), var(--y, 0)) scale(.6);
  opacity: 0;
  transition: opacity .35s .55s, transform .5s .55s var(--ease);
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mp-schild svg { width: 38px; height: 38px; padding: 5px; background: var(--gelb); fill: #0B0B0C; border: 3px solid #0B0B0C; }
.mp-schild b { color: var(--tinte); }
[data-theme="klartext"] .mp-schild b { color: #0B0B0C; }
[data-theme="karteikarte"] .mp-schild svg { background: transparent; fill: var(--rot); border: 2px solid var(--rot); border-radius: 50%; transform: rotate(-8deg); }
[data-theme="karteikarte"] .mp-schild b { color: #1E2A44; }
[data-theme="sternbild"] .mp-schild svg { background: transparent; fill: var(--gelb); border: 0; filter: drop-shadow(0 0 8px rgb(255 214 10 / .6)); }
.mischpult.is-gefunden .mp-schild { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(1); }

.mp-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 1.6rem; }
.knopf {
  min-height: 48px;
  padding: .7rem 1.2rem;
  font-weight: 800;
  font-size: 1rem;
}
.knopf-haupt { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }
.knopf-haupt:hover { background: var(--gelb); color: var(--auf-gelb); border-color: var(--linie); }
.knopf:not(.knopf-haupt):hover { background: var(--gelb); color: var(--auf-gelb); }
[data-theme="sternbild"] .knopf-haupt { background: var(--gelb); color: var(--auf-gelb); border-color: var(--gelb); border-radius: 999px; }
[data-theme="sternbild"] .knopf { border-radius: 999px; }
.mp-status { margin: 0; font-weight: 700; }

/* ===== Raster ===== */
.raster { display: grid; gap: 1.2rem; }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
.kachel { padding: 1.2rem 1.3rem 1.3rem; }
.kachel p { margin: .4rem 0 0; }
.kachel h3 { margin-bottom: .3rem; }

.reiz-zeichen {
  margin: 0 0 .6rem !important;
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
}
[data-theme="klartext"] .reiz-zeichen { background: var(--gelb); color: var(--auf-gelb); border: var(--rand) solid var(--tinte); }
[data-theme="karteikarte"] .reiz-zeichen { color: var(--ton); border: 2px solid var(--rot); border-radius: 50%; }
[data-theme="sternbild"] .reiz-zeichen { color: var(--gelb); border: 1px solid rgb(255 214 10 / .5); border-radius: 50%; text-shadow: 0 0 12px rgb(255 214 10 / .6); }

/* ===== Pitches ===== */
.pitch-leiste { display: flex; gap: 0; margin: 0 0 1.2rem; max-width: 44rem; }
.reiter {
  flex: 1;
  min-height: 48px;
  padding: .6rem .5rem;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
}
.reiter + .reiter { border-left-width: 0; }
.reiter.is-an { background: var(--tinte); color: var(--grund); }
[data-theme="sternbild"] .reiter.is-an { background: var(--gelb); color: var(--auf-gelb); }
.pitch { padding: 1.3rem 1.4rem; max-width: 52rem; }
.pitch header, .kopier-raster header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .4rem; }
.pitch header h3, .kopier-raster header h3 { margin: 0; }
.pitch p { font-size: 1.12rem; }
.kopieren {
  flex: none;
  min-height: 36px;
  padding: .3rem .65rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kopieren:hover, .kopieren.is-ok { background: var(--gelb); color: var(--auf-gelb); }

/* ===== Problem und Lösung ===== */
.loesungen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; counter-reset: l; }
.loesungen li { padding: 1.2rem 1.3rem 1.3rem; counter-increment: l; }
.problem { margin: 0; color: var(--leise); font-size: 1rem; position: relative; padding-left: 2.6rem; }
.problem::before {
  content: counter(l, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05rem;
  font-family: var(--mono);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ton);
}
.loesung {
  margin: .7rem 0 0;
  padding-left: 2.6rem;
  font-family: var(--schrift-titel);
  font-weight: var(--titel-gewicht);
  font-size: 1.22rem;
  line-height: 1.3;
  position: relative;
}
.loesung::before {
  content: "→";
  position: absolute;
  left: 0;
  top: -.05rem;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  font-family: var(--schrift);
  font-size: 1rem;
}
[data-theme="klartext"] .loesung::before { background: var(--gelb); color: var(--auf-gelb); border: 2px solid var(--tinte); }
[data-theme="karteikarte"] .loesung::before { color: var(--ton); }
[data-theme="sternbild"] .loesung::before { color: var(--gelb); }

/* ===== Bausteine ===== */
.bausteine { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; counter-reset: b; }
.bausteine li { padding: 1.1rem 1.25rem 1.2rem; counter-increment: b; }
.bausteine li::before {
  content: counter(b, decimal-leading-zero);
  display: block;
  margin-bottom: .35rem;
  font-family: var(--mono);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .12em;
  color: var(--ton);
}
.bausteine strong { display: block; font-family: var(--schrift-titel); font-weight: var(--titel-gewicht); font-size: 1.25rem; line-height: 1.2; margin-bottom: .3rem; }
[data-theme="klartext"] .bausteine li { border-left: 12px solid var(--gelb); }

/* ===== Zeitleiste ===== */
.zeitleiste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; position: relative; }
.zeitleiste li { padding: 1rem 1rem 1.2rem; position: relative; }
.zeitleiste p { margin: .35rem 0 0; font-size: .97rem; }
.zl-schritt {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: .6rem;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.3rem;
}
[data-theme="klartext"] .zl-schritt { background: var(--gelb); color: var(--auf-gelb); border: var(--rand) solid var(--tinte); }
[data-theme="karteikarte"] .zl-schritt { color: var(--ton); border: 2px solid var(--rot); border-radius: 50%; }
[data-theme="sternbild"] .zl-schritt { color: var(--auf-gelb); background: var(--gelb); border-radius: 50%; box-shadow: 0 0 22px rgb(255 214 10 / .5); }
.zeitleiste li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.3rem;
  right: -1rem;
  width: 1rem;
  height: 3px;
  background: var(--linie);
}

/* ===== Galerie ===== */
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; align-items: start; }
.schirm { margin: 0; }
.schirm img {
  width: 100%;
  border: var(--rand) solid var(--linie);
  border-radius: 22px;
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
[data-theme="klartext"] .schirm img { box-shadow: 8px 8px 0 var(--tinte); border-radius: 18px; }
.schirm-beamer { grid-column: 1 / -1; }
.schirm-beamer img { border-radius: 10px; }
.schirm figcaption { margin-top: .7rem; font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }

/* ===== Einsatz ===== */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.vergleich dl { margin: .4rem 0 0; }
.vergleich dl div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; padding: .5rem 0; border-top: 1px solid color-mix(in srgb, var(--tinte) 16%, transparent); }
.vergleich dt { font-family: var(--mono); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); padding-top: .15rem; }
.vergleich dd { margin: 0; }
.pakete { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pakete li { padding: 1rem 1.1rem; display: grid; gap: .25rem; }
.pakete b { font-family: var(--schrift-titel); font-size: 1.12rem; line-height: 1.2; }
.pakete span { color: var(--leise); font-size: .95rem; }
[data-theme="klartext"] .pakete li { border-top: 12px solid var(--gelb); }

.merkmale { max-width: 50rem; margin: 1.6rem 0 0; padding-left: 1.2rem; }
.merkmale li { margin: .5rem 0; }
.merkmale li::marker { color: var(--ton); }
[data-theme="klartext"] .merkmale li::marker { color: var(--tinte); }

/* ===== Texte ===== */
.kopier-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.kopier-raster p { margin: .45rem 0; }

address { display: grid; gap: .4rem; margin: 1.4rem 0; font-family: var(--mono); font-weight: 700; }
address a { justify-self: start; text-decoration-thickness: 2px; text-decoration-color: var(--gelb); }

/* ===== Fuß ===== */
.kolophon {
  position: relative;
  z-index: 2;
  width: min(var(--breite), calc(100% - 2.5rem));
  margin: 0 auto 6rem;
  padding-top: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem 2rem;
  border-top: 1px solid color-mix(in srgb, var(--tinte) 25%, transparent);
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--leise);
}
.kolophon p { margin: 0; }
.kolophon-marke { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }

/* ===== Pitch-Modus ===== */
.pitch-anzeige {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 22;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: .6rem;
  padding: .6rem max(1rem, calc((100% - var(--breite)) / 2));
  background: var(--tinte);
  color: var(--grund);
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 700;
}
.pitch-anzeige[hidden] { display: none; }
.pitch-stand { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.pitch-pos { margin-right: .6rem; }
.pitch-titel { font-weight: 500; }
.pitch-titel br { display: none; }
/* Übernommene Überschrift einzeilig und ohne deren Schmuck darstellen. */
.pitch-stand .pitch-titel * {
  display: inline;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  outline: 0;
  transform: none;
  text-shadow: none;
}
.pitch-stand .pitch-titel *::before,
.pitch-stand .pitch-titel *::after { content: none; }
.pitch-stand .pitch-titel .wm-text b { font-weight: 800; color: var(--pink); }
.pitch-knopf {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  padding: .5rem .9rem;
  min-height: 44px;
  cursor: pointer;
  appearance: none;
}
.pitch-knopf:hover, .pitch-knopf:focus-visible { background: var(--grund); color: var(--tinte); }
.pitch-weiter { background: var(--gelb); border-color: var(--gelb); color: var(--auf-gelb); }
.pitch-ende kbd { font: inherit; font-size: .7rem; opacity: .75; margin-left: .3rem; }
.pitch-anzeige :focus-visible { outline: 2px solid var(--gelb); outline-offset: 2px; }
body.is-pitch main { padding-bottom: 5rem; }
body.is-pitch .folie {
  min-height: calc(100vh - 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .18;
  transition: opacity .4s var(--ease);
}
body.is-pitch .folie.is-jetzt { opacity: 1; }
body.is-pitch .kolophon { display: none; }

/* ===== Schmal ===== */
@media (max-width: 1000px) {
  .mast { grid-template-columns: 1fr auto; }
  .mast-nav { grid-column: 1 / -1; order: 3; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .mast-nav a { white-space: nowrap; }
  .held-raster { grid-template-columns: 1fr; }
  .raster-3, .galerie { grid-template-columns: repeat(2, 1fr); }
  .zeitleiste { grid-template-columns: 1fr; }
  .zeitleiste li:not(:last-child)::after { display: none; }
  .pakete { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  body { font-size: 1rem; }
  main, .kolophon { width: calc(100% - 2rem); }
  .folie { padding-top: 3.5rem; }
  .mast { padding: .55rem 1rem; gap: .6rem; }
  .mast-kicker { display: none; }
  .raster-2, .raster-3, .loesungen, .bausteine, .vergleich, .kopier-raster, .galerie { grid-template-columns: 1fr; }
  .held-paar { grid-template-columns: 1fr; }
  .paar-bruecke { writing-mode: horizontal-tb; transform: none; }
  .vergleich dl div { grid-template-columns: 1fr; gap: .1rem; }
  .galerie .schirm-handy { max-width: 300px; }
  .pitch-anzeige { grid-template-columns: 1fr 1fr 1fr; padding: .5rem 1rem; }
  .pitch-stand { grid-column: 1 / -1; order: -1; }
  .pitch-knopf { padding: .45rem .5rem; }
  .pitch-ende kbd { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
}