/* FLOW Tokens 2.1.0 · Web: Kern, Lichtstimmungen, Bausteine-Tokens
   Erzeugt von FLOW_UNIVERSE/DESIGN/tokens/baue-tokens.js aus flow-tokens.json (2026-11-05) – nicht von Hand ändern. */
@property --flow-winkel { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --flow-r0 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --flow-r45 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --flow-r100 { syntax: "<color>"; inherits: true; initial-value: transparent; }
@layer flow.tokens {
:root {
  --flow-orange-hell: #ffae73;
  --flow-orange-licht: #ffa255;
  --flow-orange-basis: #e86a1c;
  --flow-orange-tief: #d45c12;
  --flow-orange-kante: #c8540e;
  --flow-orange-nacht: #ff8c42;
  --flow-orange-panel: #b04a0c;
  --flow-orange-tinte: #241102;
  --flow-orange-tinte-nacht: #1a0e05;
  --flow-nacht-navy: #122045;
  --flow-nacht-tiefblau: #0a1128;
  --flow-nacht-schwarz: #02040a;
  --flow-nacht-grund: #07111d;
  --flow-nacht-flaeche: #0d222b;
  --flow-nacht-flaeche-2: #123038;
  --flow-nacht-brief: #07080a;
  --flow-nacht-brief-flaeche: #10131a;
  --flow-nacht-brief-karte: #15181f;
  --flow-nacht-brief-linie: #2b313e;
  --flow-abend-grund: #14141c;
  --flow-abend-flaeche: #221c22;
  --flow-abend-flaeche-2: #2b2228;
  --flow-papier-hell: #fffdf7;
  --flow-papier-creme: #fffaf0;
  --flow-papier-warm: #fff7ea;
  --flow-papier-seide: #f6f0e3;
  --flow-papier-sand: #e8e0ce;
  --flow-papier-flaeche-2: #f4eddf;
  --flow-papier-linie: #e8d5b9;
  --flow-papier-notiz: #fff0d4;
  --flow-tinte-papier: #18231e;
  --flow-tinte-papier-leise: #4d6359;
  --flow-tinte-brief: #242424;
  --flow-tinte-brief-leise: #62574e;
  --flow-tinte-brief-marke: #755d4c;
  --flow-tinte-erde: #4c3926;
  --flow-tinte-fuss: #6e635b;
  --flow-tinte-nacht: #edf4f8;
  --flow-tinte-nacht-leise: #b9cbd3;
  --flow-tinte-abend: #f6eee4;
  --flow-tinte-abend-leise: #d4c5b8;
  --flow-tinte-brief-nacht: #f0f3f8;
  --flow-tinte-brief-nacht-mittel: #bac2ce;
  --flow-tinte-brief-nacht-leise: #a3abb8;
  --flow-tinte-held: #ffffff;
  --flow-tinte-held-leise: #e7e6e9;
  --flow-akzent-honig: #f3ce93;
  --flow-akzent-honig-abend: #ffc89a;
  --flow-akzent-wald: #0b4a3d;
  --flow-akzent-bernstein: #6e4a12;
  --flow-akzent-mint: #8ee0c6;
  --flow-akzent-notiz-kante: #d96a22;
  --flow-akzent-notiz-nacht: #29201c;
  --flow-akzent-notiz-nacht-text: #f0d5bd;
  --flow-spektrum-lavendel: #a879ff;
  --flow-spektrum-tuerkis: #5dd9c1;
  --flow-spektrum-cyan: #00e5ff;
  --flow-spektrum-violett: #b388ff;
  --flow-spektrum-gruen: #2bff88;
  --flow-spektrum-amber: #ffb400;
  --flow-spektrum-rot: #ff2d5f;
  --flow-fokus-nacht: #ffb273;
  --flow-fokus-papier: #c8540e;
  --flow-fehler-kante: #dc3c32;
  --flow-fehler-text-papier: #9b1c1c;
  --flow-fehler-flaeche-papier: #fdecea;
  --flow-schrift-anzeige: Fraunces, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --flow-schrift-text: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --flow-schrift-brief: Arial, Helvetica, sans-serif;
  --flow-radius-s: 10px;
  --flow-radius-m: 14px;
  --flow-radius-l: 18px;
  --flow-radius-xl: 24px;
  --flow-radius-rund: 999px;
  --flow-radius-brief-karte: 20px;
  --flow-radius-brief-knopf: 15px;
  --flow-abstand-1: 4px;
  --flow-abstand-2: 8px;
  --flow-abstand-3: 12px;
  --flow-abstand-4: 16px;
  --flow-abstand-5: 24px;
  --flow-abstand-6: 32px;
  --flow-abstand-7: 48px;
  --flow-abstand-8: 72px;
  --flow-groesse-tippflaeche: 48px;
  --flow-groesse-aktionsleiste: 76px;
  --flow-groesse-ring: 1px;
  --flow-groesse-ring-buehne: 1.5px;
  --flow-groesse-lesebreite: 68ch;
  --flow-groesse-inhalt: 1120px;
  --flow-bewegung-gleiten: cubic-bezier(.2, .8, .2, 1);
  --flow-bewegung-ruhig: cubic-bezier(.35, 0, .15, 1);
  --flow-bewegung-kurz: 200ms;
  --flow-bewegung-hub: 420ms;
  --flow-bewegung-spektrum: 14s;
  --flow-bewegung-led: 9s;
  --flow-bewegung-feder: cubic-bezier(.34, 1.56, .64, 1);
  --flow-bewegung-entfalten: cubic-bezier(.22, 1, .36, 1);
  --flow-dauer-feder: 280ms;
  --flow-dauer-entfalten: 340ms;
  --flow-dauer-puls: 480ms;
  --flow-dauer-kapsel: 3s;
  --flow-skala-gedrueckt-karte: .98;
  --flow-skala-wach: 1.012;
  --flow-kicker-groesse: .68rem;
  --flow-kicker-sperrung: .18em;
  --flow-kicker-gewicht: 700;
  --flow-kicker-brief-groesse: 10px;
  --flow-kicker-brief-sperrung: 2.4px;
  --flow-zustand-hub: -2px;
  --flow-zustand-hub-chip: -1px;
  --flow-zustand-druck: .97;
  --flow-zustand-druck-chip: .96;
  --flow-zustand-druck-rund: .93;
  --flow-zustand-zoom-rund: 1.06;
  --flow-zustand-zoom-orb: 1.35;
  --flow-zustand-zoom-karte: 1.02;
  --flow-zustand-druck-dauer: 80ms;
  --flow-zustand-nav-schritt: 2px;
  --flow-zustand-nav-dauer: 160ms;
  --flow-zustand-gesperrt: .48;
  --flow-zustand-mischung-hover: 28%;
  --flow-zustand-mischung-druck: 45%;
  --flow-zustand-spektrum-aktiv: 6s;
  --flow-zustand-spektrum-gewaehlt: 10s;
  --flow-zustand-spinner: .8s;
  --flow-zustand-hub-wach: -3px;
  --flow-zahl-flaeche: rgba(127, 127, 127, .22);
  --flow-code-flaeche: rgba(127, 127, 127, .16);
  --flow-eingabe-tiefe: inset 0 1px 2px rgba(0, 0, 0, .12);
  --flow-orb-aktiv: linear-gradient(#f3ce93, #e86a1c);
  --flow-orb-hof: rgba(232, 106, 28, .16);
  --flow-fehler-0: #ff9a8a;
  --flow-fehler-45: rgba(220, 60, 50, .7);
  --flow-fehler-100: rgba(220, 60, 50, .4);
  --flow-aktion-volumen: linear-gradient(180deg, #ffa255 0%, #e86a1c 60%, #d45c12 100%);
  --flow-aktion-volumen-hover: linear-gradient(180deg, #ffb070 0%, #f07a2c 60%, #d65e14 100%);
  --flow-aktion-tinte: #241102;
  --flow-aktion-kante: #c8540e;
  --flow-aktion-glanz: rgba(255, 255, 255, .45);
  --flow-aktion-schatten: 0 8px 22px rgba(200, 84, 14, .32);
  --flow-spektrumlinie: linear-gradient(90deg, #e86a1c 0%, #a879ff 54%, #5dd9c1 100%);
  --flow-held: linear-gradient(135deg, #122045 0%, #0a1128 58%, #02040a 100%);
  --flow-route-1: #ffae73;
  --flow-route-1-laenge: 43px;
  --flow-route-2: #a879ff;
  --flow-route-2-laenge: 54px;
  --flow-route-3: #5dd9c1;
  --flow-route-3-laenge: 18px;
}

:root,
[data-flow-stimmung="nacht"],
[data-fw-stimmung="nacht"] {
  --flow-grund: #07111d;
  --flow-flaeche: #0d222b;
  --flow-flaeche-2: #123038;
  --flow-glas: rgba(8, 25, 36, .78);
  --flow-text: #edf4f8;
  --flow-text-leise: #b9cbd3;
  --flow-akzent: #f3ce93;
  --flow-fokus: #ffb273;
  --flow-linie: rgba(255, 255, 255, .14);
  --flow-innenlicht: rgba(255, 255, 255, .14);
  --flow-schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  --flow-kontur-1-licht: rgba(255, 255, 255, .40);
  --flow-kontur-1-mitte: rgba(255, 217, 179, .12);
  --flow-kontur-1-schatten: rgba(0, 0, 0, .28);
  --flow-kontur-2-licht: rgba(255, 255, 255, .48);
  --flow-kontur-2-mitte: rgba(255, 178, 122, .25);
  --flow-kontur-2-schatten: rgba(143, 179, 255, .20);
  --flow-kontur-3-licht: rgba(255, 199, 158, .80);
  --flow-kontur-3-mitte: rgba(255, 140, 66, .70);
  --flow-kontur-3-schatten: rgba(168, 121, 255, .50);
  --flow-gewaehlt-flaeche: #f3ce93;
  --flow-gewaehlt-text: #142d30;
  --flow-zweit-flaeche: rgba(255, 255, 255, .06);
  --flow-zweit-text: #f4ede0;
  --flow-ghost-text: #f3ce93;
  --flow-schatten-hub: 0 30px 60px rgba(0, 0, 0, .6), 0 8px 18px rgba(0, 0, 0, .45);
  --flow-schimmer-farbe: 255 236 210;
  --flow-s1: rgba(0, 229, 255, .5);
  --flow-s2: rgba(179, 136, 255, .5);
  --flow-s3: rgba(43, 255, 136, .45);
  --flow-s4: rgba(255, 180, 0, .5);
  --flow-s5: rgba(255, 45, 95, .45);
  --flow-spektrum-schein: rgba(0, 229, 255, .16);
  --flow-wahl-flaeche: linear-gradient(128deg, rgba(255, 174, 115, .20), rgba(232, 106, 28, .30));
  --flow-wahl-kante: rgba(255, 174, 115, .55);
  --flow-wahl-text: #ffc89a;
  --flow-wahl-symbol: #e86a1c;
  --flow-wahl-symbol-text: #241102;
  --flow-symbol-flaeche: rgba(255, 255, 255, .08);
  --flow-segment-aktiv: linear-gradient(135deg, #2a3f6b, #0a1128);
  --flow-segment-aktiv-text: #ffffff;
  --flow-rahmen-flaeche: linear-gradient(125deg, #0d222b, #123038);
  --flow-rahmen-kante: rgba(255, 255, 255, .10);
  --flow-rahmen-schatten: 0 17px 45px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
  --flow-notiz-flaeche: #29201c;
  --flow-notiz-text: #f0d5bd;
  --flow-notiz-kante: #d96a22;
  --flow-ornament-licht: rgba(255, 255, 255, .55);
  --flow-ornament-mitte: rgba(255, 178, 122, .55);
  --flow-ornament-schatten: rgba(143, 179, 255, .35);
  --flow-ornament-akzent: #e86a1c;
  --flow-gefahr-text: #ff9a8a;
  --flow-gefahr-flaeche: rgba(220, 60, 50, .16);
  --flow-schatten-oben: 0 -10px 28px rgba(0, 0, 0, .45);
  --flow-wach-flaeche: rgba(18, 48, 56, .92);
  --flow-wach-schein: 0 18px 42px rgba(0, 0, 0, .55), 0 0 0 1px var(--flow-kontur-3-mitte), 0 0 28px rgba(255, 140, 66, .18);
  --flow-schublade-flaeche: rgba(7, 17, 29, .55);
}

[data-flow-stimmung="abend"],
[data-fw-stimmung="abend"] {
  --flow-grund: #14141c;
  --flow-flaeche: #221c22;
  --flow-flaeche-2: #2b2228;
  --flow-glas: rgba(30, 22, 28, .78);
  --flow-text: #f6eee4;
  --flow-text-leise: #d4c5b8;
  --flow-akzent: #ffc89a;
  --flow-fokus: #ffb273;
  --flow-linie: rgba(255, 255, 255, .14);
  --flow-innenlicht: rgba(255, 255, 255, .14);
  --flow-schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  --flow-kontur-1-licht: rgba(255, 255, 255, .40);
  --flow-kontur-1-mitte: rgba(255, 200, 150, .14);
  --flow-kontur-1-schatten: rgba(0, 0, 0, .28);
  --flow-kontur-2-licht: rgba(255, 255, 255, .48);
  --flow-kontur-2-mitte: rgba(255, 178, 122, .25);
  --flow-kontur-2-schatten: rgba(255, 150, 120, .22);
  --flow-kontur-3-licht: rgba(255, 199, 158, .80);
  --flow-kontur-3-mitte: rgba(255, 140, 66, .70);
  --flow-kontur-3-schatten: rgba(168, 121, 255, .50);
  --flow-gewaehlt-flaeche: #ffc89a;
  --flow-gewaehlt-text: #142d30;
  --flow-zweit-flaeche: rgba(255, 255, 255, .06);
  --flow-zweit-text: #f4ede0;
  --flow-ghost-text: #ffc89a;
  --flow-schatten-hub: 0 30px 60px rgba(0, 0, 0, .6), 0 8px 18px rgba(0, 0, 0, .45);
  --flow-schimmer-farbe: 255 214 170;
  --flow-s1: rgba(0, 229, 255, .5);
  --flow-s2: rgba(179, 136, 255, .5);
  --flow-s3: rgba(43, 255, 136, .45);
  --flow-s4: rgba(255, 180, 0, .5);
  --flow-s5: rgba(255, 45, 95, .45);
  --flow-spektrum-schein: rgba(0, 229, 255, .16);
  --flow-wahl-flaeche: linear-gradient(128deg, rgba(255, 174, 115, .20), rgba(232, 106, 28, .30));
  --flow-wahl-kante: rgba(255, 174, 115, .55);
  --flow-wahl-text: #ffc89a;
  --flow-wahl-symbol: #e86a1c;
  --flow-wahl-symbol-text: #241102;
  --flow-symbol-flaeche: rgba(255, 255, 255, .08);
  --flow-segment-aktiv: linear-gradient(135deg, #2a3f6b, #0a1128);
  --flow-segment-aktiv-text: #ffffff;
  --flow-rahmen-flaeche: linear-gradient(125deg, #221c22, #2b2228);
  --flow-rahmen-kante: rgba(255, 255, 255, .10);
  --flow-rahmen-schatten: 0 17px 45px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
  --flow-notiz-flaeche: #29201c;
  --flow-notiz-text: #f0d5bd;
  --flow-notiz-kante: #d96a22;
  --flow-ornament-licht: rgba(255, 255, 255, .55);
  --flow-ornament-mitte: rgba(255, 178, 122, .55);
  --flow-ornament-schatten: rgba(143, 179, 255, .35);
  --flow-ornament-akzent: #e86a1c;
  --flow-gefahr-text: #ff9a8a;
  --flow-gefahr-flaeche: rgba(220, 60, 50, .16);
  --flow-schatten-oben: 0 -10px 28px rgba(0, 0, 0, .45);
  --flow-wach-flaeche: rgba(43, 34, 40, .94);
  --flow-wach-schein: 0 18px 42px rgba(0, 0, 0, .55), 0 0 0 1px var(--flow-kontur-3-mitte), 0 0 28px rgba(255, 200, 154, .16);
  --flow-schublade-flaeche: rgba(20, 20, 28, .55);
}

[data-flow-stimmung="papier"],
[data-fw-stimmung="papier"],
.paper,
.flow-dialog {
  --flow-grund: #e8e0ce;
  --flow-flaeche: #fffaf0;
  --flow-flaeche-2: #f4eddf;
  --flow-glas: rgba(255, 250, 240, .86);
  --flow-text: #18231e;
  --flow-text-leise: #4d6359;
  --flow-akzent: #0b4a3d;
  --flow-fokus: #c8540e;
  --flow-linie: rgba(24, 35, 30, .14);
  --flow-innenlicht: rgba(255, 255, 255, .85);
  --flow-schatten: 0 1px 2px rgba(20, 36, 28, .06), 0 8px 24px rgba(20, 36, 28, .08);
  --flow-kontur-1-licht: rgba(255, 255, 255, .90);
  --flow-kontur-1-mitte: rgba(205, 174, 133, .22);
  --flow-kontur-1-schatten: rgba(92, 58, 26, .18);
  --flow-kontur-2-licht: #ffffff;
  --flow-kontur-2-mitte: rgba(212, 166, 107, .50);
  --flow-kontur-2-schatten: rgba(135, 79, 31, .35);
  --flow-kontur-3-licht: rgba(255, 178, 115, .80);
  --flow-kontur-3-mitte: rgba(232, 106, 28, .65);
  --flow-kontur-3-schatten: rgba(123, 75, 214, .45);
  --flow-gewaehlt-flaeche: #0b4a3d;
  --flow-gewaehlt-text: #fffaf0;
  --flow-zweit-flaeche: #fff9ee;
  --flow-zweit-text: #18231e;
  --flow-ghost-text: #0b4a3d;
  --flow-schatten-hub: 0 26px 52px rgba(20, 36, 28, .2), 0 6px 16px rgba(20, 36, 28, .1);
  --flow-schimmer-farbe: 255 255 255;
  --flow-s1: rgba(255, 178, 115, .40);
  --flow-s2: rgba(232, 106, 28, .36);
  --flow-s3: rgba(214, 166, 64, .38);
  --flow-s4: rgba(123, 75, 214, .32);
  --flow-s5: rgba(201, 120, 90, .34);
  --flow-spektrum-schein: rgba(232, 106, 28, .12);
  --flow-wahl-flaeche: linear-gradient(128deg, #fff2dc, #ffe3c4);
  --flow-wahl-kante: #eaae77;
  --flow-wahl-text: #753908;
  --flow-wahl-symbol: #e86a1c;
  --flow-wahl-symbol-text: #ffffff;
  --flow-symbol-flaeche: #f1e6d8;
  --flow-segment-aktiv: linear-gradient(135deg, #17315a, #0a1128);
  --flow-segment-aktiv-text: #ffffff;
  --flow-rahmen-flaeche: linear-gradient(125deg, #f5e8d4, #fff9ee);
  --flow-rahmen-kante: #dbc7a8;
  --flow-rahmen-schatten: 0 17px 45px rgba(72, 50, 27, .11), 0 2px 4px rgba(0, 0, 0, .03);
  --flow-notiz-flaeche: #fff0d4;
  --flow-notiz-text: #4c3926;
  --flow-notiz-kante: #d96a22;
  --flow-linie-gold: rgba(201, 150, 52, .9);
  --flow-linie-kern: rgba(38, 22, 10, .7);
  --flow-linie-glanz: #ffe39a;
  --flow-ornament-licht: rgba(205, 174, 133, .70);
  --flow-ornament-mitte: rgba(232, 106, 28, .55);
  --flow-ornament-schatten: rgba(92, 58, 26, .35);
  --flow-ornament-akzent: #e86a1c;
  --flow-gefahr-text: #9b1c1c;
  --flow-gefahr-flaeche: #fdecea;
  --flow-schatten-oben: 0 -10px 28px rgba(20, 36, 28, .10);
  --flow-wach-flaeche: #ffffff;
  --flow-wach-schein: 0 16px 36px rgba(92, 58, 26, .14), 0 0 0 1.5px var(--flow-kontur-3-mitte);
  --flow-schublade-flaeche: #f4eddf;
}

[data-flow-bewegung="lebendig"] {
  --flow-zustand-hub: -3px;
  --flow-zustand-zoom-karte: 1.04;
  --flow-zustand-zoom-rund: 1.1;
  --flow-zustand-zoom-orb: 1.5;
  --flow-zustand-hub-wach: -4px;
  --flow-skala-wach: 1.02;
}

[data-flow-bewegung="aus"] {
  --flow-zustand-hub: 0px;
  --flow-zustand-hub-chip: 0px;
  --flow-zustand-zoom-karte: 1;
  --flow-zustand-zoom-rund: 1;
  --flow-zustand-druck: 1;
  --flow-zustand-druck-chip: 1;
  --flow-zustand-druck-rund: 1;
  --flow-zustand-hub-wach: 0px;
  --flow-skala-wach: 1;
  --flow-skala-gedrueckt-karte: 1;
}
}