/* So entsteht Ihre Website · Henne IT · Messestand (DESIGN.md) */
@font-face { font-family: "DM Serif Display"; src: url("../fonts/dm-serif-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --orange: #FC7000; --orange-hover: #E86600; --orange-text: #B84F00;
  --grund: #F8F5EF; --paneel: #FFFFFF; --ink: #1D1D1F; --neben: #57534C; --linie: #E4DDD1;
  --teppich: #17181B; --auf-dunkel: #F8F5EF; --auf-dunkel-neben: #B9B3A8;
  --rand: clamp(16px, 4vw, 48px); --abschnitt: clamp(72px, 5vw + 48px, 136px);
  --profil: 3px; --knoten: 9px; --kopf-h: 78px;
  --display: "Schibsted Grotesk", "Arial Narrow", sans-serif;
  --text: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --raste: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 24px); }
body { margin: 0; background: var(--grund); color: var(--ink); font: 400 1.0625rem/1.6 var(--text); overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--orange-text); text-underline-offset: .2em; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--orange); color: var(--ink); padding: 10px 14px; font-weight: 600; }
.sprung:focus { top: 12px; }
html { scrollbar-color: var(--neben) var(--grund); }

/* Kopf klebt (DESIGN: Blende sticky) */
.hit-blende { position: sticky; top: 0; z-index: 60; }
.hit-blende__nav a[aria-current="page"] { color: var(--orange-text); }

/* Knöpfe */
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
.knopf { display: inline-flex; align-items: center; min-height: 50px; padding: 12px 22px; border: 2px solid transparent; font: 600 1rem/1 var(--text);
  text-decoration: none; color: var(--ink); transition: background-color .2s, color .2s, border-color .2s; }
.knopf:active { transform: translateY(1px); }
.knopf--orange { background: var(--orange); }
.knopf--orange:hover { background: var(--orange-hover); }
.knopf--rand { border-color: var(--ink); }
.knopf--rand:hover { background: var(--ink); color: var(--paneel); }
.knopf--hell { border-color: var(--auf-dunkel); color: var(--auf-dunkel); }
.knopf--hell:hover { background: var(--auf-dunkel); color: var(--ink); }
.schluss :focus-visible { outline-color: var(--orange); }

/* Profil-Paneel mit Eckknoten */
.paneel { position: relative; border: var(--profil) solid var(--ink); }
.paneel::before { content: ""; position: absolute; inset: calc(-1 * (var(--profil) + var(--knoten)) / 2 - .5px); pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top / var(--knoten) var(--knoten) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right top / var(--knoten) var(--knoten) no-repeat,
    linear-gradient(var(--ink), var(--ink)) left bottom / var(--knoten) var(--knoten) no-repeat,
    linear-gradient(var(--ink), var(--ink)) right bottom / var(--knoten) var(--knoten) no-repeat; }
.schild { display: inline-block; font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--ink); padding: 7px 10px; }

/* ---------- Kopf ---------- */
.kopf { padding: clamp(40px, 6vw, 88px) var(--rand) clamp(36px, 5vw, 64px); max-width: calc(1280px + 2 * var(--rand)); margin: 0 auto; }
.kopf__paneel { background: var(--grund); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(28px, 5vw, 80px); align-items: end; padding: clamp(24px, 4vw, 56px); }
.kopf h1 { font-size: clamp(2.5rem, 1.1rem + 5vw, 5.4rem); line-height: .98; letter-spacing: -0.035em; max-width: 13ch; }
.lead { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); line-height: 1.5; max-width: 42ch; margin-top: 20px; }
.kopf .knopfreihe { margin-top: 30px; }
.kopf__hinweis { color: var(--neben); font-size: .95rem; max-width: 38ch; padding-top: 14px; border-top: 1.5px solid var(--linie); }

/* ---------- Arbeitsfläche ---------- */
.flaeche {
  --oben: calc(var(--kopf-h) + 28px);
  display: grid; grid-template-columns: 220px minmax(280px, 360px) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 48px);
  max-width: calc(1440px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand) var(--abschnitt);
}
.strecke { grid-column: 1; grid-row: 1; position: sticky; top: var(--oben); align-self: start; padding-top: 4px; }
.strecke .schild { margin-bottom: 22px; }
.strecke__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; z-index: 1; }
.strecke__liste a { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--neben); font: 500 .95rem/1.25 var(--text); }
.strecke__liste a:hover .name { color: var(--ink); }
.box { flex: none; display: grid; place-items: center; width: 44px; height: 44px; background: var(--paneel); border: var(--profil) solid var(--ink);
  font: 800 1.2rem/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; transition: background-color .35s var(--raste); }
.strecke li.ist-erreicht .box { background: var(--orange); }
.strecke li.ist-aktiv .name { color: var(--ink); font-weight: 600; }
.strecke li.ist-aktiv a { position: relative; }
.strecke__linie { position: absolute; left: 20.5px; width: 3px; top: 78px; bottom: 22px; background: var(--ink); }
.strecke__fuellung { position: absolute; inset: 0; background: var(--orange); transform-origin: top; transform: scaleY(var(--fortschritt, 0)); }

.stationen { grid-column: 2; grid-row: 1; }
.station { min-height: 105vh; padding: 14vh 0 10vh; display: grid; align-content: start; gap: 18px; }
.station:first-child { padding-top: 6vh; }
.station--lang { min-height: 300vh; }
.station h2 { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.7rem); line-height: 1.04; letter-spacing: -0.025em; }
.station > p { color: var(--neben); max-width: 40ch; }
.station__halt { position: sticky; top: calc(var(--oben) + 6vh); display: grid; gap: 18px; }
.station__halt > p:not(.station__leise) { color: var(--neben); max-width: 40ch; }
.station__leise { font: 500 .8125rem/1.5 var(--mono) !important; color: var(--neben); }

.flaeche > * { min-width: 0; }
.geraet-spalte { grid-column: 3; grid-row: 1; position: sticky; top: var(--oben); align-self: start; }

/* ---------- Tafeln (lebende Grafiken) ---------- */
.tafel { position: relative; margin-top: 10px; background: var(--paneel); border: var(--profil) solid var(--ink); padding: 0 0 18px; }
.schild--tafel { display: block; border: 0; border-bottom: var(--profil) solid var(--ink); padding: 10px 14px; margin-bottom: 16px; }
.tafel > :not(.schild) { margin-left: 16px; margin-right: 16px; }
/* Nachricht */
.nachricht__text { min-height: 7.4em; font-size: 1rem; line-height: 1.55; }
.cursor { display: inline-block; width: 2px; height: 1.1em; vertical-align: -.2em; background: var(--orange-text); margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.nachricht__fuss { margin-top: 10px; font: 500 .8125rem/1.4 var(--mono); color: var(--neben); }
.haken-zeile { display: inline-flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .3s; }
.haken-zeile svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s var(--raste); }
.nachricht.ist-gesendet .haken-zeile { opacity: 1; }
.nachricht.ist-gesendet .haken-zeile svg { stroke-dashoffset: 0; }
/* Bericht */
.bericht__liste { list-style: none; padding: 0; display: grid; }
.bericht__liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1.5px solid var(--linie); font-size: .95rem; }
.ampel { display: flex; gap: 4px; }
.ampel i { width: 22px; height: 10px; border: 1.5px solid var(--ink); background: transparent; transition: background-color .3s var(--raste); }
.bericht.ist-an .ampel i.ist-voll { background: var(--ink); }
.bericht.ist-an .ampel[data-wert="0"] i:first-child { background: var(--orange); }
/* Fragebogen */
.fragen { list-style: none; padding: 0; display: grid; gap: 12px; counter-reset: f; }
.fragen li { display: grid; gap: 4px; }
.frage { font-weight: 600; font-size: .95rem; }
.antwort { display: block; min-height: 40px; padding: 9px 11px; border: 2px solid var(--ink); background: var(--grund); font-size: .95rem;
  color: transparent; transition: color .3s; position: relative; }
.fragen li.ist-voll .antwort { color: var(--ink); }
.fragen li.ist-voll .antwort::after { content: ""; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--orange); }
/* Abstimmung */
.abstimmung__bild { width: calc(100% - 32px); height: auto; overflow: visible; }
.abstimmung__bild .knoten { fill: var(--grund); stroke: var(--ink); stroke-width: 3; }
.abstimmung__bild text { font: 700 14px var(--display); text-anchor: middle; fill: var(--ink); }
.draht { stroke: var(--ink); stroke-width: 3; fill: none; }
.paket { fill: var(--orange); stroke: var(--ink); stroke-width: 2; opacity: 0; }
.wahl rect { stroke: var(--ink); stroke-width: 2.5; transition: stroke-width .2s; }
.wahl__a { fill: #56705F; } .wahl__b { fill: #2E5A55; }
.wahl.ist-a .wahl__a, .wahl.ist-b .wahl__b { stroke-width: 5; }
.wahl__haken { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--raste), transform .2s; }
.wahl.ist-b .wahl__haken { transform: translateX(42px); }
.wahl.ist-gewaehlt .wahl__haken { stroke-dashoffset: 0; }
.wahl { opacity: 0; transition: opacity .3s; } .wahl.ist-da { opacity: 1; }
/* Anmerkungen */
.anm-liste { list-style: none; padding: 0; display: grid; }
.anm-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1.5px solid var(--linie); font-size: .95rem; }
.anm-liste b { font: 600 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 0 6px; border: 1.5px solid var(--ink); align-self: center; }
.anm-liste li.ist-erledigt b { background: var(--ink); color: var(--paneel); }
/* Google-Treffer */
.treffer > p { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--raste), transform .5s var(--raste); }
.treffer.ist-an > p { opacity: 1; transform: none; }
.treffer.ist-an > p:nth-child(3) { transition-delay: .12s; } .treffer.ist-an > p:nth-child(4) { transition-delay: .24s; }
.treffer__url { font: 500 .8125rem/1.4 var(--mono); color: var(--neben); }
.treffer__titel { font: 600 1.15rem/1.3 var(--text); color: #1a0dab; margin-top: 4px; }
.treffer__text { font-size: .95rem; color: var(--neben); margin-top: 4px; }
/* Takt */
.takt__liste { list-style: none; padding: 0; display: grid; }
.takt__liste li { display: grid; grid-template-columns: 56px 1fr 12px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1.5px solid var(--linie); font-size: .95rem; }
.takt__zeit { font: 500 .8125rem/1 var(--mono); color: var(--neben); font-variant-numeric: tabular-nums; }
.takt__liste li::after { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--ink); transition: background-color .3s; }
.takt__liste li.ist-ok::after { background: var(--ink); }
.takt__liste li.ist-jetzt::after { background: var(--orange); }

/* ---------- Das Gerät ---------- */
.geraet { margin: 0; background: var(--teppich); border: var(--profil) solid var(--ink); }
.geraet__leiste { display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 12px; color: var(--auf-dunkel-neben); }
.geraet__punkte { display: flex; gap: 6px; } .geraet__punkte i { width: 9px; height: 9px; border: 1.5px solid var(--auf-dunkel-neben); }
.geraet__adresse { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: #26272B;
  font: 500 .78rem/1 var(--mono); color: var(--auf-dunkel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geraet__adresse > span { overflow: hidden; text-overflow: ellipsis; }
.schloss { width: 11px; height: 13px; flex: none; fill: none; stroke: var(--auf-dunkel-neben); stroke-width: 1.6; display: none; }
.geraet.ist-sicher .schloss { display: block; stroke: var(--orange); }
.geraet__schirm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.geraet__fuss { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; font: 500 .75rem/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--auf-dunkel-neben); }
.lampe { width: 9px; height: 9px; border-radius: 50%; background: #4A4B50; transition: background-color .3s; }
.geraet.ist-live .lampe { background: var(--orange); }

/* Schulz-Seite in fester Entwurfsbreite, skaliert */
.web { position: absolute; left: 0; top: 0; width: 1200px; height: 750px; transform: scale(var(--s, .5)); transform-origin: 0 0; }
.web__seite { position: absolute; inset: 0; overflow: hidden; }

/* Stand 2012 */
.alt { background: linear-gradient(#d9dde2, #9aa3ad); font: 13px/1.35 Verdana, Geneva, sans-serif; color: #222; padding: 14px 60px; }
.alt__kopf { display: flex; align-items: center; gap: 18px; padding: 14px 22px; background: linear-gradient(#fff, #e9ecf0); border: 1px solid #889; }
.alt__pinsel { width: 70px; }
.alt__name { font: italic bold 40px/1 Georgia, serif; color: #b21f1f; text-shadow: 2px 2px 0 #f2c6c6; }
.alt__slogan { font: 14px Georgia, serif; color: #335; margin-top: 4px; }
.alt__lauf { background: #263c6b; color: #ffde4a; font: bold 13px Verdana; padding: 5px 12px; margin: 6px 0; white-space: nowrap; overflow: hidden; }
.alt__rumpf { display: grid; grid-template-columns: 180px 1fr; gap: 10px; }
.alt__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.alt__nav li { background: linear-gradient(#5b7fc0, #2a4b8d); color: #fff; font: bold 12px Verdana; padding: 7px 10px; border: 2px outset #8fb0e8; }
.alt__inhalt { background: #fffef7; border: 1px solid #889; padding: 14px 18px; min-height: 470px; }
.alt__h1 { font: bold 22px Verdana; color: #263c6b; margin-bottom: 10px; }
.alt__inhalt img { float: left; width: 220px; margin: 0 14px 6px 0; border: 3px ridge #aaa; }
.alt__inhalt p { font-size: 11px; text-align: justify; }
.alt__zaehler { clear: both; padding-top: 16px; color: #555; font-size: 11px !important; text-align: center !important; }
.alt__zaehler b { background: #000; color: #3f3; font-family: "Courier New", monospace; padding: 1px 5px; letter-spacing: 1px; }
.alt__fuss { text-align: center; font-size: 10px; color: #333; margin-top: 8px; }

/* Neu */
.neu { --akzent: #56705F; --dunkel: #22332D; background: #F4F2EC; color: var(--dunkel); font: 400 16px/1.5 var(--text);
  clip-path: inset(0 calc((1 - var(--rolle, 0)) * 100%) 0 0); }
.neu__kopf { display: flex; justify-content: space-between; align-items: center; padding: 26px 56px; }
.neu__marke { font: 400 38px/1 "DM Serif Display", Georgia, serif; display: flex; align-items: baseline; gap: 14px; }
.neu__marke span { font: 600 12px/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: #5A6B63; }
.neu__nav { display: flex; align-items: center; gap: 30px; font-weight: 500; font-size: 15px; }
.neu__knopf { background: var(--akzent); color: #fff; padding: 11px 18px; font-weight: 600; font-size: 15px; transition: background-color .5s; }
.neu__held { display: grid; grid-template-columns: 1fr 1.08fr; gap: 44px; padding: 26px 56px 30px; align-items: center; }
.neu__h1 { font: 400 58px/1.02 "DM Serif Display", Georgia, serif; letter-spacing: -0.01em; }
.neu__sub { font-size: 18px; color: #4B5B54; margin-top: 18px; max-width: 30ch; }
.neu__aktion { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.neu__knopf--gross { padding: 15px 24px; font-size: 17px; }
.neu__tel { font: 600 17px/1 var(--text); transition: font-size .6s var(--raste); }
.geraet[data-tel="gross"] .neu__tel { font-size: 27px; }
.neu__bild { width: 100%; height: 390px; object-fit: cover; }
.neu__reihe { display: grid; grid-template-columns: 120px 1fr 120px 1fr; gap: 18px; align-items: center; padding: 0 56px; }
.neu__reihe img { width: 120px; height: 90px; object-fit: cover; }
.neu__h2 { font: 400 22px/1.1 "DM Serif Display", Georgia, serif; }
.neu__reihe p:not(.neu__h2) { font-size: 14px; color: #4B5B54; }
.geraet[data-farbe="b"] .neu { --akzent: #2E5A55; }

.rolle { position: absolute; top: -20px; bottom: -20px; width: 56px; left: calc(var(--rolle, 0) * 100%); transform: translateX(-50%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.rolle svg { width: 100%; height: 100%; }
.rolle__walze { fill: #7E9483; stroke: var(--ink); stroke-width: 4; }
.geraet.ist-streichen .rolle { opacity: 1; }

/* Check-Schilder */
.marke-check { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--orange); color: var(--ink); font: 600 17px/1 var(--mono);
  letter-spacing: .02em; text-transform: uppercase; padding: 9px 12px; border: 3px solid var(--ink); opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .4s var(--raste), transform .5s var(--raste); }
.marke-check i { width: 11px; height: 11px; background: var(--ink); }
.geraet[data-stand="2"] .marke-check { opacity: 1; transform: none; }
.geraet[data-stand="2"] .marke-check:nth-child(2) { transition-delay: .15s; } .geraet[data-stand="2"] .marke-check:nth-child(3) { transition-delay: .3s; } .geraet[data-stand="2"] .marke-check:nth-child(4) { transition-delay: .45s; }

/* Anmerkung */
.anmerkung { position: absolute; left: 500px; top: 448px; display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--ink); padding: 10px 14px;
  font: 600 18px/1 var(--text); color: var(--ink); opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .45s var(--raste); }
.anmerkung i { width: 14px; height: 14px; background: var(--orange); border: 2px solid var(--ink); }
.anmerkung__ok { display: none; font: 600 14px/1 var(--mono); text-transform: uppercase; background: var(--ink); color: #fff; padding: 4px 6px; }
.geraet[data-stand="6"] .anmerkung { opacity: 1; transform: none; }
.geraet[data-tel="gross"] .anmerkung__ok { display: inline-block; }

/* Monitor im Gerät */
.monitor { position: absolute; inset: 0; background: var(--teppich); display: grid; place-items: center; opacity: 0; transition: opacity .35s; }
.monitor video { width: 100%; height: 100%; object-fit: cover; }
.geraet.ist-film .monitor { opacity: 1; }

/* ---------- Schluss ---------- */
.schluss { background: var(--teppich); color: var(--auf-dunkel); padding: var(--abschnitt) var(--rand); }
.schluss__innen { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(28px, 6vw, 96px); align-items: center; }
.schluss h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 16ch; }
.schluss .lead { color: var(--auf-dunkel-neben); }
.schluss .knopfreihe { margin-top: 30px; }
.wandbild { position: relative; padding-bottom: clamp(120px, 12vw, 170px); }
.wandbild__foto { display: block; width: 82%; border-color: var(--auf-dunkel); }
.wandbild__foto::before { background:
    linear-gradient(var(--auf-dunkel), var(--auf-dunkel)) left top / var(--knoten) var(--knoten) no-repeat,
    linear-gradient(var(--auf-dunkel), var(--auf-dunkel)) right top / var(--knoten) var(--knoten) no-repeat,
    linear-gradient(var(--auf-dunkel), var(--auf-dunkel)) left bottom / var(--knoten) var(--knoten) no-repeat,
    linear-gradient(var(--auf-dunkel), var(--auf-dunkel)) right bottom / var(--knoten) var(--knoten) no-repeat; }
.wandbild__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.visitenkarte { position: absolute; right: 0; bottom: 0; width: min(78%, 380px); background: var(--paneel); color: var(--ink); padding: 72px clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px); }
.visitenkarte__logo { position: absolute; left: clamp(20px, 2.4vw, 32px); top: 22px; width: 140px; }
.visitenkarte__name { font: 800 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1 var(--display); letter-spacing: -0.025em; }
.visitenkarte__rolle { color: var(--neben); margin-top: 6px; font-size: .95rem; }
.visitenkarte__daten { display: grid; grid-template-columns: 76px 1fr; gap: 6px 0; margin: 16px 0 0; font: 500 .8125rem/1.4 var(--mono); }
.visitenkarte__daten dt { text-transform: uppercase; color: var(--neben); letter-spacing: .05em; }
.visitenkarte__daten dd { margin: 0; }

/* Einrasten (einmal) */
.rastet { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--raste), transform .7s var(--raste); }
.rastet.ist-da { opacity: 1; transform: none; }

/* ---------- Handy und Tablet ---------- */
@media (max-width: 960px) {
  .kopf__paneel, .schluss__innen { grid-template-columns: 1fr; }
  .flaeche { --oben: var(--kopf-h); grid-template-columns: 1fr; padding: 0 0 var(--abschnitt); }
  .strecke { grid-column: 1; grid-row: 1; z-index: 20; top: var(--kopf-h); background: var(--grund); border-bottom: var(--profil) solid var(--ink); padding: 8px 16px; }
  .strecke .schild { display: none; }
  .strecke__liste { grid-auto-flow: column; justify-content: space-between; gap: 6px; }
  .strecke__liste a { gap: 0; }
  .box { width: 32px; height: 32px; font-size: .95rem; }
  .strecke .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .strecke__linie { left: 32px; right: 32px; width: auto; height: 3px; top: 22.5px; bottom: auto; }
  .strecke__fuellung { transform-origin: left; transform: scaleX(var(--fortschritt, 0)); }
  .strecke__aktiv { display: block; }
  .geraet-spalte { grid-column: 1; grid-row: 2; z-index: 10; top: calc(var(--kopf-h) + 51px); padding: 10px 16px 0; background: var(--grund); }
  .geraet__leiste { height: 32px; } .geraet__adresse { height: 22px; font-size: .72rem; } .geraet__fuss { height: 28px; font-size: .72rem; }
  .stationen { grid-column: 1; grid-row: 3; padding: 0 16px; }
  .station { min-height: 80svh; padding: calc(var(--geraet-h, 300px) + 28px) 0 6vh; }
  .station:first-child { padding-top: calc(var(--geraet-h, 300px) + 28px); }
  .wandbild { max-width: 420px; }
  .station--lang { min-height: 260svh; }
  .station__halt { top: calc(var(--kopf-h) + 51px + var(--geraet-h, 300px) + 16px); }
  .station--lang { padding-top: calc(var(--geraet-h, 300px) + 28px); }
  .station h2 { font-size: 1.7rem; }
  .wandbild__foto { width: 88%; }
  .visitenkarte { width: 86%; }
}
@media (max-width: 600px) {
  .knopfreihe .knopf { flex: 1 1 100%; justify-content: center; }
  :root { --knoten: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .rastet { opacity: 1; transform: none; }
  .station__leise { display: none; }
}