/* Cascade-Layer flow.produkt (05.11.2026, P3)
   Diese Datei bindet die FLOW-Tokens an die Library. Sie lag bisher ungeschichtet und stand damit
   ueber @layer flow.tokens und @layer flow.bausteine, unabhaengig von jeder Spezifitaet.
   flow.produkt wird als letzte Schicht deklariert und behaelt deshalb genau denselben Vorrang,
   jetzt aber sichtbar und steuerbar. Reihenfolge: flow.tokens, flow.bausteine, flow.produkt. */
@layer flow.produkt {
/* FLOW Library · D1 (Entwurf, 03.11.2026) · Owner: Claude
   Kombination: Rahmen aus der WORKFLOW-Bibliothek (Cover-Panel + angesetzte Leseseite mit Goldkontur, Regale, Infobox, Blättern)
   und Eingang aus Library Pack 1.0 (Hero mit Fraunces-Zeile und grüner Kursive, Foto im Rundbogen, schräge Impulskarte,
   Druckatelier, Lernwege). Nur FLOW Tokens 2.0 (--flow-* aus design/tokens), keine festen Farben.
   NEU und nur als Vorschlag (Manuel entscheidet): die Typfarben --lib-typ-*, aus vorhandenen Tokens gemischt.
   Kein Reduced Motion (Manuel). */

:root {
  --lib-panel-breite: 300px;
  --lib-einschub: 30px;                       /* so weit liegt die Leseseite auf dem Panel – das Buch in der Bibliothek */
  --lib-rand: 3px;
  --lib-rahmen: linear-gradient(150deg, var(--flow-papier-creme) 0%, var(--flow-papier-linie) 28%, var(--flow-linie-gold) 62%, color-mix(in srgb, var(--flow-tinte-erde) 55%, var(--flow-linie-gold)) 100%);
  --lib-buchhoehe: calc(100vh - 2 * var(--flow-abstand-6));   /* Panel und Leseseite gleich hoch – wie ein aufgeschlagenes Buch */
  --lib-marke: var(--flow-akzent-wald);
  --lib-marke-text: var(--flow-papier-creme);
  --lib-marke-leise: color-mix(in srgb, var(--flow-papier-creme) 78%, transparent);
  --lib-marke-kicker: var(--flow-akzent-honig);
  /* Typfarben – VORSCHLAG */
  --lib-typ-skill: color-mix(in srgb, var(--flow-spektrum-amber) 62%, var(--flow-akzent-bernstein));
  --lib-typ-werkzeug: var(--flow-akzent-wald);
  --lib-typ-uebung: color-mix(in srgb, var(--flow-spektrum-tuerkis) 45%, var(--flow-akzent-wald));
  --lib-typ-wissen: color-mix(in srgb, var(--flow-nacht-navy) 55%, var(--flow-spektrum-tuerkis));
  --lib-typ-medien: var(--flow-orange-basis);
  --lib-typ-druck: var(--flow-tinte-erde);
  --typ: var(--flow-akzent);
}
html { color-scheme: light; }
[data-flow-stimmung="nacht"] {
  color-scheme: dark;
  --lib-rahmen: linear-gradient(150deg, color-mix(in srgb, var(--flow-akzent-mint) 40%, var(--flow-nacht-flaeche)) 0%, var(--flow-nacht-flaeche-2) 40%, var(--flow-nacht-flaeche) 75%, var(--flow-nacht-schwarz) 100%);
  --lib-marke: var(--flow-nacht-flaeche-2);
  --lib-typ-skill: var(--flow-spektrum-amber);
  --lib-typ-werkzeug: var(--flow-akzent-mint);
  --lib-typ-uebung: var(--flow-spektrum-tuerkis);
  --lib-typ-wissen: color-mix(in srgb, var(--flow-spektrum-cyan) 60%, var(--flow-tinte-nacht));
  --lib-typ-druck: var(--flow-akzent-honig);
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; font: 400 1rem/1.6 var(--flow-schrift-text); color: var(--flow-text);
  background:
    radial-gradient(900px 520px at 6% -8%, color-mix(in srgb, var(--flow-akzent-honig) 32%, transparent), transparent 62%),
    radial-gradient(800px 600px at 104% 18%, color-mix(in srgb, var(--flow-akzent) 9%, transparent), transparent 60%),
    radial-gradient(color-mix(in srgb, var(--flow-text) 9%, transparent) 1px, transparent 1.2px) 0 0 / 22px 22px,
    var(--flow-grund);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: var(--flow-akzent); }
:where(a, button, input, [tabindex]):focus-visible { outline: 3px solid var(--flow-fokus); outline-offset: 2px; }
.lib-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lib-sprungmarke { position: absolute; left: -999px; top: var(--flow-abstand-3); z-index: 100; padding: var(--flow-abstand-2) var(--flow-abstand-3); border: 0; border-radius: var(--flow-radius-m); background: var(--flow-flaeche); color: var(--flow-text); font: inherit; }
.lib-sprungmarke:focus { left: var(--flow-abstand-3); }

/* ---------- Marke: Ring wie im Pack-Kopf ---------- */
.lib-ring { display: inline-block; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--flow-orange-basis), var(--flow-akzent-honig), var(--flow-orange-tief), var(--flow-orange-basis));
  -webkit-mask: radial-gradient(circle, transparent 54%, var(--flow-text) 56%); mask: radial-gradient(circle, transparent 54%, var(--flow-text) 56%); }

/* ---------- Kopf: nur am Handy (dort wird das Panel zur Schublade) ---------- */
.lib-kopf { display: none; }

/* ---------- Das Buch: Inhaltspanel links, Leseseite daran angesetzt ---------- */
/* P4.1 (05.11.2026): Die Shell-Geometrie gehoert zur Shell, nicht zur Leseseite.
   Hier standen bis dahin zwei Deckelungen, die die Seite auf 1340px einschnuerten und die Spalten
   zentrierten: max-width 1340px und justify-content center. Beide sind entfernt; Raster, Breite,
   Polsterung und Abstaende setzt jetzt ausschliesslich .flow-shell.lib-buch im Bridge. */
/* Der rechte Streifen des Panels (--lib-einschub) liegt unter der Leseseite. Damit er nie hervorkommt (Manuel 03.11., Screenshot:
   grauer Scrollbalken, eckige Kante), ist die Leseseite mindestens so hoch wie das Panel; die Kanten sind trotzdem rundum fertig. */
.lib-panel { position: sticky; top: var(--flow-abstand-6); z-index: 1; display: flex; flex-direction: column; overflow: hidden;
  max-height: var(--lib-buchhoehe); margin-right: calc(-1 * var(--lib-einschub));
  border: var(--lib-rand) solid transparent; border-radius: var(--flow-radius-xl);
  background: linear-gradient(var(--flow-flaeche-2), var(--flow-flaeche-2)) padding-box, var(--lib-rahmen) border-box; box-shadow: var(--flow-schatten); }
.lib-seite { position: relative; z-index: 2; min-width: 0; min-height: var(--lib-buchhoehe); padding: var(--flow-abstand-6) clamp(20px, 4vw, 52px) var(--flow-abstand-6);
  border: var(--lib-rand) solid transparent; border-radius: var(--flow-radius-xl); outline: none;
  background: linear-gradient(var(--flow-flaeche), var(--flow-flaeche)) padding-box, var(--lib-rahmen) border-box;
  box-shadow: -20px 0 30px -18px color-mix(in srgb, var(--flow-akzent) 40%, transparent), var(--flow-schatten-hub); }

/* Markenbox: die einzige dunkle Fläche (Befund 1 der Designkritik) */
.lib-marke { position: relative; display: grid; gap: var(--flow-abstand-2); padding: var(--flow-abstand-3) calc(var(--lib-einschub) + 14px) var(--flow-abstand-4) var(--flow-abstand-3);
  background: linear-gradient(160deg, var(--lib-marke), color-mix(in srgb, var(--lib-marke) 82%, var(--flow-akzent-mint))); color: var(--lib-marke-text); }
.lib-panel__zu { display: none; }
.lib-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--flow-radius-l);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--flow-nacht-schwarz) 40%, transparent), 0 0 0 1px color-mix(in srgb, var(--flow-tinte-held) 18%, transparent); }
.lib-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--flow-bewegung-ruhig) var(--flow-bewegung-gleiten); }
.lib-cover:hover img { transform: scale(1.04); }
.lib-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--flow-nacht-schwarz) 62%, transparent)); }
.lib-cover__schrift { position: absolute; left: 14px; bottom: 12px; z-index: 1; display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; color: var(--flow-tinte-held); }
.lib-cover__schrift .lib-ring { grid-row: span 2; }
.lib-cover__schrift b { font: 600 1.7rem/1 var(--flow-schrift-anzeige); letter-spacing: -.01em; }
.lib-cover__schrift small { font: 700 .62rem/1.4 var(--flow-schrift-text); letter-spacing: .22em; text-transform: uppercase; }
.lib-marke__kicker { margin-top: var(--flow-abstand-2); font: 700 .66rem/1.4 var(--flow-schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--lib-marke-kicker); }
.lib-marke__titel { margin: 0; font: 600 1.9rem/1.05 var(--flow-schrift-anzeige); letter-spacing: -.02em; }
.lib-marke__text { margin: 0; font: italic 400 .95rem/1.45 var(--flow-schrift-anzeige); color: var(--lib-marke-leise); }
.lib-marke__knopf { justify-self: start; margin-top: var(--flow-abstand-1); }

.lib-suche { padding: var(--flow-abstand-3) calc(var(--lib-einschub) + 12px) var(--flow-abstand-2) var(--flow-abstand-3); }

/* Regalbaum (Muster 9 · höchstens zwei Ebenen · Klappen schreibt keinen Verlauf) */
/* Scrollbereich endet vor dem verdeckten Streifen (margin statt padding), schmaler Balken in Token-Farben, unten sanft ausgeblendet. */
.lib-baum { flex: 1; min-height: 0; overflow: auto; margin-right: var(--lib-einschub); padding: 0 6px var(--flow-abstand-4) var(--flow-abstand-2);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--flow-text) 22%, transparent) transparent;
  -webkit-mask-image: linear-gradient(to bottom, var(--flow-text) calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, var(--flow-text) calc(100% - 28px), transparent); }
.lib-baum::-webkit-scrollbar { width: 6px; }
.lib-baum::-webkit-scrollbar-button { display: none; height: 0; }
.lib-baum::-webkit-scrollbar-track { background: transparent; }
.lib-baum::-webkit-scrollbar-thumb { border-radius: var(--flow-radius-rund); background: color-mix(in srgb, var(--flow-text) 22%, transparent); }
.lib-baum ul { list-style: none; margin: 0; padding: 0; }
.lib-baum__trenner { margin: var(--flow-abstand-2) var(--flow-abstand-2); border: 0; border-top: 1px solid var(--flow-linie); }
.lib-baum__kopf { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
.lib-baum__klapp { display: grid; place-items: center; width: 32px; height: var(--flow-groesse-tippflaeche); padding: 0; border: 0; background: none; color: var(--flow-text-leise); cursor: pointer; font: 600 1.1rem/1 var(--flow-schrift-text); }
.lib-baum__klapp span { transition: transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten); }
.lib-baum__klapp[aria-expanded="true"] span { transform: rotate(90deg); }
.lib-baum__zeile { display: flex; align-items: center; gap: var(--flow-abstand-2); min-height: var(--flow-groesse-tippflaeche); padding: 0 var(--flow-abstand-2);
  border-radius: var(--flow-radius-m); color: var(--flow-text); text-decoration: none; font: 650 .95rem/1.25 var(--flow-schrift-text); }
.lib-baum__zeile:hover { background: color-mix(in srgb, var(--typ) 8%, transparent); }
.lib-baum__zeile[aria-current="page"] { background: var(--flow-flaeche); box-shadow: inset 3px 0 0 var(--typ), var(--flow-schatten); }
.lib-punkt { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--typ); }
.lib-baum .lib-zahl { margin-left: auto; }
.lib-baum__unter { margin: 0 0 var(--flow-abstand-2) 40px !important; border-left: 1px solid var(--flow-linie); }
.lib-baum__blatt { display: flex; align-items: center; min-height: 40px; padding: 4px var(--flow-abstand-2) 4px var(--flow-abstand-3); color: var(--flow-text-leise);
  text-decoration: none; font: 500 .9rem/1.3 var(--flow-schrift-text); border-radius: 0 var(--flow-radius-s) var(--flow-radius-s) 0; }
.lib-baum__blatt:hover { color: var(--flow-text); background: color-mix(in srgb, var(--typ) 8%, transparent); }
.lib-baum__blatt[aria-current="page"] { color: var(--flow-text); font-weight: 650; box-shadow: inset 2px 0 0 var(--typ); }
.lib-panel__fuss { display: flex; gap: var(--flow-abstand-2); padding: var(--flow-abstand-2) calc(var(--lib-einschub) + 12px) var(--flow-abstand-3) var(--flow-abstand-3); border-top: 1px solid var(--flow-linie); }

.lib-zahl { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--flow-radius-rund);
  background: color-mix(in srgb, var(--flow-text) 7%, transparent); color: var(--flow-text-leise); font: 700 .8rem/1 var(--flow-schrift-text); }

/* ---------- Leseseite: gemeinsame Teile ---------- */
.lib-h1 { margin: var(--flow-abstand-2) 0 var(--flow-abstand-2); font: 500 clamp(2rem, 4.4vw, 3.4rem)/1.06 var(--flow-schrift-anzeige); letter-spacing: -.025em; text-wrap: balance; }
.lib-h1--eintrag { font-size: clamp(1.9rem, 4vw, 3rem); }
.lib-h2 { margin: var(--flow-abstand-2) 0 0; font: 500 clamp(1.6rem, 3.2vw, 2.4rem)/1.1 var(--flow-schrift-anzeige); letter-spacing: -.02em; }
.lib-h2 em, .lib-h1 em { font-style: italic; font-weight: 400; color: var(--flow-akzent); }
.lib-abschnitt { margin-top: var(--flow-abstand-7); }
.lib-abschnitt__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--flow-abstand-4); margin-bottom: var(--flow-abstand-4); }
.lib-nummer { color: var(--flow-text-leise); font: 400 .9rem/1 var(--flow-schrift-anzeige); letter-spacing: .08em; }
.lib-strich { display: inline-block; width: 28px; height: 1px; margin-right: 10px; vertical-align: middle; background: var(--flow-ornament-akzent); }
.lib-pfeil { color: var(--flow-text-leise); font: 600 1.2rem/1 var(--flow-schrift-text); }
.lib-krumen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--flow-abstand-3); font: 500 .85rem/1.4 var(--flow-schrift-text); color: var(--flow-text-leise); }
.lib-krumen a { color: var(--flow-text-leise); }
.lib-krumen span[aria-current] { color: var(--flow-text); }
.lib-typ { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; border-radius: var(--flow-radius-rund);
  background: color-mix(in srgb, var(--typ) 12%, var(--flow-flaeche)); color: color-mix(in srgb, var(--typ) 80%, var(--flow-text));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--typ) 30%, transparent); font: 700 .74rem/1.4 var(--flow-schrift-text); letter-spacing: .1em; text-transform: uppercase; }
.lib-typ svg { width: 18px; height: 18px; }
.lib-zeichen-svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Eingang (aus Pack 1.0) ---------- */
.lib-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--flow-abstand-6); align-items: center; }
.lib-hero .flow-titel { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.lib-hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--flow-abstand-3); align-items: center; margin-top: var(--flow-abstand-4); }
.lib-hero__kunst { position: relative; display: grid; justify-items: end; padding: var(--flow-abstand-4) 0 var(--flow-abstand-6); }
.lib-orbit { position: absolute; border-radius: 50%; border: 1px solid var(--flow-ornament-licht); pointer-events: none; }
.lib-orbit--1 { width: 112%; aspect-ratio: 1; right: -16%; top: 4%; }
.lib-orbit--2 { width: 70%; aspect-ratio: 1; right: 30%; top: 30%; border-color: color-mix(in srgb, var(--flow-ornament-mitte) 45%, transparent); }
.lib-bogen { position: relative; margin: 0; width: min(100%, 380px); aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 999px 999px var(--flow-radius-l) var(--flow-radius-l); box-shadow: var(--flow-schatten-hub); }
.lib-bogen img { width: 100%; height: 100%; object-fit: cover; }
.lib-bogen figcaption { position: absolute; right: 14px; bottom: 12px; display: grid; justify-items: end; color: var(--flow-tinte-held); font: 700 .62rem/1.5 var(--flow-schrift-text); letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 6px color-mix(in srgb, var(--flow-nacht-schwarz) 60%, transparent); }
.lib-impuls { position: absolute; left: 0; bottom: 4%; width: min(62%, 270px); display: grid; gap: var(--flow-abstand-3); padding: var(--flow-abstand-4);
  rotate: -4deg; border-radius: var(--flow-radius-m); background: var(--flow-notiz-flaeche); color: var(--flow-notiz-text); text-decoration: none;
  box-shadow: var(--flow-schatten-hub); transition: rotate var(--flow-bewegung-hub) var(--flow-bewegung-gleiten), translate var(--flow-bewegung-hub) var(--flow-bewegung-gleiten); }
.lib-impuls:hover { rotate: -2deg; translate: 0 -4px; }
.lib-impuls__oben, .lib-impuls__fuss { display: flex; justify-content: space-between; gap: 8px; font: 700 .6rem/1.5 var(--flow-schrift-text); letter-spacing: .14em; text-transform: uppercase; }
.lib-impuls__oben span { color: var(--flow-ornament-akzent); font-size: 1rem; }
.lib-impuls strong { font: 500 1.45rem/1.12 var(--flow-schrift-anzeige); letter-spacing: -.01em; }
.lib-impuls strong em { color: var(--flow-akzent); font-weight: 400; }
.lib-impuls__fuss { padding-top: var(--flow-abstand-2); border-top: 1px solid color-mix(in srgb, var(--flow-notiz-text) 22%, transparent); }
.lib-ausgabe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--flow-abstand-2) var(--flow-abstand-4); margin-top: var(--flow-abstand-5); padding: var(--flow-abstand-3) 0;
  border-top: 1px solid var(--flow-linie); border-bottom: 1px solid var(--flow-linie); color: var(--flow-text-leise); font: 500 .8rem/1.4 var(--flow-schrift-text); }
.lib-ausgabe i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--flow-ornament-akzent); }

/* ---------- Regale (Befund 2: Zeichen, Fraunces-Titel, Rangfolge) ---------- */
.lib-regale { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--flow-abstand-4); }
.lib-regal { padding: var(--flow-abstand-4) var(--flow-abstand-4) var(--flow-abstand-3); gap: var(--flow-abstand-2); overflow: hidden; }
.lib-regal__kante { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--typ); }
.lib-regal__zeichen { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--typ);
  background: color-mix(in srgb, var(--typ) 13%, var(--flow-flaeche)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--typ) 28%, transparent); }
.lib-regal__zeichen svg { width: 24px; height: 24px; }
.lib-regal__name { margin-top: var(--flow-abstand-1); font: 500 1.5rem/1.1 var(--flow-schrift-anzeige); letter-spacing: -.01em; }
.lib-regal__hinweis { color: var(--flow-text-leise); font: italic 400 .98rem/1.4 var(--flow-schrift-anzeige); }
.lib-regal__fuss { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--flow-abstand-3); border-top: 1px solid var(--flow-linie); }

/* ---------- Im Fokus (hell statt dritter dunkler Block) ---------- */
.lib-fokus { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--flow-abstand-5); align-items: center; margin-top: var(--flow-abstand-7);
  padding: var(--flow-abstand-4); border-radius: var(--flow-radius-xl); background: var(--flow-flaeche-2); box-shadow: inset 0 1px 0 var(--flow-innenlicht); }
.lib-fokus__bild { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--flow-radius-l); }
.lib-fokus__bild img { width: 100%; height: 100%; object-fit: cover; }
.lib-fokus .flow-text { margin: var(--flow-abstand-3) 0 var(--flow-abstand-4); }

/* ---------- Lernwege ---------- */
.lib-wege { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--flow-abstand-4); }
.lib-weg { padding: var(--flow-abstand-4); }
.lib-weg h3 { margin: 0; font: 500 1.35rem/1.15 var(--flow-schrift-anzeige); }
.lib-weg p { margin: 0; color: var(--flow-text-leise); }
.lib-weg ol { margin: var(--flow-abstand-2) 0 0; padding: 0; list-style: none; counter-reset: station; display: grid; gap: 2px; }
.lib-weg li { counter-increment: station; }
.lib-weg li a { display: flex; align-items: center; gap: var(--flow-abstand-2); min-height: 44px; color: var(--flow-text); text-decoration: none; font: 500 .95rem/1.3 var(--flow-schrift-text); }
.lib-weg li a::before { content: counter(station); display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--typ) 14%, var(--flow-flaeche)); color: color-mix(in srgb, var(--typ) 85%, var(--flow-text)); font: 700 .78rem/1 var(--flow-schrift-text); }
.lib-weg li a:hover { color: var(--flow-akzent); }

/* ---------- Regal-Ansicht: kompakte Zeilen (Klapp-Regel 2) ---------- */
.lib-kopfzeile { margin-bottom: var(--flow-abstand-4); }
.lib-filter { display: flex; flex-wrap: wrap; gap: var(--flow-abstand-2); margin: 0 0 var(--flow-abstand-4); }
.lib-zeilen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--flow-linie); }
.lib-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--flow-abstand-3); padding: var(--flow-abstand-3) var(--flow-abstand-2) var(--flow-abstand-3) var(--flow-abstand-4);
  border-bottom: 1px solid var(--flow-linie); color: var(--flow-text); text-decoration: none; box-shadow: inset 3px 0 0 var(--typ);
  transition: background var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten); }
.lib-zeile:hover { background: color-mix(in srgb, var(--typ) 6%, transparent); }
.lib-zeile__titel { font: 500 1.25rem/1.2 var(--flow-schrift-anzeige); }
.lib-zeile__kurz { grid-column: 1; color: var(--flow-text-leise); font-size: .95rem; }
.lib-zeile__meta { grid-column: 1; margin-top: 4px; color: var(--flow-text-leise); font: 600 .74rem/1.4 var(--flow-schrift-text); letter-spacing: .08em; text-transform: uppercase; }
.lib-zeile .lib-pfeil { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.lib-weitere { display: flex; flex-wrap: wrap; gap: var(--flow-abstand-2); margin-top: var(--flow-abstand-5); }
/* Aktiver Filter in einer Chip-Leiste (Orte nach Kategorie, P6.7). */
.lib-weitere .flow-chip[aria-current="page"] { color: var(--flow-text); font-weight: 650; box-shadow: inset 0 -2px 0 var(--typ, var(--flow-text)), var(--flow-schatten); }
.lib-hinweis { color: var(--flow-text-leise); font-size: .9em; text-transform: none; letter-spacing: normal; }
.lib-leer { padding: var(--flow-abstand-5) 0; }

/* ---------- Eintrag: Lesespalte + Infobox, Blättern ---------- */
.lib-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: var(--flow-abstand-6); align-items: start; }
.lib-lead { margin: 0 0 var(--flow-abstand-2); max-width: var(--flow-groesse-lesebreite); font: 400 1.2rem/1.5 var(--flow-schrift-anzeige); color: var(--flow-text); }
.lib-meta { margin: 0; color: var(--flow-text-leise); font: 600 .78rem/1.4 var(--flow-schrift-text); letter-spacing: .08em; text-transform: uppercase; }
.lib-eintrag__bild { margin: var(--flow-abstand-5) 0 var(--flow-abstand-2); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--flow-radius-l); }
.lib-eintrag__bild img { width: 100%; height: 100%; object-fit: cover; }
/* Film eines Medien-Beitrags (Media Hub M3, 05.11.2026): dunkle Bühne, Film nie beschnitten; Hochkant mittig mit Fläche daneben */
.lib-eintrag__film { margin: var(--flow-abstand-5) 0 var(--flow-abstand-2); }
.lib-eintrag__buehne { overflow: hidden; border-radius: var(--flow-radius-l); background: var(--flow-nacht-schwarz); }
.lib-eintrag__buehne video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--flow-nacht-schwarz); }
.lib-eintrag__film--hoch .lib-eintrag__buehne video { width: auto; max-width: 100%; height: min(72vh, 680px); aspect-ratio: 9 / 16; margin-inline: auto; }
.lib-eintrag__film figcaption { display: flex; justify-content: space-between; gap: var(--flow-abstand-3); margin-top: var(--flow-abstand-2);
  color: var(--flow-text-leise); font: 500 .86rem/1.5 var(--flow-schrift-text); }
.lib-eintrag__film .lib-film-fehler { margin-top: var(--flow-abstand-2); }
.lib-film-fehler[hidden], .lib-nur-druck { display: none; }
.lib-text { max-width: var(--flow-groesse-lesebreite); margin-top: var(--flow-abstand-5); }
.lib-text h2 { margin: 0 0 var(--flow-abstand-2); font: 500 1.55rem/1.2 var(--flow-schrift-anzeige); letter-spacing: -.01em; }
.lib-text p { margin: 0; line-height: 1.75; }
.lib-schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: var(--flow-abstand-4); }
.lib-schritte li { counter-increment: schritt; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--flow-abstand-3); }
.lib-schritte li::before { content: counter(schritt); grid-row: span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--typ) 14%, var(--flow-flaeche)); color: color-mix(in srgb, var(--typ) 85%, var(--flow-text)); font: 600 1rem/1 var(--flow-schrift-anzeige); }
.lib-schritte b { font: 650 1rem/1.4 var(--flow-schrift-text); }
.lib-schritte p { margin: 2px 0 0; line-height: 1.7; }
.lib-frage { margin-top: var(--flow-abstand-2) !important; color: var(--flow-akzent); font: italic 400 1.05rem/1.5 var(--flow-schrift-anzeige); }
.lib-mitnehmen { max-width: var(--flow-groesse-lesebreite); margin-top: var(--flow-abstand-5); font-size: .95rem; }
.lib-galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--flow-abstand-2); margin-top: var(--flow-abstand-4); }
.lib-galerie figure { margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--flow-radius-m); }
.lib-galerie img { width: 100%; height: 100%; object-fit: cover; }
.lib-eintrag .flow-hinweis { margin-top: var(--flow-abstand-4); }
.lib-info { position: sticky; top: var(--flow-abstand-5); display: grid; gap: var(--flow-abstand-4); padding: var(--flow-abstand-4); border-radius: var(--flow-radius-l);
  background: var(--flow-flaeche-2); box-shadow: inset 0 3px 0 var(--typ), inset 0 1px 0 var(--flow-innenlicht); }
.lib-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--flow-abstand-3); margin: 0; font-size: .9rem; }
.lib-info dt { color: var(--flow-text-leise); }
.lib-info dd { margin: 0; font-weight: 600; }
.lib-info h2 { margin: 0 0 var(--flow-abstand-2); font: 700 .7rem/1.4 var(--flow-schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--flow-text-leise); }
.lib-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lib-info ul a { display: block; padding: 6px 0; font-weight: 600; text-decoration: none; }
.lib-status { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--flow-text-leise); font: 600 .8rem/1.4 var(--flow-schrift-text); }
.lib-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--flow-ornament-akzent); }
.lib-blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: var(--flow-abstand-3); margin-top: var(--flow-abstand-6); padding-top: var(--flow-abstand-4); border-top: 1px solid var(--flow-linie); }
.lib-blaettern a { display: grid; gap: 4px; padding: var(--flow-abstand-3) var(--flow-abstand-4); border-radius: var(--flow-radius-m); background: var(--flow-flaeche-2);
  color: var(--flow-text); text-decoration: none; font: 500 1.05rem/1.3 var(--flow-schrift-anzeige); }
.lib-blaettern a:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--typ) 40%, transparent); }
.lib-blaettern small { color: var(--flow-text-leise); font: 600 .72rem/1.4 var(--flow-schrift-text); letter-spacing: .08em; text-transform: uppercase; }
.lib-blaettern .lib-blaettern__nach { text-align: right; }

.lib-fuss { margin-top: var(--flow-abstand-7); padding-top: var(--flow-abstand-4); border-top: 1px solid var(--flow-linie); color: var(--flow-text-leise); font: 500 .82rem/1.5 var(--flow-schrift-text); }

/* ---------- Breiten ---------- */
@media (max-width: 1180px) {
  .lib-eintrag { grid-template-columns: minmax(0, 1fr); }
  .lib-info { position: static; }
}
@media (max-width: 900px) {
  /* Handy/Tablet hochkant: Kopfzeile oben, das Inhaltspanel wird zur Schublade (Klappen schreibt keinen Verlauf) */
  .lib-kopf { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--flow-abstand-3);
    padding: 10px var(--flow-abstand-3); background: var(--flow-glas); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--flow-linie); }
  .lib-kopf__marke { display: flex; align-items: center; gap: 10px; color: var(--flow-text); text-decoration: none; font: 600 1.25rem/1 var(--flow-schrift-anzeige); }
  .lib-kopf__marke small { font: 700 .6rem/1 var(--flow-schrift-text); letter-spacing: .22em; text-transform: uppercase; color: var(--flow-text-leise); }
  .lib-kopf .lib-ring { width: 26px; height: 26px; }
  .lib-buch { display: block; padding: var(--flow-abstand-3) var(--flow-abstand-3) var(--flow-abstand-5); }
  .lib-panel { --lib-einschub: 0px; position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(88vw, 340px); max-height: none; margin: 0;
    border-width: 0 var(--lib-rand) 0 0; border-radius: 0 var(--flow-radius-xl) var(--flow-radius-xl) 0; transform: translateX(-105%);
    transition: transform var(--flow-bewegung-hub) var(--flow-bewegung-gleiten); }
  body.lib-schublade-offen .lib-panel { transform: none; box-shadow: var(--flow-schatten-hub); }
  body.lib-schublade-offen { overflow: hidden; }
  .lib-panel__zu { display: grid; place-items: center; justify-self: start; width: var(--flow-groesse-tippflaeche); height: var(--flow-groesse-tippflaeche); padding: 0; border: 0;
    border-radius: 50%; background: color-mix(in srgb, var(--lib-marke-text) 14%, transparent); color: var(--lib-marke-text); font: 600 1.2rem/1 var(--flow-schrift-text); cursor: pointer; }
  .lib-schleier { position: fixed; inset: 0; z-index: 39; background: color-mix(in srgb, var(--flow-nacht-schwarz) 45%, transparent); }
  .lib-seite { min-height: 0; border-radius: var(--flow-radius-l); padding: var(--flow-abstand-5) var(--flow-abstand-4); box-shadow: var(--flow-schatten-hub); }
  .lib-baum { margin-right: 0; }
  .lib-hero { grid-template-columns: minmax(0, 1fr); gap: var(--flow-abstand-4); }
  .lib-hero__kunst { justify-items: center; padding-bottom: var(--flow-abstand-7); }
  .lib-bogen { width: min(78%, 320px); }
  .lib-impuls { left: 2%; bottom: 0; }
  .lib-fokus { grid-template-columns: minmax(0, 1fr); }
  .lib-abschnitt__kopf { display: block; }
  .lib-nummer { display: none; }
}
@media (max-width: 520px) {
  .lib-blaettern { grid-template-columns: minmax(0, 1fr); }
  .lib-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-impuls { width: 70%; padding: var(--flow-abstand-3); }
  .lib-impuls strong { font-size: 1.2rem; }
}

/* ---------- Druck: nur die Leseseite ---------- */
@media print {
  .lib-kopf, .lib-panel, .lib-schleier, .lib-sprungmarke, .lib-blaettern, .lib-ausgabe, .lib-weitere, .lib-filter, .flow-knopf { display: none !important; }
  body { background: none; }
  .lib-buch { display: block; padding: 0; }
  .lib-seite { border: 0; box-shadow: none; padding: 0; }
  .lib-eintrag { grid-template-columns: minmax(0, 1fr); }
  .lib-info { position: static; box-shadow: none; }
  /* Film: auf Papier das Standbild und die Adresse, nie die leere Filmfläche */
  .lib-eintrag__buehne, .lib-film-fehler { display: none !important; }
  .lib-nur-druck { display: block; }
  img.lib-nur-druck { width: 100%; max-height: 12cm; object-fit: contain; }
  .lib-film-druck { margin-top: var(--flow-abstand-2); font: 500 .86rem/1.5 var(--flow-schrift-text); }
}

/* ── News (chronologisch) und Verweise (04.11.2026) – nur FLOW Tokens 2.0 ── */
.lib-newszeile .lib-zeile__meta { grid-row: 1; margin: 0 0 4px; }
.lib-newszeile .lib-zeile__titel { grid-row: 2; }
.lib-newszeile .lib-zeile__kurz { grid-row: 3; }
.lib-aktuell .lib-zeilen { max-width: var(--flow-groesse-lesebreite); }
.lib-info ul small { display: block; margin-top: -4px; padding-bottom: 6px; color: var(--flow-text-leise); font: 500 .78rem/1.4 var(--flow-schrift-text); }
}
/* Ende @layer flow.produkt */