/* ============================================================================
   agentbooks.de — Katalogseiten (Bibliothek + Buchseite)
   Präfix cat-. Geteilte Seitenkomponente im Sinne der Projektregel: beide
   generierten Seiten tragen dieselbe Struktur, deshalb liegt sie hier und
   nicht doppelt in je einer <seite>.css.

   Abgrenzung zu den Nachbardateien:
   * css/gen/<seite>.css  — vom Konverter (tools/dc2j2.py) aus den
     Inline-Styles der Design-Quelle erzeugt. Nicht von Hand ändern.
   * css/gen/accents.css  — die sechs Welt- und zehn Fachgebietsfarben als
     Custom Property --a. Ebenfalls generiert.
   * hier                 — was das View-Model in catalog/render.py als
     Klassennamen ausgibt (die Stellen, an denen das Design ein dynamisches
     style-Objekt hatte), plus der Responsive-Block.

   Die Werte sind 1:1 aus dem View-Model der Design-Quelle übernommen
   (Bibliothek.dc.html: CHIP_OFF, CHIP_ON, GATE_CARD und die style-Objekte in
   renderVals); --a liefert die jeweilige Welt- oder Fachgebietsfarbe.
   ============================================================================ */

/* ---- Seitenrahmen ---- */
.cat-sticky{position:sticky;top:0;z-index:30}

/* Ausgeblendete Elemente. `!important` ist hier kein Holzhammer, sondern der
   kanonische Einsatz: die Karte aus der Design-Quelle bringt ein eigenes
   `display:grid` mit — gleiche Spezifitaet wie ein blosses [hidden], und da
   gen/library.css nach dieser Datei geladen wird, gewinnt sonst das Grid und
   die Karte bliebe trotz hidden stehen. `hidden` ist semantisch und soll
   immer gewinnen. */
[hidden]{display:none!important}

/* ---- Solider Hauptknopf der Design-Seiten („Buch sichern", „Passendes
   AgentBook finden" …) ----
   Der Konverter erzeugt keine :hover-Regeln, und der Knopf ist ein <a>: ohne
   diese Zeile faerbt das globale a:hover (tokens/base.css) den weissen Text
   blau. Der Hash ist stabil, weil er aus der Deklaration entsteht — dieselbe
   48px-Primaerschaltflaeche in allen Design-Seiten. Aendert sich die
   Deklaration in der Design-Quelle, wandert der Hash und diese Zeile muss mit. */
.g-a0e3d15e:hover{color:#fff}

/* ---- Leermeldung des Filters (von library.js erzeugt) ---- */
.cat-leer{border:1px solid var(--border-default);border-radius:8px;background:var(--surface-card);padding:40px;text-align:center;margin-top:16px}
.cat-leer h3{font-size:22px;line-height:1.28;letter-spacing:-.012em;font-weight:600;margin:0}
.cat-leer p{font-size:15px;line-height:1.6;color:var(--text-secondary);margin:8px 0 0}

/* ---- Filter-Chips ---- */
.cat-chip{min-height:36px;padding:0 12px;border-radius:5px;border:1px solid var(--border-default);background:var(--surface-card);font-family:var(--font-sans);font-size:14px;font-weight:500;color:var(--text-secondary);cursor:pointer}
.cat-chip--on{background:var(--interactive-primary);border-color:var(--interactive-primary);color:#fff}

/* ---- Akzentmarken auf Karten ---- */
.cat-rule{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--a)}
.cat-dot{width:6px;height:6px;border-radius:1px;background:var(--a)}

/* ---- Buchcover auf der Karte ----
   Das Bild kommt über die Custom Property --cover aus css/gen/covers.css
   (eine Regel je Titel, vom Generator geschrieben). Damit bleibt das Markup
   frei von Inline-Styles, und die URL ist relativ zur CSS-Datei — sie gilt
   deshalb von library.html wie von library/<slug>.html aus gleichermaßen.
   Ohne Cover bleibt die getönte Fläche mit dem AB-Kürzel stehen.
   Das Verhältnis kommt als --cover-ratio aus derselben Datei, je Titel am
   ausgelieferten Derivat gemessen. Der Fallback 1024/1448 ist ein Spiegel der
   Leinwand im brand-portal (cover_typeset.py, CANVAS_ASPECT = Wurzel 2, DIN
   1024×1448); er gilt für Kacheln ohne Bild — damit das Raster gleichmäßig
   bleibt — und für Titel, deren JSON noch keine Maße trägt. Ein Formatwechsel
   in der Quelle wandert über covers.css von selbst mit; nachzuziehen wäre hier
   allenfalls die Fallback-Zahl. */
.cat-cover{display:flex;align-items:flex-end;justify-content:center;aspect-ratio:var(--cover-ratio,1024 / 1448);border-radius:3px;padding:8px;border:1px solid var(--border-default);box-sizing:border-box;background:var(--surface-sunken)}
.cat-cover--img{background:var(--surface-card) var(--cover) center/cover no-repeat}
.cat-cover-label{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-tertiary);display:block}
.cat-cover--img .cat-cover-label{display:none}
/* Dasselbe Verhältnis für das große Cover der Buchseite. Die Regel überschreibt
   .g-e3c21921 (gen/book.css, aspect-ratio:2/3) bei gleicher Spezifität, weil
   catalog.css laut partials/head.j2 zuletzt lädt. Am <img> stehen bewusst KEINE
   width/height-Attribute: sie wirken nur als Presentational Hint, jede
   Autor-Deklaration schlägt ihn — und ein height-Attribut ohne height:auto wirkt
   als feste Höhe, dann zeigt object-fit:cover nur noch den Mittelstreifen
   (Vorfall 05.09.2026). Das Verhältnis aus den Daten reserviert den Platz
   zuverlässig, ohne Layout-Shift. */
/* Rahmen und Breite stehen hier und nicht nur in .g-e3c21921: die Rückseite
   (U4) ist eine Ergänzung dieses Repos und trägt die Konverter-Klasse nicht —
   die Design-Quelle kennt keine Rückseite. Für das Cover ändert sich dadurch
   nichts (dieselben Werte, gleiche Spezifität, catalog.css lädt zuletzt). */
.cat-cover-bild{display:block;width:100%;height:auto;aspect-ratio:var(--cover-ratio,1024 / 1448);object-fit:cover;border-radius:3px;border:1px solid var(--border-default);background:var(--surface-card)}
/* Der Klick aufs Cover öffnet den Lichtkasten (book.js); ohne JS ist es ein
   Link auf die Bilddatei. Block statt inline, damit das Bild keine
   Grundlinien-Lücke bekommt; der Fokusring kommt aus tokens/base.css. */
.cat-cover-link{display:block;cursor:zoom-in;border-radius:3px}
/* Die Rückseite steht kleiner unter dem Cover, damit im Hero klar bleibt,
   welches Bild die Vorderseite ist; ihre Beschriftung trägt .cat-cover-label
   (die Ausblendregel darüber gilt nur innerhalb von .cat-cover--img). */
.cat-cover-rueck{display:flex;flex-direction:column;gap:4px;width:45%;margin-top:10px;text-decoration:none}

/* ---- Welt-Marke auf der Karte ---- */
.cat-welt{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid var(--a);color:#fff;background:var(--a)}
/* Dieselbe Marke als Verweis im Buch-Hero („Geeignet für"). */
.cat-weltlink{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:3px;border:1px solid var(--a);background:var(--a);color:#fff;text-decoration:none}

/* ---- Format-Badges (Lieferumfang) ----
   Werte aus der Design-Quelle (Buchseite-NIS2: Book / Agent / Templates). Sie
   stehen hier statt in gen/book.css, weil das Template sie über eine Schleife
   je Format setzt — der Konverter kennt nur die drei festen Beispiel-Badges. */
.cat-badge{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:3px}
.cat-badge--fachbuch{background:var(--blue-50);color:var(--blue-700);border:1px solid var(--blue-200)}
.cat-badge--arbeitsmittel{background:var(--graphite-100);color:var(--text-secondary)}

/* ---- Audio-Marke auf der Bibliothekskarte ----
   Kein eigener Filter, nur ein Hinweis am Ende der Formatzeile: der Titel hat
   eine Audio-Übersicht. Form wie die übrigen Mono-Chips der Karte. */
.cat-audio-chip{display:inline-block;margin-left:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:3px;border:1px solid var(--border-default);color:var(--text-secondary)}

/* ---- Preisangabe auf der Bibliothekskarte (PAngV) ----
   Der Preis ist ein Endpreis; § 3 PAngV verlangt den Hinweis, dass die
   Umsatzsteuer enthalten ist. Er haengt am Preis, nicht daneben: die
   Fusszeile der Karte ist flex mit `flex-wrap` — ohne `nowrap` risse der
   Zusatz auf schmalen Karten vom Betrag ab. Nur bei Karten mit Preis
   (Bedingung im Makro), sonst staende der Hinweis an einer leeren Stelle. */
.cat-mwst{white-space:nowrap;font-size:.8em;opacity:.75}

/* ---- Audio-Übersicht auf der Buchseite ----
   Der Player ist das native <audio controls>: auf Desktop, Android und iOS die
   jeweils gewohnte Steuerung, Range-Streaming über CloudFront und mobile
   Hintergrund-Wiedergabe — ohne eine Zeile JavaScript und ohne eigene
   Player-UI, die auf keinem der drei Systeme richtig wäre. Die Höhe gibt der
   Browser vor; hier steht nur die Breite und der Innenabstand der Karte. */
.cat-audio{display:block;width:100%;box-sizing:border-box;padding:16px 20px}

/* ---- Gedankenwolken auf der Buchseite („Aus der Praxis") ----
   Je Beispiel eine anonyme Silhouette links und die Aufgabe als Gedankenblase
   rechts — Blase plus die zwei kleinen Kreise, die zum Kopf fuehren.

   Auf Robustheit gebaut, weil die Saetze aus usecases kommen und beliebig
   lang sein koennen:
   * `auto-fit` mit `minmax(min(100%,420px),1fr)`: zwei Spalten, wo sie
     hineinpassen, sonst eine — ohne Breakpoint, der Sprung entsteht aus der
     Breite selbst. `min(100%,…)` verhindert, dass das Minimum unter 420 px
     Viewport ueberlaeuft (dieselbe Falle wie bei .cat-fit unten).
   * `minmax(0,1fr)` fuer die Blasenspalte und `min-width:0` an der Blase:
     ohne beides zwingt ein langes Wort die Spalte breiter als das Raster.
   * `overflow-wrap:anywhere` als letzte Sicherung fuer Woerter, die selbst
     eine ganze Zeile nicht fasst; `hyphens:auto` davor, wo der Browser
     Deutsch trennen kann (lang="de" steht am html-Element).
   * Die Kreise haengen an der Blase (::before/::after), nicht am Avatar:
     Abstand Avatar↔Blase ist der Grid-`gap`, und die Kreise liegen genau in
     ihm — der kleine beruehrt den Avatarrand, der grosse die Blase nicht.
     Aendert sich `gap` oder die Avatarbreite, muessen `left` mitziehen
     (Mobilblock unten rechnet das fuer 44 px vor).
   * Literata gibt es auf der Site nur aufrecht — deshalb kein `font-style:
     italic`, das waere ein vom Browser schraeg gerechnetes Faux-Kursiv. */
.cat-av-defs{position:absolute;width:0;height:0;overflow:hidden}
.cat-gedanken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:28px 40px;align-items:start}
.cat-gedanke{display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;align-items:start}
.cat-av{display:block;width:56px;height:56px;margin-top:6px;border-radius:50%;background:var(--surface-sunken);color:var(--border-strong);overflow:hidden}
.cat-av svg{display:block;width:100%;height:100%}
.cat-blase{position:relative;box-sizing:border-box;min-width:0;background:var(--surface-card);border:1px solid var(--border-default);border-radius:22px;padding:16px 22px}
.cat-blase::before,.cat-blase::after{content:"";position:absolute;box-sizing:border-box;background:var(--surface-card);border:1px solid var(--border-default);border-radius:50%}
.cat-blase::before{width:14px;height:14px;left:-15px;top:22px}
.cat-blase::after{width:8px;height:8px;left:-24px;top:36px}
.cat-blase-rolle{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:6px;overflow-wrap:anywhere}
.cat-blase-text{display:block;font-family:var(--font-serif);font-size:17px;line-height:1.5;color:var(--text-primary);hyphens:auto;overflow-wrap:anywhere}

/* ---- Arbeitsergebnisse auf der Buchseite ----
   Je Artefakt eine Karte: links das Symbol seiner Dateifamilie, rechts
   Typ-Label, Name, Umfang und Aufbau. Die Auswahl und das Typ-Vokabular
   stehen in catalog/normalize.py (ERGEBNIS_TYPEN, ergebnisse).

   Die sieben Farbpaare sind bewusst Literale in dieser Datei: das
   Design-System kennt keine Token fuer Dateifamilien, und css/tokens/ ist
   generiert und unantastbar. --erg traegt die Vollfarbe (Symbol und Label),
   --erg-tint die Toenung als Symbolgrund; beide sind gedaempft, damit die
   Karten neben dem Graphit der Seite nicht schreien.

   Dieselben Robustheitsregeln wie bei den Gedankenwolken, aus demselben
   Grund — Namen und Umfaenge kommen aus usecases und sind beliebig lang:
   * `auto-fit` mit `minmax(min(100%,270px),1fr)`: so viele Spalten, wie
     hineinpassen — gemessen vier ab 1280 px, drei ab 1024, zwei ab 600, eine
     darunter. `min(100%,…)` verhindert den Ueberlauf unterhalb von 270 px
     Viewport.
   * `minmax(0,1fr)` fuer die Textspalte und `min-width:0` am Rumpf: ohne
     beides zwingt ein langes Kompositum die Spalte breiter als das Raster.
   * `overflow-wrap:anywhere` als letzte Sicherung. Auf dem Namen bewusst
     `hyphens:manual`: bei vier Spalten trennte `auto` Artefaktnamen mitten
     im Wort (Anlassbezo-gene), und ein Name ist kein Fliesstext — er bricht
     am Wort, notfalls irgendwo. */
.cat-ergebnisse{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:16px;align-items:stretch}
.cat-ergebnis{--erg:var(--text-secondary);--erg-tint:var(--surface-sunken);display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;box-sizing:border-box;min-width:0;padding:18px 20px;border:1px solid var(--border-default);border-radius:8px;background:var(--surface-card)}
.cat-ergebnis--xlsx{--erg:#1f7a45;--erg-tint:#e6f4ec}
.cat-ergebnis--docx{--erg:#1f6fb2;--erg-tint:#e7f0fa}
.cat-ergebnis--pdf{--erg:#b3261e;--erg-tint:#fbe9e7}
.cat-ergebnis--pptx{--erg:#c2410c;--erg-tint:#fdece3}
.cat-ergebnis--md{--erg:#585e69;--erg-tint:#edeef1}
.cat-ergebnis--audio{--erg:#6b3fa0;--erg-tint:#efe8f8}
.cat-ergebnis--video{--erg:#0e8f99;--erg-tint:#e3f4f5}
.cat-ergebnis-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--erg-tint);color:var(--erg)}
.cat-ergebnis-icon svg{display:block;width:22px;height:22px}
.cat-ergebnis-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cat-ergebnis-typ{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--erg)}
.cat-ergebnis-name{font-size:16px;font-weight:var(--weight-semibold);line-height:1.35;color:var(--text-primary);hyphens:manual;overflow-wrap:anywhere;text-wrap:balance}
.cat-ergebnis-umfang{font-size:14px;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere}
.cat-ergebnis-aufbau{font-size:13px;line-height:1.5;color:var(--text-tertiary);overflow-wrap:anywhere;margin-top:2px}
/* Die achte Kachel „und vieles mehr": Markenakzent statt Dateifamilie, der
   Grund in der Akzent-Toenung mit einem weichen Lichtfleck oben rechts, das
   Symbol auf weissem Grund, und dasselbe Funkeln noch einmal gross und blass
   in der Ecke — ein Schmuck, sonst dieselbe Karte. `overflow:hidden` haelt
   das grosse Funkeln in der Kachel, `position:relative` gibt ihm den Bezug. */
.cat-ergebnis--mehr{--erg:var(--interactive-primary);--erg-tint:var(--surface-card);position:relative;overflow:hidden;border-color:var(--blue-200);background:radial-gradient(120% 90% at 100% 0%,var(--blue-100) 0%,var(--surface-accent-subtle) 55%,var(--surface-accent-subtle) 100%)}
.cat-ergebnis--mehr .cat-ergebnis-icon{box-shadow:0 1px 2px rgba(15,18,22,.08)}
.cat-ergebnis--mehr .cat-ergebnis-name{color:var(--text-accent)}
.cat-ergebnis--mehr .cat-ergebnis-umfang{color:var(--text-secondary)}
.cat-ergebnis-funkeln{position:absolute;right:-18px;bottom:-22px;width:120px;height:120px;color:var(--blue-300);opacity:.28;pointer-events:none}

/* ---- Sektion „Möglichkeiten" auf der Buchseite ----
   Oben zweispaltig: links der Film der Startseite (derselbe stumme Clip,
   dieselbe Geometrie wie .hp-video in css/index.css), rechts das Prinzip in
   drei Schritten. 5fr zu 6fr, weil der Film als Bild schwerer wiegt als die
   drei Textkarten und sonst neben ihnen verloren wirkt.

   Darunter das Carousel der sechs Erklärbilder. Es ist bewusst kein
   Kartenraster: die Bilder sind Etsy-Grafiken im Format 4:3 (2700×2025,
   gespiegelt als 1800×1350) und tragen Schrift — nebeneinander verkleinert
   wäre nichts davon lesbar. Eine Folie fuellt deshalb die volle Breite.

   Ohne JavaScript bleibt der Streifen bedienbar: `overflow-x:auto` plus
   `scroll-snap-type:x mandatory` ist ein nativer Snap-Streifen fuer Wischen,
   Trackpad und Scrollbar. `site/js/book.js` legt nur Knoepfe und Punkte
   darueber; beide stehen im Markup als `hidden`.

   Die senkrechte Lage der Knoepfe kommt aus einer Prozent-Marge, nicht aus
   einem geschaetzten Wert: prozentuale Margen rechnen gegen die BREITE des
   umgebenden Blocks. Eine Folie ist 100 % breit und 4:3 hoch, ihr Bild also
   0.75×B hoch und in der Mitte bei 0.375×B — `margin-top:calc(37.5% - 20px)`
   setzt den 40 px hohen Knopf damit exakt auf die Bildmitte, unabhaengig
   davon, ueber wie viele Zeilen die Bildzeile darunter laeuft. */
.cat-moeglich{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start;margin-bottom:32px}
.cat-film{margin:0;min-width:0}
.cat-film-video{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--border-default);border-radius:8px;background:var(--graphite-950);object-fit:contain}
.cat-film-zeile{display:block;margin-top:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary)}
.cat-prinzip{display:grid;gap:12px;min-width:0}
.cat-karussell{position:relative}
.cat-karussell-spur{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:6px;outline:none}
.cat-karussell-spur:focus-visible{box-shadow:var(--focus-ring);border-radius:8px}
.cat-folie{flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}
.cat-folie a{display:block}
.cat-folie img{display:block;width:100%;height:auto;border:1px solid var(--border-default);border-radius:8px;background:var(--surface-card)}
.cat-folie-zeile{margin-top:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary)}
.cat-karussell-knopf{position:absolute;top:0;margin-top:calc(37.5% - 20px);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-default);border-radius:50%;background:var(--surface-card);color:var(--text-secondary);cursor:pointer;box-shadow:0 1px 3px rgba(15,18,22,.10)}
.cat-karussell-knopf svg{display:block;width:20px;height:20px}
.cat-karussell-knopf:hover{color:var(--text-primary);border-color:var(--border-strong)}
.cat-karussell-knopf[disabled]{opacity:.35;cursor:default}
.cat-karussell-knopf--zurueck{left:12px}.cat-karussell-knopf--weiter{right:12px}
.cat-karussell-punkte{display:flex;justify-content:center;gap:8px;margin-top:12px}
.cat-karussell-punkt{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--border-strong);cursor:pointer}
.cat-karussell-punkt--an{background:var(--interactive-primary)}

/* ---- Lichtkasten der Erklaerbilder ----
   Natives <dialog> im Top-Layer, Muster der Film-Vergroesserung auf der
   Startseite (index.css, hp-filmbox). Das Bild fuellt den Bildschirm, so weit
   sein Seitenverhaeltnis es zulaesst (4:3, contain) — `100dvh` beruecksichtigt
   die einklappbare Adressleiste auf dem Handy, `100vh` ist der Rueckfall
   fuer Browser ohne dvh. Der Schliessen-Knopf sitzt fest oben rechts, damit
   er auf jedem Geraet an derselben Stelle liegt; Escape und ein Tipp auf den
   Grund schliessen ebenfalls (book.js). Der Seitenhintergrund bleibt stehen,
   scrollt aber nicht (body.cat-lichtkasten-offen). */
.cat-lichtkasten{position:fixed;inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:12px;border:0;background:transparent;overflow:hidden}
.cat-lichtkasten:not([open]){display:none}
.cat-lichtkasten[open]{display:grid;place-items:center}
.cat-lichtkasten::backdrop{background:rgba(15,18,22,.84)}
.cat-lichtkasten-figur{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.cat-lichtkasten-bild{display:block;max-width:min(100vw - 24px,1600px);max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);width:auto;height:auto;object-fit:contain;border-radius:8px;background:var(--surface-card)}
.cat-lichtkasten-zeile{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--graphite-300);text-align:center;max-width:70ch;overflow-wrap:anywhere}
.cat-lichtkasten-schliessen{position:fixed;top:12px;right:12px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--border-default);border-radius:999px;background:var(--surface-card);color:var(--text-secondary);cursor:pointer;z-index:1}
.cat-lichtkasten-schliessen:hover{color:var(--text-primary);border-color:var(--border-strong)}
.cat-lichtkasten-schliessen svg{width:18px;height:18px}
body.cat-lichtkasten-offen{overflow:hidden}

/* ---- Vielfalt-Kachel im Nutzen-Raster („Ergebnis") ----
   Dieselbe Sprache wie die achte Ergebnis-Kachel oben: Akzent-Toenung mit
   Lichtfleck, Symbol auf weissem Grund, das grosse blasse Funkeln in der
   Ecke. Der Inhalt ist ein Aggregat aus usecases (normalize._vielfalt) —
   Zahl der Anwendungsfaelle, Zahl der Rollen und die belegten Arbeitsphasen
   als Chips.

   `:nth-child(odd)` laesst sie beide Spalten fuellen: das Nutzen-Raster ist
   zweispaltig, und je nach Zahl der Nutzen steht die Kachel an gerader oder
   ungerader Stelle. Bei fuenf Nutzen ist sie die sechste (halbe Breite), bei
   sechs die siebte (volle Breite) — so bleibt keine halbe Zeile stehen. */
.cat-vielfalt{--erg:var(--interactive-primary);position:relative;overflow:hidden;display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;box-sizing:border-box;min-width:0;padding:20px 24px;border:1px solid var(--blue-200);border-radius:8px;background:radial-gradient(120% 90% at 100% 0%,var(--blue-100) 0%,var(--surface-accent-subtle) 55%,var(--surface-accent-subtle) 100%)}
.cat-vielfalt:nth-child(odd){grid-column:1/-1}
.cat-vielfalt-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--surface-card);color:var(--erg);box-shadow:0 1px 2px rgba(15,18,22,.08)}
.cat-vielfalt-icon svg{display:block;width:22px;height:22px}
.cat-vielfalt-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cat-vielfalt-typ{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--erg)}
.cat-vielfalt-name{font-size:16px;font-weight:var(--weight-semibold);line-height:1.35;color:var(--text-accent);hyphens:manual;overflow-wrap:anywhere;text-wrap:balance}
.cat-vielfalt-chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.cat-vielfalt-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;padding:3px 8px;border-radius:999px;border:1px solid var(--blue-200);background:var(--surface-card);color:var(--text-accent)}
.cat-vielfalt-text{font-size:14px;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere}

/* ---- Sektion „In Ausbildung" auf der Buchseite ----
   Portraet links, Text rechts. Die Spalte ist so breit wie das Bild angezeigt
   wird (280 px); die Datei ist mit 440 px doppelt so fein und bleibt damit
   auch auf dichten Displays scharf — dieselbe Rechnung wie bei den
   Cover-Derivaten der Bibliothek.

   Untereinander erst ab 720 px, nicht schon ab 1024: Bild und Text stehen
   auch auf einem schmalen Notebook noch bequem nebeneinander. Deshalb traegt
   der Container NICHT die Klasse `cat-cols` (die bricht bei 1024 um), sondern
   sein eigenes Raster. */
.cat-agent{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--space-10)}
.cat-agent-bild{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid var(--border-default);background:var(--surface-card)}
/* Solange kein Portraet erzeugt ist: dieselbe Kachel, getoenter Grund, mittig
   die Bildmarke. Kein graues Personen-Piktogramm — die Marke sagt „hier
   entsteht etwas von uns", ein Platzhalter-Kopf saehe nach Fehler aus. */
.cat-agent-bild--leer{display:flex;align-items:center;justify-content:center;background:var(--surface-accent-subtle);border-color:var(--blue-200)}
.cat-agent-bildzeile{display:block;margin-top:12px}
/* Die drei Nutzenpunkte: schlichte Liste mit Mono-Ziffern, bewusst kein
   Kartenraster — die Sektion hat mit dem Portraet bereits ein starkes
   Element, ein zweites Raster daneben zerfiele in Kacheln. */
.cat-agent-punkte{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:16px}
.cat-agent-punkt{display:flex;gap:16px}
.cat-agent-stand{display:block;margin-bottom:20px}
.cat-agent-aktion{display:flex;align-items:center;gap:20px}
.cat-agent-klein{margin:16px 0 0}

/* ---- Titel-Sektion der Weltseiten ----
   Ersatz fuer die Sektion mit den vier erfundenen Buechern der Design-Quelle
   (tools/dc2j2.py, SLOTS → partials/welt-titel.j2). Weil der Konverter die
   Sektion vor der Style-Erfassung herausnimmt, stehen ihre Regeln hier und
   nicht in gen/<seite>.css. Die Werte sind 1:1 die Inline-Styles der
   ersetzten Sektion; das Raster ist das der Bibliothek, weil die Karte
   dieselbe ist. */
.cat-welt-titel{padding:96px 0 0}
.cat-welt-titel-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px;flex-wrap:wrap}
.cat-welt-titel-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:12px}
.cat-welt-titel-h2{font-size:32px;line-height:1.16;letter-spacing:-.02em;font-weight:600;margin:0 0 8px}
.cat-welt-titel-lead{font-size:20px;line-height:1.5;color:var(--text-secondary);max-width:62ch;margin:0;text-wrap:pretty}
.cat-welt-titel-mehr{font-size:15px;font-weight:500;color:var(--text-accent);text-decoration:none;white-space:nowrap}
.cat-welt-titel-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}

/* ---- Erklaerfilm im Hero der Weltseiten ----
   Dieselbe Figur wie „Moeglichkeiten" auf der Buchseite, an der Stelle des
   Design-Platzhalters „Video · Platzhalter". Der Titel in der Bildzeile
   verweist auf die Buchseite; `color:inherit` haelt die Zeile dabei in der
   Mono-Tertiaerfarbe — sonst zoege der Verweis das Linkblau in den Hero.
   Unterstreichung und Versatz kommen schon aus tokens/base.css. */
.cat-welt-film a{color:inherit}

/* ---- Hinweis auf der Buchseite eines nicht mehr verkauften Titels ---- */
.cat-hinweis{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:5px;border:1px solid var(--border-default);background:var(--surface-sunken);font-size:16px;color:var(--text-secondary)}

/* ---- Kaufzeile über „Buch sichern" ----
   Sagt, wo der Kauf stattfindet (Kundenbereich my.agentbooks.de), damit der
   Domainwechsel nach dem Klick keine Überraschung ist, und die MwSt.-Zeile
   direkt unter dem Preis im Knopf; Muster .cat-film-zeile, nur bei verfuegbar
   (OP-45). Die Zeile sitzt zwischen Problemabsatz (Design: 32px darunter) und
   Knopfzeile (Design: 32px darueber); der negative Rand zieht sie an den Knopf
   heran (10px), ohne die Design-Abstaende in css/gen anzufassen. */
.cat-kauf-mwst{margin:8px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary)}
.cat-kauf-zeile{display:flex;align-items:center;gap:6px;margin:0 0 -22px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary)}
/* Gruener Haken als ruhiges Hinweiszeichen (kein Warnsymbol). */
.cat-kauf-icon{flex:none;color:var(--success-600)}

/* ---- Hinweis auf die Neuauflage ----
   Gegenstueck zur Kaufzeile fuer Titel ausser Verkauf: derselbe Mono-Kicker,
   nur ohne den negativen Rand, weil er unter der Knopfzeile steht statt
   darueber. Der Link traegt die Textfarbe, kein Knopf — er ist ein Hinweis. */
.cat-nachfolger{margin:12px 0 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary)}
.cat-nachfolger a{color:var(--text-primary);text-underline-offset:3px}

/* ---- Das Faktengitter im Hero der Buchseite ----
   Die Design-Quelle kennt vier Zellen (`.g-968f4cc0`, repeat(4,auto)); mit
   der ISBN sind es fuenf. Die Regel steht bewusst VOR dem Responsive-Block:
   dort bricht `.cat-cols` ab 1024 px auf eine Spalte um und muss gewinnen.
   Die Nummer selbst in Mono — sie ist eine Kennung, keine Zahl im Fliesstext,
   und steht so ruhiger neben den drei gezaehlten Werten daneben. */
.cat-fakten{grid-template-columns:repeat(5,auto)}
.cat-isbn{font-family:var(--font-mono);font-size:16px;font-weight:500;letter-spacing:.02em}

/* ============================================================================
   RESPONSIVE — Ergänzung zur Design-Quelle
   Die Quelle ist desktop-only. Die meisten Raster nutzen bereits
   `repeat(auto-fit,…)` und regeln sich selbst; hier stehen nur die Stellen,
   die das nicht tun. Angriffspunkte sind die stabilen cat-*-Anker, die der
   Konverter zusätzlich zur Hash-Klasse vergibt — Hash-Klassen wären hier eine
   Wartungsfalle, weil sie sich mit jeder Design-Änderung verschieben.
   Gutter-Stufen 48/32/20 wie auf den übrigen Seiten.
   ============================================================================ */

/* `minmax(0,1fr)` statt `1fr`: ein blosses 1fr ist implizit minmax(auto,1fr)
   und schrumpft nie unter die min-content-Breite seines Inhalts — das Raster
   liefe dann ueber, statt umzubrechen. */
@media (max-width:1024px){
  .cat-topnav{padding:0 var(--space-8)}
  .cat-inner{padding-left:var(--space-8);padding-right:var(--space-8)}
  .cat-pad{padding:var(--space-8)}
  .cat-cols{grid-template-columns:minmax(0,1fr)}
  /* Die Cover-Spalte nimmt jetzt die volle Breite — die Rückseite darf dann
     nicht mitwachsen. */
  .cat-cover-rueck{width:40%}
}

@media (max-width:720px){
  /* Kompakter Header wie auf den uebrigen Seiten: die Platzhalter-Navigation
     entfaellt, Marke und CTA bleiben. Das Design-System liefert bewusst keine
     Mobile-Navigation (readme.md, „Not built"). */
  .cat-topnav{height:var(--header-height-mobile);padding:0 var(--space-5);gap:var(--space-3)}
  .cat-topnav .ab-topnav__links{display:none}
  .cat-inner{padding-left:var(--space-5);padding-right:var(--space-5)}
  .cat-pad{padding:var(--space-6)}
  .cat-display{font-size:34px}
  /* Deutsche Komposita sind in diesem Katalog der Normalfall
     („Heizkostenabrechnungen", „Entgelttransparenz"). In grossen Graden
     sprengt ein einzelnes Wort sonst die Zeile — die Design-Quelle setzt
     `overflow-wrap:anywhere` aus demselben Grund auf den Kartentiteln. */
  h1,h2,h3{overflow-wrap:anywhere}
  /* Auto-fit-Raster mit grossem minmax-Minimum: unterhalb des Minimums
     bricht auto-fit nicht mehr um, sondern laeuft ueber. */
  .cat-fit{grid-template-columns:minmax(0,1fr)}
  /* Flex-Zeilen der Quelle umbrechen lassen — sie sind desktop-only gedacht
     und ihre Kinder tragen white-space:nowrap. */
  .cat-flex{flex-wrap:wrap}
  /* Ein umbrechender Flex-Container hilft nicht, wenn ein einzelnes Kind
     breiter ist als der Viewport. Die Mono-Kicker der Weltseiten („Für
     Kommunen, Behörden, Eigenbetriebe und öffentliche Unternehmen") sind
     genau das — hier darf ihr nowrap fallen. */
  .cat-nowrap{white-space:normal}
  /* Gedankenwolken: kleinerer Avatar (44 px) und engerer Abstand; die Kreise
     wandern mit, damit der kleine den Avatarrand weiter genau beruehrt
     (44 + 22 = 66 → ::after bei -22 endet auf 44). */
  .cat-gedanken{gap:20px}
  .cat-gedanke{grid-template-columns:44px minmax(0,1fr);gap:22px}
  .cat-av{width:44px;height:44px;margin-top:4px}
  .cat-blase{border-radius:18px;padding:14px 18px}
  .cat-blase::before{left:-15px;top:18px}
  .cat-blase::after{width:7px;height:7px;left:-22px;top:31px}
  .cat-blase-text{font-size:16px}
  /* Arbeitsergebnisse: schmalere Karte, kleineres Symbol — bei 320 px bleibt
     der Textspalte sonst zu wenig fuer die langen Artefaktnamen. */
  .cat-ergebnis{padding:14px 16px;gap:12px;grid-template-columns:36px minmax(0,1fr)}
  .cat-ergebnis-icon{width:36px;height:36px}
  /* Der Player braucht die volle Breite — die Steuerung des Browsers ist bei
     390 px sonst zusammengedrueckt. */
  .cat-audio{padding:12px}
  /* Agent-Sektion untereinander; das Portraet bekommt eine Obergrenze, sonst
     fuellt es bei 390 px die halbe Bildschirmhoehe. */
  .cat-agent{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .cat-agent-bild{max-width:280px}
  /* Moeglichkeiten: Film ueber Prinzip statt daneben. */
  .cat-moeglich{grid-template-columns:minmax(0,1fr);gap:20px}
  /* Die Knoepfe bleiben sichtbar — Wischen allein verraet nicht, dass es
     weitergeht. Kleiner (32 px) und dichter am Rand; die halbe Hoehe in der
     Prozent-Marge zieht mit (16 statt 20). */
  .cat-karussell-knopf{width:32px;height:32px;margin-top:calc(37.5% - 16px)}
  .cat-karussell-knopf svg{width:17px;height:17px}
  .cat-karussell-knopf--zurueck{left:8px}.cat-karussell-knopf--weiter{right:8px}
  /* Einspaltiges Raster: die Kachel spannt ohnehin die eine Spalte, die
     Regel haelt sie unabhaengig von ihrer Position dort. */
  .cat-vielfalt{grid-column:1/-1;padding:16px 18px;gap:12px;grid-template-columns:36px minmax(0,1fr)}
  .cat-vielfalt-icon{width:36px;height:36px}
}

/* Buchseite, Hero: Untertitel als Leitsatz, Problemtext als Fließtext. Die
   Quelle (gen/book.css, g-62408bc5/g-e0db1d5f) gibt beiden dieselben 20 px in
   Sekundärfarbe ohne Abstand — auf der Seite lasen sie sich als ein Block. */
.cat-untertitel{font-size:22px;line-height:1.35;font-weight:500;letter-spacing:-.008em;color:var(--text-primary);max-width:56ch;margin:20px 0 0}
.cat-problem{font-size:17px;line-height:1.6;color:var(--text-secondary);max-width:62ch;margin:14px 0 32px}
@media (max-width:768px){
  .cat-untertitel{font-size:19px}
  .cat-problem{font-size:16px}
}

/* ============================================================================
   Phasen-Strecke (Weltseiten; heute nur enterprise)
   Die zehn Arbeitsphasen als Leiste, darunter drei echte Artefakte der Welt,
   die an ihrer Phase haengen (Modell: catalog/render.phasen_strecke; Werte
   aus dem Design-Artboard „Phasen-Strecke"). Faellt das Modell aus (weniger
   als drei passende Treffer), rendert die Seite ihre alte Sektion — diese
   Regeln greifen dann ins Leere.
   ============================================================================ */

/* Zehn Stationen nebeneinander brauchen rund 1000 px; darunter liefe die
   Leiste ueber ihren Kasten hinaus (gemessen: ab 999 px abwaerts). `auto`
   zeigt den Balken nur dort — auf dem Desktop bleibt die Leiste unberuehrt. */
.cat-ph-rail{display:flex;gap:12px;padding-top:14px;border-top:1px solid var(--border-strong);overflow-x:auto}
.cat-ph-station{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:1;min-width:0}
.cat-ph-nr{font-family:var(--font-mono);font-size:11px;color:var(--graphite-400)}
.cat-ph-punkt{width:8px;height:8px;border-radius:1px;background:var(--graphite-300)}
.cat-ph-label{font-size:12px;line-height:1.3;color:var(--graphite-700)}
/* Belegte Phasen — nur sie tragen eines der drei gezeigten Artefakte. */
.cat-ph-station--aktiv .cat-ph-punkt{background:var(--blue-600)}
.cat-ph-station--aktiv .cat-ph-label{font-weight:500}

/* Die Haenge-Karten haben die Anatomie der ab-card; der Strich nach oben
   (cat-ph-tick) verbindet sie mit der Leiste und braucht deshalb den
   Platz ueber der Karte — daher der Aussenabstand von 25 px. */
.cat-ph-haenge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:25px;padding:0 12px}
.cat-ph-karte{position:relative;display:block;padding:14px 16px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-card);color:inherit;text-decoration:none}
.cat-ph-karte:hover{border-color:var(--border-strong)}
.cat-ph-tick{position:absolute;top:-25px;left:24px;width:1px;height:25px;background:var(--graphite-300)}
.cat-ph-ext{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;font-weight:500;color:var(--blue-600)}
.cat-ph-name{display:block;font-size:15px;font-weight:500;margin-top:8px;overflow-wrap:anywhere}
.cat-ph-umfang{display:block;font-size:13px;color:var(--text-secondary);margin-top:2px}
.cat-ph-quelle{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary);margin-top:8px;overflow-wrap:anywhere}

.cat-ph-fuss{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:36px;padding-top:20px;border-top:1px solid var(--border-default)}
.cat-ph-formate{display:flex;align-items:center;gap:6px}
.cat-ph-formate-titel{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary);margin-right:6px}
.cat-ph-chip{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;padding:4px 8px;border-radius:3px;border:1px solid var(--blue-200);color:var(--blue-600);white-space:nowrap}
.cat-ph-bilanz{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-tertiary)}
/* Das Wort „Agenten" traegt die Farbe der Agentenschicht — wie ueberall. */
.cat-ph-agent{color:var(--petrol-600)}

@media (max-width:720px){
  /* Bei 390 px bliebe von einer Station nichts Lesbares uebrig: sie hoeren
     auf zu schrumpfen und behalten eine Mindestbreite — die Leiste scrollt
     (overflow-x steht oben, nicht erst hier). */
  .cat-ph-station{flex:none;min-width:96px}
  /* Einspaltig; ohne Leiste daneben haengt nichts mehr an einem Strich. */
  .cat-ph-haenge{grid-template-columns:minmax(0,1fr);padding:0}
  .cat-ph-tick{display:none}
  .cat-ph-fuss{flex-direction:column;align-items:flex-start;gap:16px}
  .cat-ph-formate{flex-wrap:wrap}
}