:root {
  color-scheme: light dark;
  --graphit: #1D1D1F;
  --grau: #6E6E73;
  --grau-leise: #64646A;
  --platin: #F5F5F7;
  --grund-tief: #EBEBF0;
  --karte: #FFFFFF;
  --karte-hoch: #FFFFFF;
  --haarlinie: #D2D2D7;
  --gewinn: #127A42;
  --verlust: #C62A22;
  --achtung: #8A5300;
  --fokus: #0B69D4;
  --haarlinie-fein: rgba(0, 0, 0, .06);
  --grund: var(--platin);
  --tinte: var(--graphit);
  --tinte-leise: var(--grau);
  --marke: var(--graphit);
  --fokus-leise: rgba(11, 105, 212, .10);
  --fokus-glut: rgba(11, 105, 212, .28);
  --bereich-schnittstellen: #BB00B3;
  --bereich-schnittstellen-leise: rgba(187, 0, 179, .10);
  --bereich-schnittstellen-glut: rgba(187, 0, 179, .28);
  --bereich-software: #CF004F;
  --bereich-software-leise: rgba(207, 0, 79, .10);
  --bereich-software-glut: rgba(207, 0, 79, .28);
  --bereich-website: #00747A;
  --bereich-website-leise: rgba(0, 116, 122, .10);
  --bereich-website-glut: rgba(0, 116, 122, .28);
  --bereich-app: #C8007F;
  --bereich-app-leise: rgba(200, 0, 127, .10);
  --bereich-app-glut: rgba(200, 0, 127, .28);
  --bereich-ki-integration: #5A46FF;
  --bereich-ki-integration-leise: rgba(90, 70, 255, .10);
  --bereich-ki-integration-glut: rgba(90, 70, 255, .28);
  --bereich-gestaltung: #6D6B00;
  --bereich-gestaltung-leise: rgba(109, 107, 0, .10);
  --bereich-gestaltung-glut: rgba(109, 107, 0, .28);

  --satz: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --breite-text: min(680px, 100% - 48px);
  --breite-voll: min(1180px, 100% - 48px);
  --breite-weit: min(1400px, 100% - 48px);
  --lesezeile-max: 68ch;

  --schrift-riese: clamp(2.5rem, 6.2vw, 4.8rem);
  --schrift-gross: clamp(2.1rem, 5.4vw, 3.9rem);
  --schrift-mittel: clamp(1.45rem, 3vw, 2.05rem);
  --schrift-fuehrung: clamp(1.14rem, 2.1vw, 1.42rem);
  --schrift-fliess: 17px;
  --schrift-klein: .94rem;
  --schrift-normal: 1rem;
  --schrift-winzig: .81rem;
  --schrift-mini: .88rem;
  --schrift-etikett: .69rem;

  --abstand-haar: 2px;
  --abstand-winzig: 4px;
  --abstand-eng: 8px;
  --abstand-knapp: 12px;
  --abstand-normal: 14px;
  --abstand-weit: 18px;
  --abstand-gross: 22px;
  --abstand-sehr-gross: 26px;
  --abstand-riesig: 30px;
  --abstand-abschnitt: clamp(64px, 8vw, 112px);
  --abstand-abschnitt-eng: clamp(22px, 3vw, 40px);
  --abstand-vor-stufenlinie: clamp(30px, 4vw, 56px);

  --r-gross: 20px;
  --r-innen: 13px;
  --r-klein: 8px;
  --r-rund: 999px;

  --schatten-knopf: 0 10px 30px -10px color-mix(in srgb, var(--tinte) 55%, transparent);
  --schatten-karte: 0 22px 48px -26px color-mix(in srgb, var(--tinte) 40%, transparent);
  --schatten-feld: 0 24px 50px -28px color-mix(in srgb, var(--tinte) 45%, transparent);
  --schatten-regler: 0 2px 8px -2px color-mix(in srgb, var(--tinte) 60%, transparent);

  --halt-winzig: 560px;
  --halt-schmal: 620px;
  --halt-klein: 760px;
  --halt-mittel: 900px;
  --halt-menue: 1100px;

  --stufe-zeit: .72s;
  --stufe-kurve: cubic-bezier(.16, 1, .3, 1);
  --schnell: cubic-bezier(.2, .8, .2, 1);
  --stufenlinie-zeit: 1.5s;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --graphit: #F5F5F7;
    --grau: #98989D;
    --grau-leise: #86868B;
    --platin: #000000;
    --grund-tief: #0A0A0C;
    --karte: #1C1C1E;
    --karte-hoch: #242428;
    --haarlinie: #38383A;
    --gewinn: #30D158;
    --verlust: #FF453A;
    --achtung: #FF9F0A;
    --fokus: #0A84FF;
    --haarlinie-fein: rgba(255, 255, 255, .07);
    --grund: var(--platin);
    --tinte: var(--graphit);
    --tinte-leise: var(--grau);
    --marke: var(--graphit);
    --fokus-leise: rgba(10, 132, 255, .14);
    --fokus-glut: rgba(10, 132, 255, .40);
    --bereich-schnittstellen: #FF5CF3;
    --bereich-schnittstellen-leise: rgba(255, 92, 243, .14);
    --bereich-schnittstellen-glut: rgba(255, 92, 243, .40);
    --bereich-software: #FF738A;
    --bereich-software-leise: rgba(255, 115, 138, .14);
    --bereich-software-glut: rgba(255, 115, 138, .40);
    --bereich-website: #00B2BA;
    --bereich-website-leise: rgba(0, 178, 186, .14);
    --bereich-website-glut: rgba(0, 178, 186, .40);
    --bereich-app: #FF6CB6;
    --bereich-app-leise: rgba(255, 108, 182, .14);
    --bereich-app-glut: rgba(255, 108, 182, .40);
    --bereich-ki-integration: #AC8EFF;
    --bereich-ki-integration-leise: rgba(172, 142, 255, .14);
    --bereich-ki-integration-glut: rgba(172, 142, 255, .40);
    --bereich-gestaltung: #A8A500;
    --bereich-gestaltung-leise: rgba(168, 165, 0, .14);
    --bereich-gestaltung-glut: rgba(168, 165, 0, .40);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --graphit: #F5F5F7;
  --grau: #98989D;
  --grau-leise: #86868B;
  --platin: #000000;
  --grund-tief: #0A0A0C;
  --karte: #1C1C1E;
  --karte-hoch: #242428;
  --haarlinie: #38383A;
  --gewinn: #30D158;
  --verlust: #FF453A;
  --achtung: #FF9F0A;
  --fokus: #0A84FF;
  --haarlinie-fein: rgba(255, 255, 255, .07);
  --grund: var(--platin);
  --tinte: var(--graphit);
  --tinte-leise: var(--grau);
  --marke: var(--graphit);
  --fokus-leise: rgba(10, 132, 255, .14);
  --fokus-glut: rgba(10, 132, 255, .40);
  --bereich-schnittstellen: #FF5CF3;
  --bereich-schnittstellen-leise: rgba(255, 92, 243, .14);
  --bereich-schnittstellen-glut: rgba(255, 92, 243, .40);
  --bereich-software: #FF738A;
  --bereich-software-leise: rgba(255, 115, 138, .14);
  --bereich-software-glut: rgba(255, 115, 138, .40);
  --bereich-website: #00B2BA;
  --bereich-website-leise: rgba(0, 178, 186, .14);
  --bereich-website-glut: rgba(0, 178, 186, .40);
  --bereich-app: #FF6CB6;
  --bereich-app-leise: rgba(255, 108, 182, .14);
  --bereich-app-glut: rgba(255, 108, 182, .40);
  --bereich-ki-integration: #AC8EFF;
  --bereich-ki-integration-leise: rgba(172, 142, 255, .14);
  --bereich-ki-integration-glut: rgba(172, 142, 255, .40);
  --bereich-gestaltung: #A8A500;
  --bereich-gestaltung-leise: rgba(168, 165, 0, .14);
  --bereich-gestaltung-glut: rgba(168, 165, 0, .40);
}

:root[data-theme="light"] {
  color-scheme: light;
  --graphit: #1D1D1F;
  --grau: #6E6E73;
  --grau-leise: #64646A;
  --platin: #F5F5F7;
  --grund-tief: #EBEBF0;
  --karte: #FFFFFF;
  --karte-hoch: #FFFFFF;
  --haarlinie: #D2D2D7;
  --gewinn: #127A42;
  --verlust: #C62A22;
  --achtung: #8A5300;
  --fokus: #0B69D4;
  --haarlinie-fein: rgba(0, 0, 0, .06);
  --grund: var(--platin);
  --tinte: var(--graphit);
  --tinte-leise: var(--grau);
  --marke: var(--graphit);
  --fokus-leise: rgba(11, 105, 212, .10);
  --fokus-glut: rgba(11, 105, 212, .28);
  --bereich-schnittstellen: #BB00B3;
  --bereich-schnittstellen-leise: rgba(187, 0, 179, .10);
  --bereich-schnittstellen-glut: rgba(187, 0, 179, .28);
  --bereich-software: #CF004F;
  --bereich-software-leise: rgba(207, 0, 79, .10);
  --bereich-software-glut: rgba(207, 0, 79, .28);
  --bereich-website: #00747A;
  --bereich-website-leise: rgba(0, 116, 122, .10);
  --bereich-website-glut: rgba(0, 116, 122, .28);
  --bereich-app: #C8007F;
  --bereich-app-leise: rgba(200, 0, 127, .10);
  --bereich-app-glut: rgba(200, 0, 127, .28);
  --bereich-ki-integration: #5A46FF;
  --bereich-ki-integration-leise: rgba(90, 70, 255, .10);
  --bereich-ki-integration-glut: rgba(90, 70, 255, .28);
  --bereich-gestaltung: #6D6B00;
  --bereich-gestaltung-leise: rgba(109, 107, 0, .10);
  --bereich-gestaltung-glut: rgba(109, 107, 0, .28);
}

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/schriften/inter-400.a758fd5467.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/schriften/inter-500.d7bee9ef82.woff2") format("woff2");
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/schriften/inter-600.c1915a8df5.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/schriften/jbmono-400.96ab64fcc4.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/schriften/jbmono-500.06fd2b5df7.woff2") format("woff2");
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--satz);
  font-size: var(--schrift-fliess);
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background .5s var(--schnell), color .5s var(--schnell);
}

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

::selection {
  background: var(--fokus);
  color: #fff;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.028em;
  text-wrap: balance;
  line-height: 1.06;
}

p { margin: 0; text-wrap: pretty; }

.riese {

  font-size: var(--schrift-riese);
  letter-spacing: -.018em;
  line-height: 1.02;
  font-weight: 600;
}

.gross {
  font-size: var(--schrift-gross);
  letter-spacing: -.036em;
  line-height: 1.03;
}

.mittel {
  font-size: var(--schrift-mittel);
  letter-spacing: -.026em;
  line-height: 1.15;
}

.fuehrung {
  font-size: var(--schrift-fuehrung);
  line-height: 1.5;
  color: var(--tinte-leise);
  letter-spacing: -.014em;
  font-weight: 400;
}

.klein   { font-size: var(--schrift-klein); line-height: 1.5; }
.winzig  { font-size: var(--schrift-winzig); line-height: 1.45; }

.etikett {
  color: var(--bereich);
}

.bereich-raum .etikett::before {
  opacity: .85;
}

.bereich-raum .stufenlinie path {
  stroke: var(--bereich);
  opacity: .5;
}

.bereich-raum .buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 12% 0%, var(--bereich-leise), transparent 62%);
  z-index: 0;
}
.bereich-raum .buehne-inhalt { position: relative; z-index: 1; }

.etikett {
  font-family: var(--mono);
  font-size: var(--schrift-etikett);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

.etikett::before {
  content: "";
  width: 16px;
  height: 8px;
  flex: none;
  transform: translateY(-1px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%    1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%    1.5px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.5px  100%  no-repeat;
  opacity: .55;
}

.zahl {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-weight: 500;
}

.rumpf { width: var(--breite-voll); margin-inline: auto; }
.rumpf-weit { width: var(--breite-weit); margin-inline: auto; }

.rumpf-text {
  width: var(--breite-voll);
  margin-inline: auto;
}

.rumpf-text > * { max-width: 68ch; }

.rumpf-text.mitte { text-align: center; }
.rumpf-text.mitte > * { margin-inline: auto; }

section { position: relative; }

.abschnitt {
  padding-block: clamp(64px, 8vw, 112px);
}

.abschnitt-eng { padding-block: clamp(var(--abstand-gross), 3vw, 40px); }

.abschnitt:has(+ .abschnitt-eng) { padding-bottom: clamp(var(--abstand-riesig), 4vw, 56px); }

.stufenlinie {
  height: 34px;
  width: 100%;
  color: var(--haarlinie);
  overflow: visible;
}

.stufenlinie path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--laenge, 1200);
  stroke-dashoffset: 0;
}

.js .stufenlinie path { stroke-dashoffset: var(--laenge, 1200); }

.js .stufenlinie.sichtbar path {
  animation: linie-zeichnen 1.5s var(--stufe-kurve) forwards;
}

@keyframes linie-zeichnen {
  to { stroke-dashoffset: 0; }
}

.js [data-auftritt] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity   var(--stufe-zeit) var(--stufe-kurve),
    transform var(--stufe-zeit) var(--stufe-kurve),
    filter    var(--stufe-zeit) var(--stufe-kurve);
  filter: blur(6px);
  will-change: opacity, transform;
}

.js [data-auftritt].da {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.js .buehne [data-auftritt] {
  opacity: 1;
  transform: none;
  filter: none;

  animation: auftritt-selbst var(--stufe-zeit) var(--stufe-kurve);
}

@keyframes auftritt-selbst {
  from { transform: translate3d(0, 14px, 0); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .buehne [data-auftritt] { animation: none; }
}

.js [data-auftritt="seite"]        { transform: translate3d(-22px, 0, 0); }
.js [data-auftritt="seite-rechts"] { transform: translate3d(22px, 0, 0); }

@media (max-width: 780px) {
  .js [data-auftritt="seite"],
  .js [data-auftritt="seite-rechts"] { transform: translate3d(0, 22px, 0); }
}
.js [data-auftritt="ruhig"]        { transform: none; filter: none; }
.js [data-auftritt="skala"]        { transform: scale(.965); filter: blur(4px); }

.zeile-huelle {
  display: block; overflow: hidden;
  padding-bottom: .18em; margin-bottom: -.18em;
}

.js .zeile {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--stufe-kurve);
  will-change: transform;
}

.js .da .zeile, .js .zeile.da { transform: none; }

.zeilen-wort { display: inline; }

.js [data-zeilen] { display: flow-root; }

.js [data-zeilen] .zeile { transition-delay: var(--zeile-verzug, 0ms); }

.js [data-zeilen] .zeile.zeile-still {
  transition: none; transform: none; will-change: auto;
}

@media (prefers-reduced-motion: reduce) {

  .js [data-zeilen] .zeile,
  .js [data-zeilen] .zeile.zeile-still { transform: none; transition: none; }
}

@media print {

  .js [data-zeilen] .zeile-huelle { overflow: visible; }
  .js [data-zeilen] .zeile,
  .js [data-zeilen] .zeile.zeile-still { transform: none; transition: none; }
}

.kopf {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: var(--abstand-normal);
  transition: transform .45s var(--schnell), background .35s, backdrop-filter .35s,
              border-color .35s, padding .35s var(--schnell);
  border-bottom: 1px solid transparent;
}

.kopf.geheftet {
  background: color-mix(in srgb, var(--grund) 78%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: var(--haarlinie-fein);
  padding-block: 9px;
}

.kopf.versteckt { transform: translateY(-104%); }

.kopf-innen {
  width: var(--breite-weit);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.marke-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--marke);
  flex: none;
}

.marke-link .bildmarke { width: 26px; height: 26px; }

.wortmarke {
  font-size: var(--schrift-normal);
  font-weight: 600;
  letter-spacing: -.028em;
  white-space: nowrap;
}

.wortmarke .punkt-ai {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -.02em;
}

.kopf-nav {
  display: flex;
  align-items: center;
  gap: var(--abstand-haar);
  margin-left: auto;
}

.nav-punkt {
  position: relative;
  padding: 7px 13px;
  font-size: var(--schrift-mini);
  color: var(--tinte-leise);
  border-radius: var(--r-klein);
  transition: color .25s, background .25s;
  white-space: nowrap;
}

.nav-punkt:hover { color: var(--tinte); background: var(--haarlinie-fein); }
.nav-punkt[aria-current="page"] { color: var(--tinte); font-weight: 500; }

.nav-punkt[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 1.5px;
  background: var(--fokus);
  border-radius: 2px;
}

.themenschalter {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--haarlinie);
  background: transparent;
  color: var(--tinte-leise);
  border-radius: var(--r-rund);
  cursor: pointer;
  transition: color .25s, border-color .25s, transform .25s var(--schnell);
}

.themenschalter:hover { color: var(--tinte); border-color: var(--tinte-leise); transform: rotate(18deg); }
.themenschalter svg { width: 15px; height: 15px; }
.themenschalter .sonne { display: none; }
:root[data-theme="dark"] .themenschalter .sonne,
:root[data-theme="dark"] .themenschalter .mond { display: revert; }

.unter-kopf .etikett a { color: inherit; text-decoration: none; }
.unter-kopf .etikett a:hover { color: var(--fokus); }
.unter-these { font-size: clamp(2.1rem, 5.6vw, 3.5rem); max-width: 18ch; }

.unter-abschnitt { margin-top: 52px; }
.unter-abschnitt:first-child { margin-top: 40px; }
.unter-h2 { font-size: 1.24rem; display: flex; align-items: baseline; gap: .7em; }
.unter-nr {
  font-family: var(--mono); font-size: var(--schrift-etikett); font-weight: 500;
  color: var(--tinte-leise); flex: none;
}
.unter-abschnitt .fliess { margin-top: var(--abstand-knapp); }
.unter-abschnitt .bereich-liste { margin-top: var(--abstand-normal); }

.unter-kasten {
  margin-top: 40px; padding: var(--abstand-gross) 24px;
  border: 1px solid var(--haarlinie); border-radius: var(--r-innen);
  background: var(--karte);
}
.unter-kasten p:last-child { margin: 10px 0 0; color: var(--tinte-leise); }

.unter-tafel { overflow-x: auto; margin-top: 16px; }
.unter-tafel table { border-collapse: collapse; width: 100%; font-size: var(--schrift-klein); }
.unter-tafel td {
  padding: 10px 16px 10px 0; vertical-align: top;
  border-bottom: 1px solid var(--haarlinie);
}
.unter-tafel td:first-child { font-weight: 600; width: 34%; }

.unter-form-werkschau .rumpf-text { --breite-text: min(1000px, 100% - 48px); }

.werk-register { margin-top: var(--abstand-weit); display: grid; gap: var(--abstand-riesig) 40px; }
@media (min-width: 720px)  { .werk-register { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .werk-register { grid-template-columns: 1fr 1fr 1fr; } }

@media (min-width: 720px) {
  .werk-register.werk-bahn {
    display: flex;
    gap: 40px;
    overflow-x: auto;

    overflow-y: hidden;

    scroll-behavior: auto;

    overscroll-behavior-x: contain;

    padding-bottom: var(--abstand-knapp);
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: var(--haarlinie) transparent;
  }

  .werk-register.werk-bahn > .werk-gruppe { flex: 0 0 clamp(228px, 24vw, 290px); }
}

.werk-register.werk-bahn::-webkit-scrollbar { height: 8px; }
.werk-register.werk-bahn::-webkit-scrollbar-track { background: transparent; }
.werk-register.werk-bahn::-webkit-scrollbar-thumb {
  background: var(--haarlinie);
  border-radius: 99px;
}
.werk-register.werk-bahn::-webkit-scrollbar-thumb:hover { background: var(--tinte-leise); }

.bahn-lauf {
  display: none;
  height: 3px;
  margin-top: var(--abstand-knapp);
  border-radius: 99px;
  overflow: hidden;
  background-color: var(--haarlinie-fein);
  background-image: linear-gradient(to right, var(--haarlinie) 0 1px, transparent 1px);
  background-size: calc(100% / var(--bahn-stufen, 6)) 100%;
}

@media (min-width: 720px) { .bahn-lauf { display: block; } }

.bahn-lauf.aus { display: none; }

.bahn-lauf span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fokus);

  width: calc(var(--bahn-anteil, 1) * 100%);
  margin-left: calc(var(--bahn-stufe, 0) * (100% - var(--bahn-anteil, 1) * 100%));

  transition: margin-left .18s cubic-bezier(.3, 1.4, .5, 1);
}

.werk-gruppe { break-inside: avoid; }
.werk-gruppentitel {
  font-family: var(--mono); font-size: var(--schrift-etikett); letter-spacing: .12em;
  text-transform: uppercase; color: var(--tinte-leise); font-weight: 500;
  padding-bottom: 7px; border-bottom: 1px solid var(--haarlinie); margin: 0;
}
.werk-liste { list-style: none; margin: 9px 0 0; padding: 0; }
.werk-liste li {
  display: flex; gap: .8em; align-items: baseline;
  font-size: var(--schrift-klein); line-height: 1.45; padding: var(--abstand-winzig) 0;
}
.werk-nr {
  font-family: var(--mono); font-size: var(--schrift-winzig); color: var(--tinte-leise);
  flex: none; font-variant-numeric: tabular-nums;
}

.unter-form-fall .rumpf-text { --breite-text: min(660px, 100% - 48px); }
.unter-form-fall .unter-abschnitt { margin-top: 74px; }

.fall-etappen { list-style: none; margin: var(--abstand-gross) 0 0; padding: 0 0 0 34px; position: relative; }
.fall-etappen::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px; background: var(--haarlinie);
}
.fall-etappen > li { position: relative; margin-bottom: 46px; }
.fall-etappen > li:last-child { margin-bottom: 0; }
.fall-etappen > li::before {
  content: ""; position: absolute; left: -34px; top: .55em;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--grund); border: 1.5px solid var(--tinte-leise);
}
.fall-etappen .nr {
  font-family: var(--mono); font-size: var(--schrift-etikett); letter-spacing: .12em;
  color: var(--tinte-leise); display: block; margin-bottom: var(--abstand-winzig);
}
.fall-etappen h3 { font-size: var(--schrift-normal); font-weight: 600; margin: 0 0 7px; }
.fall-etappen p { margin: 0; color: var(--tinte-leise); }

.unter-form-grenzen .rumpf-text { --breite-text: min(820px, 100% - 48px); }

.grenz-tafel { overflow-x: auto; margin-top: 16px; }
.grenz-tafel table { border-collapse: collapse; width: 100%; font-size: var(--schrift-klein); }
.grenz-tafel td {
  width: 50%; padding: 13px var(--abstand-weit); vertical-align: top;
  border: 1px solid var(--haarlinie); font-weight: 400;
}
.grenz-tafel td:first-child { border-right: 0; }
.grenz-tafel td:last-child { border-left: 0; color: var(--tinte-leise); }
.grenz-tafel sup {
  font-family: var(--mono); font-size: .62em; color: var(--tinte-leise);
  margin-right: .5em; vertical-align: super;
}
.grenz-tafel thead th {
  padding: 0 var(--abstand-weit) 10px; text-align: left; font-weight: 400;
  font-size: var(--schrift-winzig); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinte-leise);
}

@media (max-width: 640px) {
  .grenz-tafel { overflow-x: visible; }
  .grenz-tafel table,
  .grenz-tafel tbody,
  .grenz-tafel tr,
  .grenz-tafel td { display: block; width: auto; }

  .grenz-tafel thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .grenz-tafel thead th { padding: 0; font-size: 0; }
  .grenz-tafel tr { border: 1px solid var(--haarlinie); margin-bottom: 10px; }
  .grenz-tafel td { border: 0; padding: var(--abstand-knapp) 15px; }
  .grenz-tafel td:first-child { border-bottom: 1px solid var(--haarlinie); }
  .grenz-tafel td::before {
    content: attr(data-spalte); display: block; margin-bottom: 5px;
    font-family: var(--mono); font-size: var(--schrift-etikett); letter-spacing: .09em;
    text-transform: uppercase; color: var(--tinte-leise);
  }
}

.groesse-band { white-space: nowrap; }

.band-hinweis {
  font-size: var(--schrift-winzig); color: var(--tinte-leise);
  white-space: nowrap;
}

.grenz-begruendungen { list-style: none; margin: var(--abstand-weit) 0 0; padding: 0; }
.grenz-begruendungen > li {
  display: grid; grid-template-columns: 2.4em 1fr; gap: 0 .6em;
  padding: 15px 0; border-bottom: 1px solid var(--haarlinie-fein);
}
.grenz-begruendungen .nr {
  font-family: var(--mono); font-size: var(--schrift-winzig); color: var(--tinte-leise);
  padding-top: .2em; font-variant-numeric: tabular-nums;
}

.grenz-begruendungen h3,
.grenz-begruendungen p { grid-column: 2; }
.grenz-begruendungen h3 { font-size: var(--schrift-normal); font-weight: 600; margin: 0 0 5px; }
.grenz-begruendungen p { margin: 0; font-size: var(--schrift-klein); color: var(--tinte-leise); }

.unter-nachbarn { margin-top: 20px; display: grid; gap: var(--abstand-knapp); }
@media (min-width: 720px) { .unter-nachbarn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.unter-nachbar {
  display: block; padding: var(--abstand-weit) 20px; text-decoration: none; color: inherit;
  border: 1px solid var(--haarlinie); border-radius: var(--r-innen);
  background: var(--karte); position: relative;
  transition: border-color .22s var(--schnell), transform .22s var(--schnell);
}
.unter-nachbar:hover { border-color: var(--tinte-leise); transform: translateY(-2px); }
.unter-nachbar b { display: block; font-size: var(--schrift-normal); font-weight: 600; }
.unter-nachbar span {
  display: block; margin-top: 6px; font-size: var(--schrift-mini);
  color: var(--tinte-leise); line-height: 1.5;
}
.unter-nachbar .pfeil { position: absolute; top: 18px; right: 18px; width: 14px; height: 14px; opacity: .4; }

.fuss-hinweis { color: var(--tinte-leise); font-size: var(--schrift-winzig); margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .unter-nachbar { transition: none; }
  .unter-nachbar:hover { transform: none; }
}

.nav-gruppe { position: static; display: flex; align-items: center; }

.nav-auf {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: .38em;
  padding: 7px 13px; border-radius: var(--r-rund);
  font-size: var(--schrift-mini); white-space: nowrap;
}
.nav-auf::after {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: .5; transition: transform .3s var(--schnell), opacity .3s;
}
.nav-gruppe:hover > .nav-auf::after,
.nav-auf[aria-expanded="true"]::after {
  opacity: 1; transform: rotate(-135deg) translate(-2px, -2px);
}

.nav-unter {
  position: absolute; left: 0; right: 0; top: 100%;
  background: color-mix(in srgb, var(--grund) 97%, transparent);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--haarlinie);
  padding: var(--abstand-riesig) 0 34px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s var(--schnell), transform .26s var(--schnell),
              visibility 0s linear .26s;
  z-index: 5;
}
.nav-gruppe:hover > .nav-unter,
.nav-gruppe:focus-within > .nav-unter,
.nav-unter.offen {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}

.nav-unter-innen {
  width: var(--breite-voll); margin-inline: auto;
  display: grid; gap: var(--abstand-winzig) 34px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nav-unter-kopf {
  grid-column: 1 / -1; margin-bottom: var(--abstand-normal);
  display: flex; align-items: baseline; gap: var(--abstand-normal); flex-wrap: wrap;
}
.nav-unter-kopf .etikett { margin: 0; }
.nav-unter-kopf a { color: var(--fokus); font-size: var(--schrift-winzig); text-decoration: none; }
.nav-unter-kopf a:hover { text-decoration: underline; }

.unter-punkt {
  display: block; padding: 11px 13px; border-radius: var(--r-innen);
  text-decoration: none; color: inherit;
  transition: background .2s var(--schnell);
}
.unter-punkt:hover { background: var(--karte); }
.unter-punkt b { display: block; font-size: var(--schrift-klein); font-weight: 600; }
.unter-punkt span {
  display: block; margin-top: var(--abstand-haar); font-size: var(--schrift-winzig);
  color: var(--tinte-leise); line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .nav-unter { transition: none; transform: none; }
  .nav-auf::after { transition: none; }
}

.menue-knopf {
  position: relative;
  display: none;
  flex: none;
  width: 34px; height: 34px;
  place-items: center;
  border: 1px solid var(--haarlinie);
  background: transparent;
  color: var(--tinte);
  border-radius: var(--r-rund);
  cursor: pointer;
}

.menue-knopf span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px; height: 1.5px;
  margin-left: -7.5px;
  margin-top: -0.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .34s var(--stufe-kurve), opacity .2s;
}

.menue-knopf span:nth-child(1) { transform: translateY(-5px); }
.menue-knopf span:nth-child(2) { transform: translateY(0); }
.menue-knopf span:nth-child(3) { transform: translateY(5px); }

.menue-knopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-knopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.buehne {
  position: relative;

  min-height: 82svh;
}

.buehne-kurz {
  min-height: auto;
  padding-block: clamp(56px, 11vh, 130px) clamp(40px, 7vh, 76px);
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.buehne-leinwand {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;

  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%,
                    rgba(0,0,0,.9) 52%, #000 70%),
    linear-gradient(to bottom, transparent 0, #000 96px);
          mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%,
                    rgba(0,0,0,.9) 52%, #000 70%),
    linear-gradient(to bottom, transparent 0, #000 96px);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

@media (max-width: 760px) {

  .buehne-leinwand {
    -webkit-mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 74%, transparent 96%);
            mask-image:
      linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,.28) 74%, transparent 96%);
  }
}

.buehne::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34vh;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--grund) 88%);
  pointer-events: none;
}

.buehne-inhalt {
  width: var(--breite-weit);
  margin-inline: auto;
  padding-block: 150px 108px;
  position: relative;
  z-index: 1;
}

.buehne-these {
  max-width: 19ch;
  margin-top: var(--abstand-gross);
}

.buehne-fuehrung {
  max-width: 46ch;
  margin-top: var(--abstand-sehr-gross);
}

.buehne-fuss {
  margin-top: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-normal);
}

.scroll-wink {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--tinte-leise);
  z-index: 1;
  pointer-events: none;
}

.scroll-wink .balken {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, transparent, currentColor);
  transform-origin: top;
  animation: wink 2.4s var(--schnell) infinite;
}

@keyframes wink {
  0%, 100% { transform: scaleY(.34); opacity: .3; }
  50%      { transform: scaleY(1);   opacity: .9; }
}

.knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-rund);
  font-size: var(--schrift-klein);
  font-weight: 500;
  letter-spacing: -.012em;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--schnell), box-shadow .3s, background .3s,
              color .3s, border-color .3s;
  isolation: isolate;
}

.knopf-voll {
  background: var(--tinte);
  color: var(--grund);
}

.knopf-voll:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--tinte) 55%, transparent);
}

.knopf-linie {
  border-color: var(--haarlinie);
  color: var(--tinte);
  background: transparent;
}

.knopf-linie:hover {
  border-color: var(--tinte);
  transform: translateY(-2px);
}

.knopf:active { transform: translateY(0) scale(.985); }

.knopf .pfeil {
  width: 15px; height: 15px;
  transition: transform .34s var(--stufe-kurve);
}
.knopf:hover .pfeil { transform: translate(3px, -3px); }

.beleg {
  position: relative;
  display: inline;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: inherit;
}

.beleg-wert {
  position: relative;
  display: inline-block;
  border-bottom: 1.5px dashed color-mix(in srgb, var(--fokus) 55%, transparent);
  transition: color .25s, border-color .25s;
}

.beleg:hover .beleg-wert,
.beleg[aria-expanded="true"] .beleg-wert {
  color: var(--fokus);
  border-bottom-color: var(--fokus);
}

.beleg-quelle {
  display: inline grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--stufe-kurve), opacity .3s, margin .5s var(--stufe-kurve);
  opacity: 0;
  margin-top: 0;
}

.beleg-quelle.offen {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--abstand-knapp);
}

.beleg-quelle > * { overflow: hidden; display: block; }

.quelle-karte {
  display: block;
  max-width: 100%;
  font-family: var(--mono);
  font-size: var(--schrift-winzig);
  line-height: 1.65;
  background: var(--grund-tief);
  border: 1px solid var(--haarlinie-fein);
  border-left: 2px solid var(--fokus);
  border-radius: var(--r-klein);
  padding: 11px var(--abstand-normal);
  color: var(--tinte-leise);
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.quelle-karte .befehl { display: inline-block; }

.quelle-karte .befehl { color: var(--tinte); }
.quelle-karte .kommentar { color: var(--grau-leise); }

.quelle-karte .befehl.tippt::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .08em;
  background: var(--fokus);
  vertical-align: text-bottom;
  animation: blinken .68s steps(1) infinite;
}

@keyframes blinken {
  0%, 50%   { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}

.messtafel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--haarlinie-fein);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
}

@media (min-width: 560px) {
  .messtafel { grid-template-columns: repeat(auto-fit, minmax(228px, minmax(0, 1fr))); }
}

.messfeld {
  background: var(--karte);
  padding: var(--abstand-sehr-gross) 24px var(--abstand-gross);
  position: relative;
  transition: background .3s;
}

.messfeld:hover { background: var(--karte-hoch); }

.messfeld-wert {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  display: block;
}

.ziffer-huelle {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.js .ziffer {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .78s var(--stufe-kurve), opacity .5s var(--stufe-kurve);
}

.js [data-zaehl].da .ziffer {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .ziffer { transform: none; opacity: 1; }
}

.messfeld-einheit {
  font-size: .48em;
  font-weight: 500;
  color: var(--tinte-leise);
  margin-left: .18em;
  letter-spacing: 0;
}

.messfeld-name {
  margin-top: 9px;
  font-size: var(--schrift-klein);
  color: var(--tinte);
  font-weight: 500;
}

.messfeld-bei {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: var(--schrift-etikett);
  color: var(--tinte-leise);
  letter-spacing: -.01em;
}

.zweispalt {
  display: grid;
  gap: clamp(var(--abstand-riesig), 5vw, 60px);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 780px) {
  .zweispalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bereiche {
  display: grid;
  gap: var(--abstand-weit);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 620px) {
  .bereiche { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), minmax(0, 1fr))); }
}

@media (min-width: 880px) {
  .bereiche-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bereich {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--abstand-riesig) 28px var(--abstand-sehr-gross);
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
  isolation: isolate;
  transition: transform .55s var(--stufe-kurve), border-color .4s, box-shadow .55s var(--stufe-kurve);
  transform-style: preserve-3d;
}

.bereich:hover {
  border-color: color-mix(in srgb, var(--fokus) 34%, var(--haarlinie));
  box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--tinte) 40%, transparent);
}

.bereich-nr {
  font-family: var(--mono);
  font-size: var(--schrift-etikett);
  color: var(--tinte-leise);
  letter-spacing: .1em;
}

.bereich-name {
  margin-top: var(--abstand-normal);
  font-size: var(--schrift-fuehrung);
  font-weight: 600;
  letter-spacing: -.028em;
}

.bereich-satz {
  margin-top: 10px;
  color: var(--tinte-leise);
  font-size: var(--schrift-klein);
  line-height: 1.5;
}

.bereich-liste {
  margin: var(--abstand-weit) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  font-size: var(--schrift-mini);
  color: var(--tinte-leise);
}

.bereich-liste li {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.bereich-liste li::before {
  content: "";
  flex: none;
  width: 12px; height: 6px;
  color: var(--fokus);
  transform: translateY(-3px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.3px 100%  no-repeat;
}

.bereich-fuss {
  margin-top: auto;
  padding-top: var(--abstand-gross);
  display: flex;
  align-items: center;
  gap: var(--abstand-eng);
  font-size: var(--schrift-mini);
  font-weight: 500;
  color: var(--fokus);
}

.bereich-fuss .pfeil {
  width: 14px; height: 14px;
  transition: transform .34s var(--stufe-kurve);
}

.bereich:hover .bereich-fuss .pfeil { transform: translate(3px, -3px); }

.bereich-deckel::after {
  content: "";
  position: absolute;
  inset: 0;
}

.kennliste {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.kennzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--abstand-weit);
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.kennzeile:first-child { border-top: 1px solid var(--haarlinie-fein); }

.kennzeile dt { color: var(--tinte-leise); font-size: var(--schrift-klein); margin: 0; }

.kennzeile dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
  letter-spacing: -.02em;
}

.ablauf {
  counter-reset: schritt;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  position: relative;
}

.schritt {
  position: relative;
  padding: var(--abstand-sehr-gross) 0 26px 62px;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.schritt:first-child { border-top: 1px solid var(--haarlinie-fein); }

.schritt::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  left: 0; top: 26px;
  font-family: var(--mono);
  font-size: var(--schrift-winzig);
  font-weight: 500;
  color: var(--fokus);
  letter-spacing: .06em;
}

.schritt::after {
  content: "";
  position: absolute;
  left: 12px; top: 46px; bottom: -1px;
  width: 1px;
  background: var(--haarlinie-fein);
}

.schritt:last-child::after { display: none; }

.schritt h3 { font-size: var(--schrift-fuehrung); font-weight: 600; letter-spacing: -.022em; }
.schritt p  { margin-top: 7px; color: var(--tinte-leise); font-size: var(--schrift-klein); }

.grenze {
  display: grid;
  gap: var(--abstand-knapp);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .grenze { grid-template-columns: repeat(auto-fit, minmax(258px, minmax(0, 1fr))); }
}

.grenzfeld {
  padding: 20px var(--abstand-gross);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-innen);
  background: var(--karte);
}

.grenzfeld h4 {
  font-size: var(--schrift-normal);
  display: flex;
  align-items: center;
  gap: 9px;
}

.grenzfeld h4::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--verlust);
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 6px 1.5px no-repeat;
  color: var(--verlust);
}

.grenzfeld p { margin-top: var(--abstand-eng); color: var(--tinte-leise); font-size: var(--schrift-mini); }

.merksatz {
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.032em;
  line-height: 1.16;
  text-wrap: balance;
}

.merksatz em {
  font-style: normal;
  color: var(--fokus);
}

.fuss {
  border-top: 1px solid var(--haarlinie-fein);
  padding-block: 64px 40px;
  margin-top: 60px;
}

.fuss-raster {
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(140px, 1fr));
  align-items: start;
}

.fuss-spalte h5 {
  margin: 0 0 var(--abstand-normal);
  font-family: var(--mono);
  font-size: var(--schrift-etikett);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
}

.fuss-spalte ul { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 9px; }
.fuss-spalte a { color: var(--tinte-leise); font-size: var(--schrift-klein); transition: color .25s; }
.fuss-spalte a:hover { color: var(--tinte); }

.fuss-unten {
  margin-top: 48px;
  padding-top: var(--abstand-gross);
  border-top: 1px solid var(--haarlinie-fein);
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-normal) var(--abstand-sehr-gross);
  align-items: center;
  justify-content: space-between;
  font-size: var(--schrift-winzig);
  color: var(--tinte-leise);
}

.fuss-unten .mono { font-family: var(--mono); letter-spacing: -.01em; }

.hinweisband {
  background: color-mix(in srgb, var(--achtung) 12%, var(--grund));
  border-bottom: 1px solid color-mix(in srgb, var(--achtung) 30%, transparent);
  color: var(--tinte);
  font-size: var(--schrift-winzig);
  padding: 9px 0;
  text-align: center;
  position: relative;
  z-index: 95;
}

.hinweisband strong { font-weight: 600; }
.hinweisband .mono { font-family: var(--mono); font-size: var(--schrift-klein); }

.bildmarke {
  color: currentColor;
  flex: none;
}

.bildmarke path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  :root {
    --breite-text: min(680px, 100% - 36px);
    --breite-voll: min(1180px, 100% - 36px);
    --breite-weit: min(1400px, 100% - 36px);
  }

  .fuss-raster { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
  .buehne-inhalt { padding-block: 128px 96px; }
  .schritt { padding-left: 46px; }
}

@media (max-width: 1240px) {

  .nav-gruppe { display: block; }
  .nav-auf {
    width: 100%; justify-content: space-between;
    padding: 13px var(--abstand-knapp); font-size: var(--schrift-normal);
    border-bottom: 1px solid var(--haarlinie-fein); border-radius: 0;
  }
  .nav-unter {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; backdrop-filter: none; border: 0; padding: 0;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .34s var(--stufe-kurve);
  }
  .nav-unter.offen { grid-template-rows: 1fr; }
  .nav-unter-innen {
    width: auto; margin: 0; grid-template-columns: 1fr; gap: 0;
    overflow: hidden; padding-left: var(--abstand-normal);
  }
  .nav-unter-kopf { display: none; }
  .unter-punkt { padding: 11px var(--abstand-knapp); border-radius: 0;
                 border-bottom: 1px solid var(--haarlinie-fein); }
  .unter-punkt span { display: none; }

  .kopf-nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    padding: 74px var(--abstand-gross) var(--abstand-sehr-gross);
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-haar);
    background: color-mix(in srgb, var(--grund) 96%, transparent);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--haarlinie-fein);
    transform: translateY(-102%);
    transition: transform .48s var(--stufe-kurve);
    z-index: -1;
    margin-left: 0;

    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .kopf-nav.offen { transform: none; }

  .nav-punkt {
    padding: 13px var(--abstand-knapp);
    font-size: var(--schrift-normal);
    border-bottom: 1px solid var(--haarlinie-fein);
    border-radius: 0;
  }

  .nav-punkt[aria-current="page"]::after { display: none; }

  .menue-knopf { display: grid; order: 3; }
  .themenschalter { margin-left: auto; order: 2; }
  .marke-link { order: 1; }

  .menue-knopf::after,
  .themenschalter::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
  }
  .themenschalter { position: relative; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .messfeld { padding: 20px var(--abstand-weit) 18px; }
  .bereich  { padding: 24px var(--abstand-gross) 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-auftritt] { opacity: 1; transform: none; filter: none; }
  .js .zeile { transform: none; }
  .js .stufenlinie path { stroke-dashoffset: 0; }
  .stufenlinie path { stroke-dashoffset: 0; }
  .scroll-wink { display: none; }
}

@media print {
  .kopf, .scroll-wink, .buehne-leinwand, .themenschalter, .menue-knopf { display: none !important; }
  body { background: #fff; color: #000; }
  .js [data-auftritt] { opacity: 1; transform: none; filter: none; }
  .buehne { min-height: auto; }
}

.buehne-zweitzeile {
  margin-top: var(--abstand-sehr-gross);
  max-width: 22ch;
  font-size: clamp(1.28rem, 2.7vw, 2rem);
  line-height: 1.28;
  letter-spacing: -.022em;
  color: var(--tinte);
  font-weight: 400;
}

.weiche {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .weiche { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.weichenfeld {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--abstand-riesig) 30px var(--abstand-sehr-gross);
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--stufe-kurve), border-color .4s,
              box-shadow .5s var(--stufe-kurve);
}

.weichenfeld::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: radial-gradient(420px circle at 50% 0%, var(--fokus-leise), transparent 65%);
  opacity: 0;
  transition: opacity .45s;
}

.weichenfeld:hover {
  border-color: color-mix(in srgb, var(--fokus) 40%, var(--haarlinie));
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--tinte) 45%, transparent);
}

.weichenfeld:hover::before { opacity: 1; }

.weichenfeld-nr {
  font-family: var(--mono);
  font-size: var(--schrift-etikett);
  letter-spacing: .12em;
  color: var(--tinte-leise);
}

.weichenfeld-titel {
  margin-top: 16px;
  font-size: clamp(1.32rem, 2.5vw, 1.72rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.14;
}

.weichenfeld-satz {
  margin-top: var(--abstand-knapp);
  color: var(--tinte-leise);
  font-size: var(--schrift-normal);
  line-height: 1.5;
}

.weichenfeld-fuss {
  margin-top: var(--abstand-sehr-gross);
  display: flex;
  align-items: center;
  gap: var(--abstand-eng);
  font-size: var(--schrift-klein);
  font-weight: 500;
  color: var(--fokus);
}

.weichenfeld-fuss .pfeil {
  width: 14px; height: 14px;
  transition: transform .34s var(--stufe-kurve);
}

.weichenfeld:hover .weichenfeld-fuss .pfeil { transform: translate(3px, -3px); }

.rechner {
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  background: var(--haarlinie-fein);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  overflow: hidden;
}

@media (min-width: 820px) {
  .rechner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.rechner-regler {
  background: var(--karte);
  padding: clamp(var(--abstand-sehr-gross), 3.5vw, 38px);
  display: grid;
  gap: var(--abstand-sehr-gross);
  align-content: start;
}

.regler-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: var(--schrift-klein);
  color: var(--tinte-leise);
  margin-bottom: 10px;
  cursor: pointer;
}

.regler-kopf output {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--schrift-fuehrung);
  font-weight: 500;
  color: var(--tinte);
  letter-spacing: -.02em;
}

.regler input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.regler input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--haarlinie);
}

.regler input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--haarlinie);
}

.regler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -10.5px;
  border-radius: 50%;
  background: var(--tinte);
  border: 0;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--tinte) 60%, transparent);
  transition: transform .2s var(--schnell);
}

.regler input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tinte);
  border: 0;
}

.regler input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }

.regler input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
}

.rechner-ergebnis {
  background: var(--karte-hoch);
  padding: clamp(var(--abstand-sehr-gross), 3.5vw, 38px);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-normal);
  align-items: flex-start;
  justify-content: center;
}

.rechner-summe {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 6vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--tinte);
  display: block;
}

.rechner-satz {
  color: var(--tinte-leise);
  font-size: var(--schrift-klein);
  line-height: 1.55;
  max-width: 38ch;
}

.gegenliste {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.gegenzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--haarlinie-fein);
}

.gegenzeile:first-child { border-top: 1px solid var(--haarlinie-fein); }

@media (min-width: 720px) {
  .gegenzeile { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}

.gegenzeile dt {
  margin: 0;
  color: var(--tinte);
  font-weight: 500;
  font-size: var(--schrift-normal);
}

.gegenzeile dd {
  margin: 0;
  color: var(--tinte-leise);
  font-size: var(--schrift-klein);
  line-height: 1.55;
}

.spruchtafel {
  background: var(--karte);
  border: 1px solid var(--haarlinie-fein);
  border-radius: var(--r-gross);
  padding: clamp(var(--abstand-riesig), 4.5vw, 56px);
}

.spruch {
  letter-spacing: -.04em;
  line-height: 1.02;
}

.bereich-gross {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.1;
  margin-top: 16px;
}

.beispielgruppen {
  display: grid;
  gap: var(--abstand-riesig);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 780px) {
  .beispielgruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.beispielgruppe h3 {
  font-family: var(--mono);
  font-size: var(--schrift-winzig);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  font-weight: 500;
  padding-bottom: var(--abstand-knapp);
  border-bottom: 1px solid var(--haarlinie-fein);
}

.beispielgruppe ul {
  margin: var(--abstand-normal) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.beispielgruppe li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--tinte);
  font-size: var(--schrift-normal);
  line-height: 1.45;
}

.beispielgruppe li::before {
  content: "";
  flex: none;
  width: 11px; height: 6px;
  color: var(--fokus);
  transform: translateY(-3px);
  background:
    linear-gradient(currentColor, currentColor) 0    100% / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0    / 50%   1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 50%  0    / 1.3px 100%  no-repeat;
}

@keyframes marke-zeichnen {
  to { stroke-dashoffset: 0; }
}

.merksatz .wort {
  display: inline-block;
  transition: opacity .22s linear;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .merksatz .wort { opacity: 1 !important; }
}

@media (min-width: 780px) {
  .nachlauf .abschnitt > .rumpf,
  .nachlauf .abschnitt > .rumpf-text,
  .nachlauf .abschnitt > .rumpf-weit { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .abschnitt > .rumpf,
  .abschnitt > .rumpf-text,
  .abschnitt > .rumpf-weit { will-change: auto; transform: none !important; }
}

.hinweiskarte {
  padding: var(--abstand-sehr-gross) 28px;
  border-radius: var(--r-gross);
  border: 1px solid var(--haarlinie-fein);
  background: var(--karte);
  max-width: 68ch;
}

.js .beispielgruppe li,
.js .bereich-liste li,
.js .fuss-spalte li {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .5s var(--stufe-kurve), transform .5s var(--stufe-kurve);
}

.js .beispielgruppe.da li,
.js .da .bereich-liste li,
.js .bereich-liste.da li,
.js .fuss.da li,
.js .bereich:hover .bereich-liste li {
  opacity: 1;
  transform: none;
}

.js .beispielgruppe li:nth-child(1),  .js .bereich-liste li:nth-child(1)  { transition-delay:  30ms; }
.js .beispielgruppe li:nth-child(2),  .js .bereich-liste li:nth-child(2)  { transition-delay:  75ms; }
.js .beispielgruppe li:nth-child(3),  .js .bereich-liste li:nth-child(3)  { transition-delay: 120ms; }
.js .beispielgruppe li:nth-child(4),  .js .bereich-liste li:nth-child(4)  { transition-delay: 165ms; }
.js .beispielgruppe li:nth-child(5),  .js .bereich-liste li:nth-child(5)  { transition-delay: 210ms; }
.js .beispielgruppe li:nth-child(6),  .js .bereich-liste li:nth-child(6)  { transition-delay: 255ms; }
.js .beispielgruppe li:nth-child(7)  { transition-delay: 300ms; }
.js .beispielgruppe li:nth-child(n+8) { transition-delay: 345ms; }

.bereiche, .weiche { perspective: 1400px; }

.nav-punkt::before {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 1px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .32s var(--stufe-kurve);
  opacity: .5;
}

.nav-punkt:hover::before { transform: scaleX(1); }
.nav-punkt[aria-current="page"]::before { display: none; }

.marke-link .bildmarke path { transition: transform .42s var(--stufe-kurve); }

.marke-link:hover .bildmarke path:last-child {
  transform: translateY(-3px);
}

.marke-link .bildmarke.marke-fertig { will-change: auto; }

.knopf-voll::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%,
              color-mix(in srgb, var(--grund) 22%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .7s var(--stufe-kurve);
}

.knopf-voll:hover::before { transform: translateX(100%); }

.stufenlinie { transition: color .5s; }
.stufenlinie.sichtbar { color: color-mix(in srgb, var(--fokus) 28%, var(--haarlinie)); }

@media (prefers-reduced-motion: reduce) {
  .js .beispielgruppe li,
  .js .bereich-liste li,
  .js .fuss-spalte li { opacity: 1; transform: none; }
  .nav-punkt::before { display: none; }
  .knopf-voll::before { display: none; }
}

.wortblock { display: inline-block; white-space: nowrap; }

.bereich.gegenfall {
  border-color: var(--haarlinie);
  border-left-width: 3px;
}

.bereich.gegenfall .bereich-nr { color: var(--tinte); font-weight: 500; }

[id] { scroll-margin-top: 84px; }

@media (max-width: 900px) {
  [id] { scroll-margin-top: 76px; }
}

.themenschalter, .menue-knopf { position: relative; }

.themenschalter::after, .menue-knopf::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--r-rund);
}

@media (max-width: 1240px) {
  .kopf-nav:not(.offen) {
    visibility: hidden;
    pointer-events: none;
  }

  .kopf-nav.offen { visibility: visible; pointer-events: auto; }
}

.menue-offen body { overflow: hidden; }

.montag {
  margin-top: 36px; padding: clamp(20px, 3vw, var(--abstand-riesig));
  border: 1px solid var(--haarlinie-fein); border-radius: var(--r-gross);
  background: var(--karte);
}
.montag-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.montag-stand { margin: 0; color: var(--tinte-leise); font-size: var(--schrift-klein);
  font-variant-numeric: tabular-nums; }

.montag-liste { list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--abstand-haar); }

.montag-zeile {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: var(--abstand-knapp);
  padding: 11px var(--abstand-knapp); border-radius: var(--r-klein);
  transition: background .3s ease, opacity .3s ease;
}
.montag-haken {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--haarlinie); position: relative;
  transition: border-color .25s ease, background .25s ease;
}
.montag-was { color: var(--tinte); }
.montag-zeit {
  color: var(--tinte-leise); font-size: var(--schrift-winzig); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .3s ease;
}

.montag-zeile.fertig { background: var(--grund-tief); }
.montag-zeile.fertig .montag-haken { border-color: var(--gewinn); background: var(--gewinn); }
.montag-zeile.fertig .montag-haken::after {
  content: ""; position: absolute; inset: 0;
  background: var(--karte);
  clip-path: polygon(19% 47%, 8% 58%, 39% 88%, 92% 30%, 81% 20%, 39% 66%);
}
.montag-zeile.fertig .montag-was { color: var(--tinte-leise); }
.montag-zeile.fertig .montag-zeit { opacity: 1; }

.montag-fuss { margin: var(--abstand-gross) 0 0; color: var(--tinte-leise); max-width: 54ch; }

.verwandlung {
  margin-top: 36px; display: grid; gap: clamp(var(--abstand-weit), 3vw, var(--abstand-riesig));
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .verwandlung { grid-template-columns: 1fr 1fr; align-items: start; } }

.verwandlung-blatt, .verwandlung-maske {
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--haarlinie-fein); border-radius: var(--r-gross);
  background: var(--karte);
}
.v-tabelle { width: 100%; border-collapse: collapse; font-size: var(--schrift-winzig); }
.v-zelle {
  padding: var(--abstand-eng) 9px; border: 1px solid var(--haarlinie-fein);
  color: var(--tinte-leise); white-space: nowrap;
  transition: transform .5s cubic-bezier(.7,0,.25,1), opacity .5s ease, color .4s ease;
}
.v-kopf { color: var(--tinte); font-weight: 600; }

.verwandlung.zieht .v-zelle { opacity: .32; transform: translateX(-6px); }

.v-feld, .v-ergebnis {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-normal);
  padding: var(--abstand-knapp) var(--abstand-haar); border-bottom: 1px solid var(--haarlinie-fein);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.7,0,.25,1);
}
.v-feld span, .v-ergebnis span { color: var(--tinte-leise); font-size: var(--schrift-mini); }
.v-feld b { color: var(--tinte); font-size: var(--schrift-normal); }
.v-ergebnis { border-bottom: none; border-top: 1px solid var(--haarlinie); margin-top: 6px; }
.v-ergebnis b { color: var(--tinte); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.verwandlung.zieht .v-feld,
.verwandlung.zieht .v-ergebnis { opacity: 1; transform: none; }
.verwandlung.zieht .v-feld:nth-of-type(2) { transition-delay: .09s; }
.verwandlung.zieht .v-feld:nth-of-type(3) { transition-delay: .18s; }
.verwandlung.zieht .v-ergebnis          { transition-delay: .30s; }

.v-hinweis { margin: 16px 0 0; color: var(--tinte-leise); font-size: var(--schrift-mini); }

.gefunden { margin-top: 36px; }

.gefunden-suche {
  display: flex; align-items: center; gap: var(--abstand-knapp);
  padding: var(--abstand-normal) var(--abstand-weit); border-radius: var(--r-rund);
  border: 1px solid var(--haarlinie); background: var(--karte);
  max-width: 30rem;
}
.gefunden-lupe { display: inline-flex; color: var(--tinte-leise); }
.gefunden-lupe svg { width: 19px; height: 19px; }
.gefunden-eingabe { color: var(--tinte); font-size: var(--schrift-normal); white-space: nowrap; }
.gefunden-strich {
  width: 1.5px; height: 1.1em; background: var(--fokus); opacity: 0;
}
.gefunden.tippt .gefunden-strich { opacity: 1; animation: gefunden-blinken 1s steps(2) infinite; }
@keyframes gefunden-blinken { 50% { opacity: 0; } }

.gefunden-unten {
  margin-top: var(--abstand-sehr-gross); display: grid; gap: clamp(var(--abstand-weit), 3vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .gefunden-unten { grid-template-columns: 1.1fr 1fr; align-items: center; } }

.gefunden-karte { width: 100%; height: auto; }
.gefunden-karte .ort {
  fill: var(--haarlinie);
  transition: fill .45s ease, r .45s cubic-bezier(.7,0,.25,1);
}
.gefunden-karte .ort.an { fill: var(--fokus); r: 2.9; }

.gefunden-treffer { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.treffer {
  padding: 13px 15px; border-radius: var(--r-innen);
  border: 1px solid var(--haarlinie-fein); background: var(--karte);
  opacity: 0; transform: translateY(9px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.7,0,.25,1);
}
.treffer.da { opacity: 1; transform: none; }
.treffer b { display: block; color: var(--tinte); }
.treffer span { display: block; margin-top: 3px; color: var(--tinte-leise); font-size: var(--schrift-mini); }

.gefunden-fuss { margin: 24px 0 0; color: var(--tinte-leise); max-width: 52ch; }

.inderhand {
  margin-top: 36px; display: grid; gap: clamp(var(--abstand-gross), 4vw, 40px);
  grid-template-columns: 1fr; align-items: center; justify-items: center;
}
@media (min-width: 780px) { .inderhand { grid-template-columns: auto 1fr; justify-items: start; } }

.telefon {
  width: 268px; border-radius: 34px; padding: 10px;
  border: 1px solid var(--haarlinie); background: var(--karte-hoch);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}
.telefon-leiste {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--abstand-winzig) var(--abstand-knapp) var(--abstand-eng); font-size: var(--schrift-winzig); color: var(--tinte-leise);
  font-variant-numeric: tabular-nums;
}
.telefon-netz { transition: color .3s ease; }
.telefon-netz.aus { color: var(--achtung); }

.telefon-schirm {
  border-radius: 26px; padding: 16px var(--abstand-normal) var(--abstand-weit);
  background: var(--grund-tief); min-height: 300px;
}
.telefon-titel { margin: 0 0 var(--abstand-knapp); font-size: var(--schrift-winzig); color: var(--tinte-leise);
  letter-spacing: .04em; text-transform: uppercase; }
.telefon-liste { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }

.telefon-punkt {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: var(--r-klein);
  border: 1px solid transparent; background: transparent;
  color: var(--tinte); font: inherit; font-size: var(--schrift-mini); text-align: left;
  cursor: pointer; transition: background .2s ease;
}
.telefon-punkt:hover { background: var(--karte); }
.telefon-punkt:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.telefon-kasten {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px;
  border: 1.5px solid var(--haarlinie); position: relative;
  transition: border-color .2s ease, background .2s ease;
}
.telefon-punkt[aria-pressed="true"] .telefon-kasten {
  border-color: var(--gewinn); background: var(--gewinn);
}
.telefon-punkt[aria-pressed="true"] .telefon-kasten::after {
  content: ""; position: absolute; inset: 0; background: var(--grund-tief);
  clip-path: polygon(19% 47%, 8% 58%, 39% 88%, 92% 30%, 81% 20%, 39% 66%);
}
.telefon-punkt[aria-pressed="true"] span:last-child { color: var(--tinte-leise); }

.telefon-stand { margin: var(--abstand-normal) var(--abstand-haar) 0; font-size: var(--schrift-winzig); color: var(--tinte-leise);
  transition: color .3s ease; }
.telefon-stand.gemerkt { color: var(--achtung); }

.inderhand-neben { max-width: 34ch; }
.inderhand-satz { margin: 16px 0 0; color: var(--tinte-leise); }

@media (prefers-reduced-motion: reduce) {
  .v-feld, .v-ergebnis, .treffer { opacity: 1; transform: none; transition: none; }
  .v-zelle, .montag-zeile, .montag-zeit, .gefunden-karte .ort { transition: none; }
  .gefunden.tippt .gefunden-strich { animation: none; }

  .telefon-punkt, .telefon-kasten, .telefon-netz, .telefon-stand { transition: none; }

  .verwandlung.zieht .v-zelle { opacity: 1; transform: none; }
}

.heftung-blaetter { display: block; }
.heftung-blatt + .heftung-blatt { margin-top: clamp(28px, 4vw, 48px); }
.heftung-titel { margin: 10px 0 0; }
.heftung-text  { margin: var(--abstand-normal) 0 0; max-width: 54ch; }

.heftung-marken { display: none; }

.heftung-marke {
  height: 2px; width: 30px; border-radius: var(--r-rund);
  background: var(--haarlinie);
  transition: background .4s var(--schnell), width .4s var(--schnell);
}
.heftung-marke.jetzt { background: var(--tinte); width: 52px; }

@supports (height: 100svh) and (translate: 0px) {

  .heftbar .heftung-huelle {
    min-height: calc(var(--blaetter, 3) * 100svh);
  }

  .heftung-huelle.heftet {

    min-height: calc(var(--blaetter, 3) * 100svh);
  }

  .heftung-huelle.heftet .heftung-kern {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto;

    padding-block: clamp(88px, 13svh, 132px) clamp(24px, 5svh, 52px);
  }

  .heftung-huelle.heftet .heftung-blaetter {
    position: relative;
    min-height: 0;
  }

  .heftung-huelle.heftet .heftung-blatt {
    position: absolute;
    inset: 0;
    margin-top: 0;
    display: grid;
    align-content: center;

    --rein: clamp(0, calc(var(--heftung-lauf, 0) - var(--nr, 0) + 1), 1);
    --raus: clamp(0, calc(var(--heftung-lauf, 0) - var(--nr, 0)), 1);
    --da:   calc(var(--rein) - var(--raus));

    opacity: var(--da);

    translate: 0 calc(38px - (var(--rein) + var(--raus)) * 38px);
    scale: calc(.985 + var(--da) * .015);

    pointer-events: none;
  }

  .heftung-huelle.heftet .heftung-blatt.jetzt { pointer-events: auto; }

  .heftung-huelle.heftet.nah .heftung-blatt { will-change: opacity, translate; }

  .heftung-huelle.heftet .heftung-marken {
    display: flex; gap: var(--abstand-eng); align-items: center;
    list-style: none; margin: 0; padding: 0;
  }

}

@media (max-height: 560px) {
  .heftung-huelle.heftet, .heftbar .heftung-huelle { min-height: 0; }
  .heftung-huelle.heftet .heftung-kern { position: static; height: auto; padding-block: 0; }
  .heftung-huelle.heftet .heftung-blaetter { position: static; }
  .heftung-huelle.heftet .heftung-blatt {
    position: static; opacity: 1; translate: none; scale: none;
    pointer-events: auto;
  }
  .heftung-huelle.heftet.nah .heftung-blatt { will-change: auto; }
  .heftung-huelle.heftet .heftung-blatt + .heftung-blatt { margin-top: clamp(28px, 4vw, 48px); }
  .heftung-huelle.heftet .heftung-marken { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .heftung-huelle.heftet, .heftbar .heftung-huelle { min-height: 0; }
  .heftung-huelle.heftet .heftung-kern { position: static; height: auto; padding-block: 0; }
  .heftung-huelle.heftet .heftung-blaetter { position: static; }
  .heftung-huelle.heftet .heftung-blatt {
    position: static; opacity: 1; translate: none; scale: none;
    pointer-events: auto;
  }
  .heftung-huelle.heftet.nah .heftung-blatt { will-change: auto; }
  .heftung-huelle.heftet .heftung-blatt + .heftung-blatt { margin-top: clamp(28px, 4vw, 48px); }
  .heftung-huelle.heftet .heftung-marken { display: none; }
  .heftung-marke { transition: none; }
}

.nachlauf .abschnitt[data-heftung] > .rumpf,
.nachlauf .abschnitt[data-heftung] > .rumpf-text,
.nachlauf .abschnitt[data-heftung] > .rumpf-weit { will-change: auto; }

.abschnitt-tafel {

  padding-block: clamp(28px, 4vw, 56px) 0;
}

.tafel {
  margin: 0 auto;

  width: min(1560px, 100% - 40px);
}

.tafel-bild {
  display: block;
  width: 100%;
  height: auto;

  aspect-ratio: 1600 / 900;
  border-radius: var(--r-gross);
}

.tafel-dunkel { display: none; }

@media (prefers-color-scheme: dark) {
  .tafel-hell   { display: none; }
  .tafel-dunkel { display: block; }
}

:root[data-theme="light"] .tafel-hell   { display: block; }
:root[data-theme="light"] .tafel-dunkel { display: none; }
:root[data-theme="dark"] .tafel-hell    { display: none; }
:root[data-theme="dark"] .tafel-dunkel  { display: block; }

.tafel figcaption {
  font-family: var(--mono);
  font-size: var(--schrift-winzig);
  letter-spacing: -.005em;
  color: var(--tinte-leise);
  margin-top: 16px;
  text-align: center;
}

.anfrage { display: grid; gap: var(--abstand-gross); max-width: 62ch; }

.feldpaar { display: grid; gap: var(--abstand-gross); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .feldpaar { grid-template-columns: 1fr; } }

.feld { display: grid; gap: 7px; }

.feld-name {
  font-family: var(--satz);
  font-size: var(--schrift-winzig);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--tinte-leise);
}
.feld-name b { color: var(--fokus); font-weight: 600; }

.feld-frei {
  font-weight: 400;
  color: var(--tinte-leise);
  opacity: .72;
}

.anfrage input,
.anfrage textarea,
.anfrage select {
  font: inherit;
  font-size: var(--schrift-normal);
  color: var(--tinte);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--haarlinie);
  border-radius: 0;
  padding: 9px var(--abstand-haar);
  width: 100%;
  transition: border-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.anfrage textarea { resize: vertical; min-height: 7.5em; line-height: 1.55; }

.anfrage select {
  background-image: linear-gradient(45deg, transparent 50%, var(--tinte-leise) 50%),
                    linear-gradient(135deg, var(--tinte-leise) 50%, transparent 50%);
  background-position: right 10px center, right 5px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--abstand-sehr-gross);
}

.anfrage input:hover,
.anfrage textarea:hover,
.anfrage select:hover { border-bottom-color: var(--tinte-leise); }

.anfrage input:focus-visible,
.anfrage textarea:focus-visible,
.anfrage select:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
  border-bottom-color: var(--fokus);
}

.anfrage .feld-fehlt input,
.anfrage .feld-fehlt textarea { border-bottom-color: var(--fokus); border-bottom-width: 2px; }

.feld-hinweis {
  font-family: var(--satz);
  font-size: var(--schrift-mini);
  color: var(--tinte-leise);
  margin: -var(--abstand-eng) 0 0;
  max-width: 52ch;
}
.feld-recht { margin-top: var(--abstand-winzig); }
.feld-recht a { color: var(--fokus); }

.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.anfrage-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px var(--abstand-gross);
  margin-top: 6px;
}
.anfrage-oder {
  font-family: var(--satz);
  font-size: var(--schrift-mini);
  color: var(--tinte-leise);
}
.anfrage-oder a { color: var(--fokus); }

.anfrage-antwort {
  font-family: var(--satz);
  font-size: var(--schrift-klein);
  line-height: 1.55;
  margin: 0;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--haarlinie);
  background: transparent;
}

.anfrage-antwort.gut { border-color: var(--fokus); background: var(--fokus-leise); }
.anfrage-antwort.schlecht { border-left: 3px solid var(--fokus); font-weight: 500; }
.anfrage-antwort[hidden] { display: none; }

.anfrage button[disabled] { opacity: .55; cursor: progress; }

.ordnung { position: relative; }
.ordnung-kern { position: relative; }
.ordnung-leinwand { display: none; }
.ordnung-vorher { display: none; }
.ordnung-nachher { margin: 0; }

.ordnung-stufen {
  list-style: none;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 0;
}
.ordnung-stufen { --stufe: clamp(22px, 3.2vw, 44px); }
.ordnung-stufen li {

  position: relative;
  margin-bottom: calc(var(--nr) * var(--stufe));
  border-top: 2px solid var(--tinte);
  padding: 12px 8px 0 0;
  font-size: clamp(13px, 1.25vw, 16px);
  font-weight: 500;
  color: var(--tinte);
  overflow-wrap: anywhere;
}

.ordnung-stufen li + li { padding-left: 12px; }

.ordnung-stufen li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2px;
  width: 2px;
  height: calc(var(--stufe) + 2px);
  background: var(--tinte);
}

@media (max-width: 779px) {
  .ordnung-stufen { grid-template-columns: 1fr; align-items: start; }
  .ordnung-stufen li {
    margin: 0 0 0 calc(var(--nr) * 9%);
    width: 46%;
    padding: 8px 0 14px;
  }
  .ordnung-stufen li + li::before { display: none; }
}

.ordnung.ordnet { height: 300svh; padding: 0; }
.ordnung.ordnet .ordnung-kern {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ordnung.ordnet .ordnung-leinwand {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ordnung.ordnet .ordnung-rumpf { position: relative; display: grid; }
.ordnung.ordnet .ordnung-vorher,
.ordnung.ordnet .ordnung-nachher { grid-area: 1 / 1; margin: 0; max-width: 22ch; }
.ordnung.ordnet .ordnung-vorher {
  display: block;
  color: var(--tinte-leise);
  opacity: clamp(0, calc(1 - var(--ordnung-lauf, 0) * 3), 1);
}
.ordnung.ordnet .ordnung-nachher {
  opacity: clamp(0, calc((var(--ordnung-lauf, 0) - .55) * 4), 1);
}
.ordnung.ordnet .ordnung-stufen { grid-row: 2; }

.ordnung.ordnet .ordnung-stufen li { border-top-color: transparent; }
.ordnung.ordnet .ordnung-stufen li::before { background: transparent; }
.ordnung.ordnet .ordnung-stufen li span {
  opacity: clamp(0, calc((var(--ordnung-lauf, 0) - .66 - var(--nr) * .03) * 7), 1);
}