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

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

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

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

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

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

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

/* Grosser Hero (Startseite) / kleiner Hero (Unterseiten) -- hell, mit
   feinem Punktraster (dokumentierte Ausnahme codex-grid-background). */
.dw-hero, .dw-page-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; }

/* 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 {
    position: relative;
    overflow: hidden;
  }
  .dw-hero > .dw-container, .dw-page-hero > .dw-container {
    position: relative;
    z-index: 1;
  }
  .dw-hero::after, .dw-page-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: auto;
}
.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: auto;
}
.dw-page-hero p {
  font-size: 1.04rem;
  color: var(--dw-muted);
  max-width: 58ch;
  margin: 0;
}

.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;
  hyphens: auto;
}
.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);
  gap: 36px 48px;
}
.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-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;
}

/* Rechts-Seiten (Impressum/Datenschutz) -- schlichter als .dw-section */
.dw-legal { padding: 44px 0 24px; }
.dw-legal .dw-container { max-width: 640px; }
.dw-legal h1 {
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: var(--dw-ink);
  overflow-wrap: break-word;
  hyphens: auto;
}
.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;
}
.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; } }

.dw-h-hero {
  background-color: var(--h-paper);
  background-image: radial-gradient(120% 80% at 8% 0%, #E9EFFF 0%, rgba(233,239,255,0) 58%),
    linear-gradient(var(--h-line) 1px, transparent 1px), linear-gradient(90deg, var(--h-line) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  border-bottom: 1px solid var(--h-line);
  padding: 56px 0 0;
}
.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: auto;
}
.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: #98A2B3; }
.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 fuer .dw-h-hero und
   -- etwas kraeftiger, weil dunkler Grund -- die Maschine-Sektion.
   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-hero,
  .dw-page[data-page="home"] .dw-h-machine {
    position: relative;
    overflow: hidden;
  }
  .dw-page[data-page="home"] .dw-h-hero > .dw-h-wrap,
  .dw-page[data-page="home"] .dw-h-machine > .dw-h-wrap {
    position: relative;
    z-index: 1;
  }
  .dw-page[data-page="home"] .dw-h-hero::after,
  .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-hero > .dw-h-wrap,
  .dw-page[data-page="home"] .dw-h-machine > .dw-h-wrap { pointer-events: none; }
  .dw-page[data-page="home"] .dw-h-hero > .dw-h-wrap > *,
  .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); }
.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); }
.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; }

.dw-page[data-page^="pib-"] .dw-pk-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
}
.dw-page[data-page^="pib-"] .dw-pk-hero-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-hero-figure { margin: 0; min-width: 0; }
.dw-page[data-page^="pib-"] .dw-pk-hero-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-hero-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-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .dw-page[data-page^="pib-"] .dw-pk-hero-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; }
}