/* website-v4 — Leiterplatte auf hellem Grund. Palette „Stufe B satt" + Akzent Orange Juice (Entscheidung 29.08.2026; Proben in proben/_archiv-paletten/). Tokens in :root, Komponenten nur über Tokens. */

:root {
  --papier: #eef2f5;
  --blatt: #c9d6df;
  --blatt-tief: #adc0cd;
  --tinte: #1c232b;
  --tinte-leise: #3f4a56;
  --linie: #8ea3b3;
  --stahl: #163d56;
  --stahl-flaeche: #9bb4c4;
  --graphit: #131a21;
  --auf-graphit: #edf0f3;
  --auf-graphit-leise: #b3bdc7;
  --amber: #f9a603;
  --amber-glut: #ffcf66;
  --on-amber: #1f1400;
  --amber-text: #7f4b00;
  --hero-grund: #7b9aad;

  --wrap: 74rem;
  --text: 42rem;
  --sektion: clamp(4rem, 9vw, 8rem);
  --gruppe: clamp(1.5rem, 3vw, 2.5rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms var(--ease) both weg; }
::view-transition-new(root) { animation: 280ms var(--ease) both her; }
@keyframes weg { to { opacity: 0; } }
@keyframes her { from { opacity: 0; transform: translateY(6px); } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Libre Franklin", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--stahl); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--stahl); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--stahl); }
h3 { font-size: 1.5rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 62ch; }
.lead { font-size: 1.25rem; line-height: 1.5; color: var(--tinte-leise); max-width: 34rem; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 3rem); }
.text { max-width: var(--text); }
.wrap.text { max-width: var(--wrap); }
.wrap.text > h1, .wrap.text > h2, .wrap.text > address, .wrap.text > p { max-width: var(--text); }
.sprung { position: absolute; left: -999px; top: .5rem; background: var(--graphit); color: var(--auf-graphit); padding: .5rem .9rem; z-index: 20; }
.sprung:focus { left: .5rem; }

/* Kopf ------------------------------------------------------------------ */
.kopf { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--papier) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4rem; flex-wrap: wrap; padding-block: .5rem; }
.marke { font-weight: 800; letter-spacing: -.02em; font-size: 1.15rem; color: var(--tinte); text-decoration: none; }
.haupt { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); align-items: center; flex-wrap: wrap; }
.haupt a { color: var(--tinte); text-decoration: none; font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; transition: border-color 180ms var(--ease), color 180ms var(--ease); }
.haupt a:hover { color: var(--stahl); }
.haupt a[aria-current="page"] { border-bottom-color: var(--stahl); color: var(--stahl); }
.haupt .knopf-leise { border: 1px solid var(--stahl); border-radius: .35rem; padding: .4rem .9rem; color: var(--stahl); }
.haupt .knopf-leise[aria-current="page"], .haupt .knopf-leise:hover { background: var(--stahl); color: var(--blatt); border-bottom-color: var(--stahl); }

/* Knöpfe ---------------------------------------------------------------- */
.knopf { display: inline-flex; align-items: center; gap: .55rem; background: var(--amber); color: var(--on-amber); font-weight: 600; text-decoration: none; padding: .8rem 1.25rem; border-radius: .35rem; transition: background 180ms var(--ease); }
.knopf:hover { background: var(--amber-glut); }
.knopf svg { width: 1.05em; height: 1.05em; }
.pfeil { font-weight: 600; text-decoration: none; }
.pfeil::after { content: " \2197"; }
.knopf-reihe { display: flex; gap: 1rem 1.5rem; align-items: center; flex-wrap: wrap; margin-top: 1.6rem; }
/* Umriss-Knopf (30.08.): zweiter, leiserer Knopf neben dem Amber-Primärknopf; auf Graphit weiß umrandet */
.knopf-umriss { background: transparent; color: var(--stahl); border: 1.5px solid var(--stahl); }
.knopf-umriss:hover { background: var(--stahl); color: var(--papier); }
.band .knopf.knopf-umriss { color: var(--auf-graphit); border-color: var(--auf-graphit); }
.band .knopf.knopf-umriss:hover { background: var(--auf-graphit); color: var(--graphit); }

/* Hero ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; background: linear-gradient(90deg, var(--blatt) 0 26%, var(--hero-grund) 64%, var(--hero-grund)); border-bottom: 1px solid var(--linie); }
.hero-innen { position: relative; min-height: max(30rem, min(35.7vw, 36rem)); max-width: 100rem; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 3rem); }
.hero-text { position: relative; z-index: 2; max-width: 44rem; padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero-text h1 { font-size: clamp(2rem, 3.9vw, 3.3rem); margin-bottom: .5em; }
/* Kernsatz (Runde 14): der eine Satz nach dem Schritte-Diagramm */
.angebot-text { margin-top: var(--gruppe); max-width: var(--text); }
.angebot-text .kern, .angebot-text .nach-kern { font-size: 1.25rem; line-height: 1.5; max-width: none; }
.kern { font-weight: 700; color: var(--tinte); margin: 0 0 .5em; }
.nach-kern { color: var(--tinte-leise); margin: 0; }
.schmerz .wrap.zwei { align-items: start; }
.hero-bild { position: absolute; right: 0; top: 0; bottom: 0; width: auto; margin: 0; }
.hero-bild img { height: 100%; width: auto; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 120px); mask-image: linear-gradient(90deg, transparent, #000 120px); }
.hero-bildzeile { position: absolute; right: 1rem; bottom: .9rem; z-index: 2; font-size: .82rem; color: var(--tinte-leise); background: color-mix(in srgb, var(--blatt) 82%, transparent); padding: .3rem .6rem; border-radius: .3rem; margin: 0; }
/* (Runde 17: Foto fuellt die Sektionshoehe; Breite folgt aus der Hoehe. Auf grossen Schirmen = 63 % wie vorher, auf Laptops breiter statt Stufe oben.) */
.beleg { background: var(--papier); border-bottom: 1px solid var(--linie); }
.beleg-innen { display: flex; gap: .6rem 1.8rem; flex-wrap: wrap; align-items: baseline; padding-block: 1.1rem; font-size: 1.05rem; font-weight: 600; color: var(--tinte); }
.beleg-innen strong { color: var(--tinte); font-weight: 800; font-size: 1.15rem; }
.beleg-innen .pfeil { font-size: .95rem; font-weight: 600; white-space: nowrap; }

@media (max-width: 52rem) {
  .hero { background: var(--blatt); }
  .hero-innen { min-height: 0; padding-inline: 0; }
  .hero-text { padding-inline: clamp(1.1rem, 4vw, 3rem); max-width: none; }
  .hero-bild { position: relative; width: 100%; background: var(--hero-grund); }
  .hero-bild img { height: auto; width: 100%; }
  .hero-bild img { -webkit-mask-image: none; mask-image: none; max-height: 40rem; object-fit: cover; object-position: center 25%; }
}

/* Sektionen ------------------------------------------------------------- */
/* Schritte-Diagramm (Runde 14): flach ab 52 rem, hochkant darunter; Kästen als Platinen-Glyphen */
.schritte { margin: 0; }
.schritte svg { display: block; width: 100%; height: auto; font-family: inherit; }
.schritte-flach svg { max-width: 74rem; }
.schritte-hoch { display: none; max-width: 22rem; }
@media (max-width: 52rem) { .schritte-flach { display: none; } .schritte-hoch { display: block; } }
.sektion { padding-block: var(--sektion); }
.sektion + .sektion { border-top: 1px solid var(--linie); }
.sektion.tief { background: var(--blatt); }
.sektion.stahl { background: var(--stahl-flaeche); }
.sektion-kopf { max-width: var(--text); margin-bottom: var(--gruppe); }
.eng { padding-block: calc(var(--sektion) * .6); }
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gruppe) clamp(2rem, 5vw, 5rem); align-items: center; }
.zwei.gespiegelt > :first-child { order: 2; }
@media (max-width: 52rem) { .zwei { grid-template-columns: 1fr; } .zwei.gespiegelt > :first-child { order: 0; } }

.schmerz .nutzen { font-weight: 600; color: var(--tinte); border-left: 3px solid var(--amber); padding-left: 1rem; }
.schmerz .tafel { margin-top: 0; }
.schmerz .tafel > div { grid-template-columns: 11rem 1fr; }
@media (max-width: 52rem) { .schmerz .tafel > div { grid-template-columns: 1fr; } }

/* Stufen-Übersicht (Startseite) ----------------------------------------- */
.stufen { display: grid; grid-template-columns: 0.8fr 1.1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: var(--gruppe); }
.stufe { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.stufe .zahl { position: absolute; top: -1rem; left: 0; width: 2rem; height: 2rem; border-radius: 50%; border: 1.25px solid var(--stahl); background: var(--stahl); color: var(--auf-graphit); font-weight: 700; display: grid; place-items: center; font-size: .95rem; }
.stufe h3 { margin-top: .9rem; }
.stufe p { max-width: 30rem; }
.stufe.aussicht { color: var(--tinte-leise); }
.stufe.aussicht .zahl { border-style: dashed; }
.marker { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); border: 1px solid var(--linie); border-radius: .3rem; padding: .18rem .5rem; margin-bottom: .6rem; }
.marker.warm { color: var(--on-amber); background: var(--amber-glut); border-color: transparent; }
@media (max-width: 52rem) { .stufen { grid-template-columns: 1fr; gap: 2.5rem; } .platine { min-width: 44rem; } }

/* Platine --------------------------------------------------------------- */
.platine { width: 100%; height: auto; display: block; overflow: visible; }
.platine-rahmen { overflow-x: auto; margin-top: var(--gruppe); }
.platine .bahn { fill: none; stroke: var(--stahl); stroke-opacity: .85; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; filter: url(#leuchten); }
.platine.zeichnen .bahn { animation: ziehen 900ms var(--ease) both; }
.platine .pad { fill: #ffffff; fill-opacity: .8; stroke: var(--stahl); stroke-width: 1.5; }
.platine.zeichnen .pad { animation: auftauchen 400ms var(--ease) both; }
.platine .modul rect.glas { fill: url(#glas); stroke: #ffffff; stroke-opacity: .85; stroke-width: 1; filter: url(#schatten); transition: stroke 180ms var(--ease); }
.platine .kante { fill: none; stroke: url(#kante); stroke-width: 1.5; stroke-linecap: round; }
.platine .modul text, .platine .beschriftung { fill: var(--tinte); font-weight: 700; letter-spacing: .05em; }
.platine a { cursor: pointer; }
.platine a:hover .modul rect, .platine a:focus-visible .modul rect, .platine a:hover .gehaeuse { stroke: var(--amber); stroke-opacity: 1; stroke-width: 2; }
.platine a:hover .modul text { fill: var(--amber-text); }
.platine a:focus-visible { outline: none; }
.platine.zeichnen .modul { animation: auftauchen 500ms var(--ease) both; }
.platine .bestand .zeile { stroke: var(--stahl); stroke-opacity: .28; stroke-width: 3; stroke-linecap: round; }
.platine .nummer circle { fill: var(--stahl); stroke: var(--stahl); stroke-width: 1.25; }
.platine .nummer text { fill: var(--auf-graphit); font-weight: 700; }
.platine .chip .pin { fill: var(--stahl); fill-opacity: .85; }
.platine .nummer circle { filter: url(#schatten); }
.platine .traeger { pointer-events: none; }
.platine .chip .gehaeuse { fill: url(#glas); stroke: #ffffff; stroke-opacity: .9; stroke-width: 1; filter: url(#schatten); transition: stroke 180ms var(--ease); }
.platine .chip .die { fill: url(#glas-tief); stroke: #ffffff; stroke-opacity: .5; }
.platine .chip .kern { fill: var(--amber); }
.platine .chip .glut { animation: atmen 6s ease-in-out infinite alternate; }
.platine .s1 .bahn, .platine .bahn.s1 { animation-delay: 0ms; }
.platine .bahn.s2 { animation-delay: 300ms; }
.platine .bahn.s3 { animation-delay: 600ms; }
.platine .modul.s1, .platine .pad.s1 { animation-delay: 350ms; }
.platine .modul.s2, .platine .pad.s2 { animation-delay: 650ms; }
.platine .modul.s3, .platine .pad.s3 { animation-delay: 950ms; }
.platine.zeichnen .nummer { animation: auftauchen 400ms var(--ease) both; }
.platine .nummer.s1 { animation-delay: 200ms; }
.platine .nummer.s2 { animation-delay: 700ms; }
.platine .nummer.s3 { animation-delay: 1100ms; }
/* Auf Stufenseiten: die anderen Stufen treten zurück */
.platine[class*="aktiv-"] .stufe { transition: opacity 300ms; }
.platine.aktiv-1 .s2, .platine.aktiv-1 .s3,
.platine.aktiv-2 .s1, .platine.aktiv-2 .s3,
.platine.aktiv-3 .s1, .platine.aktiv-3 .s2 { opacity: .38; }
.platine.aktiv-1 .nummer.s1 circle, .platine.aktiv-2 .nummer.s2 circle, .platine.aktiv-3 .nummer.s3 circle { fill: var(--amber); stroke: var(--amber); }
.platine.aktiv-1 .nummer.s1 text, .platine.aktiv-2 .nummer.s2 text, .platine.aktiv-3 .nummer.s3 text { fill: var(--on-amber); }
.platine.aktiv-2 .s1 .chip .glut, .platine.aktiv-3 .s1 .chip .glut { display: none; }
@keyframes ziehen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes auftauchen { from { opacity: 0; } to { opacity: 1; } }
@keyframes atmen { from { opacity: .7; } to { opacity: 1; } }

/* Ablauf-Liste (Stufenseiten) ------------------------------------------- */
.ablauf { list-style: none; padding: 0; margin: var(--gruppe) 0 0; counter-reset: schritt; display: grid; gap: 1.2rem; max-width: var(--text); }
.ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 2.4rem 1fr; gap: .1rem 1rem; align-items: start; }
.ablauf li > * { grid-column: 2; }
.ablauf li::before { grid-column: 1; grid-row: 1 / span 2; content: counter(schritt); width: 2rem; height: 2rem; border-radius: 50%; border: 1.25px solid var(--stahl); background: var(--stahl); color: var(--auf-graphit); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.ablauf strong { display: block; font-weight: 700; }
.ablauf p { margin: .15rem 0 0; color: var(--tinte-leise); }

/* Zwei Wege (Anschließen) ----------------------------------------------- */
.wege { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--gruppe); margin-top: var(--gruppe); }
.weg { padding: 1.5rem 0 0; border-top: 2px solid var(--stahl); }
.weg.gross { border-top-color: var(--amber); }
.weg h3 span { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); margin-bottom: .35rem; }
@media (max-width: 52rem) { .wege { grid-template-columns: 1fr; } }

/* Wissensnetz (Anschließen) ---------------------------------------------- */
.netz-buehne { aspect-ratio: 1 / 1; min-height: 26rem; overflow: hidden; }
.netz-buehne canvas { width: 100%; height: 100%; display: block; }
/* Klickbares Netz auf Anschließen (30.08.): Bedienzeile unter dem Canvas, Eintrag als Blatt auf Graphit */
.netz-klick { display: flex; flex-direction: column; }
.netz-klick canvas { cursor: grab; flex: 1 1 auto; min-height: 0; }
.netz-bedienung { margin: .4rem 0 0; font-size: .85rem; color: var(--auf-graphit-leise); }
.netz-eintrag { margin-top: 1.25rem; padding: 1rem 1.25rem 1.1rem; border-radius: .5rem; background: var(--papier); color: var(--tinte); max-width: 34rem; }
.netz-eintrag p { margin: 0; color: inherit; }
.netz-eintrag-marker { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }
.netz-eintrag-titel { font-weight: 700; font-size: 1.1rem; margin-top: .25rem !important; color: var(--stahl); }
.netz-eintrag-text { margin-top: .5rem !important; font-size: .98rem; line-height: 1.5; min-height: 4.5em; }
.netz-eintrag-quelle { margin-top: .6rem !important; font-family: Consolas, "Cascadia Mono", monospace; font-size: .8rem; color: var(--tinte-leise); }
.band .netz-eintrag + .leise { margin-top: .75rem; font-size: .85rem; }

/* Regel-Tafel (Wissensfrage / Entscheidungsfrage) ----------------------- */
.tafel { border: 1px solid var(--linie); border-radius: .5rem; overflow: hidden; margin-top: var(--gruppe); max-width: var(--text); }
.tafel > div { display: grid; grid-template-columns: 1fr 1fr; }
.tafel > div + div { border-top: 1px solid var(--linie); }
.tafel > div > * { padding: 1rem 1.2rem; margin: 0; }
.tafel > div > :first-child { background: var(--stahl); color: var(--auf-graphit); font-weight: 600; }
.tafel .ziel-null { color: var(--stahl); font-weight: 700; }
.tafel .ziel-bleibt { color: var(--amber-text); font-weight: 700; }

/* Zählung (Beispiel) ---------------------------------------------------- */
.zaehlung { list-style: none; padding: 0; margin: var(--gruppe) 0 0; display: grid; gap: .5rem; max-width: 28rem; }
.zaehlung li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--linie); padding-bottom: .5rem; }
.zaehlung b { font-size: 1.4rem; font-weight: 800; text-align: right; color: var(--tinte); }
.zaehlung li.warm b { color: var(--amber-text); }
.zaehlung small { color: var(--tinte-leise); }

/* Graphit-Band ---------------------------------------------------------- */
.band { background: var(--graphit); color: var(--auf-graphit); }
.band a { color: var(--auf-graphit); }
.band .knopf { color: var(--on-amber); }
.band .lead, .band .leise { color: var(--auf-graphit-leise); }
.band h2, .band h3 { color: var(--auf-graphit); }
.band .marker { color: var(--auf-graphit-leise); border-color: var(--auf-graphit-leise); }
/* Über mich (30.08., Miriam: Übersicht durch Aufklappen): Stationen und Gebautes als Klapp-Listen */
.klapp-liste { margin: var(--gruppe) 0 0; max-width: var(--text); }
.klapp { border-top: 1px solid var(--linie); }
.klapp:last-child { border-bottom: 1px solid var(--linie); }
.klapp summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.3rem 1fr auto; gap: .3rem .7rem; align-items: baseline; padding: .9rem 0; }
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary::before { content: "+"; color: var(--stahl); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.klapp[open] summary::before { content: "–"; }
.klapp summary b { font-weight: 700; }
.klapp summary span, .klapp summary .nachweis { color: var(--tinte-leise); font-size: .95rem; }
.klapp summary > span:not(.nachweis) { grid-column: 2; }
.klapp summary .nachweis { grid-column: 3; white-space: nowrap; }
.klapp p { margin: 0 0 1rem 2rem; color: var(--tinte-leise); }
.band .klapp { border-color: color-mix(in srgb, var(--auf-graphit) 25%, transparent); }
.band .klapp summary::before { color: var(--amber); }
.band .klapp summary span, .band .klapp p { color: var(--auf-graphit-leise); }
@media (max-width: 40rem) { .klapp summary { grid-template-columns: 1.3rem 1fr; } .klapp summary .nachweis { grid-column: 2; } }
.stationen b { font-weight: 700; }

/* Herkunft -------------------------------------------------------------- */
.portrait { width: min(100%, 30rem); height: auto; border-radius: .6rem; align-self: start; justify-self: end; box-shadow: 0 10px 30px rgba(34,80,106,.18); }
/* Seitentitel ueber die volle Breite: neben dem Portraet brach die H1 in sechs Zeilen */
.seiten-titel { max-width: 58rem; margin-bottom: var(--gruppe); font-size: clamp(2rem, 3.6vw, 3rem); text-wrap: balance; }
/* Fragen-Seite (30.08., Miriam: Liste zum Aufklappen wie v3): Fragen im Überblick, Antwort nur wo gewollt */
.fragen details { border-top: 1px solid var(--linie); max-width: var(--text); }
.fragen details:last-of-type { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: baseline; padding: 1.1rem 0; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before { content: "+"; color: var(--stahl); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.fragen details[open] summary::before { content: "–"; }
.fragen summary h2 { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); color: var(--stahl); text-wrap: balance; }
.fragen summary:hover h2 { text-decoration: underline; text-underline-offset: .2em; }
.fragen .antwort { padding: 0 0 1.4rem 2rem; }
.fragen .antwort p + p { margin-top: .8rem; }
.fragen .knopf-reihe { margin-top: var(--gruppe); }
/* Zitat unter der H1 (Über mich, 30.08.): Tinte, kein Kasten, kein Icon — ein gesprochener Satz, kein Schmuck */
.zitat { font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 500; line-height: 1.35; color: var(--tinte); max-width: 40rem; margin: calc(-1 * var(--gruppe) + .75rem) 0 var(--gruppe); text-wrap: balance; }
@media (max-width: 52rem) { .portrait { justify-self: start; width: min(100%, 22rem); } }
.werkstatt { margin: 0; }
.nachweise { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.nachweise li a, .nachweise li span { display: inline-block; border: 1px solid var(--linie); border-radius: 2rem; padding: .3rem .8rem; font-size: .9rem; text-decoration: none; color: var(--tinte); }
.nachweise li a:hover { border-color: var(--stahl); color: var(--stahl); }

/* Kontakt --------------------------------------------------------------- */
.adresse { font-style: normal; color: var(--tinte-leise); margin-top: 1rem; }

/* Rechtliches ----------------------------------------------------------- */
.legal h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.legal h3 { font-size: 1.15rem; margin-top: 1.6em; }
.legal p, .legal li { max-width: var(--text); }
.legal address { font-style: normal; }
.legal .stand { color: var(--tinte-leise); font-size: .92rem; margin-top: 2rem; }

/* Fuß ------------------------------------------------------------------- */
.fuss { background: var(--graphit); color: var(--auf-graphit); margin-top: var(--sektion); padding-block: clamp(2.5rem, 5vw, 4rem); }
.band + .fuss, main:has(> section.band:last-of-type) + .fuss { margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--auf-graphit) 18%, transparent); }
.fuss a { color: var(--auf-graphit); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem 3rem; }
.fuss-name { font-weight: 800; font-size: 1.1rem; margin-bottom: .4rem; }
.fuss-zeile { color: var(--auf-graphit-leise); max-width: 30rem; }
.fuss-titel { font-weight: 600; margin: 0 0 .5rem; }
.fuss-titel + ul + .fuss-titel { margin-top: 1.4rem; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
@media (max-width: 52rem) { .fuss-raster { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .platine.zeichnen .bahn, .platine.zeichnen .pad, .platine.zeichnen .modul, .platine.zeichnen .nummer { animation: none; }
  .platine .chip .glut { animation: none; }
  .platine[class*="aktiv-"] .stufe { transition: none; }
}

/* Platine als 3D-Render + Klick-Ebene (Runde 5) ------------------------- */
.platine-bild { position: relative; container-type: inline-size; min-width: 40rem; }
.platine-bild img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(34,80,106,.28)); }
.platine-bild .bahnen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.platine-bild .bahn { fill: none; stroke: #dbeefb; stroke-opacity: .95; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 2.5px rgba(160,210,245,.9)); }
.platine-bild .pad { fill: #eef6fc; stroke: #8fb9d6; stroke-width: 1; }
.platine-bild.zeichnen .bahn { animation: ziehen 900ms var(--ease) both; }
.platine-bild.zeichnen .bahn.s2 { animation-delay: 150ms; } .platine-bild.zeichnen .bahn.s3 { animation-delay: 450ms; }
.platine-bild.zeichnen .pad { animation: auftauchen 400ms var(--ease) both 300ms; }
.platine-bild.aktiv-1 .bahn.s2, .platine-bild.aktiv-1 .bahn.s3, .platine-bild.aktiv-2 .bahn.s1, .platine-bild.aktiv-2 .bahn.s3, .platine-bild.aktiv-3 .bahn.s1, .platine-bild.aktiv-3 .bahn.s2,
.platine-bild.aktiv-1 .pad.s2, .platine-bild.aktiv-1 .pad.s3, .platine-bild.aktiv-2 .pad.s1, .platine-bild.aktiv-2 .pad.s3, .platine-bild.aktiv-3 .pad.s1, .platine-bild.aktiv-3 .pad.s2 { opacity: .35; }
.platine-bild .feld, .platine-bild .unterschrift, .platine-bild .nummer { position: absolute; }
.platine-bild .feld { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  display: grid; place-items: center; text-align: center; padding: 0 4%; border-radius: 6cqw / 12cqw; border-radius: .6rem;
  text-decoration: none; color: var(--tinte); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-size: clamp(.5rem, 1.25cqw, .82rem); line-height: 1.2; transition: box-shadow 180ms var(--ease), color 180ms var(--ease); }
.platine-bild .feld.klein { font-size: clamp(.45rem, 1.1cqw, .74rem); }
.platine-bild .feld:hover, .platine-bild .feld:focus-visible { box-shadow: 0 0 0 2px var(--amber), 0 6px 18px rgba(34,80,106,.25); color: var(--amber-text); outline: none; }
.platine-bild .unterschrift { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translateX(-50%); white-space: nowrap;
  font-size: clamp(.5rem, 1.15cqw, .76rem); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte); pointer-events: none; padding: .2em .7em; border-radius: 999px; background: rgba(232,238,242,.78); backdrop-filter: blur(4px); box-shadow: 0 1px 4px rgba(34,80,106,.18); }
.platine-bild .nummer { left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 2.6cqw; height: 2.6cqw; min-width: 1.4rem; min-height: 1.4rem;
  display: grid; place-items: center; border-radius: 50%; background: var(--stahl); color: var(--auf-graphit); font-weight: 700; font-size: clamp(.6rem, 1.3cqw, .85rem);
  box-shadow: 0 3px 8px rgba(34,80,106,.35); }
.platine-bild[class*="aktiv-"] .feld, .platine-bild[class*="aktiv-"] .unterschrift, .platine-bild[class*="aktiv-"] .nummer { transition: opacity 300ms; }
.platine-bild.aktiv-1 .s2, .platine-bild.aktiv-1 .s3, .platine-bild.aktiv-2 .s1, .platine-bild.aktiv-2 .s3, .platine-bild.aktiv-3 .s1, .platine-bild.aktiv-3 .s2 { opacity: .45; }
.platine-bild.aktiv-1 .nummer.s1, .platine-bild.aktiv-2 .nummer.s2, .platine-bild.aktiv-3 .nummer.s3 { background: var(--amber); }
@media (prefers-reduced-motion: no-preference) { .platine-bild .feld { animation: auftauchen 500ms var(--ease) both; } }

/* Platine als flaches Diagramm (Runde 7) --------------------------------- */
.platine-flach svg { display: block; width: 100%; min-width: 46rem; height: auto; color: var(--tinte); }
.platine-flach text { font-family: inherit; fill: currentColor; }
.platine-flach .d-bx { fill: #ffffff; fill-opacity: .82; stroke: var(--stahl); stroke-width: 1.3; }
.platine-flach .d-pad { fill: var(--stahl); fill-opacity: .55; }
.platine-flach .d-raster { fill: var(--stahl); fill-opacity: .12; }
.platine-flach .d-chip { fill: #ffffff; stroke: var(--stahl); stroke-width: 1.6; }
.platine-flach .d-glut { fill: var(--amber); }
.platine-flach .d-ln { stroke: var(--stahl); stroke-width: 1.5; fill: none; stroke-dasharray: 1; }
.platine-flach .d-ln.warm { stroke: var(--amber); stroke-width: 1.8; }
.platine-flach .d-ln.dash { stroke-dasharray: .02 .02; }
.platine-flach .d-ln.leise { stroke-opacity: .5; }
.platine-flach .d-hd { fill: var(--stahl); } .platine-flach .d-hd.warm { fill: var(--amber); }
.platine-flach .d-t { font-size: 13.5px; font-weight: 600; fill: var(--tinte); }
.platine-flach .d-t2 { font-size: 11.5px; fill: var(--tinte-leise); }
.platine-flach .d-lb { font-size: 10.5px; fill: var(--tinte-leise); letter-spacing: .04em; }
.platine-flach .d-lb.warm { fill: var(--amber-text); }
.platine-flach .d-ey { font-size: 10px; letter-spacing: .14em; fill: var(--tinte-leise); font-weight: 600; }
.platine-flach .d-sep { stroke: var(--linie); stroke-width: 1; }
.platine-flach a { text-decoration: none; outline: none; }
.platine-flach a:hover .d-bx, .platine-flach a:focus-visible .d-bx, .platine-flach a:hover .d-chip, .platine-flach a:focus-visible .d-chip { stroke: var(--amber); stroke-width: 2; }
.platine-flach a:hover .d-t, .platine-flach a:focus-visible .d-t { fill: var(--amber-text); }
.platine-flach.zeichnen .d-ln:not(.dash) { animation: ziehen 900ms var(--ease) both; }
.platine-flach.zeichnen .d-ln.s2 { animation-delay: 250ms; } .platine-flach.zeichnen .d-ln.s3 { animation-delay: 500ms; }
.platine-flach.zeichnen a { animation: auftauchen 500ms var(--ease) both; }
.platine-flach.zeichnen a.s2 { animation-delay: 200ms; } .platine-flach.zeichnen a.s3 { animation-delay: 400ms; }
.platine-flach[class*="aktiv-"] .s1, .platine-flach[class*="aktiv-"] .s2, .platine-flach[class*="aktiv-"] .s3 { transition: filter 300ms; }
.platine-flach.aktiv-1 .s2, .platine-flach.aktiv-1 .s3, .platine-flach.aktiv-2 .s1, .platine-flach.aktiv-2 .s3, .platine-flach.aktiv-3 .s1, .platine-flach.aktiv-3 .s2 { filter: opacity(.4); }
.platine-flach.aktiv-1 .d-ey.s1, .platine-flach.aktiv-2 .d-ey.s2, .platine-flach.aktiv-3 .d-ey.s3 { fill: var(--amber-text); }
/* Hochkant-Fassung fuer schmale Schirme: dieselben Inhalte, kein Seitwaerts-Scrollen */
.platine-hoch { display: none; }
.platine-hoch svg { min-width: 0; max-width: 24rem; margin-inline: auto; }
@media (max-width: 52rem) {
  .platine-rahmen { overflow-x: visible; }
  .platine-rahmen > .platine-flach:not(.platine-hoch) { display: none; }
  .platine-hoch { display: block; }
}

/* Hero: Netz über der Hand (Runde 8) -------------------------------------- */
.hero-netz { position: absolute; left: 5%; top: 12%; width: 36%; height: 76%; z-index: 1; cursor: grab; }
.hero-netz:active, .netz-buehne canvas:active { cursor: grabbing; }
.netz-buehne canvas { cursor: grab; }

/* Vorführung: Dieselbe Anfrage, zwei Antworten --------------------------- */
/* Film: selbst gehostetes MP4, Bühne Graphit (Regel 2), kein Autoplay, kein Drittanbieter */
.film { margin: 0 0 var(--gruppe); max-width: 56rem; }
.film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--graphit); border-radius: .5rem; border: 1px solid var(--linie); }
.film figcaption { font-size: .9rem; color: var(--tinte-leise); margin-top: .6rem; max-width: 62ch; }
.vorfuehrung .ziel-bleibt { font-weight: 600; margin-top: .4rem; }
.vorfuehrung .anfrage { background: var(--graphit); color: var(--auf-graphit); border-radius: .35rem; padding: 1.5rem 1.75rem; display: grid; grid-template-columns: 9rem 1fr; gap: 1rem 2rem; }
.vorfuehrung .anfrage .label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--auf-graphit-leise); }
.vorfuehrung .anfrage .label b { display: block; color: var(--auf-graphit); font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 600; margin-top: .35rem; }
.vorfuehrung .anfrage .brief { max-width: 46rem; }
.vorfuehrung .anfrage p { margin: 0 0 .8rem; color: inherit; }
.vorfuehrung .anfrage p:last-child { margin: 0; }
.vorfuehrung .anfrage .meta { color: var(--auf-graphit-leise); font-size: .9rem; }
.zwei-antworten { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto auto; gap: 1.1rem 2rem; margin-top: 2.5rem; align-items: start; }
.zwei-antworten .spalte { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 1.1rem; }
.vorfuehrung .chip { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.vorfuehrung .chip::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; border: 1.25px solid var(--stahl); }
.vorfuehrung .chip.leise { color: var(--tinte-leise); } .vorfuehrung .chip.leise::before { border-color: var(--tinte-leise); }
.vorfuehrung .chip.haus::before { background: var(--amber); border-color: var(--amber); }
.zwei-antworten h3 { font-size: 1.25rem; margin: 0; line-height: 1.25; }
.zwei-antworten h3 small { display: block; font-size: .92rem; font-weight: 400; color: var(--tinte-leise); margin-top: .2rem; }
.vorfuehrung .mail { background: var(--blatt-tief); border: 1px solid var(--linie); border-radius: .35rem; padding: 1.4rem 1.5rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.vorfuehrung .mail p { margin: 0 0 .85rem; max-width: none; }
.vorfuehrung .mail p:first-child { color: var(--tinte-leise); border-bottom: 1px solid var(--linie); padding-bottom: .7rem; margin-bottom: 1rem; }
.vorfuehrung .mail ul { margin: 0 0 .85rem; padding-left: 1.2rem; } .vorfuehrung .mail li { margin: 0 0 .3rem; }
.vorfuehrung .mail p:last-child { margin: 0; }
.pruef { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.pruef li { display: grid; grid-template-columns: 1.4rem 8.5rem 1fr; gap: .5rem; padding: .55rem 0; border-top: 1px solid var(--linie); font-size: .92rem; align-items: baseline; }
.pruef li:last-child { border-bottom: 1px solid var(--linie); }
.pruef .mark { font-weight: 700; text-align: center; } .pruef .punkt { color: var(--tinte-leise); }
.pruef .allgemein .mark { color: var(--tinte-leise); } .pruef .haus .mark { color: var(--stahl); } .pruef .haus .text { font-weight: 500; }
/* Dateiliste und Betriebsanweisung: echte Dateien, darum feste Breite (keine Deko) */
.vorfuehrung .ordner, .vorfuehrung .anweisung pre { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; }
.vorfuehrung .ordner { font-size: .82rem; background: var(--blatt-tief); border-radius: .35rem; padding: .9rem 1.1rem; white-space: pre; overflow-x: auto; margin: 0; line-height: 1.5; }
.vorfuehrung .ordner b { font-weight: 700; } .vorfuehrung .ordner i { font-style: normal; color: var(--tinte-leise); font-family: inherit; }
.vorfuehrung .ordner .neu { background: var(--amber-glut); color: var(--on-amber); font-weight: 600; padding: 0 .25em; border-radius: .15rem; }
.vorfuehrung .anweisung { margin-top: 2.75rem; border-top: 1px solid var(--linie); padding-top: 1.5rem; }
.vorfuehrung .anweisung summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }
.vorfuehrung .anweisung summary::-webkit-details-marker { display: none; }
.vorfuehrung .anweisung summary::before { content: "+"; color: var(--stahl); font-weight: 700; width: 1rem; }
.vorfuehrung .anweisung[open] summary::before { content: "–"; }
.vorfuehrung .anweisung summary small { font-weight: 400; color: var(--tinte-leise); }
.vorfuehrung .anweisung pre { font-size: .8rem; line-height: 1.5; background: var(--blatt-tief); border: 1px solid var(--linie); border-radius: .35rem; padding: 1.2rem 1.4rem; overflow-x: auto; margin: 1rem 0 0; white-space: pre-wrap; }
.vorfuehrung .herkunft-zeile { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--linie); color: var(--tinte-leise); font-size: .88rem; max-width: 52rem; }
.vorfuehrung .herkunft-zeile p { margin: 0 0 .5rem; color: inherit; }
/* Kurzfassung (Startseite): sechs Punkte nebeneinander */
.pruef-paar { list-style: none; margin: 0; padding: 0; }
.pruef-paar li { display: grid; grid-template-columns: 8.5rem 1fr 1fr; gap: .6rem 1.5rem; padding: .6rem 0; border-top: 1px solid var(--linie); font-size: .95rem; align-items: baseline; }
.pruef-paar li:last-child { border-bottom: 1px solid var(--linie); }
.pruef-paar li.spalten { border-top: 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); font-weight: 600; padding-bottom: .4rem; }
.pruef-paar li.spalten span:last-child { color: var(--tinte); }
.pruef-paar .punkt { color: var(--tinte-leise); }
.pruef-paar .mark { font-weight: 700; margin-right: .5rem; }
.pruef-paar .allgemein { color: var(--tinte-leise); } .pruef-paar .allgemein .mark { color: var(--tinte-leise); }
.pruef-paar .haus { font-weight: 500; color: var(--tinte); } .pruef-paar .haus .mark { color: var(--amber-text); font-size: 1.05em; }
@media (max-width: 52rem) {
  .zwei-antworten { grid-template-columns: 1fr; grid-template-rows: none; gap: 2.75rem; }
  .zwei-antworten .spalte { grid-row: auto; grid-template-rows: none; }
  .vorfuehrung .anfrage { grid-template-columns: 1fr; gap: .75rem; }
  .pruef li { grid-template-columns: 1.4rem 1fr; } .pruef .text { grid-column: 2; }
  .pruef-paar li { grid-template-columns: 1fr; gap: .25rem; } .pruef-paar li.spalten { display: none; }
  .pruef-paar .punkt { font-weight: 600; color: var(--tinte); }
}

/* Hero (Runde 12): gestapelt bis 90 rem, darueber Original (Netz ueber der Hand, Miriam 30.08.: so lassen). */

/* Tafel quer (Runde 16): drei Anlässe nebeneinander, Label oben, Text unten; mobil untereinander */
.tafel-quer { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schmerz .tafel-quer > div { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.tafel-quer > div + div { border-top: 0; border-left: 1px solid var(--linie); }
@media (max-width: 52rem) {
  .tafel-quer { grid-template-columns: 1fr; }
  .tafel-quer > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .schmerz .tafel-quer > div { grid-template-rows: auto; }
}

/* Tafel-Titel (Runde 19): Versalien mit Laufweite, wie die Klammern im Schritte-Diagramm */
.tafel-quer > div > :first-child { text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; font-weight: 700; padding-block: .85rem; }

/* Hero auf Laptops (Runde 20): 52–100 rem Text und Foto 50/50, Foto hängt unten, nichts überlagert sich.
   Ab 100 rem füllt das Foto die gedeckelte Höhe (Runde 17/19). */
@media (min-width: 52.01rem) and (max-width: 99.99rem) {
  .hero-innen { min-height: 0; }
  .hero-text { max-width: 46%; padding-block: clamp(2.5rem, 4vw, 4rem); }
  .hero-text .lead { font-size: 1.1rem; }
  .hero-bild { top: auto; bottom: 0; width: 54%; }
  .hero-netz { left: -20%; width: 62%; top: 4%; height: 84%; }
  .hero-bild img { height: auto; width: 100%; }
}