@font-face {
  font-family: "Source Sans 3";
  src: url("schriften/SourceSans3VF-Upright.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("schriften/SourceSerif4Variable-Roman.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}
:root {
  color-scheme: light;
  --schrift: 1.15;
  --papier: #f7f2e9;
  --papier-2: #efe8dc;
  --papier-3: #e6ddce;
  --karte: #fcf9f3;
  --tisch: #e9e2d6;
  --tinte: #24332f;
  --tinte-2: #55605a;
  --tinte-3: #7b847c;
  --akzent: #466157;
  --akzent-hover: #3a5249;
  --akzent-tinte: #fbf7ee;
  --akzent-weich: #e3e7dd;
  --gold: #c7a45f;
  --linie: #ddd4c4;
  --linie-stark: #c7bdac;
  --pruefen: #8b6b1f;
  --enge: #9a4a32;
  --fokus: #466157;
  --bild-filter: none;
  --schatten-1: 0 1px 2px rgb(60 52 40 / 6%), 0 6px 18px rgb(60 52 40 / 7%);
  --schatten-2: 0 2px 4px rgb(60 52 40 / 7%), 0 18px 44px rgb(60 52 40 / 12%);
  --schatten-3: 0 10px 30px rgb(40 34 26 / 16%), 0 30px 80px rgb(40 34 26 / 16%);

  --sans: "Source Sans 3", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --r1: 10px;
  --r2: 14px;
  --r3: 20px;
  --r-blatt: 24px;
  --rand: clamp(16px, 4vw, 48px);
  --abschnitt: clamp(64px, 10vw, 128px);
  --weich: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="nacht"] {
  color-scheme: dark;
  --papier: #1a2431;
  --papier-2: #1e2a39;
  --papier-3: #283649;
  --karte: #223043;
  --tisch: #151e29;
  --tinte: #ede6d9;
  --tinte-2: #bcc2c6;
  --tinte-3: #97a0a9;
  --akzent: #9ec8cc;
  --akzent-hover: #b6d8db;
  --akzent-tinte: #132230;
  --akzent-weich: #28394c;
  --gold: #dcbd7b;
  --linie: #334255;
  --linie-stark: #46576c;
  --pruefen: #c6a343;
  --enge: #eba48c;
  --fokus: #e9d9ae;
  --bild-filter: brightness(.75) saturate(.8);
  --schatten-1: 0 1px 2px rgb(0 0 0 / 25%), 0 6px 18px rgb(0 0 0 / 22%);
  --schatten-2: 0 2px 4px rgb(0 0 0 / 30%), 0 18px 44px rgb(0 0 0 / 34%);
  --schatten-3: 0 10px 30px rgb(0 0 0 / 40%), 0 30px 80px rgb(0 0 0 / 40%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="tag"]) {
    color-scheme: dark;
    --papier: #1a2431;
    --papier-2: #1e2a39;
    --papier-3: #283649;
    --karte: #223043;
    --tisch: #151e29;
    --tinte: #ede6d9;
    --tinte-2: #bcc2c6;
    --tinte-3: #97a0a9;
    --akzent: #9ec8cc;
    --akzent-hover: #b6d8db;
    --akzent-tinte: #132230;
    --akzent-weich: #28394c;
    --gold: #dcbd7b;
    --linie: #334255;
    --linie-stark: #46576c;
    --pruefen: #c6a343;
    --enge: #eba48c;
    --fokus: #e9d9ae;
    --bild-filter: brightness(.75) saturate(.8);
    --schatten-1: 0 1px 2px rgb(0 0 0 / 25%), 0 6px 18px rgb(0 0 0 / 22%);
    --schatten-2: 0 2px 4px rgb(0 0 0 / 30%), 0 18px 44px rgb(0 0 0 / 34%);
    --schatten-3: 0 10px 30px rgb(0 0 0 / 40%), 0 30px 80px rgb(0 0 0 / 40%);
  }
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 calc(16px * var(--schrift))/1.55 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--akzent); text-underline-offset: .2em; }
::selection { background: color-mix(in srgb, var(--akzent) 24%, transparent); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; border-radius: var(--r1); }
.rahmen { width: min(1200px, 100% - 2 * var(--rand)); margin-inline: auto; }
.sprung {
  position: absolute; left: 16px; top: -64px; z-index: 30;
  padding: 12px 18px; background: var(--akzent); color: var(--akzent-tinte); border-radius: 999px;
}
.sprung:focus { top: 12px; }
.vorzeile { display: block; color: var(--tinte-2); font: 650 calc(13px * var(--schrift))/1.35 var(--sans); letter-spacing: .01em; }
.lesetext { font: 400 calc(18px * var(--schrift))/1.6 var(--serif); color: var(--tinte-2); max-width: 62ch; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 10px 22px;
  border: 1px solid transparent; border-radius: 999px;
  background: var(--akzent); color: var(--akzent-tinte);
  font: 650 calc(16px * var(--schrift))/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color 160ms var(--weich), border-color 160ms var(--weich), transform 160ms var(--weich);
}
.knopf:hover { background: var(--akzent-hover); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }
.knopf-ruhig { border-color: var(--linie-stark); background: transparent; color: var(--tinte); }
.knopf-ruhig:hover { border-color: color-mix(in srgb, var(--akzent) 55%, var(--linie)); background: var(--karte); }
.knopf-klein { min-height: 44px; padding: 8px 18px; font-size: calc(15px * var(--schrift)); }
.knopf-breit { width: 100%; }
.knopf[aria-busy="true"] { cursor: progress; opacity: .8; }
.zweig { flex: none; width: calc(26px * var(--schrift)); height: calc(32px * var(--schrift)); overflow: visible; color: var(--akzent); }
.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  width: min(1200px, 100% - 2 * var(--rand)); margin-inline: auto;
  display: flex; align-items: center; gap: 24px; min-height: 64px;
}
.marke { display: inline-flex; align-items: center; gap: 11px; color: var(--tinte); text-decoration: none; }
.wortmarke { font: 500 calc(19px * var(--schrift))/1 var(--serif); letter-spacing: .34em; margin-right: -.34em; }
.navigation { margin-left: auto; }
.navigation ul { display: flex; gap: 4px; }
.navigation a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  color: var(--tinte-2); text-decoration: none; font-weight: 600; border-radius: 999px;
}
.navigation a:hover { color: var(--tinte); background: var(--papier-2); }
.held { padding: clamp(16px, 3vw, 40px) var(--rand) clamp(48px, 7vw, 88px); background: var(--tisch); }
.held-blatt {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  width: min(1200px, 100%); min-height: min(640px, 86vh); margin-inline: auto;
  border-radius: var(--r-blatt); background: var(--karte); box-shadow: var(--schatten-3); overflow: hidden;
}
.held-bild { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; filter: var(--bild-filter); }
.held-text { display: grid; align-content: center; justify-items: start; gap: 20px; padding: clamp(24px, 5vw, 64px); }
.held-zweig { width: calc(40px * var(--schrift)); height: calc(50px * var(--schrift)); }
.held h1 { font: 500 clamp(calc(32px * var(--schrift)), calc(3.6vw * var(--schrift)), calc(48px * var(--schrift)))/1.15 var(--serif); letter-spacing: -.01em; }
.einleitung { max-width: 44ch; font: 400 calc(19px * var(--schrift))/1.55 var(--serif); color: var(--tinte); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.held-film { position: relative; overflow: hidden; background: #1c2737; container-type: inline-size; }
.held-film > .held-bild { position: absolute; inset: 0; }
.held-film:not(.film-an) :is(.film-buehne, .film-steuerung) { display: none; }
.film-buehne { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #1c2737; }
.film-szene { position: absolute; inset: 0; opacity: 0; }
.film-szene > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%; filter: var(--bild-filter);
  transform-origin: 50% 55%; will-change: transform;
}
.film-szene[data-szene="nacht"] > img { object-position: 42% 70%; }
.film-szene[data-szene="steg"] > img { object-position: 30% center; }
.film-papier { background: url("bilder/papier-korn.webp") center / 400px repeat, var(--karte); background-blend-mode: multiply; }
.film-waerme { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: radial-gradient(110% 80% at 78% 12%, rgb(255 212 146 / 46%), rgb(255 212 146 / 0%) 62%); mix-blend-mode: screen; }
.film-schleier { position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(180deg, rgb(14 20 30 / 0%) 44%, rgb(14 20 30 / 68%) 100%); }
.film-satz {
  position: absolute; z-index: 12; left: 7%; right: 7%; bottom: 7%; margin: 0; opacity: 0;
  color: #fbf7ee; font: 500 calc(clamp(15px, 4.3cqi, 25px) * var(--schrift))/1.3 var(--serif); letter-spacing: -.005em;
  text-wrap: balance; text-shadow: 0 1px 14px rgb(0 0 0 / 38%); will-change: opacity, transform;
}
.film-satz[data-satz="5"] { color: var(--tinte); text-shadow: none; }
.film-satz[data-satz="6"] { left: 20%; right: 20%; }
.film-kette { position: absolute; left: 6%; top: 13%; width: 88%; height: 56%; overflow: visible; }
.kette-linie, .kette-bogen { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.kette-linie { stroke: var(--akzent); stroke-width: 3; }
.kette-bogen { stroke: var(--pruefen); stroke-width: 2.5; }
.kette-knoten { fill: var(--akzent); stroke: var(--karte); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.kette-name { fill: var(--tinte-2); font: 600 15px var(--sans); opacity: 0; }
.hebel-ring { fill: none; stroke: var(--akzent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hebel-pille { opacity: 0; }
.hebel-pille rect { fill: var(--akzent); }
.hebel-pille text { fill: var(--akzent-tinte); font: 700 14px var(--sans); }
.film-marke { position: absolute; z-index: 11; left: 0; right: 0; top: 14%; display: grid; justify-items: center; gap: 8px; opacity: 0; color: #466157; }
.film-zweig { width: clamp(34px, 11cqi, 64px); height: auto; aspect-ratio: 64 / 78; overflow: visible; }
.film-zweig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.film-wortmarke { color: #24332f; opacity: 0; font: 500 calc(clamp(15px, 4.4cqi, 24px) * var(--schrift))/1 var(--serif); letter-spacing: .34em; margin-right: -.34em; }
.film-steuerung { position: absolute; z-index: 20; top: 12px; right: 12px; display: flex; gap: 8px; }
.film-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 30%); border-radius: 999px;
  background: rgb(18 26 36 / 46%); color: #fbf7ee; font: 600 calc(14px * var(--schrift))/1 var(--sans); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 160ms var(--weich);
}
.film-knopf:hover { background: rgb(18 26 36 / 64%); }
.film-knopf:focus-visible { outline: 2px solid #fbf7ee; outline-offset: 2px; }
.film-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.held-film:not(.pausiert) .zeichen-spielen, .held-film.pausiert .zeichen-pause { display: none; }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt h2 { font: 500 clamp(calc(28px * var(--schrift)), calc(3.2vw * var(--schrift)), calc(40px * var(--schrift)))/1.2 var(--serif); letter-spacing: -.01em; }
.abschnitt-kopf { display: grid; gap: 14px; max-width: 64ch; margin-bottom: clamp(40px, 6vw, 72px); }
.haltung-raster { display: grid; gap: 48px; align-items: start; }
.haltung h2 { max-width: 22ch; margin-bottom: 24px; }
.koennen { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.koennen li { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.koennen h3 { font: 550 calc(19px * var(--schrift))/1.3 var(--serif); }
.koennen p { color: var(--tinte-2); }
.modell { position: relative; padding-bottom: 0; }
.teil {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  padding-block: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--linie);
}
.teil-nummer { font: 400 calc(56px * var(--schrift))/1 var(--serif); color: var(--gold); }
.teil-inhalt { display: grid; gap: 16px; min-width: 0; }
.teil h3 { font: 500 clamp(calc(22px * var(--schrift)), calc(2.4vw * var(--schrift)), calc(28px * var(--schrift)))/1.25 var(--serif); }
.kette { position: relative; margin-top: 16px; padding: 112px 0 8px; }
.kette-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kette-linien path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.kette-spur, .kette-rueck-spur { stroke: var(--linie-stark); stroke-width: 2; stroke-dasharray: .004 .012; }
.kette-strich { stroke: var(--akzent); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: var(--zug, 0); }
.kette-rueck { stroke: var(--pruefen); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: var(--rueck, 0); }
.glieder { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.glied { display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; }
.punkt {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-tinte); border: 2px solid var(--akzent);
  font: 600 calc(18px * var(--schrift))/1 var(--sans); font-variant-numeric: tabular-nums;
  transition: background-color 240ms var(--weich), color 240ms var(--weich), border-color 240ms var(--weich), transform 240ms var(--weich);
}
.glied-text { display: grid; gap: 4px; }
.glied-text strong { font: 600 calc(17px * var(--schrift))/1.3 var(--serif); }
.glied-text span { font-size: calc(15px * var(--schrift)); color: var(--tinte-2); }
.kette-schluss {
  position: absolute; left: 0; right: 0; top: 0; text-align: center;
  font: 400 calc(19px * var(--schrift))/1.4 var(--serif); color: var(--tinte);
}
.kette-schluss::before { content: "↻"; margin-right: 8px; color: var(--pruefen); font-family: var(--sans); }
.schritte { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px; margin-top: 8px; }
.schritte li { position: relative; display: grid; align-content: start; gap: 6px; padding-top: 16px; border-top: 2px solid var(--akzent); }
.schritte li:not(:last-child)::after {
  content: "→"; position: absolute; top: 18px; right: -22px;
  font: 600 calc(16px * var(--schrift))/1 var(--sans); color: var(--akzent);
}
.schritt-nr { font: 600 calc(13px * var(--schrift))/1 var(--sans); color: var(--akzent); font-variant-numeric: tabular-nums; }
.schritte strong { font: 600 calc(17px * var(--schrift))/1.3 var(--serif); }
.schritte span:last-child { font-size: calc(15px * var(--schrift)); color: var(--tinte-2); }
.lagen {
  display: grid; gap: 16px; margin-top: clamp(16px, 3vw, 32px); padding: clamp(24px, 4vw, 40px);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r3); box-shadow: var(--schatten-1);
}
.lagen h3 { font: 500 clamp(calc(26px * var(--schrift)), calc(3vw * var(--schrift)), calc(34px * var(--schrift)))/1.25 var(--serif); }
.lagen-liste { display: grid; gap: 12px; margin-top: 8px; }
.lage { display: grid; align-content: start; gap: 8px; padding: 16px; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--r2); }
.lage-name { font: 700 calc(12px * var(--schrift))/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); }
.lage-fall { font: 400 calc(18px * var(--schrift))/1.5 var(--serif); color: var(--tinte); }
.lage-antwort { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--linie-stark); font: 600 calc(15px * var(--schrift))/1.45 var(--sans); color: var(--tinte-2); }
.lagen-schluss { font: 400 calc(18px * var(--schrift))/1.6 var(--serif); color: var(--tinte); max-width: 62ch; }
@media (min-width: 900px) {
  .lagen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.preis {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 32px); align-items: center;
  margin-block: clamp(16px, 3vw, 32px) clamp(40px, 6vw, 72px);
  padding: clamp(24px, 4vw, 48px);
  background: var(--akzent); color: var(--akzent-tinte); border-radius: var(--r3);
}
.preis-zweig { width: calc(clamp(44px, 6vw, 64px) * var(--schrift)); height: auto; aspect-ratio: 64 / 78; color: var(--akzent-tinte); }
.preis h3 { font: 500 clamp(calc(26px * var(--schrift)), calc(3vw * var(--schrift)), calc(38px * var(--schrift)))/1.2 var(--serif); letter-spacing: -.01em; }
.preis-satz { margin-top: 12px; font: 400 clamp(calc(19px * var(--schrift)), calc(2vw * var(--schrift)), calc(22px * var(--schrift)))/1.5 var(--serif); }
.preis-wege { margin-top: 12px; font: 600 calc(17px * var(--schrift))/1.5 var(--sans); }
.preis-schluss { margin-top: 8px; font: 400 calc(17px * var(--schrift))/1.55 var(--serif); }
.horizont {
  width: 100%; height: clamp(110px, 14vw, 180px);
  object-fit: cover; object-position: 50% 96%;
  filter: var(--bild-filter);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
}
.stepper { display: grid; gap: 20px; max-width: 880px; }
.stepper-leiste { display: flex; flex-wrap: wrap; gap: 8px; }
.stepper-leiste button {
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--linie-stark); border-radius: 999px;
  background: transparent; color: var(--tinte-2);
  font: 600 calc(15px * var(--schrift))/1 var(--sans); cursor: pointer;
  transition: background-color 160ms var(--weich), color 160ms var(--weich), border-color 160ms var(--weich);
}
.stepper-leiste button:hover { border-color: var(--akzent); color: var(--tinte); }
.stepper-leiste button.gesehen { border-color: var(--akzent); color: var(--akzent); }
.stepper-leiste button[aria-current="step"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); }
.stepper-buehne {
  min-height: 300px; padding: clamp(24px, 4vw, 40px);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r3); box-shadow: var(--schatten-1);
}
.karte-schritt { display: grid; gap: 16px; }
.tafel-titel { font: 700 calc(12px * var(--schrift))/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--akzent); }
.erzaehlung { font: 400 clamp(calc(19px * var(--schrift)), calc(2vw * var(--schrift)), calc(22px * var(--schrift)))/1.55 var(--serif); max-width: 52ch; }
.erzaehlung.leise { font-size: calc(17px * var(--schrift)); color: var(--tinte-2); }
.zitat { margin: 0; font: 400 clamp(calc(22px * var(--schrift)), calc(2.6vw * var(--schrift)), calc(28px * var(--schrift)))/1.45 var(--serif); max-width: 40ch; }
.schleife { font: 600 calc(15px * var(--schrift))/1.5 var(--sans); color: var(--tinte-2); }
.schleife::before { content: "↻"; margin-right: 8px; color: var(--pruefen); }
.stepper-steuerung { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stepper-stand { font-size: calc(15px * var(--schrift)); color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.kettenbild { margin: 0; padding: 14px 16px 12px; border: 1px solid var(--linie); border-radius: 16px; background: color-mix(in srgb, var(--papier-2) 60%, var(--karte)); }
.kb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 10px; color: var(--akzent); font: 700 calc(13px * var(--schrift))/1.3 var(--sans); letter-spacing: .02em; }
.kb-kopf svg { width: calc(16px * var(--schrift)); height: calc(16px * var(--schrift)); flex: none; }
.kb-kopf em { color: var(--tinte); font: 550 calc(16px * var(--schrift))/1.3 var(--serif); font-style: normal; }
.kb-glieder { display: grid; }
.kb-glied { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 5px 0; }
.kb-glied + .kb-glied::before { content: ""; position: absolute; top: -7px; left: 10px; width: 2px; height: 14px; background: var(--tinte-2); opacity: .45; }
.kb-punkt { display: block; width: 14px; height: 14px; margin: 6px auto 0; border-radius: 50%; background: var(--karte); box-shadow: 0 0 0 2px var(--tinte-2); }
.kb-glied[data-hebel] .kb-punkt { background: var(--akzent); box-shadow: 0 0 0 2px var(--akzent), 0 0 0 6px color-mix(in srgb, var(--akzent) 18%, transparent); }
.kb-worte { display: grid; gap: 1px; min-width: 0; }
.kb-text { font: 400 calc(17px * var(--schrift))/1.45 var(--serif); }
.kb-hebel { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--akzent); color: var(--akzent-tinte); font: 700 calc(12px * var(--schrift))/1.35 var(--sans); white-space: nowrap; vertical-align: 2px; }
.kb-rolle { color: var(--tinte-2); font: 600 calc(12px * var(--schrift))/1.3 var(--sans); }
.kb-weiche { display: grid; gap: 10px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--linie); }
.kb-weg { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte); }
.kb-weg[data-weg="neu"] { border-left: 3px solid var(--akzent); }
.kb-weg-titel { color: var(--tinte-2); font: 700 calc(12px * var(--schrift))/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.kb-weg[data-weg="neu"] .kb-weg-titel { color: var(--akzent); }
.kb-weg ol { display: grid; align-content: start; gap: 3px; padding-left: 20px; list-style: decimal; font: 400 calc(16px * var(--schrift))/1.45 var(--serif); }
.kb-weg p:not(.kb-weg-titel) { font: 400 calc(16px * var(--schrift))/1.5 var(--serif); }
.kb-hinweis { font: 600 calc(13px * var(--schrift))/1.4 var(--sans); color: var(--tinte-2); }
.hebelzeile { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; margin-top: 8px; max-width: 62ch; font: 400 calc(18px * var(--schrift))/1.6 var(--serif); color: var(--tinte); }
.hebelzeile .kb-hebel { margin-left: 0; }
@media (min-width: 720px) {
  .kb-weiche { grid-template-columns: 1fr 1fr; }
}
.aufnahmen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.aufnahmen figure { margin: 0; display: grid; gap: 16px; }
.handy {
  position: relative; overflow: hidden; aspect-ratio: 9 / 19;
  border: 1px solid var(--linie); border-radius: var(--r-blatt);
  background: var(--papier-2); box-shadow: var(--schatten-1);
}
.handy img { width: 100%; height: 100%; object-fit: cover; filter: var(--bild-filter); }
.handy-papier { background: var(--papier-3); }
.platzhalter {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 8px 10px; border-radius: var(--r1);
  background: var(--karte); color: var(--tinte-2);
  font: 600 calc(12px * var(--schrift))/1.3 var(--sans); letter-spacing: .02em; text-align: center;
  border: 1px dashed var(--linie-stark);
}
.aufnahmen figcaption { display: grid; gap: 4px; }
.aufnahmen figcaption strong { font: 600 calc(17px * var(--schrift))/1.3 var(--serif); }
.aufnahmen figcaption span { font-size: calc(15px * var(--schrift)); color: var(--tinte-2); }
.appfilm { display: grid; gap: clamp(20px, 3vw, 32px); }
.appfilm-buehne {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; container-type: inline-size;
  border-radius: var(--r-blatt); background: var(--tisch); box-shadow: var(--schatten-2);
}
.appfilm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--tisch); }
.appfilm[data-spielt] .appfilm-plakat, .appfilm[data-spielt] .appfilm-seite { display: none; }
.appfilm-plakat { position: absolute; inset: 0; }
.appfilm-papier { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: .5; filter: var(--bild-filter); }
.appfilm-plakat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--papier) 15%, transparent) 0%, color-mix(in srgb, var(--papier) 80%, transparent) 55%); }
.appfilm-handy {
  position: absolute; z-index: 1; left: 13%; top: 7%; bottom: 7%; aspect-ratio: 9 / 19.5;
  padding: 1.1cqi; border-radius: 4.4cqi; background: #1c2737; box-shadow: var(--schatten-3);
}
.appfilm-handy::before { content: ""; position: absolute; z-index: 2; top: 2.2cqi; left: 50%; width: 22%; height: 1.4cqi; border-radius: 999px; background: #1c2737; transform: translateX(-50%); }
.appfilm-schirm { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 3.4cqi; background: #f6f1e8; display: grid; place-content: center; justify-items: center; gap: 1.2cqi; }
.appfilm-schirm > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; filter: var(--bild-filter); }
.appfilm-schirm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(246 241 232 / 92%) 0%, rgb(246 241 232 / 40%) 55%, rgb(246 241 232 / 0%) 100%); }
.appfilm-zweig { position: relative; z-index: 1; width: 4.6cqi; height: auto; aspect-ratio: 64 / 78; color: #466157; margin-top: -40%; }
.appfilm-wortmarke { position: relative; z-index: 1; color: #24332f; font: 500 calc(1.9cqi * var(--schrift))/1 var(--serif); letter-spacing: .34em; margin-right: -.34em; }
.appfilm-seite { position: absolute; z-index: 1; left: 46%; right: 7%; top: 0; bottom: 0; display: grid; align-content: center; justify-items: start; gap: 18px; }
.appfilm-satz { font: 500 calc(clamp(20px, 3.4cqi, 40px) * var(--schrift))/1.2 var(--serif); letter-spacing: -.01em; color: var(--tinte); max-width: 18ch; text-wrap: balance; }
.appfilm-start svg { width: 18px; height: 18px; fill: currentColor; }
.appfilm-dauer { font-size: calc(14px * var(--schrift)); color: var(--tinte-2); }
.appfilm-hinweis { max-width: 34ch; padding: 10px 14px; border: 1px dashed var(--linie-stark); border-radius: var(--r2); background: var(--karte); color: var(--tinte-2); font-size: calc(14.5px * var(--schrift)); }
.appfilm-kapitel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.appfilm-kapitel button {
  all: unset; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  width: 100%; padding: 16px 4px 6px; border-top: 2px solid var(--linie-stark); cursor: pointer;
  transition: border-color 160ms var(--weich);
}
.appfilm-kapitel button:hover { border-top-color: var(--akzent); }
.appfilm-kapitel button[aria-current="true"] { border-top-color: var(--akzent); }
.appfilm-kapitel button:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 6px; }
.kapitel-nr {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--akzent); color: var(--akzent); font: 600 calc(14px * var(--schrift))/1 var(--sans);
}
.appfilm-kapitel button[aria-current="true"] .kapitel-nr { background: var(--akzent); color: var(--akzent-tinte); }
.kapitel-text { display: grid; gap: 4px; }
.kapitel-text strong { font: 600 calc(17px * var(--schrift))/1.3 var(--serif); color: var(--tinte); }
.kapitel-text span { font-size: calc(15px * var(--schrift)); color: var(--tinte-2); }
@media (max-width: 1039px) {
  .appfilm-kapitel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 719px) {
  .appfilm-buehne { aspect-ratio: 4 / 5; }
  .appfilm-plakat::after { background: linear-gradient(180deg, color-mix(in srgb, var(--papier) 85%, transparent) 0%, color-mix(in srgb, var(--papier) 30%, transparent) 60%); }
  .appfilm-handy { left: 50%; top: auto; bottom: -14%; height: 64%; transform: translateX(-50%); padding: 2cqi; border-radius: 8cqi; }
  .appfilm-handy::before { top: 4cqi; height: 2.4cqi; }
  .appfilm-schirm { border-radius: 6.2cqi; gap: 2cqi; }
  .appfilm-zweig { width: 9cqi; }
  .appfilm-wortmarke { font-size: calc(3.6cqi * var(--schrift)); }
  .appfilm-seite { left: 7%; right: 7%; top: 6%; bottom: auto; justify-items: center; text-align: center; gap: 12px; }
  .appfilm-satz { max-width: 20ch; }
  .appfilm-kapitel { grid-template-columns: 1fr; gap: 0; }
}
.schluss { border-top: 1px solid var(--linie); }
.schluss-innen { display: grid; gap: 16px; max-width: 720px; }
.schluss-zweig { width: calc(clamp(36px, 5vw, 48px) * var(--schrift)); height: auto; aspect-ratio: 64 / 78; margin-bottom: 4px; }
.stimme { color: var(--tinte); font-style: normal; font-weight: 600; }
.schluss-ruf { margin-top: 12px; font: 500 calc(22px * var(--schrift))/1.3 var(--serif); color: var(--akzent); }
.beta { border-top: 1px solid var(--linie); }
.beta-raster { display: grid; gap: 40px; align-items: start; }
.beta h2 { margin-block: 12px 16px; }
.warteliste {
  padding: clamp(24px, 4vw, 36px);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-blatt); box-shadow: var(--schatten-2);
}
.feld { display: grid; gap: 6px; }
.feld label { color: var(--tinte-2); font: 650 calc(14px * var(--schrift))/1.3 var(--sans); }
.feld input[type="email"] {
  min-height: 48px; padding: 10px 14px; width: 100%;
  border: 1px solid var(--linie-stark); border-radius: var(--r2);
  background: var(--karte); color: var(--tinte); font: 400 calc(17px * var(--schrift))/1.3 var(--sans);
}
.feld input[type="email"]::placeholder { color: var(--tinte-3); }
.feld input[type="email"]:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.feld input[aria-invalid="true"] { border-color: var(--enge); }
.feld-haken {
  grid-template-columns: 24px 1fr; align-items: start; column-gap: 12px;
  padding: 12px 14px; border: 1px solid var(--linie); border-radius: var(--r2); background: var(--papier);
}
.feld-haken input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--akzent); }
.feld-haken label { color: var(--tinte); font: 400 calc(15px * var(--schrift))/1.5 var(--sans); }
.feld-haken .fehler { grid-column: 1 / -1; }
.fehler { display: flex; gap: 8px; align-items: baseline; font: 600 calc(14.5px * var(--schrift))/1.4 var(--sans); color: var(--enge); }
.fehler::before {
  content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: calc(12px * var(--schrift)); transform: translateY(3px);
}
.fehler[hidden] { display: none; }
.erfolg { display: grid; gap: 12px; }
.erfolg h3 { font: 500 calc(24px * var(--schrift))/1.2 var(--serif); }
.erfolg p { color: var(--tinte-2); }
.erfolg .knopf { justify-self: start; }
.fuss { border-top: 1px solid var(--linie); padding-block: 40px; background: var(--papier-2); }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.marke-klein .zweig { width: calc(20px * var(--schrift)); height: calc(25px * var(--schrift)); }
.marke-klein .wortmarke { font-size: calc(16px * var(--schrift)); }
.fuss-satz { color: var(--tinte-2); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.fuss-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--tinte-2); }
html:not([data-text="lang"]) .nur-lang { display: none !important; }
html:not([data-text="lang"]) #kartenband-titel { font: 400 calc(18px * var(--schrift))/1.5 var(--serif); color: var(--tinte-2); letter-spacing: 0; }
@media (min-width: 1040px) {
  html:not([data-text="lang"]) .haltung-raster { grid-template-columns: 1fr; }
  html:not([data-text="lang"]) .haltung-raster > div { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: start; }
  html:not([data-text="lang"]) .haltung h2 { margin-bottom: 0; }
}
.bildrahmen {
  display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: clamp(16px, 3vw, 28px);
  border: 1.5px dashed var(--linie-stark); border-radius: var(--r3);
  background: color-mix(in srgb, var(--papier-2) 70%, var(--karte));
  color: var(--tinte-2); text-align: center;
}
.bildrahmen-zeichen { width: calc(28px * var(--schrift)); height: calc(28px * var(--schrift)); color: var(--akzent); }
.bildrahmen figcaption { display: grid; gap: 6px; justify-items: center; }
.bildrahmen-wer { font: 650 calc(13px * var(--schrift))/1.35 var(--sans); color: var(--akzent); }
.bildrahmen-was { max-width: 34ch; font: 400 calc(16px * var(--schrift))/1.5 var(--serif); color: var(--tinte-2); }
.teil-oben, .teil-text { display: grid; gap: 16px; min-width: 0; }
.teil-bild { margin: 0; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; }
.teil-bild img, .schluss-bild img, .beispiel-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r3); box-shadow: var(--schatten-1); filter: var(--bild-filter); }
.bild-baum { object-position: 30% 86%; }
.bild-vignette { object-position: 50% 52%; }
:root[data-theme="nacht"] .bild-vignette { filter: brightness(.9) saturate(.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="tag"]) .bild-vignette { filter: brightness(.9) saturate(.92); }
}
@media (min-width: 1040px) {
  html:not([data-bilder="aus"]) .teil-oben { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); column-gap: clamp(32px, 4vw, 56px); align-items: start; }
  .teil-bild { max-width: none; }
}
.kartenband { display: grid; gap: 16px; margin-top: clamp(48px, 7vw, 88px); }
.skillkarten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.skillkarte, .handy-karte {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: #f6f1e8; color: #24332f; box-shadow: var(--schatten-1);
}
.skillkarte { aspect-ratio: 5 / 7; transition: translate 240ms var(--weich), box-shadow 240ms var(--weich); }
.skillkarte-motiv { position: relative; display: block; flex: 1 1 0; min-height: 0; overflow: hidden; }
.skillkarte-motiv img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; }
.skillkarte-motiv::after { content: ""; position: absolute; inset: auto 0 0; height: 26%; background: linear-gradient(180deg, transparent, #f6f1e8); }
.skillkarte-titel { padding: 2px 16px 16px; font: 550 calc(17px * var(--schrift))/1.25 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
:root[data-theme="nacht"] .skillkarte, :root[data-theme="nacht"] .handy-karte { filter: brightness(.9) saturate(.92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="tag"]) .skillkarte, :root:not([data-theme="tag"]) .handy-karte { filter: brightness(.9) saturate(.92); }
}
@media (max-width: 1039px) {
  .skillkarten {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(170px, 30%, 240px);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 14px; scroll-padding-inline: var(--rand);
  }
  .skillkarte { scroll-snap-align: start; }
}
@media (max-width: 719px) {
  .skillkarten { grid-auto-columns: 62%; }
}
.handy { container-type: inline-size; }
.handy-karte { position: absolute; left: 11%; right: 11%; top: 12%; aspect-ratio: 5 / 7; box-shadow: var(--schatten-2); }
.handy-karte-worte { display: grid; gap: 2px; padding: 0 9cqw 8cqw; }
.handy-karte-art { font: 650 calc(4.6cqw * var(--schrift))/1.3 var(--sans); color: #55605a; }
.handy-karte-titel { font: 550 calc(6.6cqw * var(--schrift))/1.2 var(--serif); }
.beispiel-raster { display: grid; gap: clamp(20px, 3vw, 32px); }
.beispiel-bild { margin: 0; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; }
@media (min-width: 1100px) {
  html:not([data-bilder="aus"]) .beispiel-raster { grid-template-columns: minmax(0, 880px) minmax(220px, 1fr); column-gap: 40px; align-items: start; }
  .beispiel-raster > .stepper { grid-column: 1; grid-row: 1; }
  .beispiel-bild { grid-column: 2; grid-row: 1; max-width: none; }
}
.schluss-bild { margin: 12px 0 0; width: min(100%, 400px); aspect-ratio: 1 / 1; }
@media (min-width: 720px) {
  .teil { grid-template-columns: 96px 1fr; gap: 24px; }
  .beta-raster { grid-template-columns: 1fr minmax(320px, 460px); gap: 64px; }
}
@media (min-width: 1040px) {
  .haltung-raster { grid-template-columns: 1.1fr 1fr; gap: 80px; }
}
@media (max-width: 1039px) {
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .schritte li:nth-child(3)::after { content: none; }
}
@media (max-width: 860px) {
  .held-blatt { grid-template-columns: 1fr; min-height: 0; }
  .held-film { height: 34vh; min-height: 200px; }
  .held-film.film-an { height: clamp(260px, 44vh, 420px); }
}
@media (max-width: 719px) {
  .navigation { display: none; }
  .kopf .knopf-klein { margin-left: auto; }
  .held { padding-inline: 12px; }
  .held h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .einleitung { font-size: calc(18px * var(--schrift)); }
  .glieder { grid-template-columns: 1fr; gap: 28px; padding-left: 32px; }
  .glied { grid-template-columns: 52px 1fr; justify-items: start; align-items: center; text-align: left; gap: 16px; }
  .kette { padding: 8px 0 16px; }
  .kette-schluss { position: static; margin-top: 24px; padding-left: 32px; text-align: left; }
  .schritte { grid-template-columns: 1fr; gap: 36px; }
  .schritte li:not(:last-child)::after, .schritte li:nth-child(3)::after { content: "↓"; top: auto; bottom: -30px; right: auto; left: 0; }
  .preis { grid-template-columns: 1fr; }
  .aufnahmen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stepper-steuerung .knopf { min-width: 104px; }
}
html.bewegt .held-zweig .blatt, html.bewegt .preis-zweig .blatt { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.bewegt.bereit .held-zweig .blatt { animation: blatt-wachsen 700ms var(--weich) calc(250ms + var(--i, 0) * 180ms) forwards; }
html.bewegt .preis.sichtbar .preis-zweig .blatt { animation: blatt-wachsen 900ms var(--weich) calc(150ms + var(--i, 0) * 200ms) forwards; }
@keyframes blatt-wachsen { to { stroke-dashoffset: 0; } }
html.bewegt .punkt { background: var(--papier); color: var(--tinte-2); border-color: var(--linie-stark); }
html.bewegt .glied.erreicht .punkt { background: var(--akzent); color: var(--akzent-tinte); border-color: var(--akzent); transform: scale(1.04); }
html.bewegt .kette-schluss { opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--weich), transform 320ms var(--weich); }
html.bewegt .kette.geschlossen .kette-schluss { opacity: 1; transform: none; }
html.bewegt .karte-schritt.neu { animation: tafel-rein 220ms var(--weich); }
html.bewegt .skillkarte:hover { translate: 0 -4px; box-shadow: var(--schatten-2); }
@keyframes tafel-rein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
html.ruhig { scroll-behavior: auto; }
html.ruhig *, html.ruhig *::before, html.ruhig *::after { animation: none !important; transition: none !important; }
.recht { padding: clamp(32px, 6vw, 80px) 0 var(--abschnitt); }
.recht-blatt { width: min(760px, 100% - 2 * var(--rand)); margin-inline: auto; }
.recht h1 { margin-top: 10px; font: 500 clamp(calc(32px * var(--schrift)), calc(4vw * var(--schrift)), calc(46px * var(--schrift)))/1.15 var(--serif); letter-spacing: -.01em; }
.recht-einleitung { margin-top: 18px; font: 400 calc(19px * var(--schrift))/1.55 var(--serif); color: var(--tinte-2); }
.recht h2 {
  margin-top: clamp(40px, 6vw, 56px); padding-top: 24px; border-top: 1px solid var(--linie);
  font: 500 calc(24px * var(--schrift))/1.3 var(--serif); letter-spacing: -.005em;
  scroll-margin-top: 88px;
}
.recht h3 { margin-top: 26px; font: 700 calc(16.5px * var(--schrift))/1.4 var(--sans); color: var(--tinte); }
.recht h2 + p, .recht h2 + h3, .recht h3 + p { margin-top: 12px; }
.recht p + p, .recht p + ul, .recht ul + p, .recht address + p { margin-top: 12px; }
.recht p, .recht li { max-width: 68ch; }
.recht strong { font-weight: 650; }
.recht-punkte { display: grid; gap: 8px; margin-top: 12px; padding-left: 1.25em !important; list-style: disc !important; }
.recht-punkte li::marker { color: var(--gold); }
.recht-adresse { margin-top: 12px; font-style: normal; font: 400 calc(18px * var(--schrift))/1.6 var(--serif); }
.recht-kurz {
  margin-top: 32px; padding: clamp(18px, 3vw, 28px);
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r3); box-shadow: var(--schatten-1);
}
.recht-kurz h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.recht-kurz .recht-punkte { gap: 12px; }
.recht-zitat {
  margin: 14px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold);
  font: 400 calc(18px * var(--schrift))/1.55 var(--serif); color: var(--tinte); max-width: 62ch;
}
.recht-zitat + .recht-zitat { margin-top: 10px; }
.recht-inhalt { margin-top: 28px; }
.recht-inhalt ol { display: grid; gap: 2px 28px; margin-top: 10px; counter-reset: abschnitt; }
.recht-inhalt li { counter-increment: abschnitt; }
.recht-inhalt a { display: flex; gap: 10px; min-height: 40px; align-items: center; color: var(--tinte-2); text-decoration: none; }
.recht-inhalt a::before { content: counter(abschnitt); min-width: 1.6em; color: var(--gold); font-weight: 650; font-variant-numeric: tabular-nums; }
.recht-inhalt a:hover { color: var(--akzent); text-decoration: underline; }
@media (min-width: 720px) {
  .recht-inhalt ol { grid-template-columns: 1fr 1fr; }
}
.recht-tabelle { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: calc(15.5px * var(--schrift)); }
.recht-tabelle th { text-align: left; font: 700 calc(12px * var(--schrift))/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-2); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linie-stark); }
.recht-tabelle td { vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); }
.recht-tabelle td:first-child { font-weight: 600; }
@media (max-width: 639px) {
  .recht-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .recht-tabelle, .recht-tabelle tbody, .recht-tabelle tr, .recht-tabelle td { display: block; width: 100%; }
  .recht-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .recht-tabelle td { padding: 2px 0; border: 0; }
  .recht-tabelle td[data-titel]:not(:first-child)::before { content: attr(data-titel) ": "; color: var(--tinte-2); font-weight: 600; }
}
.recht-stand { margin-top: 40px; color: var(--tinte-2); font-size: calc(15px * var(--schrift)); }
.recht-hinweis { color: var(--tinte-2); font-size: calc(15.5px * var(--schrift)); }
.recht-entwurf {
  display: flex; gap: 12px; align-items: baseline; margin-bottom: 28px; padding: 12px 16px;
  border: 1.5px dashed var(--pruefen); border-radius: var(--r2);
  background: color-mix(in srgb, var(--gold) 12%, var(--karte)); color: var(--tinte); font-size: calc(15px * var(--schrift));
}
.recht-entwurf strong { color: var(--pruefen); white-space: nowrap; }
.luecke {
  display: inline; padding: 1px 7px; border: 1px dashed var(--pruefen); border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--tinte);
  font: 600 .84em/1.5 var(--sans); box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.zurueck { margin-left: auto; }
@media print {
  .kopf, .fuss, .recht-entwurf { display: none; }
  .recht { padding: 0; }
}
.anmelden { display: grid; gap: 16px; }
.anmelden-satz { font: 500 calc(22px * var(--schrift))/1.3 var(--serif); color: var(--tinte); }
.anmelden-hinweis { font-size: calc(14.5px * var(--schrift)); color: var(--tinte-2); }
.kopf .knopf-klein { white-space: nowrap; }
@media (max-width: 420px) {
  .kopf-innen { gap: 10px; }
  .kopf .knopf-klein { padding-inline: 14px; font-size: calc(14px * var(--schrift)); }
}
.sprachwahl { position: relative; }
.sprachwahl summary {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--linie-stark); border-radius: 999px; color: var(--tinte); cursor: pointer; list-style: none;
  font: 650 calc(14px * var(--schrift))/1 var(--sans); letter-spacing: .04em;
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover, .sprachwahl[open] summary { background: var(--papier-2); }
.sprachwahl summary:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.sprachwahl ul {
  position: absolute; z-index: 40; top: calc(100% + 8px); inset-inline-end: 0; min-width: 200px; margin: 0; padding: 6px;
  list-style: none; background: var(--papier); border: 1px solid var(--linie); border-radius: 14px; box-shadow: var(--schatten-2);
}
.sprachwahl a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--tinte); text-decoration: none; font-weight: 600;
}
.sprachwahl a:hover { background: var(--papier-2); }
.sprachwahl a[aria-current="true"] { color: var(--akzent); }
.sprachwahl a[dir="rtl"] { justify-content: flex-end; }
@media (max-width: 959px) {
  .kopf .navigation { display: none; }
  .kopf .sprachwahl { margin-inline-start: auto; }
  .kopf .sprachwahl + .knopf-klein { margin-left: 0; margin-right: 0; }
}
@media (max-width: 420px) {
  .kopf .knopf-klein { white-space: normal; text-align: center; line-height: 1.15; max-width: 44vw; }
}
:root:lang(ar) {
  --sans: "Source Sans 3", "Segoe UI", "Noto Sans Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif;
  --serif: "Source Serif 4", "Noto Naskh Arabic", "Segoe UI", "Geeza Pro", "Times New Roman", serif;
}
:lang(ar) *:not(.wortmarke):not(.film-wortmarke):not(.appfilm-wortmarke) { letter-spacing: 0 !important; }
[dir="rtl"] .navigation { margin-left: 0; margin-right: auto; }
[dir="rtl"] .wortmarke { margin-right: 0; margin-left: -.34em; }
[dir="rtl"] .kb-hebel { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .hebelzeile .kb-hebel { margin-right: 0; }
[dir="rtl"] .kb-weg[data-weg="neu"] { border-left: 0; border-right: 3px solid var(--akzent); }
[dir="rtl"] .kb-weg ol { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .kb-glied + .kb-glied::before { left: auto; right: 10px; }
[dir="rtl"] .schleife::before, [dir="rtl"] .kette-schluss::before { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .schritte li:not(:last-child)::after { right: auto; left: -22px; transform: scaleX(-1); }
[dir="rtl"] .fuss-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .zurueck { margin-left: 0; margin-right: auto; }
[dir="rtl"] .recht-punkte { padding-left: 0 !important; padding-right: 1.25em !important; }
[dir="rtl"] .recht-tabelle th { text-align: right; }
[dir="rtl"] .sprung { left: auto; right: 16px; }
@media (max-width: 719px) {
  [dir="rtl"] .schritte li:not(:last-child)::after { left: auto; right: 0; transform: none; }
  [dir="rtl"] .glieder { padding-left: 0; padding-right: 32px; }
  [dir="rtl"] .glied { text-align: right; }
  [dir="rtl"] .kette-schluss { padding-left: 0; padding-right: 32px; text-align: right; }
}
.beta .vorzeile { font: 650 calc(20px * var(--schrift))/1.2 var(--sans); letter-spacing: .02em; color: var(--akzent); margin-bottom: 6px; }
.appfilm-marke {
  justify-self: start; margin-bottom: calc(-1 * clamp(8px, 1.5vw, 18px)); padding: 5px 12px;
  border: 1px solid var(--linie-stark); border-radius: 999px; background: var(--karte);
  font: 650 calc(13px * var(--schrift))/1.2 var(--sans); letter-spacing: .02em; color: var(--tinte-2);
}
.anmelden-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; white-space: nowrap;
  color: var(--tinte); font: 600 calc(15px * var(--schrift))/1.2 var(--sans);
  text-decoration: underline; text-decoration-color: var(--linie-stark); text-underline-offset: 5px;
}
.anmelden-link:hover { text-decoration-color: currentColor; }
.kopf .anmelden-link + .knopf-klein { margin-inline: 0; }
@media (max-width: 599px) {
  .anmelden-link.nur-breit { display: none; }
}
@media (max-width: 400px) {
  .anmelden-link { white-space: normal; text-align: center; line-height: 1.1; max-width: 6.5em; font-size: calc(14px * var(--schrift)); }
}
.skillkarten { scrollbar-width: none; }
.skillkarten::-webkit-scrollbar { display: none; }
@media (max-width: 1039px) {
  .skillkarten { scroll-snap-type: none; }
}
.schluss-anmelden { margin-top: 28px; max-width: 460px; }
.held-marke { display: grid; justify-items: center; gap: 10px; }
.held-wortmarke { font-size: calc(18px * var(--schrift)); color: var(--tinte); }
main { isolation: isolate; }
.marke-zeichen { display: grid; justify-items: center; justify-self: start; gap: 10px; margin-bottom: 4px; }
.marke-zeichen .wortmarke { font-size: calc(18px * var(--schrift)); color: var(--tinte); }
.marke-zeichen .schluss-zweig { margin-bottom: 0; }
.satz { display: inline-block; text-wrap: balance; }
.teil-bild, .beispiel-bild, .schluss-bild {
  justify-self: center; margin-inline: auto; width: 100%; max-width: 480px; aspect-ratio: 1 / 1;
}
.teil-bild img, .schluss-bild img, .beispiel-bild img {
  border-radius: 0; box-shadow: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
.schluss-bild { margin-top: 20px; }
@media (min-width: 720px) {
  .teil-bild, .beispiel-bild { max-width: none; }
}
@media (max-width: 719px) {
  :lang(es) .held h1, :lang(pt-BR) .held h1, :lang(fr) .held h1 { font-size: clamp(26px, 7vw, 36px); }
}
@media (min-width: 720px) {
  .held-text { container-type: inline-size; }
  .held h1 { font-size: min(clamp(calc(32px * var(--schrift)), calc(3.6vw * var(--schrift)), calc(48px * var(--schrift))), 10.4cqi); }
}
.i0 { --i: 0; } .i1 { --i: 1; } .i2 { --i: 2; } .i3 { --i: 3; } .i4 { --i: 4; } .i5 { --i: 5; }