/* 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 {
/* Blazor shell hooks. Imported D1 and generated FLOW Tokens remain the source of truth. */

/* Event mapping: only canonical FLOW Tokens are composed here; no parallel color palette. */
[data-flow-stimmung="event-nebula"] {
  color-scheme: dark;
  --flow-grund: var(--flow-nacht-tiefblau);
  --flow-flaeche: color-mix(in srgb, var(--flow-nacht-navy) 76%, var(--flow-spektrum-violett));
  --flow-flaeche-2: color-mix(in srgb, var(--flow-nacht-flaeche-2) 74%, var(--flow-spektrum-lavendel));
  --flow-glas: color-mix(in srgb, var(--flow-nacht-navy) 82%, transparent);
  --flow-text: var(--flow-tinte-nacht);
  --flow-text-leise: var(--flow-tinte-nacht-leise);
  --flow-akzent: var(--flow-orange-nacht);
  --flow-fokus: var(--flow-fokus-nacht);
  --flow-linie: color-mix(in srgb, var(--flow-tinte-nacht) 14%, transparent);
  --flow-gewaehlt-flaeche: linear-gradient(135deg, var(--flow-orange-nacht), var(--flow-spektrum-rot), var(--flow-spektrum-lavendel));
  --flow-gewaehlt-text: var(--flow-tinte-held);
  --flow-zweit-flaeche: color-mix(in srgb, var(--flow-tinte-nacht) 7%, transparent);
  --flow-zweit-text: var(--flow-tinte-nacht);
  --flow-ghost-text: var(--flow-orange-hell);
  --flow-rahmen-flaeche: linear-gradient(135deg, var(--flow-nacht-navy), var(--flow-nacht-tiefblau));
  --flow-rahmen-kante: color-mix(in srgb, var(--flow-tinte-nacht) 12%, transparent);
}

:root {
  --lib-shell-pad: var(--flow-abstand-4);
  --lib-shell-gap: var(--flow-abstand-4);
  --lib-shell-header: 72px;
  /* Balance (05.11.2026): Navigation schlanker, Kontext schmaler – der Schwerpunkt liegt auf der Leseseite */
  --lib-shell-left: 256px;
  --lib-shell-right: 280px;
  --lib-shell-radius: calc(var(--flow-radius-xl) + var(--flow-abstand-1));
}

/* ORGANIC LAYERED DEPTH – nur Library (05.11.2026, Manuel: „wende nur auf library an“).
   Fünf Ebenen, jede mit genau EINER Fläche, EINER Kante, EINEM Schatten – nur aus FLOW Tokens 2.1 zusammengesetzt,
   keine neuen Farbwerte, die gemeinsamen Tokens bleiben unberührt. Vorher trug jede Insel den Hover-Schatten
   (schatten-hub): ruhende Fläche und angehobene Karte wirkten gleich hoch.
     0 Grund      – der Raum hinter allem (Ambient-Licht liegt hier)
     1 Fläche     – Inseln: Navigation, Leseseite, Kontext, Kopf-Kapseln
     2 Karte      – liegt auf der Fläche (Regale, Einträge; Bausteine 2.1)
     3 Inhalt     – eingelassene Felder auf Fläche oder Karte (Infobox, Seitenkarten, Fokus)
     4 Bedienung  – angehoben, solange man sie berührt (Hover, Wach, offene Kapsel) */
/* Ein Rollenset fuer die ganze Library (05.11.2026, P3.3). Vorher lagen die Flaechenrollen
   doppelt vor: --lib-ebene-* hier und --flow-depth-* in flow-organic-depth.css. Die Werte sind
   die der Organic-Depth-Fassung, weil die bisher sichtbar gewonnen hat; --flow-depth-* entfaellt.
   Das Praefix --flow- bleibt den erzeugten Tokens vorbehalten, --lib- gehoert der Anwendung. */
:root {
  /* Ebene 0 · Grund */
  /* Bewegung (Regelwerk Motion MO1–MO3, 11.11.2026): Dauern der Dauerbewegung an einer Stelle statt in den Regeln. */
  --lib-dauer-ambient-a: 18s;
  --lib-dauer-ambient-b: 23s;
  --lib-dauer-ambient-c: 20s;
  --lib-dauer-puls: 3.5s;
  --lib-ebene-0: var(--flow-grund);

  /* Ebene 1 · Flaeche: Inseln. Deckend statt Glas - Text steht ruhig, ohne backdrop-filter. */
  --lib-ebene-1: color-mix(in srgb, var(--flow-flaeche) 92%, var(--flow-grund));
  --lib-ebene-1-kante: var(--flow-linie);
  --lib-ebene-1-licht: inset 0 1px 0 var(--lib-innenlicht);
  --lib-ebene-1-schatten: var(--flow-schatten);
  --lib-ebene-1-radius: var(--flow-radius-xl);

  /* Ebene 2 · Karte: liegt auf der Flaeche */
  --lib-ebene-2-schatten: var(--flow-schatten);

  /* Ebene 3 · Inhalt: eingelassene Felder */
  --lib-ebene-3: color-mix(in srgb, var(--flow-flaeche-2) 88%, var(--flow-flaeche));
  --lib-ebene-3-kante: var(--flow-linie);
  --lib-ebene-3-licht: inset 0 1px 0 var(--lib-innenlicht);
  --lib-ebene-3-radius: var(--flow-radius-l);

  /* Ebene 4 · Bedienung: angehoben, solange man sie beruehrt */
  --lib-ebene-4-schatten: var(--flow-schatten-hub);

  /* Rollen, die ebenenuebergreifend gelten */
  --lib-innenlicht: var(--flow-innenlicht);
  --lib-inhalt: var(--flow-text);

  /* Unschärfe nur, wo Inhalt wirklich darunter durchläuft (stehender Kopf); große Inseln ohne – ruhigeres Scrollen */
  --lib-kopf-unschaerfe: blur(12px);
}

/* Scroll-Modell (05.11.2026, Manuel: „Die Seite lässt sich mit dem normalen Mausrad nach unten scrollen“):
   EIN natürlicher Dokument-Scroll wie in der Original-D1 (library-d1.css: Panel sticky, Leseseite wächst).
   Bis hierher war die Shell auf 100dvh festgenagelt, body overflow:hidden, nur die Hauptinsel scrollte –
   das Mausrad wirkte nur über ihr, Ende der Seite und Tastatur-Fokus am Seitenende waren schwer erreichbar.
   Kopf und Seitenspalten bleiben per sticky stehen; nur sie dürfen bei Überlänge einen eigenen Scrollbereich haben. */
html,
body {
  min-height: 100%;
  background: var(--flow-grund);
}

html {
  /* Anker (#regale) und Tastatur-Fokus landen unter dem stehenden Kopf, nicht dahinter */
  scroll-padding-top: calc(var(--lib-shell-header) + 2 * var(--lib-shell-pad));
}

body {
  overflow-x: hidden;
}

.flow-ambient {
  position: fixed;
  z-index: 0;
  width: min(44vw, 760px);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: var(--flow-radius-rund);
  opacity: .24;
  filter: blur(96px);
  animation: flow-ambient-drift var(--lib-dauer-ambient-a) var(--flow-bewegung-ruhig) infinite alternate;
}

.flow-ambient--a {
  top: -24vw;
  left: 20%;
  background: var(--flow-spektrum-violett);
}

.flow-ambient--b {
  right: -18vw;
  bottom: -22vw;
  background: var(--flow-spektrum-cyan);
  animation-duration: var(--lib-dauer-ambient-b);
}

.flow-ambient--c {
  top: 38%;
  left: -20vw;
  background: var(--flow-spektrum-rot);
  animation-duration: var(--lib-dauer-ambient-c);
}

@keyframes flow-ambient-drift {
  to { transform: translate3d(42px, 24px, 0) scale(1.1); }
}

.flow-shell.lib-buch {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: none;
  grid-template-columns: var(--lib-shell-left) minmax(0, 1fr) var(--lib-shell-right);
  grid-template-rows: var(--lib-shell-header) auto;
  align-items: start;
  gap: var(--lib-shell-gap);
  width: min(100%, 1920px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--lib-shell-pad);
}

/* Höhe, ab der die Seitenspalten stehen bleiben: Fenster minus Kopf und Abstände */
:root {
  --lib-shell-sticky-top: calc(var(--lib-shell-header) + 2 * var(--lib-shell-pad));
  --lib-shell-sticky-hoehe: calc(100dvh - var(--lib-shell-header) - 3 * var(--lib-shell-pad));
}

/* Ebene 1 · Fläche. Keine Unschärfe mehr auf den großen Inseln (vorher blur(24px) auf jeder): unter ihnen liegt nur
   der ruhende Grund mit Ambient-Licht, das ohnehin weich ist – die Unschärfe kostete beim Scrollen und brachte nichts. */
.flow-island {
  border: 1px solid var(--lib-ebene-1-kante);
  background: var(--lib-ebene-1);
  box-shadow: var(--lib-ebene-1-schatten), var(--lib-ebene-1-licht);
}

/* Kopf-Kapseln: Ebene 1, schweben aber über dem durchlaufenden Inhalt – nur sie behalten Unschärfe */
.flow-header__capsule {
  border: 1px solid var(--lib-ebene-1-kante);
  background: var(--lib-ebene-1);
  box-shadow: var(--lib-ebene-1-schatten), var(--lib-ebene-1-licht);
  backdrop-filter: var(--lib-kopf-unschaerfe);
  -webkit-backdrop-filter: var(--lib-kopf-unschaerfe);
}

.flow-island {
  min-width: 0;
  min-height: 0;
  border-radius: var(--lib-shell-radius);
  /* clip statt hidden: schneidet an den runden Ecken ab, macht die Insel aber NICHT zum Scroll-Container –
     sonst bleibt nichts darin sticky (Infobox im Eintrag) und das Mausrad landet im falschen Bereich. */
  overflow: clip;
}

.lib-kopf.flow-header {
  position: sticky;
  top: var(--lib-shell-pad);
  z-index: 20;
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: var(--lib-shell-left) minmax(0, 1fr) auto;
  gap: var(--lib-shell-gap);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.flow-header__capsule {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--flow-groesse-tippflaeche);
  padding: 0 var(--flow-abstand-5);
  border-radius: var(--flow-radius-rund);
  color: var(--flow-text);
  text-decoration: none;
}

.flow-header__brand {
  gap: var(--flow-abstand-3);
  font-weight: 800;
  letter-spacing: -.025em;
}

.flow-header__brand .lib-ring {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

.flow-header__brand-type small {
  color: var(--flow-akzent);
  font-size: 1em;
}

.lib-suche.flow-header__search {
  position: static;
  gap: var(--flow-abstand-3);
  margin: 0;
  padding: 0 var(--flow-abstand-3) 0 var(--flow-abstand-5);
}

.flow-header__search > span {
  color: var(--flow-text-leise);
  font-size: 1.35rem;
}

.flow-header__search input {
  flex: 1 1 auto;
  min-width: 80px;
  height: var(--flow-groesse-tippflaeche);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--flow-text);
  font: inherit;
}

.flow-header__search input::placeholder { color: var(--flow-text-leise); }

.flow-header__search > a,
.flow-header__login,
.flow-theme-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--flow-groesse-tippflaeche);
  padding-inline: var(--flow-abstand-4);
  border: 1px solid var(--flow-linie);
  border-radius: var(--flow-radius-rund);
  background: var(--flow-zweit-flaeche);
  color: var(--flow-zweit-text);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.flow-header__search > a:hover,
.flow-header__login:hover {
  border-color: var(--flow-fokus);
  transform: translateY(var(--flow-zustand-hub-chip));
}

.flow-header__status {
  position: relative;
  justify-content: flex-end;
  gap: var(--flow-abstand-2);
  padding-inline: var(--flow-abstand-3);
  border-color: transparent;
  background:
    linear-gradient(var(--lib-ebene-1), var(--lib-ebene-1)) padding-box,
    linear-gradient(90deg, transparent, var(--flow-spektrum-amber), var(--flow-spektrum-tuerkis), transparent) border-box;
}

.flow-event-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--flow-abstand-2);
  white-space: nowrap;
  color: var(--flow-akzent);
  font-size: .72rem;
  font-weight: 800;
}

.flow-theme-status { white-space: nowrap; }
.flow-theme-status { cursor: pointer; font: inherit; }
.flow-header__login { white-space: nowrap; }
.flow-header__login small { margin-left: 4px; opacity: .78; }
.flow-header__search input { min-width: 160px; }

.flow-header__menu {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--flow-abstand-2);
  min-height: var(--flow-groesse-tippflaeche);
  padding-inline: var(--flow-abstand-4);
  border: 1px solid var(--flow-linie);
  border-radius: var(--flow-radius-rund);
  background: var(--flow-zweit-flaeche);
  color: var(--flow-zweit-text);
}

/* 05.11.2026 Besucher-Stimmung (Manuel: „2 themes umschaltbar für user“): Tokens-2.1-Segment im Kopf.
   Ohne laufendes js/flow-stimmung.js bleibt es aus – ein Umschalter, der nichts tut, wäre schlechter als keiner.
   Bei Composer-Stimmung rendert der Server es gar nicht (dann steht dort die Kapsel „· vom Composer gesetzt“). */
.flow-stimmung { display: none; }
:root[data-flow-stimmung-bereit] .flow-stimmung { display: inline-flex; }
/* Physischer Traeger: 3px Randlippe, Lichtkante und ruhiger Kontaktschatten. */
.flow-header__status .flow-stimmung {
  flex: none;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--lib-ebene-1-kante);
  border-radius: var(--flow-radius-rund);
  background: color-mix(in srgb, var(--lib-ebene-3) 78%, var(--lib-ebene-1));
  box-shadow:
    inset 0 1px 0 var(--lib-ebene-3-licht),
    inset 0 -2px 0 color-mix(in srgb, var(--flow-text) 10%, transparent),
    var(--lib-ebene-2-schatten);
}

.flow-stimmung .flow-segment__wahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--flow-abstand-2);
  min-width: var(--flow-groesse-tippflaeche);
  min-height: var(--flow-groesse-tippflaeche);
  border: 1px solid transparent;
  border-radius: var(--flow-radius-rund);
}

/* Aktive Wahl folgt dem <html>-Attribut (stimmt so schon beim ersten Zeichnen, auch mit gespeicherter Wahl);
   aria-pressed zieht flow-stimmung.js für Screenreader nach. Werte = Tokens-2.1-Segment aktiv. */
:root[data-flow-stimmung="papier"] .flow-segment__wahl[data-stimmung-wahl="papier"],
:root[data-flow-stimmung="abend"] .flow-segment__wahl[data-stimmung-wahl="abend"],
:root[data-flow-stimmung="nacht"] .flow-segment__wahl[data-stimmung-wahl="nacht"],
:root[data-flow-stimmung="event-nebula"] .flow-segment__wahl[data-stimmung-wahl="event-nebula"] {
  background: var(--flow-segment-aktiv);
  color: var(--flow-segment-aktiv-text);
  border-color: color-mix(in srgb, var(--flow-fokus) 28%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--flow-tinte-held) 30%, transparent),
    0 2px 6px color-mix(in srgb, var(--flow-text) 14%, transparent);
}

/* Zeichen: Mondsichel für dunkle Stimmungen, voller Kreis mit Lichtkranz für Papier */
.flow-stimmung__zeichen {
  flex: none;
  width: .95em;
  height: .95em;
  border-radius: 50%;
  box-shadow: inset .3em -.12em 0 0 currentColor;
}

.flow-segment__wahl[data-stimmung-wahl="papier"] .flow-stimmung__zeichen {
  width: .62em;
  height: .62em;
  margin: .165em;
  background: currentColor;
  box-shadow: 0 0 0 .14em color-mix(in srgb, currentColor 32%, transparent);
}

.flow-sidebar-left.lib-panel {
  position: sticky;
  top: var(--lib-shell-sticky-top);
  z-index: 3;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  width: auto;
  height: auto;
  /* steht beim Scrollen; ist die Navigation länger als das Fenster, scrollt nur sie selbst */
  max-height: var(--lib-shell-sticky-hoehe);
  overscroll-behavior: contain;
  padding: var(--flow-abstand-4);
  border-radius: var(--lib-shell-radius);
  overflow: hidden;
  background: var(--lib-ebene-1);
}

.flow-sidebar-left .lib-marke {
  gap: var(--flow-abstand-2);
  padding: 0 0 var(--flow-abstand-4);
  border-radius: var(--flow-radius-l);
  background: transparent;
  color: var(--flow-text);
}

.flow-sidebar-left .lib-cover {
  inline-size: 100%;
  max-inline-size: 240px;
  justify-self: center;
  aspect-ratio: 480 / 595;
  border-radius: var(--flow-radius-l);
  background: var(--lib-ebene-3);
  box-shadow:
    var(--lib-ebene-2-schatten),
    0 0 0 1px var(--lib-ebene-1-kante),
    inset 0 1px 0 var(--lib-ebene-3-licht);
}

.flow-sidebar-left .lib-cover img {
  object-position: 50% 48%;
}

.flow-sidebar-left .lib-cover::after {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--flow-nacht-schwarz) 8%, transparent) 20%, transparent 45%),
    linear-gradient(0deg, color-mix(in srgb, var(--flow-nacht-schwarz) 78%, transparent), transparent 58%);
}

.flow-sidebar-left .lib-marke__kicker { color: var(--flow-akzent); }
.flow-sidebar-left .lib-marke__text { color: var(--flow-text-leise); }

.flow-sidebar-left .lib-panel__zu {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--flow-abstand-2);
  inset-inline-start: var(--flow-abstand-2);
  border: 1px solid color-mix(in srgb, var(--flow-tinte-held) 32%, transparent);
  background: color-mix(in srgb, var(--flow-nacht-schwarz) 58%, transparent);
  color: var(--flow-tinte-held);
}

.flow-sidebar-left .lib-baum {
  flex: 1 1 auto;
  min-height: 0;
  padding-inline: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-mask-image: none;
  mask-image: none;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--flow-text) 26%, transparent) transparent;
}

.flow-sidebar-left .lib-baum__regal-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--flow-groesse-tippflaeche);
  align-items: center;
}

.flow-sidebar-left .lib-baum__regal-kopf .lib-baum__zeile { min-width: 0; }

.flow-sidebar-left .lib-baum__klapp {
  width: var(--flow-groesse-tippflaeche);
  min-width: var(--flow-groesse-tippflaeche);
}

.flow-sidebar-left .lib-baum__unter {
  margin: 0 !important;
  margin-block-end: var(--flow-abstand-2) !important;
  margin-inline-start: var(--flow-groesse-tippflaeche) !important;
  border-left: 0;
  border-inline-start: 1px solid var(--flow-linie);
}

.flow-sidebar-left .lib-baum__blatt {
  min-height: var(--flow-groesse-tippflaeche);
}

.flow-sidebar-left .lib-baum__zeile,
.flow-sidebar-left .lib-baum__klapp {
  min-height: var(--flow-groesse-tippflaeche);
  border-radius: var(--flow-radius-m);
}

.flow-sidebar-left .lib-baum__zeile.active {
  border-color: var(--flow-wahl-kante);
  background: var(--flow-wahl-flaeche);
  color: var(--flow-wahl-text);
  font-weight: 800;
}

.flow-sidebar-left .lib-baum__zeile.active::after {
  content: "Aktiv";
  margin-left: auto;
  font-size: .56rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Ohne Klapp-Button gehört die ganze Zeile dem Regal-Link (der Button erscheint erst mit echten Unterpunkten) */
.flow-sidebar-left .lib-baum__regal-kopf > .lib-baum__zeile:only-child { grid-column: 1 / -1; }

/* „Mehr entdecken“: details/summary, sieht aus wie eine Zeile des Baums und klappt ohne Skript */
.lib-baum__mehr > summary {
  justify-content: space-between;
  list-style: none;
  color: var(--flow-text-leise);
  cursor: pointer;
}
.lib-baum__mehr > summary::-webkit-details-marker { display: none; }
.lib-baum__mehr > summary > span { transition: transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten); }
.lib-baum__mehr[open] > summary > span { transform: rotate(90deg); }
.lib-baum__mehr > summary:focus-visible { outline: 3px solid var(--flow-fokus); outline-offset: -3px; }

/* Die Suche der Schublade gibt es nur bis 900 px; darüber steht sie im Kopf */
.lib-panel__suche { display: none; }

/* Das Portraet-Cover traegt die Marke; Titel und Text darunter bleiben als klare Orientierung erhalten. */
.flow-sidebar-left .lib-marke__titel { font-size: 1.6rem; }
.flow-sidebar-left .lib-marke__text { font-size: .9rem; }

.flow-main.lib-seite {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  width: auto;
  /* wächst mit dem Inhalt; mindestens so hoch wie die Navigation daneben (D1: „wie ein aufgeschlagenes Buch“) */
  min-height: var(--lib-shell-sticky-hoehe);
  padding: clamp(var(--flow-abstand-5), 3vw, var(--flow-abstand-7));
  border: 1px solid var(--lib-ebene-1-kante);
  border-radius: var(--lib-shell-radius);
  /* Ebene 1: deckend, damit lange Texte ruhig auf einer Flaeche stehen */
  background: var(--lib-ebene-1);
  box-shadow: var(--lib-ebene-1-schatten), var(--lib-ebene-1-licht);
  overflow: clip;
}

.flow-main .lib-hero { border-radius: var(--lib-shell-radius); }
.flow-main .lib-eintrag { grid-template-columns: minmax(0, 1fr); }

/* Typografie nach SPALTENbreite statt Fensterbreite (05.11.2026): D1 rechnete mit vw für eine 980-px-Seite;
   in der Mitte des Dreispalters wurden die Überschriften dadurch zu groß. cqi = 1 % der Leseseite. */
.flow-main.lib-seite { container: lib-seite / inline-size; }
.flow-main .lib-h1 { font-size: clamp(1.9rem, 5.4cqi, 3.2rem); }
.flow-main .lib-h1--eintrag { font-size: clamp(1.8rem, 4.8cqi, 2.8rem); }
.flow-main .lib-h2 { font-size: clamp(1.45rem, 3.6cqi, 2.2rem); }
.flow-main .lib-lead { font-size: clamp(1.05rem, 1.9cqi, 1.2rem); }

/* Eintrag: Infobox neben dem Text, sobald die Leseseite breit genug ist (D1-Aufbau); sonst darunter */
.flow-main .lib-info { top: var(--lib-shell-sticky-top); }
@container lib-seite (min-width: 900px) {
  .flow-main .lib-eintrag { grid-template-columns: minmax(0, 1fr) 240px; }
}

@container lib-seite (max-width: 760px) {
  .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); }
}

/* FLOW Tokens 2.1 Touch (05.11.2026): Wach-Zustand, Vorschau-Button, Entfaltung, Schublade, Feder/Puls, Kapsel
   und Mitte kommen aus flow-bausteine.css 2.1. Hier steht nur, was die Regalkarte der Library zusätzlich braucht.
   Vorher standen hier eigene Touch-Nachbauten der Bridge (Karte, Umschalter, zweite Entfaltung, eigene Touch-Werte),
   die 2.1 widersprachen (Pflicht-Doppeltipp, „Mitte“ global). */
.lib-regal {
  transition:
    transform var(--flow-dauer-feder) var(--flow-bewegung-feder),
    background var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten),
    box-shadow var(--flow-dauer-feder) var(--flow-bewegung-gleiten);
}

.lib-regal__hauptlink {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.lib-regal__vorschau {
  justify-self: start;
  min-height: var(--flow-groesse-tippflaeche);
  margin-top: var(--flow-abstand-2);
}
.lib-regal > .flow-entfaltung .flow-knopf { width: 100%; }

/* Desktop (Manuel 05.11.2026: „klicken und dann fährt was aus … es soll desktop funktionabel sein“):
   Hover hebt die Karte an, die Vorschau klappt auch mit der Maus per Klick aus. Nur Feder/Puls bleibt Touch. */
@media (hover: hover) and (pointer: fine) {
  .lib-regal:hover {
    --flow-r0: var(--flow-kontur-2-licht);
    --flow-r45: var(--flow-kontur-2-mitte);
    --flow-r100: var(--flow-kontur-2-schatten);
    transform: translateY(var(--flow-zustand-hub)) scale(var(--flow-zustand-zoom-karte));
    /* Ebene 4 · Bedienung: angehoben, solange der Zeiger darauf liegt */
    box-shadow: var(--lib-ebene-1-licht), var(--lib-ebene-4-schatten);
  }

  /* Stimmungs-Segment: hebt sich wie die Kopf-Buttons; beim Drücken gilt das 2.1-Eindrücken */
  .flow-stimmung .flow-segment__wahl:hover:not(:active) { transform: translateY(var(--flow-zustand-hub-chip)); }
}

@media (hover: none) and (pointer: coarse) {
  /* Hover bleibt auf Touch nicht kleben */
  .flow-karte:is(a, button, [tabindex]):hover {
    transform: none;
    --flow-r0: var(--flow-kontur-1-licht);
    --flow-r45: var(--flow-kontur-1-mitte);
    --flow-r100: var(--flow-kontur-1-schatten);
    box-shadow: inset 0 1px 0 var(--flow-innenlicht), var(--flow-schatten);
  }

  .flow-karte:hover .flow-karte__bild img { transform: none; }

  /* Regalbaum: ein Hover-Grund bliebe nach dem Tipp stehen und sähe aus wie eine zweite aktive Zeile.
     (Die Regeln .is-pressing/.is-rebounding standen hier noch; kein Skript setzte sie mehr – entfernt 11.11.2026.) */
  .lib-baum__zeile:not(.active):hover,
  .lib-baum__blatt:hover { background: none; }

  .lib-regal.is-wach .lib-regal__zeichen {
    transform: rotate(8deg) scale(1.1);
    transition: transform var(--flow-bewegung-hub) var(--flow-bewegung-feder);
  }
}

.flow-sidebar-right {
  position: sticky;
  top: var(--lib-shell-sticky-top);
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--flow-abstand-4);
  max-height: var(--lib-shell-sticky-hoehe);
  padding: var(--flow-abstand-5) var(--flow-abstand-4);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.flow-context__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--flow-text-leise);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: var(--flow-kicker-sperrung);
}

.flow-pulse {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--flow-radius-rund);
  background: var(--flow-akzent);
  transform-origin: center;
  animation: lib-pulse-dot var(--lib-dauer-puls) var(--flow-bewegung-ruhig) infinite;
}

.flow-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--flow-akzent) 18%, transparent);
  pointer-events: none;
  animation: lib-pulse-ring var(--lib-dauer-puls) var(--flow-bewegung-ruhig) infinite;
}

@keyframes lib-pulse-dot {
  50% { transform: scale(1.12); opacity: .72; }
}

@keyframes lib-pulse-ring {
  0%, 30% { transform: scale(.55); opacity: .62; }
  72%, 100% { transform: scale(1.65); opacity: 0; }
}

/* P8 · eine Medienbuehne fuer Media Hub, Cinema und Eintrag. Statischer Halo statt grosser Filteranimation. */
.lib-media-stage {
  position: relative;
  isolation: isolate;
  padding: clamp(var(--flow-abstand-2), 2vw, var(--flow-abstand-5));
  border: 1px solid transparent;
  border-radius: var(--flow-radius-xl);
  background:
    linear-gradient(var(--lib-ebene-3), var(--lib-ebene-3)) padding-box,
    linear-gradient(145deg, var(--flow-spektrum-amber), var(--flow-spektrum-tuerkis), var(--flow-spektrum-cyan)) border-box;
  box-shadow:
    var(--lib-ebene-2-schatten),
    0 0 32px color-mix(in srgb, var(--flow-spektrum-tuerkis) 16%, transparent),
    inset 0 1px 0 var(--lib-ebene-3-licht);
}

.lib-media-stage .lib-eintrag__buehne {
  padding: clamp(4px, 1vw, var(--flow-abstand-3));
  border: 1px solid color-mix(in srgb, var(--flow-tinte-held) 18%, transparent);
  border-radius: var(--flow-radius-l);
  background: var(--flow-nacht-schwarz);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--flow-spektrum-amber) 14%, transparent),
    inset 0 12px 28px color-mix(in srgb, var(--flow-nacht-schwarz) 72%, transparent);
}

.lib-media-stage .lib-eintrag__buehne video {
  border-radius: var(--flow-radius-m);
}

.lib-media-stage figcaption {
  align-items: center;
  min-height: var(--flow-groesse-tippflaeche);
  margin: var(--flow-abstand-2) var(--flow-abstand-1) 0;
}

.lib-media-stage figcaption a {
  display: inline-flex;
  align-items: center;
  min-height: var(--flow-groesse-tippflaeche);
}

/* Ebene 3 · Inhalt: eingelassen – Kante und Innenlicht, kein Außenschatten */
.flow-side-card,
.flow-sidebar-right .lib-info {
  border: 1px solid var(--lib-ebene-3-kante);
  border-radius: var(--lib-ebene-3-radius);
  background: var(--lib-ebene-3);
  box-shadow: var(--lib-ebene-3-licht);
}


.flow-side-card,
.flow-sidebar-right .lib-info {
  position: static;
  display: grid;
  gap: 0;
  padding: var(--flow-abstand-4);
}

.flow-side-card h2,
.flow-sidebar-right .lib-info h2 {
  margin: 0 0 var(--flow-abstand-3);
  color: var(--flow-text);
  font: 800 .78rem/1.4 var(--flow-schrift-text);
  letter-spacing: .01em;
  text-transform: none;
}

.flow-side-card > a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--flow-abstand-3);
  min-height: var(--flow-groesse-tippflaeche);
  padding-block: var(--flow-abstand-2);
  border-top: 1px solid var(--flow-linie);
  color: var(--flow-text);
  text-decoration: none;
}

.flow-side-card > a > span:first-child {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: var(--flow-radius-s);
  background: var(--flow-wahl-flaeche);
  color: var(--flow-wahl-text);
}

.flow-side-card b,
.flow-side-card small { display: block; }
.flow-side-card b { font-size: .73rem; }
.flow-side-card small { color: var(--flow-text-leise); font-size: .62rem; }
.flow-side-card > a > span:last-child { color: var(--flow-akzent); }

.flow-side-card__fuss { margin: var(--flow-abstand-3) 0 0; color: var(--flow-text-leise); font-size: .72rem; }

.lib-baum__regal > .lib-baum__unter[hidden] { display: none !important; }
.lib-design-media .lib-film-druck { display: none; }

/* Rundbogen ohne freigegebenes Bild (05.11.2026): bewusst gestaltete Fläche aus Tokens – warmes Licht oben,
   Waldgrün unten, ein Ornamentring. Kein Text, kein kaputtes Bild, keine erfundenen Inhalte. Gleiche Maße wie mit Bild. */
/* Ebenen auf der Startseite: Rundbogen und Impulskarte sind Ebene 2 (D1 gab beiden den Hover-Schatten);
   die Impulskarte ist ein Link und hebt sich beim Zeigen auf Ebene 4. D1-Datei bleibt unverändert. */
.flow-main .lib-bogen { box-shadow: var(--lib-ebene-2-schatten); }
.flow-main .lib-impuls { box-shadow: var(--lib-ebene-2-schatten); }
.flow-main .lib-impuls:hover { box-shadow: var(--lib-ebene-4-schatten); }

.flow-main .lib-bogen--ruhe {
  background:
    radial-gradient(120% 80% at 32% 14%, color-mix(in srgb, var(--flow-akzent-honig) 42%, transparent), transparent 64%),
    radial-gradient(100% 70% at 78% 96%, color-mix(in srgb, var(--flow-akzent-wald) 48%, transparent), transparent 72%),
    linear-gradient(172deg, var(--flow-flaeche-2), var(--flow-flaeche));
  /* Rundbogen ist Ebene 2 (Karte auf der Leseseite) – gleicher Schatten wie die Karten, nicht der Hover-Schatten */
  box-shadow: var(--lib-ebene-2-schatten), inset 0 0 0 1px var(--lib-ebene-1-kante);
}

.lib-bogen__ring {
  position: absolute;
  inset: 16% 20% auto;
  aspect-ratio: 1;
  border: 1px solid var(--flow-ornament-mitte);
  border-radius: var(--flow-radius-rund);
}

.lib-impuls__fuss span:last-child { white-space: nowrap; }


/* ================= P4.1 · Zonen links und rechts einzeln klappbar (05.11.2026) =================
   Jeder Zustand bekommt seine eigene Spaltenzahl. Eine Spalte auf 0 zu setzen wuerde ihre Luecke
   stehen lassen; deshalb wird das Raster umgebaut und die Mitte neu zugewiesen. So waechst die
   Mitte lueckenlos nach. Zustand steht als data-links / data-rechts an der Shell, damit CSS und
   JS dieselbe Quelle lesen. Klappen ist kein Verlaufseintrag (flow-klapp-navigation, Regel 7). */

.flow-shell.lib-buch[data-links="zu"] {
  grid-template-columns: minmax(0, 1fr) var(--lib-shell-right);
}
.flow-shell.lib-buch[data-rechts="zu"] {
  grid-template-columns: var(--lib-shell-left) minmax(0, 1fr);
}
.flow-shell.lib-buch[data-links="zu"][data-rechts="zu"] {
  grid-template-columns: minmax(0, 1fr);
}

.flow-shell.lib-buch[data-links="zu"] > .flow-sidebar-left,
.flow-shell.lib-buch[data-rechts="zu"] > .flow-sidebar-right {
  display: none;
}
.flow-shell.lib-buch[data-links="zu"] > .flow-main.lib-seite { grid-column: 1; }
.flow-shell.lib-buch[data-links="zu"] > .flow-sidebar-right { grid-column: 2; }

/* Die beiden Schalter im Kopf: Tippflaeche aus Tokens 2.1, Zustand sichtbar ohne Farbe allein */
.flow-zone-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--flow-abstand-1);
  min-height: var(--flow-groesse-tippflaeche);
  min-width: var(--flow-groesse-tippflaeche);
  padding-inline: var(--flow-abstand-3);
  border: 1px solid var(--lib-ebene-1-kante);
  border-radius: var(--flow-radius-rund);
  background: var(--flow-zweit-flaeche);
  color: var(--flow-text);
  font: 650 .8rem/1 var(--flow-schrift-text);
  cursor: pointer;
}
.flow-zone-schalter__zeichen { font-size: .9em; line-height: 1; }
.flow-zone-schalter[aria-expanded="false"] {
  background: transparent;
  color: var(--flow-text-leise);
}
.flow-zone-schalter[aria-expanded="false"] .flow-zone-schalter__zeichen { opacity: .55; }

/* Der rechte Schalter erscheint nur mit der Kontextspalte; der linke bleibt bis 901px. */
@media (max-width: 1439px) {
  .flow-zone-schalter[data-zone-schalter="rechts"] { display: none; }
}

/* Kontextspalte erst ab 1440 px – darunter gehört der Platz der Leseseite (Manuel: „Mehr verfügbare Breite“).
   Ihr Inhalt fehlt dann nicht: Regale stehen links, Neues auf der Startseite, Druckatelier im Regalbaum. */
@media (max-width: 1439px) {
  .flow-shell.lib-buch { grid-template-columns: var(--lib-shell-left) minmax(0, 1fr); }
  .flow-shell.lib-buch[data-links="zu"] { grid-template-columns: minmax(0, 1fr); }
  .flow-sidebar-right { display: none; }
}

@media (max-width: 1280px) {
  :root { --lib-shell-left: 240px; }
  .flow-header__search > a { display: none; }
}

@media (max-width: 1100px) {
  .flow-theme-status { display: none; }
}

/* Niedrige Fenster mit fester linker Spalte, NUR auf Touch-Geräten (Tablet quer): Das Hochkant-Cover nahm dem
   Regalbaum den Platz – bei 1024 × 768 blieben ihm 146 px. Erst wird das Cover zum Querformat, darunter weicht es ganz.
   Mit Maus oder Trackpad (Laptop) bleibt das Hochkant-Cover in jeder Fensterhöhe (Manuel 11.11.2026). */
@media (min-width: 901px) and (max-height: 900px) and (hover: none) and (pointer: coarse) {
  .flow-sidebar-left .lib-cover { aspect-ratio: 16 / 10; }
  .flow-sidebar-left .lib-marke__text { display: none; }
}
@media (min-width: 901px) and (max-height: 720px) and (hover: none) and (pointer: coarse) {
  .flow-sidebar-left .lib-cover { display: none; }
}

@media (max-width: 900px) {
  /* Die Schublade ersetzt die linke Zone; gespeichertes Zuklappen darf sie nicht ausblenden. */
  .flow-zone-schalter[data-zone-schalter="links"] { display: none; }
  .flow-shell.lib-buch[data-links="zu"] > .flow-sidebar-left { display: flex; }

  /* gleiches Scroll-Modell wie am Desktop – nur die Maße ändern sich */
  :root { --lib-shell-header: 64px; --lib-shell-pad: var(--flow-abstand-3); }

  .flow-ambient { opacity: .16; }

  .flow-shell.lib-buch {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding: var(--lib-shell-pad);
  }

  .lib-kopf.flow-header {
    position: sticky;
    top: var(--flow-abstand-3);
    grid-column: 1;
    /* Touch 11.11.2026: Öffner links (dort fährt die Schublade herein), Marke in der Mitte, Stimmung rechts */
    grid-template-columns: auto minmax(0, 1fr) auto;
    height: 64px;
  }

  .flow-header__menu { grid-column: 1; align-self: center; }
  .flow-header__brand { grid-column: 2; }
  .flow-header__search { display: none !important; }
  .flow-header__status { grid-column: 3; }
  .flow-event-pill,
  .flow-theme-status,
  .flow-header__login { display: none; }
  .flow-header__menu { display: inline-flex; }
  /* Ohne sichtbaren Stimmungs-Umschalter bliebe rechts eine leere Kapsel stehen */
  .flow-header__status:not(:has(.flow-stimmung)),
  :root:not([data-flow-stimmung-bereit]) .flow-header__status { display: none; }

  .flow-sidebar-left.lib-panel {
    position: fixed;
    inset: var(--flow-abstand-3) auto var(--flow-abstand-3) var(--flow-abstand-3);
    z-index: 30;
    display: flex;
    width: min(88vw, 340px);
    height: auto;
    max-height: none;
    transform: translateX(calc(-100% - var(--flow-abstand-5)));
    transition: transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten);
    /* Senkrecht scrollt der Baum; waagerecht gehört die Bewegung dem Wischen-zum-Schließen (flow-shell.js) */
    touch-action: pan-y pinch-zoom;
  }

  .lib-schublade-offen .flow-sidebar-left { transform: translateX(0); }

  /* Kompakter Schubladen-Kopf (Touch 11.11.2026): Cover, Kicker, Text und „Direkt üben“ nahmen 489 px –
     dem Regalbaum blieben am Handy 269 px, quer 16 px. In der Schublade zählt der Weg, nicht das Titelbild;
     „Direkt üben“ ist dasselbe Ziel wie die Zeile „Übungen“ zwei Zeilen darunter. */
  .flow-sidebar-left .lib-marke {
    grid-template-columns: var(--flow-groesse-tippflaeche) minmax(0, 1fr);
    align-items: center;
    gap: var(--flow-abstand-3);
    padding: 0 0 var(--flow-abstand-3);
  }
  .flow-sidebar-left :is(.lib-cover, .lib-marke__kicker, .lib-marke__text, .lib-marke__knopf) { display: none; }
  .flow-sidebar-left .lib-marke__titel { font-size: 1.35rem; }
  .flow-sidebar-left .lib-panel__zu {
    position: static;
    display: grid;
    place-items: center;
    min-width: var(--flow-groesse-tippflaeche);
    min-height: var(--flow-groesse-tippflaeche);
    border: 1px solid var(--flow-linie);
    background: var(--flow-zweit-flaeche);
    color: var(--flow-zweit-text);
  }

  /* Suche in der Schublade: im Kopf ist sie bis 900 px ausgeblendet */
  .lib-panel__suche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--flow-groesse-tippflaeche);
    align-items: center;
    flex: none;
    margin-bottom: var(--flow-abstand-3);
    border: 1px solid var(--flow-linie);
    border-radius: var(--flow-radius-rund);
    background: var(--lib-ebene-3);
  }
  .lib-panel__suche:focus-within { outline: 2px solid var(--flow-fokus); outline-offset: 2px; }
  .lib-panel__suche input {
    min-width: 0;
    height: var(--flow-groesse-tippflaeche);
    padding: 0 0 0 var(--flow-abstand-4);
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--flow-text);
    font: inherit;
  }
  .lib-panel__suche input::placeholder { color: var(--flow-text-leise); }
  .lib-panel__suche button {
    width: var(--flow-groesse-tippflaeche);
    height: var(--flow-groesse-tippflaeche);
    padding: 0;
    border: 0;
    border-radius: var(--flow-radius-rund);
    background: transparent;
    color: var(--flow-text-leise);
    font-size: 1.35rem;
    cursor: pointer;
  }

  .flow-main.lib-seite {
    grid-column: 1;
    grid-row: 2;
    min-height: calc(100dvh - 100px);
    /* Zuschnitt des dekorativen Orbits bleibt auch unter 900px erhalten. */
    overflow: clip;
  }

  /* Der Schleier steht in der Shell: über Kopf (30) und Leseseite, unter der Schublade (40) */
  .lib-schleier {
    position: fixed;
    z-index: 35;
    inset: 0;
    background: color-mix(in srgb, var(--flow-nacht-schwarz) 68%, transparent);
    backdrop-filter: blur(6px);
  }
}

@media (max-width: 520px) {
  :root { --lib-shell-pad: var(--flow-abstand-2); --lib-shell-gap: var(--flow-abstand-2); }
  .flow-shell.lib-buch { padding: var(--flow-abstand-2); }
  .lib-kopf.flow-header { top: var(--flow-abstand-2); }
  .flow-header__capsule { padding-inline: var(--flow-abstand-3); }
  .flow-header__brand .lib-ring { width: 32px; height: 32px; }
  .flow-header__brand-type { font-size: .9rem; }
  .flow-header__status { width: var(--flow-groesse-tippflaeche); padding: 0; }
  /* Stimmung bleibt am Handy im Kopf: nur die Zeichen, der Name bleibt für Screenreader (wie .lib-unsichtbar) */
  .flow-header__status:has(.flow-stimmung) { width: auto; }
  .flow-stimmung .flow-segment__wahl { width: var(--flow-groesse-tippflaeche); padding: 0; }
  .flow-stimmung__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .flow-header__menu { width: var(--flow-groesse-tippflaeche); padding: 0; }
  .flow-header__menu span { display: none; }
  .flow-main.lib-seite { padding: var(--flow-abstand-4); }
  .flow-main .lib-hero,
  .flow-main .lib-hero__text,
  .flow-main .lib-hero__kunst { min-width: 0; max-width: 100%; }
}

@media print {
  body { overflow: visible; }
  .flow-ambient,
  .flow-header,
  .flow-sidebar-left,
  .flow-sidebar-right,
  .lib-design-media { display: none !important; }
  .flow-shell.lib-buch { display: block; height: auto; padding: 0; }
  .flow-main.lib-seite { display: block; overflow: visible; border: 0; box-shadow: none; }
}
/* Canonical library_new_1.0 types that were not present in the historic D1 shelf palette. */
:root {
  --lib-typ-buch: var(--lib-typ-skill);
  --lib-typ-ort: color-mix(in srgb, var(--lib-typ-wissen) 58%, var(--lib-typ-werkzeug));
}
}
/* Ende @layer flow.produkt */