.df {
  color: var(--licht);
  background: var(--tisch);
  font-family: var(--schrift-text);
  overflow: clip;
}

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

.df__buehne {
  position: relative;
  min-height: 44rem;
  padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
  background-image: linear-gradient(var(--tisch-linie) 1px, transparent 1px), linear-gradient(90deg, var(--tisch-linie) 1px, transparent 1px);
  background-size: 4rem 4rem;
  background-position: center;
  view-timeline-name: --df-buehne;
  view-timeline-axis: block;
}

.df__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 45%, transparent 0, var(--tisch) 78%);
  pointer-events: none;
}

.df__grafik { position: relative; z-index: 1; width: min(100%, 76rem); height: 38rem; margin: auto; }
.df__quellplatten { position: absolute; inset: 0 auto 0 0; width: 20%; display: grid; grid-template-rows: repeat(7, 1fr); gap: .8rem; }
.df__quelle {
  align-self: center;
  min-height: 3.7rem;
  padding: .65rem .8rem .5rem;
  color: var(--tusche);
  background: var(--platte);
  border-left: .25rem solid var(--kante-dunkel);
  border-bottom: .375rem solid var(--kante);
  box-shadow: 0 1.2rem 1.8rem -1.2rem rgba(0,0,0,.8);
  transform: skewY(-1deg);
}
.df__quelle span, .df__quelle small { display: block; transform: skewY(1deg); }
.df__quelle span { font: 650 clamp(.73rem, 1vw, .88rem)/1.1 var(--schrift-plan); font-stretch: 78%; }
.df__quelle small { margin-top: .2rem; color: var(--tusche-2); font-size: .8rem; }

.df__leitungen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.df__pfade path { fill: none; stroke: var(--licht-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.df__pfade path:not(.df__hauptpfad) { stroke-dasharray: 340; stroke-dashoffset: 0; }
.df__hauptpfad { stroke: var(--acryl-licht) !important; stroke-width: 3 !important; }
.df__punkte circle { fill: var(--acryl-licht); filter: drop-shadow(0 0 .35rem var(--acryl-licht)); }
.df__punkt--0 { offset-path: path("M238 58 C315 58 300 245 428 245"); }
.df__punkt--1 { offset-path: path("M238 137 C330 137 315 245 428 245"); }
.df__punkt--2 { offset-path: path("M238 216 C345 216 330 245 428 245"); }
.df__punkt--3 { offset-path: path("M238 295 C345 295 330 245 428 245"); }
.df__punkt--4 { offset-path: path("M238 374 C330 374 315 245 428 245"); }
.df__punkt--5 { offset-path: path("M238 453 C315 453 300 245 428 245"); }
.df__punkt--6 { offset-path: path("M238 532 C300 532 285 245 428 245"); }
.df__pfad--0, .df__punkt--0, .df__station--0 { --i: 0; }
.df__pfad--1, .df__punkt--1, .df__station--1 { --i: 1; }
.df__pfad--2, .df__punkt--2, .df__station--2 { --i: 2; }
.df__pfad--3, .df__punkt--3 { --i: 3; }
.df__pfad--4, .df__punkt--4 { --i: 4; }
.df__pfad--5, .df__punkt--5 { --i: 5; }
.df__pfad--6, .df__punkt--6 { --i: 6; }

.df__prozess { position: absolute; left: 34%; top: 31%; width: 43%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.df__station {
  position: relative;
  min-height: 10.5rem;
  padding: 3.5rem 1rem 1rem;
  display: grid;
  place-items: center;
  color: var(--tusche);
  text-align: center;
  font: 650 .78rem/1.25 var(--schrift-plan);
  font-stretch: 78%;
  background: var(--platte);
  border: 1px solid var(--kante);
  border-bottom: .375rem solid var(--kante-dunkel);
  box-shadow: 0 1.5rem 2rem -1.2rem rgba(0,0,0,.8);
  transform: rotate(-2deg);
}
.df__station:nth-child(2) { transform: rotate(1deg); }
.df__nummer { position: absolute; top: .8rem; left: .8rem; color: var(--acryl-tief); font-size: 2rem; line-height: 1; }

.df__ergebnis { position: absolute; right: 0; top: 24%; width: 18%; height: 54%; }
.df__stapel { position: relative; height: 16rem; perspective: 35rem; }
.df__lage {
  position: absolute;
  left: 4%;
  width: 92%;
  height: 7.5rem;
  background: var(--platte);
  border: 1px solid var(--kante);
  border-bottom: .375rem solid var(--kante-dunkel);
  box-shadow: 0 1.4rem 1.5rem -.9rem rgba(0,0,0,.75);
  transform: rotateX(58deg) rotateZ(-4deg);
}
.df__lage span { position: absolute; right: .5rem; bottom: .35rem; color: var(--tusche-2); font: 650 .78rem/1 var(--schrift-plan); }
.df__lage--gel { top: 7rem; }
.df__lage--kar { top: 4.7rem; }
.df__lage--luf { top: 2.4rem; background: var(--karton); }
.df__lage--fach { top: .1rem; background: rgba(0,111,183,.14); border-color: var(--acryl-licht); border-bottom-color: var(--acryl-licht); box-shadow: 0 0 2rem rgba(74,166,255,.35), 0 1.4rem 1.5rem -.9rem rgba(0,0,0,.75); }
.df__lage--fach span { color: var(--acryl-licht); }
.df__ziel { padding-top: .6rem; border-top: 1px solid var(--acryl-licht); color: var(--licht); font: 650 clamp(.8rem, 1.15vw, 1rem)/1.25 var(--schrift-plan); }

.df__text { width: min(100% - 2rem, 76rem); margin: auto; padding: clamp(2rem, 5vw, 4rem) 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 7vw, 6rem); border-top: 1px solid var(--tisch-linie); }
.df__text h3 { margin: 0 0 1.25rem; color: var(--licht); font: 650 1rem/1.2 var(--schrift-plan); }
.df__quellenliste { margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.df__quellenliste li { padding: .55rem .7rem; border: 1px solid var(--tisch-linie); color: var(--licht); }
.df__quellenliste strong, .df__quellenliste span { display: block; }
.df__quellenliste strong { font-size: .82rem; }
.df__quellenliste span { margin-top: .1rem; color: var(--licht-2); font-size: .82rem; }
.df__schrittliste { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
.df__schrittliste li { counter-increment: schritt; position: relative; padding: 0 0 1.1rem 3rem; color: var(--licht); }
.df__schrittliste li::before { content: counter(schritt); position: absolute; left: 0; top: -.2rem; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--acryl-licht); color: var(--acryl-licht); font: 650 .85rem/1 var(--schrift-plan); }
.df__schrittliste strong, .df__schrittliste span { display: block; }
.df__schrittliste strong { font-size: .9rem; }
.df__schrittliste span { margin-top: .15rem; color: var(--licht-2); font-size: .82rem; line-height: 1.5; }

@supports (animation-timeline: view()) {
  .df__pfade path:not(.df__hauptpfad) { stroke-dashoffset: 340; animation-name: df-linie; animation-duration: 1ms; animation-fill-mode: both; animation-timing-function: var(--ease); animation-timeline: --df-buehne; animation-range: calc(10% + var(--i) * 3%) calc(39% + var(--i) * 3%); }
  .df__punkte circle { opacity: 0; animation-name: df-punkt; animation-duration: 1ms; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: --df-buehne; animation-range: calc(13% + var(--i) * 3%) calc(40% + var(--i) * 3%); }
  .df__station { animation-name: df-station; animation-duration: 1ms; animation-fill-mode: both; animation-timing-function: var(--ease); animation-timeline: --df-buehne; animation-range: calc(43% + var(--i) * 11%) calc(59% + var(--i) * 11%); }
  .df__lage--fach { animation-name: df-einrasten; animation-duration: 1ms; animation-fill-mode: both; animation-timing-function: var(--ease); animation-timeline: --df-buehne; animation-range: 72% 92%; }
}
@keyframes df-linie { to { stroke-dashoffset: 0; } }
@keyframes df-punkt { 0% { opacity: 0; offset-distance: 0%; } 8% { opacity: 1; } 92% { opacity: 1; offset-distance: 100%; } 100% { opacity: 0; offset-distance: 100%; } }
@keyframes df-station { from { border-color: var(--kante); box-shadow: 0 1.5rem 2rem -1.2rem rgba(0,0,0,.8); } to { border-color: var(--acryl-licht); box-shadow: 0 0 1.6rem rgba(74,166,255,.35), 0 1.5rem 2rem -1.2rem rgba(0,0,0,.8); } }
@keyframes df-einrasten { from { opacity: 0; transform: translate(-4rem,-7rem) rotateX(58deg) rotateZ(-4deg); } to { opacity: 1; transform: translate(0,0) rotateX(58deg) rotateZ(-4deg); } }

@supports not (animation-timeline: view()) {
  .js .df:not(.ist-da) .df__pfade path:not(.df__hauptpfad) { stroke-dashoffset: 340; }
  .js .df:not(.ist-da) .df__punkte { opacity: 0; }
  .js .df:not(.ist-da) .df__station { border-color: var(--kante); }
  .js .df:not(.ist-da) .df__lage--fach { opacity: 0; transform: translate(-4rem,-7rem) rotateX(58deg) rotateZ(-4deg); }
  .js .df .df__pfade path, .js .df .df__punkte, .js .df .df__station, .js .df .df__lage--fach { transition: opacity .6s var(--ease), transform 1s var(--ease), stroke-dashoffset 1.4s var(--ease), border-color .6s var(--ease); }
}

@media (max-width: 759px) {
  .df__buehne { min-height: 56rem; padding: 2rem 1rem; }
  .df__grafik { height: 52rem; }
  .df__quellplatten { inset: 0 0 auto; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: .55rem; }
  .df__quelle { min-height: 3.25rem; }
  .df__leitungen { display: none; }
  .df__prozess { left: 10%; top: 42%; width: 80%; grid-template-columns: 1fr; gap: .8rem; }
  .df__station { min-height: 5.4rem; padding: 1rem 1rem 1rem 4rem; place-items: center start; text-align: left; transform: none !important; }
  .df__nummer { top: 50%; transform: translateY(-50%); }
  .df__ergebnis { right: 20%; top: 75%; width: 60%; height: 24%; }
  .df__stapel { height: 11rem; }
  .df__lage { height: 5.5rem; }
  .df__lage--gel { top: 5.4rem; } .df__lage--kar { top: 3.7rem; } .df__lage--luf { top: 2rem; } .df__lage--fach { top: .3rem; }
  .df__text { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .df *, .df *::before, .df *::after { animation: none !important; transition: none !important; }
  .df__pfade path { stroke-dashoffset: 0 !important; }
  .df__punkte { display: none; }
  .df__lage--fach { opacity: 1 !important; transform: rotateX(58deg) rotateZ(-4deg) !important; }
}

@media print {
  .df { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .df__buehne { min-height: 42rem; }
  .df__pfade path { stroke-dashoffset: 0 !important; }
  .df__punkte { display: none; }
  .df__lage--fach { opacity: 1 !important; transform: rotateX(58deg) rotateZ(-4deg) !important; }
}

/* Mobil kürzer (Codex R1/R2): Quellen stehen ohnehin als Liste unter der Grafik */
@media (max-width: 759px) {
  .df__buehne { min-height: 0; padding: 1.2rem 1rem 1.6rem; }
  .df__grafik { height: 31rem; }
  .df__quellplatten { display: none; }
  .df__prozess { top: 0; }
  .df__ergebnis { top: 62%; height: 34%; }
}