/* Datenwerkstatt für Kunden ohne entitys und die Übersicht. Eine weiße Seite, eine schwarze Werkbank, Mint heißt: das Nächste.
   Die Kundenmarke erscheint nur als Logo. Geist liegt lokal (schriften/LIZENZ.txt): keine Verbindung zu fremden Servern. */
@font-face { font-family: "Geist"; src: url("schriften/Geist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("schriften/Geist-latin-ext-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --schwarz: #0e1214; --mint: #2cd5c4; --mint-hell: #5ae4d6; --mint-tief: #0b7267; --auf-mint: #0e1214;
  --tinte: #0e1214; --stein: #5b6367; --marke-grau: #6e767a; --grund: #ffffff; --flaeche: #f4f5f6; --flaeche-tief: #e9ebed;
  --rahmen: #e6e8ea; --stahl: #c6cacd; --strich: #cfd3d6; --pfeil: #8d9599;
  --achtung: #8a4500; --achtung-flaeche: #fff3e4;
  --schrift: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --rand: clamp(24px, 3.4vw, 56px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100vh; font: 400 16px/1.5 var(--schrift); color: var(--tinte); background: var(--grund); -webkit-font-smoothing: antialiased; caret-color: var(--mint-tief); }
::selection { background: var(--mint); color: var(--auf-mint); }
:focus-visible { outline: 2px solid var(--mint-tief); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--stahl) transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { margin: 0; font-weight: 500; color: var(--tinte); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-klein { width: 16px; height: 16px; }
.zahl, .mass, .gewinn, .tabelle, .tafel, .zeile-bringt, .leiste small, .w-meister, .balken { font-variant-numeric: tabular-nums; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; padding: 0 max(var(--rand), calc((100vw - 1560px) / 2 + var(--rand))); background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid var(--rahmen); }
.kopf.mittel { padding-inline: max(var(--rand), calc((100vw - 1180px) / 2 + var(--rand))); }
.marke { display: inline-flex; align-items: center; gap: 14px; min-width: 0; color: var(--stein); text-decoration: none; }
.marke img, .marke svg { display: block; height: 24px; width: auto; max-width: 140px; object-fit: contain; object-position: left center; }
.marke-wort { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); white-space: nowrap; }
.marke-werkstatt { padding-left: 14px; border-left: 1px solid var(--rahmen); font-size: 13.5px; white-space: nowrap; }
.kopf-rechts { display: flex; align-items: center; gap: 2px; margin-right: -12px; }

/* Knöpfe: Mint ist immer der nächste Handgriff, davon gibt es einen */
.knopf, .knopf-zweit, .leise, .wahl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.knopf { padding: 14px 26px; background: var(--mint); color: var(--auf-mint); font-size: 16px; letter-spacing: -.005em; }
.knopf .ic { transition: transform .22s var(--ease); }
.knopf:hover { background: var(--mint-hell); }
.knopf:hover .ic:last-child { transform: translateX(3px); }
.knopf:active, .wahl:active, .knopf-zweit:active { transform: scale(.98); }
.knopf[aria-busy="true"] { opacity: .6; cursor: progress; }
.knopf:disabled { background: var(--flaeche-tief); color: var(--stein); cursor: not-allowed; }
.knopf-zweit { padding: 13px 22px; background: transparent; color: var(--tinte); font-size: 15px; box-shadow: inset 0 0 0 1px var(--stahl); }
.knopf-zweit:hover { box-shadow: inset 0 0 0 1px var(--tinte); }
.leise { padding: 8px 12px; background: transparent; color: var(--stein); font-size: 14px; }
.leise:hover { background: var(--flaeche); color: var(--tinte); }
.wahl { padding: 13px 22px; background: transparent; color: var(--tinte); font-size: 15px; box-shadow: inset 0 0 0 1px var(--stahl); }
.wahl:hover { background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--tinte); }
.wahl[aria-pressed="true"] { background: var(--tinte); color: var(--grund); box-shadow: none; }
.breit { width: 100%; }

/* Seite */
main { outline: 0; }
.seite { max-width: 1560px; margin: 0 auto; padding: 0 var(--rand) 88px; }
.seite.mittel { max-width: 1180px; }
.seite.eintritt { animation: auftritt .32s var(--ease) both; }
@keyframes auftritt { from { opacity: 0; transform: translateY(4px); } }
.display { font-size: 50px; line-height: 1.04; letter-spacing: -.035em; }
.einleitung { margin-top: 10px; max-width: 58ch; font-size: 17px; line-height: 1.4; color: var(--stein); }
.seiten-kopf { padding-top: 40px; }
.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--rahmen); font-size: 13px; color: var(--stein); }

/* Band: Überschrift und die Wand der Produkte */
.band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: end; padding-top: 28px; }
.band-waende { display: flex; gap: 40px; align-items: stretch; }
.wand-block { display: flex; flex-direction: column; width: clamp(340px, 37vw, 500px); }
.band-waende.zwei .wand-block { width: clamp(220px, 22vw, 330px); }
.wand-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-bottom: 10px; font-size: 14px; color: var(--stein); white-space: nowrap; }
.wand-kopf b { font-weight: 600; color: var(--tinte); }
.wand { display: grid; grid-template-columns: repeat(auto-fill, var(--z)); justify-content: space-between; gap: var(--l); }
.z { display: block; width: var(--z); height: var(--z); border-radius: calc(var(--z) * .16); background: var(--rahmen); }
.z.s1 { background: #c3c8cb; }
.z.s2 { background: #8d9599; }
.z.s3 { background: #4d5559; }
.z.s4 { background: var(--tinte); }
.z:hover { outline: 2px solid var(--tinte); outline-offset: 1px; }
.z.neu { animation: fuellen .7s var(--ease) both; animation-delay: calc(var(--n) * 24ms + .25s); }
@keyframes fuellen { from { background: var(--rahmen); transform: scale(.4); } }
.wand-text { min-height: 20px; margin-top: auto; padding-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--stein); }
.nah-link { padding: 0; border: 0; background: none; color: var(--tinte); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--stahl); white-space: nowrap; }
.nah-link:hover { text-decoration-color: currentColor; }

/* Das Maß: eine Skala von 0 bis 100, Mint zeigt, was der Schritt bringt */
.mass { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 4px 24px; align-items: end; margin-top: 18px; view-transition-name: mass; }
.mass.zwei { grid-template-columns: 148px minmax(0, 1fr); gap: 2px 24px; align-items: center; }
.mass-zeile { display: contents; }
.mass-lesung { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.mass-lesung b { font-size: 64px; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.mass.zwei .mass-lesung b { font-size: 28px; line-height: 1.1; letter-spacing: -.03em; }
.mass-shop { min-width: 34px; font-size: 14px; font-weight: 500; color: var(--stein); }
.mass-ziel { font-size: 22px; font-weight: 500; letter-spacing: -.02em; color: var(--mint-tief); }
.mass.zwei .mass-ziel { font-size: 16px; }
.mass-ziel:not(:empty)::before { content: "auf "; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--stein); }
.mass-bahn { position: relative; height: 12px; margin-bottom: 12px; }
.mass.zwei .mass-bahn { height: 8px; margin-bottom: 0; }
.mass-balken { position: absolute; inset: 0 auto 0 0; width: calc(var(--wert) * 1%); background: var(--tinte); }
.mass-balken { transform-origin: left center; }
.mass-balken.neu { animation: strecken 1s var(--ease) both; }
@keyframes strecken { from { transform: scaleX(var(--von)); } }
.mass-vorschau { position: absolute; inset: 0 auto 0 calc(var(--wert) * 1%); width: 100%; background: var(--mint); transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ease); }
.mass-vorher { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--grund); box-shadow: 0 0 0 1px var(--stein); }
.mass-legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13.5px; color: var(--stein); align-self: start; }
.mass-legende .delta { font-weight: 500; color: var(--tinte); }
.mass-skala { position: relative; height: 30px; }
.mass-striche { display: block; width: 100%; height: 10px; overflow: visible; }
.mass-striche path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.mass-striche .kurz { stroke: var(--strich); }
.mass-striche .lang { stroke: var(--stein); }
.mass-zahlen span { position: absolute; top: 13px; transform: translateX(-50%); font-size: 12px; line-height: 1; color: var(--marke-grau); }

/* Raster: links der Weg, rechts die Leiste */
.raster { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 64px; align-items: start; margin-top: 16px; }
.weg-spalte { min-width: 0; container: weg / inline-size; }
.weg { margin: 0; padding: 0; list-style: none; }
.station { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 20px; }
.station::before { content: ""; position: absolute; left: 11.5px; top: 0; bottom: 0; width: 1px; background: var(--rahmen); }
.station.fertig::before { background: var(--tinte); }
.station:first-child::before { top: 24px; }
.station:last-child::before { bottom: calc(100% - 24px); }
.knoten { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 48px; }
.knoten::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--grund); box-shadow: inset 0 0 0 1.5px var(--stahl); }
.station.fertig .knoten::after { display: none; }
.station.fertig .knoten .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--tinte); color: var(--grund); stroke-width: 2.4; }
.station.jetzt .knoten { height: 72px; }
.station.jetzt .knoten::after { width: 16px; height: 16px; background: var(--tinte); box-shadow: 0 0 0 4px var(--grund), 0 0 0 5px var(--tinte); }
.reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 16px; min-height: 48px; padding: 6px 0; }
.reihe .knopf-zweit { padding: 7px 14px; font-size: 14px; }
.reihe-titel { font-size: 17px; font-weight: 500; letter-spacing: -.012em; }
.reihe-meta { font-size: 14px; color: var(--stein); }
.reihe-text { flex: 1 1 100%; font-size: 14.5px; color: var(--stein); }
details.erledigt-liste { margin-bottom: 6px; }
details.erledigt-liste > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; }
details.erledigt-liste > summary::-webkit-details-marker { display: none; }
details.erledigt-liste > summary .ic { color: var(--stein); transition: transform .2s var(--ease); }
details.erledigt-liste[open] > summary .ic { transform: rotate(90deg); }
.erledigt-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 10px 0; border-top: 1px solid var(--rahmen); font-size: 15px; }
.erledigt-zeile span { color: var(--stein); font-size: 14px; }
.erledigt-zeile p { grid-column: 1 / -1; font-size: 14px; color: var(--stein); max-width: 80ch; }

/* Die Werkbank */
.werkbank { --tinte: #ffffff; --stein: rgba(255, 255, 255, .64); --rahmen: rgba(255, 255, 255, .14); --stahl: rgba(255, 255, 255, .36); --flaeche: rgba(255, 255, 255, .08); --flaeche-tief: rgba(255, 255, 255, .14); --achtung: #ffb765; --mint-tief: #5ae4d6; --grund: var(--schwarz);
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "takt takt" "kopf rechts" "tun rechts"; column-gap: 56px;
  margin: 4px 0 18px; padding: 24px 36px 34px; border-radius: 20px; background: var(--schwarz); color: var(--tinte); box-shadow: 0 2px 4px rgba(14, 18, 20, .12), 0 30px 60px -32px rgba(14, 18, 20, .5); view-transition-name: werkbank; }
.werkbank.ohne { grid-template-columns: minmax(0, 1fr); grid-template-areas: "takt" "kopf" "tun"; }
.werkbank.breit { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "takt" "kopf" "tun" "rechts"; }
.werkbank.breit .bank-rechts { margin-top: 26px; }
.bank-kopf { grid-area: kopf; min-width: 0; }
.bank-tun { grid-area: tun; min-width: 0; }
.bank-rechts { grid-area: rechts; min-width: 0; }
.bank-rechts > p:not([class]) { max-width: 58ch; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.werkbank:focus-visible { outline: 2px solid var(--mint); }
.werkbank :focus-visible { outline-color: var(--mint); }
.takt { grid-area: takt; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; margin: 0 0 26px; padding: 0; list-style: none; }
.takt li { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 2px solid rgba(255, 255, 255, .16); font-size: 13.5px; color: rgba(255, 255, 255, .52); transition: border-color .3s var(--ease); }
.takt .erledigt { border-color: rgba(255, 255, 255, .72); color: rgba(255, 255, 255, .72); }
.takt .aktuell { border-color: var(--mint); color: #fff; font-weight: 500; }
.werkbank h2 { font-size: 36px; line-height: 1.08; letter-spacing: -.03em; }
.werkbank-unter { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 10px; font-size: 14px; color: var(--stein); }
.warum-knopf { margin-left: -10px; padding: 4px 10px; color: var(--stein); }
.warum-knopf[aria-expanded="true"] { color: var(--tinte); }
.warum-text { margin-top: 10px; max-width: 66ch; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.warum-text p + p { margin-top: 8px; }
.gewinn { display: flex; flex-wrap: wrap; gap: 8px 36px; margin-top: 20px; }
.gewinn b { display: block; font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; color: var(--mint); }
.gewinn span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.3; color: var(--stein); white-space: nowrap; }
.achtung { display: flex; gap: 10px; max-width: 66ch; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--achtung); }
.achtung .ic { margin-top: 1px; }
.tun { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; }
.datei-info { margin-top: 12px; font-size: 13.5px; color: var(--stein); overflow-wrap: anywhere; }
.anleitung { margin: 16px 0 0; padding-left: 22px; max-width: 66ch; font-size: 15.5px; }
.anleitung li { margin-top: 5px; }
.anleitung li::marker { color: var(--stein); }
.abruf { margin-top: 14px; }
.abruf > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 14px; color: var(--stein); border-radius: 6px; }
.abruf > summary::-webkit-details-marker { display: none; }
.abruf > summary:hover { color: var(--tinte); }
.abruf > summary .ic { transition: transform .2s var(--ease); }
.abruf[open] > summary .ic { transform: rotate(90deg); }
.abruf-text { margin-top: 8px; max-width: 64ch; font-size: 15px; }
.balken { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; max-width: 860px; }
.balken li { display: grid; grid-template-columns: minmax(0, 1fr) 84px 30px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rahmen); font-size: 14.5px; line-height: 1.3; }
.balken li:first-child { border-top: 0; }
.balken i { display: block; height: 6px; min-width: 2px; background: var(--tinte); }
.balken b { font-weight: 500; text-align: right; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabelle th { padding: 6px 16px 8px 0; font-size: 13px; font-weight: 400; color: var(--stein); text-align: left; white-space: nowrap; }
.tabelle td { padding: 8px 16px 8px 0; border-top: 1px solid var(--rahmen); vertical-align: top; overflow-wrap: anywhere; }
.tabelle .zahl { text-align: right; white-space: nowrap; }
.tabelle .zahl:last-child { padding-right: 0; }
.pruef { margin: 16px 0 0; padding: 0; list-style: none; }
.pruef li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--rahmen); font-size: 15.5px; }
.pruef li:first-child { border-top: 0; }
.pruef li > span:first-child { flex: 1; min-width: 0; }
.pruef small { display: block; margin-top: 2px; font-size: 13px; color: var(--stein); overflow-wrap: anywhere; }
.wort { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--stein); white-space: nowrap; }
.wort::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.wort.ok { color: var(--tinte); }
.wort.hand, .wort.nein { color: var(--achtung); }
.klein-leise { padding: 4px 10px; }
.abruf.klein { margin-top: 2px; }
.abruf.klein > summary { font-size: 13px; }
.abruf.klein small { margin-top: 4px; }
.ergebnis { margin-top: 14px; font-weight: 500; }
.wahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.frage { margin-top: 18px; font-size: 19px; line-height: 1.3; letter-spacing: -.012em; }
.warnung { max-width: 74ch; margin-top: 14px; color: var(--achtung); font-size: 15px; }
.neu-anfangen input { flex: 1 1 240px; padding: 10px 14px; border: 1px solid var(--stahl); border-radius: 10px; background: transparent; color: var(--tinte); font: inherit; font-size: 14px; }
.neu-anfangen input::placeholder { color: var(--stein); }

/* Spätere Schritte: gleiche Spalten, damit man nicht lesen muss. Titel, wie es entsteht, was herauskommt, was es bringt. */
.inhalt-zeile { min-width: 0; }
.station.spaeter + .station.spaeter .zeile, .station.spaeter + .station.ziel .zeile, .ohne-liste li + li .zeile { border-top: 1px solid var(--rahmen); }
.zeile { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 132px 72px 20px; gap: 16px; align-items: center; width: 100%; min-height: 56px; padding: 8px 0; border: 0; background: none; text-align: left; transition: background-color .15s var(--ease); }
.zeile-titel { font-size: 16.5px; font-weight: 500; letter-spacing: -.012em; }
.zeile-ausgabe, .zeile-grund { font-size: 14px; line-height: 1.3; color: var(--stein); }
.zeile-ausgabe { white-space: nowrap; }
.zeile-bringt { font-size: 15px; font-weight: 500; color: var(--stein); text-align: right; white-space: nowrap; }
.zeile-bringt small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; }
.zeile .ic { color: var(--pfeil); transition: transform .2s var(--ease), color .15s var(--ease); }
.zeile:hover .ic { color: var(--tinte); }
.zeile:hover .zeile-bringt { color: var(--mint-tief); }
.zeile[aria-expanded="true"] .ic { transform: rotate(90deg); color: var(--tinte); }
.zeile-mehr { display: grid; gap: 8px; max-width: 72ch; padding: 0 0 18px; font-size: 15px; }
.zeile-mehr .bringt { font-weight: 500; }
.zeile-mehr .leise { justify-self: start; margin-left: -12px; color: var(--tinte); }
/* Das Ende des Wegs: was am Schluss herauskommt */
.station.ziel .knoten::after { width: 11px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--tinte); }
.station.ziel.da .knoten::after { background: var(--tinte); }
.station.ziel .zeile-grund { color: var(--tinte); }
/* Was noch keine Datei hat, liegt ruhig darunter */
.ohne-datei { margin-top: 28px; }
.mehr { display: inline-flex; align-items: center; gap: 6px; margin-left: 44px; padding: 0; border: 0; background: none; color: var(--stein); font-size: 14px; }
.mehr .ic { transition: transform .2s var(--ease); }
.mehr[aria-expanded="true"] .ic { transform: rotate(90deg); }
.mehr:hover { color: var(--tinte); }
.ohne-liste { margin: 6px 0 0 44px; padding: 0; list-style: none; }
@container weg (max-width: 760px) {
  .zeile { grid-template-columns: minmax(0, 1fr) 132px 72px 20px; }
  .zeile-grund { display: none; }
  .werkbank { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "takt" "kopf" "rechts" "tun"; }
  .bank-rechts { margin-top: 22px; }
  .werkbank h2 { font-size: 30px; }
}

/* Leiste */
.leiste { position: sticky; top: 84px; display: grid; gap: 22px; padding-top: 6px; }
.leiste-liste { display: grid; }
.leiste-zeile { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 8px 0; border: 0; border-top: 1px solid var(--rahmen); background: none; color: var(--tinte); font-size: 15px; text-align: left; text-decoration: none; }
.leiste-zeile:last-child { border-bottom: 1px solid var(--rahmen); }
.leiste-zeile > span:first-child { flex: 1; }
.leiste-zeile small { font-size: 14px; color: var(--stein); white-space: nowrap; }
.leiste-zeile .ic { color: var(--pfeil); transition: transform .2s var(--ease), color .15s var(--ease); }
.leiste-zeile:hover .ic { color: var(--tinte); transform: translateX(2px); }
.schutz { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.45; color: var(--stein); }
.schutz .ic { color: var(--stein); }

/* Blatt: alles auf Abruf */
.blatt { width: min(600px, calc(100vw - 32px)); max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; background: #fff; color: var(--tinte); box-shadow: -24px 0 60px -30px rgba(14, 18, 20, .35); }
.blatt[open] { animation: blatt-auf .28s var(--ease) both; }
.blatt::backdrop { background: rgba(14, 18, 20, .28); }
@keyframes blatt-auf { from { opacity: 0; transform: translateX(28px); } }
.blatt-kopf { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 32px 14px; background: #fff; }
.blatt-kopf h2 { font-size: 26px; line-height: 1.1; letter-spacing: -.025em; }
.blatt-inhalt { padding: 0 32px 40px; }
.blatt-inhalt > p { max-width: 62ch; color: var(--stein); }
.blatt-inhalt > .fest-liste { margin-top: 14px; }
.blatt-liste { margin: 14px 0 0; padding: 0; list-style: none; }
.blatt-liste li { padding: 10px 0; border-top: 1px solid var(--rahmen); font-size: 15px; }
.fest-liste div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--rahmen); font-size: 14.5px; }
.fest-liste b { font-weight: 500; overflow-wrap: anywhere; }
.fest-liste span, .blatt-liste small { color: var(--stein); }
.blatt-liste small { display: block; margin-top: 2px; font-size: 13.5px; }
.laden-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 16px 0; border-top: 1px solid var(--rahmen); }
.laden-zeile b { font-weight: 500; }
.laden-zeile small { display: block; font-size: 14px; color: var(--stein); }

/* Alarm: das Einzige, was laut ist */
.alarm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; padding: 14px 18px; border-radius: 12px; background: var(--achtung-flaeche); color: var(--achtung); font-size: 15px; }
.alarm b { font-weight: 600; }
.alarm .leise { margin-left: auto; color: var(--achtung); box-shadow: inset 0 0 0 1px currentColor; }

/* Warten auf Daten */
.skelett { padding-top: 40px; }
.skelett i { display: block; border-radius: 6px; background: var(--flaeche); }
.skelett .s-titel { width: 38%; height: 56px; }
.skelett .s-satz { width: 26%; height: 18px; margin-top: 16px; }
.skelett .s-mass { height: 20px; margin-top: 44px; }
.skelett .s-bank { height: 320px; margin-top: 40px; max-width: 1160px; border-radius: 20px; }

/* Übersicht */
.werkbank.vorne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: none; gap: 24px 56px; align-items: end; margin: 28px 0 8px; padding: 28px 36px 32px; color: var(--tinte); text-decoration: none; transition: transform .22s var(--ease); }
.werkbank.vorne:hover { transform: translateY(-1px); }
.vorne .w-logo { margin-bottom: 22px; }
.vorne p { margin-top: 10px; color: var(--stein); }
.vorne-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.vorne-rechts .mini { width: 220px; }
.w-logo { display: flex; align-items: center; height: 28px; }
.w-logo img { display: block; height: 24px; width: auto; max-width: 128px; object-fit: contain; object-position: left center; }
.w-wort { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--tinte); white-space: nowrap; }
.liste { margin: 0; padding: 0; list-style: none; }
.w-zeile { display: grid; grid-template-columns: 148px minmax(0, 1fr) 132px 240px 20px; gap: 8px 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--rahmen); color: inherit; text-decoration: none; }
.liste li:first-child .w-zeile { border-top: 0; }
.w-titel { display: block; font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }
.w-satz { display: block; margin-top: 2px; font-size: 14px; color: var(--stein); }
.w-ausgabe { font-size: 14px; color: var(--stein); white-space: nowrap; }
.w-stand { display: grid; gap: 6px; }
.w-stand small { font-size: 14px; color: var(--stein); }
.pfeil { color: var(--pfeil); transition: transform .2s var(--ease), color .15s var(--ease); }
a.w-zeile:hover .pfeil { transform: translateX(3px); color: var(--tinte); }
a.w-zeile:hover .w-titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mini { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; font-variant-numeric: tabular-nums; }
.mini.mit-name { grid-template-columns: 28px 30px minmax(0, 1fr); }
.mini small { min-width: 28px; font-size: 13px; color: var(--stein); }
.mini b { font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.mini-bahn { position: relative; display: block; height: 6px; background: linear-gradient(var(--stahl), var(--stahl)) 0 100% / 100% 1px no-repeat; }
.mini-bahn i { position: absolute; inset: 0 auto 0 0; background: var(--tinte); }
.untertitel { margin-top: 48px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--stein); }
.ruhig { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 40px; margin-top: 6px; }
.ruhig li { padding: 12px 0; border-top: 1px solid var(--rahmen); font-size: 14.5px; }
.ruhig b { display: block; font-weight: 500; }
.ruhig span { color: var(--stein); }

/* Tafel */
.tafel-rahmen { margin-top: 28px; overflow-x: auto; }
.tafel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tafel th { padding: 8px 14px 10px 0; font-size: 13px; font-weight: 400; color: var(--stein); text-align: left; white-space: nowrap; vertical-align: bottom; }
.tafel td { padding: 14px 14px 14px 0; border-top: 1px solid var(--rahmen); vertical-align: middle; }
.tafel .zahl { text-align: right; padding-right: 20px; white-space: nowrap; }
.tafel a { color: inherit; text-decoration: none; }
.tafel a:hover .tafel-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tafel-name { display: block; font-size: 16px; font-weight: 500; }
.tafel small { display: block; margin-top: 1px; font-size: 13px; color: var(--stein); }
.tafel .mini { width: 170px; }
.tafel .bremst { min-width: 260px; font-size: 14px; }
.matrix td, .matrix th { padding: 7px 14px 7px 0; }
.matrix .seitenname td { padding-top: 16px; font-weight: 500; color: var(--stein); border-top: 0; }
.haube { margin-top: 40px; }
.haube-zeile { padding: 14px 0; border-top: 1px solid var(--rahmen); }
.haube-zeile:last-child { border-bottom: 1px solid var(--rahmen); }
.haube-zeile > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 500; }
.haube-zeile > summary::-webkit-details-marker { display: none; }
.haube-zeile small { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--stein); }
.haube-zeile .ic { color: var(--stein); transition: transform .2s var(--ease); }
.haube-zeile[open] > summary .ic { transform: rotate(90deg); }
.haube-zeile ul { margin: 10px 0 2px; padding-left: 18px; max-width: 80ch; font-size: 15px; }
.haube-zeile li { margin-top: 4px; }
.haube-zeile p { margin-top: 8px; max-width: 80ch; font-size: 15px; }
.haube-zeile b { font-weight: 500; }

/* Regelbuch und Funde */
.zurueck { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 22px; font-size: 14px; color: var(--stein); text-decoration: none; }
.zurueck:hover { color: var(--tinte); }
.neu-regel { margin-top: 24px; padding: 24px 0; border-block: 1px solid var(--rahmen); }
.satzbau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 19px; letter-spacing: -.012em; }
.satzbau select { max-width: 100%; padding: 8px 32px 8px 14px; border: 1px solid var(--stahl); border-radius: 10px; background: #fff; color: var(--tinte); font: 500 15px var(--schrift); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--stein) 50%), linear-gradient(135deg, var(--stein) 50%, transparent 50%); background-position: calc(100% - 17px) 54%, calc(100% - 12px) 54%; background-size: 5px 5px; background-repeat: no-repeat; }
.lauf { margin-top: 14px; font-size: 15px; }
.lauf strong { font-weight: 600; }
.lauf p + p { margin-top: 2px; color: var(--stein); }
.neu-regel label { display: block; margin-top: 18px; font-size: 14px; font-weight: 500; }
.neu-regel input { display: block; width: 100%; max-width: 620px; margin-top: 6px; padding: 11px 14px; border: 1px solid var(--stahl); border-radius: 10px; background: #fff; color: var(--tinte); font: inherit; }
.neu-regel input::placeholder { color: var(--marke-grau); }
.neu-regel .wahlen { margin-top: 8px; }
.vorschlag { padding: 16px 0; border-top: 1px solid var(--rahmen); }
.vorschlag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.vorschlag strong { font-size: 16px; font-weight: 500; }
.vorschlag small { font-size: 13px; color: var(--stein); white-space: nowrap; }
.vorschlag p { max-width: 72ch; margin-top: 3px; font-size: 14.5px; }
.vorschlag .tun { margin-top: 10px; }
.vorschlag .urteil { display: block; margin-top: 6px; }
.regeln-gilt { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 0 48px; margin-top: 8px; }
.regel-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 18px; padding: 11px 0; border-top: 1px solid var(--rahmen); font-size: 14.5px; }
.regel-zeile small { font-size: 13px; color: var(--stein); overflow-wrap: anywhere; }
.regel-zeile span { font-size: 13.5px; color: var(--stein); white-space: nowrap; }
.regel-zeile span.offen { font-weight: 500; color: var(--tinte); }
.regel-liste { margin-top: 28px; }
.regel { padding: 13px 0; border-top: 1px solid var(--rahmen); }
.regel > summary { display: grid; grid-template-columns: 20px minmax(0, 1fr) 180px 72px; gap: 12px; align-items: center; cursor: pointer; list-style: none; font-size: 15.5px; }
.regel > summary::-webkit-details-marker { display: none; }
.regel-balken { display: block; height: 6px; background: var(--tinte); justify-self: start; min-width: 2px; }
.regel > summary .z-zahl { font-size: 14px; color: var(--stein); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.regel .ic { color: var(--stein); transition: transform .2s var(--ease); }
.regel[open] > summary .ic { transform: rotate(90deg); }
.regel ul { margin: 10px 0 2px 32px; padding: 0; list-style: none; font-size: 14px; }
.regel li { padding: 6px 0; border-top: 1px solid var(--rahmen); overflow-wrap: anywhere; }
.regel li span { color: var(--stein); }
.laden-liste { margin-top: 28px; max-width: 760px; }

/* Meldung */
.meldung { position: fixed; top: 68px; left: 50%; z-index: 60; max-width: calc(100vw - 32px); padding: 10px 20px; border-radius: 999px; background: var(--schwarz); color: #fff; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(14, 18, 20, .5); transform: translateX(-50%); }
.versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Anmelden */
.anmeldung { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; }
.anm-karte { width: 100%; max-width: 380px; }
.anm-logo { display: block; height: 26px; width: auto; margin-bottom: 40px; }
.anm-karte h1 { font-size: 36px; line-height: 1.06; letter-spacing: -.03em; }
.anm-satz { margin-top: 8px; color: var(--stein); }
.anm-feld { margin-top: 20px; }
.anm-feld label { display: block; font-size: 14px; font-weight: 500; }
.anm-feld input { display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border: 1px solid var(--stahl); border-radius: 10px; background: #fff; color: var(--tinte); font: inherit; transition: border-color .15s var(--ease); }
.anm-feld input:hover { border-color: var(--stein); }
.anm-feld small { display: block; margin-top: 4px; font-size: 13px; color: var(--stein); }
.anm-karte .knopf { width: 100%; margin-top: 24px; }
.anm-fehler { margin-top: 14px; font-size: 14px; color: var(--achtung); }

/* Übergänge zwischen zwei Zuständen */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
::view-transition-group(werkbank), ::view-transition-group(mass) { animation-duration: .32s; animation-timing-function: var(--ease); }

/* Großes iPad hochkant: Die Leiste rückt unter den Weg */
@media (max-width: 1180px) {
  .raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .leiste { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 48px; }
  .leiste-liste { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .leiste-zeile:last-child { border-bottom: 0; }
  .display { font-size: 48px; }
  .w-zeile { grid-template-columns: 148px minmax(0, 1fr) 132px 180px 20px; gap: 8px 18px; }
}
@media (max-width: 960px) {
  .band { grid-template-columns: minmax(0, 1fr); }
  .wand-block { width: min(100%, 560px); }
  .band-waende.zwei { width: 100%; }
  .band-waende.zwei .wand-block { width: 50%; }
  .w-zeile { grid-template-columns: 120px minmax(0, 1fr) 170px 20px; }
  .w-ausgabe { display: none; }
}
/* Das Handy ist nicht das Ziel, aber es darf nichts brechen */
@media (max-width: 680px) {
  .display { font-size: 38px; }
  .einleitung { font-size: 16px; }
  .mass, .mass.zwei { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; }
  .mass-lesung b { font-size: 36px; }
  .mass-ziel { display: none; }
  .band-waende.zwei { flex-direction: column; align-items: stretch; }
  .band-waende.zwei .wand-block { width: 100%; }
  .werkbank { padding: 20px 18px 24px; }
  .station { grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; }
  .station::before { left: 8.5px; }
  .knoten { width: 18px; }
  .takt { margin-bottom: 20px; }
  .leiste, .leiste-liste { grid-template-columns: minmax(0, 1fr); }
  .kopf .leise span { display: none; }
  .marke-werkstatt { display: none; }
  .tun .knopf, .tun .knopf-zweit { flex: 1 1 100%; }
  .vorne { grid-template-columns: minmax(0, 1fr); }
  .vorne-rechts { align-items: stretch; }
  .w-zeile { grid-template-columns: minmax(0, 1fr) 20px; }
  .w-zeile .w-text, .w-zeile .w-stand { grid-column: 1; }
  .w-zeile .pfeil { grid-column: 2; grid-row: 1; }
  .regeln-gilt { grid-template-columns: minmax(0, 1fr); }
  .regel > summary { grid-template-columns: 20px minmax(0, 1fr) 64px; }
  .regel-balken { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}