@charset "UTF-8";
/* Du First - Seitenmuster der Welle 2
   Laedt nur dort, wo es gebraucht wird - siehe page.php ($ctx['styles']).
   Tokens, Typografie und Farben kommen aus automation.css. */

/* ---------- 25. Brotkrumen ---------- */
.crumb{padding-top:calc(72px + 1.1rem);padding-bottom:.2rem}
.crumb__list{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .5rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--text-3)}
.crumb__item{display:flex;align-items:center;gap:.5rem}
.crumb__item a{color:var(--text-3);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.crumb__item a:hover{color:var(--text-2);border-bottom-color:var(--border-str)}
.crumb__item [aria-current=page]{color:var(--text-2)}
.crumb__sep{opacity:.5}
/* Ein Kopfbereich direkt nach den Brotkrumen bringt seinen eigenen
   Abstand nach oben nicht noch einmal mit. */
.crumb + .hero{padding-top:clamp(1.2rem,4vh,2.4rem)}

/* ---------- 26. Kopf ohne Diagramm (Unterseiten) ---------- */
.hero--plain{padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.hero--plain .hero__grid{grid-template-columns:minmax(0,1fr);max-width:74ch}
.hero--plain .hero__title{font-size:clamp(2.2rem,5vw,3.6rem)}
.hero--plain .hero__glow{opacity:.1}
/* Nach einem Kopf ohne Diagramm folgt der Inhalt enger: die volle
   Abschnittsluft ist fuer den Wechsel zwischen zwei Themen gedacht,
   nicht fuer den Uebergang von der Ueberschrift zu ihrem eigenen Text. */
.hero--plain + .sec,.hero--plain + .mod{padding-top:clamp(2.2rem,6vh,3.8rem)}
:root[data-theme=light] .hero--plain .hero__glow{opacity:.2}

/* ---------- 30. Modul (wiederverwendbares Geruest) ---------- */
/* Jede kuenftige Anwendungszone benutzt diese drei Teile. Sie sind
   absichtlich neutral: das Modul bringt Struktur mit, kein Aussehen fuer
   einen bestimmten Zweck. */
.mod{padding-block:var(--sec-y);position:relative}
.mod--audit{padding-top:clamp(1rem,3vh,2rem)}
.mod__head{max-width:62ch;margin-bottom:clamp(1.6rem,3.5vw,2.4rem)}
.mod__title{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-top:1rem}
.mod__body{display:grid;gap:clamp(1.5rem,3vw,2.2rem)}
.mod__foot{margin-top:clamp(1.6rem,3.5vw,2.4rem)}

/* ---------- 31. Live-Demo ---------- */
.live-demo__card{display:flex;align-items:center;gap:clamp(.9rem,2.5vw,1.6rem);
  padding:clamp(1.2rem,3vw,1.8rem);border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow);flex-wrap:wrap}
.live-demo__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent-line);flex-shrink:0}
.live-demo__body{flex:1;min-width:11rem}
.live-demo__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3)}
.live-demo__target{margin-top:.3rem;font-size:1.06rem;font-weight:700;letter-spacing:-.02em}
.live-demo__go{flex-shrink:0}