/* ============================================================================
   Parental Control Wiki — pcw-design.css
   ----------------------------------------------------------------------------
   Design-Token-Vertrag für die fünf parallelen UX-Terminals (d2–d6).
   Dieser Vertrag ist hart: jeder Pull-Request, der eine hier definierte
   semantische Paarung verschlechtert, schlägt im Test fehl.

   Architektur-Anker:
     - quartz/styles/custom.scss erbt die Farbpalette (theme.colors) aus
       quartz.config.yaml; diese Tokens sind die SCHICHT darüber und werden
       von der Inhalts-Chrome (Banner, Brotkrumen, Disclaimer, Sprachwahl)
       UND von den neuen Komponenten der UX-Terminals referenziert.
     - Schrift: System-Stack, keine Drittanbieter. Der Fonts-Plugin bleibt
       deaktiviert (fontOrigin: local, OFL-Fraunces/SourceSans3 sind
       gesondert eingebunden — eigene Verantwortung, hier nicht betroffen).
     - CSP `style-src 'self'` (docker/Caddyfile) verbietet Inline-<style>;
       diese Datei wird per Post-Build-Injektor auf jeder Seite verlinkt.

   Kontrastvertrag (WCAG 2.1 AA, gemessen in tests/test_design_tokens.py):
     hell  : ink 16.6:1 · ink-muted 6.97:1 · accent-ink/accent 5.76:1
             warn-ink/warn 9.28:1 · urgent-ink/urgent 7.99:1 · border/bg 3.44:1
     dunkel: ink 14.8:1 · ink-muted 10.3:1 · accent-ink/accent 6.94:1
             warn-ink/warn 6.97:1 · urgent-ink/urgent 6.90:1 · border/bg 3.90:1

   Wer einen Wert verschlechtert, muss den Kontrasttest zuerst anpassen —
   und zeigen, dass er rot wird. Siehe tests/test_design_tokens.py für die
   Rechnung und für den absichtlichen Negativfall.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   FARBE — Tokens auf :root (heller Modus, Default).
   ---------------------------------------------------------------------------- */
:root {
  /* Textfarben */
  --pcw-ink:        #1c1a16;  /* warmes Tintenschwarz — Lauftext + H1–H6 */
  --pcw-ink-muted:  #5b564d;  /* Sekundärtext, Meta-Zeilen, Bildlegenden */

  /* Flächen */
  --pcw-bg:         #fafaf7;  /* Seitenhintergrund — warmes Off-White */
  --pcw-bg-raised:  #ffffff;  /* Karten, Tabellenköpfe — minimal heller */
  --pcw-border:     #8e8678;  /* 3:1 gegen bg; gilt als UI-Rand, nicht Text */

  /* Akzent (Links, Primärbuttons, aktiver Menüpunkt) */
  --pcw-accent:     #1f6f5c;  /* Viridian — bestehende Sekundärfarbe */
  --pcw-accent-ink: #fafaf7;  /* Text auf Akzentfläche (Button-Beschriftung) */

  /* Hinweis (Review fällig, Prüfstand veraltet, gelbe Karte) */
  --pcw-warn:       #fef3e0;  /* warmer Sand-Hintergrund — kein Rot */
  --pcw-warn-ink:   #5b3a14;  /* dunkles Sienna — bleibt lesbar bei 9.28:1 */

  /* Dringend (Notfall-Callout, rote Karte, sofortige Aktion) */
  --pcw-urgent:     #fce6e3;  /* blasses Terracotta — beruhigt, nicht alarmiert */
  --pcw-urgent-ink: #842016;  /* tiefes Ziegelrot — 7.99:1 gegen urgent */

  /* Fokus-Ring — Viridian, dasselbe wie Akzent. Klar gegen beide BGs. */
  --pcw-focus:      #1f6f5c;
}

/* ----------------------------------------------------------------------------
   DUNKEL — zwei Selektoren, ein Inhalt.
   Begründung der Duplikation: das Quartz-Darkmode-Plugin setzt
   `saved-theme` auf :root nach dem MediaQuery-Event. Wer das OS-Präferenz
   noch nicht verarbeitet hat (kein JS / vor Hydration) braucht die
   @media-Variante; wer den Umschalter betätigt hat, braucht die
   `[saved-theme]`-Variante. Beide müssen identisch sein; der Test liest die
   `[saved-theme]`-Variante und ignoriert die @media-Variante.
   ---------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([saved-theme="light"]) {
    --pcw-ink:        #ece8df;
    --pcw-ink-muted:  #c9c3b6;
    --pcw-bg:         #161618;
    --pcw-bg-raised:  #1f1f21;
    --pcw-border:     #7a746a;
    --pcw-accent:     #69b39c;
    --pcw-accent-ink: #0e1f1a;
    --pcw-warn:       #4a3a26;
    --pcw-warn-ink:   #f0c896;
    --pcw-urgent:     #4a2422;
    --pcw-urgent-ink: #f0a89f;
    --pcw-focus:      #69b39c;
  }
}

:root[saved-theme="dark"] {
  --pcw-ink:        #ece8df;
  --pcw-ink-muted:  #c9c3b6;
  --pcw-bg:         #161618;
  --pcw-bg-raised:  #1f1f21;
  --pcw-border:     #7a746a;
  --pcw-accent:     #69b39c;
  --pcw-accent-ink: #0e1f1a;
  --pcw-warn:       #4a3a26;
  --pcw-warn-ink:   #f0c896;
  --pcw-urgent:     #4a2422;
  --pcw-urgent-ink: #f0a89f;
  --pcw-focus:      #69b39c;
}

/* ----------------------------------------------------------------------------
   ABSTAND — 4-px-Raster, skaliert mit Browser-Schrift (rem).
   Konsumenten: .pcw-stack, .pcw-cluster, .pcw-grid, Kartenabstände.
   ---------------------------------------------------------------------------- */
:root {
  --pcw-space-1: 0.25rem;  /*  4 px — Inline-Mikroabstand */
  --pcw-space-2: 0.5rem;   /*  8 px — Tabelle Zeile, Badge-Innen */
  --pcw-space-3: 0.75rem;  /* 12 px — Listenpunkt, kleiner Kartenrand */
  --pcw-space-4: 1rem;     /* 16 px — Karten-Innenabstand (Standard) */
  --pcw-space-5: 1.5rem;   /* 24 px — Sektion-zu-Sektion */
  --pcw-space-6: 2rem;     /* 32 px — Hub-Header zu Inhalt */
}

/* ----------------------------------------------------------------------------
   SCHRIFT — mobile-first Skala. Source Sans 3 ist bereits in custom.scss
   über @font-face eingebunden; die Schrift hier ist als Familien-Fallback
   gesetzt, damit die Tokenschlüssel auch ohne OFL-Faces funktionieren.
   ---------------------------------------------------------------------------- */
:root {
  --pcw-text-sm:   0.875rem;  /* 14 px — Meta, Bildlegenden */
  --pcw-text-base: 1rem;      /* 16 px — Lauftext */
  --pcw-text-lg:   1.125rem;  /* 18 px — Card-Headline, Leitfragen */
  --pcw-text-xl:   1.25rem;   /* 20 px — H3 */
  --pcw-text-2xl:  1.5rem;    /* 24 px — H2 */
  --pcw-text-3xl:  1.875rem;  /* 30 px — H1 (Hero, Hub-Überschrift) */

  --pcw-leading-tight:  1.2;  /* Überschriften, Karten-Titel */
  --pcw-leading-normal: 1.5;  /* Lauftext, Callouts */
}

/* ----------------------------------------------------------------------------
   RADIEN + LESEBREITE.
   ---------------------------------------------------------------------------- */
:root {
  --pcw-radius-sm: 4px;   /* Badges, Inputs */
  --pcw-radius-md: 8px;   /* Karten, Callouts, Buttons */
  --pcw-measure:   68ch;  /* Lesespalte — identisch zur article p-Regel */
}

/* ============================================================================
   BASISKLASSEN — semantisch, mobile-first, ohne Framework.
   Andere UX-Terminals (d2 Navigation, d3 Homepage, d4 Templates, d5 Media,
   d6 Acceptance) bauen auf diesen Klassen auf. Neue Klassen gehören in
   einen components-spezifischen Block (z.B. quartz/styles/d2-*.css), NICHT
   hier — diese Datei ist der Vertrag für alle.

   Auswahl der Bausteine, begründet:
     .pcw-card     — Hub-Kachel, Trick-Karte, Empfehlung; gemeinsame Anatomie
                     (Fläche + Rand + Schatten + Innenabstand).
     .pcw-grid     — Thumbnail-Raster (Tricks nach Kategorie, Quellen-Grid).
     .pcw-stack    — vertikale Folge mit gleichem Abstand; das ist
                     "Flexbox-column mit gap" — und genau das, was die
                     Mehrzahl der Inhaltsblöcke braucht.
     .pcw-cluster  — horizontale Gruppe, die bei Platzmangel umbricht
                     (Tag-Liste, Meta-Zeile, Button-Reihe).
     .pcw-callout  — farbiger Hinweisblock (info / warn / urgent).
     .pcw-badge    — kleines, abgerundetes Label (OS-Version, Plattform).
     .pcw-btn      — Schaltfläche (-primary / -secondary).
     .pcw-meta     — Sekundärtext-Zeile (Prüfstand, Stand, Aktualisiert).
   ========================================================================== */

/* ---- CARD — Fläche + Rand + Schatten + Innenabstand ------------------- */
.pcw-card {
  display: block;
  background: var(--pcw-bg-raised);
  color: var(--pcw-ink);
  border: 1px solid var(--pcw-border);
  border-radius: var(--pcw-radius-md);
  padding: var(--pcw-space-4);
  /* Schatten bewusst minimal: das Wiki liest sich als Buch, nicht als
     App-Karte. Sobald ein Terminal Hover-State will, hebt :hover den
     Kontrast statt den Schatten. */
  box-shadow: 0 1px 0 color-mix(in srgb, var(--pcw-ink) 6%, transparent);
}

.pcw-card > :first-child { margin-top: 0; }
.pcw-card > :last-child  { margin-bottom: 0; }

/* ---- GRID — gleichmäßiges Raster, Mobile zuerst (eine Spalte) -------- */
.pcw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pcw-space-4);
}

/* Tablet: zwei Spalten; Desktop: drei. Wer mehr braucht, schreibt eine
   eigene Variante — dieses Raster ist der Standard für Trick-Karten,
   Quellen-Karten und Age-Band-Karten. */
@media (min-width: 720px) {
  .pcw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pcw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- STACK — vertikale Folge mit konsistentem Abstand ----------------- */
.pcw-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pcw-space-4);
}
.pcw-stack > * { margin: 0; }

/* Enge Variante für Listeneinträge, Meta-Zeilen und Inhaltsverzeichnisse. */
.pcw-stack--tight { gap: var(--pcw-space-2); }

/* ---- CLUSTER — horizontale Gruppe, bricht um --------------------------- */
.pcw-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pcw-space-3);
}
.pcw-cluster > * { margin: 0; }

/* ---- CALLOUT — farbiger Hinweisblock (links Regel + Tönung) ------------
   Drei Töne: info (ruhig), warn (Prüfung fällig), urgent (sofortige
   Aktion). Anatomie überall gleich: linksseitige Regel in der Akzentfarbe,
   Tönung des Hintergrunds, Body in der Standardtextfarbe. Das Auge lernt
   die Form einmal und liest die Farbe als den Unterschied. */
.pcw-callout {
  display: block;
  margin: var(--pcw-space-4) 0;
  padding: var(--pcw-space-3) var(--pcw-space-4);
  border-left: 4px solid currentColor;
  border-radius: 0 var(--pcw-radius-sm) var(--pcw-radius-sm) 0;
  background: var(--pcw-bg);
  color: var(--pcw-ink);
  font-size: var(--pcw-text-base);
  line-height: var(--pcw-leading-normal);
}

.pcw-callout > :first-child { margin-top: 0; }
.pcw-callout > :last-child  { margin-bottom: 0; }

.pcw-callout--info {
  color: var(--pcw-accent);
  background: color-mix(in srgb, var(--pcw-accent) 8%, var(--pcw-bg));
}
.pcw-callout--info .pcw-callout-title {
  color: var(--pcw-accent);
  font-weight: 600;
}

.pcw-callout--warn {
  color: var(--pcw-warn-ink);
  background: var(--pcw-warn);
}
.pcw-callout--warn .pcw-callout-title {
  color: var(--pcw-warn-ink);
  font-weight: 600;
}

.pcw-callout--urgent {
  color: var(--pcw-urgent-ink);
  background: var(--pcw-urgent);
  /* Notfall verdient etwas mehr Atem und eine dickere linke Regel.
     Das ist der einzige Callout-Typ, der lauter sein darf als die
     Inhaltsprosa drumherum. */
  border-left-width: 5px;
  padding: var(--pcw-space-4);
  font-weight: 500;
}
.pcw-callout--urgent .pcw-callout-title {
  color: var(--pcw-urgent-ink);
  font-family: var(--headerFont, serif);
  font-weight: 600;
  font-size: var(--pcw-text-lg);
  letter-spacing: 0.005em;
}

/* ---- BADGE — kleines abgerundetes Label ------------------------------- */
.pcw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pcw-space-1);
  padding: var(--pcw-space-1) var(--pcw-space-2);
  border-radius: var(--pcw-radius-sm);
  background: color-mix(in srgb, var(--pcw-accent) 12%, var(--pcw-bg));
  color: var(--pcw-accent);
  font-size: var(--pcw-text-sm);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid color-mix(in srgb, var(--pcw-accent) 30%, transparent);
  white-space: nowrap;
}

/* Auf dunklem Grund liest sich ein Badge besser mit invertierter Tönung. */
.pcw-badge--ink {
  background: color-mix(in srgb, var(--pcw-ink) 8%, var(--pcw-bg));
  color: var(--pcw-ink-muted);
  border-color: color-mix(in srgb, var(--pcw-ink) 20%, transparent);
}

/* ---- BTN — Schaltfläche ----------------------------------------------- */
.pcw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pcw-space-2);
  min-height: 44px;          /* iOS HIG / WCAG 2.5.5 Mindest-Tap-Ziel */
  padding: var(--pcw-space-2) var(--pcw-space-4);
  border-radius: var(--pcw-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: var(--pcw-text-base);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
              color 120ms ease;
}

/* Primär: volle Akzentfläche, Text in Akzent-Ink. */
.pcw-btn--primary {
  background: var(--pcw-accent);
  color: var(--pcw-accent-ink);
  border-color: var(--pcw-accent);
}
.pcw-btn--primary:hover {
  background: color-mix(in srgb, var(--pcw-accent) 88%, var(--pcw-ink));
  border-color: color-mix(in srgb, var(--pcw-accent) 88%, var(--pcw-ink));
}

/* Sekundär: transparente Fläche, Rand in Akzent, Text in Akzent. */
.pcw-btn--secondary {
  background: transparent;
  color: var(--pcw-accent);
  border-color: var(--pcw-accent);
}
.pcw-btn--secondary:hover {
  background: color-mix(in srgb, var(--pcw-accent) 10%, var(--pcw-bg));
}

/* Fokus-Ring auf allen Buttons — Pflicht, kein Dekor. */
.pcw-btn:focus-visible {
  outline: 2px solid var(--pcw-focus);
  outline-offset: 2px;
}

/* ---- META — Sekundärtext-Zeile ---------------------------------------- */
.pcw-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pcw-space-2);
  margin: 0;
  padding: 0;
  font-size: var(--pcw-text-sm);
  line-height: var(--pcw-leading-normal);
  color: var(--pcw-ink-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.pcw-meta > * { margin: 0; }

/* Trenner zwischen Meta-Einträgen — mono, gedämpft. */
.pcw-meta > * + *::before {
  content: "·";
  margin-right: var(--pcw-space-2);
  color: var(--pcw-ink-muted);
  opacity: 0.6;
}

/* ============================================================================
   REDUZIERTE BEWEGUNG — gilt für alle hier definierten Klassen.
   Wer eine Übergangsanimation ergänzt, muss sie ebenfalls respektieren.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .pcw-btn {
    transition: none;
  }
}

/* ============================================================================
   ASK — Such-ähnliche Eingabe mit Antwort aus dem Wiki (ADR-0014).

   Eigentum: AI3 (wave2/ai3-integration). Die UI ist statischer Markup,
   das Verhalten liegt in quartz/static/pcw-ask.js. Vier Zustaende
   (idle, loading, success, unavailable) sind reine Status-Attr[ibute]
   am Wurzelelement; CSS reagiert auf data-pcw-ask-status.

   Zwei Design-Prinzipien:
     1. Sieht aus wie eine Suche, nicht wie ein Chatbot. Ein Eingabefeld,
        eine Schaltflaeche, eine Antwort darunter. Kein Message-Verlauf,
        kein Avatar, keine Animation.
     2. Der "unavailable"-Zustand ist ruhig, nicht rot. Wenn der Q&A-Dienst
        ausfaellt, sieht die Seite nicht kaputt aus — sie sieht aus wie
        eine Seite, die gerade keine Antwort hat. Verlasslich, still.

   Token-Vertrag: alle Groessen, Farben, Radien stammen aus den oben
   definierten --pcw-*-Tokens. Keine neuen Werte. Tap-Ziel 44px ist
   WCAG 2.5.5; siehe quartz/static/pcw-design.css (F2-Injektor), der
   das gleichermassen fuer alle interaktiven Elemente einstellt.
   ========================================================================== */

.pcw-ask {
  /* Container: card-Optik, etwas Atem nach unten und oben. */
  display: block;
  margin: var(--pcw-space-6, 2rem) 0;
  padding: var(--pcw-space-4, 1rem);
  background: var(--pcw-bg-raised, #ffffff);
  color: var(--pcw-ink, #1c1a16);
  border: 1px solid var(--pcw-border, #8e8678);
  border-radius: var(--pcw-radius-md, 8px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--pcw-ink) 6%, transparent);
}

.pcw-ask > :first-child { margin-top: 0; }
.pcw-ask > :last-child  { margin-bottom: 0; }

/* Heading-equivalent: SPAN, kein H-Element. Begruendung in ADR-0014: ein
   <h2> vor <article> wuerde die Heading-Hierarchie der Seite brechen
   (test_accessibility.check_heading_hierarchy). Die aria-Labelledby-
   Verbindung uebernimmt die Rolle. */
.pcw-ask-heading {
  display: block;
  margin: 0 0 var(--pcw-space-2, 0.5rem) 0;
  font-family: var(--headerFont, serif);
  font-size: var(--pcw-text-xl, 1.25rem);
  font-weight: 600;
  color: var(--pcw-ink, #1c1a16);
  line-height: var(--pcw-leading-tight, 1.2);
}

.pcw-ask-lede {
  margin: 0 0 var(--pcw-space-4, 1rem) 0;
  color: var(--pcw-ink-muted, #5b564d);
  font-size: var(--pcw-text-sm, 0.875rem);
  line-height: var(--pcw-leading-normal, 1.5);
}

.pcw-ask-form {
  margin: 0;
}
.pcw-ask-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcw-space-2, 0.5rem);
  align-items: stretch;
}

.pcw-ask-input {
  flex: 1 1 14rem;
  min-height: 44px;
  padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 0.75rem);
  border: 1px solid var(--pcw-border, #8e8678);
  border-radius: var(--pcw-radius-sm, 4px);
  background: var(--pcw-bg, #fafaf7);
  color: var(--pcw-ink, #1c1a16);
  font: inherit;
  font-size: var(--pcw-text-base, 1rem);
  line-height: 1.4;
  box-sizing: border-box;
}
.pcw-ask-input:focus-visible {
  outline: 2px solid var(--pcw-focus, #1f6f5c);
  outline-offset: 2px;
  border-color: var(--pcw-accent, #1f6f5c);
}
.pcw-ask-input::placeholder {
  color: var(--pcw-ink-muted, #5b564d);
  opacity: 0.7;
}

.pcw-ask-submit {
  /* Erbt vom .pcw-btn--primary in seiner Anatomie; die Komposition
     vermeidet doppelte Wert-Definition. min-height: 44px wird ueber
     .pcw-btn sichergestellt. */
  flex: 0 0 auto;
}

.pcw-ask-privacy {
  margin: var(--pcw-space-3, 0.75rem) 0 0 0;
  color: var(--pcw-ink-muted, #5b564d);
  font-size: var(--pcw-text-sm, 0.875rem);
  line-height: var(--pcw-leading-normal, 1.5);
}

/* Statusbereich (role="status", aria-live="polite") — eine Zeile, kein
   rotes Feld. Erscheint unter dem Formular, nicht im Eingabefeld. */
.pcw-ask-status {
  margin: var(--pcw-space-3, 0.75rem) 0 0 0;
  padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 0.75rem);
  border-left: 3px solid var(--pcw-border, #8e8678);
  border-radius: 0 var(--pcw-radius-sm, 4px) var(--pcw-radius-sm, 4px) 0;
  background: color-mix(in srgb, var(--pcw-ink) 4%, var(--pcw-bg));
  color: var(--pcw-ink-muted, #5b564d);
  font-size: var(--pcw-text-sm, 0.875rem);
  line-height: var(--pcw-leading-normal, 1.5);
}
.pcw-ask-status[data-pcw-ask-status="loading"] {
  border-left-color: var(--pcw-accent, #1f6f5c);
  color: var(--pcw-ink, #1c1a16);
}
.pcw-ask-status[data-pcw-ask-status="success"] {
  border-left-color: var(--pcw-accent, #1f6f5c);
  color: var(--pcw-ink, #1c1a16);
}
.pcw-ask-status[data-pcw-ask-status="unavailable"] {
  /* Bewusst KEIN Rot. Die Site ist nicht kaputt; der Dienst ist es.
     Visuell unterscheidbar von "idle" durch die linke Regel, aber
     in der gleichen Familie. */
  border-left-color: var(--pcw-ink-muted, #5b564d);
  background: var(--pcw-bg, #fafaf7);
  color: var(--pcw-ink-muted, #5b564d);
}
.pcw-ask-status[data-pcw-ask-status="error"] {
  border-left-color: var(--pcw-warn-ink, #5b3a14);
  background: var(--pcw-warn, #fef3e0);
  color: var(--pcw-warn-ink, #5b3a14);
}
.pcw-ask-status[data-pcw-ask-status="no_results"] {
  border-left-color: var(--pcw-warn-ink, #5b3a14);
  background: var(--pcw-warn, #fef3e0);
  color: var(--pcw-warn-ink, #5b3a14);
}

.pcw-ask-status[hidden] {
  display: none;
}

/* Ergebnisbereich — separate Karte unter dem Formular. */
.pcw-ask-result {
  margin: var(--pcw-space-3, 0.75rem) 0 0 0;
  padding: var(--pcw-space-3, 0.75rem) var(--pcw-space-4, 1rem);
  border: 1px solid var(--pcw-border, #8e8678);
  border-radius: var(--pcw-radius-md, 8px);
  background: var(--pcw-bg, #fafaf7);
  color: var(--pcw-ink, #1c1a16);
  font-size: var(--pcw-text-base, 1rem);
  line-height: var(--pcw-leading-normal, 1.5);
}
.pcw-ask-result[hidden] {
  display: none;
}
.pcw-ask-result-heading {
  margin: 0 0 var(--pcw-space-2, 0.5rem) 0;
  font-size: var(--pcw-text-base, 1rem);
  font-weight: 600;
  color: var(--pcw-ink, #1c1a16);
}
.pcw-ask-result-body {
  margin: 0 0 var(--pcw-space-3, 0.75rem) 0;
  /* Antwort kann Links enthalten; normaler Browser-Default. */
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.pcw-ask-result-body a {
  color: var(--pcw-accent, #1f6f5c);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pcw-ask-result-sources {
  margin: 0 0 var(--pcw-space-3, 0.75rem) 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcw-space-1, 0.25rem) var(--pcw-space-3, 0.75rem);
  font-size: var(--pcw-text-sm, 0.875rem);
  color: var(--pcw-ink-muted, #5b564d);
}
.pcw-ask-result-sources li::before {
  content: "·";
  margin-right: var(--pcw-space-2, 0.5rem);
  color: var(--pcw-ink-muted, #5b564d);
  opacity: 0.6;
}
.pcw-ask-result-sources li:first-child::before {
  content: "";
  margin: 0;
}
.pcw-ask-result-disclaimer {
  margin: var(--pcw-space-3, 0.75rem) 0 0 0;
  padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 0.75rem);
  border-left: 3px solid var(--pcw-warn-ink, #5b3a14);
  background: var(--pcw-warn, #fef3e0);
  color: var(--pcw-warn-ink, #5b3a14);
  font-size: var(--pcw-text-sm, 0.875rem);
  border-radius: 0 var(--pcw-radius-sm, 4px) var(--pcw-radius-sm, 4px) 0;
}

/* Submit-Button im Lade-Zustand: Optik aendert sich, aber Position bleibt. */
.pcw-ask[data-pcw-ask-status="loading"] .pcw-ask-submit {
  cursor: progress;
  opacity: 0.7;
}
.pcw-ask[data-pcw-ask-status="loading"] .pcw-ask-input {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  /* Keine Animation hier; trotzdem explizit, falls spaeter motion
     ergaenzt wird. */
  .pcw-ask-submit,
  .pcw-ask-input {
    transition: none;
  }
}
}