/* Tastesite.de
   Gestaltung: "Der Beweis ist die Seite selbst."
   Hell dominiert, dunkle Abschnitte als Zäsur, ein einziger Akzent.
   Schrift: Systemschrift. Kein Download, damit die Seite hält, was sie verspricht. */

:root {
  --tinte: #0e0f12;
  --tinte-2: #191b20;
  --tinte-3: #24262d;
  --papier: #f2f2f0;
  --papier-2: #e7e7e4;
  --weiss: #ffffff;
  --nebel: #76777d;
  --nebel-hell: #9b9ca3;
  --linie: rgba(14, 15, 18, .12);
  --linie-dunkel: rgba(255, 255, 255, .14);
  --signal: #0f5bd7;
  --signal-tief: #0a44a3;
  --signal-blass: #e8f0fd;
  --glut: #e8541f;
  --gruen: #1f7a4d;

  --rund: 18px;
  --rund-gross: 30px;
  --tempo: cubic-bezier(.2, .7, .3, 1);
  --gasse: 22px;
  --bahn: 1180px;

  /* Größe der Kopfzeile, eine Zeile zum Ändern */
  --marke-hoehe: 31px;
  --navi-groesse: .99rem;
  --kopf-hoehe: 70px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 8.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 5.6vw, 3.6rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); letter-spacing: -.02em; }
p { margin: 0 0 1.05em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.bahn { max-width: var(--bahn); margin: 0 auto; padding-inline: var(--gasse); }
.eng { max-width: 820px; }
.mitte { text-align: center; margin-inline: auto; }
.mitte p { margin-inline: auto; }

/* ===== Abschnitte ===== */
.teil { padding-block: clamp(72px, 12vw, 150px); position: relative; }
.teil.hell { background: var(--weiss); }
.teil.papier { background: var(--papier); }
.teil.dunkel { background: var(--tinte); color: var(--weiss); }
.teil.dunkel h1, .teil.dunkel h2, .teil.dunkel h3 { color: var(--weiss); }
.teil.dunkel .bei { color: var(--nebel-hell); }
.teil.dunkel .marke-zeile { color: var(--nebel-hell); }

.bei { color: var(--nebel); font-size: clamp(1.02rem, 2.1vw, 1.26rem); line-height: 1.5; }

.marke-zeile {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nebel); margin: 0 0 18px;
}
.marke-zeile b { color: var(--signal); font-weight: 600; }
.teil.dunkel .marke-zeile b { color: #6f9dff; }

/* ===== Kopfzeile, durchscheinend wie eine Werkzeugleiste ===== */
.kopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(242, 242, 240, .78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--tempo), background .3s var(--tempo);
}
.kopf.eng-an { border-bottom-color: var(--linie); }
.kopf-innen { display: flex; align-items: center; gap: 18px; height: var(--kopf-hoehe); }
.wort-marke { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.wort-marke img { height: var(--marke-hoehe); width: auto; max-width: none; flex: 0 0 auto; }
.blende-kopf .wort-marke img { height: calc(var(--marke-hoehe) + 3px); }
.navi { margin-left: auto; display: none; }
.navi ul { display: flex; gap: clamp(16px, 2.2vw, 30px); list-style: none; margin: 0; padding: 0; }
.navi a {
  text-decoration: none; font-size: var(--navi-groesse); color: var(--tinte); opacity: .82;
  transition: opacity .2s var(--tempo);
}
.navi a:hover, .navi a[aria-current="page"] { opacity: 1; }
.navi a[aria-current="page"] { font-weight: 600; }
.kopf .knopf-klein { display: none; }

.menue-taste {
  margin-left: auto; background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--tinte);
}

/* Handy-Menü als Blende */
.blende { position: fixed; inset: 0; z-index: 70; background: var(--papier); padding: 18px var(--gasse) 40px; overflow-y: auto; }
.blende[hidden] { display: none; }
.blende-kopf { display: flex; align-items: center; height: var(--kopf-hoehe); }
.blende ol { list-style: none; margin: 30px 0 0; padding: 0; }
.blende li { border-bottom: 1px solid var(--linie); }
.blende li a {
  display: block; padding: 18px 2px; text-decoration: none;
  font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em;
}
.blende .tasten { margin-top: 30px; }

/* ===== Tasten ===== */
.taste {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; min-height: 50px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .5s var(--tempo), background .25s var(--tempo), color .25s var(--tempo), border-color .25s var(--tempo);
  white-space: nowrap;
}
.taste-voll { background: var(--signal); color: #fff; }
.taste-voll:hover { background: var(--signal-tief); }
.taste-rand { border-color: var(--linie); color: var(--tinte); }
.taste-rand:hover { border-color: var(--tinte); }
.teil.dunkel .taste-rand, .blende .taste-rand { border-color: var(--linie-dunkel); color: inherit; }
.teil.dunkel .taste-rand:hover { border-color: #fff; }
.taste-hell { background: #fff; color: var(--tinte); }
.taste-klein { padding: 9px 18px; min-height: 40px; font-size: .84rem; }
.tasten { display: flex; flex-wrap: wrap; gap: 12px; }
.mitte .tasten { justify-content: center; }

/* Textlink mit Winkel, wie bei einem Gerätehersteller */
.weiter {
  display: inline-flex; align-items: center; gap: 5px; color: var(--signal);
  text-decoration: none; font-size: .96rem; font-weight: 500;
}
.weiter:hover { text-decoration: underline; }
.weiter::after { content: "›"; font-size: 1.2em; line-height: 1; transition: transform .3s var(--tempo); }
.weiter:hover::after { transform: translateX(3px); }
.teil.dunkel .weiter { color: #6f9dff; }

/* ===== Aufmacher ===== */
.buehne { padding-block: clamp(46px, 8vw, 96px) 0; background: var(--papier); text-align: center; overflow: hidden; }
.buehne h1 { margin-bottom: 20px; }
.buehne .bei { max-width: 34ch; margin-inline: auto; }
.buehne .tasten { margin-top: 30px; justify-content: center; }
.buehne-bild { margin-top: clamp(40px, 7vw, 76px); }

/* ===== Geräterahmen mit echter Miniaturseite ===== */
.geraet { margin-inline: auto; max-width: 100%; }
.rahmen {
  background: var(--tinte); border-radius: var(--rund-gross); padding: 11px;
  box-shadow: 0 30px 70px -30px rgba(14, 15, 18, .45);
  margin-inline: auto; width: 100%;
}
.rahmen-leiste {
  display: flex; align-items: center; gap: 6px; padding: 3px 4px 9px;
}
.ampel { width: 9px; height: 9px; border-radius: 50%; background: #45474f; }
.rahmen-feld {
  flex: 1; height: 19px; border-radius: 6px; background: #2a2c33; margin-left: 8px;
  display: flex; align-items: center; padding: 0 9px; overflow: hidden;
  font-size: .63rem; color: #9b9ca3; letter-spacing: .02em; white-space: nowrap;
}
.schirm {
  background: #fff; border-radius: 12px; overflow: hidden; position: relative;
  aspect-ratio: 16 / 10; container-type: inline-size;
}
.schirm-innen { position: absolute; inset: 0; overflow: hidden; }

/* Die Miniaturseite im Schirm: echte Bausteine, nur klein.
   Alle Maße in cqw, damit sie in jedem Rahmen wie eine echte Seite aussieht. */
.mini {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff;
  text-align: left; transition: opacity .5s var(--tempo);
}
.mini[aria-hidden="true"] { opacity: 0; pointer-events: none; }
.mini-kopf {
  display: flex; align-items: center; gap: 1.4cqw; padding: 1.7cqw 2.2cqw;
  border-bottom: 1px solid rgba(0, 0, 0, .09); flex: none;
}
.mini-logo { font-size: clamp(.56rem, 1.55cqw, 1.05rem); font-weight: 800; letter-spacing: -.02em; }
.mini-navi { margin-left: auto; display: flex; gap: 1.2cqw; }
.mini-navi span { width: 3.4cqw; height: .7cqw; min-height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .14); }
.mini-knopf {
  padding: .8cqw 1.8cqw; border-radius: 99px; font-size: clamp(.46rem, 1.05cqw, .72rem);
  font-weight: 700; color: #fff; white-space: nowrap;
}
.mini-leib { flex: 1; display: grid; gap: 1.7cqw; padding: 2.4cqw; align-content: start; min-height: 0; overflow: hidden; }
.mini-schlag { font-size: clamp(.8rem, 3.5cqw, 2.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin: 0; }
.mini-text { font-size: clamp(.5rem, 1.2cqw, .82rem); color: #6d6e74; line-height: 1.45; margin: 0; max-width: 46ch; }
.mini-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4cqw; }
.mini-karte { border-radius: 1.2cqw; padding: 1.6cqw; background: rgba(0, 0, 0, .04); }
.mini-karte b { display: block; font-size: clamp(.48rem, 1.15cqw, .78rem); margin-bottom: .5cqw; }
.mini-karte i { display: block; font-size: clamp(.44rem, 1.02cqw, .7rem); font-style: normal; color: #7c7d83; line-height: 1.35; }
.mini-band { height: 9cqw; border-radius: 1.4cqw; }
.mini-fuss {
  flex: none; padding: 1.5cqw 2.2cqw; font-size: clamp(.42rem, .96cqw, .64rem);
  color: #8a8b91; border-top: 1px solid rgba(0, 0, 0, .08);
}

/* Die alte Seite: absichtlich so, wie solche Seiten wirklich aussehen */
.mini-alt { background: #fff; font-family: "Times New Roman", Times, serif; }
.mini-alt .alt-kopf {
  background: #2b3a67; color: #fff; padding: 1.5cqw 2cqw;
  font-size: clamp(.5rem, 1.3cqw, .9rem); font-weight: 700;
}
.mini-alt .alt-leiste {
  background: #dcdce2; padding: .9cqw 2cqw; font-size: clamp(.42rem, .95cqw, .62rem);
  color: #333; border-bottom: 1px solid #b9b9c2;
}
.mini-alt .alt-leib { display: grid; grid-template-columns: 16cqw minmax(0, 1fr); gap: 2cqw; padding: 2cqw; }
.mini-alt .alt-seite { background: #ececed; padding: 1.4cqw; align-self: start; }
.mini-alt .alt-seite span {
  display: block; font-size: clamp(.4rem, .92cqw, .6rem); color: #2b3a67;
  padding: .6cqw 0; border-bottom: 1px solid #d5d5da;
}
.mini-alt .alt-text { font-size: clamp(.44rem, .98cqw, .66rem); color: #333; line-height: 1.5; }
.mini-alt .alt-text b { display: block; font-size: clamp(.52rem, 1.2cqw, .8rem); margin-bottom: .8cqw; color: #2b3a67; }

/* ===== Vorher und Nachher als Umschalter ueber einem Rahmen ===== */
.wechsel-tasten {
  display: inline-flex; padding: 4px; border-radius: 999px; background: var(--papier-2);
  margin-bottom: 18px; gap: 3px;
}
.teil.hell .wechsel-tasten { background: var(--papier); }
.wechsel-tasten button {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  padding: 9px 22px; border-radius: 999px; font-size: .88rem; font-weight: 600;
  color: var(--nebel); transition: background .25s var(--tempo), color .25s var(--tempo);
}
.wechsel-tasten button[aria-pressed="true"] {
  background: var(--weiss); color: var(--tinte);
  box-shadow: 0 1px 4px rgba(14, 15, 18, .12);
}
.wechsel-tasten button:hover[aria-pressed="false"] { color: var(--tinte); }

/* ===== Klebeszene: Rahmen bleibt stehen, Aussagen ziehen vorbei ===== */
.szene { position: relative; }
.szene-halt { position: sticky; top: calc(var(--kopf-hoehe) + 20px); }
.szene-schritte { display: grid; gap: clamp(40px, 22vh, 150px); padding-block: clamp(30px, 9vh, 90px); }
.szene-schritt { transition: opacity .5s var(--tempo); }
.szene-schritt h3 { margin-bottom: 10px; font-size: clamp(1.3rem, 3.4vw, 2.1rem); letter-spacing: -.03em; }
.szene-schritt .nr {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  color: var(--signal); margin-bottom: 9px;
}
.js .szene-schritt { opacity: .32; }
.js .szene-schritt.jetzt { opacity: 1; }

/* ===== Breitenregler: der Besucher zieht die Seite schmal ===== */
.probe { background: var(--papier-2); border-radius: var(--rund-gross); padding: clamp(16px, 3vw, 30px); }
.probe-kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.probe-mass {
  font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinte);
  background: #fff; padding: 5px 12px; border-radius: 99px;
}
.probe-wort { font-size: .82rem; color: var(--nebel); }
.probe-buehne { display: flex; justify-content: center; }
.probe-halter { width: 100%; max-width: 100%; transition: width .05s linear; container-type: inline-size; }
.probe-halter .rahmen { border-radius: 20px; padding: 8px; }
.probe-regler { width: 100%; margin-top: 16px; }
input[type="range"] { width: 100%; accent-color: var(--signal); height: 34px; }

/* Die Miniaturseite reagiert auf ihre eigene Breite, nicht auf das Fenster */
@container (max-width: 430px) {
  .mini-reihe { grid-template-columns: minmax(0, 1fr); gap: 2.4cqw; }
  .mini-navi { display: none; }
  .mini-schlag { font-size: 6.2cqw; }
  .mini-text { font-size: 3.1cqw; }
  .mini-karte b { font-size: 3.2cqw; }
  .mini-karte i { font-size: 2.9cqw; }
  .mini-logo { font-size: 3.8cqw; }
  .mini-knopf { font-size: 2.9cqw; padding: 1.6cqw 3.2cqw; }
  .mini-fuss { font-size: 2.5cqw; }
  .mini-band { height: 16cqw; }
  .mini-alt .alt-leib { grid-template-columns: minmax(0, 1fr); }
}

/* Schmaler Bildschirm: der Rahmen wird hochkant, wie ein Handy */
@media (max-width: 700px) {
  .schirm { aspect-ratio: 3 / 4; }
  .rahmen { border-radius: 24px; padding: 8px; }
}

/* ===== Messung: die Seite misst sich selbst ===== */
.messung { display: grid; gap: 14px; }
.mess-zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.mess-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .88rem; }
.mess-kopf b { font-weight: 600; }
.mess-wert { font-variant-numeric: tabular-nums; font-weight: 700; }
.mess-schiene { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.teil.hell .mess-schiene, .teil.papier .mess-schiene { background: var(--papier-2); }
.mess-balken { height: 100%; border-radius: 99px; width: 0; transition: width 1.4s var(--tempo); }
.mess-balken.gut { background: var(--gruen); }
.mess-balken.mittel { background: var(--signal); }
.mess-balken.schlecht { background: var(--glut); }
.mess-fuss { font-size: .8rem; color: var(--nebel); margin-top: 6px; }
.mess-skala {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--nebel);
  font-variant-numeric: tabular-nums;
}
.teil.dunkel .mess-skala { color: var(--nebel-hell); }

.gross-zahl {
  font-size: clamp(3.4rem, 13vw, 8rem); font-weight: 700; letter-spacing: -.055em; line-height: .92;
  font-variant-numeric: tabular-nums;
}
.gross-zahl small { font-size: .26em; font-weight: 600; letter-spacing: -.01em; margin-left: .22em; }

/* ===== Bento: Kacheln unterschiedlicher Größe ===== */
.bento { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.kachel {
  background: var(--weiss); border-radius: var(--rund-gross); padding: clamp(22px, 3.4vw, 38px);
  display: flex; flex-direction: column; gap: 10px; min-height: 0;
}
.teil.hell .kachel { background: var(--papier); }
.teil.dunkel .kachel { background: var(--tinte-2); }
.kachel h3 { letter-spacing: -.025em; }
.kachel p { color: var(--nebel); font-size: .98rem; margin: 0; }
.teil.dunkel .kachel p { color: var(--nebel-hell); }
.kachel .weiter { margin-top: auto; padding-top: 12px; }
.kachel-zeichen { color: var(--signal); }
.teil.dunkel .kachel-zeichen { color: #6f9dff; }

/* ===== Liste mit Haken ===== */
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.haken li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.haken li::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.haken.rot li::before {
  background: var(--glut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.haken b { font-weight: 600; }
.haken span { color: var(--nebel); }
.teil.dunkel .haken span { color: var(--nebel-hell); }

/* ===== Ablauf als Zeitachse ===== */
.achse { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.achse li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 20px; padding-bottom: 34px; position: relative; }
.achse li:last-child { padding-bottom: 0; }
.achse li::before {
  content: ""; grid-row: 1 / 99; width: 30px; height: 30px; border-radius: 50%;
  background: var(--signal); color: #fff; z-index: 1;
}
.achse li::after {
  content: ""; position: absolute; left: 14px; top: 30px; bottom: -4px; width: 2px; background: var(--linie);
}
.achse li:last-child::after { display: none; }
.teil.dunkel .achse li::after { background: var(--linie-dunkel); }
.achse .zahl {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; color: #fff;
}
.achse h3 { margin-bottom: 6px; }
.achse p { color: var(--nebel); margin: 0; }
.teil.dunkel .achse p { color: var(--nebel-hell); }
.achse .dauer {
  display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--signal);
}
.teil.dunkel .achse .dauer { color: #6f9dff; }

/* ===== Preis ===== */
.preis-tafel {
  background: var(--weiss); border-radius: var(--rund-gross); padding: clamp(26px, 4vw, 46px);
  display: grid; gap: 22px;
}
.teil.dunkel .preis-tafel { background: var(--tinte-2); }
.preis-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; }
.preis-von { font-size: .84rem; color: var(--nebel); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.preis-wert { font-size: clamp(2.4rem, 7vw, 4rem); font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.preis-dazu {
  border-top: 1px solid var(--linie); padding-top: 20px; display: flex; flex-wrap: wrap;
  gap: 10px 22px; align-items: baseline;
}
.teil.dunkel .preis-dazu { border-color: var(--linie-dunkel); }
.preis-dazu strong { font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }

/* ===== Prüfhinweis für Hadi ===== */
.pruefen {
  background: #fff4e5; border: 1px solid #f0c98a; border-radius: 14px;
  padding: 15px 18px; font-size: .92rem; color: #6b4708; margin-block: 18px;
}
.pruefen b { color: #4a3105; }
.teil.dunkel .pruefen { background: #2e2314; border-color: #6b4708; color: #f0c98a; }

/* ===== Fuß ===== */
.fuss { background: var(--papier); border-top: 1px solid var(--linie); padding-block: 54px 34px; font-size: .88rem; color: var(--nebel); }
.fuss-gitter { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); margin-bottom: 34px; }
.fuss h2 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte); margin-bottom: 14px; font-weight: 600; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fuss a { color: var(--nebel); text-decoration: none; }
.fuss a:hover { color: var(--tinte); }
.fuss-ende { border-top: 1px solid var(--linie); padding-top: 22px; display: grid; gap: 8px; font-size: .82rem; }

/* ===== Textseiten ===== */
.textseite { max-width: 74ch; }
.textseite h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 38px 0 12px; }
.textseite h3 { font-size: 1.05rem; margin: 22px 0 8px; }
.textseite p, .textseite li { color: var(--tinte); }
.textseite ul { padding-left: 20px; }
.textseite li { margin-bottom: 7px; }
.textseite dl { display: grid; gap: 8px; margin: 0 0 20px; }
.textseite dl > div { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.textseite dt { font-weight: 600; min-width: 150px; }
.textseite dd { margin: 0; min-width: 0; }

/* ===== Einblenden: aus der Unschärfe ===== */
.js .auf { opacity: 0; transform: translateY(26px); filter: blur(9px); }
.js .auf.da {
  opacity: 1; transform: none; filter: none;
  transition: opacity .9s var(--tempo), transform .9s var(--tempo), filter .9s var(--tempo);
  transition-delay: calc(var(--v, 0) * 90ms);
}

/* ===== Schlagzeilen steigen zeilenweise aus der Maske =====
   Die Maske bekommt oben Luft, sonst schneidet sie Umlautpunkte ab. */
.js .zeilen-auf { opacity: 1 !important; transform: none !important; filter: none !important; }
.js .zeile { display: block; overflow: hidden; padding-top: .12em; margin-top: -.12em; }
.js .zeile > i { display: block; font-style: inherit; transform: translateY(106%); }
.js .da .zeile > i {
  transform: none; transition: transform .95s var(--tempo);
  transition-delay: calc(var(--z, 0) * 85ms);
}

/* ===== Strich neben der Kennzeile zieht sich auf ===== */
.marke-zeile::after {
  content: ""; display: inline-block; width: 46px; height: 1px; background: currentColor;
  margin-left: 14px; vertical-align: middle; opacity: .45;
}
.js .marke-zeile::after { width: 0; }
.js .marke-zeile.da::after, .js .da .marke-zeile::after {
  width: 46px; transition: width .9s var(--tempo) .25s;
}

/* ===== Wörter hellen beim Scrollen auf ===== */
.worte > i { font-style: inherit; }
.js .worte > i { opacity: .35; transition: opacity .35s linear; }
.js .worte > i.hell { opacity: 1; }

/* ===== Lesefortschritt in der Kopfzeile ===== */
.kopf-fortschritt {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--signal); transition: width .1s linear; pointer-events: none;
}

/* ===== Zeitachse füllt sich beim Scrollen ===== */
.js .achse li::after { background: var(--linie); }
.js .achse li.erreicht::after { background: var(--signal); transition: background .6s var(--tempo); }
.js .teil.dunkel .achse li.erreicht::after { background: #6f9dff; }
.js .achse li::before { transform: scale(.5); }
.js .achse li.erreicht::before { transform: none; transition: transform .6s var(--tempo); }
.js .achse .zahl { opacity: 0; }
.js .achse li.erreicht .zahl { opacity: 1; transition: opacity .5s var(--tempo) .15s; }

/* ===== Kacheln: Licht folgt dem Zeiger ===== */
.kachel { position: relative; overflow: hidden; }
.kachel::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(15, 91, 215, .10), transparent 70%);
  transition: opacity .4s var(--tempo);
}
.teil.dunkel .kachel::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 157, 255, .16), transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  .kachel:hover::after { opacity: 1; }
  .kachel { transition: transform .5s var(--tempo); }
  .kachel:hover { transform: translateY(-3px); }
  .taste:hover { transform: translateY(-2px); }
}

/* ===== Rahmen schweben beim Scrollen ===== */
.js [data-schwebe] { will-change: transform; }

/* ===== Menü: Einträge staffeln sich herein ===== */
.blende li { opacity: 0; transform: translateY(14px); }
.blende.offen li {
  opacity: 1; transform: none;
  transition: opacity .5s var(--tempo), transform .5s var(--tempo);
  transition-delay: calc(var(--m, 0) * 55ms);
}
.blende .tasten { opacity: 0; transform: translateY(14px); }
.blende.offen .tasten {
  opacity: 1; transform: none;
  transition: opacity .5s var(--tempo) .34s, transform .5s var(--tempo) .34s;
}

/* ===== Haltepunkte ===== */
@media (min-width: 680px) {
  :root { --gasse: 32px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel.weit { grid-column: span 2; }
  .fuss-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-ende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mess-zeile { grid-template-columns: minmax(0, 1fr); }
  .achse li { grid-template-columns: 34px minmax(0, 1fr); }
  .achse li::before, .achse .zahl { width: 34px; height: 34px; }
  .achse li::after { left: 16px; top: 34px; }
}

@media (min-width: 900px) {
  .navi { display: block; }
  .menue-taste { display: none; }
  .kopf .knopf-klein { display: inline-flex; }
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kachel.weit { grid-column: span 2; }
  .kachel.ganz { grid-column: span 3; }
  .zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 70px); align-items: center; }
  .zwei-schief { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 70px); align-items: center; }
  .szene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(34px, 5vw, 64px); align-items: start; }
  .szene-halt { order: 2; }
  .szene-schritte { order: 1; padding-block: 14vh; }
  .fuss-gitter { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

@media (min-width: 1100px) {
  .buehne-bild .rahmen { max-width: 960px; }
}

/* ===== Bedienbarkeit ===== */
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .auf { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .js .szene-schritt { opacity: 1 !important; }
  .js .zeile > i { transform: none !important; transition: none !important; }
  .js .worte > i { opacity: 1 !important; }
  .js .marke-zeile::after { width: 46px !important; transition: none !important; }
  .js .achse li::before { transform: none !important; }
  .js .achse .zahl { opacity: 1 !important; }
  .js .achse li::after { background: var(--linie) !important; }
  .js [data-schwebe], .js .buehne-bild, .js .buehne .bahn { transform: none !important; }
  .blende li, .blende .tasten { opacity: 1 !important; transform: none !important; }
  .kachel:hover, .taste:hover { transform: none !important; }
  .kopf-fortschritt { display: none; }
  .mess-balken { transition: none !important; }
  .taste, .weiter::after { transition: none !important; }
}

@media print {
  .kopf, .blende, .geraet, .probe { display: none; }
  body { background: #fff; }
  .teil.dunkel { background: #fff; color: #000; }
}