.ks-kanalschnitt {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  color: var(--tusche);
  font-family: var(--schrift-text);
  max-width: 76rem;
  margin-inline: auto;
}

.ks-kopf {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-block-end: 1rem;
}

.ks-kopf > div { min-width: 0; }

.ks-kennung {
  margin: 0 0 .35rem;
  color: var(--acryl-tief);
  font: 650 .78rem/1.2 var(--schrift-plan);
  font-stretch: 78%;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ks-kopf h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font: 680 clamp(1.65rem, 3vw, 2.65rem)/1.06 var(--schrift-plan);
  font-stretch: 82%;
  letter-spacing: -.025em;
}

.ks-hinweis {
  flex: 0 0 auto;
  margin: 0 0 .2rem;
  padding: .45rem .65rem;
  border: 1px solid var(--acryl);
  color: var(--acryl-tief);
  font-size: .82rem;
  font-weight: 700;
}

.ks-zeichenplatte {
  overflow: hidden;
  background: var(--platte);
  border: 1px solid var(--linie);
  border-bottom: 6px solid var(--kante);
  box-shadow: 0 30px 50px -30px rgba(21, 32, 42, .45);
}

.ks-grafik {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--schrift-plan);
  font-variant-numeric: tabular-nums;
}

.ks-bereichstitel { fill: var(--tusche); font-size: 13px; font-weight: 700; letter-spacing: .025em; }
.ks-strasse { fill: var(--karton); stroke: var(--kante); }
.ks-fahrbahnlinie { fill: none; stroke: var(--kante-dunkel); stroke-width: 1.5; }
.ks-mittellinie { fill: none; stroke: var(--kante-dunkel); stroke-width: 1.5; stroke-dasharray: 22 15; }
.ks-kanallinie { fill: none; stroke: var(--acryl); stroke-width: 4; }
.ks-lageschacht circle { fill: var(--platte); stroke: var(--acryl); stroke-width: 4; }
.ks-lageschacht text { fill: var(--tusche); font-size: 12px; font-weight: 750; }
.ks-bezugslinien path { fill: none; stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 4; }
.ks-gelaende-flaeche { fill: var(--karton); }
.ks-gelaendelinie { fill: none; stroke: var(--tusche); stroke-width: 3; }
.ks-kleintext { fill: var(--tusche-2); font-size: 11px; }
.ks-profilschacht rect { fill: var(--platte); fill-opacity: .78; stroke: var(--tusche-2); stroke-width: 2; }
.ks-profilschacht > path { stroke: var(--tusche); stroke-width: 4; }
.ks-profilschacht circle { fill: var(--platte); stroke: var(--acryl); stroke-width: 3; }
.ks-schachtname { fill: var(--tusche); font-size: 11px; font-weight: 700; }
.ks-hoehe { fill: var(--tusche-2); font-size: 10px; }
.ks-rohr { fill: none; stroke: var(--acryl-tief); stroke-width: 10; stroke-linecap: round; }
.ks-fluss { fill: none; stroke: var(--acryl-licht); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 12; stroke-dashoffset: 66; }
.ks-bemassung { opacity: 0; }
.ks-bemassung path { fill: none; stroke: var(--tusche-2); stroke-width: 1; }
.ks-bemassung text { fill: var(--tusche); font-size: 11px; font-weight: 700; }
.ks-bemassung .ks-laenge { fill: var(--tusche-2); font-size: 10px; font-weight: 500; }
.ks-richtung { fill: none; stroke: var(--tusche-2); stroke-width: 1; }
#ks-pfeil path { fill: var(--tusche-2); }
.ks-legende line { stroke: var(--acryl); stroke-width: 5; }
.ks-legende text { fill: var(--tusche-2); font-size: 10px; }

.ks-profil {
  clip-path: inset(0 0 100% 0);
  animation-name: ks-oeffnen;
  animation-duration: 1ms;
  animation-fill-mode: both;
  animation-timing-function: var(--ease);
  animation-timeline: view();
  animation-range: entry 8% entry 72%;
}

.ks-fluss {
  animation-name: ks-fliessen;
  animation-duration: 1ms;
  animation-fill-mode: both;
  animation-timing-function: linear;
  animation-timeline: view();
  animation-range: entry 32% cover 58%;
}

.ks-bemassung {
  animation-name: ks-einblenden;
  animation-duration: 1ms;
  animation-fill-mode: both;
  animation-timing-function: var(--ease);
  animation-timeline: view();
}
.ks-bemassung:nth-of-type(8) { animation-range: entry 42% entry 58%; }
.ks-bemassung:nth-of-type(9) { animation-range: entry 52% entry 68%; }
.ks-bemassung:nth-of-type(10) { animation-range: entry 62% entry 78%; }

@keyframes ks-oeffnen { to { clip-path: inset(0); } }
@keyframes ks-fliessen { to { stroke-dashoffset: 0; } }
@keyframes ks-einblenden { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.ks-tabellenrahmen { width: 100%; min-width: 0; overflow-x: auto; margin-block-start: 1.35rem; }
.ks-tabelle { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9rem; }
.ks-tabelle caption { padding: 0 0 .65rem; text-align: left; color: var(--tusche); font-weight: 700; }
.ks-tabelle th, .ks-tabelle td { padding: .7rem .8rem; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
.ks-tabelle thead th { color: var(--tusche-2); font-size: .82rem; letter-spacing: .025em; }
.ks-tabelle tbody th { color: var(--acryl-tief); }
.ks-quelle { margin: .75rem 0 0; color: var(--tusche-2); font-size: .82rem; }

@supports not (animation-timeline: view()) {
  .js .ks-profil { clip-path: inset(0 0 100% 0); transition: clip-path 900ms var(--ease); }
  .js .ks-fluss { stroke-dashoffset: 66; transition: stroke-dashoffset 1100ms linear 500ms; }
  .js .ks-bemassung { opacity: 0; transform: translateY(-5px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); }
  .js .ks-bemassung:nth-of-type(9) { transition-delay: 180ms; }
  .js .ks-bemassung:nth-of-type(10) { transition-delay: 360ms; }
  .js .ks-kanalschnitt.ist-da .ks-profil { clip-path: inset(0); }
  .js .ks-kanalschnitt.ist-da .ks-fluss { stroke-dashoffset: 0; }
  .js .ks-kanalschnitt.ist-da .ks-bemassung { opacity: 1; transform: translateY(0); }
  html:not(.js) .ks-profil { clip-path: inset(0); }
  html:not(.js) .ks-fluss { stroke-dashoffset: 0; }
  html:not(.js) .ks-bemassung { opacity: 1; }
}

.ks-vorschau {
  box-sizing: border-box;
  overflow-x: hidden;
  min-height: 140vh;
  margin: 0;
  padding: 12vh clamp(1rem, 5vw, 5rem);
  background: var(--tisch);
}

.ks-vorschau .ks-kanalschnitt {
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--platte);
}

@media (max-width: 42rem) {
  .ks-kopf { display: block; }
  .ks-kopf h2 { font-size: clamp(1.4rem, 7vw, 1.85rem); }
  .ks-hinweis { display: inline-block; margin-block-start: .75rem; }
  .ks-zeichenplatte { margin-inline: -1rem; }
  .ks-grafik { min-width: 0; transform: none; }
  .ks-zeichenplatte { overflow: hidden; }
  .ks-tabellenrahmen { margin-inline: -1rem; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ks-profil, .ks-fluss, .ks-bemassung { animation: none; transition: none; }
  .ks-profil { clip-path: inset(0); }
  .ks-fluss { stroke-dashoffset: 0; }
  .ks-bemassung { opacity: 1; transform: none; }
}

@media print {
  .ks-profil, .ks-fluss, .ks-bemassung { animation: none; transition: none; }
  .ks-profil { clip-path: inset(0); }
  .ks-fluss { stroke-dashoffset: 0; }
  .ks-bemassung { opacity: 1; transform: none; }
  .ks-zeichenplatte { box-shadow: none; }
}