@font-face {
  font-family: 'Mona Sans';
  src: url('/assets/fonts/MonaSans-VF-opsz-wght.woff2') format('woff2');
  font-weight: 200 900;
  font-optical-sizing: auto;
  font-display: swap;
}
@font-face {
  font-family: 'Martian Mono';
  src: url('/assets/fonts/martian-mono-latin-wght.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ink: #101315;
  --hell: #EDEBE6;
  --grau: #949A9C;          
  --schild: #B9BDBE;
  --metall: #171B1E;
  --linie: #262B2F;
  --volt: #3FDC87;          
  --bernstein: #E0A143;

  --sans: 'Mona Sans', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;

  
  --s1: clamp(10px, .66vw, 12px);
  --s2: clamp(12px, .8vw, 13px);
  --s3: clamp(16px, 1.05vw, 19px);
  --s4: clamp(22px, 1.6vw, 28px);
  --s5: clamp(34px, 3.6vw, 60px);
  --s6: clamp(46px, 7.4vw, 128px);

  --spalte: calc((100vw - 2 * var(--rand)) / 12);
  --rand: clamp(18px, 3.4vw, 64px);
  --expo: cubic-bezier(.19, 1, .22, 1);
  --hin-her: cubic-bezier(.4, 0, .1, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  color: var(--hell);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; overflow-x: clip; }


html:has(.strecke.webgl) body { background: var(--ink); }
:is(.teil, .abbinder, .fuss) { background: var(--ink); }


.einstieg { max-width: none; }
html:has(.strecke) header.kopf { mix-blend-mode: normal; z-index: 20; }


html:has(.strecke.webgl) .einstieg {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--ink) 80%, transparent) 0%,
    color-mix(in srgb, var(--ink) 52%, transparent) 40%,
    transparent 76%);
}






body::before {
  content: '';
  position: fixed;
  inset: 0 var(--rand);
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    var(--linie) 0 1px,
    transparent 1px calc(var(--spalte) * 3));
  opacity: .55;
}
@media (max-width: 860px) { body::before { display: none; } }
main, header, footer { position: relative; z-index: 1; }


.t-ansage {
  margin: 0;
  font-size: var(--s6);
  font-weight: 680;
  line-height: .9;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.t-titel {
  margin: 0;
  font-size: var(--s5);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.t-lead {
  margin: 0;
  font-size: var(--s4);
  font-weight: 350;
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--schild);
}
.t-text { margin: 0; font-size: var(--s3); font-weight: 380; line-height: 1.58; }
.t-text, .t-lead { hyphens: auto; }

.t-marke {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--s1);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grau);
}




html.papier .kopf {
  --ink: #E7E2D7;
  --hell: #15140F;
  --grau: #5C584C;
  --schild: #3E3B33;
  --linie: #C6BFAF;
  --volt: #14663A;
  --bernstein: #8A4A06;   
  color-scheme: light;
}



.einstieg {
  min-height: 88svh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-content: center;
  gap: 1.6rem 0;
  padding: 7rem var(--rand) 4rem;
}
.einstieg-marke { grid-column: 1 / -1; color: var(--volt); }
.einstieg-marke::before {
  content: '';
  display: inline-block;
  width: .5em; height: .5em;
  margin-right: .7em;
  background: var(--volt);
  vertical-align: baseline;
}
.einstieg .t-ansage { grid-column: 1 / span 9; }
.einstieg .t-lead { grid-column: 7 / -1; max-width: 46ch; margin-top: 1.4rem; }
.einstieg-hinweis {
  grid-column: 1 / -1;
  margin-top: 3.4rem;
  transition: opacity .45s var(--expo);
}
.einstieg-hinweis.weg { opacity: 0; }
@media (max-width: 860px) {
  .einstieg { gap: 1.1rem 0; }
  .einstieg .t-ansage, .einstieg .t-lead { grid-column: 1 / -1; }
}


.strecke { --akzent: var(--volt); }
.strecke[data-lesart="job"] { --akzent: var(--bernstein); }

.strecke.webgl .strecke-stationen { margin-left: 58%; width: 42%; }
.strecke-station { max-width: 34ch; }
.strecke-station h2 {
  margin: .5rem 0 1rem;
  font-size: var(--s5);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--hell);
}
.stationsmarke {
  display: flex;
  align-items: center;
  gap: .8em;
  color: var(--grau);
}

.strecke-station > .stationsmarke,
.strecke-station > h2,
.strecke-station > .stationstext {
  clip-path: inset(0);
  transition: clip-path .6s var(--expo);
}
.strecke-station > h2 { transition-delay: .06s; }
.strecke-station > .stationstext { transition-delay: .12s; }
.strecke-station.blendet > .stationsmarke,
.strecke-station.blendet > h2,
.strecke-station.blendet > .stationstext {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .strecke-station > * { transition: none !important; }
}
html.ruhe .strecke-station > * { transition: none !important; }

.stationsmarke b {
  font-weight: 600;
  color: var(--ink);
  background: var(--akzent);
  padding: .35em .55em .3em;
  letter-spacing: .04em;
}
.strecke-station p.stationstext {
  margin: 0;
  font-size: var(--s3);
  font-weight: 380;
  line-height: 1.6;
  color: var(--schild);
  hyphens: auto;
}

.strecke-station::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 1.6rem;
  background: var(--linie);
}
@media (max-width: 860px) {
  .strecke.webgl .strecke-stationen { margin-left: 0; width: 100%; padding: 0 var(--rand); }
  .strecke-station { max-width: none; }
}


.strecke.webgl .strecke-anzeige {
  left: var(--rand);
  bottom: 8vh;
  padding: .7rem .9rem .75rem;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(4px);
}
.strecke-anzeige .an-nr {
  font: 600 var(--s4) / 1 var(--mono);
  letter-spacing: -.02em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.strecke-anzeige .an-von {
  font: 400 var(--s1) / 1 var(--mono);
  letter-spacing: .1em;
  color: var(--grau);
}
.strecke-anzeige .an-marke {
  display: block;
  margin-top: .5rem;
  font: 500 var(--s2) / 1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hell);
}


.strecke-umschalt {
  display: flex;
  gap: 0;
  border: 1px solid var(--linie);
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(4px);
}
.strecke-umschalt button {
  border: 0;
  background: transparent;
  color: var(--schild);
  font: 500 var(--s1) / 1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .75rem 1.1rem;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}

.strecke-umschalt button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--metall);
  opacity: 0;
  transition: opacity .22s var(--hin-her);
}
.strecke-umschalt button + button { border-left: 1px solid var(--linie); }
.strecke-umschalt button:hover,
.strecke-umschalt button:focus-visible { color: var(--hell); }
.strecke-umschalt button:hover::before,
.strecke-umschalt button:focus-visible::before { opacity: 1; }
.strecke-umschalt button[aria-pressed="true"] { color: var(--ink); background: transparent; } 
.strecke-umschalt button[aria-pressed="true"]::before { background: var(--akzent); opacity: 1; }

:is(.abbinder, .teil, .fuss) {
  --ink: #E7E2D7;           
  --kalk-hell: #F1EEE6;
  --hell: #15140F;          
  --grau: #5C584C;          
  --schild: #3E3B33;        
  --metall: #DAD4C7;        
  --linie: #C6BFAF;
  --feldrand: #817C6F;      
  --volt: #14663A;          
  --volt-lampe: #3FDC87;    
  --bernstein: #8A4A06;     
  --warnung: #9A2414;       
  --marginalie: clamp(0px, 9vw, 150px);

  background: var(--ink);
  color: var(--hell);
  color-scheme: light;
}


.abbinder { border-top: 2px solid var(--hell); }


.abbinder {
  min-height: 62svh;
  display: grid;
  grid-template-columns: var(--marginalie) 1fr;
  column-gap: clamp(16px, 2.4vw, 40px);
  row-gap: 2.2rem;
  align-content: center;
  padding: 10vh var(--rand) 8vh;
}
.abbinder .t-titel {
  grid-column: 2;
  max-width: 22ch;
  border-left: 1px solid var(--linie);
  padding-left: clamp(16px, 2.4vw, 40px);
  margin-left: calc(-1 * clamp(16px, 2.4vw, 40px));
}
.abbinder-weg {
  grid-column: 2;
  justify-self: start;
  font-size: var(--s4);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--volt);
  text-decoration: none;
  padding-bottom: .2em;
  border-bottom: 2px solid var(--volt);
  position: relative;
  isolation: isolate;
}

.abbinder-weg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--volt);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .3s var(--expo);
}
.abbinder-weg:hover::before,
.abbinder-weg:focus-visible::before { clip-path: inset(0); }

.abbinder-weg:hover,
.abbinder-weg:focus-visible { color: var(--kalk-hell); }
@media (max-width: 860px) {
  .abbinder { grid-template-columns: 1fr; }
  .abbinder .t-titel, .abbinder-weg { grid-column: 1; }
  .abbinder .t-titel { border-left: 0; padding-left: 0; margin-left: 0; }
}


.teil {
  display: grid;
  grid-template-columns: var(--marginalie) 1fr;
  column-gap: clamp(16px, 2.4vw, 40px);
  row-gap: 1rem;
  padding: 12vh var(--rand) 14vh;
  border-top: 1px solid var(--hell);
}
.teil > * { grid-column: 2; }
.teil > h2 { margin: 0 0 .4rem; max-width: 18ch; }
.teil > .t-text { max-width: 54ch; color: var(--schild); margin-bottom: 2.6rem; }

.anliegen {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  max-width: 62ch;
  border-top: 1px solid var(--hell);
}
.anliegen-zeile { border-bottom: 1px solid var(--linie); }
.anliegen-knopf {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  align-items: baseline;
  gap: .5rem 1rem;
  width: 100%;
  padding: 1.05rem .5rem 1.1rem;
  border: 0;
  background: transparent;
  color: var(--hell);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}

.anliegen-knopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--metall);
  opacity: 0;
  transition: opacity .22s var(--hin-her);
}
.anliegen-knopf > * { transition: transform .22s var(--hin-her); }

.anliegen-port {
  width: 1em; height: 1em;
  border: 1px solid var(--grau);
}
.anliegen-wort { font-size: var(--s4); font-weight: 520; letter-spacing: -.02em; }
.anliegen-was {
  grid-column: 2;
  font-size: var(--s2);
  font-weight: 380;
  color: var(--grau);
}
.anliegen-knopf:hover::before,
.anliegen-knopf:focus-visible::before { opacity: 1; }
.anliegen-knopf:hover > *,
.anliegen-knopf:focus-visible > *,
.anliegen-knopf:active > * { transform: translateX(.5rem); }
.anliegen-knopf:hover .anliegen-port,
.anliegen-knopf:focus-visible .anliegen-port { border-color: var(--volt); border-width: 2px; }
.anliegen-knopf:hover .anliegen-was,
.anliegen-knopf:focus-visible .anliegen-was { color: var(--schild); }
.anliegen-knopf:active::before { opacity: 1; background: var(--linie); }

.anliegen-knopf[aria-pressed="true"] .anliegen-port {
  background: var(--volt-lampe);
  border-color: var(--hell);
}
.anliegen-knopf[aria-pressed="true"] .anliegen-wort { color: var(--volt); }


.fakt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .3rem 1.2rem;
  max-width: 62ch;
  margin: 0 0 clamp(2.4rem, 7vh, 4.5rem);
  padding: .95rem .5rem 1rem;
  border-top: 1px solid var(--hell);
  border-bottom: 1px solid var(--linie);
}
.fakt-kennung { font: 500 var(--s1) / 1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.fakt-wert { font-size: var(--s4); font-weight: 520; letter-spacing: -.02em; color: var(--hell); }
@media (max-width: 420px) {
  .fakt { grid-template-columns: 1fr; }
}


.handgriff-form { display: grid; gap: 1.5rem; max-width: 46ch; }
.feld { display: grid; gap: .35rem; margin: 0; }
.feld label { font: 500 var(--s1) / 1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.feld input,
.feld textarea {
  border: 1px solid var(--feldrand);
  background: var(--kalk-hell);
  color: var(--hell);
  font: 400 var(--s3) / 1.4 var(--sans);
  padding: .6rem .7rem;
}
.feld textarea { resize: vertical; min-height: 6.5rem; }
.feld input:hover, .feld textarea:hover { border-color: var(--grau); }
.feld input:focus-visible, .feld textarea:focus-visible {
  outline: 0;
  border-color: var(--volt);
  background: #fff;
  
  box-shadow: inset 0 0 0 1px var(--volt);
}

.check { display: flex; align-items: flex-start; gap: .7rem; margin: 0; }
.check input {
  appearance: none;
  flex: 0 0 auto;
  width: 1.1em; height: 1.1em;
  margin: .25em 0 0;
  border: 1px solid var(--grau);
  background: var(--kalk-hell);
  cursor: pointer;
}
.check input:hover { border-color: var(--volt); border-width: 2px; }
.check input:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.check input:checked { background: var(--volt-lampe); border-color: var(--hell); }
.check label { font-size: var(--s2); color: var(--schild); cursor: pointer; }


.feld-anhang { gap: .5rem; }
.anhang-eingabe {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}
.feld .anhang-knopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .4em;
  padding: .85rem 1rem .9rem .9rem;
  border: 1px solid var(--feldrand);
  background: var(--kalk-hell);
  color: var(--hell);
  font: 520 var(--s3) / 1.35 var(--sans);
  letter-spacing: -.01em;
  text-transform: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}
.anhang-knopf::before {
  content: "";
  flex: 0 0 1em;
  height: 1em;
  margin-right: .5em;
  border: 1px solid var(--grau);
}

.anhang-knopf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--metall);
  opacity: 0;
  transition: opacity .22s var(--hin-her);
}
.anhang-knopf::before,
.anhang-knopf > * { transition: transform .22s var(--hin-her); }
.anhang-optional { font-weight: 380; color: var(--grau); }
.feld .anhang-knopf:hover,
.anhang-eingabe:focus-visible + .anhang-knopf,
.ist-ueber > .anhang-knopf { border-color: var(--grau); }
.feld .anhang-knopf:hover::after,
.anhang-eingabe:focus-visible + .anhang-knopf::after,
.ist-ueber > .anhang-knopf::after { opacity: 1; }
.feld .anhang-knopf:hover::before,
.feld .anhang-knopf:hover > *,
.anhang-eingabe:focus-visible + .anhang-knopf::before,
.anhang-eingabe:focus-visible + .anhang-knopf > *,
.ist-ueber > .anhang-knopf::before,
.ist-ueber > .anhang-knopf > *,
.feld .anhang-knopf:active::before,
.feld .anhang-knopf:active > * { transform: translateX(.4rem); }
.anhang-knopf:hover::before,
.anhang-eingabe:focus-visible + .anhang-knopf::before,
.ist-ueber > .anhang-knopf::before { border-color: var(--volt); border-width: 2px; }

.feld .anhang-eingabe:focus-visible + .anhang-knopf { border-color: var(--volt); box-shadow: inset 0 0 0 1px var(--volt); }
.feld .anhang-knopf:active::after { opacity: 1; background: var(--linie); }
.ist-ueber > .anhang-knopf { border-style: dashed; border-color: var(--volt); }
.feld-anhang:has(.anhang-datei) .anhang-knopf::before { background: var(--volt-lampe); border-color: var(--hell); }
.formular-hinweis { margin: 0; font-size: var(--s2); color: var(--grau); line-height: 1.5; }
.anhang-liste { list-style: none; margin: 0; padding: 0; }
.anhang-liste:empty { display: none; }
.anhang-datei {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: .8rem;
  padding: .55rem 0 .6rem;
  border-bottom: 1px solid var(--linie);
  font-size: var(--s2);
}
.anhang-datei:first-child { border-top: 1px solid var(--linie); }
.anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hell); }
.anhang-groesse { font: 500 var(--s1) / 1.4 var(--mono); letter-spacing: .06em; color: var(--grau); }
.anhang-weg {
  border: 0;
  padding: .15rem 0;
  background: transparent;
  color: var(--hell);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  cursor: pointer;
}
.anhang-weg:hover { color: var(--volt); }
.anhang-weg:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; color: var(--volt); }
.anhang-weg:active { color: var(--schild); }
.anhang-fehler { margin: 0; font-size: var(--s2); line-height: 1.5; color: var(--warnung); }
.anhang-fehler:empty { display: none; }
.anhang-fehler:not(:empty) { padding-left: .7rem; border-left: 2px solid var(--warnung); }
.feld .anhang-eingabe[aria-invalid="true"] + .anhang-knopf { border-color: var(--warnung); }

.knopf {
  justify-self: start;
  border: 1px solid var(--volt);
  background: var(--volt);
  color: var(--kalk-hell);
  font: 600 var(--s3) / 1 var(--sans);
  letter-spacing: -.01em;
  padding: .95rem 1.6rem;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}

.knopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kalk-hell);
  opacity: 0;
  transition: opacity .22s var(--hin-her);
}
.knopf:hover, .knopf:focus-visible { color: var(--volt); }
.knopf:hover::before, .knopf:focus-visible::before { opacity: 1; }
.knopf:active { border-color: var(--hell); color: var(--kalk-hell); }
.knopf:active::before { opacity: 1; background: var(--hell); }
.knopf:focus-visible { outline: 2px solid var(--hell); outline-offset: 3px; }
.knopf:disabled,
.knopf:disabled:hover,
.knopf[aria-disabled="true"],
.knopf[aria-disabled="true"]:hover { cursor: not-allowed; background: transparent; border-color: var(--linie); color: var(--schild); }
.knopf:disabled::before,
.knopf[aria-disabled="true"]::before { opacity: 0; }
.versand-hinweis { max-width: 48ch; margin: -1rem 0 0; color: var(--grau); line-height: 1.6; }
.handgriff-fuss { line-height: 1.6; }

.handgriff-form a { color: var(--hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.handgriff-form a:hover { color: var(--volt); }
.handgriff-form a:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.handgriff-form a:active { color: var(--schild); }

@media (max-width: 860px) {
  .teil { grid-template-columns: 1fr; }
  .teil > * { grid-column: 1; }
}


.fuss { padding: 2.8rem var(--rand) 3.6rem; border-top: 1px solid var(--hell); }
.fuss-haupt { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 5rem; }
.fuss-logo { color: var(--hell); text-decoration: none; font-size: clamp(3rem, 7vw, 7rem); font-weight: 700; letter-spacing: -.065em; line-height: .9; }
.fuss-haupt p { margin: 1rem 0 0; color: var(--grau); font: 500 var(--s1)/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.fuss-weg { color: var(--hell); text-decoration: none; font-size: var(--s4); font-weight: 570; border-bottom: 2px solid var(--volt); padding-bottom: .3rem; }
.fuss-weg:hover, .fuss-weg:focus-visible, .fuss-logo:hover, .fuss-logo:focus-visible { color: var(--volt); }
.fuss-unten { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.fuss-unten p { margin: 0; color: var(--grau); }
.fuss-recht { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.fuss-recht a { color: var(--grau); text-decoration: none; padding: .35rem 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.fuss-recht a:hover { color: var(--hell); }
.fuss-recht a:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; color: var(--hell); }
.fuss-recht a:active { color: var(--schild); }
.nlf-signatur { display: inline-flex; align-items: center; gap: .55rem; color: var(--hell); font: 550 var(--s1)/1.4 var(--mono); letter-spacing: .02em; text-decoration: none; }
.nlf-signatur:hover, .nlf-signatur:focus-visible { color: var(--bernstein); }
.nlf-rahmen { display: inline-block; width: .85rem; height: .85rem; border: 2px solid var(--bernstein); border-top-color: transparent; }
html[data-lesart="kunde"] .fuss [data-lesart="job"],
html[data-lesart="job"] .fuss [data-lesart="kunde"] { display: none; }
@media (max-width: 650px) {
  .fuss-haupt, .fuss-unten { flex-direction: column; align-items: flex-start; }
  .fuss-haupt { padding-bottom: 3rem; }
  .fuss-unten { gap: 1.5rem; }
}

:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }


@keyframes wort-auf { from { translate: 0 110%; } }

@media (prefers-reduced-motion: no-preference) {
  html:not(.ruhe) .t-ansage.zerlegt .w {
    display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top;
  }
  html:not(.ruhe) .t-ansage.zerlegt .w > span {
    display: inline-block;
    animation: wort-auf .85s var(--expo) both;
    animation-delay: calc(.1s + var(--i) * 62ms);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.ruhe) :is(.teil, .abbinder, .strecke-station) .zerlegt .w {
      display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top;
    }
    html:not(.ruhe) :is(.teil, .abbinder, .strecke-station) .zerlegt .w > span {
      display: inline-block;
      animation: wort-auf linear both;
      animation-timeline: view();
      animation-range: entry calc(6% + var(--i) * 6%) entry calc(72% + var(--i) * 6%);
    }
  }
}




.strecke.film .strecke-anzeige,
.strecke.webgl .strecke-anzeige {
  inset: auto auto 8vh var(--rand);
  text-align: left;
  line-height: 1;
}

@media (max-width: 860px) {
  
  html:has(.strecke.webgl) .einstieg {
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--ink) 94%, transparent) 0%,
      color-mix(in srgb, var(--ink) 88%, transparent) 62%,
      color-mix(in srgb, var(--ink) 40%, transparent) 100%);
  }
}


@media (max-width: 860px) {
  .strecke.webgl .strecke-station {
    padding: 2.2rem var(--rand) 2.6rem;
    background: linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, var(--ink) 86%, transparent) 14%,
      color-mix(in srgb, var(--ink) 92%, transparent) 50%,
      color-mix(in srgb, var(--ink) 86%, transparent) 86%,
      transparent 100%);
  }
}


.blatt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--hell);
  background: var(--kalk-hell);
}
.blatt-kopf, .blatt-fuss {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2.2fr 1.2fr 1.4fr;
  align-items: baseline;
  gap: 0 clamp(12px, 1.6vw, 28px);
  padding: .9rem clamp(12px, 1.4vw, 22px);
}
.blatt-kopf { border-bottom: 1px solid var(--hell); }
.blatt-fuss { border-top: 1px solid var(--hell); }
.blatt-kopf p, .blatt-fuss p { margin: 0; display: grid; gap: .3rem; }
.blatt-etikett {
  font-family: var(--mono); font-size: var(--s1); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grau);
}
.blatt-kopf b, .blatt-fuss b {
  font-size: var(--s2); font-weight: 560; letter-spacing: -.01em; color: var(--hell);
}

.blatt-marke {
  font-size: var(--s3); font-weight: 680; letter-spacing: -.03em; color: var(--hell);
}


.blatt-spalte { margin: 0; display: grid; grid-template-rows: auto repeat(6, 1fr); }

.blatt-liste { margin: 0; grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; }

.datenblatt > .blatt-nr { grid-column: 1; justify-self: end; align-self: start; padding-top: .4em; }
.blatt-spalte + .blatt-spalte { border-left: 1px solid var(--linie); }
.blatt-ueber {
  margin: 0; padding: .8rem clamp(12px, 1.4vw, 22px) .5rem;
}
.blatt-zeile {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) 1.6fr;
  gap: 0 clamp(10px, 1.2vw, 20px);
  align-items: start;
  padding: .62rem clamp(12px, 1.4vw, 22px);
  border-top: 1px solid var(--linie);
}
.blatt-zeile dt {
  font-family: var(--mono); font-size: var(--s1); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--schild);
  display: flex; gap: .7em; line-height: 1.5;
}

.blatt-zeile dt i { font-style: normal; color: var(--grau); }
.blatt-zeile dd {
  margin: 0; font-size: var(--s2); font-weight: 400; line-height: 1.5; color: var(--hell);
}

.blatt-lampe {
  display: inline-block; width: .52em; height: .52em; margin-right: .5em;
  vertical-align: baseline;
  background: var(--volt-lampe); border: 1px solid var(--volt);
}

@media (max-width: 860px) {
  .blatt { grid-template-columns: 1fr; }
  .blatt-spalte + .blatt-spalte { border-left: 0; border-top: 1px solid var(--hell); }
  .blatt-kopf, .blatt-fuss { grid-template-columns: 1fr 1fr; gap: .9rem clamp(12px, 3vw, 22px); }
  .blatt-zeile { grid-template-columns: 1fr; gap: .28rem; }
}


@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.ruhe) .blatt-zeile {
      animation: blatt-zeichnen linear both;
      animation-timeline: view();
      animation-range: entry calc(10% + var(--i) * 4%) entry calc(58% + var(--i) * 4%);
    }
  }
}
@keyframes blatt-zeichnen {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}


.zeichnung-blatt {
  margin: 0;
  border: 1px solid var(--hell);
  background: var(--kalk-hell);
  display: grid;
  grid-template-columns: 1fr minmax(180px, 250px);
}
.zeichnung-flaeche { border-right: 1px solid var(--linie); min-width: 0; }
.zeichnung-flaeche:focus-visible { outline: 2px solid var(--volt); outline-offset: -2px; }
.zeichnung-blatt svg { display: block; width: 100%; height: auto; }

.karte-blatt { grid-template-columns: 1fr; max-width: min(100%, 820px); }
.karte-blatt .zeichnung-flaeche { border-right: 0; }

.zeichnung-blatt figcaption { padding: clamp(14px, 1.5vw, 22px); align-self: start; }
.zeichnung-legende {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: grid; gap: .42rem;
}
.zeichnung-legende li {
  display: grid; grid-template-columns: 2.4em 1fr; gap: .4em;
  font-size: var(--s2); line-height: 1.4; color: var(--hell);
}
.zeichnung-legende .nr {
  font-family: var(--mono); font-size: var(--s1); font-weight: 500;
  letter-spacing: .06em; color: var(--grau); padding-top: .18em;
}
.zeichnung-fuss {
  margin: 1.2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linie);
  font-size: var(--s1); line-height: 1.5; color: var(--schild);
}
.zeichnung-hinweis { display: none; }

@media (max-width: 900px) {
  .zeichnung-hinweis {
    display: block;
    margin: 0 0 .65rem;
    color: var(--schild);
  }
  .zeichnung-blatt { grid-template-columns: 1fr; }
  .zeichnung-flaeche { border-right: 0; border-bottom: 1px solid var(--linie); }
  .zeichnung-legende { grid-template-columns: 1fr 1fr; }
  
  .zeichnung-flaeche { overflow-x: auto; overscroll-behavior-x: contain; }
  .zeichnung-blatt svg { min-width: 640px; }
}


@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.ruhe) .zeichnung [data-zeichnet] {
      stroke-dasharray: 1400;
      animation: strich-zieht linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 64%;
    }
  }
}
@keyframes strich-zieht {
  from { stroke-dashoffset: 1400; }
  to   { stroke-dashoffset: 0; }
}


.schrank-blatt {
  display: grid;
  grid-template-columns: minmax(230px, 340px) 1fr;
  border: 1px solid var(--hell);
  background: var(--kalk-hell);
}
.schrank-riss { margin: 0; border: 0; border-right: 1px solid var(--hell); padding: clamp(14px, 1.5vw, 22px); min-width: 0; }
.schrank-riss legend { padding: 0 0 .7rem; }


.he-stapel {
  --he-hoch: 38px;
  display: grid; gap: 2px;
  padding: 0 14px;
  --schiene: repeating-linear-gradient(to bottom,
      transparent 0 calc(var(--he-hoch) * .113),
      var(--schild) 0 calc(var(--he-hoch) * .173),
      transparent 0 calc(var(--he-hoch) * .471),
      var(--schild) 0 calc(var(--he-hoch) * .531),
      transparent 0 calc(var(--he-hoch) * .827),
      var(--schild) 0 calc(var(--he-hoch) * .887),
      transparent 0 var(--he-hoch));
  
  background-image: var(--schiene), var(--schiene);
  background-size: 5px 100%, 5px 100%;
  background-position: 3px 0, calc(100% - 3px) 0;
  background-repeat: no-repeat, no-repeat;
}
.he-feld {
  height: calc(var(--he) * var(--he-hoch));
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: 0 .7rem;
  border: 1px solid var(--linie);
  background: var(--ink);
  cursor: pointer;
  font-family: var(--mono); font-size: var(--s1); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--schild);
  position: relative;
  isolation: isolate;
}

.he-feld::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--metall);
  opacity: 0;
  transition: opacity .18s var(--hin-her);
}
.he-feld:hover::before,
.he-feld:has(:checked)::before { opacity: 1; }
.he-hoch { color: var(--grau); }

.he-feld:has(:checked) {
  border-color: var(--hell); color: var(--hell);
  
  box-shadow: inset 3px 0 0 var(--hell);
}
.he-feld:has(:focus-visible) { outline: 2px solid var(--volt); outline-offset: 2px; }
.nur-leser {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%);
}

.schrank-schilder { padding: clamp(14px, 1.5vw, 22px); min-width: 0; }
.typenschild { display: none; }
.schrank-blatt:has(#k-he:checked)      [data-fuer="k-he"],
.schrank-blatt:has(#k-patch:checked)   [data-fuer="k-patch"],
.schrank-blatt:has(#k-rangier:checked) [data-fuer="k-rangier"],
.schrank-blatt:has(#k-switch:checked)  [data-fuer="k-switch"],
.schrank-blatt:has(#k-server:checked)  [data-fuer="k-server"],
.schrank-blatt:has(#k-usv:checked)     [data-fuer="k-usv"] { display: block; }

@supports not selector(:has(*)) { .typenschild { display: block; border-top: 1px solid var(--linie); padding-top: 1rem; } }

.schild-kopf { margin: 0 0 .9rem; display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.schild-kopf b { font-size: var(--s4); font-weight: 620; letter-spacing: -.02em; color: var(--hell); }
.schild-kopf span {
  font-family: var(--mono); font-size: var(--s1); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grau);
}
.schild-werte { margin: 0; display: grid; }
.schild-zeile {
  display: grid; grid-template-columns: minmax(120px, .5fr) 1.5fr;
  gap: 0 clamp(10px, 1.2vw, 20px);
  padding: .5rem 0; border-top: 1px solid var(--linie);
}
.schild-zeile dt {
  font-family: var(--mono); font-size: var(--s1); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--schild); line-height: 1.5;
}
.schild-zeile dd { margin: 0; font-size: var(--s2); line-height: 1.5; color: var(--hell); }
.schild-satz {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--hell);
  font-size: var(--s3); font-style: italic; font-weight: 380; line-height: 1.5;
  color: var(--hell); max-width: 46ch;
}
.schild-quelle {
  margin: 1.4rem 0 0; font-size: var(--s1); line-height: 1.6; color: var(--schild);
}

@media (max-width: 900px) {
  .schrank-blatt { grid-template-columns: 1fr; }
  .schrank-riss { border-right: 0; border-bottom: 1px solid var(--hell); }
  .schild-zeile { grid-template-columns: 1fr; gap: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .anliegen-knopf > *, .anhang-knopf::before, .anhang-knopf > *,
  .abbinder-weg::before { transition: none; }
}
html.ruhe .anliegen-knopf > *, html.ruhe .anhang-knopf::before, html.ruhe .anhang-knopf > *,
html.ruhe .abbinder-weg::before { transition: none; }




.kopf-umschalt {
  position: static;
  transform: none;
  margin-right: 0;
  border: 1px solid var(--linie);
  background: transparent;
  backdrop-filter: none;
  align-self: center;
}
.kopf-umschalt button { padding: .45rem .8rem; }

.kopf-umschalt { --akzent: var(--volt); }
.kopf-umschalt button:hover,
.kopf-umschalt button:focus-visible { color: var(--hell); }
.kopf-umschalt button:hover::before,
.kopf-umschalt button:focus-visible::before { background: var(--linie); }

@media (max-width: 520px) { .kopf-umschalt button { padding: .4rem .55rem; } }


html.js[data-lesart="kunde"] .teil[data-lesart="job"],
html.js[data-lesart="job"] .teil[data-lesart="kunde"] { display: none; }


.anliegen[data-mehrfach] .anliegen-knopf[aria-pressed="true"] .anliegen-port::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--volt-lampe);
  clip-path: polygon(14% 48%, 38% 72%, 86% 20%, 86% 36%, 38% 88%, 14% 62%);
}
.anliegen[data-mehrfach] .anliegen-port { position: relative; }



html { scroll-padding-top: var(--kopf-h, 4rem); }

html { scroll-padding-bottom: 1.5rem; }
.teil, .abbinder, .handgriff { scroll-margin-top: 1rem; }


html:has(.strecke.webgl) .einstieg,
html:has(.strecke.film) .einstieg {
  min-height: 100svh;
  background:
    linear-gradient(90deg, #101315 0%, rgb(16 19 21 / .98) 28%,
      rgb(16 19 21 / .7) 53%, rgb(16 19 21 / .12) 100%),
    url('/assets/clips/01_dose.webp') center 58% / cover no-repeat;
}
.einstieg .t-ansage { grid-column: 1 / span 7; }
.einstieg .t-lead { grid-column: 1 / span 5; margin-top: 0; }
html[data-lesart="job"] .einstieg-marke { color: var(--bernstein); }
html[data-lesart="job"] .einstieg-marke::before { background: var(--bernstein); }
html[data-lesart="job"] .kopf-umschalt button[data-lesart="job"][aria-pressed="true"] { color: var(--ink); }
html[data-lesart="job"] .kopf-umschalt button[data-lesart="job"][aria-pressed="true"]::before { background: var(--bernstein); }
html[data-lesart="kunde"] .einstieg [data-lesart="job"],
html[data-lesart="job"] .einstieg [data-lesart="kunde"],
html[data-lesart="kunde"] .abbinder [data-lesart="job"],
html[data-lesart="job"] .abbinder [data-lesart="kunde"] { display: none; }

html.js[data-lesart="job"] .teil:is(.datenblatt, .zeichnung, .schrank) { display: none; }
.einstieg-aktion {
  grid-column: 1 / span 7;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: .5rem;
}
.einstieg-cta,
.einstieg-zweit {
  text-decoration: none;
  font-size: var(--s2);
  font-weight: 600;
  line-height: 1.2;
}
.einstieg-cta {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3rem;
  padding: .85rem 1rem;
  color: var(--ink);
  background: var(--volt);
  border: 1px solid var(--volt);
  position: relative;
  isolation: isolate;
}

.einstieg-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  opacity: 0;
  transition: opacity .22s var(--hin-her);
}
html[data-lesart="job"] .einstieg-cta { background: var(--bernstein); border-color: var(--bernstein); }
.einstieg-cta:hover,
.einstieg-cta:focus-visible { color: var(--hell); }
.einstieg-cta:hover::before,
.einstieg-cta:focus-visible::before { opacity: 1; }
.einstieg-cta:active { transform: translateY(1px); }
.einstieg-zweit { color: var(--hell); border-bottom: 1px solid var(--grau); padding-bottom: .25rem; }
.einstieg-zweit:hover,
.einstieg-zweit:focus-visible { color: var(--volt); border-color: currentColor; }
.einstieg-zweit:active { transform: translateY(1px); }
.einstieg-hinweis { margin-top: 1.25rem; }

.strecke.film .rack-leinwand {
  background: var(--ink);
  -webkit-clip-path: inset(0 var(--rack-verdeckung, 100%) 0 0);
  clip-path: inset(0 var(--rack-verdeckung, 100%) 0 0);
}
.strecke.film .film-schleier,
.strecke.film .strecke-anzeige { display: none; }
.strecke.film .strecke-stationen {
  background: var(--ink);
  border-left: 1px solid var(--linie);
}
.strecke.film .strecke-station {
  box-sizing: border-box;
  max-width: none;
  padding: 6rem clamp(1.5rem, 3.2vw, 4.5rem);
  justify-content: center;
  text-shadow: none;
}
.strecke.film .strecke-station h2,
.strecke.film .strecke-station p { text-shadow: none; }
.strecke.film .strecke-station p.stationstext { max-width: 33ch; }

@media (max-width: 860px) {
  html:has(.strecke) header.kopf { position: fixed; }
  html:has(.strecke.webgl) .einstieg,
  html:has(.strecke.film) .einstieg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 100svh;
    gap: 1rem;
    padding-top: 45svh;
    padding-bottom: 5.5rem;
    background:
      linear-gradient(to bottom, rgb(16 19 21 / .10) 0%,
        rgb(16 19 21 / .28) 28%, #101315 52%, #101315 100%),
      url('/assets/clips/01_dose.webp') 72% top / auto 53svh no-repeat,
      #101315;
  }
  .einstieg .t-ansage { max-width: 12ch; }
  .einstieg .t-lead { max-width: 40ch; }
  .einstieg-aktion { flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: .2rem; }
  .einstieg-hinweis { margin-top: 1rem; }

  .strecke.film .strecke-stationen {
    margin: -100vh 0 0;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .strecke.film .strecke-station,
  .strecke.film.webgl .strecke-station {
    min-height: 100svh;
    padding: 52svh var(--rand) 5rem;
    justify-content: flex-start;
    background: linear-gradient(to bottom,
      transparent 0 48%, #101315 52% 100%);
  }
  .strecke.film .strecke-station h2 { font-size: clamp(2.6rem, 10vw, 4.3rem); }
  .strecke.film .strecke-station p.stationstext { max-width: 36ch; }
}

@media (max-width: 520px) {
  .kopf-umschalt { margin-left: auto; margin-right: 0; }
  .kopf-umschalt button {
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: .02em;
    padding: .45rem .5rem;
  }
}


html.ruhe-wechsel::view-transition-old(root) { animation: ruhe-raus .6s ease both; }
html.ruhe-wechsel::view-transition-new(root) { animation: ruhe-rein .6s ease both; }
@keyframes ruhe-raus { to { opacity: 0; } }
@keyframes ruhe-rein { from { opacity: 0; } }


html:not(.js) .station-clip video { display: none; }
.station-clip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1px solid #2A323D; border-radius: 4px; background: var(--metall);
  box-shadow: 0 14px 40px rgba(0,0,0,.55); }

/* Northlightframe-Credit (wie glichekom.de, im Binova-Stil) */
.nlf-credit { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; padding: 2rem 0 1.75rem; border-top: 1px solid var(--linie); flex-wrap: wrap; }
.nlf-credit-label { margin: 0 0 .6rem; color: var(--bernstein); }
.nlf-credit-satz { margin: 0; max-width: 34rem; color: var(--grau); font-size: var(--s3); line-height: 1.55; }
.nlf-credit-satz a { color: var(--hell); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.nlf-credit-satz a:hover, .nlf-credit-satz a:focus-visible { color: var(--bernstein); }
.nlf-credit .nlf-signatur { padding: .8rem 1.1rem; border: 1px solid var(--linie); }
.nlf-credit .nlf-signatur:hover, .nlf-credit .nlf-signatur:focus-visible { border-color: var(--bernstein); }
.nlf-site { margin: 0; color: var(--grau); }