/* FLOW Bausteine 2.0 (Standard seit 01.11.2026) · Owner: Claude (Führung Design)
   Einmal gebaut, überall eingesetzt: Website, Panel/Composer, Library, Apps (Web-Teile). Werte NUR aus flow-tokens.css
   (--flow-*), keine festen Farben – baue-tokens.js prüft das. Quelle der Zustände: Homepage-Rahmen (V3.2-Kontur-
   Grammatik), E-Mail-Studio Discovery V3 (Kopf, Navigation, Segmente, Bühnenrahmen) und die FLOW-ID-Briefe
   (Wortmarke, Routenmotiv, Spektrumlinie, Volumen-Knopf, Notiz).
   Zustände: Hover hebt an und färbt Fläche + Kontur, Gedrückt wird dichter und kleiner (80 ms), Fokus immer sichtbar,
   Gewählt = Fläche + Zeichen (nie nur Farbe), Gesperrt blass, Beschäftigt dreht, Fehler färbt die Kontur.
   Technik: eine Fläche je Baustein, Kontur als ::before-Ring mit Maske; ::after bleibt frei für Schimmer/Spinner.
   Kein Reduced Motion (Manuel). Lichtstimmung über data-flow-stimmung="nacht|abend|papier" an jedem Vorfahren. */

@layer flow.bausteine {

/* ---------- Kontur-Ring: Stufe 1 ruhig · 2 interaktiv · 3 Akzent · 4 Spektrum ---------- */
:root { --flow-ring-uebergang: --flow-r0 var(--flow-bewegung-kurz), --flow-r45 var(--flow-bewegung-kurz), --flow-r100 var(--flow-bewegung-kurz); }
.flow-kontur-1, .flow-karte, .flow-passepartout { --flow-r0: var(--flow-kontur-1-licht); --flow-r45: var(--flow-kontur-1-mitte); --flow-r100: var(--flow-kontur-1-schatten); }
.flow-kontur-2, .flow-knopf, .flow-chip, .flow-tab, .flow-rund, .flow-segment { --flow-r0: var(--flow-kontur-2-licht); --flow-r45: var(--flow-kontur-2-mitte); --flow-r100: var(--flow-kontur-2-schatten); }
.flow-kontur-3, .flow-knopf--primaer { --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten); }
:is(.flow-kontur-1, .flow-kontur-2, .flow-kontur-3, .flow-spektrum, .flow-knopf, .flow-chip, .flow-tab, .flow-rund, .flow-karte, .flow-passepartout, .flow-segment) {
  position: relative;
  transition: var(--flow-ring-uebergang);
}
:is(.flow-kontur-1, .flow-kontur-2, .flow-kontur-3, .flow-spektrum, .flow-knopf, .flow-chip, .flow-tab, .flow-rund, .flow-karte, .flow-passepartout, .flow-segment)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: var(--flow-groesse-ring);
  border-radius: inherit;
  background: linear-gradient(145deg, var(--flow-r0) 0%, var(--flow-r45) 45%, var(--flow-r100) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Stufe 4: die Farbe dreht um die ganze Kontur – schneller bei Hover und Fokus */
.flow-spektrum { box-shadow: 0 0 14px var(--flow-spektrum-schein); }
.flow-spektrum::before {
  background: conic-gradient(from var(--flow-winkel), var(--flow-s1), var(--flow-s2), var(--flow-s3), var(--flow-s4), var(--flow-s5), var(--flow-s1));
  animation: flow-spektrum-dreh var(--flow-bewegung-spektrum) linear infinite;
}
.flow-spektrum:is(:hover, :focus-visible, :focus-within)::before { animation-duration: var(--flow-zustand-spektrum-aktiv); filter: brightness(1.18); }
.flow-spektrum--hover:not(:hover, :focus-visible, :focus-within)::before { background: linear-gradient(145deg, var(--flow-r0) 0%, var(--flow-r45) 45%, var(--flow-r100) 100%); animation: none; }
@keyframes flow-spektrum-dreh { to { --flow-winkel: 360deg; } }

/* ---------- Fokus: sichtbar, Stufe 3 ---------- */
:where(.flow-knopf, .flow-chip, .flow-tab, .flow-rund, .flow-karte, .flow-orb, .flow-eingabe, .flow-nav, .flow-segment__wahl):focus-visible {
  outline: 3px solid var(--flow-fokus);
  outline-offset: 3px;
}
:is(.flow-knopf, .flow-chip, .flow-tab, .flow-rund, .flow-karte):focus-visible { --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten); }

/* ---------- Schrift: Kicker, Titel mit einer Betonung, Text ---------- */
.flow-kicker { display: inline-block; font: var(--flow-kicker-gewicht) var(--flow-kicker-groesse)/1.4 var(--flow-schrift-text); letter-spacing: var(--flow-kicker-sperrung); text-transform: uppercase; color: var(--flow-akzent); }
.flow-titel { margin: 12px 0 16px; font: 500 clamp(1.9rem, 5.2vw, 4.4rem)/1.06 var(--flow-schrift-anzeige); letter-spacing: -.03em; text-wrap: balance; color: var(--flow-text); }
.flow-titel em { font-style: italic; font-weight: 400; color: var(--flow-akzent); }
.flow-text { max-width: var(--flow-groesse-lesebreite); margin: 0 0 16px; font: 400 1rem/1.7 var(--flow-schrift-text); color: var(--flow-text); text-wrap: pretty; }
.flow-text--leise { color: var(--flow-text-leise); }

/* ---------- Knöpfe: Pill, Volumen, Lichtkante; Hover hebt, Gedrückt verdichtet ---------- */
.flow-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: var(--flow-groesse-tippflaeche); padding: 12px 24px; border: 0; border-radius: var(--flow-radius-rund);
  font: 720 .92rem/1.2 var(--flow-schrift-text); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  color: var(--flow-zweit-text); background: var(--flow-zweit-flaeche);
  box-shadow: inset 0 1px 0 var(--flow-innenlicht), var(--flow-schatten);
  transition: var(--flow-ring-uebergang), transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten), box-shadow var(--flow-bewegung-kurz), background var(--flow-bewegung-kurz), opacity var(--flow-bewegung-kurz);
}
.flow-knopf:hover {
  transform: translateY(var(--flow-zustand-hub));
  --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten);
  background: color-mix(in srgb, var(--flow-zweit-flaeche), var(--flow-akzent) var(--flow-zustand-mischung-hover));
  box-shadow: inset 0 1px 0 var(--flow-innenlicht), var(--flow-schatten-hub);
}
.flow-knopf:active { transform: translateY(0) scale(var(--flow-zustand-druck)); background: color-mix(in srgb, var(--flow-zweit-flaeche), var(--flow-akzent) var(--flow-zustand-mischung-druck)); box-shadow: inset 0 1px 0 var(--flow-innenlicht); transition-duration: var(--flow-zustand-druck-dauer); }
.flow-knopf--primaer { color: var(--flow-aktion-tinte); background: var(--flow-aktion-volumen); box-shadow: inset 0 1px 0 var(--flow-aktion-glanz), var(--flow-aktion-schatten); }
.flow-knopf--primaer:hover { background: var(--flow-aktion-volumen-hover); box-shadow: inset 0 1px 0 var(--flow-aktion-glanz), var(--flow-aktion-schatten), var(--flow-schatten-hub); }
.flow-knopf--primaer:active { background: var(--flow-aktion-volumen); box-shadow: inset 0 2px 6px color-mix(in srgb, var(--flow-aktion-tinte) 30%, transparent); }
.flow-knopf--zweit { backdrop-filter: blur(10px); }
.flow-knopf--ghost { background: transparent; box-shadow: none; color: var(--flow-ghost-text); }
.flow-knopf--ghost:hover { background: color-mix(in srgb, var(--flow-zweit-flaeche), var(--flow-akzent) var(--flow-zustand-mischung-hover)); }
.flow-knopf:is([disabled], [aria-disabled="true"]) { opacity: var(--flow-zustand-gesperrt); cursor: not-allowed; transform: none; }
.flow-knopf.is-beschaeftigt { cursor: progress; }
.flow-knopf.is-beschaeftigt::after { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: flow-dreh var(--flow-zustand-spinner) linear infinite; }
.flow-knopf.is-fehler { --flow-r0: var(--flow-fehler-0); --flow-r45: var(--flow-fehler-45); --flow-r100: var(--flow-fehler-100); }
.flow-knopf__zeichen { font-size: 1.05em; line-height: 1; }
@keyframes flow-dreh { to { transform: rotate(360deg); } }

/* Runde Steuerknöpfe: Zoom bei Hover, eindrücken beim Drücken, aktiv mit Volumen */
.flow-rund {
  display: inline-grid; place-items: center; width: var(--flow-groesse-tippflaeche); height: var(--flow-groesse-tippflaeche);
  padding: 0; border: 0; border-radius: 50%; color: var(--flow-zweit-text); background: var(--flow-zweit-flaeche);
  box-shadow: inset 0 1px 0 var(--flow-innenlicht); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: var(--flow-ring-uebergang), transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten), background var(--flow-bewegung-kurz), color var(--flow-bewegung-kurz);
}
.flow-rund:hover { transform: scale(var(--flow-zustand-zoom-rund)); --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten); background: color-mix(in srgb, var(--flow-zweit-flaeche), var(--flow-akzent) var(--flow-zustand-mischung-hover)); color: var(--flow-akzent); }
.flow-rund:active { transform: scale(var(--flow-zustand-druck-rund)); transition-duration: var(--flow-zustand-druck-dauer); }
.flow-rund:is([aria-pressed="true"], .is-aktiv) { --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten); background: var(--flow-aktion-volumen); color: var(--flow-aktion-tinte); }
.flow-rund[disabled] { opacity: var(--flow-zustand-gesperrt); cursor: not-allowed; transform: none; }

/* ---------- Chips, Pill-Tabs: gewählt = Fläche + Häkchen ---------- */
.flow-chip, .flow-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 18px; border: 0; border-radius: var(--flow-radius-rund);
  font: 680 .84rem/1.2 var(--flow-schrift-text); color: var(--flow-zweit-text); background: var(--flow-zweit-flaeche);
  box-shadow: inset 0 1px 0 var(--flow-innenlicht); cursor: pointer;
  transition: var(--flow-ring-uebergang), background var(--flow-bewegung-kurz), color var(--flow-bewegung-kurz), transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten);
}
.flow-chip:hover, .flow-tab:hover { transform: translateY(var(--flow-zustand-hub-chip)); --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten); background: color-mix(in srgb, var(--flow-zweit-flaeche), var(--flow-akzent) var(--flow-zustand-mischung-hover)); color: var(--flow-akzent); }
.flow-chip:active, .flow-tab:active { transform: scale(var(--flow-zustand-druck-chip)); transition-duration: var(--flow-zustand-druck-dauer); }
.flow-chip:is([aria-pressed="true"], .is-aktiv), .flow-tab[aria-selected="true"] { --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten); background: var(--flow-gewaehlt-flaeche); color: var(--flow-gewaehlt-text); }
.flow-chip:is([aria-pressed="true"], .is-aktiv)::after { content: "✓"; order: -1; font-weight: 800; }
.flow-chip:is([aria-pressed="true"], .is-aktiv):hover, .flow-tab[aria-selected="true"]:hover { background: color-mix(in srgb, var(--flow-gewaehlt-flaeche) 84%, var(--flow-text)); color: var(--flow-gewaehlt-text); }
.flow-chip[disabled], .flow-tab[disabled] { opacity: var(--flow-zustand-gesperrt); cursor: not-allowed; transform: none; }
.flow-chip__zahl { min-width: 1.6em; padding: 1px 6px; border-radius: var(--flow-radius-rund); background: var(--flow-zahl-flaeche); font-size: .74rem; text-align: center; }
.flow-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: var(--flow-radius-rund); background: var(--flow-glas); box-shadow: inset 0 1px 0 var(--flow-innenlicht); }

/* ---------- Segmentschalter (E-Mail-Studio): eine Leiste, die Wahl trägt Navy-Volumen ---------- */
.flow-segment { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--flow-radius-m); background: var(--flow-flaeche); box-shadow: inset 0 1px 0 var(--flow-innenlicht); }
.flow-segment__wahl { min-height: 36px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--flow-text-leise); font: 750 .76rem/1.2 var(--flow-schrift-text); cursor: pointer; transition: background var(--flow-zustand-nav-dauer), color var(--flow-zustand-nav-dauer), transform var(--flow-zustand-nav-dauer); }
.flow-segment__wahl:hover { color: var(--flow-text); background: color-mix(in srgb, var(--flow-flaeche), var(--flow-akzent) 12%); }
.flow-segment__wahl:active { transform: scale(var(--flow-zustand-druck-chip)); }
.flow-segment__wahl[aria-pressed="true"] { background: var(--flow-segment-aktiv); color: var(--flow-segment-aktiv-text); box-shadow: 0 2px 6px color-mix(in srgb, var(--flow-text) 14%, transparent); }
.flow-segment__wahl--aktion[aria-pressed="true"] { background: var(--flow-aktion-volumen); color: var(--flow-aktion-tinte); }

/* ---------- Navigationseintrag (E-Mail-Studio): Hover schiebt, Wahl mit Verlauf, Innenlicht und Symbolkachel ---------- */
.flow-nav { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--flow-text); text-align: left; font: 650 .82rem/1.3 var(--flow-schrift-text); cursor: pointer; transition: background var(--flow-zustand-nav-dauer), border-color var(--flow-zustand-nav-dauer), transform var(--flow-zustand-nav-dauer); }
.flow-nav:hover { background: color-mix(in srgb, var(--flow-flaeche), var(--flow-akzent) 9%); transform: translateX(var(--flow-zustand-nav-schritt)); }
.flow-nav:active { transform: translateX(0) scale(var(--flow-zustand-druck)); }
.flow-nav:is([aria-current="page"], [aria-current="true"], .is-aktiv) { border-color: var(--flow-wahl-kante); background: var(--flow-wahl-flaeche); color: var(--flow-wahl-text); box-shadow: inset 0 1px var(--flow-innenlicht), 0 5px 18px color-mix(in srgb, var(--flow-wahl-text) 8%, transparent); }
.flow-nav__symbol { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; background: var(--flow-symbol-flaeche); font-size: 14px; }
.flow-nav:is([aria-current="page"], [aria-current="true"], .is-aktiv) .flow-nav__symbol { background: var(--flow-wahl-symbol); color: var(--flow-wahl-symbol-text); }
.flow-nav__text { flex: 1; }
.flow-nav__marke { padding: 3px 6px; border-radius: 5px; background: var(--flow-zahl-flaeche); font-size: .56rem; font-weight: 800; letter-spacing: .07em; }

/* ---------- Eingabefelder: Kontur Stufe 2, im Fokus Stufe 3 ---------- */
.flow-eingabe {
  display: block; width: 100%; min-height: var(--flow-groesse-tippflaeche); padding: 12px 16px; border: 1px solid transparent; border-radius: var(--flow-radius-m);
  font: 400 1rem/1.45 var(--flow-schrift-text); color: var(--flow-text);
  background: linear-gradient(var(--flow-flaeche), var(--flow-flaeche)) padding-box, linear-gradient(145deg, var(--flow-kontur-2-licht) 0%, var(--flow-kontur-2-mitte) 45%, var(--flow-kontur-2-schatten) 100%) border-box;
  box-shadow: var(--flow-eingabe-tiefe);
}
.flow-eingabe:focus-visible { background: linear-gradient(var(--flow-flaeche), var(--flow-flaeche)) padding-box, linear-gradient(145deg, var(--flow-kontur-3-licht) 0%, var(--flow-kontur-3-mitte) 45%, var(--flow-kontur-3-schatten) 100%) border-box; }
.flow-eingabe::placeholder { color: var(--flow-text-leise); opacity: .8; }
.flow-eingabe[aria-invalid="true"] { background: linear-gradient(var(--flow-flaeche), var(--flow-flaeche)) padding-box, linear-gradient(145deg, var(--flow-fehler-0), var(--flow-fehler-45) 45%, var(--flow-fehler-100)) border-box; }
.flow-feldname { display: block; margin: 0 0 8px; font: 700 .86rem/1.3 var(--flow-schrift-text); color: var(--flow-text); }
.flow-feldname small { font-weight: 400; color: var(--flow-text-leise); }

/* ---------- Linien: Hairline mit offenen Enden, LED-Lauf, Spektrumlinie, Routenmotiv ---------- */
.flow-linie { display: block; height: 1px; margin: 0; border: 0; background: linear-gradient(90deg, transparent 0%, var(--flow-kontur-2-mitte) 50%, transparent 100%); }
.flow-linie--led {
  height: 2px; background: linear-gradient(90deg, var(--flow-s1), var(--flow-s3), var(--flow-s2), var(--flow-s4), var(--flow-s1)); background-size: 240% 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  opacity: .78; animation: flow-led-lauf var(--flow-bewegung-led) linear infinite;
}
@keyframes flow-led-lauf { 0% { background-position: 0% 50%; filter: hue-rotate(0deg); } 50% { background-position: 100% 50%; filter: hue-rotate(18deg); } 100% { background-position: 0% 50%; filter: hue-rotate(0deg); } }
/* Papier: goldene Linie statt Neon, wandernder Glanz */
[data-flow-stimmung="papier"] .flow-linie--led { background: linear-gradient(90deg, var(--flow-linie-gold) 0%, var(--flow-linie-gold) 42%, var(--flow-linie-glanz) 50%, var(--flow-linie-gold) 58%, var(--flow-linie-gold) 100%); background-size: 300% 100%; filter: none; opacity: 1; animation: flow-linie-glanz var(--flow-bewegung-led) linear infinite; }
@keyframes flow-linie-glanz { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* Spektrumlinie – Erkennungszeichen aus Brief und Studio: Orange → Lavendel → Türkis */
.flow-spektrumlinie { display: block; height: 3px; border: 0; background: var(--flow-spektrumlinie); }
.flow-spektrumlinie--stummel { width: 120px; height: 2px; }
/* Routenmotiv – drei Segmente mit Lücken; ein Element, drei Verläufe, kein zusätzliches Markup */
.flow-route {
  display: block; width: calc(var(--flow-route-1-laenge) + var(--flow-route-2-laenge) + var(--flow-route-3-laenge) + 18px); height: 2px;
  background:
    linear-gradient(var(--flow-route-1), var(--flow-route-1)) 0 0 / var(--flow-route-1-laenge) 100% no-repeat,
    linear-gradient(var(--flow-route-2), var(--flow-route-2)) calc(var(--flow-route-1-laenge) + 9px) 0 / var(--flow-route-2-laenge) 100% no-repeat,
    linear-gradient(var(--flow-route-3), var(--flow-route-3)) calc(var(--flow-route-1-laenge) + var(--flow-route-2-laenge) + 18px) 0 / var(--flow-route-3-laenge) 100% no-repeat;
}

/* ---------- Passepartout, Leinwand, Bühnenrahmen (Studio): Rand, Verlauf, Doppelschatten ---------- */
.flow-passepartout { padding: clamp(8px, 1.4vw, 16px); border-radius: var(--flow-radius-xl); background: var(--flow-flaeche); box-shadow: inset 0 1px 0 var(--flow-innenlicht), var(--flow-schatten); }
.flow-passepartout.flow-spektrum { --flow-groesse-ring: var(--flow-groesse-ring-buehne); }
.flow-leinwand { position: relative; overflow: hidden; border-radius: var(--flow-radius-l); background: var(--flow-flaeche-2); }
.flow-rahmen { padding: 17px; border: 1px solid var(--flow-rahmen-kante); border-radius: 22px; background: var(--flow-rahmen-flaeche); box-shadow: var(--flow-rahmen-schatten); }
.flow-rahmen__zeile { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; font: 750 .68rem/1.3 var(--flow-schrift-text); letter-spacing: .08em; text-transform: uppercase; color: var(--flow-text-leise); }

/* ---------- Karten mit Körper: Hover hebt, zoomt leicht und vertieft den Schatten, Schimmer folgt ---------- */
.flow-karte {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 18px; border-radius: var(--flow-radius-l);
  color: var(--flow-text); background: var(--flow-flaeche); box-shadow: inset 0 1px 0 var(--flow-innenlicht), var(--flow-schatten); text-decoration: none;
  transition: var(--flow-ring-uebergang), box-shadow var(--flow-bewegung-hub) var(--flow-bewegung-gleiten), transform var(--flow-bewegung-hub) var(--flow-bewegung-gleiten);
}
.flow-karte::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 30% 20%, rgb(var(--flow-schimmer-farbe) / .9), transparent 58%); opacity: 0; mix-blend-mode: soft-light; transition: opacity var(--flow-bewegung-hub) var(--flow-bewegung-gleiten); }
.flow-karte:is(a, button, [tabindex]):hover { transform: translateY(var(--flow-zustand-hub)) scale(var(--flow-zustand-zoom-karte)); --flow-r0: var(--flow-kontur-2-licht); --flow-r45: var(--flow-kontur-2-mitte); --flow-r100: var(--flow-kontur-2-schatten); box-shadow: inset 0 1px 0 var(--flow-innenlicht), var(--flow-schatten-hub); }
.flow-karte:is(a, button, [tabindex]):hover::after { opacity: .18; }
.flow-karte:is(a, button, [tabindex]):active { transform: scale(var(--flow-skala-gedrueckt-karte)); filter: brightness(.96); transition-duration: var(--flow-zustand-druck-dauer); }
.flow-karte:is([aria-current="true"], .is-gewaehlt) { --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten); }
.flow-karte__bild { position: relative; overflow: hidden; border-radius: calc(var(--flow-radius-l) - 6px); aspect-ratio: 4 / 3; background: var(--flow-flaeche-2); }
.flow-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--flow-bewegung-hub) var(--flow-bewegung-gleiten); }
.flow-karte:hover .flow-karte__bild img { transform: scale(1.04); }
.flow-karte__kicker { font: 700 .66rem/1.3 var(--flow-schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--flow-akzent); }
.flow-karte__titel { margin: 0; font: 500 clamp(1.3rem, 2vw, 1.7rem)/1.15 var(--flow-schrift-anzeige); letter-spacing: -.02em; }
.flow-karte__text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--flow-text-leise); }
.flow-karte__aktion { margin-top: auto; font: 750 .84rem/1.3 var(--flow-schrift-text); color: var(--flow-akzent); }

/* ---------- Orbs: Tippfläche 44 px, Punkt 12 px, gewählt mit Zoom und Hof ---------- */
.flow-orb { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.flow-orb::after { content: ""; width: 12px; height: 12px; border: 1px solid transparent; border-radius: 50%; background: linear-gradient(var(--flow-flaeche), var(--flow-flaeche)) padding-box, linear-gradient(145deg, var(--flow-kontur-2-licht), var(--flow-kontur-2-mitte) 45%, var(--flow-kontur-2-schatten)) border-box; transition: transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten), box-shadow var(--flow-bewegung-kurz); }
.flow-orb:hover::after { transform: scale(1.15); }
.flow-orb:is([aria-pressed="true"], [aria-current="true"])::after { transform: scale(var(--flow-zustand-zoom-orb)); background: var(--flow-orb-aktiv) padding-box, linear-gradient(145deg, var(--flow-kontur-3-licht), var(--flow-kontur-3-mitte) 45%, var(--flow-kontur-3-schatten)) border-box; box-shadow: 0 0 0 5px var(--flow-orb-hof); }

/* ---------- Wegweiser-Band ---------- */
.flow-band { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-radius: var(--flow-radius-rund); background: var(--flow-glas); box-shadow: inset 0 1px 0 var(--flow-innenlicht); font: 700 .66rem/1.3 var(--flow-schrift-text); letter-spacing: .14em; text-transform: uppercase; color: var(--flow-text-leise); }
.flow-band .flow-linie { flex: 1; min-width: 24px; }

/* ---------- Ornamente: SVG-Sprite (flow-ornamente.svg) per <use>, Farben aus der Lichtstimmung ---------- */
.flow-ornament { display: block; width: 100%; height: auto; pointer-events: none; fill: none; overflow: visible; }

/* ---------- Held (Kopf): Navy-Verlauf, Lichthof, Orbitringe, Spektrum-Stummel, Kante unten ---------- */
.flow-held {
  position: relative; overflow: hidden; padding: 26px 30px 24px; min-height: 150px; color: var(--flow-text);
  background: radial-gradient(ellipse at 85% 0%, color-mix(in srgb, var(--flow-nacht-navy), var(--flow-orange-hell) 12%) 0%, transparent 40%), var(--flow-held);
  border-bottom: 3px solid var(--flow-orange-basis);
}
.flow-held::before { content: ""; position: absolute; right: 3%; top: -285px; width: 420px; height: 420px; border: 1px solid color-mix(in srgb, var(--flow-orange-licht) 26%, transparent); border-radius: 50%; box-shadow: 0 0 0 50px color-mix(in srgb, var(--flow-spektrum-lavendel) 7%, transparent), 0 0 0 100px color-mix(in srgb, var(--flow-spektrum-tuerkis) 5%, transparent); pointer-events: none; }
.flow-held::after { content: ""; position: absolute; left: 30px; bottom: 0; width: 120px; height: 2px; background: var(--flow-spektrumlinie); }
.flow-held .flow-kicker { color: var(--flow-orange-hell); }

/* ---------- Wortmarke FLOW·ID / FLOW·WORLD: Balken links, Punkt in Orange ---------- */
.flow-marke { display: inline-flex; align-items: stretch; gap: 14px; }
.flow-marke::before { content: ""; width: 4px; border-radius: 2px; background: var(--flow-orange-basis); }
.flow-marke__name { display: block; font: 900 1.5rem/1.1 var(--flow-schrift-text); letter-spacing: .06em; color: var(--flow-text); }
.flow-marke__punkt { color: var(--flow-orange-basis); }
.flow-marke__zeile { display: block; margin-top: 4px; font: 700 .62rem/1.4 var(--flow-schrift-text); letter-spacing: .23em; color: var(--flow-text-leise); }

/* ---------- Notiz (Brief) und Hinweis (Rückfall/Fehler: was, Folge, was tun, Kennung) ---------- */
.flow-notiz { padding: 16px 19px 17px; border-left: 3px solid var(--flow-notiz-kante); background: var(--flow-notiz-flaeche); color: var(--flow-notiz-text); font: 400 .82rem/1.65 var(--flow-schrift-text); }
.flow-notiz__kicker { display: block; margin: 0 0 5px; font: 700 .62rem/1.6 var(--flow-schrift-text); letter-spacing: .14em; text-transform: uppercase; }
.flow-hinweis { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--flow-radius-m); background: var(--flow-glas); color: var(--flow-text); font-size: .86rem; line-height: 1.5; }
.flow-hinweis::before { content: "i"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--flow-akzent); color: var(--flow-flaeche); font: 800 .8rem/1 var(--flow-schrift-anzeige); }
.flow-hinweis code { font-size: .78rem; opacity: .8; }

/* ---------- Bühne: setzt Grund und Schrift der Lichtstimmung ---------- */
.flow-buehne { color: var(--flow-text); background: var(--flow-grund); font-family: var(--flow-schrift-text); }

/* ---------- Papier: Zweit-Bedienelemente mit klarer Kontur und dunkler Tinte ---------- */
:is([data-flow-stimmung="papier"], [data-fw-stimmung="papier"], .paper, .flow-dialog) :is(.flow-rund, .flow-knopf:not(.flow-knopf--primaer, .flow-knopf--ghost, .flow-knopf--gefahr)) {
  --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten);
  color: var(--flow-akzent); background: var(--flow-flaeche);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flow-akzent) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--flow-akzent) 14%, transparent);
}
:is([data-flow-stimmung="papier"], [data-fw-stimmung="papier"], .paper, .flow-dialog) :is(.flow-rund, .flow-knopf:not(.flow-knopf--primaer, .flow-knopf--ghost, .flow-knopf--gefahr)):hover { background: color-mix(in srgb, var(--flow-flaeche) 76%, var(--flow-akzent)); }

/* ---------- Gefahr-Knopf: Löschen und Zurückziehen in Warnfarbe (Text und Zeichen sagen es zusätzlich, nie nur Farbe) ---------- */
.flow-knopf--gefahr { --flow-r0: var(--flow-fehler-0); --flow-r45: var(--flow-fehler-45); --flow-r100: var(--flow-fehler-100); color: var(--flow-gefahr-text); background: var(--flow-gefahr-flaeche); }
.flow-knopf--gefahr:hover { background: color-mix(in srgb, var(--flow-gefahr-flaeche), var(--flow-gefahr-text) var(--flow-zustand-mischung-hover)); }
.flow-knopf--gefahr:active { background: color-mix(in srgb, var(--flow-gefahr-flaeche), var(--flow-gefahr-text) var(--flow-zustand-mischung-druck)); }

/* ---------- Aktionsleiste (aus Design System 1.0, „Action Bar nach NBH“): bleibt IMMER stehen, Hauptaktionen scrollen nie aus dem Bild ----------
   Plätze: Zurück links (eigener Platz, nie im Menü) · Nebenaktionen · Löschen als Gefahr-Knopf · Hauptaktion rechts (gefüllt).
   Am Seitenende `.flow-aktionsleiste-platz` setzen, damit nichts verdeckt wird. `--eingebettet` nur für Muster und Vorschau. */
.flow-aktionsleiste-platz { height: calc(var(--flow-groesse-aktionsleiste) + env(safe-area-inset-bottom)); }
.flow-aktionsleiste {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  padding: var(--flow-abstand-3) clamp(12px, 4vw, 24px) calc(var(--flow-abstand-3) + env(safe-area-inset-bottom));
  background: var(--flow-glas); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-top: var(--flow-groesse-ring-buehne) solid var(--flow-linie);
  box-shadow: var(--flow-schatten-oben), inset 0 1px 0 var(--flow-innenlicht);
}
.flow-aktionsleiste--eingebettet { position: static; border-radius: var(--flow-radius-m); border: var(--flow-groesse-ring-buehne) solid var(--flow-linie); box-shadow: var(--flow-schatten); }
.flow-aktionsleiste__innen { display: flex; align-items: center; gap: var(--flow-abstand-3); max-width: 720px; margin: 0 auto; }
.flow-aktionsleiste__zurueck { margin-right: auto; }
.flow-aktionsleiste__hinweis { flex-basis: 100%; margin: 0 0 var(--flow-abstand-2); font-size: .8rem; color: var(--flow-text-leise); }
.flow-aktionsleiste--problem .flow-aktionsleiste__hinweis { color: var(--flow-gefahr-text); font-weight: 650; }
@media (max-width: 420px) { .flow-aktionsleiste__innen { flex-wrap: wrap; } .flow-aktionsleiste__innen .flow-knopf--primaer { flex: 1; } }
@media print { .flow-aktionsleiste, .flow-aktionsleiste-platz { display: none; } }

/* ---------- 2.1 Touch: Erwacht, Entfaltung, Feder + Puls, Kapsel, Mitte (Manuel 05.11.2026) ----------
   Ersatz für den Hover-Zwischenzustand auf Touchscreens. Regeln dazu (Vorschlag, README „2.1 Touch“):
   · Karten, deren Hauptaufgabe das Öffnen ist, öffnen weiter mit EINEM Tipp; Erwachen löst ein eigener Button
     `.flow-vorschau` (aria-expanded, aria-controls) aus – kein Pflicht-Doppeltipp.
   · Höchstens eine Karte je Liste ist wach (Akkordeon, Sache der Ebene).
   · Eine geschlossene `.flow-entfaltung` ist unsichtbar UND nicht bedienbar (visibility), zusätzlich `inert` setzen.
   · Mitte (`data-mitte`) nur gezielt an kurzen Listen, nie global. */
.flow-karte:is(.is-wach, [data-wach="true"]) {
  --flow-r0: var(--flow-kontur-3-licht); --flow-r45: var(--flow-kontur-3-mitte); --flow-r100: var(--flow-kontur-3-schatten);
  background: var(--flow-wach-flaeche);
  box-shadow: inset 0 1px 0 var(--flow-innenlicht), var(--flow-wach-schein);
  transform: translateY(var(--flow-zustand-hub-wach)) scale(var(--flow-skala-wach));
  transition: var(--flow-ring-uebergang), background var(--flow-bewegung-kurz), box-shadow var(--flow-dauer-feder), transform var(--flow-dauer-feder) var(--flow-bewegung-feder);
}
.flow-karte:is(.is-wach, [data-wach="true"]) .flow-spektrum::before { animation-duration: var(--flow-zustand-spektrum-aktiv); filter: brightness(1.18); }
.flow-karte:is(.is-wach, [data-wach="true"]) .flow-karte__bild img { transform: scale(var(--flow-zustand-zoom-karte)); }

/* Vorschau-Button: echter Button, Pfeil dreht beim Öffnen */
.flow-vorschau {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: 0; border-radius: var(--flow-radius-rund);
  font: 700 .74rem/1.2 var(--flow-schrift-text); color: var(--flow-text-leise); background: var(--flow-zweit-flaeche);
  box-shadow: inset 0 0 0 1px var(--flow-linie); cursor: pointer;
  transition: color var(--flow-bewegung-kurz), background var(--flow-bewegung-kurz), box-shadow var(--flow-bewegung-kurz), transform var(--flow-dauer-feder) var(--flow-bewegung-feder);
}
.flow-vorschau::after { content: "▾"; display: inline-block; transition: transform var(--flow-dauer-feder) var(--flow-bewegung-feder); }
.flow-vorschau[aria-expanded="true"] { color: var(--flow-akzent); background: var(--flow-schublade-flaeche); box-shadow: inset 0 0 0 1px var(--flow-kontur-3-mitte); }
.flow-vorschau[aria-expanded="true"]::after { transform: rotate(180deg); }
.flow-vorschau:active { transform: scale(var(--flow-zustand-druck-chip)); transition-duration: var(--flow-zustand-druck-dauer); }

/* Entfaltung: klappt ohne Layoutsprung auf (0fr → 1fr); geschlossen unsichtbar und aus der Tab-Folge */
.flow-entfaltung {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; visibility: hidden;
  transition: grid-template-rows var(--flow-dauer-entfalten) var(--flow-bewegung-entfalten), opacity var(--flow-dauer-entfalten) var(--flow-bewegung-entfalten),
              margin-top var(--flow-dauer-entfalten) var(--flow-bewegung-entfalten), visibility 0s linear var(--flow-dauer-entfalten);
}
.flow-entfaltung > * { min-height: 0; overflow: hidden; }
:is(.is-wach, [data-wach="true"]) > .flow-entfaltung, .flow-entfaltung:is(.is-offen, [data-offen="true"]) {
  grid-template-rows: 1fr; opacity: 1; margin-top: var(--flow-abstand-3); visibility: visible; transition-delay: 0s;
}
.flow-schublade { display: grid; gap: var(--flow-abstand-3); padding: var(--flow-abstand-3) var(--flow-abstand-4); border-radius: var(--flow-radius-m); background: var(--flow-schublade-flaeche); box-shadow: inset 0 0 0 1px var(--flow-linie); color: var(--flow-text); }
.flow-schublade__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--flow-abstand-2); font-size: .76rem; color: var(--flow-text-leise); }
.flow-schublade__meta strong { color: var(--flow-akzent); }

/* Feder + Puls: nach dem Loslassen federt das Element über 100 % zurück, ein Ring leuchtet nach (der Finger ist dann weg) */
/* Als Animation, nicht als Übergang: so startet das Nachfedern sicher vom gedrückten Maß, egal wann :active endet.
   Nur an Elementen ohne Ruhe-Transform setzen (Knopf, Chip, rund, Vorschau, Kapsel). */
.is-federt { animation: flow-feder var(--flow-dauer-feder) var(--flow-bewegung-feder), flow-puls var(--flow-dauer-puls) var(--flow-bewegung-gleiten); }
@keyframes flow-feder { from { transform: scale(var(--flow-zustand-druck)); } to { transform: none; } }
@keyframes flow-puls { from { outline: 2px solid var(--flow-fokus); outline-offset: 0; } to { outline: 2px solid transparent; outline-offset: 8px; } }

/* Kapsel (Micro-Peek): kleiner Hinweis zieht sich beim Antippen auf, steht --flow-dauer-kapsel und zieht sich wieder zusammen */
.flow-kapsel {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 5px 11px; border: 0; border-radius: var(--flow-radius-rund);
  font: 650 .75rem/1.2 var(--flow-schrift-text); color: var(--flow-text); background: var(--flow-zweit-flaeche); box-shadow: inset 0 0 0 1px var(--flow-linie); cursor: pointer;
  transition: background var(--flow-bewegung-kurz), box-shadow var(--flow-bewegung-kurz), transform var(--flow-dauer-feder) var(--flow-bewegung-feder);
}
.flow-kapsel__mehr { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; color: var(--flow-akzent); transition: max-width var(--flow-dauer-entfalten) var(--flow-bewegung-entfalten), opacity var(--flow-bewegung-kurz); }
.flow-kapsel[aria-expanded="true"] { background: var(--flow-schublade-flaeche); box-shadow: inset 0 0 0 1px var(--flow-kontur-3-mitte); }
.flow-kapsel[aria-expanded="true"] .flow-kapsel__mehr { max-width: 18rem; opacity: 1; }
.flow-kapsel:active { transform: scale(var(--flow-zustand-druck-chip)); }

/* Mitte (Viewport-Fokus): nur ohne Zeiger, nur wo die Ebene data-mitte setzt */
@media (hover: none) {
  .flow-karte[data-mitte="true"]:not(.is-wach, [data-wach="true"]) { --flow-r0: var(--flow-kontur-2-licht); --flow-r45: var(--flow-kontur-2-mitte); --flow-r100: var(--flow-kontur-2-schatten); }
  .flow-karte[data-mitte="true"]::after { opacity: .1; }
}

/* ---------- Grundzustände für alles Bedienbare ohne eigene Regel (geringe Spezifität) ---------- */
:where(a, button, summary, [role="button"]) { transition: color var(--flow-bewegung-kurz), background-color var(--flow-bewegung-kurz), border-color var(--flow-bewegung-kurz), box-shadow var(--flow-bewegung-kurz), opacity var(--flow-bewegung-kurz), transform var(--flow-bewegung-kurz) var(--flow-bewegung-gleiten); }
:where(button, summary, [role="button"]):where(:not(:disabled)):active { transform: scale(var(--flow-zustand-druck)); }
}