/* ===================================================================
   Basis-Design-System (bis 2026-08-30: warmes Papier/Graphit + Serif).
   Seit 2026-08-30 site-weit auf das Startseiten-Redesign umgestellt --
   IBM Plex, FL-Blau-Akzent, helle Chrome mit Punktraster, Karten mit
   Radius/Schatten. Herkunft + Ausnahmen s. DESIGN.md "Rollout auf alle
   Seiten". Bewusste Inseln (eigene Palette/Chrome): Minecraft-Skin weiter
   unten -- der bleibt dunkel, unabhaengig von dieser Umstellung. */
.dw-page {
  --dw-ink: #0B1220;
  --dw-muted: #475467;
  --dw-paper: #FAFBFD;
  --dw-paper-alt: #F2F4F7;
  --dw-card: #FFFFFF;
  --dw-graphite: #0B1220;
  --dw-graphite-ink: #F2F4F7;
  --dw-accent: #155EEF;
  --dw-accent-dark: #0F47B8;
  --dw-line: rgba(11,18,32,0.10);
  color: var(--dw-ink);
  background: var(--dw-paper);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  line-height: 1.6;
}
.dw-page * { box-sizing: border-box; }
.dw-page a { color: var(--dw-accent); }
.dw-page a:hover { color: var(--dw-accent-dark); }
/* Breite wie auf der Startseite (.dw-h-wrap: 1160px / 32px Innenabstand).
   Bis 2026-08-30 lagen die Inhaltsseiten bei 720/680px und wirkten
   dadurch deutlich schmaler als die Startseite -- die Nav war ausserdem
   schmaler als der Startseiten-Inhalt und damit leicht versetzt.
   Der Fliesstext begrenzt sich unabhaengig davon selbst (.dw-section
   p/li: 760px) -- die Containerbreite steuert nur, wie viel Platz
   Tabellen, Bildstrecken und Karten bekommen. `line-length` steht auf
   Budget 0, deshalb wird die Lesespalte nie an den Container gekoppelt. */
.dw-container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Skip-Link: erstes fokussierbares Element, unsichtbar bis zum
   Tastatur-Fokus; muss ueber der sticky Nav (z-index 20) liegen.
   Selektor mit .dw-page-Prefix wegen der Spezifitaets-Falle aus
   DESIGN.md (".dw-page a" schlaegt jede nackte Klassen-Regel). */
.dw-page .dw-skip {
  position: absolute;
  left: -9999px;
  z-index: 30;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  /* feste Farben statt var(--dw-accent): die Minecraft-Insel setzt den
     Akzent auf Grasgruen, Weiss darauf faellt unter 4.5:1 */
  background: #0B1220;
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}
.dw-page .dw-skip:focus-visible {
  left: 0;
  top: 0;
  position: fixed;
  color: #FFFFFF;
}

/* Kopfleiste: hell, mit Blur-Verlauf und Vier-Farben-Badge, sitzt sticky. */
.dw-nav {
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(240,245,255,0.82) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--dw-line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.dw-nav .dw-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.dw-nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--dw-ink);
  text-decoration: none;
}
.dw-nav-mark::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2231%22%20height%3D%2231%22%20rx%3D%2210%22%20fill%3D%22%23ffffff%22%20stroke%3D%22rgba%2811%2C18%2C32%2C0.12%29%22%2F%3E%3Cpath%20d%3D%22M9%2C3%20H16%20V16%20H3%20V9%20A6%2C6%200%200%201%209%2C3%20Z%22%20fill%3D%22%23EF9C15%22%2F%3E%3Cpath%20d%3D%22M16%2C3%20H23%20A6%2C6%200%200%201%2029%2C9%20V16%20H16%20Z%22%20fill%3D%22%23D6158A%22%2F%3E%3Cpath%20d%3D%22M3%2C16%20H16%20V29%20H9%20A6%2C6%200%200%201%203%2C23%20Z%22%20fill%3D%22%230FA69B%22%2F%3E%3Cpath%20d%3D%22M16%2C16%20H29%20V23%20A6%2C6%200%200%201%2023%2C29%20H16%20Z%22%20fill%3D%22%23155EEF%22%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
}
.dw-nav-mark-text { display: flex; flex-direction: column; line-height: 1.2; }
.dw-nav-slogan {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--dw-muted);
  margin-top: 2px;
}
.dw-nav-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.dw-nav-links a {
  position: relative;
  color: var(--dw-muted);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.15s ease-out;
}

/* Status-Chip (2026-08-31, neunte Runde): Gegenstueck zur Status-Zeile
   im Footer -- Header und Footer rahmen die Seite mit demselben
   Maschinenzustand. Klickbar aufs Abenteuer-Log, weil "Abenteuer" mit
   der Kuerzung auf 5 Kern-Punkte aus der Nav gefallen ist (der Footer
   traegt seit dem Umbau die Voll-Liste, deshalb darf die Kopfleiste
   schlank sein). Punkt statisch (pulsing-dot Budget 0), Schrift
   0.78rem wie im Footer (tiny-text-Grenze 12px). */
.dw-page .dw-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(11, 18, 32, 0.14);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-muted);
  text-decoration: none;
  transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.dw-page .dw-nav-status:hover,
.dw-page .dw-nav-status:focus-visible,
.dw-page .dw-nav-status[aria-current] {
  color: var(--dw-accent);
  border-color: rgba(21, 94, 239, 0.35);
}
.dw-nav-status-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EF9C15;
  box-shadow: 0 0 0 4px rgba(239, 156, 21, 0.15);
}
.dw-nav-status-short { display: none; }
/* Unter ~1020px reicht der Platz neben Marke + 5 Punkten nicht mehr fuer
   den vollen Chip-Text. Statt ihn zu verstecken (so war es bis 09/2026):
   Kurzform "Woche N" rueckt neben die Marke in die erste Zeile, die
   Nav-Links wandern komplett in die zweite. Kein Burger -- 5 kurze
   Punkte wrappen sauber, und ein Checkbox-Burger haette ohne JS weder
   aria-expanded noch Fokus-Semantik. */
@media (max-width: 1020px) {
  .dw-nav-status-long { display: none; }
  .dw-nav-status-short { display: inline; }
  .dw-page .dw-nav-status { order: 1; }
  .dw-nav-links { order: 2; flex-basis: 100%; }
}
/* Unter ~480px: Links als Reihe mit echten Touch-Zielen (>= 40px hoch). */
@media (max-width: 480px) {
  .dw-nav-links { gap: 0 18px; }
  .dw-nav-links a { min-height: 40px; display: inline-flex; align-items: center; }
}
.dw-nav-links a:hover,
.dw-nav-links a:focus-visible,
.dw-nav-links a[aria-current] { color: var(--dw-accent); }

/* Nav-Motion (2026-08-31, siebte Runde): drei 3D-Druck-Gesten, rein CSS.
   (1) Extruder-Unterstreichung: der Balken unter den Links faehrt per
       scaleX von links ein; die aktuelle Seite traegt ihn dauerhaft.
       aria-current setzt assemblePage() build-seitig in den Header-Part
       ("page" = exakte Seite, "true" = Sektions-Link einer Unterseite)
       -- weiterhin null Client-JS.
   (2) Toolchange: das Pinwheel-Badge dreht bei Hover/Fokus um 90 Grad.
       Die Geometrie ist 4-fach symmetrisch, nur die Farben wechseln die
       Position -- liest sich wie ein Werkzeugwechsel am Toolchanger.
   (3) Filament-Bahn: eine Linie in den vier Pinwheel-Farben an der
       Nav-Unterkante zeigt den Scroll-Fortschritt der Seite, mit einem
       Druckkopf-Punkt an der Spitze. Bewusst translateX der vollen Bahn
       statt scaleX, damit der Punkt nicht mitgestaucht wird -- die Bahn
       schiebt sich dadurch sichtbar zum Kopf hin ("Filament fliesst").
       Ersetzt den frueheren .dw-pk-progress-Balken auf /pib-kopf/,
       sonst laegen dort zwei Fortschrittsanzeigen uebereinander.
   Guards wie bei /pib-kopf/: @supports fuer Scroll-Timelines und
   prefers-reduced-motion um jede Bewegung; ohne Support bleibt die
   statische Nav samt border-bottom, bei reduced motion bleiben die
   aria-current-Unterstreichung und der Farbwechsel (Zustand ohne
   Bewegung). Die Scroll-Keyframes animieren nur transform/box-shadow
   (layout-transition Budget 0). */
.dw-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 1px;
  background: var(--dw-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.dw-nav-links a:hover::after,
.dw-nav-links a:focus-visible::after,
.dw-nav-links a[aria-current]::after { transform: scaleX(1); }

@media (prefers-reduced-motion: no-preference) {
  .dw-nav-links a::after { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
  .dw-nav-mark::before { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  .dw-nav-mark:hover::before,
  .dw-nav-mark:focus-visible::before { transform: rotate(90deg); }

  @supports (animation-timeline: scroll()) {
    .dw-nav {
      animation: dw-nav-lift linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 90px;
    }
    .dw-nav::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -5px;
      width: 100%;
      height: 11px;
      pointer-events: none;
      background-image:
        radial-gradient(circle 3.5px at center, var(--dw-ink) 82%, transparent 100%),
        linear-gradient(90deg, #EF9C15 0%, #D6158A 34%, #0FA69B 66%, #155EEF 100%);
      background-size: 11px 11px, 100% 3px;
      background-position: 100% 50%, 0 50%;
      background-repeat: no-repeat;
      transform: translateX(-100%);
      animation: dw-nav-filament linear both;
      animation-timeline: scroll(root);
    }
  }
}
@keyframes dw-nav-filament { to { transform: translateX(0); } }
@keyframes dw-nav-lift { to { box-shadow: 0 10px 28px -14px rgba(11, 18, 32, 0.28); } }

/* Ein Seitenkopf fuer alle Seiten (seit 2026-09-08, zweiundzwanzigste Runde):
   Startseite (.dw-h-hero) und Unterseiten (.dw-page-hero) teilen Karo,
   Radial-Wash und die wandernde Schichtlinie unten -- hell, mit feinem
   Punktraster (dokumentierte Ausnahme codex-grid-background). Einzige
   Ausnahme bleibt der Minecraft-Skin. */
.dw-hero, .dw-page-hero, .dw-h-hero {
  background-color: var(--dw-paper);
  background-image: radial-gradient(120% 80% at 8% 0%, #E9EFFF 0%, rgba(233,239,255,0) 58%),
    linear-gradient(var(--dw-line) 1px, transparent 1px), linear-gradient(90deg, var(--dw-line) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  border-bottom: 1px solid var(--dw-line);
  color: var(--dw-ink);
}
.dw-hero { padding: 40px 0 48px; }
.dw-page-hero { padding: 36px 0 40px; position: relative; }
/* Schlichter Kopf der Rechtsseiten: gleiche Flaeche, aber ohne Vase (shared.js
   applyHeroGitter() trifft nur die Ein-Klassen-Form) und in der 640-px-Spalte
   von .dw-legal, damit Titel und Text buendig stehen. */
.dw-page-hero--schlicht > .dw-container { max-width: 640px; }
/* Vase im Seitenkopf aller Unterseiten (seit 2026-09-08, Florian: „in alle Header"):
   shared.js setzt das Bauteil-Gitter (16 Schichten, 260 px) als erstes Kind jedes
   .dw-page-hero; Desktop oben rechts neben der 760-px-Lesespalte, hinter dem Inhalt
   (z-index 0, Container 1), schmaler als 1180 px blasser hinter dem Text, unter 900 px
   im Fluss zentriert ueber dem Titel. Knoten in FL-Blau, Linien Amber (hell-Modus). */
.dw-page-hero > .dw-container { position: relative; z-index: 1; }
.dw-page-hero .dw-hero-gitter.dw-kon-frag { position: absolute; top: 24px; right: max(32px, calc((100% - 1160px) / 2 + 32px)); height: min(260px, calc(100% - 48px)); width: auto; aspect-ratio: 1; margin: 0; color: var(--dw-kon-primary); opacity: 0.9; pointer-events: none; z-index: 0; }
@media (max-width: 1180px) { .dw-page-hero .dw-hero-gitter.dw-kon-frag { height: min(220px, calc(100% - 48px)); opacity: 0.4; } }
/* Handy: im Fluss ueber dem Titel, aber positioniert bleiben -- sonst verlieren SVG und
   Canvas (inset 0) ihren Bezug und dehnen sich ueber den ganzen Hero. */
@media (max-width: 900px) { .dw-page-hero .dw-hero-gitter.dw-kon-frag { position: relative; top: auto; right: auto; height: auto; width: 180px; margin: 0 auto 8px; opacity: 0.9; } }

/* Glutraster, Schicht 1 (2026-08-31, achte Runde): die Schichtlinie.
   Ein sanftes Amber-Band wandert langsam von unten nach oben ueber das
   Karo -- die "aktive Druckschicht" eines wachsenden Drucks. Antwort auf
   die Referenz stevensolbach.com (WebGL-Fluid im Hero): deren Kern ist
   ein lebendiger Hintergrund; hier rein CSS, weil null JS gilt. Bewusst
   linear statt radial (ein radialer Amber-Hauch waere exakt der
   `radial-spotlight-glow`-Detektor-Befund) und bewusst transform statt
   background-position (Regel: Bewegung nur transform/opacity). Das
   Pseudo ist deckungsgleich mit dem Hero, das Band liegt in seinem
   oberen Stueck; translateY(100% -> -100%) schiebt es unabhaengig von
   der Herohoehe einmal komplett durch, die Opacity-Rampen kaschieren
   den Schleifen-Sprung. */
@media (prefers-reduced-motion: no-preference) {
  .dw-hero, .dw-page-hero, .dw-h-hero {
    position: relative;
    overflow: hidden;
  }
  .dw-hero > .dw-container, .dw-page-hero > .dw-container, .dw-h-hero > .dw-h-wrap {
    position: relative;
    z-index: 1;
  }
  .dw-hero::after, .dw-page-hero::after, .dw-h-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg,
      rgba(239,156,21,0) 0px,
      rgba(239,156,21,0.11) 62px,
      rgba(239,156,21,0.16) 76px,
      rgba(239,156,21,0.11) 90px,
      rgba(239,156,21,0) 152px,
      rgba(239,156,21,0) 100%);
    animation: dw-schicht 16s linear infinite;
  }
}
@keyframes dw-schicht {
  0% { transform: translateY(100%); opacity: 0; }
  10% { opacity: 1; }
  84% { opacity: 1; }
  96%, 100% { transform: translateY(-100%); opacity: 0; }
}
.dw-dateline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(21,94,239,0.22);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-accent);
  margin: 0 0 18px;
}
.dw-dateline::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dw-accent);
  box-shadow: 0 0 0 4px rgba(21,94,239,0.15);
}
.dw-hero h1 {
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 16ch;
  color: var(--dw-ink);
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
.dw-hero p {
  font-size: 1.08rem;
  color: var(--dw-muted);
  max-width: 52ch;
  margin: 0 0 14px;
}
.dw-status {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--dw-line);
  font-size: 0.96rem;
  color: var(--dw-muted);
  max-width: 54ch;
}
.dw-status strong { color: var(--dw-ink); }

.dw-page-hero .dw-dateline { margin-bottom: 14px; }
.dw-page-hero h1 {
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  /* 20ch waren zu eng fuer den breiteren Container (2026-08-30): kurze
     Titel wie "Was der Drucker verarbeiten kann" wurden mit Trennstrich
     umbrochen, obwohl daneben Platz frei war. */
  max-width: 30ch;
  color: var(--dw-ink);
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}
.dw-page-hero p {
  font-size: 1.04rem;
  color: var(--dw-muted);
  max-width: 58ch;
  margin: 0;
}
/* Zweiter Hero-Absatz (Stand, Einordnung) braucht Luft, sonst lesen sich
   Lead und Nachsatz als ein Block. Die Dateline bleibt ausgenommen. */
.dw-page-hero p + p:not(.dw-dateline) {
  margin-top: 14px;
}

.dw-section {
  padding: 52px 0;
  border-bottom: 1px solid var(--dw-line);
}
.dw-section.dw-alt { background: var(--dw-paper-alt); }
.dw-section .dw-container { max-width: 1160px; }
/* Die Sektion ist breit, die Lesespalte bleibt es nicht. Fliesstext
   begrenzt sich schon selbst (.dw-section p/li unten: 760px), hier
   werden nur die Bloecke nachgezogen, die sonst auf volle 1160px
   aufreissen wuerden -- eine 1160px breite Callout-Box mit schmalem
   Text darin saehe kaputt aus. Tabellen und Bildstrecken duerfen
   dagegen bewusst breiter werden, davon profitieren sie. */
.dw-section > .dw-container > .dw-callout,
.dw-section > .dw-container > .dw-facts { max-width: 780px; }
.dw-section > .dw-container > .dw-table-wrap { max-width: 860px; }
.dw-section > .dw-container > .dw-figure { max-width: 860px; }
.dw-num {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--dw-muted);
  margin: 0 0 8px;
}
.dw-muted { color: var(--dw-muted); }
.dw-section h2 {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 30ch;
  color: var(--dw-ink);
  overflow-wrap: break-word;
  /* Ueberschriften nicht silbentrennen: Chrome fuellt mit hyphens:auto die
     erste Zeile gierig ("der eigentli-che Unterschied"). balance verteilt
     die Zeilen, break-word bleibt als Notnagel fuer Ueberlaenge. */
  hyphens: manual;
  text-wrap: balance;
}
.dw-section h3 {
  font-weight: 600;
  font-size: 1.15rem;
  margin: 28px 0 12px;
  color: var(--dw-ink);
}
/* ACHTUNG px, nicht ch: die Groesse des Fliesstextes kommt vom
   WP-Theme (22px), nicht aus diesem CSS -- 70ch waren dadurch 924px
   (~107 Zeichen). Bis 2026-08-30 fiel das nie auf, weil der 680px-
   Container die echte Grenze war und die ch-Angabe nie griff. 760px
   sind bei 22px rund 72 Zeichen. */
.dw-section p, .dw-section li {
  max-width: 760px;
  color: var(--dw-ink);
}
.dw-section p { margin: 0 0 16px; }
.dw-section ul.dw-list, .dw-section ol.dw-list {
  max-width: 760px;
  margin: 0 0 16px;
  padding-left: 22px;
}
.dw-section ul.dw-list li, .dw-section ol.dw-list li { margin-bottom: 8px; }

.dw-facts { list-style: none; margin: 0; padding: 0; }
.dw-facts li {
  padding: 18px 0;
  border-top: 1px dashed var(--dw-line);
}
.dw-facts li:first-child { border-top: none; }

.dw-callout {
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  box-shadow: 0 8px 24px -18px rgba(11,18,32,0.20);
  padding: 22px 24px;
  margin: 4px 0 16px;
}
.dw-callout p:last-child { margin-bottom: 0; }

/* Tabellen.
   860px, nicht mehr: bei 980px liefen einzelne Textzellen ("Wofuer",
   "Urteil") auf ~88 Zeichen pro Zeile und rissen die Regel
   line-length (Budget 0). 860px sind gegenueber den frueheren 680px
   trotzdem deutlich mehr Platz. */
.dw-table-wrap {
  max-width: 860px;
  overflow-x: auto;
  margin: 0 0 20px;
  -webkit-overflow-scrolling: touch;
}
.dw-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.94rem;
  /* fixed statt auto: im Auto-Layout zieht eine einzelne
     Beschreibungsspalte fast die ganze Breite an sich (gemessen 699px
     von 860px) und reisst line-length. max-width auf der Zelle hilft
     nicht -- Chrome ignoriert das im Auto-Layout. */
  table-layout: fixed;
}
.dw-table caption {
  text-align: left;
  font-size: 0.8rem;
  color: var(--dw-muted);
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
.dw-table th, .dw-table td {
  text-align: left;
  padding: 10px 16px 10px 0;
  border-bottom: 1px solid var(--dw-line);
  vertical-align: top;
  overflow-wrap: break-word;
  hyphens: auto;
}
.dw-table th {
  font-weight: 600;
  border-bottom: 2px solid var(--dw-ink);
}
.dw-table td:last-child, .dw-table th:last-child { padding-right: 0; }

/* Footer „Druckbett" (2026-08-31, neunte Runde): die Seite endet auf der
   Platte, auf der alles gedruckt wird. Oben eine statische Filament-Bahn in
   den vier Pinwheel-Farben (Echo der Nav-Fortschrittslinie, dort wo der
   Scroll endet), darunter Marke / Seiten / Rechtliches als Grid, unten eine
   Schlusszeile mit Credit + Status-Pille. Gesten recycelt aus der Nav
   (Toolchange-Drehung, Extruder-Unterstreichung — hier in Glut-Amber),
   Guards wie dort: Bewegung nur unter no-preference, nur transform. */
.dw-footer {
  background: var(--dw-graphite);
  color: #98A2B3;
  font-size: 0.92rem;
}
.dw-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #EF9C15 0%, #D6158A 34%, #0FA69B 66%, #155EEF 100%);
}
.dw-footer .dw-container { padding-top: 44px; padding-bottom: 26px; }
.dw-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(180px, 240px);
  gap: 36px 48px;
  align-items: start;
}
/* Bauteil-Gitter klein im Footer (seit 07.09.2026 abends, wie das Gehirn im FL-Pro-Footer):
   gleiche Vase wie im Startseiten-Hero, 16 Schichten, 240 px, rechts in der vierten Spalte. */
.dw-footer .dw-footer-gitter.dw-kon-frag { width: min(100%, 240px); aspect-ratio: 1; margin: -8px 0 0; justify-self: end; color: #F2F4F7; pointer-events: none; }
.dw-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.dw-footer-mark::before {
  content: "";
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2231%22%20height%3D%2231%22%20rx%3D%2210%22%20fill%3D%22%23ffffff%22%20stroke%3D%22rgba%2811%2C18%2C32%2C0.12%29%22%2F%3E%3Cpath%20d%3D%22M9%2C3%20H16%20V16%20H3%20V9%20A6%2C6%200%200%201%209%2C3%20Z%22%20fill%3D%22%23EF9C15%22%2F%3E%3Cpath%20d%3D%22M16%2C3%20H23%20A6%2C6%200%200%201%2029%2C9%20V16%20H16%20Z%22%20fill%3D%22%23D6158A%22%2F%3E%3Cpath%20d%3D%22M3%2C16%20H16%20V29%20H9%20A6%2C6%200%200%201%203%2C23%20Z%22%20fill%3D%22%230FA69B%22%2F%3E%3Cpath%20d%3D%22M16%2C16%20H29%20V23%20A6%2C6%200%200%201%2023%2C29%20H16%20Z%22%20fill%3D%22%23155EEF%22%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
}
.dw-footer-mark-text { display: flex; flex-direction: column; line-height: 1.25; }
.dw-footer-title { font-weight: 600; font-size: 1.1rem; color: #F2F4F7; }
.dw-footer-slogan {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: #8490A2;
  margin-top: 3px;
}
.dw-footer-brand > p { margin: 16px 0 0; max-width: 420px; line-height: 1.6; }
.dw-footer-kicker {
  margin: 0 0 14px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8490A2;
}
.dw-footer-kicker--gap { margin-top: 24px; }
.dw-footer-links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
  gap: 9px 26px;
}
.dw-footer-links--single { grid-template-columns: 1fr; }
.dw-footer-links a {
  position: relative;
  color: #D0D5DD;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.15s ease-out;
}
.dw-footer-links a:hover,
.dw-footer-links a:focus-visible { color: #EF9C15; }
.dw-footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 1px;
  background: #EF9C15;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.dw-footer-links a:hover::after,
.dw-footer-links a:focus-visible::after { transform: scaleX(1); }
.dw-footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(152, 162, 179, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
}
.dw-footer-credit { margin: 0; font-size: 0.78rem; color: #8490A2; }
.dw-footer-credit a {
  color: #98A2B3;
  text-decoration: underline;
  text-decoration-color: rgba(152, 162, 179, 0.4);
  text-underline-offset: 2px;
}
.dw-footer-credit a:hover,
.dw-footer-credit a:focus-visible { color: #D0D5DD; }
.dw-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid rgba(152, 162, 179, 0.25);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: #98A2B3;
}
.dw-footer-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #EF9C15;
  box-shadow: 0 0 0 4px rgba(239, 156, 21, 0.15);
}
@media (prefers-reduced-motion: no-preference) {
  .dw-footer-links a::after { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
  .dw-footer-mark::before { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
  .dw-footer-mark:hover::before,
  .dw-footer-mark:focus-visible::before { transform: rotate(90deg); }
}
@media (max-width: 860px) {
  .dw-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .dw-footer .dw-footer-gitter.dw-kon-frag { justify-self: center; margin: 0; width: min(100%, 200px); }
  .dw-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Code-Beispiele */
.dw-code {
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 4px 0 20px;
  overflow-x: auto;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--dw-ink);
}
.dw-code code { white-space: pre; }

/* Bildstrecken + Clips (Lerneinheiten) -- Captions im Muster der Tabellen-Captions */
.dw-figure {
  margin: 4px 0 24px;
  max-width: 860px;
}
.dw-figure img, .dw-figure video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: var(--dw-paper);
}
.dw-figure figcaption {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--dw-muted);
  margin-top: 8px;
  max-width: 62ch;
}
/* Hochformat-Clips vom Handy: 9:16 auf voller Figurenbreite waere 1,5 m hoch.
   Zweiter Selektor braucht die Spezifitaet von Zeile 396
   (.dw-section > .dw-container > .dw-figure), sonst greift die 860px-Regel. */
.dw-figure--hoch,
.dw-section > .dw-container > .dw-figure--hoch { max-width: 320px; }
.dw-figure--hoch video { aspect-ratio: 9 / 16; background: #0B1220; }
/* Querformat-Druckclips: schmaler als die vollen 860px, damit sie in einer
   Liste neben einem Hochformat-Clip nicht erschlagend wirken. */
.dw-figure--druck,
.dw-section > .dw-container > .dw-figure--druck { max-width: 620px; }
.dw-figure--druck video { aspect-ratio: 16 / 9; background: #0B1220; }

/* ---------------------------------------------------------------
   Generische Bausteine aus dem Materiallabor (2026-09-03, siebzehnte
   Runde). Was auf /materialien/ als .dw-mat-* entstand, gibt es hier
   fuer alle Seiten: Zonen-Tokens, reagierende Tabellen, Handy-Karten
   per data-label, Kategoriebaender, getoente Callouts, Kennwert-
   Leiste, Foto-Kacheln, Prozessband, Bildnachweis, Verwandt-Chips,
   seit 2026-09-08 Protokollkarten (.dw-dp-Block unten).
   Die .dw-mat-*-Regeln bleiben unangetastet (Tests haengen daran).
   Guards wie dort: Bewegung nur unter no-preference, Amber nie als
   Text auf Papier, Flaechen ohne Rand+Schatten (nested-cards).
   --------------------------------------------------------------- */
.dw-page {
  --dw-gruen: #08785B;
  --dw-gruen-soft: #EAF8F2;
  --dw-gelb: #8A5A00;
  --dw-gelb-soft: #FFF6DB;
  --dw-rot: #B42318;
  --dw-rot-soft: #FEF0EE;
  --dw-blau: #155EEF;
  --dw-blau-soft: #E9EFFF;
}

/* Tabellen reagieren: Zahlensatz, Zeilen-Hover, Fokus. */
.dw-table { font-variant-numeric: tabular-nums; }
.dw-table tbody tr { transition: background-color 0.15s ease; }
.dw-table tbody tr:focus-within { background: rgba(21,94,239,0.07); }
@media (hover: hover) and (pointer: fine) {
  .dw-table tbody tr:hover { background: rgba(21,94,239,0.05); }
}

/* Kategorieband: Symbol, ausgeschriebener Name, Regel-Pille,
   Messbalken, darauf die Tabelle oder Liste. Farbe wird von Symbol
   und Namen begleitet, nie allein. Ohne Rand und Schatten, damit die
   Tabelle darin keine Karte in einer Karte ist. */
.dw-band {
  --dw-zone: var(--dw-blau);
  --dw-zone-soft: var(--dw-blau-soft);
  max-width: 1060px;
  margin: 0 0 22px;
  padding: 30px 28px 34px;
  border-radius: 20px;
  background-color: var(--dw-zone-soft);
  background-image: linear-gradient(90deg, var(--dw-zone-soft), rgba(255,255,255,0.82) 76%);
}
.dw-band + .dw-band { margin-top: 30px; }
.dw-band--gruen { --dw-zone: var(--dw-gruen); --dw-zone-soft: var(--dw-gruen-soft); }
.dw-band--gelb { --dw-zone: var(--dw-gelb); --dw-zone-soft: var(--dw-gelb-soft); }
.dw-band--rot { --dw-zone: var(--dw-rot); --dw-zone-soft: var(--dw-rot-soft); }
.dw-band--blau { --dw-zone: var(--dw-blau); --dw-zone-soft: var(--dw-blau-soft); }
.dw-band-kopf {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.dw-band-kopf svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--dw-zone);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dw-section .dw-band-kopf h3 { margin: 0 0 3px; font-size: 1.28rem; }
.dw-section .dw-band-name {
  margin: 0;
  color: var(--dw-zone);
  font-size: 0.84rem;
  font-weight: 600;
}
.dw-section .dw-band-regel {
  margin: 0;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--dw-zone-soft);
  color: var(--dw-zone);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.dw-meter {
  width: 100%;
  height: 6px;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(11,18,32,0.09);
}
.dw-meter span {
  display: block;
  width: var(--dw-meter, 100%);
  height: 100%;
  background: var(--dw-zone);
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.dw-section .dw-band > p { max-width: 64ch; color: var(--dw-muted); }
.dw-band .dw-table-wrap { max-width: 860px; margin-bottom: 0; }
.dw-band .dw-list { margin-bottom: 0; }
.dw-band .dw-table-wrap + p,
.dw-band .dw-list + p { margin-top: 16px; }
.dw-section .dw-band-note {
  max-width: 760px;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--dw-zone-soft);
  color: var(--dw-ink);
}

/* Getoente Callouts: flache Flaeche in Zonenfarbe, kein Schatten. */
.dw-callout--gruen, .dw-callout--gelb, .dw-callout--rot, .dw-callout--blau {
  --dw-zone: var(--dw-blau);
  --dw-zone-soft: var(--dw-blau-soft);
  border-color: transparent;
  background: var(--dw-zone-soft);
  box-shadow: none;
}
.dw-callout--gruen { --dw-zone: var(--dw-gruen); --dw-zone-soft: var(--dw-gruen-soft); }
.dw-callout--gelb { --dw-zone: var(--dw-gelb); --dw-zone-soft: var(--dw-gelb-soft); }
.dw-callout--rot { --dw-zone: var(--dw-rot); --dw-zone-soft: var(--dw-rot-soft); }
.dw-callout--gruen strong:first-child, .dw-callout--gelb strong:first-child,
.dw-callout--rot strong:first-child, .dw-callout--blau strong:first-child { color: var(--dw-zone); }

/* Kennwert-Leiste: Label/Wert-Paare zwischen Linien, kein Kasten. */
.dw-kennwerte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 24px;
  max-width: 860px;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--dw-line);
}
.dw-kennwerte > div {
  min-width: 0;
  padding: 14px 0;
  border-top: 1px solid var(--dw-line);
}
.dw-kennwerte dt { color: var(--dw-muted); font-size: 0.78rem; }
.dw-kennwerte dd {
  margin: 5px 0 0;
  color: var(--dw-ink);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Protokollkarten (2026-09-08, einundzwanzigste Runde): eine Karte je
   Druck auf /projekte-vater-sohn/, generiert von setup-druckprotokoll.js.
   Clips links, Zahlen rechts. Die Clips sind 16:9 (Handy, aeltere
   Zeitraffer) und 4:3 (Innenkamera nativ) gemischt, deshalb kein festes
   aspect-ratio; width/height kommen aus dem Karten-Modul. Karte mit
   Hairline + Hausschatten wie .dw-callout, die Figuren darin ohne Rand
   (nested-cards). Ergebnis immer als Wort mit Zeichen, Farbe nur dazu. */
.dw-dp-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 30px;
}
.dw-dp-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  min-width: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--dw-card);
  box-shadow: 0 10px 26px -18px rgba(11,18,32,0.28);
  scroll-margin-top: 116px;
}
.dw-dp-ausstellung {
  display: grid;
  gap: 36px;
  margin-top: 28px;
  padding: 30px;
  background-color: var(--dw-paper-alt);
  background-image: radial-gradient(circle 2px at center, rgba(11,18,32,0.16) 90%, transparent 100%);
  background-size: 28px 28px;
  border-radius: 24px;
}
.dw-dp-karte--fokus { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.dw-dp-liste > .dw-dp-karte:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dw-dp-liste > .dw-dp-karte:last-child:nth-child(odd) .dw-dp-medien video { border-radius: 16px 0 0 0; }
.dw-section .dw-dp-karte--fokus .dw-dp-kopf h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; }
.dw-section.dw-dp-bilanz { padding: 24px 0; border-bottom: 1px solid var(--dw-line); }
.dw-dp-bilanzwerte { margin: 0; max-width: none; border-bottom: 0; }
.dw-dp-bilanzwerte > div { padding: 4px 0; border: 0; }
.dw-dp-bilanzwerte dd { font-size: clamp(1rem, 1.8vw, 1.4rem); }
.dw-section.dw-dp-galerie { padding-top: 40px; }
.dw-dp-medien {
  min-width: 0;
}
.dw-dp-medien .dw-dp-medium { margin: 0; max-width: none; }
.dw-dp-medium video { display: block; width: 100%; height: auto; background: #0B1220; }
.dw-dp-medien video { aspect-ratio: 16 / 10; object-fit: contain; border-radius: 16px 16px 0 0; }
.dw-dp-karte--fokus .dw-dp-medien video { border-radius: 16px 0 0 0; }
.dw-dp-medium figcaption { margin: 0; padding: 10px 18px; font-size: 0.74rem; line-height: 1.45; }
.dw-dp-text { min-width: 0; padding: 22px 24px 20px; }
.dw-dp-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 6px;
}
.dw-section .dw-dp-kopf h3 { margin: 0; font-size: 1.5rem; }
.dw-section .dw-dp-meta {
  margin: 0 0 14px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--dw-muted);
}
.dw-dp-stand {
  --dw-zone: var(--dw-muted);
  --dw-zone-soft: var(--dw-paper-alt);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--dw-zone-soft);
  color: var(--dw-zone);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}
.dw-dp-stand::before { content: "?"; font-weight: 700; }
.dw-dp-stand--gut { --dw-zone: var(--dw-gruen); --dw-zone-soft: var(--dw-gruen-soft); }
.dw-dp-stand--gut::before { content: "\2713"; }
.dw-dp-stand--maengel { --dw-zone: var(--dw-gelb); --dw-zone-soft: var(--dw-gelb-soft); }
.dw-dp-stand--maengel::before { content: "!"; }
.dw-dp-stand--fehl { --dw-zone: var(--dw-rot); --dw-zone-soft: var(--dw-rot-soft); }
.dw-dp-stand--fehl::before { content: "\2715"; }
.dw-dp-stand--wdh { --dw-zone: var(--dw-blau); --dw-zone-soft: var(--dw-blau-soft); }
.dw-dp-stand--wdh::before { content: "\21BB"; }
.dw-dp-zahlen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 10px 0;
}
.dw-dp-zahlen > div { padding: 10px 0; }
.dw-dp-zahlen dd { font-size: 1rem; }
.dw-section .dw-dp-text > p { margin: 0 0 10px; font-size: 0.98rem; line-height: 1.55; }
.dw-section .dw-dp-text > p:last-child { margin-bottom: 0; }
.dw-section .dw-dp-text > .dw-dp-kurztext { margin: 12px 0 18px; }
.dw-dp-karte .dw-dp-stand--gut { background: transparent; padding: 0; }
.dw-dp-clip, .dw-dp-details { border-top: 1px solid var(--dw-line); }
.dw-dp-clip summary, .dw-dp-details summary,
.dw-dp-hinweise summary, .dw-dp-archiv summary {
  padding: 13px 0;
  min-height: 44px;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--dw-accent-dark);
  font-size: 0.9rem;
  line-height: 1.5;
  font-weight: 600;
}
.dw-dp-clip summary:hover, .dw-dp-details summary:hover,
.dw-dp-hinweise summary:hover, .dw-dp-archiv summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.dw-dp-clip summary:focus-visible, .dw-dp-details summary:focus-visible,
.dw-dp-hinweise summary:focus-visible, .dw-dp-archiv summary:focus-visible {
  outline: 3px solid var(--dw-accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.dw-dp-clip .dw-dp-medium { margin: 0 0 12px; }
.dw-dp-clip figcaption { padding: 10px 0; }
.dw-dp-details-inhalt { padding: 4px 0 12px; }
.dw-section .dw-dp-details-inhalt > p { font-size: 0.9rem; line-height: 1.6; }
.dw-section .dw-dp-details-inhalt > .dw-dp-meta,
.dw-section .dw-dp-details-inhalt > .dw-dp-mediennotiz { font-size: 0.76rem; color: var(--dw-muted); }
.dw-dp-hinweise { margin-top: 22px; max-width: 760px; }
.dw-section .dw-dp-hinweise p { max-width: 560px; font-size: 0.9rem; }
.dw-dp-archiv { border-block: 1px solid var(--dw-line); }
.dw-dp-archiv > summary { padding: 22px 0; font-size: 1.05rem; }
.dw-dp-archiv-inhalt { padding: 0 0 24px; }
.dw-dp-rahmenbedingungen { margin-top: 32px; }
/* Schnellprotokoll: acht Spalten brauchen die volle Bandbreite, die
   Notiz bekommt den groessten Anteil (table-layout: fixed liest die
   Breiten aus der Kopfzeile). */
.dw-section > .dw-container > .dw-dp-tabelle-wrap { max-width: 1060px; }
.dw-dp-tabelle { min-width: 760px; font-size: 0.86rem; }
.dw-dp-tabelle th:nth-child(1) { width: 10%; }
.dw-dp-tabelle th:nth-child(2) { width: 16%; }
.dw-dp-tabelle th:nth-child(3) { width: 13%; }
.dw-dp-tabelle th:nth-child(4) { width: 9%; }
.dw-dp-tabelle th:nth-child(5) { width: 8%; }
.dw-dp-tabelle th:nth-child(6) { width: 10%; }
.dw-dp-tabelle th:nth-child(7) { width: 10%; }
/* In der Tabelle darf der Chip umbrechen, sonst laeuft „Wiederholung" in die Notiz. */
.dw-dp-tabelle .dw-dp-stand { padding: 3px 8px; font-size: 0.76rem; white-space: normal; }
@media (max-width: 900px) {
  .dw-dp-ausstellung { padding: 22px; }
  .dw-dp-liste { gap: 24px; }
  .dw-dp-text { padding: 20px; }
  .dw-dp-karte--fokus { grid-template-columns: 1fr; }
  .dw-dp-liste > .dw-dp-karte:last-child:nth-child(odd) { grid-template-columns: 1fr; }
  .dw-dp-liste > .dw-dp-karte:last-child:nth-child(odd) .dw-dp-medien video { border-radius: 16px 16px 0 0; }
  .dw-dp-karte--fokus .dw-dp-medien video { border-radius: 16px 16px 0 0; }
}
@media (max-width: 700px) {
  .dw-dp-liste { grid-template-columns: 1fr; }
}

/* Foto-Kacheln als Navigation: Bild fuellt, Verlauf darueber, Text
   auf voller Deckfarbe -- der Text haengt nie vom Foto ab. */
.dw-fotogitter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 112px;
  gap: 14px;
  max-width: 1060px;
  margin: 24px 0;
}
.dw-page a.dw-fotokarte {
  position: relative;
  display: flex;
  grid-column: span 4;
  grid-row: span 2;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  color: #FFFFFF;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 12px 28px -22px rgba(11,18,32,0.58);
}
.dw-page a.dw-fotokarte:hover,
.dw-page a.dw-fotokarte:focus-visible { color: #FFFFFF; }
.dw-page a.dw-fotokarte:focus-visible { outline: 3px solid var(--dw-accent); outline-offset: 4px; }
.dw-fotokarte--breit { grid-column: span 8; }
.dw-fotokarte--halb { grid-column: span 6; }
.dw-fotokarte--hoch { grid-row: span 3; }
.dw-fotokarte img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dw-fotokarte::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0.04) 10%, rgba(11,18,32,0.88) 100%);
}
.dw-fotokarte::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.50), transparent);
  transform: translateX(-130%) skewX(-16deg);
}
.dw-fotokarte-copy {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 18px;
  background-color: #101828;
  background-image: linear-gradient(90deg, #101828, rgba(16,24,40,0.84));
}
.dw-fotokarte-copy strong { color: #FFFFFF; font-size: 1.08rem; }
.dw-fotokarte-copy > span { color: #EAECF0; font-size: 0.84rem; max-width: 42ch; }
.dw-fotokarte-copy .dw-fotokarte-data {
  margin-top: 5px;
  color: #FFFFFF;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* Foto-Kachel ohne Link (figure): Bild plus Etikett unten, fuer
   Kartenkoepfe und Bildstrecken. Seitenverhaeltnis per --dw-kachel. */
.dw-fotokachel {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: var(--dw-kachel, 16 / 10);
  isolation: isolate;
  background: var(--dw-paper-alt);
}
.dw-fotokachel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dw-fotokachel figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 10px 14px 11px;
  /* volle Deckfarbe wie .dw-mat-path-copy: Text haengt nie vom Foto ab */
  background-color: #101828;
  background-image: linear-gradient(90deg, #101828, rgba(16,24,40,0.84));
  color: #FFFFFF;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Prozessband: Graphit, drei bis vier Schritte auf einer Amber-Linie. */
.dw-section.dw-prozess {
  background: var(--dw-graphite);
  color: #FFFFFF;
  border-bottom: none;
}
.dw-prozess > .dw-container {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(480px, 1.2fr);
  gap: 64px;
  align-items: center;
}
.dw-section.dw-prozess h2 { color: #FFFFFF; }
.dw-section.dw-prozess .dw-num { color: #AEB6C5; }
.dw-section.dw-prozess p { color: #C7CDD8; }
.dw-page a.dw-prozess-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--dw-graphite);
  font-weight: 600;
  text-decoration: none;
}
.dw-page a.dw-prozess-link:hover,
.dw-page a.dw-prozess-link:focus-visible { color: var(--dw-graphite); background: #EAECF0; }
.dw-page a.dw-prozess-link:focus-visible { outline: 3px solid #EF9C15; outline-offset: 4px; }
.dw-prozess-schritte {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--dw-schritte, 3), minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dw-prozess-schritte::before,
.dw-prozess-schritte::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 17px;
  right: 17px;
  height: 2px;
  transform-origin: 0 50%;
}
.dw-prozess-schritte::before { background: #475467; }
.dw-prozess-schritte::after { background: #EF9C15; transform: scaleX(1); }
.dw-section .dw-prozess-schritte li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: #FFFFFF;
}
.dw-prozess-schritte li > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EF9C15;
  color: var(--dw-graphite);
  font-weight: 700;
}
.dw-prozess-schritte strong { color: #FFFFFF; }
.dw-page .dw-prozess-schritte a { color: #FFFFFF; }
.dw-prozess-schritte small { color: #AEB6C5; font-size: 0.78rem; line-height: 1.35; }

/* Bildnachweis als aufklappbare Zeile */
.dw-nachweis {
  max-width: 760px;
  margin-top: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--dw-line);
  border-bottom: 1px solid var(--dw-line);
}
.dw-nachweis summary { cursor: pointer; color: var(--dw-muted); font-size: 0.84rem; }
.dw-section .dw-nachweis p { max-width: 64ch; margin: 12px 0 0; color: var(--dw-muted); font-size: 0.8rem; }

/* Verwandte Seiten als Chip-Zeile am Seitenende */
.dw-verwandt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--dw-line);
}
.dw-verwandt > span {
  margin-right: 6px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page .dw-verwandt a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: var(--dw-card);
  color: var(--dw-ink);
  font-size: 0.88rem;
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.dw-page .dw-verwandt a:hover,
.dw-page .dw-verwandt a:focus-visible {
  border-color: rgba(21,94,239,0.55);
  color: var(--dw-accent-dark);
  transform: translateY(-1px);
}

/* Bewegung: Sweep und Zoom auf Foto-Kacheln, Messbalken und
   Prozesslinie bauen sich per View-Timeline auf. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dw-page a.dw-fotokarte:hover img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: no-preference) {
  .dw-fotokarte img { transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); }
  .dw-fotokarte::after { transition: transform 0.72s cubic-bezier(0.16,1,0.3,1); }
  .dw-page a.dw-fotokarte:hover::after,
  .dw-page a.dw-fotokarte:focus-visible::after { transform: translateX(470%) skewX(-16deg); }
  @supports (animation-timeline: view()) {
    .dw-meter span,
    .dw-prozess-schritte::after {
      animation: dw-mat-heat linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 58%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .dw-fotokarte::after { display: none; }
  .dw-fotokarte img { transition: none; transform: none; }
  .dw-meter span, .dw-prozess-schritte::after { animation: none; }
}

@media (max-width: 960px) {
  .dw-prozess > .dw-container { grid-template-columns: 1fr; gap: 34px; }
  .dw-prozess-schritte { max-width: 680px; }
}
@media (max-width: 700px) {
  .dw-band { padding: 22px 18px 26px; }
  .dw-band-kopf { grid-template-columns: 44px minmax(0, 1fr); }
  .dw-section .dw-band-regel { grid-column: 1 / -1; text-align: left; }
  .dw-fotogitter { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .dw-page a.dw-fotokarte,
  .dw-fotokarte--breit, .dw-fotokarte--halb, .dw-fotokarte--hoch { grid-column: auto; grid-row: auto; }
}
@media (max-width: 640px) {
  /* Tabellen mit data-label werden zur beschrifteten Kartenliste:
     dasselbe Markup, kein Wischen, thead bleibt fuer Screenreader. */
  .dw-table-wrap:has(> .dw-table--karten) { overflow: visible; }
  .dw-table--karten,
  .dw-table--karten tbody,
  .dw-table--karten tr,
  .dw-table--karten td { display: block; width: 100%; }
  .dw-table--karten { min-width: 0; }
  /* thead nur fuer Screenreader: ausserhalb des Viewports statt an
     (0,0) geclippt -- dort meldet der Detektor text-occlusion. */
  .dw-table--karten thead {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
  .dw-table--karten tr { padding: 10px 0; border-top: 1px solid var(--dw-line); }
  .dw-table--karten tr:last-child { border-bottom: 1px solid var(--dw-line); }
  /* Label absolut statt Grid-Spalte: Zellen mit mehreren Kindern
     (Link, Komma, Link / strong + Text) bleiben so ein Textfluss. */
  .dw-table--karten td {
    position: relative;
    min-height: 1.6em;
    padding: 7px 0 7px calc(34% + 14px);
    border: none;
  }
  .dw-table--karten td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 7px;
    width: 34%;
    color: var(--dw-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .dw-kennwerte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Auch Hochformate bleiben komplett in der gemeinsamen Medienflaeche. */
  .dw-dp-karte { padding: 0; }
  .dw-dp-ausstellung { padding: 16px; gap: 24px; margin-inline: -6px; }
  .dw-dp-text { padding: 18px; }
  .dw-dp-tabelle { min-width: 0; }
  .dw-prozess-schritte { grid-template-columns: 1fr; gap: 20px; }
  .dw-prozess-schritte::before,
  .dw-prozess-schritte::after {
    top: 17px;
    bottom: 17px;
    left: 16px;
    right: auto;
    width: 2px;
    height: auto;
    transform-origin: 50% 0;
  }
  .dw-prozess-schritte::after { transform: scaleY(1); }
  .dw-section .dw-prozess-schritte li {
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
  }
  .dw-prozess-schritte li > span { grid-row: 1 / 3; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dw-prozess-schritte::after { animation-name: dw-mat-proof-rise; }
  }
}
@media (max-width: 480px) {
  .dw-fotogitter { grid-template-columns: 1fr; }
  .dw-page a.dw-fotokarte { min-height: 200px; }
}

/* Rechts-Seiten (Impressum/Datenschutz) -- schlichter als .dw-section */
.dw-legal { padding: 44px 0 24px; }
.dw-legal .dw-container { max-width: 640px; }
/* Der Titel steht seit 2026-09-08 im Standardkopf davor (.dw-page-hero--schlicht). */
.dw-legal h2 {
  font-weight: 600;
  font-size: 1.3rem;
  margin: 34px 0 12px;
  color: var(--dw-ink);
  border-top: 1px solid var(--dw-line);
  padding-top: 24px;
}
.dw-legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.dw-legal p, .dw-legal ul { margin: 0 0 10px; max-width: 60ch; font-size: 1rem; color: var(--dw-ink); }
.dw-legal .dw-placeholder { color: var(--dw-muted); font-style: italic; }

@media (max-width: 560px) {
  .dw-container { padding: 0 18px; }
  .dw-hero, .dw-page-hero { padding-bottom: 32px; }
  .dw-section { padding: 40px 0; }
}

/* Projekte: Minecraft-Drucke -- bewusst abgesetzter Skin, nur auf dieser
   einen Seite aktiv (siehe DESIGN.md "Fremd-Look-Anlehnung"). Angelehnt an
   combocraft-wp (Lukas' Minecraft-Server-Seite): dunkler Hintergrund,
   Grasgruen als Akzent, eigene Pixelmotive. Keine echten Minecraft-Marken
   oder -Texturen. Typografie folgt seit dem Rollout (2026-08-30) dem
   site-weiten IBM Plex Sans (self-hosted, kein Anti-Pattern) -- die
   fruehere Serif-Sonderregel war nur an den damaligen Rest der Site
   angeglichen, nicht an Minecraft selbst gebunden. Nav/Hero bleiben aber
   bewusst dunkel, s. Overrides unten. */
.dw-page[data-page="projekte-minecraft"] {
  --dw-ink: #E7F5D6;
  --dw-muted: #9CB88A;
  --dw-paper: #101511;
  --dw-paper-alt: #161C15;
  --dw-card: #1B231A;
  --dw-graphite: #0B0F0A;
  --dw-graphite-ink: #E7F5D6;
  --dw-accent: #84CC16;
  --dw-line: #2C3A26;
}
/* Minecraft-Skin: Zonenbaender und getoente Callouts auf dunklem Grund --
   helle Zonenfarbe fuer Text/Symbol, dunkle Tints statt Pastell, Verlauf
   endet in der Kartenfarbe statt in Weiss (achtzehnte Runde). */
.dw-page[data-page="projekte-minecraft"] {
  --dw-gruen: #7DE0B0; --dw-gruen-soft: #132A1C;
  --dw-gelb: #F2C94C; --dw-gelb-soft: #2B2410;
  --dw-rot: #FF8A80; --dw-rot-soft: #2E1614;
  --dw-blau: #8FBBFF; --dw-blau-soft: #14203A;
}
.dw-page[data-page="projekte-minecraft"] .dw-band {
  background-image: linear-gradient(90deg, var(--dw-zone-soft), rgba(27,35,26,0.82) 76%);
}
.dw-page[data-page="projekte-minecraft"] .dw-nav-links a { color: #9CB88A; }
.dw-page[data-page="projekte-minecraft"] .dw-nav-links a:hover,
.dw-page[data-page="projekte-minecraft"] .dw-nav-links a:focus-visible,
.dw-page[data-page="projekte-minecraft"] .dw-nav-links a[aria-current] { color: #A3E635; }
.dw-page[data-page="projekte-minecraft"] .dw-nav-links a::after { background: #A3E635; }
.dw-page[data-page="projekte-minecraft"] .dw-dateline { color: #A3E635; }
.dw-page[data-page="projekte-minecraft"] .dw-hero p,
.dw-page[data-page="projekte-minecraft"] .dw-page-hero p { color: #C3DDAF; }
.dw-page[data-page="projekte-minecraft"] .dw-footer { color: #9CB88A; }
.dw-page[data-page="projekte-minecraft"] .dw-footer a { color: #C3DDAF; }
/* Druckbett-Footer auf der Insel: keine Vier-Farben-Bahn und kein Pinwheel
   (die Insel kennt die Marken-Chrome nicht), Hover/Extruder in Lime. */
.dw-page[data-page="projekte-minecraft"] .dw-footer::before,
.dw-page[data-page="projekte-minecraft"] .dw-footer-mark::before { display: none; }
.dw-page[data-page="projekte-minecraft"] .dw-footer-title { color: #DCFCE7; }
.dw-page[data-page="projekte-minecraft"] .dw-footer-slogan,
.dw-page[data-page="projekte-minecraft"] .dw-footer-kicker,
.dw-page[data-page="projekte-minecraft"] .dw-footer-credit { color: #6B8F5E; }
.dw-page[data-page="projekte-minecraft"] .dw-footer-links a:hover,
.dw-page[data-page="projekte-minecraft"] .dw-footer-links a:focus-visible { color: #A3E635; }
.dw-page[data-page="projekte-minecraft"] .dw-footer-links a::after { background: #A3E635; }
.dw-page[data-page="projekte-minecraft"] .dw-footer-bottom { border-top-color: rgba(163, 230, 53, 0.16); }
.dw-page[data-page="projekte-minecraft"] .dw-footer-credit a { color: #9CB88A; text-decoration-color: rgba(156, 184, 138, 0.4); }
.dw-page[data-page="projekte-minecraft"] .dw-footer-credit a:hover,
.dw-page[data-page="projekte-minecraft"] .dw-footer-credit a:focus-visible { color: #C3DDAF; }
.dw-page[data-page="projekte-minecraft"] .dw-footer-status { border-color: rgba(163, 230, 53, 0.25); color: #9CB88A; }
.dw-page[data-page="projekte-minecraft"] .dw-footer-status-dot { background: #A3E635; box-shadow: 0 0 0 4px rgba(163, 230, 53, 0.15); }
.dw-page[data-page="projekte-minecraft"] .dw-callout,
.dw-page[data-page="projekte-minecraft"] .dw-code {
  border-radius: 6px;
  border: 1px solid var(--dw-line);
  box-shadow: none;
}

/* Nav/Hero bleiben dunkel wie der Rest der Seite -- seit dem Rollout des
   Startseiten-Looks auf alle Seiten (2026-08-30) ist die Basis-Chrome
   hell mit Punktraster; ohne diese Insel-Overrides wuerde das hier
   durchscheinen und den bewussten dunklen Minecraft-Kontrast zerstoeren. */
.dw-page[data-page="projekte-minecraft"] .dw-nav {
  background: var(--dw-graphite);
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  position: static;
  border-bottom: none;
  /* Nav ist hier statisch (scrollt weg) -- Filament-Fortschrittslinie
     und Scroll-Schatten der hellen Basis-Chrome ergeben ohne sticky
     keinen Sinn. Die Extruder-Unterstreichung bleibt (Lime, s. oben). */
  animation: none;
}
.dw-page[data-page="projekte-minecraft"] .dw-nav::after { display: none; }
/* Kein Amber-Schichtband auf der Insel -- der Hero ist dort eine flache
   dunkle Flaeche ohne Karo, das Band haette keinen Traeger. */
.dw-page[data-page="projekte-minecraft"] .dw-hero::after,
.dw-page[data-page="projekte-minecraft"] .dw-page-hero::after { display: none; }
.dw-page[data-page="projekte-minecraft"] .dw-nav-mark { color: var(--dw-graphite-ink); }
.dw-page[data-page="projekte-minecraft"] .dw-nav-mark::before,
.dw-page[data-page="projekte-minecraft"] .dw-nav-slogan,
.dw-page[data-page="projekte-minecraft"] .dw-nav-status { display: none; }
.dw-page[data-page="projekte-minecraft"] .dw-hero,
.dw-page[data-page="projekte-minecraft"] .dw-page-hero {
  background-color: var(--dw-graphite);
  background-image: none;
  border-bottom: none;
  color: var(--dw-graphite-ink);
}
.dw-page[data-page="projekte-minecraft"] .dw-hero h1,
.dw-page[data-page="projekte-minecraft"] .dw-page-hero h1 { color: var(--dw-graphite-ink); }
.dw-page[data-page="projekte-minecraft"] .dw-dateline {
  display: block;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
}
.dw-page[data-page="projekte-minecraft"] .dw-dateline::before { display: none; }

/* Pixelmotiv-Badge im Hero -- vier eigene Farbfelder, kein Spiel-Asset. */
.dw-mc-badge { display: flex; gap: 3px; margin: 0 0 16px; padding: 0; list-style: none; }
.dw-mc-badge span {
  display: block;
  width: 10px;
  height: 10px;
  image-rendering: pixelated;
}
.dw-mc-badge span:nth-child(1) { background: #4D7C0F; }
.dw-mc-badge span:nth-child(2) { background: #84CC16; }
.dw-mc-badge span:nth-child(3) { background: #A3E635; }
.dw-mc-badge span:nth-child(4) { background: #365314; }

/* Blockiger Divider zwischen Hero und Content -- zitiert das Minecraft-Raster. */
.dw-mc-divider {
  height: 10px;
  margin: 0;
  background: repeating-linear-gradient(90deg, #4D7C0F 0 20px, #365314 20px 40px);
}

/* IBM Plex Sans/Mono self-hosted (latin, Media 159-161), sitewide seit dem
   Plex-Rollout; keine Google-Fonts-Einbindung (Repo-Konvention). Pfade
   root-relativ, damit sie unabhaengig von Domain und CSS-Speicherort
   aufloesen. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/wp-content/uploads/2026/08/ibm-plex-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/wp-content/uploads/2026/08/ibm-plex-mono-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/wp-content/uploads/2026/08/ibm-plex-mono-500-latin.woff2") format("woff2");
}

/* ===================================================================
   Startseite, Piloten-Redesign (seit 2026-08-30) -- eigener, scoped
   Skin nur fuer data-page="home". Entstanden aus einem Claude-Design-
   Entwurf (Referenz an wos "Klassisch"/FL Pro, dann auf 3D-Druck-
   Charakter zurueckgefuehrt). Eigene Palette + IBM Plex statt der
   Site-Serif, bewusst nur auf dieser einen Seite -- Rest der Site
   bleibt im bisherigen Werkstatt-Log-Look. Siehe DESIGN.md.
   =================================================================== */
.dw-page[data-page="home"] {
  --h-ink: #0B1220;
  --h-muted: #475467;
  --h-muted2: #667085;
  --h-muted3: #98A2B3;
  --h-line: rgba(11,18,32,0.10);
  --h-paper: #FAFBFD;
  --h-card: #FFFFFF;
  --h-navy: #0B1220;
  --h-blue: #155EEF;
  --h-blue-dark: #0F47B8;
  --h-teal: #0E9AA7;
  --h-amber: #D08A2C;
  --h-purple: #A03CC4;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--h-paper);
}
.dw-page[data-page="home"] .dw-h-mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
/* Nav/Footer/Hero/Dateline sind seit dem Rollout (2026-08-30) Teil der
   Basis oben -- hier keine eigene Startseiten-Fassung mehr noetig. */

/* Breiterer Rahmen als .dw-container (720px) -- dieses Redesign ist
   Karten-/Grid-basiert, nicht redaktionell schmal. */
.dw-h-wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .dw-h-wrap { padding: 0 20px; } }

/* Hero mit dem Bauteil-Gitter (Konstellations-Engine aus mu-plugins/dw-konstellation,
   Ursprung FL Pro). 07.09. dunkel, seit 08.09. wieder hell wie die Unterseiten
   (Entscheid Florian: ein Kopf fuer alle Seiten) -- Flaeche, Karo und Schichtlinie
   kommen aus der gemeinsamen Regel bei .dw-page-hero. Die Engine erkennt hell/dunkel
   an der Textfarbe des Abschnitts und malt die Vase hier mit blauen Knoten und
   Amber-Linien; das Platzhalter-SVG liest currentColor (unten) und var(--dw-kon-accent).
   Tokens fuer das Motiv liegen auf .dw-page. */
.dw-page { --dw-kon-primary: var(--dw-accent, #155EEF); --dw-kon-accent: #EF9C15; --dw-kon-text: #F2F4F7; }
.dw-h-hero { padding: 56px 0 0; }
.dw-h-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 520px); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.dw-h-hero-text { min-width: 0; }
.dw-kon-stage, .dw-kon-frag { position: relative; display: block; color: var(--dw-kon-primary); }
.dw-kon-stage { width: 100%; aspect-ratio: 1; justify-self: center; }
.dw-kon-stage svg, .dw-kon-stage canvas, .dw-kon-frag svg, .dw-kon-frag canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dw-kon-stage svg, .dw-kon-frag svg { transition: opacity 0.6s ease; }
.dw-kon-stage.is-live svg, .dw-kon-frag.is-live svg { opacity: 0; }
.dw-kon-frag { width: min(100%, 480px); aspect-ratio: 4 / 1; margin: 56px auto 0; pointer-events: none; }
.dw-kon-frag--hell { color: var(--dw-kon-primary); opacity: 0.85; }
/* Die Dunkel-Overrides fuer Kicker, Lead, Weg-Karten und Kopf-Chips (07.09.) sind
   mit dem hellen Kopf entfallen; es gelten die hellen Basisregeln unten. */
@media (max-width: 900px) { .dw-h-hero-grid { grid-template-columns: 1fr; gap: 1.5rem; } .dw-kon-stage { order: -1; max-width: 300px; justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .dw-kon-stage svg, .dw-kon-frag svg { transition: none; } }
.dw-h-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.85); border: 1px solid rgba(21,94,239,0.22);
  border-radius: 999px; padding: 7px 14px 7px 11px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.82rem; color: var(--h-blue);
}
.dw-h-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--h-blue); box-shadow: 0 0 0 4px rgba(21,94,239,0.15); }
.dw-h-hero h1 {
  margin: 22px 0 0; font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.14; font-weight: 600;
  letter-spacing: -0.026em; max-width: 18ch; color: var(--h-ink); overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
}
.dw-h-hero > .dw-h-wrap > p.dw-h-lead { margin: 20px 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--h-muted); max-width: 42ch; }
.dw-h-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 0.78rem; color: var(--h-muted2); }
.dw-h-stats .sep { color: #D0D5DD; }
.dw-h-stats .accent { color: var(--h-blue); }

.dw-h-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; max-width: 760px; }
@media (max-width: 640px) { .dw-h-paths { grid-template-columns: 1fr; } }
.dw-h-path-card {
  background: var(--h-card); border: 1px solid var(--h-line); border-radius: 24px; padding: 22px;
  color: inherit; text-decoration: none; display: flex; flex-direction: column;
  box-shadow: 0 8px 24px -18px rgba(11,18,32,0.20);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dw-h-path-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgba(11,18,32,0.26); text-decoration: none; }
.dw-h-path-card .weg { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.04em; }
.dw-h-path-card .weg span { width: 8px; height: 8px; border-radius: 2px; }
.dw-h-path-card .titel { margin-top: 10px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--h-ink); }
.dw-h-path-card .beschreibung { margin-top: 7px; font-size: 0.92rem; line-height: 1.55; color: var(--h-muted); }
.dw-h-path-card .weiter { margin-top: 14px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.8rem; }
.dw-h-path-card--a .weg, .dw-h-path-card--a .weiter { color: var(--h-blue); }
.dw-h-path-card--a .weg span { background: var(--h-blue); }
.dw-h-path-card--a:hover { border-color: rgba(21,94,239,0.35); }
.dw-h-path-card--b .weg, .dw-h-path-card--b .weiter { color: #8A5711; }
.dw-h-path-card--b .weg span { background: var(--h-amber); }
.dw-h-path-card--b:hover { border-color: rgba(208,138,44,0.45); }

.dw-h-heads-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--h-line); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--h-muted2); }
.dw-h-heads-label .status { color: var(--h-muted2); }
.dw-h-heads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 14px 0 40px; }
@media (max-width: 760px) { .dw-h-heads { grid-template-columns: 1fr 1fr; } }
.dw-h-head-chip { background: rgba(255,255,255,0.85); border: 1px solid var(--h-line); border-radius: 14px; padding: 13px; display: flex; align-items: center; gap: 11px; }
.dw-h-head-chip .swatch { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.dw-h-head-chip .label { display: flex; flex-direction: column; line-height: 1.3; }
.dw-h-head-chip .kopf { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.74rem; color: var(--h-muted2); }
.dw-h-head-chip .material { font-size: 0.86rem; font-weight: 500; color: var(--h-ink); }

.dw-h-section { padding: 68px 0 0; }
.dw-h-section.dw-h-section--last { padding-bottom: 68px; }
.dw-h-num { font-size: 0.8rem; color: var(--h-muted); margin: 0 0 8px; }
.dw-h-heading { margin: 0; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; color: var(--h-ink); }
.dw-h-section > .dw-h-wrap > p.dw-h-intro { margin: 14px 0 0; max-width: 62ch; font-size: 1rem; line-height: 1.6; color: var(--h-muted); }

.dw-h-bio-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 36px; margin-top: 22px; align-items: start; }
@media (max-width: 800px) { .dw-h-bio-grid { grid-template-columns: 1fr; } }
.dw-h-bio-grid p { margin: 0 0 16px; max-width: 60ch; font-size: 1.02rem; line-height: 1.65; color: #344054; }
.dw-h-stat-card { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 24px; padding: 22px; box-shadow: 0 8px 24px -18px rgba(11,18,32,0.20); }
.dw-h-stat-card .kopf { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; color: var(--h-muted2); letter-spacing: 0.04em; }
.dw-h-stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--h-line); }
.dw-h-stat-row:last-child { border-bottom: none; }
.dw-h-stat-row .k { font-size: 0.88rem; color: var(--h-muted); }
.dw-h-stat-row .v { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.86rem; font-weight: 500; color: var(--h-ink); }

.dw-h-machine {
  margin-top: 68px;
  background-color: var(--h-navy);
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px;
  color: #F2F4F7; padding: 64px 0;
}

/* Glutraster (2026-08-31, achte Runde) auf der Startseite.
   Schicht 1, Schichtlinie: dieselbe wandernde Druckschicht wie auf den
   Unterseiten-Heros (Definition bei .dw-hero), hier -- etwas kraeftiger, weil
   dunkler Grund -- fuer die Maschine-Sektion. Im Hero lief sie 07.09. bis 08.09.
   nicht (dunkler Kopf), seit 08.09. wieder ueber die gemeinsame Regel.
   Schicht 2, Glut-Spur: ueber beiden Karo-Flaechen liegt ein Raster
   unsichtbarer Hover-Zellen (84px = exakt 3 Karos, am Raster
   ausgerichtet). Die Maus laesst Zellen aufgluehen wie beheizte
   Druckbett-Zonen; die asymmetrische Transition (schnell auf, ~2,6s ab)
   zieht eine langsam abkuehlende Spur hinter dem Cursor her -- die
   3D-Druck-Antwort auf das WebGL-Maus-Fluid der Referenz
   stevensolbach.com, das Aufgluehen rastet bewusst im Karo ein
   (Voxel-Aesthetik statt organischem Nebel). Rein CSS.
   Konstruktion: der Zell-Layer liegt unter dem Inhalt (z-index 0,
   .dw-h-wrap auf 1); damit die Zellen in den Luecken ZWISCHEN den
   Inhaltsbloecken erreichbar sind, laesst der Wrap den Zeiger durch
   (pointer-events: none) und nur seine direkten Kinder fangen ihn
   wieder -- Links, Karten und Text bleiben voll bedienbar. Nur fuer
   Maus-Geraete (hover+fine); Touch behaelt die Schichtlinie. Die
   84px-Glut-Zellen bleiben unter der 240px-Schwelle des
   radial-spotlight-glow-Detektors. */
@media (prefers-reduced-motion: no-preference) {
  .dw-page[data-page="home"] .dw-h-machine {
    position: relative;
    overflow: hidden;
  }
  .dw-page[data-page="home"] .dw-h-machine > .dw-h-wrap {
    position: relative;
    z-index: 1;
  }
  .dw-page[data-page="home"] .dw-h-machine::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg,
      rgba(239,156,21,0) 0px,
      rgba(239,156,21,0.11) 62px,
      rgba(239,156,21,0.16) 76px,
      rgba(239,156,21,0.11) 90px,
      rgba(239,156,21,0) 152px,
      rgba(239,156,21,0) 100%);
    animation: dw-schicht 16s linear infinite;
  }
  .dw-page[data-page="home"] .dw-h-machine::after {
    background-image: linear-gradient(180deg,
      rgba(239,156,21,0) 0px,
      rgba(239,156,21,0.14) 62px,
      rgba(239,156,21,0.20) 76px,
      rgba(239,156,21,0.14) 90px,
      rgba(239,156,21,0) 152px,
      rgba(239,156,21,0) 100%);
    animation-duration: 21s;
  }
}
.dw-glut { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dw-glut {
    display: grid;
    position: absolute;
    inset: 0;
    overflow: hidden;
    grid-template-columns: repeat(auto-fill, 84px);
    grid-auto-rows: 84px;
    pointer-events: none;
    z-index: 0;
  }
  .dw-glut i {
    display: block;
    pointer-events: auto;
    opacity: 0;
    background-image: radial-gradient(circle at 50% 50%,
      rgba(239,156,21,0.30) 0%, rgba(239,156,21,0.10) 52%, rgba(239,156,21,0) 76%);
    transition: opacity 2.6s ease-out;
  }
  .dw-glut i:hover {
    opacity: 1;
    transition-duration: 0.06s;
  }
  .dw-page[data-page="home"] .dw-h-machine .dw-glut i {
    background-image: radial-gradient(circle at 50% 50%,
      rgba(239,156,21,0.42) 0%, rgba(239,156,21,0.14) 52%, rgba(239,156,21,0) 76%);
  }
  .dw-page[data-page="home"] .dw-h-machine > .dw-h-wrap { pointer-events: none; }
  .dw-page[data-page="home"] .dw-h-machine > .dw-h-wrap > * { pointer-events: auto; }
}
.dw-h-machine .dw-h-num { color: #98A2B3; }
.dw-h-machine .dw-h-heading { color: #fff; }
.dw-h-machine > .dw-h-wrap > p.dw-h-intro { max-width: 62ch; color: #98A2B3; }
.dw-h-machine-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin-top: 28px; align-items: start; }
@media (max-width: 760px) { .dw-h-machine-grid { grid-template-columns: 1fr; } }
.dw-h-datenblatt { border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; padding: 18px; background: rgba(255,255,255,0.04); }
.dw-h-datenblatt .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 0.86rem; font-weight: 600; color: #fff; }
.dw-h-datenblatt .kopf .stat { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.74rem; color: #98A2B3; }
.dw-h-datenblatt .zeile { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.10); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.78rem; color: #98A2B3; }
.dw-h-datenblatt .zeile span:last-child { color: #E4E7EC; }
.dw-h-datenblatt .zeile.hi { border-bottom: none; }
.dw-h-datenblatt .zeile.hi span:last-child { color: #7BA3FF; }
.dw-h-datenblatt a { display: inline-block; margin-top: 12px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.78rem; color: #7BA3FF; }
.dw-h-argument-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .dw-h-argument-grid { grid-template-columns: 1fr; } }
.dw-h-argument { border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; padding: 22px; background: rgba(255,255,255,0.03); }
.dw-h-argument .tag { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.04em; color: #98A2B3; }
.dw-h-argument .tag span { width: 8px; height: 8px; border-radius: 2px; background: #98A2B3; }
.dw-h-argument p { margin: 12px 0 0; font-size: 0.94rem; line-height: 1.6; color: #E4E7EC; }
.dw-h-argument--for { border-color: rgba(123,163,255,0.35); background: linear-gradient(180deg, rgba(21,94,239,0.18) 0%, rgba(21,94,239,0.04) 100%); }
.dw-h-argument--for .tag { color: #7BA3FF; }
.dw-h-argument--for .tag span { background: #155EEF; }
.dw-h-argument--for p { color: #fff; }
.dw-h-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.dw-h-tag { display: inline-flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.7rem; color: #D0D5DD; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 6px 12px; }
.dw-h-tag span { width: 7px; height: 7px; border-radius: 2px; }

.dw-h-logbuch-grid { display: grid; grid-template-columns: 1fr 300px; gap: 30px; margin-top: 26px; align-items: start; }
@media (max-width: 800px) { .dw-h-logbuch-grid { grid-template-columns: 1fr; } }
.dw-h-log-list { display: flex; flex-direction: column; gap: 12px; }
.dw-h-log-entry { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 22px; padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.dw-h-log-entry:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -22px rgba(11,18,32,0.24); }
.dw-h-log-entry--current { border-color: rgba(21,94,239,0.32); border-width: 2px; box-shadow: none; }
.dw-h-log-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dw-h-log-badge { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; font-weight: 500; background: #F2F4F7; color: var(--h-muted); border-radius: 8px; padding: 4px 9px; }
.dw-h-log-entry--current .dw-h-log-badge { background: var(--h-blue); color: #fff; }
.dw-h-log-date { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; color: var(--h-muted2); }
.dw-h-log-entry h3 { margin: 13px 0 0; font-size: 1.08rem; font-weight: 600; color: var(--h-ink); }
.dw-h-log-entry p { margin: 9px 0 0; max-width: 58ch; font-size: 0.9rem; line-height: 1.6; color: var(--h-muted); }
.dw-h-log-facts { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--h-line); font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; color: var(--h-muted2); }
.dw-h-aside { display: flex; flex-direction: column; gap: 12px; }
.dw-h-photo-card { border: 1px solid var(--h-line); border-radius: 22px; background: #fff; padding: 14px; overflow: hidden; }
.dw-h-photo-card .platzhalter { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.82rem; color: var(--h-muted2); border: 1px solid var(--h-line); border-radius: 14px; padding: 30px 10px; background: #fff; text-align: center; }
.dw-h-photo-card img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 14px; }
.dw-h-photo-card p { margin: 12px 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--h-muted); }
/* Hochformat-Clip in der Logbuch-Spalte: schmaler als die Karte, sonst 500 px hoch. */
.dw-h-photo-card video { display: block; width: min(100%, 220px); margin: 0 auto; height: auto; aspect-ratio: 9 / 16; border-radius: 14px; background: #0B1220; }
/* Vorher/Nachher in einer Karte: zwei Bilder nebeneinander, eine Bildunterschrift. */
.dw-h-photo-card--paar .paar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dw-h-photo-card--paar .paar img { height: 132px; }
.dw-h-photo-card--paar .paar figcaption { margin-top: 6px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.03em; color: var(--h-muted2); }
.dw-h-photo-card--paar .paar figure { margin: 0; }
.dw-h-mitlesen { border: 1px solid var(--h-line); border-radius: 22px; padding: 20px; background: #F5F8FF; }
.dw-h-mitlesen .kopf { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.72rem; color: var(--h-blue); letter-spacing: 0.04em; }
.dw-h-mitlesen p { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.55; color: #344054; }
.dw-h-mitlesen a { display: inline-block; margin-top: 12px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.78rem; }

.dw-h-lernziel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 800px) { .dw-h-lernziel-grid { grid-template-columns: 1fr; } }
.dw-h-lernziel-card { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 22px; padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.dw-h-lernziel-card:hover { transform: translateY(-3px); box-shadow: 0 20px 36px -22px rgba(11,18,32,0.26); }
.dw-h-lernziel-card .tag { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.04em; }
.dw-h-lernziel-card .tag span { width: 8px; height: 8px; border-radius: 2px; }
.dw-h-lernziel-card h3 { margin: 12px 0 0; font-size: 1.02rem; font-weight: 600; color: var(--h-ink); }
.dw-h-lernziel-card p { margin: 9px 0 0; font-size: 0.88rem; line-height: 1.58; color: var(--h-muted); }
.dw-h-lernziel-card--1 .tag { color: #0B7C88; } .dw-h-lernziel-card--1 .tag span { background: var(--h-teal); }
.dw-h-lernziel-card--2 .tag { color: #8A5711; } .dw-h-lernziel-card--2 .tag span { background: var(--h-amber); }
.dw-h-lernziel-card--3 .tag { color: #8A2FA8; } .dw-h-lernziel-card--3 .tag span { background: var(--h-purple); }
a.dw-h-kloetzchen-link { display: inline-block; margin-top: 18px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.82rem; color: var(--h-purple); }

/* Modellquellen-Block (2026-09-07): vier Plattformen als Vorschau auf
   /modellquellen/. Bewusst ohne Aussenlinks -- die stehen dort, nicht hier. */
.dw-h-quellen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 900px) { .dw-h-quellen-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dw-h-quellen-grid { grid-template-columns: 1fr; } }
.dw-h-quellen-card { display: block; background: var(--h-card); border: 1px solid var(--h-line); border-radius: 18px; padding: 20px; }
a.dw-h-quellen-card { text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
a.dw-h-quellen-card:hover, a.dw-h-quellen-card:focus-visible { transform: translateY(-3px); border-color: var(--h-blue); text-decoration: none; }
.dw-h-quellen-card p { margin: 9px 0 0; font-size: 0.88rem; line-height: 1.58; color: var(--h-muted); }
.dw-h-quellen-card .name { margin: 0; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--h-blue); }
a.dw-h-quellen-link { display: inline-block; margin-top: 18px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.82rem; color: var(--h-blue); }
.dw-h-disclaimer { display: flex; gap: 12px; margin-top: 18px; padding: 16px 18px; border: 1px dashed rgba(11,18,32,0.16); border-radius: 16px; background: rgba(255,255,255,0.6); max-width: 780px; }
.dw-h-disclaimer span.dot { width: 8px; height: 8px; border-radius: 2px; background: var(--h-muted3); margin-top: 6px; flex: 0 0 auto; }
.dw-h-disclaimer p { margin: 0; max-width: 62ch; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.76rem; line-height: 1.65; color: var(--h-muted); }

.dw-h-werkstatt-outer { padding: 68px 0 84px; }
.dw-h-werkstatt-card { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 24px; padding: 38px; box-shadow: 0 14px 32px -26px rgba(11,18,32,0.24); }
.dw-h-werkstatt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 800px) { .dw-h-werkstatt-grid { grid-template-columns: 1fr; } }
.dw-h-werkstatt-grid p.dw-h-intro { margin: 14px 0 0; max-width: none; }
.dw-h-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.dw-h-cta { font-size: 0.92rem; font-weight: 500; padding: 12px 20px; border-radius: 14px; text-decoration: none; }
.dw-h-cta.dw-h-cta--primary { background: var(--h-blue); color: #fff; }
.dw-h-cta.dw-h-cta--primary:hover { background: var(--h-blue-dark); color: #fff; text-decoration: none; }
.dw-h-cta.dw-h-cta--ghost { background: #fff; color: var(--h-ink); border: 1px solid var(--h-line); }
.dw-h-cta.dw-h-cta--ghost:hover { border-color: rgba(11,18,32,0.24); color: var(--h-ink); text-decoration: none; }
.dw-h-geht-grid { display: grid; gap: 13px; }
.dw-h-geht-card { border: 1px solid var(--h-line); border-radius: 16px; padding: 18px; }
.dw-h-geht-card .tag { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; font-size: 0.7rem; letter-spacing: 0.04em; color: #0B7C88; }
.dw-h-geht-card .tag span { width: 8px; height: 8px; border-radius: 2px; background: var(--h-teal); }
.dw-h-geht-card p { margin: 9px 0 0; font-size: 0.88rem; line-height: 1.58; color: #344054; }
.dw-h-geht-card--not .tag { color: var(--h-muted2); }
.dw-h-geht-card--not .tag span { background: var(--h-muted3); }

@media (max-width: 560px) {
  .dw-h-hero { padding-top: 40px; }
  .dw-h-section { padding-top: 48px; }
  .dw-h-werkstatt-card { padding: 24px; }
}

/* ---------------------------------------------------------------
   Barrierefreiheit: wer im System Bewegung reduziert hat, bekommt
   keine. Gilt sitetweit (auch fuer die .dw-h-*-Hover-Effekte der
   Startseite), seit 2026-08-30.
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dw-page *, .dw-page *::before, .dw-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------
   pib-Bauanleitung (alle Kapitel: data-page^="pib-", also pib-kopf,
   pib-hals, ... -- der Hub /pib/ hat data-page="pib" ohne Bindestrich
   und bleibt draussen), seit 2026-08-30, Scope erweitert 2026-08-31.
   Bleibt bewusst in der hellen Site-Palette -- die Aufwertung kommt
   ueber Bilder, Karten und Scroll-Bewegung, nicht ueber eine zweite
   Farbwelt (Entscheidung des Seitenbetreibers, s. DESIGN.md).
   Zwei harte Regeln aus dem Detektor:
   - `layout-transition` steht auf Budget 0 -> ausschliesslich
     transform/opacity/box-shadow animieren, nie Breite/Hoehe/Margin.
   - `side-tab` verbietet border-left-Akzente -> die Versions-
     Historie ist ein Kartenraster, keine Linien-Timeline.
   Alle Scroll-Effekte sind reines CSS (animation-timeline) --
   druckwerk hat bewusst null JavaScript, das bleibt so.
   --------------------------------------------------------------- */
.dw-page[data-page^="pib-"] .dw-section > .dw-container > p,
.dw-page[data-page^="pib-"] .dw-section > .dw-container > h2,
.dw-page[data-page^="pib-"] .dw-section > .dw-container > h3,
.dw-page[data-page^="pib-"] .dw-section > .dw-container > ul { max-width: 760px; }

/* Ziel-Foto des Kapitels neben der Historie in Sektion 01 (bis 08.09. im Kopf,
   seitdem tragen alle Seiten den Standardkopf mit Vase). */
.dw-page[data-page^="pib-"] .dw-pk-ziel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: start;
}
.dw-page[data-page^="pib-"] .dw-pk-ziel-text { min-width: 0; }
.dw-page[data-page^="pib-"] .dw-pk-meta {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.76rem;
  color: var(--dw-muted);
  margin: 18px 0 0;
  /* nicht "none": ohne Grenze lief die Meta-Zeile auf ~100 Zeichen und
     riss line-length (Budget 0). Der Detektor rechnet
     Breite / (Schriftgroesse * 0.5) -- bei 12,16px sind also 486px die
     80-Zeichen-Grenze, 460px liegen sicher darunter. */
  max-width: 460px;
}
.dw-page[data-page^="pib-"] .dw-pk-ziel-figure { margin: 0; min-width: 0; }
.dw-page[data-page^="pib-"] .dw-pk-ziel-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--dw-line);
  border-radius: 18px;
  padding: 10px;
}
.dw-page[data-page^="pib-"] .dw-pk-ziel-figure figcaption {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.dw-page[data-page^="pib-"] .dw-pk-timeline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 10px 0 0;
  padding: 0;
}
.dw-page[data-page^="pib-"] .dw-pk-timeline li {
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  padding: 18px;
}
.dw-page[data-page^="pib-"] .dw-pk-tl-now { border-color: rgba(21,94,239,0.38); }
.dw-page[data-page^="pib-"] .dw-pk-tl-version {
  margin: 0 0 8px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--dw-ink);
}
.dw-page[data-page^="pib-"] .dw-pk-tl-version span {
  display: block;
  margin-top: 3px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--dw-muted);
}
.dw-page[data-page^="pib-"] .dw-pk-tl-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--dw-muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Feste 3 Spalten: bei sechs Teilen ergibt auto-fit sonst eine
   5+1-Reihe, die schief aussieht. */
.dw-page[data-page^="pib-"] .dw-pk-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 32px;
}
.dw-page[data-page^="pib-"] .dw-pk-part {
  display: block;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 18px;
  padding: 14px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dw-page[data-page^="pib-"] .dw-pk-part:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -22px rgba(11,18,32,0.26);
  text-decoration: none;
}
.dw-page[data-page^="pib-"] .dw-pk-part img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: contain;
}
.dw-page[data-page^="pib-"] .dw-pk-part-code {
  display: block;
  margin-top: 12px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-accent);
}
.dw-page[data-page^="pib-"] .dw-pk-part-name {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--dw-muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

.dw-page[data-page^="pib-"] .dw-pk-step {
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 22px;
  padding: 24px;
  margin: 0 0 18px;
}
.dw-page[data-page^="pib-"] .dw-pk-step-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.dw-page[data-page^="pib-"] .dw-pk-step-num {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 13px;
  background: var(--dw-accent);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dw-page[data-page^="pib-"] .dw-pk-step-head h3 { margin: 5px 0 0; }
.dw-page[data-page^="pib-"] .dw-pk-diff {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 7px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="pib-"] .dw-pk-dots { display: inline-flex; gap: 4px; }
.dw-page[data-page^="pib-"] .dw-pk-dots b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(11,18,32,0.18);
}
.dw-page[data-page^="pib-"] .dw-pk-dots b.on { background: var(--dw-accent); }
.dw-page[data-page^="pib-"] .dw-pk-step-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 28px;
  align-items: start;
}
.dw-page[data-page^="pib-"] .dw-pk-step-text { min-width: 0; }
.dw-page[data-page^="pib-"] .dw-pk-step-text p { max-width: 720px; }
.dw-page[data-page^="pib-"] .dw-pk-step .dw-callout {
  box-shadow: none;
  background: var(--dw-paper-alt);
}
.dw-page[data-page^="pib-"] .dw-pk-need {
  margin: 14px 0 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--dw-muted);
}
.dw-page[data-page^="pib-"] .dw-pk-shot { display: block; text-decoration: none; }
.dw-page[data-page^="pib-"] .dw-pk-shot img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid var(--dw-line);
  border-radius: 14px;
  padding: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dw-page[data-page^="pib-"] .dw-pk-shot:hover img {
  transform: translateY(-3px);
  box-shadow: 0 20px 36px -22px rgba(11,18,32,0.26);
}
.dw-page[data-page^="pib-"] .dw-pk-shot span {
  display: block;
  margin-top: 9px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dw-muted);
}

/* Lightbox ohne JavaScript: :target schaltet die Vollansicht ein,
   der Schliessen-Link fuehrt zurueck auf den jeweiligen Schritt. */
.dw-page[data-page^="pib-"] .dw-pk-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  padding: 30px;
  background: rgba(11,18,32,0.88);
}
.dw-page[data-page^="pib-"] .dw-pk-lightbox:target {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dw-page[data-page^="pib-"] .dw-pk-lightbox a {
  display: block;
  max-width: min(720px, 100%);
}
.dw-page[data-page^="pib-"] .dw-pk-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  background: #fff;
  border-radius: 16px;
  padding: 12px;
}

@keyframes dw-pk-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dw-page[data-page^="pib-"] .dw-pk-reveal {
      animation: dw-pk-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }
}

@media (max-width: 760px) {
  .dw-page[data-page^="pib-"] .dw-pk-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-page[data-page^="pib-"] .dw-pk-ziel-grid { grid-template-columns: 1fr; gap: 26px; }
  .dw-page[data-page^="pib-"] .dw-pk-ziel-figure img { max-height: 320px; }
  .dw-page[data-page^="pib-"] .dw-pk-step-body { grid-template-columns: 1fr; gap: 20px; }
  .dw-page[data-page^="pib-"] .dw-pk-step { padding: 20px; }
  .dw-page[data-page^="pib-"] .dw-pk-lightbox { padding: 16px; }
}

/* ---------------------------------------------------------------
   Elektronik-Serie (data-page^="elektronik", also der Hub
   /elektronik/ und alle Unterseiten), seit 2026-09-02.

   Bleibt in der hellen Site-Palette wie die pib-Kapitel. Dieselben
   zwei harten Detektor-Regeln gelten:
   - `layout-transition` Budget 0 -> nur transform/opacity/box-shadow
     animieren, nie Breite/Hoehe/Margin.
   - `side-tab` verbietet border-left-Akzente -> Stufen und Einheiten
     sind ein Kartenraster, keine Linien-Timeline.

   Seit 2026-09-02 darf auf diesen Seiten JavaScript mitlaufen
   (Regelaenderung, s. DESIGN.md). Alles hier ist so gebaut, dass es
   OHNE JS vollstaendig funktioniert: die Fortschritts-Markierung
   haengt an [data-erledigt] und wird nur gesetzt, wenn JS laeuft.
   --------------------------------------------------------------- */
.dw-page[data-page^="elektronik"] .dw-section > .dw-container > p,
.dw-page[data-page^="elektronik"] .dw-section > .dw-container > h2,
.dw-page[data-page^="elektronik"] .dw-section > .dw-container > h3,
.dw-page[data-page^="elektronik"] .dw-section > .dw-container > ul { max-width: 760px; }

/* Stufen-Kopf: Nummer, Titel, Ziel in einer Zeile */
.dw-el-stufe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 6px;
}
.dw-el-stufe-nr {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dw-accent);
}
.dw-el-stufe-ziel {
  font-size: 0.94rem;
  color: var(--dw-muted);
}

/* Einheiten-Raster */
.dw-el-grid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.dw-el-unit {
  position: relative;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  box-shadow: 0 8px 24px -18px rgba(11,18,32,0.20);
  padding: 20px 22px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.dw-el-unit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -20px rgba(11,18,32,0.34);
}
.dw-el-unit h3 {
  margin: 10px 0 8px;
  font-size: 1.06rem;
  line-height: 1.35;
}
.dw-el-unit p {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--dw-muted);
}
.dw-el-unit p:last-child { margin-bottom: 0; }

.dw-el-badge {
  display: inline-block;
  min-width: 34px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dw-graphite);
  color: var(--dw-graphite-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Pillen fuer Zeit, Kosten, Drucker-Bedarf */
.dw-el-tags {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dw-el-tags li {
  padding: 2px 10px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: var(--dw-paper-alt);
  font-size: 0.78rem;
  color: var(--dw-muted);
  white-space: nowrap;
}
.dw-el-tags li.is-frei {
  border-color: rgba(21,94,239,0.35);
  background: rgba(21,94,239,0.08);
  color: var(--dw-accent-dark);
  font-weight: 600;
}

/* Ausstiegspunkt: eine Einheit, nach der man aufhoeren darf.
   Der Rand ist bewusst 2px statt 1px. `gpt-thin-border-wide-shadow`
   trifft die Kombination aus *sichtbarem duennem* Rand und weichem
   Schatten -- die blassen Standardkarten (--dw-line, Alpha 0.10) lösen
   ihn nicht aus, ein Akzentrand mit Alpha 0.42 bei 1px schon, auch bei
   den 24px Hausschatten (gemessen 2026-09-02: erst 26px, dann 24px, je
   6 Treffer). Mit 2px greift die Regel nicht mehr, und der Schatten
   bleibt identisch zu allen anderen Karten. box-sizing steht auf
   border-box, die Kachelgroesse aendert sich dadurch nicht. */
.dw-el-unit.is-ziel {
  border-width: 2px;
  border-color: rgba(21,94,239,0.55);
  background: linear-gradient(180deg, rgba(21,94,239,0.05), rgba(21,94,239,0) 120px), var(--dw-card);
}
.dw-el-unit.is-ziel .dw-el-badge { background: var(--dw-accent); }
.dw-el-ziel-note {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--dw-line);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dw-accent-dark);
}

/* Fortschritt -- wird ausschliesslich per JS gesetzt. Ohne JS existiert
   das Attribut nicht und die Karte sieht normal aus. */
.dw-el-unit[data-erledigt="ja"] { background: var(--dw-paper-alt); }
.dw-el-unit[data-erledigt="ja"] h3 { color: var(--dw-muted); }
.dw-el-unit[data-erledigt="ja"] .dw-el-badge {
  background: var(--dw-muted);
}

/* Summenzeile auf der Werkstatt-Seite */
.dw-el-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 16px 0 0;
  padding: 16px 20px;
  border: 1px solid rgba(21,94,239,0.35);
  border-radius: 16px;
  background: rgba(21,94,239,0.06);
}
.dw-el-sum b {
  font-size: 1.24rem;
  font-variant-numeric: tabular-nums;
  color: var(--dw-accent-dark);
}
.dw-el-sum span {
  font-size: 0.92rem;
  color: var(--dw-muted);
}

/* ---------------------------------------------------------------
   Bedienelemente der Fortschritts-Schicht.

   ALLES hier wird per JavaScript erzeugt (dw-anim/lehrplan.js) und
   existiert ohne JS gar nicht -- deshalb gibt es auch keine
   :disabled-/Fallback-Zustaende. Ohne JS ist der Lehrplan eine
   vollstaendige, lesbare Liste, nur ohne Merkfunktion.
   --------------------------------------------------------------- */
.dw-el-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 22px 0 0;
  padding: 16px 20px;
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  background: var(--dw-card);
}
.dw-el-bar-text {
  margin: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--dw-muted);
}
.dw-el-bar-text b { color: var(--dw-ink); }
.dw-el-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.dw-el-btn {
  padding: 7px 14px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: var(--dw-paper-alt);
  color: var(--dw-ink);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  transition: transform 140ms ease, background-color 140ms ease;
}
.dw-el-btn:hover { background: #E7EAF0; }
.dw-el-btn:active { transform: translateY(1px); }
.dw-el-btn[aria-pressed="true"] {
  border-color: rgba(21,94,239,0.55);
  background: rgba(21,94,239,0.10);
  color: var(--dw-accent-dark);
  font-weight: 600;
}

/* Haken je Einheit, unten in der Karte */
.dw-el-done {
  margin-top: 12px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: var(--dw-paper-alt);
  color: var(--dw-muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.dw-el-done::before { content: "○ "; }
.dw-el-done[aria-pressed="true"] {
  border-color: rgba(21,94,239,0.55);
  background: rgba(21,94,239,0.10);
  color: var(--dw-accent-dark);
  font-weight: 600;
}
.dw-el-done[aria-pressed="true"]::before { content: "● "; }

/* Ausgeblendet durch den Filter "ohne Drucker" */
.dw-el-unit[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dw-page[data-page^="elektronik"] .dw-el-reveal {
      animation: dw-pk-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 55%;
    }
  }
}

@media (max-width: 760px) {
  .dw-el-grid { grid-template-columns: 1fr; }
  .dw-el-unit { padding: 18px 20px; }
}

/* ---------------------------------------------------------------
   Elektronik-Strang bebildert (2026-09-02, fuenfzehnte Runde).

   Hub und Unterseiten waren die einzigen Seiten ohne ein einziges
   Bild. Neu: Hero mit Foto, die drei Stufen als Karten auf ZWEI
   SPUREN (Spur A nacheinander, Spur B parallel -- die Entscheidung
   vom 02.09. als Bild), Kennzahl-Duelle, ein annotierter
   Gehaeuse-Schnitt in den vier Kopf-Farben, Fotos mit Quellenzeile,
   Stufen-Seiten im Lehrplan, Loetkolben-Karten, Bestell-Wellen und
   Kostenbalken auf der Werkstatt-Seite.

   Mechanik wie in den Bloecken .dw-pj- und .dw-ln-: Karo-Kachel, Conic-Ring, Schimmer,
   Nachbar-Daempfung, Reveal auf einem WRAPPER (.dw-el-slot), Lift und
   Daempfung auf der Karte. Detektor-Regeln wie dort: max. zwei
   Fuellfarben je SVG und Formen als <path> (shape-assembled-
   illustration), kein Blur-Halo (dark-glow), Amber nie als Text,
   Flaechen ohne Rand+Schatten (nested-cards), Kopf-Farben nur in
   Pseudo-Elementen (ai-color-palette iteriert echte Elemente).
   --------------------------------------------------------------- */

/* Ziel-Foto (SO-101-Arm) neben dem Text von Sektion 01 (Muster .dw-pk-ziel-grid);
   bis 08.09. stand es im Kopf, seitdem tragen alle Seiten den Standardkopf. */
.dw-page[data-page^="elektronik"] .dw-el-ziel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 44px;
  align-items: start;
}
.dw-page[data-page^="elektronik"] .dw-el-ziel-text { min-width: 0; }
.dw-page[data-page^="elektronik"] .dw-el-ziel-figure { margin: 0; min-width: 0; }
.dw-page[data-page^="elektronik"] .dw-el-ziel-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 26px -20px rgba(11,18,32,0.25);
}
.dw-page[data-page^="elektronik"] .dw-el-ziel-figure figcaption,
.dw-page[data-page^="elektronik"] .dw-el-foto figcaption {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dw-muted);
  margin-top: 10px;
}

/* Foto-Figur (Referenzfotos, immer mit Quellenzeile) */
.dw-page[data-page^="elektronik"] .dw-el-foto { margin: 0; min-width: 0; }
.dw-page[data-page^="elektronik"] .dw-el-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--dw-line);
  border-radius: 18px;
  background: #fff;
}
.dw-page[data-page^="elektronik"] .dw-el-foto--hoch img { aspect-ratio: 4 / 5; }
.dw-page[data-page^="elektronik"] .dw-el-foto--frei img { aspect-ratio: auto; }

/* ---- Zwei Spuren: Stufen-Karten auf einer Millimeterpapier-Matte.
   Matte BEWUSST ohne Rand/Schatten (nested-cards). Der Spur-Balken
   liegt hinter den Karten und ist nur in der Luecke sichtbar -- das
   ist die Verbindung Stufe 1 -> Stufe 2 -- bzw. rechts neben der
   Stufe-3-Karte, wo er unter der Notiz weiterlaeuft. */
.dw-page[data-page^="elektronik"] .dw-el-spuren {
  margin-top: 26px;
  padding: 24px 30px 20px;
  border-radius: 24px;
  background-color: var(--dw-paper-alt);
  background-image:
    linear-gradient(rgba(11,18,32,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.dw-page[data-page^="elektronik"] .dw-el-spur + .dw-el-spur {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed rgba(11,18,32,0.16);
}
.dw-page[data-page^="elektronik"] .dw-el-spur-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-spur-label b { color: var(--dw-ink); font-weight: 600; }
.dw-page[data-page^="elektronik"] .dw-el-spur-label::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: #155EEF;
}
.dw-page[data-page^="elektronik"] .dw-el-spur--b .dw-el-spur-label::before { background: #EF9C15; }

.dw-page[data-page^="elektronik"] .dw-el-spur-karten {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 18px;
  align-items: stretch;
}
.dw-page[data-page^="elektronik"] .dw-el-spur-karten::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #155EEF, #6B9BF7);
  transform: translateY(-50%);
  pointer-events: none;
}
.dw-page[data-page^="elektronik"] .dw-el-spur--b .dw-el-spur-karten::before {
  background: linear-gradient(90deg, #EF9C15, #F6C96A);
}
/* Pfeilspitze in der Luecke von Spur A */
.dw-page[data-page^="elektronik"] .dw-el-spur--a .dw-el-spur-karten::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border-top: 4px solid #155EEF;
  border-right: 4px solid #155EEF;
  transform: translate(-56%, -50%) rotate(45deg);
  pointer-events: none;
}

.dw-page[data-page^="elektronik"] .dw-el-slot {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.dw-page[data-page^="elektronik"] .dw-el-stufe-karte {
  height: 100%;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  box-shadow: 0 10px 26px -20px rgba(11,18,32,0.25);
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.25s ease;
}
.dw-page[data-page^="elektronik"] .dw-el-karte-grafik {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 2 / 1;
  background-color: var(--dw-card);
  background-image:
    linear-gradient(rgba(11,18,32,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--dw-line);
  border-radius: 19px 19px 0 0;
}
.dw-page[data-page^="elektronik"] .dw-el-karte-grafik svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
/* Conic-Ring innen (Muster .dw-pj-grafik::before) */
.dw-page[data-page^="elektronik"] .dw-el-karte-grafik::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 19px 19px 0 0;
  padding: 2px;
  background: conic-gradient(from var(--dw-ln-winkel),
    #EF9C15, #F6C96A, #C77E0A, #EF9C15);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.dw-page[data-page^="elektronik"] .dw-el-stufe-karte:hover .dw-el-karte-grafik::before,
.dw-page[data-page^="elektronik"] .dw-el-stufe-karte:focus-within .dw-el-karte-grafik::before {
  opacity: 1;
}
.dw-page[data-page^="elektronik"] .dw-el-karte-text { padding: 16px 22px 20px; }
.dw-page[data-page^="elektronik"] .dw-el-karte-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-karte-text h3 {
  margin: 8px 0 8px;
  font-size: 1.24rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.dw-page[data-page^="elektronik"] .dw-el-karte-text h3 a {
  color: var(--dw-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.dw-page[data-page^="elektronik"] .dw-el-karte-text h3 a:hover,
.dw-page[data-page^="elektronik"] .dw-el-karte-text h3 a:focus-visible { color: var(--dw-accent-dark); }
.dw-page[data-page^="elektronik"] .dw-el-karte-text p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: var(--dw-muted);
  max-width: 560px;
}
.dw-page[data-page^="elektronik"] .dw-el-karte-text .dw-el-tags { margin: 0 0 12px; }
.dw-page[data-page^="elektronik"] .dw-el-karte-ziel {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dashed var(--dw-line);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dw-accent-dark);
}
/* Notiz auf Spur B: sitzt auf dem Balken, gleiche Flaeche wie die
   Matte, damit der Balken unter ihr "durchlaeuft". */
.dw-page[data-page^="elektronik"] .dw-el-spur-note {
  position: relative;
  z-index: 1;
  align-self: center;
  justify-self: start;
  max-width: 440px;
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--dw-paper-alt);
  font-size: 0.94rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-spur-note b {
  display: block;
  margin-bottom: 4px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dw-ink);
}

@media (hover: hover) and (pointer: fine) {
  .dw-page[data-page^="elektronik"] .dw-el-stufe-karte:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -20px rgba(11,18,32,0.34);
  }
  .dw-page[data-page^="elektronik"] .dw-el-spuren:has(.dw-el-stufe-karte:hover)
    .dw-el-stufe-karte:not(:hover) {
    opacity: 0.55;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dw-page[data-page^="elektronik"] .dw-el-karte-grafik::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 34%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-115%) skewX(-18deg);
    transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1);
    pointer-events: none;
  }
  .dw-page[data-page^="elektronik"] .dw-el-stufe-karte:hover .dw-el-karte-grafik::after,
  .dw-page[data-page^="elektronik"] .dw-el-stufe-karte:focus-within .dw-el-karte-grafik::after {
    transform: translateX(340%) skewX(-18deg);
  }
  .dw-page[data-page^="elektronik"] .dw-el-stufe-karte:hover .dw-el-karte-grafik::before,
  .dw-page[data-page^="elektronik"] .dw-el-stufe-karte:focus-within .dw-el-karte-grafik::before {
    animation: dw-ln-ring 2.6s linear infinite;
  }
}

/* ---- Kennzahl-Duell: zwei Zahlen, die eine Entscheidung gekippt
   haben. Kein Balken -- ein Ohm-Verhaeltnis von 1:10.000.000 waere
   als Balken nicht mehr lesbar. Erster Wert (unsere Seite) in
   Akzent-Dunkel, zweiter in Tinte. */
.dw-page[data-page^="elektronik"] .dw-el-duell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 0;
  max-width: 760px;
  margin: 0 0 14px;
  padding: 12px 0 14px;
  border-top: 1px dashed var(--dw-line);
  border-bottom: 1px dashed var(--dw-line);
}
.dw-page[data-page^="elektronik"] .dw-el-duell > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  min-width: 0;
}
.dw-page[data-page^="elektronik"] .dw-el-duell dd {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 1.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--dw-ink);
}
.dw-page[data-page^="elektronik"] .dw-el-duell > div:first-child dd { color: var(--dw-accent-dark); }
.dw-page[data-page^="elektronik"] .dw-el-duell dt {
  font-size: 0.8rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-duell > div + div {
  position: relative;
  margin-left: 30px;
  padding-left: 62px;
}
.dw-page[data-page^="elektronik"] .dw-el-duell > div + div::before {
  content: "gegen";
  position: absolute;
  left: 0;
  bottom: 9px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}

/* ---- Gehaeuse-Schnitt: SVG-Kachel links, nummerierte Legende
   rechts. Marker im SVG und in der Legende sind dieselben Zahlen;
   die Kopf-Farbe haengt als Strich unter der Marke (Pseudo). */
.dw-page[data-page^="elektronik"] .dw-el-schnitt {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 32px;
  align-items: start;
  margin: 6px 0 18px;
}
.dw-page[data-page^="elektronik"] .dw-el-schnitt-grafik {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 4 / 3;
  background-color: var(--dw-card);
  background-image:
    linear-gradient(rgba(11,18,32,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  box-shadow: 0 8px 24px -18px rgba(11,18,32,0.20);
}
.dw-page[data-page^="elektronik"] .dw-el-schnitt-grafik svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.dw-page[data-page^="elektronik"] .dw-el-schnitt-grafik figcaption {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 12px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-legende {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dw-page[data-page^="elektronik"] .dw-el-legende li {
  position: relative;
  margin: 0;
  padding: 11px 0 11px 46px;
  border-top: 1px dashed var(--dw-line);
  font-size: 0.97rem;
  color: var(--dw-muted);
  max-width: 560px;
}
.dw-page[data-page^="elektronik"] .dw-el-legende li:first-child { border-top: 0; padding-top: 2px; }
.dw-page[data-page^="elektronik"] .dw-el-legende li strong { color: var(--dw-ink); }
.dw-page[data-page^="elektronik"] .dw-el-marke {
  position: absolute;
  left: 0;
  top: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--dw-ink);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  font-style: normal;
}
.dw-page[data-page^="elektronik"] .dw-el-legende li:first-child .dw-el-marke { top: 2px; }
.dw-page[data-page^="elektronik"] .dw-el-marke::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -7px;
  height: 3px;
  border-radius: 2px;
  background: var(--dw-el-kopf, #155EEF);
}
.dw-page[data-page^="elektronik"] .dw-el-kopf--blau { --dw-el-kopf: #155EEF; }
.dw-page[data-page^="elektronik"] .dw-el-kopf--amber { --dw-el-kopf: #EF9C15; }
.dw-page[data-page^="elektronik"] .dw-el-kopf--teal { --dw-el-kopf: #0FA69B; }
.dw-page[data-page^="elektronik"] .dw-el-kopf--magenta { --dw-el-kopf: #D6158A; }
/* Vier Koepfe, vier Farben -- die Pinwheel-Palette der Wortmarke */
.dw-page[data-page^="elektronik"] .dw-el-koepfe {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-koepfe li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  max-width: none;
}
.dw-page[data-page^="elektronik"] .dw-el-koepfe li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--dw-el-kopf, #155EEF);
}

/* ---- Wo es losgeht: Text + Bestell-Kacheln links, Foto rechts */
.dw-page[data-page^="elektronik"] .dw-el-start,
.dw-page[data-page^="elektronik"] .dw-el-textfoto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 36px;
  align-items: start;
}
.dw-page[data-page^="elektronik"] .dw-el-start-text,
.dw-page[data-page^="elektronik"] .dw-el-textfoto-text { min-width: 0; }
.dw-page[data-page^="elektronik"] .dw-el-bestellungen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 4px 0 18px;
}
.dw-page[data-page^="elektronik"] .dw-el-bestellung {
  display: block;
  padding: 14px 16px 15px;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  color: var(--dw-ink);
  /* Schriftgroesse auf dem Block selbst, sonst setzt der 22px-Strut des
     Themes die Zeilenhoehe der Inline-Kinder (Zeilen zerfallen). */
  font-size: 0.88rem;
  line-height: 1.5;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dw-page[data-page^="elektronik"] .dw-el-bestellung:hover,
.dw-page[data-page^="elektronik"] .dw-el-bestellung:focus-visible {
  color: var(--dw-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(11,18,32,0.30);
}
.dw-page[data-page^="elektronik"] .dw-el-bestellung small {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-bestellung b {
  display: block;
  margin: 4px 0 2px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--dw-accent-dark);
}
.dw-page[data-page^="elektronik"] .dw-el-bestellung span {
  display: block;
  color: var(--dw-muted);
}

/* ---- Lehrplan: Stufen-Abschnitt mit Foto-Seite. Links das
   Einheiten-Raster (2 Spalten), rechts klebt das Referenzfoto der
   Stufe unter der Nav. */
.dw-page[data-page^="elektronik"] .dw-el-stufe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
.dw-page[data-page^="elektronik"] .dw-el-stufe-haupt { min-width: 0; }
.dw-page[data-page^="elektronik"] .dw-el-stufe-seite {
  position: sticky;
  top: 92px;
}
.dw-page[data-page^="elektronik"] .dw-el-stufe-seite .dw-el-foto img { aspect-ratio: 4 / 3; }

@media (max-width: 960px) {
  .dw-page[data-page^="elektronik"] .dw-el-stufe-layout { grid-template-columns: 1fr; }
  .dw-page[data-page^="elektronik"] .dw-el-stufe-seite { position: static; }
  .dw-page[data-page^="elektronik"] .dw-el-stufe-seite .dw-el-foto img { aspect-ratio: 16 / 9; }
}
@media (max-width: 860px) {
  .dw-page[data-page^="elektronik"] .dw-el-ziel-grid { grid-template-columns: 1fr; gap: 24px; }
  .dw-page[data-page^="elektronik"] .dw-el-spuren { padding: 18px 18px 14px; }
  .dw-page[data-page^="elektronik"] .dw-el-spur-karten { grid-template-columns: 1fr; }
  /* Spur-Balken und Pfeil sind horizontal gedacht -- einspaltig
     tragen die Etiketten die Reihenfolge. */
  .dw-page[data-page^="elektronik"] .dw-el-spur-karten::before,
  .dw-page[data-page^="elektronik"] .dw-el-spur--a .dw-el-spur-karten::after { display: none; }
  .dw-page[data-page^="elektronik"] .dw-el-spur-note { max-width: none; padding: 0 4px; }
  .dw-page[data-page^="elektronik"] .dw-el-schnitt { grid-template-columns: 1fr; gap: 20px; }
  .dw-page[data-page^="elektronik"] .dw-el-start,
  .dw-page[data-page^="elektronik"] .dw-el-textfoto { grid-template-columns: 1fr; gap: 22px; }
  .dw-page[data-page^="elektronik"] .dw-el-duell > div + div { margin-left: 0; }
}
@media (max-width: 520px) {
  .dw-page[data-page^="elektronik"] .dw-el-bestellungen { grid-template-columns: 1fr; }
  .dw-page[data-page^="elektronik"] .dw-el-duell dd { font-size: 1.4rem; }
}

/* ---- Lehrplan: Fahrplan-Band -- Wochen netto auf zwei Spuren, auf
   Millimeterpapier. 21 Spalten = Wochen, Balken per grid-column. Blau
   fuer Spur A (Stufe 1 -> Stufe 2), Amber fuer die parallele Stufe 3. */
.dw-page[data-page^="elektronik"] .dw-el-fahrplan {
  max-width: 860px;
  margin: 22px 0 10px;
  padding: 18px 22px 14px;
  border-radius: 20px;
  background-color: var(--dw-paper-alt);
  background-image:
    linear-gradient(rgba(11,18,32,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-zeile {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-zeile > b {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-bahn {
  display: grid;
  grid-template-columns: repeat(21, minmax(0, 1fr));
  column-gap: 2px;
  min-width: 0;
}
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-balken {
  grid-row: 1;
  display: flex;
  align-items: center;
  height: 30px;
  min-width: 0;
  padding: 0 10px;
  border-radius: 8px;
  background: #155EEF;
  color: #FFFFFF;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-balken--2 { background: #0F47B8; }
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-balken--amber { background: #EF9C15; color: var(--dw-ink); }
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-skala {
  display: grid;
  grid-template-columns: repeat(21, minmax(0, 1fr));
  margin: 2px 0 0 84px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-skala span {
  grid-row: 1;
  padding-left: 5px;
  border-left: 1px solid rgba(11,18,32,0.22);
  line-height: 1.5;
  white-space: nowrap;
}
.dw-page[data-page^="elektronik"] .dw-el-fahrplan-note {
  max-width: 560px;
  margin: 12px 0 0;
  font-size: 0.88rem;
  color: var(--dw-muted);
}

/* Sprungziele (#stufe-1..3, #wellen) landen unter der sticky Nav */
.dw-page[data-page^="elektronik"] [id^="stufe-"],
.dw-page[data-page^="elektronik"] #wellen { scroll-margin-top: 84px; }

/* ---- Lehrplan: Piktogramm je Einheit, links neben dem Badge */
.dw-page[data-page^="elektronik"] .dw-el-unit-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dw-page[data-page^="elektronik"] .dw-el-icon {
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}

/* ---- Werkstatt: Zwei Wege zum Loetkolben. Zwei GLEICHWERTIGE Karten,
   dieselbe Groesse, dieselbe Farbe -- die Entscheidung faellt auf der
   Seite, nicht im Layout. */
.dw-page[data-page^="elektronik"] .dw-el-wege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 4px 0 24px;
}
.dw-page[data-page^="elektronik"] .dw-el-weg {
  overflow: hidden;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  box-shadow: 0 8px 24px -18px rgba(11,18,32,0.20);
}
.dw-page[data-page^="elektronik"] .dw-el-weg-grafik {
  margin: 0;
  aspect-ratio: 16 / 7;
  background-color: var(--dw-card);
  background-image:
    linear-gradient(rgba(11,18,32,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--dw-line);
}
.dw-page[data-page^="elektronik"] .dw-el-weg-grafik svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dw-page[data-page^="elektronik"] .dw-el-weg-text { padding: 16px 22px 20px; }
.dw-page[data-page^="elektronik"] .dw-el-weg-text h4 {
  margin: 6px 0 4px;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--dw-ink);
}
.dw-page[data-page^="elektronik"] .dw-el-weg-preis {
  margin: 0 0 14px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 1.5rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--dw-ink);
}
.dw-page[data-page^="elektronik"] .dw-el-weg-preis small {
  display: block;
  margin-top: 4px;
  line-height: 1.5;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-weg dl {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 9px 12px;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.dw-page[data-page^="elektronik"] .dw-el-weg dt {
  padding-top: 3px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-weg dd {
  margin: 0;
  color: var(--dw-ink);
}

/* ---- Werkstatt: Bestell-Wellen auf einer Amber-Bahn (Muster
   .dw-ln-strecke, hier horizontal). Direkter ul-Kindknoten der
   Container -> die 760px-Lesespaltenregel oben muss hier weichen. */
.dw-page[data-page^="elektronik"] .dw-section > .dw-container > ul.dw-el-wellen { max-width: none; }
.dw-page[data-page^="elektronik"] .dw-el-wellen {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
}
.dw-page[data-page^="elektronik"] .dw-el-wellen::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 7px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #EF9C15, #F6C96A);
}
.dw-page[data-page^="elektronik"] .dw-el-welle {
  position: relative;
  margin: 0;
  padding: 28px 0 0;
  max-width: none;
}
.dw-page[data-page^="elektronik"] .dw-el-welle::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #EF9C15;
  box-shadow: 0 0 0 4px var(--dw-paper), 0 0 0 6px rgba(239,156,21,0.35);
}
.dw-page[data-page^="elektronik"] .dw-el-welle-kopf {
  display: block;
  margin: 0 0 8px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-welle-kopf b {
  display: block;
  margin-top: 3px;
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--dw-ink);
}
.dw-page[data-page^="elektronik"] .dw-el-welle p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--dw-muted);
}

/* ---- Werkstatt: Kostenreihe. Ein Farbton (Magnitude), der Drucker
   als gestrichelte Referenz, Minimalstart als Teil von Stufe 1 in
   hellerem Blau. Datenenden 4px gerundet, Werte in Tinte (nie in der
   Reihenfarbe), Tabelle bleibt Tabelle. */
.dw-page[data-page^="elektronik"] .dw-el-kosten {
  width: 100%;
  max-width: 860px;
  margin: 4px 0 18px;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.dw-page[data-page^="elektronik"] .dw-el-kosten caption {
  padding: 0 0 10px;
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-kosten thead th {
  padding: 0 0 8px;
  text-align: left;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dw-muted);
  border-bottom: 1px solid var(--dw-line);
}
.dw-page[data-page^="elektronik"] .dw-el-kosten th[scope="row"] {
  width: 42%;
  padding: 9px 16px 9px 0;
  text-align: left;
  font-weight: 400;
  color: var(--dw-ink);
  vertical-align: middle;
  border-top: 1px dashed var(--dw-line);
}
.dw-page[data-page^="elektronik"] .dw-el-kosten td {
  padding: 9px 0;
  vertical-align: middle;
  border-top: 1px dashed var(--dw-line);
}
.dw-page[data-page^="elektronik"] .dw-el-kosten-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.dw-page[data-page^="elektronik"] .dw-el-kosten-bar {
  flex: 0 0 auto;
  /* Anteil (0..1) einer festen Spur: Zeile minus Platz fuer den Wert,
     damit die Referenz (1.0) exakt die volle Spur ist */
  width: calc((100% - 130px) * var(--dw-p, 0));
  height: 14px;
  border-radius: 0 4px 4px 0;
  background: #155EEF;
}
.dw-page[data-page^="elektronik"] .dw-el-kosten-zeile b {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--dw-ink);
}
.dw-page[data-page^="elektronik"] .dw-el-kosten-zeile small {
  font-size: 0.82rem;
  color: var(--dw-muted);
}
.dw-page[data-page^="elektronik"] .dw-el-kosten-ref .dw-el-kosten-bar {
  background: transparent;
  border: 2px dashed var(--dw-muted);
  height: 14px;
}
.dw-page[data-page^="elektronik"] .dw-el-kosten-teil th[scope="row"] { padding-left: 18px; color: var(--dw-muted); }
.dw-page[data-page^="elektronik"] .dw-el-kosten-teil .dw-el-kosten-bar { background: rgba(21,94,239,0.35); }
.dw-page[data-page^="elektronik"] .dw-el-kosten-sum th[scope="row"],
.dw-page[data-page^="elektronik"] .dw-el-kosten-sum td {
  border-top: 2px solid var(--dw-line);
  font-weight: 600;
}

@media (max-width: 860px) {
  .dw-page[data-page^="elektronik"] .dw-el-wege { grid-template-columns: 1fr; }
  .dw-page[data-page^="elektronik"] .dw-el-wellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dw-page[data-page^="elektronik"] .dw-el-fahrplan { padding: 14px 14px 12px; }
  .dw-page[data-page^="elektronik"] .dw-el-fahrplan-zeile { grid-template-columns: 1fr; gap: 4px; margin-bottom: 12px; }
  .dw-page[data-page^="elektronik"] .dw-el-fahrplan-skala { margin-left: 0; }
  .dw-page[data-page^="elektronik"] .dw-el-fahrplan-balken { padding: 0 7px; }
  /* Wellen: Bahn senkrecht am linken Rand, Knoten daneben */
  .dw-page[data-page^="elektronik"] .dw-el-wellen { grid-template-columns: 1fr; gap: 20px; }
  .dw-page[data-page^="elektronik"] .dw-el-wellen::before {
    left: 8px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 3px;
    height: auto;
    background: linear-gradient(180deg, #EF9C15, #F6C96A);
  }
  .dw-page[data-page^="elektronik"] .dw-el-welle { padding: 0 0 0 34px; }
  .dw-page[data-page^="elektronik"] .dw-el-welle::before { left: 2px; top: 4px; }
  /* Kostenreihe: Posten ueber dem Balken */
  .dw-page[data-page^="elektronik"] .dw-el-kosten thead { display: none; }
  .dw-page[data-page^="elektronik"] .dw-el-kosten tr { display: block; padding: 8px 0; border-top: 1px dashed var(--dw-line); }
  .dw-page[data-page^="elektronik"] .dw-el-kosten th[scope="row"],
  .dw-page[data-page^="elektronik"] .dw-el-kosten td { display: block; width: auto; padding: 0; border-top: 0; }
  .dw-page[data-page^="elektronik"] .dw-el-kosten th[scope="row"] { padding-bottom: 4px; font-size: 0.9rem; }
  .dw-page[data-page^="elektronik"] .dw-el-kosten-teil th[scope="row"] { padding-left: 0; }
  .dw-page[data-page^="elektronik"] .dw-el-kosten-sum tr,
  .dw-page[data-page^="elektronik"] tr.dw-el-kosten-sum { border-top: 2px solid var(--dw-line); }
}

/* ---------------------------------------------------------------
   /bestellliste/ (2026-09-02): aus recherche/BESTELLUNG.md generiert
   (scripts/setup-bestellliste.js). Zustands-Chips im .dw-el-tags-Duktus,
   Kacheln "Diese Woche" wie .dw-el-bestellung, Tabellen unter 640px als
   Karten (Muster .dw-mat-table, data-label je Zelle). Amber nie als
   Text, Akzentraender 2px, keine Karte in Karte.
   --------------------------------------------------------------- */
.dw-page[data-page="bestellliste"] .dw-bl-standzeile {
  max-width: 560px;
  margin: 0 0 14px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--dw-muted);
}
.dw-page[data-page="bestellliste"] .dw-bl-woche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 4px 0 16px;
}
.dw-page[data-page="bestellliste"] .dw-bl-woche-kachel {
  display: block;
  padding: 14px 16px 15px;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  color: var(--dw-ink);
  font-size: 0.88rem;
  line-height: 1.5;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dw-page[data-page="bestellliste"] .dw-bl-woche-kachel:hover,
.dw-page[data-page="bestellliste"] .dw-bl-woche-kachel:focus-visible {
  color: var(--dw-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -20px rgba(11,18,32,0.30);
}
.dw-page[data-page="bestellliste"] .dw-bl-woche-kachel small {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page[data-page="bestellliste"] .dw-bl-woche-kachel b {
  display: block;
  margin: 4px 0 2px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--dw-accent-dark);
}
.dw-page[data-page="bestellliste"] .dw-bl-woche-kachel span {
  display: block;
  color: var(--dw-muted);
}
.dw-page[data-page="bestellliste"] .dw-bl-woche-kachel .dw-bl-woche-stand {
  margin-top: 6px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--dw-ink);
}
.dw-page[data-page="bestellliste"] .dw-bl-legende {
  margin: 0;
  font-size: 0.88rem;
  color: var(--dw-muted);
}
.dw-page[data-page="bestellliste"] .dw-bl-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 8px;
}
.dw-page[data-page="bestellliste"] .dw-bl-kopf h2 { margin: 0; }
.dw-page[data-page="bestellliste"] .dw-bl-summe {
  padding: 3px 11px;
  border: 1px solid rgba(21,94,239,0.35);
  border-radius: 999px;
  background: rgba(21,94,239,0.06);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--dw-accent-dark);
  white-space: nowrap;
}
.dw-page[data-page="bestellliste"] .dw-bl-untertitel {
  margin: 0 0 16px;
  font-size: 0.97rem;
  color: var(--dw-muted);
}
/* Stand je Zeile: offen = Umriss, bestellt = 2px Amber-Rand (Tinte als
   Text, Amber hat auf Papier nur 2,4:1), da = Blau gefuellt */
.dw-page[data-page="bestellliste"] .dw-bl-stand {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: var(--dw-paper-alt);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--dw-muted);
  white-space: nowrap;
}
.dw-page[data-page="bestellliste"] .dw-bl-stand--bestellt {
  padding: 1px 9px;
  border: 2px solid #EF9C15;
  background: rgba(239,156,21,0.10);
  color: var(--dw-ink);
}
.dw-page[data-page="bestellliste"] .dw-bl-stand--da {
  border-color: var(--dw-accent);
  background: var(--dw-accent);
  color: #FFFFFF;
}
/* Tabellen: die Stand-Spalte schmal, der Rest verteilt sich */
.dw-page[data-page="bestellliste"] .dw-bl-table { table-layout: auto; }
.dw-page[data-page="bestellliste"] .dw-bl-table th:first-child,
.dw-page[data-page="bestellliste"] .dw-bl-table td:first-child { width: 88px; white-space: nowrap; }
.dw-page[data-page="bestellliste"] .dw-bl-table td { vertical-align: top; }
.dw-page[data-page="bestellliste"] .dw-bl-table td.dw-bl-preis { min-width: 120px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .dw-page[data-page="bestellliste"] .dw-section > .dw-container > .dw-table-wrap { overflow: visible; }
  .dw-page[data-page="bestellliste"] .dw-bl-table,
  .dw-page[data-page="bestellliste"] .dw-bl-table tbody,
  .dw-page[data-page="bestellliste"] .dw-bl-table tr,
  .dw-page[data-page="bestellliste"] .dw-bl-table td { display: block; width: 100%; min-width: 0; }
  .dw-page[data-page="bestellliste"] .dw-bl-table thead {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
  }
  .dw-page[data-page="bestellliste"] .dw-bl-table tr {
    padding: 12px 0;
    border-top: 1px dashed var(--dw-line);
  }
  .dw-page[data-page="bestellliste"] .dw-bl-table tr:last-child { border-bottom: 1px solid var(--dw-line); }
  .dw-page[data-page="bestellliste"] .dw-bl-table td {
    padding: 4px 0;
    border: 0;
    white-space: normal;
  }
  .dw-page[data-page="bestellliste"] .dw-bl-table td::before {
    content: attr(data-label);
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dw-muted);
  }
  .dw-page[data-page="bestellliste"] .dw-bl-table td:first-child { width: auto; }
  .dw-page[data-page="bestellliste"] .dw-bl-table td.dw-zeilenkopf { padding-left: 0; font-weight: 600; }
  .dw-page[data-page="bestellliste"] .dw-bl-table td.dw-zeilenkopf::before { content: none; }
}

/* ---------------------------------------------------------------
   /lernen/ (2026-09-08, dreiundzwanzigste Runde): die fuenf Lerneinheiten
   haengen jetzt an derselben Lochwand wie die Vorhaben auf /projekte/
   (.dw-pj-* unten, seit 08.09. ohne Seiten-Scope) -- Florian: "schau mal
   auf projekte, das ist eine gute idee". Die Werkzeug-Strecke vom 02.09.
   (Zickzack an der Amber-Bahn) ist weg. Uebrig bleiben @property und der
   Conic-Ring-Keyframe, die Elektronik- und Projekte-Karten weiter nutzen,
   plus zwei Lernen-Feinheiten: die fuenfte, breite Karte ist ein fertiges
   Werkstueck (feste Kante statt der gestrichelten Kladde), und die
   Einheit-Nummer steht als Etikett in Amber.
   --------------------------------------------------------------- */
@property --dw-ln-winkel {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes dw-ln-ring { to { --dw-ln-winkel: 360deg; } }

.dw-page[data-page="lernen"] .dw-pj-kladde { border-style: solid; }
.dw-page[data-page="lernen"] .dw-pj-kladde .dw-pj-grafik { border-right-style: solid; }
@media (max-width: 860px) {
  .dw-page[data-page="lernen"] .dw-pj-kladde .dw-pj-grafik { border-bottom-style: solid; }
}

/* ---------------------------------------------------------------
   /projekte/ als Werkbank (2026-09-02, dreizehnte Runde) -- seit 2026-09-08 auch /lernen/, deshalb ohne data-page-Scope.

   Schwester der lernen-Werkzeug-Strecke, anderes Bild: keine Bahn,
   sondern eine LOCHWAND — die Vorhaben haengen als Werkstuecke an
   der Wand, das Ergebnis-Log als Kladde darunter. Vier Agenda-Karten
   (2x2, alle Kacheln 16:10 — das feste Verhaeltnis) plus eine
   breite Kladde-Karte. Jede Karte haengt an einem sichtbaren
   Wandhaken (Peg). Gleiche Wow-Mechanik wie .dw-ln-*: Conic-Ring,
   Schimmer, Nachbar-Daempfung, Scroll-Reveal.

   Struktur-Entscheidung, direkt aus der lernen-Falle gelernt:
   Das Reveal laeuft auf .dw-pj-slot (Wrapper), Lift und Daempfung
   auf .dw-pj-karte — so kollidiert keine `both`-Fill-Animation mit
   den Hover-Transitionen.

   Dieselben Detektor-Regeln wie beim lernen-Block: kein Blur-Halo
   (dark-glow), max. zwei Fuellfarben je SVG (shape-assembled-
   illustration), Amber nie als Textfarbe, Bewegung nur
   transform/opacity/box-shadow (layout-transition Budget 0).
   --------------------------------------------------------------- */
.dw-page .dw-pj-wand {
  margin-top: 30px;
  padding: 34px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 30px 26px;
  /* Lochwand-Matte: Papier-Alt mit Lochraster. BEWUSST ohne Rand und
     ohne (Innen-)Schatten: bg+radius+rand/schatten waere fuer den
     Detektor eine Karte, und Karten in Karten sind `nested-cards`.
     So ist es eine Flaeche, die Werkstuecke haengen darauf. */
  background-color: var(--dw-paper-alt);
  background-image: radial-gradient(circle 2.5px at center,
    rgba(11,18,32,0.20) 90%, transparent 100%);
  background-size: 28px 28px;
  border-radius: 24px;
}

.dw-page .dw-pj-slot { min-width: 0; }
.dw-page .dw-pj-slot--kladde { grid-column: 1 / -1; }

.dw-page .dw-pj-karte {
  position: relative;
  height: 100%;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 20px;
  box-shadow: 0 10px 26px -20px rgba(11,18,32,0.25);
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.25s ease;
}
/* Wandhaken: kleine Schraubscheibe mittig ueber der Kartenoberkante. */
.dw-page .dw-pj-karte::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -7px;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  /* Schraubscheibe ohne Verlauf (radial-halo): heller Kern, Graphit-Rand */
  background: #98A2B3;
  border: 4px solid var(--dw-graphite);
  transform: translateX(-50%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .dw-page .dw-pj-karte:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -20px rgba(11,18,32,0.34);
  }
  /* Spotlight-Daempfung wie auf /lernen/: die hoverte Karte tritt
     hervor, die anderen einen Schritt zurueck. */
  .dw-page .dw-pj-wand:has(.dw-pj-karte:hover)
    .dw-pj-karte:not(:hover) {
    opacity: 0.55;
  }
}

/* Grafik-Kachel: Kartenkopf mit Blueprint-Karo, Ring und Schimmer
   laufen wie auf /lernen/ (Ring innen wegen overflow:hidden). */
.dw-page .dw-pj-grafik {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 10;
  background-color: var(--dw-card);
  background-image:
    linear-gradient(rgba(11,18,32,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.055) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--dw-line);
  border-radius: 19px 19px 0 0;
}
.dw-page .dw-pj-grafik svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
.dw-page .dw-pj-grafik::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 19px 19px 0 0;
  padding: 2px;
  background: conic-gradient(from var(--dw-ln-winkel),
    #EF9C15, #F6C96A, #C77E0A, #EF9C15);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.dw-page .dw-pj-karte:hover .dw-pj-grafik::before,
.dw-page .dw-pj-karte:focus-within .dw-pj-grafik::before {
  opacity: 1;
}

.dw-page .dw-pj-text { padding: 18px 22px 22px; }
/* Besitzer-Etikett im Werkstatt-Duktus: Mono, kleiner Farbpunkt —
   Muster .dw-h-geht-card .tag von der Startseite. */
.dw-page .dw-pj-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-page .dw-pj-tag span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #EF9C15;
}
.dw-page .dw-pj-tag--log span { background: var(--dw-graphite); }
.dw-page .dw-pj-text h3 {
  margin: 8px 0 10px;
  font-size: 1.18rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.dw-page .dw-pj-text p.dw-pj-desc {
  margin: 0;
  font-size: 0.94rem;
  color: var(--dw-muted);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kladde: das Ergebnis-Log haengt quer unter den Agenden — gleiche
   Kartenmechanik, aber gestrichelte Kante (laufende Liste, kein
   fertiges Werkstueck) und Grafik neben statt ueber dem Text. */
.dw-page .dw-pj-kladde {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  align-items: center;
  border-style: dashed;
}
.dw-page .dw-pj-kladde .dw-pj-grafik {
  aspect-ratio: 4 / 3;
  border-bottom: none;
  border-right: 1px dashed var(--dw-line);
  border-radius: 19px 0 0 19px;
}
.dw-page .dw-pj-kladde .dw-pj-grafik::before {
  border-radius: 19px 0 0 19px;
}
.dw-page .dw-pj-kladde .dw-pj-text {
  padding: 22px 26px;
}
/* Die Kladde-Textspalte ist breit — die Beschreibung begrenzen,
   sonst reisst line-length (Budget 0, gemessen: 97 Zeichen). */
.dw-page .dw-pj-kladde .dw-pj-desc {
  max-width: 560px;
}

.dw-page .dw-pj-fahrplan {
  margin: 18px 0 0;
  font-size: 0.92rem;
  color: var(--dw-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .dw-page .dw-pj-grafik::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 34%;
    background: linear-gradient(105deg,
      transparent, rgba(255,255,255,0.55), transparent);
    transform: translateX(-115%) skewX(-18deg);
    transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1);
    pointer-events: none;
  }
  .dw-page .dw-pj-karte:hover .dw-pj-grafik::after,
  .dw-page .dw-pj-karte:focus-within .dw-pj-grafik::after {
    transform: translateX(340%) skewX(-18deg);
  }
  .dw-page .dw-pj-karte:hover .dw-pj-grafik::before,
  .dw-page .dw-pj-karte:focus-within .dw-pj-grafik::before {
    animation: dw-ln-ring 2.6s linear infinite;
  }
}

/* Scroll-Reveal auf den SLOTS (ungerade/gerade versetzt) — die Karten
   selbst bleiben frei fuer Lift und Daempfung. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dw-page .dw-pj-slot:nth-child(odd) {
      animation: dw-pk-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 38%;
    }
    .dw-page .dw-pj-slot:nth-child(even) {
      animation: dw-pk-rise linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 46%;
    }
  }
}

@media (max-width: 860px) {
  .dw-page .dw-pj-wand {
    grid-template-columns: 1fr;
    padding: 22px;
    gap: 26px;
  }
  .dw-page .dw-pj-kladde {
    grid-template-columns: 1fr;
  }
  .dw-page .dw-pj-kladde .dw-pj-grafik {
    aspect-ratio: 16 / 10;
    border-right: none;
    border-bottom: 1px dashed var(--dw-line);
    border-radius: 19px 19px 0 0;
  }
  .dw-page .dw-pj-kladde .dw-pj-grafik::before {
    border-radius: 19px 19px 0 0;
  }
}

/* ---------------------------------------------------------------
   /materialien/ als Materiallabor (2026-09-02, vierzehnte Runde).

   Die Tabellen bleiben die belastbare Forschungsebene. Davor stehen
   echte Materialproben, vier Einstiege nach Anwendung und drei
   gleichwertige Temperaturzonen. Bewegung hat eine einzige Metapher:
   der Labor-Scan. Er prueft Oberflaechen und zieht die Messbalken auf;
   Inhalte sind im Default immer vollstaendig sichtbar.
   --------------------------------------------------------------- */
.dw-page[data-page="materialien"] {
  --dw-mat-green: #08785B;
  --dw-mat-green-soft: #EAF8F2;
  --dw-mat-yellow: #8A5A00;
  --dw-mat-yellow-soft: #FFF6DB;
  --dw-mat-red: #B42318;
  --dw-mat-red-soft: #FEF0EE;
}
.dw-page[data-page="materialien"] #materialweg,
.dw-page[data-page="materialien"] #materialmatrix,
.dw-page[data-page="materialien"] #zone-gruen,
.dw-page[data-page="materialien"] #zone-gelb,
.dw-page[data-page="materialien"] #zone-rot,
.dw-page[data-page="materialien"] #effektmaterialien {
  scroll-margin-top: 116px;
}

/* /werkstatt/: die Kapitel-Chips im Hero springen auf die Abschnitte --
   ohne scroll-margin landet die Ueberschrift unter der klebenden Nav. */
.dw-page[data-page="werkstatt"] .dw-section[id] {
  scroll-margin-top: 116px;
}

/* Sektion 01: links Frage und Einstieg, rechts die vier realen Proben (bis 08.09.
   standen sie im Kopf; seitdem hat auch /materialien/ den Standardkopf mit Vase).
   Die Wege-Kacheln laufen darunter ueber die volle Breite. */
.dw-page[data-page="materialien"] .dw-mat-index > .dw-container {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(460px, 1.18fr);
  gap: clamp(38px, 6vw, 84px);
  align-items: center;
}
.dw-page[data-page="materialien"] .dw-mat-index-copy { min-width: 0; }
.dw-page[data-page="materialien"] .dw-mat-index .dw-mat-paths { grid-column: 1 / -1; }
.dw-page[data-page="materialien"] .dw-mat-status {
  display: flex;
  gap: 8px;
  align-items: baseline;
  width: fit-content;
  max-width: 560px;
  margin: 24px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(21,94,239,0.24);
  color: var(--dw-muted);
  font-size: 0.9rem;
}
.dw-page[data-page="materialien"] .dw-mat-status strong {
  color: var(--dw-accent);
  white-space: nowrap;
}

.dw-page[data-page="materialien"] .dw-mat-samples {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 132px 132px auto;
  gap: 12px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
.dw-page[data-page="materialien"] .dw-mat-sample {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 12px 28px -20px rgba(11,18,32,0.38);
  background: var(--dw-paper-alt);
}
.dw-page[data-page="materialien"] .dw-mat-sample--pla { grid-column: 1 / 7; grid-row: 1 / 3; }
.dw-page[data-page="materialien"] .dw-mat-sample--cf { grid-column: 7 / 13; grid-row: 1; }
.dw-page[data-page="materialien"] .dw-mat-sample--wood { grid-column: 7 / 10; grid-row: 2; }
.dw-page[data-page="materialien"] .dw-mat-sample--glow { grid-column: 10 / 13; grid-row: 2; }
.dw-page[data-page="materialien"] .dw-mat-sample img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dw-page[data-page="materialien"] .dw-mat-sample--pla img { object-position: 50% 54%; }
.dw-page[data-page="materialien"] .dw-mat-sample--cf img { object-position: 54% 50%; }
.dw-page[data-page="materialien"] .dw-mat-sample > span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(11,18,32,0.86);
  color: #FFFFFF;
  font-size: 0.74rem;
  line-height: 1.2;
}
.dw-page[data-page="materialien"] .dw-mat-samples figcaption {
  grid-column: 1 / -1;
  margin-top: 1px;
  color: var(--dw-muted);
  font-size: 0.78rem;
}
.dw-page[data-page="materialien"] .dw-mat-samples::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -12%;
  bottom: 28px;
  left: 0;
  width: 22%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.16) 30%, rgba(255,255,255,0.72) 49%, rgba(21,94,239,0.24) 52%, rgba(255,255,255,0.18) 68%, transparent 100%);
  transform: translateX(-150%) skewX(-8deg);
  opacity: 0;
}
@keyframes dw-mat-scan {
  0% { transform: translateX(-150%) skewX(-8deg); opacity: 0; }
  15% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateX(560%) skewX(-8deg); opacity: 0; }
}

/* Vier Wege: kein gleichfoermiges Kartenraster, sondern zwei versetzte
   Probenreihen mit bewusst unterschiedlicher Breite. */
.dw-page[data-page="materialien"] .dw-mat-index { padding-top: 64px; }
.dw-page[data-page="materialien"] .dw-mat-intro {
  max-width: 64ch;
  color: var(--dw-muted);
}
.dw-page[data-page="materialien"] .dw-mat-paths {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  max-width: 1060px;
  margin-top: 28px;
}
.dw-page[data-page="materialien"] .dw-mat-path {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 190px;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 12px 28px -22px rgba(11,18,32,0.58);
}
.dw-page[data-page="materialien"] .dw-mat-path:nth-child(1),
.dw-page[data-page="materialien"] .dw-mat-path:nth-child(4) { grid-column: span 5; }
.dw-page[data-page="materialien"] .dw-mat-path:nth-child(2),
.dw-page[data-page="materialien"] .dw-mat-path:nth-child(3) { grid-column: span 7; }
.dw-page[data-page="materialien"] .dw-mat-path img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dw-page[data-page="materialien"] .dw-mat-path::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0.05) 10%, rgba(11,18,32,0.88) 100%);
}
.dw-page[data-page="materialien"] .dw-mat-path::after,
.dw-page[data-page="materialien"] .dw-mat-atlas-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.50), transparent);
  transform: translateX(-130%) skewX(-16deg);
}
.dw-page[data-page="materialien"] .dw-mat-path-copy {
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 22px;
  background-color: #101828;
  background-image: linear-gradient(90deg, #101828, rgba(16,24,40,0.84));
}
.dw-page[data-page="materialien"] .dw-mat-path-copy strong {
  color: #FFFFFF;
  font-size: 1.12rem;
}
.dw-page[data-page="materialien"] .dw-mat-path-copy > span {
  max-width: 42ch;
  color: #E4E7EC;
  font-size: 0.88rem;
}
.dw-page[data-page="materialien"] .dw-mat-path:focus-visible,
.dw-page[data-page="materialien"] .dw-mat-atlas-card:focus-visible,
.dw-page[data-page="materialien"] .dw-mat-proof-link:focus-visible {
  outline: 3px solid var(--dw-accent);
  outline-offset: 4px;
}

/* Maschinenrahmen und Zonen. Die Farbe wird immer von Icon, Namen und
   Urteil begleitet; sie traegt die Bedeutung nie allein. */
.dw-page[data-page="materialien"] .dw-mat-envelope-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.86fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 24px;
}
.dw-page[data-page="materialien"] .dw-mat-envelope-head > div > p,
.dw-page[data-page="materialien"] .dw-mat-proof-copy > p {
  max-width: 68ch;
}
.dw-page[data-page="materialien"] .dw-mat-machine {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dw-line);
  border-bottom: 1px solid var(--dw-line);
}
.dw-page[data-page="materialien"] .dw-mat-machine div { padding: 14px 16px; }
.dw-page[data-page="materialien"] .dw-mat-machine div + div { border-left: 1px solid var(--dw-line); }
.dw-page[data-page="materialien"] .dw-mat-machine dt {
  color: var(--dw-muted);
  font-size: 0.76rem;
}
.dw-page[data-page="materialien"] .dw-mat-machine dd {
  margin: 5px 0 0;
  color: var(--dw-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dw-page[data-page="materialien"] .dw-mat-zones { max-width: 1060px; }
.dw-page[data-page="materialien"] .dw-mat-zone {
  --dw-mat-zone: var(--dw-mat-green);
  --dw-mat-zone-soft: var(--dw-mat-green-soft);
  padding: 34px 28px 44px;
  background-color: var(--dw-mat-zone-soft);
  background-image: linear-gradient(90deg, var(--dw-mat-zone-soft), rgba(255,255,255,0.82) 76%);
}
.dw-page[data-page="materialien"] .dw-mat-zone + .dw-mat-zone { margin-top: 36px; }
.dw-page[data-page="materialien"] .dw-mat-zone--yellow {
  --dw-mat-zone: var(--dw-mat-yellow);
  --dw-mat-zone-soft: var(--dw-mat-yellow-soft);
}
.dw-page[data-page="materialien"] .dw-mat-zone--red {
  --dw-mat-zone: var(--dw-mat-red);
  --dw-mat-zone-soft: var(--dw-mat-red-soft);
}
.dw-page[data-page="materialien"] .dw-mat-zone-head {
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.dw-page[data-page="materialien"] .dw-mat-zone-head svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--dw-mat-zone);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dw-page[data-page="materialien"] .dw-mat-zone-head h3 {
  margin: 0 0 3px;
  font-size: 1.28rem;
}
.dw-page[data-page="materialien"] .dw-mat-zone-name {
  margin: 0;
  color: var(--dw-mat-zone);
  font-size: 0.84rem;
  font-weight: 600;
}
.dw-page[data-page="materialien"] .dw-mat-zone-limit {
  margin: 0;
  padding: 7px 10px;
  border-radius: 7px;
  background: var(--dw-mat-zone-soft);
  color: var(--dw-mat-zone);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: right;
}
.dw-page[data-page="materialien"] .dw-mat-meter {
  width: 100%;
  height: 6px;
  margin: 0 0 20px;
  overflow: hidden;
  background: rgba(11,18,32,0.09);
}
.dw-page[data-page="materialien"] .dw-mat-meter span {
  display: block;
  width: 68%;
  height: 100%;
  background: var(--dw-mat-zone);
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.dw-page[data-page="materialien"] .dw-mat-zone--yellow .dw-mat-meter span { width: 88%; }
.dw-page[data-page="materialien"] .dw-mat-zone--red .dw-mat-meter span { width: 100%; }
@keyframes dw-mat-heat {
  from { transform: scaleX(0); opacity: 0.45; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes dw-mat-proof-rise {
  from { transform: scaleY(0); opacity: 0.45; }
  to { transform: scaleY(1); opacity: 1; }
}
.dw-page[data-page="materialien"] .dw-mat-zone > p {
  max-width: 64ch;
  color: var(--dw-muted);
}
.dw-page[data-page="materialien"] .dw-mat-zone-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--dw-mat-zone-soft);
  color: var(--dw-ink) !important;
}
.dw-page[data-page="materialien"] .dw-mat-table-wrap { max-width: 100%; }
.dw-page[data-page="materialien"] .dw-mat-table {
  font-variant-numeric: tabular-nums;
}
.dw-page[data-page="materialien"] .dw-mat-table tbody tr {
  transition: background-color 0.15s ease;
}
.dw-page[data-page="materialien"] .dw-mat-table tbody tr:focus-within {
  background: rgba(21,94,239,0.07);
}

/* Effektatlas: asymmetrische Foto-Flaeche statt einer sechsten Tabelle. */
.dw-page[data-page="materialien"] .dw-mat-atlas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 112px;
  gap: 14px;
  max-width: 1060px;
  margin: 30px 0;
}
.dw-page[data-page="materialien"] .dw-mat-atlas-card {
  position: relative;
  display: flex;
  grid-column: span 4;
  grid-row: span 2;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  color: #FFFFFF;
  text-decoration: none;
  isolation: isolate;
}
.dw-page[data-page="materialien"] .dw-mat-atlas-card--wide { grid-column: span 8; }
.dw-page[data-page="materialien"] .dw-mat-atlas-card--tall { grid-row: span 3; }
.dw-page[data-page="materialien"] .dw-mat-atlas-card img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dw-page[data-page="materialien"] .dw-mat-atlas-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,0.02) 8%, rgba(11,18,32,0.91) 100%);
}
.dw-page[data-page="materialien"] .dw-mat-atlas-copy {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 18px;
  background-color: #101828;
  background-image: linear-gradient(90deg, #101828, rgba(16,24,40,0.84));
}
.dw-page[data-page="materialien"] .dw-mat-atlas-copy strong {
  color: #FFFFFF;
  font-size: 1.08rem;
}
.dw-page[data-page="materialien"] .dw-mat-atlas-copy > span:not(.dw-mat-atlas-data) {
  color: #EAECF0;
  font-size: 0.84rem;
}
.dw-page[data-page="materialien"] .dw-mat-atlas-data {
  margin-top: 5px;
  color: #FFFFFF;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.dw-page[data-page="materialien"] .dw-mat-effects > .dw-container > p,
.dw-page[data-page="materialien"] .dw-mat-toolchange p,
.dw-page[data-page="materialien"] .dw-mat-lab > .dw-container > p,
.dw-page[data-page="materialien"] .dw-mat-lab .dw-callout p {
  max-width: 64ch;
}
.dw-page[data-page="materialien"] .dw-mat-toolchange { margin-top: 28px; }
.dw-page[data-page="materialien"] .dw-mat-credits {
  max-width: 760px;
  margin-top: 24px;
  border-top: 1px solid var(--dw-line);
  border-bottom: 1px solid var(--dw-line);
  padding: 12px 0;
}
.dw-page[data-page="materialien"] .dw-mat-credits summary {
  cursor: pointer;
  color: var(--dw-muted);
  font-size: 0.84rem;
}
.dw-page[data-page="materialien"] .dw-mat-credits p {
  max-width: 64ch;
  margin: 12px 0 0;
  color: var(--dw-muted);
  font-size: 0.8rem;
}

/* Laboraufbau: zwei ruhige Arbeitsbereiche ohne Karten-in-Karten. */
.dw-page[data-page="materialien"] .dw-mat-setup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  max-width: 860px;
  margin: 28px 0 34px;
  border-top: 1px solid var(--dw-line);
  border-bottom: 1px solid var(--dw-line);
}
.dw-page[data-page="materialien"] .dw-mat-setup section { padding: 24px 28px 24px 0; }
.dw-page[data-page="materialien"] .dw-mat-setup section + section {
  padding-left: 28px;
  border-left: 1px solid var(--dw-line);
}
.dw-page[data-page="materialien"] .dw-mat-setup h3 { margin-top: 0; }

/* Schluss: der einzige nummerierte Block ist ein echter Prozess. */
.dw-page[data-page="materialien"] .dw-mat-proof {
  background: var(--dw-graphite);
  color: #FFFFFF;
  border-bottom: none;
}
.dw-page[data-page="materialien"] .dw-mat-proof > .dw-container {
  display: grid;
  grid-template-columns: minmax(0,0.8fr) minmax(480px,1.2fr);
  gap: 64px;
  align-items: center;
}
.dw-page[data-page="materialien"] .dw-mat-proof h2 { color: #FFFFFF; }
.dw-page[data-page="materialien"] .dw-mat-proof p { color: #C7CDD8; }
.dw-page[data-page="materialien"] a.dw-mat-proof-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #FFFFFF;
  color: var(--dw-graphite);
  font-weight: 600;
  text-decoration: none;
}
.dw-page[data-page="materialien"] .dw-mat-proof-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dw-page[data-page="materialien"] .dw-mat-proof-steps::before,
.dw-page[data-page="materialien"] .dw-mat-proof-steps::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 17px;
  right: 17px;
  height: 2px;
  transform-origin: 0 50%;
}
.dw-page[data-page="materialien"] .dw-mat-proof-steps::before { background: #475467; }
.dw-page[data-page="materialien"] .dw-mat-proof-steps::after {
  background: #EF9C15;
  transform: scaleX(1);
}
.dw-page[data-page="materialien"] .dw-mat-proof-steps li {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  color: #FFFFFF;
}
.dw-page[data-page="materialien"] .dw-mat-proof-steps li > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EF9C15;
  color: var(--dw-graphite);
  font-weight: 700;
}
.dw-page[data-page="materialien"] .dw-mat-proof-steps small {
  color: #AEB6C5;
  font-size: 0.78rem;
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .dw-page[data-page="materialien"] .dw-mat-table tbody tr:hover { background: rgba(21,94,239,0.05); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dw-page[data-page="materialien"] .dw-mat-path:hover img,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card:hover img { transform: scale(1.035); }
}

@media (prefers-reduced-motion: no-preference) {
  .dw-page[data-page="materialien"] .dw-mat-path img,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card img {
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), filter 0.3s ease;
  }
  .dw-page[data-page="materialien"] .dw-mat-samples::after {
    animation: dw-mat-scan 1.1s cubic-bezier(0.16,1,0.3,1) 0.35s both;
  }
  .dw-page[data-page="materialien"] .dw-mat-path::after,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card::after {
    transition: transform 0.72s cubic-bezier(0.16,1,0.3,1);
  }
  .dw-page[data-page="materialien"] .dw-mat-path:hover::after,
  .dw-page[data-page="materialien"] .dw-mat-path:focus-visible::after,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card:hover::after,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card:focus-visible::after {
    transform: translateX(470%) skewX(-16deg);
  }
  @supports (animation-timeline: view()) {
    .dw-page[data-page="materialien"] .dw-mat-meter span,
    .dw-page[data-page="materialien"] .dw-mat-proof-steps::after {
      animation: dw-mat-heat linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 58%;
    }
  }
}

@media (max-width: 960px) {
  .dw-page[data-page="materialien"] .dw-mat-index > .dw-container,
  .dw-page[data-page="materialien"] .dw-mat-proof > .dw-container {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .dw-page[data-page="materialien"] .dw-mat-samples { max-width: 720px; }
  .dw-page[data-page="materialien"] .dw-mat-envelope-head {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .dw-page[data-page="materialien"] .dw-mat-proof-steps { max-width: 680px; }
}

@media (max-width: 700px) {
  .dw-page[data-page="materialien"] .dw-mat-paths { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dw-page[data-page="materialien"] .dw-mat-path:nth-child(n) { grid-column: auto; min-height: 174px; }
  .dw-page[data-page="materialien"] .dw-mat-zone-head {
    grid-template-columns: 44px minmax(0,1fr);
  }
  .dw-page[data-page="materialien"] .dw-mat-zone-limit {
    grid-column: 1 / -1;
    text-align: left;
  }
  .dw-page[data-page="materialien"] .dw-mat-atlas {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: 210px;
  }
  .dw-page[data-page="materialien"] .dw-mat-atlas-card,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card--wide,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card--tall {
    grid-column: auto;
    grid-row: auto;
  }
  .dw-page[data-page="materialien"] .dw-mat-setup { grid-template-columns: 1fr; }
  .dw-page[data-page="materialien"] .dw-mat-setup section { padding: 22px 0; }
  .dw-page[data-page="materialien"] .dw-mat-setup section + section {
    padding-left: 0;
    border-top: 1px solid var(--dw-line);
    border-left: none;
  }
}

@media (max-width: 640px) {
  .dw-page[data-page="materialien"] .dw-mat-status { display: block; }
  .dw-page[data-page="materialien"] .dw-mat-status strong { display: block; margin-bottom: 3px; }
  .dw-page[data-page="materialien"] .dw-mat-samples {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: 130px 130px auto;
  }
  .dw-page[data-page="materialien"] .dw-mat-sample--pla { grid-column: 1; grid-row: 1; }
  .dw-page[data-page="materialien"] .dw-mat-sample--cf { grid-column: 2; grid-row: 1; }
  .dw-page[data-page="materialien"] .dw-mat-sample--wood { grid-column: 1; grid-row: 2; }
  .dw-page[data-page="materialien"] .dw-mat-sample--glow { grid-column: 2; grid-row: 2; }
  .dw-page[data-page="materialien"] .dw-mat-machine { grid-template-columns: 1fr; }
  .dw-page[data-page="materialien"] .dw-mat-machine div { padding: 12px 0; }
  .dw-page[data-page="materialien"] .dw-mat-machine div + div { border-top: 1px solid var(--dw-line); border-left: none; }
  .dw-page[data-page="materialien"] .dw-mat-paths,
  .dw-page[data-page="materialien"] .dw-mat-atlas { grid-template-columns: 1fr; }
  .dw-page[data-page="materialien"] .dw-mat-path:nth-child(n),
  .dw-page[data-page="materialien"] .dw-mat-atlas-card,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card--wide,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card--tall { min-height: 210px; }

  /* Dieselbe semantische Tabelle wird auf dem Handy zur beschrifteten
     Kartenliste. Keine zweite Datenquelle, kein horizontales Wischen. */
  .dw-page[data-page="materialien"] .dw-mat-table-wrap { overflow: visible; }
  .dw-page[data-page="materialien"] .dw-mat-table,
  .dw-page[data-page="materialien"] .dw-mat-table tbody,
  .dw-page[data-page="materialien"] .dw-mat-table tr,
  .dw-page[data-page="materialien"] .dw-mat-table td { display: block; width: 100%; }
  .dw-page[data-page="materialien"] .dw-mat-table { min-width: 0; }
  .dw-page[data-page="materialien"] .dw-mat-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dw-page[data-page="materialien"] .dw-mat-table tr {
    padding: 10px 0;
    border-top: 1px solid var(--dw-line);
  }
  .dw-page[data-page="materialien"] .dw-mat-table tr:last-child { border-bottom: 1px solid var(--dw-line); }
  .dw-page[data-page="materialien"] .dw-mat-table td {
    display: grid;
    grid-template-columns: minmax(92px,0.36fr) minmax(0,1fr);
    gap: 14px;
    padding: 7px 0;
    border: none;
  }
  .dw-page[data-page="materialien"] .dw-mat-table td::before {
    content: attr(data-label);
    color: var(--dw-muted);
    font-size: 0.78rem;
    font-weight: 600;
  }
  .dw-page[data-page="materialien"] .dw-mat-proof-steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .dw-page[data-page="materialien"] .dw-mat-proof-steps::before,
  .dw-page[data-page="materialien"] .dw-mat-proof-steps::after {
    top: 17px;
    bottom: 17px;
    left: 16px;
    right: auto;
    width: 2px;
    height: auto;
    transform-origin: 50% 0;
  }
  .dw-page[data-page="materialien"] .dw-mat-proof-steps::after { transform: scaleY(1); }
  .dw-page[data-page="materialien"] .dw-mat-proof-steps li {
    grid-template-columns: 34px minmax(0,1fr);
    column-gap: 14px;
    align-items: center;
  }
  .dw-page[data-page="materialien"] .dw-mat-proof-steps li > span { grid-row: 1 / 3; }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dw-page[data-page="materialien"] .dw-mat-proof-steps::after {
      animation-name: dw-mat-proof-rise;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-page[data-page="materialien"] .dw-mat-samples::after,
  .dw-page[data-page="materialien"] .dw-mat-path::after,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card::after { display: none; }
  .dw-page[data-page="materialien"] .dw-mat-meter span,
  .dw-page[data-page="materialien"] .dw-mat-proof-steps::after { animation: none; }
  .dw-page[data-page="materialien"] .dw-mat-path img,
  .dw-page[data-page="materialien"] .dw-mat-atlas-card img {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Hubs mit Foto-Kacheln (2026-09-03, siebzehnte Runde): /projekte/
   tauscht die Strichzeichnungen gegen Renderings und Fotos (/lernen/
   ebenfalls, bis die Strecke am 08.09. der Karten-Liste wich).
   Kachel = .dw-fotokachel (Basis) im vorhandenen Kartenkopf; Ring,
   Schimmer, Lift und Reveal des pj-Blocks bleiben, nur das Karo
   und das SVG fallen weg. Kurzlabel unten nennt Art und Quelle.
   --------------------------------------------------------------- */
.dw-page .dw-pj-grafik.dw-fotokachel {
  background-image: none;
  aspect-ratio: 16 / 10;
}
.dw-page .dw-pj-grafik.dw-fotokachel img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dw-page .dw-pj-grafik.dw-fotokachel figcaption { z-index: 1; }
.dw-page .dw-pj-kladde .dw-pj-grafik.dw-fotokachel { aspect-ratio: 4 / 3; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dw-page .dw-pj-karte:hover .dw-fotokachel img { transform: scale(1.035); }
}
@media (prefers-reduced-motion: no-preference) {
  .dw-page .dw-pj-grafik.dw-fotokachel img { transition: transform 0.45s cubic-bezier(0.16,1,0.3,1); }
}
.dw-page .dw-pj-fahrplan { max-width: 560px; }

/* Bildraster ohne Link (Produktfotos, Bildstrecken): 2 x 2, Kacheln 4:3 */
.dw-bildgitter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 8px 0 22px;
}
.dw-bildgitter .dw-fotokachel { border-radius: 16px; }
.dw-section.dw-prozess .dw-prozess-copy p { max-width: 64ch; }
.dw-section.dw-prozess .dw-prozess-copy .dw-num { margin-bottom: 12px; }
@media (max-width: 640px) {
  .dw-bildgitter { grid-template-columns: 1fr; }
  /* Zeilenkopf (leere Kopfzelle): ganze Breite, fett, kein Label */
  .dw-table--karten td.dw-zeilenkopf { padding-left: 0; font-weight: 600; color: var(--dw-ink); }
  .dw-table--karten td.dw-zeilenkopf::before { content: none; }
}