/* ===================================================================
   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).
   Seit 2026-09-24 ohne Slogan und mit weniger Innenabstand: Die Leiste
   klebt oben und nahm auf dem Handy rund 190 von 844 px ein (Marke,
   Chip und Links in je einer eigenen Zeile). Ohne Slogan passt der
   Chip neben die Marke, die vier Links in eine Zeile darunter. */
@media (max-width: 480px) {
  .dw-nav .dw-container { padding-top: 8px; padding-bottom: 4px; gap: 2px 12px; }
  .dw-nav-slogan { display: none; }
  .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; }
/* Hochformat-Referenzfotos der Materialseiten (PPS-CF 860 x 1531, Glow,
   Silk, PP, TPU-Familie, PCTG, PVA) fuellten auf dem Desktop einen ganzen
   Bildschirm. Hoehe deckeln, Seitenverhaeltnis behalten: das Bild wird
   schmaler statt beschnitten (seit 2026-09-24). */
.dw-page[data-page^="materialien-"] .dw-figure img {
  width: auto;
  max-width: 100%;
  max-height: 620px;
}

/* ---------------------------------------------------------------
   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: 128px;
  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%;
  /* 2026-09-24: 18px -> 12/16px, die Deckflaeche nahm mehr als die
     Haelfte der Kachel ein und liess vom Foto nur einen Streifen */
  padding: 12px 16px 13px;
  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; }
}

/* pib#5-Kapitel aus gen-pib5-kapitel.js (seit 2026-10-06): mehrere
   Bilder je Schritt -- das erste gross, die weiteren als Zweierreihe
   darunter; Schritte ohne Bild laufen einspaltig. Dazu die Kapitel-
   Kacheln der Leitseite /pib-bauanleitung/. Nur transform/box-shadow
   animiert (layout-transition-Budget 0). */
.dw-page[data-page^="pib-"] .dw-pk-step-body--text { grid-template-columns: minmax(0, 1fr); }
/* Schritte ohne Nummer im Original (z. B. "Empf." im Oberkoerper) */
.dw-page[data-page^="pib-"] .dw-pk-step-num { width: auto; min-width: 42px; padding: 0 9px; }
.dw-page[data-page^="pib-"] .dw-pk-shots { display: grid; gap: 14px; min-width: 0; }
.dw-page[data-page^="pib-"] .dw-pk-shots--mehr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dw-page[data-page^="pib-"] .dw-pk-shots--mehr .dw-pk-shot:first-child { grid-column: 1 / -1; }
.dw-page[data-page^="pib-"] .dw-pk-shots--mehr .dw-pk-shot:not(:first-child) span { font-size: 0.72rem; }
.dw-page[data-page^="pib-"] .dw-pk-step-text pre.dw-code { white-space: pre; margin: 12px 0 16px; }
.dw-page[data-page^="pib-"] .dw-pk-stand {
  margin-top: 18px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--dw-muted);
}
.dw-page[data-page^="pib-"] .dw-pk-kapitel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin: 14px 0 30px;
}
.dw-page[data-page^="pib-"] .dw-pk-kap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--dw-card);
  border: 1px solid var(--dw-line);
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  color: var(--dw-ink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dw-page[data-page^="pib-"] .dw-pk-kap: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-kap-nr {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 9px;
  background: var(--dw-accent);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.82rem;
}
.dw-page[data-page^="pib-"] .dw-pk-kap-titel { font-weight: 700; font-size: 1.08rem; }
.dw-page[data-page^="pib-"] .dw-pk-kap-text { font-size: 0.9rem; line-height: 1.5; color: var(--dw-muted); }
.dw-page[data-page^="pib-"] .dw-pk-kap-meta {
  margin-top: auto;
  padding-top: 6px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.74rem;
  color: var(--dw-muted);
}

/* ---------------------------------------------------------------
   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;
}
/* Startseite: /#woche-<n> ist seit 2026-09-24 das Ziel der Logbuch-Beitraege
   (Weiterleitung in dw-redirects.php), dieselbe Nav-Falle. */
.dw-h-log-entry[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: 220px;
  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: 14px 18px 15px;
  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: 124px;
  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: 12px 16px 13px;
  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; }
}
/* ---------------------------------------------------------------
   Figuren-Fundus (/figuren/, /figuren-intern/), seit 2026-10-02.
   Alles unter .dw-fig entsteht erst durch mu-plugins/dw-figuren/figuren.js;
   ohne JS steht dort nur der noscript-Hinweis. Knoepfe nutzen .dw-el-btn
   (Lehrplan), das Etikett .dw-pj-tag (Projekte). Farbe traegt nie allein:
   jeder Chip sagt in Worten, was er meint.
   --------------------------------------------------------------- */
.dw-fig-zahlen { margin-bottom: 14px; }
.dw-fig-stand, .dw-fig-top { max-width: 760px; color: var(--dw-muted); font-size: 0.95rem; }
.dw-fig-top strong { color: var(--dw-ink); }
.dw-fig-intern-hinweis { margin-top: 28px; color: var(--dw-muted); font-size: 0.95rem; }

.dw-fig-filter {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(5, minmax(0, 1fr));
  gap: 12px 14px;
  margin: 22px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  background: var(--dw-card);
}
.dw-fig-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dw-fig-feld-name {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dw-muted);
}
.dw-fig-input, .dw-fig-select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(11,18,32,0.22);
  border-radius: 10px;
  background: var(--dw-paper);
  color: var(--dw-ink);
  font: inherit;
  font-size: 0.92rem;
}
.dw-fig-input:focus-visible, .dw-fig-select:focus-visible,
.dw-fig .dw-el-btn:focus-visible, .dw-fig-merken:focus-visible,
.dw-fig-alt:focus-visible, .dw-fig-zum-modell:focus-visible, .dw-fig-bild:focus-visible {
  outline: 2px solid var(--dw-accent);
  outline-offset: 2px;
}

.dw-fig-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 18px 0 16px;
  scroll-margin-top: 90px;
}
.dw-fig-status { margin: 0; font-size: 0.92rem; font-variant-numeric: tabular-nums; color: var(--dw-muted); }
.dw-fig-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.dw-fig .dw-el-btn { text-decoration: none; }
.dw-fig .dw-el-btn:disabled { cursor: default; }
.dw-fig-abmelden { color: var(--dw-ink); }

.dw-fig-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dw-fig-karte {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--dw-line);
  border-radius: 16px;
  background: var(--dw-card);
}
.dw-fig-karte[data-art="gratis"] { border-top: 3px solid var(--dw-gruen); }
.dw-page .dw-fig-tag span { background: var(--dw-graphite); }
.dw-page .dw-fig-karte[data-art="gratis"] .dw-fig-tag span { background: var(--dw-gruen); }
.dw-fig-text { flex: 1; padding: 16px 18px 10px; }
.dw-fig-name { margin: 8px 0 4px; font-size: 1.08rem; line-height: 1.3; }
.dw-fig-titel {
  margin: 0 0 6px;
  font-size: 0.86rem;
  color: var(--dw-muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dw-fig-creator { margin: 0 0 10px; font-size: 0.86rem; }
.dw-fig-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dw-fig-chip {
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--dw-paper-alt);
  color: var(--dw-ink);
  font-size: 0.76rem;
  line-height: 1.5;
}
.dw-fig-chip--gratis, .dw-fig-chip--offen { background: var(--dw-gruen-soft); color: var(--dw-gruen); font-weight: 600; }
.dw-fig-chip--privat { background: var(--dw-gelb-soft); color: var(--dw-gelb); }
.dw-fig-chip--leise { color: var(--dw-muted); }

.dw-fig-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--dw-line);
}
.dw-fig-zum-modell { font-weight: 600; font-size: 0.9rem; }
.dw-fig-zum-modell::after { content: " \2197"; }
.dw-fig-alt, .dw-fig-merken {
  padding: 4px 10px;
  border: 1px solid var(--dw-line);
  border-radius: 999px;
  background: var(--dw-paper-alt);
  color: var(--dw-ink);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.dw-fig-alt { margin-top: 10px; border-color: rgba(8,120,91,0.35); color: var(--dw-gruen); font-weight: 600; }
.dw-fig-merken { margin-left: auto; }
.dw-fig-merken[aria-pressed="true"] {
  border-color: rgba(239,156,21,0.6);
  background: #FFF3DC;
  color: #7A4B00;
  font-weight: 600;
}

/* Intern: Vorschaubild oben, 4:3, Klick oeffnet den Dialog */
.dw-fig-bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dw-paper-alt);
}
.dw-page .dw-fig-bild img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.dw-fig-bild--leer {
  display: grid;
  place-items: center;
  color: var(--dw-muted);
  font-size: 0.82rem;
}
.dw-fig-dialog {
  max-width: min(92vw, 1000px);
  padding: 14px;
  border: 0;
  border-radius: 16px;
  background: var(--dw-card);
}
.dw-fig-dialog::backdrop { background: rgba(11,18,32,0.72); }
.dw-fig-dialog img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto 12px; }

.dw-fig-leer { grid-column: 1 / -1; padding: 28px; color: var(--dw-muted); text-align: center; }
.dw-fig-seiten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 22px 0 0;
}
.dw-fig-seiten [aria-current="page"] {
  border-color: rgba(21,94,239,0.55);
  background: rgba(21,94,239,0.10);
  color: var(--dw-accent-dark);
  font-weight: 600;
}
.dw-fig-luecke { padding: 0 4px; color: var(--dw-muted); }

@media (prefers-reduced-motion: no-preference) {
  .dw-fig-karte { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
}
@media (hover: hover) and (pointer: fine) {
  .dw-fig-karte:hover { border-color: rgba(11,18,32,0.22); box-shadow: 0 6px 18px rgba(11,18,32,0.06); }
}
@media (max-width: 980px) {
  .dw-fig-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-fig-feld--breit { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .dw-fig-filter { grid-template-columns: 1fr; padding: 14px; }
  .dw-fig-aktionen { margin-left: 0; }
}