/* KREATIKA, Markenseite. Eine Datei, keine Build-Kette.
   Aufbau: Schriften, Werte, Grundlagen, Leiste, Auftakt, Kapitel, Bausteine, Kapitel im Einzelnen,
   Fuß, Rechtstexte, Schmal. */

/* ── Schriften (lokal, OFL) ─────────────────────────────────────────────── */
@font-face { font-family: "Anton"; src: url("../fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ── Werte ──────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;

  /* Die Marke */
  --petrol: #127c84;
  --petrol-hell: #15949d;
  --petrol-tief: #0d5d63;
  --petrol-soft: #e1eff0;
  --ink: #1a2427;
  --ink-soft: #4a5a5e;
  --linie: #d5dfdf;
  --hell: #f3f7f7;
  --dunkel: #0a1518;
  --akzent: #14a89e;
  --leuchtend: #5ee8d6;
  --verlauf: linear-gradient(135deg, var(--petrol-hell), var(--petrol) 50%, var(--petrol-tief));

  /* Rollen. light-dark() richtet sich nach dem color-scheme des jeweiligen Elements,
     darum genügt für eine fest helle oder dunkle Fläche eine Zeile (.auf-hell, .auf-dunkel). */
  --grund: light-dark(var(--hell), var(--dunkel));
  --flaeche: light-dark(#fff, color-mix(in oklab, var(--hell) 5%, var(--dunkel)));
  --text: light-dark(var(--ink), var(--hell));
  --text-leise: light-dark(var(--ink-soft), color-mix(in oklab, var(--linie) 72%, var(--dunkel)));
  --kante: light-dark(var(--linie), color-mix(in oklab, var(--hell) 14%, var(--dunkel)));
  --marke: light-dark(var(--petrol), var(--akzent));
  --marke-text: light-dark(var(--petrol), var(--leuchtend));
  --marke-flaeche: light-dark(var(--petrol-soft), color-mix(in oklab, var(--petrol) 22%, var(--dunkel)));

  --anton: "Anton", "Arial Narrow", Impact, sans-serif;
  --manrope: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Abstände im Achterschritt */
  --a1: 8px; --a2: 16px; --a3: 24px; --a4: 40px; --a5: 64px; --a6: 104px; --a7: 168px;
  --radius: 6px;
  --leiste: 264px;
  --rand: clamp(20px, 5vw, 72px);
  --ruhig: cubic-bezier(.2, .7, .2, 1);
}
:root[data-thema="hell"] { color-scheme: light; }
:root[data-thema="dunkel"] { color-scheme: dark; }
.auf-hell { color-scheme: light; }
.auf-dunkel { color-scheme: dark; }

/* ── Grundlagen ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--a4); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.6 var(--manrope);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--marke); text-decoration-thickness: 1.5px; text-underline-offset: .22em; }
a:hover { color: var(--marke-text); }
:focus-visible { outline: 2px solid var(--marke); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--petrol); color: #fff; }
code, .wert { font: 400 .82em/1.5 var(--mono); font-feature-settings: "zero" 1; letter-spacing: -.01em; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: var(--a2); top: var(--a2); z-index: 20; background: var(--flaeche); padding: var(--a1) var(--a2); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Leiste (Navigation) ────────────────────────────────────────────────── */
.leiste {
  position: fixed; inset: 0 auto 0 0; width: var(--leiste); z-index: 10;
  display: flex; flex-direction: column; gap: var(--a4);
  padding: var(--a4) var(--a3) var(--a3) var(--a4);
  border-right: 1px solid var(--kante);
  background: var(--grund);
}
.leiste-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.leiste-marke svg { height: 38px; width: auto; }
.leiste-marke b { font: 400 22px/1 var(--anton); letter-spacing: .02em; }
.leiste-marke:hover { color: inherit; }
.leiste-menue { flex: 1; min-height: 0; overflow-y: auto; }
.leiste-menue summary { display: none; }
.leiste-menue a {
  display: block; padding: 6px 0 6px 14px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 15px; font-weight: 500; color: var(--text-leise); text-decoration: none;
  transition: color .2s var(--ruhig), border-color .2s var(--ruhig);
}
.leiste-menue ol { border-left: 1px solid var(--kante); }
.leiste-menue a:hover { color: var(--text); }
.leiste-menue a[aria-current="true"] { color: var(--text); border-left-color: var(--marke); }
.leiste-fuss { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 13px; color: var(--text-leise); }
/* Knopf und Schalter: scharfe Ecken, unten rechts ein Anschnitt im Winkel von 60 Grad
   (--s breit, --s mal Wurzel 3 hoch). clip-path schneidet auch den Fokusrahmen ab,
   darum sitzt der Rahmen innen. */
.knopf, .schalter, .leiste-menue summary {
  --s: 6px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--s) * 1.732), calc(100% - var(--s)) 100%, 0 100%);
}
.knopf:focus-visible, .schalter:focus-visible, .leiste-menue summary:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.schalter {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 11px;
  border: 0; background: var(--marke-flaeche); color: var(--text);
  font: 600 13px/1 var(--manrope); cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ruhig);
}
button.schalter:hover { background: color-mix(in oklab, var(--marke) 26%, var(--grund)); }
.schalter svg { width: 16px; height: 16px; }

main, .fuss { margin-left: var(--leiste); }
.breite { max-width: 1160px; margin-inline: auto; padding-inline: var(--rand); }

/* ── Auftakt ────────────────────────────────────────────────────────────── */
.auftakt { position: relative; overflow: hidden; border-bottom: 1px solid var(--kante); }
.auftakt .breite {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end;
  min-height: min(100vh, 860px); padding-block: var(--a5) var(--a5);
}
.auftakt-text { position: relative; z-index: 1; padding-bottom: var(--a3); }
.auftakt-art { font-weight: 600; color: var(--marke-text); margin-bottom: var(--a2); }
.auftakt-wort {
  font: 400 clamp(84px, 13.2vw, 212px)/.84 var(--anton); letter-spacing: .012em;
  margin-left: -.035em; margin-bottom: var(--a4);
}
.auftakt-satz { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; max-width: 31em; text-wrap: pretty; }
.auftakt-wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin-top: var(--a4); }
.auftakt-koerper { align-self: stretch; min-height: 520px; margin: calc(var(--a4) * -1) calc(var(--rand) * -.6) calc(var(--a4) * -1) -18%; }

.knopf {
  --s: 9px;
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px 15px 20px;
  background: var(--petrol); color: #fff;
  font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none;
  transition: background .2s var(--ruhig);
}
a.knopf:hover { background: var(--petrol-tief); color: #fff; }
.knopf svg { width: 18px; height: 18px; }

/* Der Körper: Standbild als Rückfall, die Zeichenfläche legt sich darüber. */
.koerper { position: relative; }
.koerper img, .koerper canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Der geladene Körper blendet über das Standbild ein, danach verschwindet das Bild. */
.koerper canvas { animation: koerper-ein .8s var(--ruhig) both; }
.koerper-lebt img { visibility: hidden; transition: visibility 0s .8s; }
@keyframes koerper-ein { from { opacity: 0; } }

/* ── Kapitel ────────────────────────────────────────────────────────────── */
.kapitel { padding-block: var(--a7) 0; }
.kapitel:last-of-type { padding-bottom: var(--a7); }
.kapitel-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a3); align-items: end; margin-bottom: var(--a6); }
.kapitel-kopf h2 { grid-column: 1 / span 6; min-width: 0; font: 400 clamp(44px, 5.2vw, 84px)/.98 var(--anton); letter-spacing: .008em; text-wrap: balance; }
.vorspann { grid-column: 7 / -1; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; text-wrap: pretty; padding-bottom: .5em; }
.absatz { margin-top: var(--a6); }
.absatz-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a3); margin-bottom: var(--a4); padding-top: var(--a3); border-top: 1px solid var(--kante); }
.absatz-kopf h3 { grid-column: 1 / span 4; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.absatz-kopf p { grid-column: 7 / -1; color: var(--text-leise); text-wrap: pretty; }
.absatz-kopf p + p { margin-top: .7em; }

/* ── Bausteine ──────────────────────────────────────────────────────────── */
.buehne {
  position: relative; display: grid; place-items: center;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--kante); border-radius: var(--radius);
  padding: var(--a5) var(--a4);
}
.buehne.auf-dunkel {
  border-color: rgb(243 247 247 / .09);
  background: radial-gradient(110% 90% at 78% 0%, color-mix(in oklab, var(--petrol) 34%, var(--dunkel)) 0%, var(--dunkel) 62%);
  box-shadow: 0 40px 70px -46px rgb(10 21 24 / .7);
}
.buehne.auf-petrol { background: var(--petrol-soft); border-color: transparent; color-scheme: light; }
figure > figcaption, .unterzeile { margin-top: var(--a2); font-size: 14.5px; line-height: 1.5; color: var(--text-leise); text-wrap: pretty; }
figcaption b, .unterzeile b { color: var(--text); font-weight: 600; }
.paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3); }
.paar > figure { display: flex; flex-direction: column; }
.paar > figure > .buehne { flex: 1 0 auto; }
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a3); }
.zeichnung { width: 100%; height: auto; overflow: visible; }
.zeichnung text { font: 400 var(--ts, 4px) var(--mono); fill: var(--text-leise); }
.zeichnung .mass { stroke: var(--marke); stroke-width: 1px; vector-effect: non-scaling-stroke; fill: none; }
.zeichnung .hilf { stroke: var(--marke); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; fill: none; }
.zeichnung .hilf.oben { stroke: var(--ink); opacity: .7; }
.zeichnung .zone { fill: var(--marke-flaeche); }

.tafel { width: 100%; border-collapse: collapse; font-size: 15px; }
.tafel th, .tafel td { text-align: left; padding: 14px var(--a2) 14px 0; border-bottom: 1px solid var(--kante); vertical-align: baseline; }
.tafel th { font-weight: 600; font-size: 13.5px; color: var(--text-leise); }
.tafel td:first-child { white-space: nowrap; }
.tafel td.wert, .tafel th.zahl, .tafel td.zahl { white-space: nowrap; }
.tafel .zahl { text-align: right; padding-right: var(--a3); }
.tafel-rahmen { overflow-x: auto; }
.hinweis { margin-top: var(--a3); font-size: 14.5px; color: var(--text-leise); max-width: 62em; text-wrap: pretty; }

/* ── Markenkern ─────────────────────────────────────────────────────────── */
.kernsaetze li {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a3);
  padding-block: var(--a4); border-top: 1px solid var(--kante);
}
.kernsaetze li:last-child { border-bottom: 1px solid var(--kante); }
.kernsaetze b { grid-column: 1 / span 4; font-size: 15px; font-weight: 600; color: var(--marke-text); padding-top: .55em; }
.kernsaetze p { grid-column: 5 / -1; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.32; font-weight: 500; letter-spacing: -.015em; text-wrap: pretty; max-width: 27em; }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a5); }
.felder div { display: grid; grid-template-columns: 5fr 7fr; gap: var(--a2); align-items: baseline; padding-block: 18px; border-bottom: 1px solid var(--kante); }
.felder dt { font-weight: 700; }
.felder dd { color: var(--text-leise); font-size: 15.5px; }

/* ── Zeichen ────────────────────────────────────────────────────────────── */
.aufbau { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--a3); align-items: stretch; }
.aufbau .buehne { padding: var(--a5); }
.aufbau .zeichnung { max-width: 430px; }
.aufbau-liste { display: flex; flex-direction: column; justify-content: flex-end; }
.aufbau-liste li { padding-block: 18px; border-top: 1px solid var(--kante); }
.aufbau-liste li:last-child { border-bottom: 1px solid var(--kante); }
.aufbau-liste b { display: block; font-weight: 700; }
.aufbau-liste span { color: var(--text-leise); font-size: 15.5px; }
.groessen { display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 5vw, 64px); }
.groessen figure { display: grid; justify-items: center; gap: 12px; }
.groessen figcaption { margin: 0; font: 400 12.5px/1 var(--mono); }
.fassung .buehne { aspect-ratio: 4 / 5; padding: var(--a4); }
.fassung svg { height: 62%; width: auto; }

/* ── Wortmarke ──────────────────────────────────────────────────────────── */
.wortbild { padding: var(--a6) var(--a4); }
.wortbild img { width: min(100%, 720px); }
.kombi .buehne { min-height: 400px; padding: var(--a3); }

/* ── So nicht ───────────────────────────────────────────────────────────── */
.fehl .buehne { aspect-ratio: 1; padding: var(--a3); overflow: hidden; }
.fehl .buehne::after {  /* der Strich durch das Beispiel */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - .6px), var(--text-leise) calc(50% - .6px), var(--text-leise) calc(50% + .6px), transparent calc(50% + .6px));
  opacity: .55;
}
.fehl svg { position: absolute; inset: 16%; width: 68%; height: 68%; overflow: visible; }
.fehl .fremd { font: 700 30px/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; }

/* ── Farbe ──────────────────────────────────────────────────────────────── */
.petrolfeld {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a3); align-items: end;
  min-height: 420px; padding: var(--a4); border-radius: var(--radius);
  background: var(--petrol); color: #fff;
}
.petrolfeld h3 { grid-column: 1 / span 6; font: 400 clamp(64px, 9vw, 132px)/.9 var(--anton); letter-spacing: .01em; }
.petrolfeld dl { grid-column: 8 / -1; display: grid; grid-template-columns: auto 1fr; gap: 6px var(--a3); font: 400 15px/1.5 var(--mono); }
.petrolfeld dt { opacity: .72; }
.verlaufsband { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--a3); height: 132px; border-radius: var(--radius); background: var(--verlauf); color: #fff; }
.verlaufsband span { align-self: end; padding: var(--a2) var(--a3); font: 400 14px/1.4 var(--mono); }
.verlaufsband span:nth-child(2) { text-align: center; }
.verlaufsband span:nth-child(3) { text-align: right; }
.probe { display: inline-block; width: 22px; height: 22px; border-radius: 50%; vertical-align: -5px; margin-right: 12px; box-shadow: inset 0 0 0 1px rgb(127 127 127 / .28); }
.tafel .gut { color: var(--text); font-weight: 600; }
.tafel .knapp { color: var(--text-leise); }
.anteile { display: flex; height: 72px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--kante); }
.anteile i { display: block; }

/* ── Schrift ────────────────────────────────────────────────────────────── */
.schriftrolle { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a3); align-items: baseline; padding-block: var(--a5); border-top: 1px solid var(--kante); }
.schriftrolle:last-of-type { border-bottom: 1px solid var(--kante); }
.schriftrolle-name { grid-column: 1 / span 4; }
.schriftrolle-name b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.schriftrolle-name span { display: block; margin-top: 6px; color: var(--text-leise); font-size: 15.5px; max-width: 19em; }
.schriftrolle-probe { grid-column: 5 / -1; min-width: 0; }
.probe-anton { font: 400 clamp(64px, 10vw, 148px)/.92 var(--anton); letter-spacing: .008em; }
.probe-manrope { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.42; font-weight: 500; letter-spacing: -.012em; max-width: 26em; text-wrap: pretty; }
.probe-mono { font: 400 clamp(16px, 1.6vw, 21px)/1.75 var(--mono); color: var(--text); overflow-wrap: anywhere; }
.probe-mono em { font-style: normal; color: var(--marke-text); }
.zeichensatz { margin-top: var(--a3); font-size: 14px; color: var(--text-leise); letter-spacing: .04em; overflow-wrap: anywhere; }
.staffel td:first-child { width: 30%; }
.staffel .muster { color: var(--text); line-height: 1.1; padding-block: 18px; }

/* ── Sprache ────────────────────────────────────────────────────────────── */
.regeln li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a3); padding-block: var(--a4); border-top: 1px solid var(--kante); }
.regeln li:last-child { border-bottom: 1px solid var(--kante); }
.regeln h3 { grid-column: 1 / span 4; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.regeln h3 + p { grid-column: 1 / span 4; grid-row: 2; margin-top: 10px; color: var(--text-leise); font-size: 15.5px; max-width: 21em; }
.beispiel { grid-column: 5 / -1; grid-row: 1 / span 2; display: grid; gap: var(--a2); align-content: start; }
.beispiel p { font-size: 19px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.beispiel small { display: block; font-size: 13.5px; font-weight: 600; color: var(--marke-text); margin-bottom: 2px; }
.beispiel .nicht { color: var(--text-leise); font-weight: 400; }
.beispiel .nicht small { color: var(--text-leise); }
.beispiel .nicht span { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklab, var(--text-leise) 60%, transparent); }

/* ── Gestaltungselemente ────────────────────────────────────────────────── */
.musterflaeche { display: block; min-height: 520px; padding: 0; overflow: hidden; }
.musterflaeche > svg { position: absolute; left: 36%; top: -34%; height: 190%; width: auto; max-width: none; }
.glas {
  position: absolute; right: var(--a5); bottom: var(--a5); width: min(430px, calc(100% - 2 * var(--a3)));
  padding: var(--a3) var(--a3) 28px;
  background: rgb(243 247 247 / .09);
  -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
  border: 1px solid rgb(243 247 247 / .16); border-radius: var(--radius);
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / .55);
  color: var(--hell);
}
.glas b { display: block; font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.glas p { font-size: 15.5px; line-height: 1.5; opacity: .86; }
.glas code { display: block; margin-top: var(--a2); color: var(--leuchtend); font-size: 13px; }
.rasterbild { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--a3); height: 260px; padding: var(--a3); place-items: stretch; }
.rasterbild i { background: var(--marke-flaeche); border-radius: 2px; }
.schritte { display: flex; align-items: flex-end; justify-content: center; gap: var(--a3); height: 260px; padding: var(--a3); }
.schritte div { display: grid; justify-items: center; gap: 10px; font: 400 12.5px/1 var(--mono); color: var(--text-leise); }
.schritte i { display: block; width: 100%; min-width: 8px; background: var(--marke); border-radius: 2px; }
.karte { background: var(--flaeche); border: 1px solid var(--kante); border-radius: var(--radius); padding: var(--a3); }
.karte b { display: block; font-size: 19px; margin-bottom: 6px; }
.karte p { color: var(--text-leise); font-size: 15.5px; }
.knopfprobe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--a3); min-height: 220px; }
.elementliste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a5); }
.elementliste div { padding-block: 18px; border-bottom: 1px solid var(--kante); }
.elementliste dt { font-weight: 700; }
.elementliste dd { color: var(--text-leise); font-size: 15.5px; }

/* ── Bewegung und 3D ────────────────────────────────────────────────────── */
.raum { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); place-items: stretch; padding: 0; min-height: 640px; overflow: hidden; }
.raum-text { align-self: end; padding: var(--a5); }
.raum-text dl div { padding-block: 14px; border-top: 1px solid var(--kante); }
.raum-text dt { font-weight: 700; }
.raum-text dd { color: var(--text-leise); font-size: 15.5px; }
.raum .koerper { min-height: 520px; }

/* ── Anwendungen ────────────────────────────────────────────────────────── */
.anwendung { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--a5) var(--a3); align-items: start; }
.anwendung > figure { grid-column: span 6; }
.anwendung > .breit { grid-column: 1 / -1; }
.ablage { background: var(--marke-flaeche); border-radius: var(--radius); padding: clamp(24px, 5vw, 64px); display: grid; place-items: center; gap: var(--a3); }
.schatten { box-shadow: 0 1px 2px rgb(10 21 24 / .08), 0 22px 40px -22px rgb(10 21 24 / .38); }

.visitenkarten { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
.vk { aspect-ratio: 85 / 55; width: 100%; border-radius: 3px; position: relative; overflow: hidden; container-type: inline-size; }
.vk-vorn { background: #fff; color: var(--ink); padding: 8.2%; display: flex; flex-direction: column; justify-content: space-between; }
.vk-vorn img { height: 12.5cqw; width: auto; align-self: flex-start; }
.vk-vorn b { display: block; font-size: 4.3cqw; line-height: 1.2; font-weight: 700; margin-bottom: 1.4cqw; }
.vk-vorn span { display: block; font: 400 2.75cqw/1.6 var(--mono); color: var(--ink-soft); }
.vk-hinten { background: var(--dunkel); }
.vk-hinten svg { position: absolute; height: 205%; width: auto; max-width: none; right: -7%; top: -46%; }

.brief { aspect-ratio: 210 / 297; width: min(100%, 400px); background: #fff; color: var(--ink); position: relative; container-type: inline-size; border-radius: 2px; }
.brief img { position: absolute; left: 11.9cqw; top: 8cqw; height: 8.6cqw; width: auto; }
.brief-absender { position: absolute; left: 11.9cqw; top: 22.4cqw; font: 400 1.55cqw/1 var(--mono); color: var(--ink-soft); border-bottom: .5px solid var(--linie); padding-bottom: .8cqw; }
.brief-anschrift { position: absolute; left: 11.9cqw; top: 26cqw; font-size: 2.35cqw; line-height: 1.5; }
.brief-datum { position: absolute; right: 9.5cqw; top: 46cqw; font: 400 1.9cqw/1 var(--mono); color: var(--ink-soft); }
.brief-text { position: absolute; left: 11.9cqw; right: 9.5cqw; top: 51cqw; font-size: 2.35cqw; line-height: 1.6; }
.brief-text b { display: block; font-size: 2.9cqw; margin-bottom: 2.4cqw; }
.brief-text p + p { margin-top: 1.6cqw; }
.brief-fuss { position: absolute; left: 11.9cqw; right: 9.5cqw; bottom: 6.5cqw; padding-top: 2cqw; border-top: .5px solid var(--linie); display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; font: 400 1.55cqw/1.7 var(--mono); color: var(--ink-soft); }
.brief i { position: absolute; left: 0; width: 2.4cqw; border-top: .5px solid var(--ink-soft); }

.post { width: min(100%, 460px); background: #fff; color: var(--ink); border-radius: var(--radius); overflow: hidden; font-size: 14.5px; }
.post-kopf { padding: 14px 20px; border-bottom: 1px solid var(--linie); color: var(--ink-soft); font-size: 13px; }
.post-kopf b { color: var(--ink); font-weight: 600; }
.post-text { padding: 20px; }
.signatur { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie); line-height: 1.5; }
.signatur svg { height: 54px; width: auto; flex: none; }
.signatur b { display: block; font-weight: 700; }
.signatur span { display: block; font-size: 13px; color: var(--ink-soft); }

.symbole { display: flex; align-items: flex-end; justify-content: center; gap: clamp(20px, 4vw, 48px); }
.symbole figure { display: grid; justify-items: center; gap: 12px; }
.symbole figcaption { margin: 0; font: 400 12.5px/1 var(--mono); }
.appsymbol { background: #fff; border-radius: 22.5%; display: grid; place-items: center; }
.appsymbol svg { height: 62%; width: auto; }
.reiter { display: flex; align-items: center; gap: 9px; padding: 9px 44px 9px 12px; background: #fff; color: var(--ink); border-radius: 8px 8px 0 0; font-size: 13px; }
.reiter svg { height: 16px; width: auto; }

.vorschau { width: 100%; }
.vorschau img { width: 100%; height: auto; border-radius: var(--radius); }

/* ── Downloads ──────────────────────────────────────────────────────────── */
.dateien li { border-top: 1px solid var(--kante); }
.dateien li:last-child { border-bottom: 1px solid var(--kante); }
.dateien a {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--a3); align-items: baseline;
  padding-block: 26px; text-decoration: none; transition: padding .25s var(--ruhig);
}
.dateien b { grid-column: 1 / span 4; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.dateien span { grid-column: 5 / span 5; color: var(--text-leise); font-size: 15.5px; }
.dateien code { grid-column: 10 / span 2; color: var(--text-leise); white-space: nowrap; }
.dateien svg { grid-column: 12; justify-self: end; align-self: center; width: 22px; height: 22px; color: var(--marke-text); transition: transform .25s var(--ruhig); }
.dateien a:hover { color: inherit; padding-left: 10px; }
.dateien a:hover b { color: var(--marke-text); }
.dateien a:hover svg { transform: translateY(3px); }

/* ── Fuß ────────────────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--kante); padding-block: var(--a4); font-size: 14.5px; color: var(--text-leise); }
.fuss .breite { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a4); justify-content: space-between; }
.fuss nav { display: flex; gap: var(--a3); }

/* ── Rechtstexte (Impressum, Datenschutz) ───────────────────────────────── */
.recht { max-width: 760px; padding-block: var(--a6) var(--a7); }
.recht h1 { font: 400 clamp(48px, 7vw, 88px)/.98 var(--anton); letter-spacing: .008em; margin-bottom: var(--a5); }
.recht h2 { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin: var(--a5) 0 var(--a2); padding-top: var(--a3); border-top: 1px solid var(--kante); }
.recht p { margin-bottom: 1em; text-wrap: pretty; }
.recht address { font-style: normal; margin-bottom: 1em; }
.recht-zurueck { display: inline-block; margin-bottom: var(--a4); font-size: 15px; font-weight: 500; color: var(--text-leise); }

/* ── Schmal ─────────────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  main, .fuss { margin-left: 0; }
  html { scroll-padding-top: 84px; }
  .leiste {
    position: sticky; inset: 0 0 auto 0; width: auto; flex-direction: row; align-items: center; gap: var(--a2);
    padding: 12px var(--rand); border-right: 0; border-bottom: 1px solid var(--kante);
    background: color-mix(in oklab, var(--grund) 82%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  .leiste-marke svg { height: 30px; }
  .leiste-marke b { font-size: 19px; }
  .leiste-menue { flex: none; margin-left: auto; overflow: visible; }
  .leiste-menue summary {
    display: block; list-style: none; cursor: pointer; padding: 9px 18px 9px 14px;
    background: var(--marke-flaeche); font-size: 14px; font-weight: 600;
  }
  .leiste-menue summary::-webkit-details-marker { display: none; }
  .leiste-menue ol {
    position: absolute; left: 0; right: 0; top: 100%; padding: var(--a2) var(--rand) var(--a3);
    background: var(--grund); border-left: 0; border-bottom: 1px solid var(--kante);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .leiste-menue a { padding: 10px 0; font-size: 17px; border-left: 0; }
  .leiste-fuss { flex-direction: row; }
  .leiste-fuss span { display: none; }
  .leiste .schalter b { display: none; }
  .leiste .schalter { padding: 9px 12px 9px 9px; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .auftakt .breite { grid-template-columns: 1fr; min-height: 0; padding-block: var(--a3) var(--a5); }
  .auftakt-koerper { order: -1; min-height: 0; height: 46vh; max-height: 420px; margin: 0 0 var(--a2); }
  .kapitel { padding-top: var(--a6); }
  .kapitel:last-of-type { padding-bottom: var(--a6); }
  .kapitel-kopf { margin-bottom: var(--a5); row-gap: var(--a3); }
  .kapitel-kopf h2, .vorspann, .absatz-kopf h3, .absatz-kopf p,
  .kernsaetze b, .kernsaetze p, .regeln h3, .regeln h3 + p, .beispiel,
  .schriftrolle-name, .schriftrolle-probe, .petrolfeld h3, .petrolfeld dl { grid-column: 1 / -1; grid-row: auto; }
  .absatz { margin-top: var(--a5); }
  .absatz-kopf { row-gap: 10px; }
  .kernsaetze li { padding-block: var(--a3); row-gap: 6px; }
  .kernsaetze b { padding-top: 0; }
  .felder, .elementliste, .aufbau, .raum { grid-template-columns: 1fr; }
  .felder div { grid-template-columns: 1fr; gap: 2px; }
  .vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a2); }
  .paar { grid-template-columns: 1fr; }
  .buehne { padding: var(--a4) var(--a3); }
  .aufbau .buehne { padding: var(--a4) var(--a3); }
  .aufbau .zeichnung { max-width: 300px; }
  .petrolfeld { min-height: 340px; padding: var(--a3); row-gap: var(--a3); align-content: end; }
  .petrolfeld dl { font-size: 14px; }
  .verlaufsband { height: 104px; }
  .verlaufsband span { padding: 12px; font-size: 12px; }
  .schriftrolle { padding-block: var(--a4); row-gap: var(--a3); }
  .regeln li { padding-block: var(--a3); row-gap: 0; }
  .beispiel { margin-top: var(--a3); }
  .beispiel p { font-size: 17px; }
  .musterflaeche { min-height: 460px; }
  .glas { right: var(--a3); bottom: var(--a3); }
  .musterflaeche > svg { left: -4%; }
  .kombi .buehne { min-height: 0; }
  .rasterbild { gap: 6px; padding: var(--a2); height: 180px; }
  .schritte { gap: 10px; padding: var(--a2); height: 220px; justify-content: flex-start; overflow-x: auto; }
  .raum { min-height: 0; }
  .raum .koerper { min-height: 0; height: 420px; order: -1; }
  .raum-text { padding: var(--a3); }
  .anwendung > figure { grid-column: 1 / -1; }
  .visitenkarten { grid-template-columns: minmax(0, 340px); }
  .dateien a { grid-template-columns: 1fr auto; padding-block: 20px; row-gap: 4px; }
  .dateien b { grid-column: 1; grid-row: 1; font-size: 19px; }
  .dateien svg { grid-column: 2; grid-row: 1; }
  .dateien span { grid-column: 1 / -1; }
  .dateien code { grid-column: 1 / -1; }
  .tafel { font-size: 14px; min-width: 660px; }
  .fehl .fremd { font-size: 22px; }
  .recht { padding-block: var(--a5) var(--a6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .leiste, .thema { display: none; }
  main, .fuss { margin-left: 0; }
  .buehne, .kernsaetze li, .regeln li, .tafel tr, figure { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}