/* Design-Tokens Bookfairy (helles Design) – öffentliche Website, App und Admin.
 * Runde 3 (06.11.2026, Noah: „weniger Lila, plastisch wie Shelf, gleiche Schriften“): klares, ruhiges Violett statt
 * Neon-Violett, Sora für Überschriften und Zahlen, Manrope für Text (wie Shelf Publisher, SIL OFL, selbst gehostet),
 * plastische Knöpfe und Flächen über die Verläufe und Schatten unten. Das Logo bleibt die gezeichnete Wortmarke.
 * Die alten Namen (--paper, --sheet, --accent …) bleiben als Schnittstelle für app.css, admin.css und die
 * Teil-Stylesheets. Kontraste: Weiß auf --v-500 4,6:1, auf --v-600 5,8:1; --v-600 als Text auf Weiß 5,8:1.
 */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/sora-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sora"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/sora-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  color-scheme: light;
  /* Marke */
  --v-800: #44308C;
  --v-700: #553AA8;
  --v-600: #6C4BC9;
  --v-500: #7E62D6;
  --v-400: #9A82E2;
  --v-300: #B4A2EA;
  --v-200: #D8CFF4;
  --v-100: #EBE6FA;
  --v-50: #F6F4FD;
  --nacht: #0E0B1F;
  --nacht-2: #1A1633;
  --nacht-line: #2E2850;
  --nacht-text: #B8B3CC;
  --funke: #D4FF3A;
  --funke-hover: #C6F21E;
  --pink: #FF4FB8;
  --line: #E8E5F3;

  /* Flächen */
  --paper: #FFFFFF;        /* Seitenhintergrund */
  --paper-2: #F9F8FD;      /* abgesetzte Sektionen (lavendel, fast weiß) */
  --sheet: #FFFFFF;        /* Karten */
  --sheet-2: #FFFFFF;      /* Bildschirm-Mocks, Dialoge */
  --ink: #121730;          /* Text, 17,6:1 auf Weiß */
  --ink-2: #4B5068;        /* Sekundärtext, 7,9:1 */
  --ink-3: #5F6380;        /* Meta, 5,9:1 */
  --rule: #E8E5F3;         /* Haarlinien */
  --rule-strong: #D5D0E6;
  /* Akzente */
  --accent: #6C4BC9;       /* Weiß darauf 6,5:1 */
  --accent-hover: #553AA8;
  --accent-ink: #6C4BC9;   /* Akzent als Text auf Weiß, 6,5:1 */
  --accent-soft: #EBE6FA;
  --on-accent: #FFFFFF;
  --marker: #D4FF3A;       /* Hervorhebung (Funke) */
  --marker-soft: rgba(212, 255, 58, .5);
  --ins: #0E7C47;          /* Einfügungen im Lektorat, 5,3:1 */
  --ins-soft: #ECFDF3;
  --del: #C42727;          /* Streichungen, 5,7:1 */
  --del-soft: #FEF2F2;
  --note: #B45309;         /* Randkommentar, 5,0:1 */
  --note-soft: #FFF7E6;
  /* Nacht-Band (dunkle Sektionen) */
  --band: #0E0B1F;
  --band-2: #1A1633;
  --band-ink: #FFFFFF;
  --band-ink-2: #B8B3CC;
  --band-rule: #2E2850;
  --band-accent: #D4FF3A;

  /* Schrift */
  --font-display: "Sora", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs: .875rem;   /* Meta, nie kleiner */
  --fs-src: .8125rem; /* nur Quellenlisten (N9): kleiner als Meta, mit --ink-3 auf Weiß 5,9:1 (WCAG AA) */
  --fs-sm: .9375rem;
  --fs-base: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.3rem, 1.15rem + .6vw, 1.5rem);
  --fs-h3: clamp(1.3125rem, 1.2rem + .5vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2vw, 3rem);        /* kurze Überschriften, Shelf-Maß */
  --fs-h1: clamp(2.5rem, 1.5rem + 3.6vw, 4.375rem);
  --lh-tight: .98;
  --lh-head: 1.04;
  --lh-text: 1.55;

  /* Raum */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --wrap: 1200px;
  --gutter: clamp(1rem, .6rem + 1.6vw, 1.25rem);
  --section: clamp(4.5rem, 3rem + 5vw, 7rem);

  /* Form */
  --radius-sm: 10px;
  --radius: 20px;
  --radius-lg: 28px;
  --pill: 999px;
  --radius-btn: 12px;
  /* Flächen schichten wie bei Shelf: Haarlinie, weicher Schatten mit Violettstich */
  --shadow-xs: 0 1px 2px rgba(34, 26, 74, .06);
  --shadow-sm: 0 1px 2px rgba(34, 26, 74, .05), 0 2px 6px rgba(34, 26, 74, .05);
  --shadow-1: 0 2px 4px rgba(34, 26, 74, .04), 0 10px 24px -8px rgba(34, 26, 74, .12);
  --shadow-2: 0 4px 8px -2px rgba(34, 26, 74, .07), 0 18px 36px -14px rgba(34, 26, 74, .2);
  --shadow-3: 0 40px 80px -20px rgba(14, 11, 31, .5);
  /* Knöpfe plastisch: Verlauf von oben nach unten, helle Kante oben, farbiger Schatten darunter */
  --btn-bg: #6C4BC9;
  --btn-bg-hover: #553AA8;
  --btn-ink: #FFFFFF;
  --btn-grad: linear-gradient(180deg, #7E62D6, #6647C4);
  --btn-grad-hover: linear-gradient(180deg, #6C4BC9, #553AA8);
  --btn-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(76, 51, 160, .35), 0 8px 18px -8px rgba(76, 51, 160, .7);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 4px rgba(76, 51, 160, .3), 0 12px 24px -8px rgba(76, 51, 160, .75);
  --btn-shadow-active: inset 0 2px 4px rgba(40, 26, 92, .35);
  --btn-2-bg: #FFFFFF;
  --btn-2-grad: linear-gradient(180deg, #FFFFFF, #FAF9FE);
  --btn-2-line: #D5D0E6;
  --btn-2-hover: #F6F4FD;
  --btn-2-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(34, 26, 74, .08);
  --glow: var(--btn-shadow);
  --focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent);
  /* Bildmarken: weiße Linien-Icons auf Verlaufskacheln, je Thema ein Ton */
  --tile-violet: linear-gradient(145deg, #8F76DF, #5F41BC);
  --tile-plum: linear-gradient(145deg, #B06BD6, #7A3FAE);
  --tile-amber: linear-gradient(145deg, #F7B23B, #E4830F);
  --tile-green: linear-gradient(145deg, #2FC39A, #0F8F6C);
  --tile-rose: linear-gradient(145deg, #F0719B, #C93B6D);
  --tile-night: linear-gradient(145deg, #3A2F6E, #17122F);
  --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 14px -6px rgba(34, 26, 74, .45);
  /* eine Haarlinie Licht an der Oberkante einer erhabenen Fläche (als background-image, ohne Pseudo-Element) */
  --edge-light: linear-gradient(90deg, transparent, rgba(108, 75, 201, .24), transparent);
  /* Eingabefelder liegen eingelassen, der Fokus ist ein weicher Ring */
  --field-shadow: inset 0 1px 2px rgba(34, 26, 74, .06);
  --field-ring: 0 0 0 3px rgba(108, 75, 201, .16);
  /* Fortschritt */
  --bar-grad: linear-gradient(90deg, #6647C4, #8F76DF);
  /* gewählte Karte */
  --picked-grad: linear-gradient(180deg, #F6F4FD, #FFFFFF);
  --picked-ring: 0 0 0 3px rgba(108, 75, 201, .14), 0 8px 18px -10px rgba(76, 51, 160, .4);
  --check-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* große Zahlen */
  --num-grad: linear-gradient(115deg, #121730 10%, #553AA8 65%, #7E62D6);
  /* Flächen mit Leben: heller Schein aus einer Ecke */
  --sheen: radial-gradient(90% 120% at 100% 0%, rgba(235, 230, 250, .75), transparent 60%);
  /* Hero-Tafel oben auf einer Seite */
  --hero-grad: radial-gradient(120% 140% at 100% 0%, #E6E0F9 0%, transparent 55%), linear-gradient(135deg, #FFFFFF 35%, #F6F4FD);

  /* Bewegung */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 180ms;
  --t: 220ms;
  --t-slow: 520ms;
}

/* Aliasse für die Kern-App (app.css liest diese Namen mit Fallbacks) */
:root {
  --color-bg: #FAF9FD;
  --color-surface: var(--sheet);
  --color-text: var(--ink);
  --color-muted: var(--ink-3);
  --color-primary: var(--accent);
  --color-primary-contrast: var(--on-accent);
  --color-border: var(--rule);
  --font-sans: var(--font-text);
}

/* Zahlen in Kreisen und runden Zählern (Noah 07.11.2026): die eine Stelle für die Mittigkeit, die Einzelregeln setzen nur
   Größe und Farbe. Getrimmt wird auf Versalhöhe und Grundlinie, damit die Ziffer selbst mittig sitzt und nicht ihre Zeile;
   ohne text-box bleibt die Zeile mittig (Abweichung unter 0,3 px). Nachmessen: scripts/e2e/zahlen-mittig.mjs */
.bell-badge, .stage-n, .tool-step-n, .tut-step-ic b, .flow-ic i, .vw-outline li i, .ms-text sup, .phase-head .n, .adm-seg-n, .dash-alert-n {
  display: inline-block;
  align-content: center;
  text-align: center;
  line-height: 1;
  padding-block: 0;
  font-variant-numeric: lining-nums proportional-nums; /* Tabellenziffern lassen die 1 außermittig stehen */
  text-box: trim-both cap alphabetic;
}