/* Erzeugt von material/gestaltung/datenweg/bauen.py aus szene.css und der Zeitachse. Nicht von Hand ändern. */
/* Datenweg: isometrische Szene auf der Startseite (Abschnitt „So funktioniert es“).
 * Ohne Klasse .laeuft zeigt die Szene das ruhende Gesamtbild (ohne Skript, bei reduzierter
 * Bewegung, vor dem ersten Sichtkontakt). Regeln: planung/12-anregung-ibm.md. */

:root {
  --sz-boden: #ECEFEE; --sz-raster-szene: rgba(16, 20, 19, 0.06);
  --sz-f-top: #FBFCFC; --sz-f-links: #E1E6E4; --sz-f-rechts: #CCD3D0; --sz-kante: rgba(16, 20, 19, 0.14);
  --sz-karte-top: #FFFFFF; --sz-schatten: rgba(16, 20, 19, 0.07);
  --sz-panel: #EEF1F0; --sz-zeile: #AEB8B4; --sz-schlitz: #3A4440;
  --sz-glas: #E3ECE8; --sz-glas-linie: rgba(16, 20, 19, 0.09); --sz-glas-rahmen: #C3CCC8;
  --sz-kabel: #8A9590; --sz-gelb: #F2C230; --sz-gelb-seite: #C99A0E; --sz-haken: #0B4F3B;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --sz-boden: #101614; --sz-raster-szene: rgba(233, 239, 236, 0.045);
    --sz-f-top: #2A3431; --sz-f-links: #1D2523; --sz-f-rechts: #161D1B; --sz-kante: rgba(233, 239, 236, 0.09);
    --sz-karte-top: #232C29; --sz-schatten: rgba(0, 0, 0, 0.35);
    --sz-panel: #1E2724; --sz-zeile: #5A6863; --sz-schlitz: #050807;
    --sz-glas: #18221F; --sz-glas-linie: rgba(233, 239, 236, 0.06); --sz-glas-rahmen: #33403B;
    --sz-kabel: #5A6863; --sz-gelb: #E6B422; --sz-gelb-seite: #9C7A12; --sz-haken: #0B4F3B;
  }
}
[data-theme="dark"] {
  --sz-boden: #101614; --sz-raster-szene: rgba(233, 239, 236, 0.045);
  --sz-f-top: #2A3431; --sz-f-links: #1D2523; --sz-f-rechts: #161D1B; --sz-kante: rgba(233, 239, 236, 0.09);
  --sz-karte-top: #232C29; --sz-schatten: rgba(0, 0, 0, 0.35);
  --sz-panel: #1E2724; --sz-zeile: #5A6863; --sz-schlitz: #050807;
  --sz-glas: #18221F; --sz-glas-linie: rgba(233, 239, 236, 0.06); --sz-glas-rahmen: #33403B;
  --sz-kabel: #5A6863; --sz-gelb: #E6B422; --sz-gelb-seite: #9C7A12; --sz-haken: #0B4F3B;
}
[data-theme="light"] {
  --sz-boden: #ECEFEE; --sz-raster-szene: rgba(16, 20, 19, 0.06);
  --sz-f-top: #FBFCFC; --sz-f-links: #E1E6E4; --sz-f-rechts: #CCD3D0; --sz-kante: rgba(16, 20, 19, 0.14);
  --sz-karte-top: #FFFFFF; --sz-schatten: rgba(16, 20, 19, 0.07);
  --sz-panel: #EEF1F0; --sz-zeile: #AEB8B4; --sz-schlitz: #3A4440;
  --sz-glas: #E3ECE8; --sz-glas-linie: rgba(16, 20, 19, 0.09); --sz-glas-rahmen: #C3CCC8;
  --sz-kabel: #8A9590; --sz-gelb: #F2C230; --sz-gelb-seite: #C99A0E; --sz-haken: #0B4F3B;
}

/* Aufbau */
.datenweg-buehne { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: 24px 48px; align-items: center; }
.szene { margin: 0; min-width: 0; }
.szene-rahmen { border: var(--rahmen); border-radius: var(--r-karte); overflow: hidden; background: var(--sz-boden); }
.szene-bild { display: block; width: 100%; height: auto; }
.szene-leiste { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.szene-leiste[hidden] { display: none; }
.szene-fortschritt { flex: 1; display: flex; gap: 4px; }
.szene-fortschritt span { flex: 1; height: 3px; border-radius: 2px; background: var(--c-linie); }
.pause {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: var(--rahmen); border-radius: var(--r-karte);
  background: var(--c-flaeche); color: var(--c-text); cursor: pointer;
}
.pause:hover { background: var(--c-flaeche-erhoben); }
.pause .an { display: none; }
.angehalten .pause .an { display: block; }
.angehalten .pause .aus { display: none; }
.schritte { counter-reset: schritt; display: grid; gap: 4px; }
.schritt {
  counter-increment: schritt;
  padding: 10px 0 12px 18px;
  border-left: 3px solid var(--c-linie);
  color: var(--c-text-sekundaer);
}
.schritt h3 { font-size: 1.0625rem; line-height: 1.35; color: inherit; }
.schritt h3::before { content: counter(schritt) "  "; white-space: pre; font-variant-numeric: tabular-nums; color: var(--c-akzent-text); }
.schritt p { margin-top: 4px; font-size: var(--t-klein); color: inherit; max-width: 46ch; }
.vorher .schritt, .ruhig .schritt { color: var(--c-text); border-left-color: var(--c-akzent); }
@media (min-width: 1040px) {
  .datenweg-buehne { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.angehalten * { animation-play-state: paused !important; }

/* Szene */
.boden { fill: var(--sz-boden); }
.boden-raster path { stroke: var(--sz-raster-szene); stroke-width: 1; fill: none; }
.quader polygon { stroke: var(--sz-kante); stroke-width: 1; stroke-linejoin: round; }
.f-top { fill: var(--sz-f-top); }
.f-links { fill: var(--sz-f-links); }
.f-rechts { fill: var(--sz-f-rechts); }
.karte .f-top { fill: var(--sz-karte-top); }
.schatten { fill: var(--sz-schatten); }
.panel { fill: var(--sz-panel); stroke: var(--sz-kante); }
.modell-zeile { stroke: var(--sz-zeile); stroke-width: 3; stroke-linecap: round; fill: none; }
.knopf-seite { fill: var(--sz-gelb-seite); }
.knopf-top { fill: var(--sz-gelb); }
.knopf-ring { fill: none; stroke: var(--c-akzent); stroke-width: 2.5; }
.knopf-haken { fill: none; stroke: var(--sz-haken); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; }
.lampe { fill: var(--c-akzent); }
.schlitz { fill: var(--sz-schlitz); }
.deckel { fill: var(--sz-f-top); stroke: var(--sz-kante); }
.glas { fill: var(--sz-glas); }
.glas-raster path { stroke: var(--sz-glas-linie); stroke-width: 1; fill: none; }
.glas-rand { fill: none; stroke: var(--sz-glas-rahmen); stroke-width: 3; stroke-linejoin: round; }
.suchweg { opacity: 0; }
.band { fill: var(--c-akzent); opacity: 0.4; }
.band--wort { fill: var(--c-text); opacity: 0.2; }
.treffer .f-top { fill: var(--c-akzent); }
.hub.treffer { transform: translateY(-8px); }
.kabel { stroke: var(--sz-kabel); stroke-width: 1.5; fill: none; }
.kabel--gekappt { stroke-dasharray: 4 5; }
.kappung circle { fill: var(--sz-karte-top); stroke: var(--c-status-kritisch); stroke-width: 1.5; }
.kappung path { stroke: var(--c-status-kritisch); stroke-width: 1.8; stroke-linecap: round; }
.wolke { fill: var(--sz-karte-top); stroke: var(--sz-zeile); stroke-width: 1.5; }
.puls { stroke: var(--c-akzent); stroke-width: 3.5; stroke-linecap: round; fill: none; opacity: 0; }
.knoten { fill: var(--sz-karte-top); stroke: var(--c-akzent); stroke-width: 2; }
.karte-zeile { stroke: var(--sz-zeile); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.karte-zeile--stark { stroke: var(--c-text-sekundaer); stroke-width: 3; }
.kennung { fill: var(--c-akzent); opacity: 0.8; }
.marker { fill: var(--c-markierung); }
.beleg-punkt, .frage-punkt { fill: var(--c-akzent); }

/* Zeitachse */
.mz1{stroke-dasharray:60.0;}.laeuft .mz1{animation:mz1 16.0s linear infinite both;}@keyframes mz1{0%,56.56%{stroke-dashoffset:60.0;opacity:0}56.69%{stroke-dashoffset:60.0;opacity:1}59.69%,96.25%{stroke-dashoffset:0;opacity:1}99.38%,100%{stroke-dashoffset:0;opacity:0}}
.mz2{stroke-dasharray:48.0;}.laeuft .mz2{animation:mz2 16.0s linear infinite both;}@keyframes mz2{0%,58.75%{stroke-dashoffset:48.0;opacity:0}58.88%{stroke-dashoffset:48.0;opacity:1}61.87%,96.25%{stroke-dashoffset:0;opacity:1}99.38%,100%{stroke-dashoffset:0;opacity:0}}
.mz3{stroke-dasharray:62.4;}.laeuft .mz3{animation:mz3 16.0s linear infinite both;}@keyframes mz3{0%,60.94%{stroke-dashoffset:62.4;opacity:0}61.06%{stroke-dashoffset:62.4;opacity:1}64.06%,96.25%{stroke-dashoffset:0;opacity:1}99.38%,100%{stroke-dashoffset:0;opacity:0}}
.mz4{stroke-dasharray:36.0;}.laeuft .mz4{animation:mz4 16.0s linear infinite both;}@keyframes mz4{0%,63.12%{stroke-dashoffset:36.0;opacity:0}63.25%{stroke-dashoffset:36.0;opacity:1}66.25%,96.25%{stroke-dashoffset:0;opacity:1}99.38%,100%{stroke-dashoffset:0;opacity:0}}
.mz5{stroke-dasharray:52.8;}.laeuft .mz5{animation:mz5 16.0s linear infinite both;}@keyframes mz5{0%,65.31%{stroke-dashoffset:52.8;opacity:0}65.44%{stroke-dashoffset:52.8;opacity:1}68.44%,96.25%{stroke-dashoffset:0;opacity:1}99.38%,100%{stroke-dashoffset:0;opacity:0}}
.laeuft .suchweg--x{animation:swx 16.0s linear infinite both;}@keyframes swx{0%,40.00%{opacity:0;transform:none}40.94%{opacity:1;transform:none}47.50%{opacity:1;transform:translate(118.1px,68.2px)}48.75%,100%{opacity:0;transform:translate(118.1px,68.2px)}}
.laeuft .suchweg--y{animation:swy 16.0s linear infinite both;}@keyframes swy{0%,41.25%{opacity:0;transform:none}42.19%{opacity:1;transform:none}48.75%{opacity:1;transform:translate(-143.0px,82.6px)}50.00%,100%{opacity:0;transform:translate(-143.0px,82.6px)}}
.laeuft .ab1{animation:ab1 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab1{0%,15.44%{opacity:0;transform:translateY(-34px)}18.56%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab2{animation:ab2 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab2{0%,16.50%{opacity:0;transform:translateY(-34px)}19.62%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab3{animation:ab3 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab3{0%,17.56%{opacity:0;transform:translateY(-34px)}20.69%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab4{animation:ab4 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab4{0%,18.62%{opacity:0;transform:translateY(-34px)}21.75%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab5{animation:ab5 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab5{0%,19.69%{opacity:0;transform:translateY(-34px)}22.81%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab6{animation:ab6 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab6{0%,20.75%{opacity:0;transform:translateY(-34px)}23.88%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab7{animation:ab7 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab7{0%,21.81%{opacity:0;transform:translateY(-34px)}24.94%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab8{animation:ab8 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab8{0%,22.88%{opacity:0;transform:translateY(-34px)}26.00%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab9{animation:ab9 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab9{0%,23.94%{opacity:0;transform:translateY(-34px)}27.06%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab10{animation:ab10 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab10{0%,25.00%{opacity:0;transform:translateY(-34px)}28.12%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab11{animation:ab11 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab11{0%,26.06%{opacity:0;transform:translateY(-34px)}29.19%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab12{animation:ab12 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab12{0%,27.12%{opacity:0;transform:translateY(-34px)}30.25%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab13{animation:ab13 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab13{0%,28.19%{opacity:0;transform:translateY(-34px)}31.31%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab14{animation:ab14 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab14{0%,29.25%{opacity:0;transform:translateY(-34px)}32.38%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab15{animation:ab15 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab15{0%,30.31%{opacity:0;transform:translateY(-34px)}33.44%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .ab16{animation:ab16 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes ab16{0%,31.37%{opacity:0;transform:translateY(-34px)}34.50%,96.25%{opacity:1;transform:none}99.38%,100%{opacity:0;transform:none}}
.laeuft .dokument{animation:dok 16.0s cubic-bezier(.5,0,.3,1) infinite both;}@keyframes dok{0%,3.75%{opacity:1;transform:none}12.50%{opacity:1;transform:translate(39.9px,-23.0px)}15.00%,97.50%{opacity:0;transform:translate(39.9px,-23.0px)}97.56%{opacity:0;transform:none}100%{opacity:1;transform:none}}
.laeuft .frage{animation:frage 16.0s cubic-bezier(.5,0,.3,1) infinite both;}@keyframes frage{0%,33.75%{opacity:1;transform:none}40.62%{opacity:1;transform:translate(33.3px,19.2px)}42.50%,97.50%{opacity:0;transform:translate(33.3px,19.2px)}97.56%{opacity:0;transform:none}100%{opacity:1;transform:none}}
.laeuft .antwort{animation:antw 16.0s cubic-bezier(.2,.7,.3,1) infinite both;}@keyframes antw{0%,80.62%{opacity:0;transform:translate(-33.3px,-19.2px)}86.88%,96.88%{opacity:1;transform:none}99.69%,100%{opacity:0;transform:none}}
.laeuft .marker{animation:mark 16.0s linear infinite both;}@keyframes mark{0%,86.88%{opacity:0}89.38%,100%{opacity:1}}
.laeuft .hub.treffer{animation:hub 16.0s cubic-bezier(.3,.7,.3,1) infinite both;}@keyframes hub{0%,48.12%{transform:none}51.25%,100%{transform:translateY(-8px)}}.laeuft .treffer .f-top{animation:hubfarbe 16.0s linear infinite both;}@keyframes hubfarbe{0%,48.12%{fill:var(--sz-f-top)}50.00%,100%{fill:var(--c-akzent)}}
.laeuft .knopf-ring{animation:ring 16.0s linear infinite both;}@keyframes ring{0%,69.38%{stroke:var(--sz-kante);stroke-width:1}71.25%,97.50%{stroke:var(--c-akzent);stroke-width:2.5}100%{stroke:var(--sz-kante);stroke-width:1}}.laeuft .knopf-haken{animation:haken 16.0s linear infinite both;}@keyframes haken{0%,71.25%{stroke-dashoffset:22}75.00%,97.50%{stroke-dashoffset:0;opacity:1}99.38%,100%{opacity:0;stroke-dashoffset:0}}
.puls--dok{stroke-dasharray:14 93;stroke-dashoffset:14;}.laeuft .puls--dok{animation:pdok 16.0s linear infinite both;}@keyframes pdok{0%,6.25%{stroke-dashoffset:14;opacity:1}11.88%{stroke-dashoffset:-53;opacity:1}12.19%,100%{opacity:0;stroke-dashoffset:-53}}
.puls--frage{stroke-dasharray:14 122;stroke-dashoffset:14;}.laeuft .puls--frage{animation:pfrage 16.0s linear infinite both;}@keyframes pfrage{0%,35.00%{stroke-dashoffset:14;opacity:1}40.62%{stroke-dashoffset:-82;opacity:1}40.94%,100%{opacity:0;stroke-dashoffset:-82}}
.puls--antwort{stroke-dasharray:14 64;stroke-dashoffset:14;}.laeuft .puls--antwort{animation:pantwort 16.0s linear infinite both;}@keyframes pantwort{0%,77.50%{stroke-dashoffset:14;opacity:1}83.12%{stroke-dashoffset:-24;opacity:1}83.44%,100%{opacity:0;stroke-dashoffset:-24}}
.laeuft .schritt:nth-child(1){animation:st1 16.0s linear infinite both;}@keyframes st1{0.00%,34.25%{color:var(--c-text);border-left-color:var(--c-akzent)}34.38%,100%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}}
.laeuft .schritt:nth-child(2){animation:st2 16.0s linear infinite both;}@keyframes st2{0%,34.31%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}34.38%,53.62%{color:var(--c-text);border-left-color:var(--c-akzent)}53.75%,100%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}}
.laeuft .schritt:nth-child(3){animation:st3 16.0s linear infinite both;}@keyframes st3{0%,53.69%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}53.75%,68.62%{color:var(--c-text);border-left-color:var(--c-akzent)}68.75%,100%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}}
.laeuft .schritt:nth-child(4){animation:st4 16.0s linear infinite both;}@keyframes st4{0%,68.69%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}68.75%,78.62%{color:var(--c-text);border-left-color:var(--c-akzent)}78.75%,100%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}}
.laeuft .schritt:nth-child(5){animation:st5 16.0s linear infinite both;}@keyframes st5{0%,78.69%{color:var(--c-text-sekundaer);border-left-color:var(--c-linie)}78.75%,99.88%{color:var(--c-text);border-left-color:var(--c-akzent)}100%{color:var(--c-text);border-left-color:var(--c-akzent)}}
.laeuft .szene-fortschritt span:nth-child(1){animation:fs1 16.0s linear infinite both;}@keyframes fs1{0.00%,34.25%{background:var(--c-akzent)}34.38%,100%{background:var(--c-linie)}}
.laeuft .szene-fortschritt span:nth-child(2){animation:fs2 16.0s linear infinite both;}@keyframes fs2{0%,34.31%{background:var(--c-linie)}34.38%,53.62%{background:var(--c-akzent)}53.75%,100%{background:var(--c-linie)}}
.laeuft .szene-fortschritt span:nth-child(3){animation:fs3 16.0s linear infinite both;}@keyframes fs3{0%,53.69%{background:var(--c-linie)}53.75%,68.62%{background:var(--c-akzent)}68.75%,100%{background:var(--c-linie)}}
.laeuft .szene-fortschritt span:nth-child(4){animation:fs4 16.0s linear infinite both;}@keyframes fs4{0%,68.69%{background:var(--c-linie)}68.75%,78.62%{background:var(--c-akzent)}78.75%,100%{background:var(--c-linie)}}
.laeuft .szene-fortschritt span:nth-child(5){animation:fs5 16.0s linear infinite both;}@keyframes fs5{0%,78.69%{background:var(--c-linie)}78.75%,99.88%{background:var(--c-akzent)}100%{background:var(--c-akzent)}}
@keyframes sk1{0.00%,34.25%{opacity:1}34.38%,100%{opacity:0}}
@keyframes sk2{0%,34.31%{opacity:0}34.38%,53.62%{opacity:1}53.75%,100%{opacity:0}}
@keyframes sk3{0%,53.69%{opacity:0}53.75%,68.62%{opacity:1}68.75%,100%{opacity:0}}
@keyframes sk4{0%,68.69%{opacity:0}68.75%,78.62%{opacity:1}78.75%,100%{opacity:0}}
@keyframes sk5{0%,78.69%{opacity:0}78.75%,99.88%{opacity:1}100%{opacity:1}}
@media (max-width: 1039px){.laeuft .schritte{display:grid}.laeuft .schritt{grid-area:1/1}.laeuft .schritt:nth-child(1){animation:st1 16.0s linear infinite both,sk1 16.0s linear infinite both;}.laeuft .schritt:nth-child(2){animation:st2 16.0s linear infinite both,sk2 16.0s linear infinite both;}.laeuft .schritt:nth-child(3){animation:st3 16.0s linear infinite both,sk3 16.0s linear infinite both;}.laeuft .schritt:nth-child(4){animation:st4 16.0s linear infinite both,sk4 16.0s linear infinite both;}.laeuft .schritt:nth-child(5){animation:st5 16.0s linear infinite both,sk5 16.0s linear infinite both;}}