/*
 * R3c – globale App-Basis
 *
 * Verantwortlichkeit dieser Datei:
 * - globale Typografie, Box-Sizing und Basis-Hintergrundverhalten
 * - gemeinsame Page-Shell-Komponenten für modulübergreifend genutzte UI
 * - generische Header-, Backlink-, Grid- und Dialog-Bausteine
 *
 * Nicht Aufgabe dieser Datei:
 * - Dashboard-Wheel/Fader/Favoritenlogik
 * - modulare Fachstyles für Admin/Dispo/Crew-Spezialseiten
 * - semantisches Background-Mapping je Seite (liegt in page-backgrounds.css)
 */
:root{
  /* ================================================================
   * App Design Tokens — R4-Basis
   * Alle Farbwerte der App über diese Variablen steuern.
   * Hardcoded rgba/hex in Modul-CSS durch var(--*) ersetzen.
   * ================================================================ */

  /* Texte */
  --text:          #fff;
  --text-muted:    rgba(255,255,255,0.80);
  --text-faint:    rgba(255,255,255,0.60);

  /* Hintergründe */
  --card-bg:       rgba(0,0,0,0.55);
  --card-bg-light: rgba(255,255,255,0.12);
  --input-bg:      rgba(0,0,0,0.25);
  --input-bg-hover:rgba(0,0,0,0.35);
  --btn-bg:        rgba(255,255,255,0.14);

  /* Rahmen */
  --border:        rgba(255,255,255,0.18);
  --border-soft:   rgba(255,255,255,0.12);
  --border-faint:  rgba(255,255,255,0.08);
  --card-border:   rgba(255,255,255,0.18);

  /* Semantische Farben (Rahmen / Hintergrund) */
  --success-border: rgba(120,255,170,0.45);
  --success-bg:     rgba(120,255,170,0.12);
  --danger-border:  rgba(255,90,90,0.60);
  --danger-bg:      rgba(255,90,90,0.14);
  --danger-border-soft: rgba(255,90,90,0.35);
  --warning-border: rgba(255,210,120,0.55);
  --warning-bg:     rgba(255,210,120,0.12);
  --info-border:    rgba(120,180,255,0.35);
  --info-bg:        rgba(80,130,255,0.12);
  --ok-border:      rgba(0,180,90,0.35);
  --ok-bg:          rgba(0,180,90,0.16);

  /* Border-Radius */
  --radius-sm:     8px;
  --radius-input:  12px;
  --radius-card:   16px;
  --radius-card-lg:18px;
  --radius-pill:   999px;

  /* Layout */
  --app-shell-max-width: 1100px;
  --app-shell-padding:   24px;
  --app-page-overlay: radial-gradient(circle at center, rgba(0,0,0,0.10), rgba(0,0,0,0.65));

  /* ================================================================
   * R10a – kanonische Literal-Aliase für finalen CSS-Abschluss
   * Keine neuen Rohfarben in Modul-CSS; bestehende Visuals 1:1 über Tokens.
   * ================================================================ */
  --space-2:       8px;
  --space-3:       10px;
  --space-4:       12px;
  --space-5:       14px;
  --space-6:       16px;
  --page-bg-default: url('/public/images/backgrounds/default.webp');
  --page-bg-black:   url('/public/images/backgrounds/black.webp');
  --page-bg-dashboard: url('/public/images/backgrounds/dashboard.webp');
  --page-bg-admin:   url('/public/images/backgrounds/admin.webp');
  --page-bg-crewportal: url('/public/images/backgrounds/crewportal_default.webp');
  --page-bg-services: url('/public/images/backgrounds/meine Dienste.webp');
  --page-bg-community: url('/public/images/backgrounds/community.webp');
  --page-bg-headphones: url('/public/images/backgrounds/Headphones.webp');
  --page-bg-rig:     url('/public/images/backgrounds/rig.webp');
  --page-bg-geruest: url('/public/images/backgrounds/geruest.webp');
  --color-black: #000;
  --color-link-primary: #007bff;
  --color-body-base: #050505;
  --color-badge-success-bg: #0a7a3c;
  --color-success-text-strong: #0b3;
  --color-ink-strong: #111;
  --lit-hex-1e90ff-5746f9: #1e90ff;
  --color-table-head-bg: #2f3f4f;
  --color-warning-text-strong: #6a4a00;
  --color-accent-lime: #87f8a7;
  --color-badge-warning-bg: #8a5a00;
  --color-badge-danger-bg: #8b1f1f;
  --color-accent-lime-bright: #96ff75;
  --color-accent-lime-strong: #9bff8f;
  --color-accent-lime-soft: #a8ff92;
  --color-danger-text-strong: #b00;
  --color-success-text-soft: #b8ffd0;
  --color-success-text-soft-alt: #dbfff1;
  --color-info-text-soft: #e6f1ff;
  --color-text-soft-light: #eaeaea;
  --color-danger-text-soft: #ffe3e7;
  --color-white: #fff;
  --color-warning-text-soft: #fff8d5;
  --lit-hex-ffffff-54922f: #ffffff;
  --shadow-04: rgba(0,0,0,.04);
  --shadow-05: rgba(0,0,0,.05);
  --shadow-06: rgba(0,0,0,.06);
  --shadow-08: rgba(0,0,0,.08);
  --lit-rgba-0-0-0-d1-3e8815: rgba(0,0,0,.1);
  --shadow-10: rgba(0,0,0,.10);
  --shadow-12: rgba(0,0,0,.12);
  --lit-rgba-0-0-0-d13-6f6e43: rgba(0,0,0,.13);
  --shadow-14: rgba(0,0,0,.14);
  --shadow-15: rgba(0,0,0,.15);
  --lit-rgba-0-0-0-d16-ebeb8c: rgba(0,0,0,.16);
  --shadow-18: rgba(0,0,0,.18);
  --lit-rgba-0-0-0-d22-0d1818: rgba(0,0,0,.22);
  --shadow-24: rgba(0,0,0,.24);
  --shadow-26: rgba(0,0,0,.26);
  --lit-rgba-0-0-0-d32-29e357: rgba(0,0,0,.32);
  --shadow-35: rgba(0,0,0,.35);
  --shadow-52: rgba(0,0,0,.52);
  --shadow-55: rgba(0,0,0,.55);
  --shadow-58: rgba(0,0,0,.58);
  --shadow-60: rgba(0,0,0,.6);
  --shadow-60-alt: rgba(0,0,0,.60);
  --shadow-65: rgba(0,0,0,.65);
  --shadow-70: rgba(0,0,0,.70);
  --shadow-72: rgba(0,0,0,.72);
  --shadow-75: rgba(0,0,0,.75);
  --shadow-transparent: rgba(0,0,0,0);
  --shadow-transparent-alt: rgba(0,0,0,0.0);
  --shadow-10-alt: rgba(0,0,0,0.1);
  --shadow-14-alt: rgba(0,0,0,0.14);
  --shadow-16: rgba(0,0,0,0.16);
  --shadow-20: rgba(0,0,0,0.2);
  --shadow-20-alt: rgba(0,0,0,0.20);
  --shadow-22: rgba(0,0,0,0.22);
  --shadow-24-alt: rgba(0,0,0,0.24);
  --lit-rgba-0-0-0-0d25-984d8f: rgba(0,0,0,0.25);
  --shadow-28: rgba(0,0,0,0.28);
  --lit-rgba-0-0-0-0d3-0309bf: rgba(0,0,0,0.3);
  --shadow-30: rgba(0,0,0,0.30);
  --shadow-32: rgba(0,0,0,0.32);
  --shadow-34: rgba(0,0,0,0.34);
  --shadow-35-alt: rgba(0,0,0,0.35);
  --shadow-36: rgba(0,0,0,0.36);
  --shadow-38: rgba(0,0,0,0.38);
  --shadow-40: rgba(0,0,0,0.40);
  --shadow-42: rgba(0,0,0,0.42);
  --shadow-45: rgba(0,0,0,0.45);
  --shadow-46: rgba(0,0,0,0.46);
  --shadow-48: rgba(0,0,0,0.48);
  --shadow-52-alt: rgba(0,0,0,0.52);
  --shadow-55-alt: rgba(0,0,0,0.55);
  --shadow-56: rgba(0,0,0,0.56);
  --shadow-58-alt: rgba(0,0,0,0.58);
  --lit-rgba-0-0-0-0d6-675dec: rgba(0,0,0,0.6);
  --shadow-60-deep: rgba(0,0,0,0.60);
  --lit-rgba-0-0-0-0d65-2649a1: rgba(0,0,0,0.65);
  --lit-rgba-0-0-0-0d7-f42b43: rgba(0,0,0,0.7);
  --shadow-70-deep: rgba(0,0,0,0.70);
  --shadow-72-deep: rgba(0,0,0,0.72);
  --shadow-74: rgba(0,0,0,0.74);
  --shadow-78: rgba(0,0,0,0.78);
  --lit-rgba-0-0-0-0d8-ebabe1: rgba(0,0,0,0.8);
  --shadow-80: rgba(0,0,0,0.80);
  --shadow-82: rgba(0,0,0,0.82);
  --shadow-84: rgba(0,0,0,0.84);
  --shadow-86: rgba(0,0,0,0.86);
  --shadow-88: rgba(0,0,0,0.88);
  --shadow-90: rgba(0,0,0,0.9);
  --shadow-92: rgba(0,0,0,0.92);
  --lit-rgba-0-120-255-d35-54fdab: rgba(0,120,255,.35);
  --lit-rgba-0-120-255-0d35-04872a: rgba(0,120,255,0.35);
  --lit-rgba-0-180-120-d14-87f345: rgba(0,180,120,.14);
  --lit-rgba-0-180-120-d3-bccfcb: rgba(0,180,120,.3);
  --lit-rgba-0-180-90-d16-716589: rgba(0,180,90,.16);
  --lit-rgba-0-180-90-d35-7ef0a8: rgba(0,180,90,.35);
  --lit-rgba-0-200-110-d14-0621c0: rgba(0,200,110,.14);
  --lit-rgba-0-200-110-d25-5d97e7: rgba(0,200,110,.25);
  --lit-rgba-0-255-140-d14-19caa2: rgba(0,255,140,.14);
  --lit-rgba-0-255-140-d28-1146be: rgba(0,255,140,.28);
  --lit-rgba-0-255-160-0d28-ab1f60: rgba(0,255,160,0.28);
  --lit-rgba-1-2-4-0d94-8e0f7a: rgba(1,2,4,0.94);
  --lit-rgba-10-10-10-0d55-6e4aeb: rgba(10,10,10,0.55);
  --lit-rgba-10-10-10-0d58-f74913: rgba(10,10,10,0.58);
  --lit-rgba-108-255-88-0d42-20626a: rgba(108,255,88,0.42);
  --lit-rgba-12-16-22-0d98-7ed092: rgba(12,16,22,0.98);
  --lit-rgba-120-255-170-d18-29db9e: rgba(120,255,170,.18);
  --lit-rgba-120-255-170-0d42-e0737a: rgba(120,255,170,0.42);
  --lit-rgba-13-16-21-0d98-d207f4: rgba(13,16,21,0.98);
  --lit-rgba-130-200-255-0d10-3ce4f9: rgba(130,200,255,0.10);
  --lit-rgba-130-200-255-0d12-452887: rgba(130,200,255,0.12);
  --lit-rgba-132-139-147-0d96-db746a: rgba(132,139,147,0.96);
  --lit-rgba-137-255-112-0d95-218d91: rgba(137,255,112,0.95);
  --lit-rgba-14-16-20-0d92-21f49a: rgba(14,16,20,0.92);
  --lit-rgba-140-220-255-0d16-c97a0a: rgba(140,220,255,0.16);
  --lit-rgba-144-255-123-0d96-6fac88: rgba(144,255,123,0.96);
  --lit-rgba-15-18-23-0d98-3e42d8: rgba(15,18,23,0.98);
  --lit-rgba-150-156-163-0d96-8daf04: rgba(150,156,163,0.96);
  --lit-rgba-158-158-158-0d70-ebe91f: rgba(158,158,158,0.70);
  --lit-rgba-160-160-160-0d62-2c777a: rgba(160,160,160,0.62);
  --lit-rgba-160-160-160-0d68-5ecde1: rgba(160,160,160,0.68);
  --lit-rgba-160-168-176-0d98-84c29c: rgba(160,168,176,0.98);
  --lit-rgba-168-174-180-0d98-77b3b1: rgba(168,174,180,0.98);
  --lit-rgba-17-20-25-0d98-6dd304: rgba(17,20,25,0.98);
  --lit-rgba-175-195-180-0d55-96c5d0: rgba(175,195,180,0.55);
  --lit-rgba-18-22-26-0d98-739245: rgba(18,22,26,0.98);
  --lit-rgba-182-255-203-0d34-035d48: rgba(182,255,203,0.34);
  --lit-rgba-183-204-190-0d48-8935fa: rgba(183,204,190,0.48);
  --lit-rgba-190-255-190-0d98-bd5ca4: rgba(190,255,190,0.98);
  --lit-rgba-22-22-22-0d72-f96ecf: rgba(22,22,22,0.72);
  --lit-rgba-220-53-69-d16-b60119: rgba(220,53,69,.16);
  --lit-rgba-220-53-69-d38-f9c97d: rgba(220,53,69,.38);
  --lit-rgba-225-230-235-0d98-8525e6: rgba(225,230,235,0.98);
  --lit-rgba-226-229-233-0d96-111fe0: rgba(226,229,233,0.96);
  --lit-rgba-230-232-236-0d95-ff9dec: rgba(230,232,236,0.95);
  --lit-rgba-230-232-236-0d97-f3e0e7: rgba(230,232,236,0.97);
  --lit-rgba-230-255-0-0d22-2a99e1: rgba(230,255,0,0.22);
  --lit-rgba-231-76-60-d16-29aaf8: rgba(231,76,60,.16);
  --lit-rgba-231-76-60-d35-458518: rgba(231,76,60,.35);
  --lit-rgba-236-239-243-0d98-6764bc: rgba(236,239,243,0.98);
  --lit-rgba-24-24-24-0d78-6f007a: rgba(24,24,24,0.78);
  --lit-rgba-244-244-244-0d90-1008e0: rgba(244,244,244,0.90);
  --lit-rgba-245-245-245-0d94-772892: rgba(245,245,245,0.94);
  --lit-rgba-245-248-250-0d98-391459: rgba(245,248,250,0.98);
  --lit-rgba-248-255-248-0d96-81afee: rgba(248,255,248,0.96);
  --lit-rgba-248-255-248-0d98-ccdd9f: rgba(248,255,248,0.98);
  --lit-rgba-25-25-25-0d95-722ed6: rgba(25,25,25,0.95);
  --lit-rgba-250-250-250-0d92-272534: rgba(250,250,250,0.92);
  --lit-rgba-255-0-0-d18-adb35c: rgba(255,0,0,.18);
  --lit-rgba-255-0-0-d35-49f15c: rgba(255,0,0,.35);
  --lit-rgba-255-0-60-0d26-c545be: rgba(255,0,60,0.26);
  --lit-rgba-255-120-0-0d22-0623c3: rgba(255,120,0,0.22);
  --lit-rgba-255-170-40-0d42-b9fcb9: rgba(255,170,40,0.42);
  --lit-rgba-255-170-40-0d95-0f080d: rgba(255,170,40,0.95);
  --lit-rgba-255-180-0-d16-748a04: rgba(255,180,0,.16);
  --lit-rgba-255-180-0-d35-4ca7dd: rgba(255,180,0,.35);
  --lit-rgba-255-193-7-d18-e61381: rgba(255,193,7,.18);
  --lit-rgba-255-193-7-d40-0a88bc: rgba(255,193,7,.40);
  --lit-rgba-255-200-0-d18-249e25: rgba(255,200,0,.18);
  --lit-rgba-255-200-0-d35-a17766: rgba(255,200,0,.35);
  --lit-rgba-255-210-70-d14-92fa60: rgba(255,210,70,.14);
  --lit-rgba-255-210-70-d95-c9b5bc: rgba(255,210,70,.95);
  --lit-rgba-255-215-0-0d18-5710d7: rgba(255,215,0,0.18);
  --lit-rgba-255-215-0-0d30-837904: rgba(255,215,0,0.30);
  --surface-dark-035: rgba(255,255,255,.035);
  --surface-dark-05: rgba(255,255,255,.05);
  --surface-dark-06: rgba(255,255,255,.06);
  --surface-dark-08: rgba(255,255,255,.08);
  --surface-dark-09: rgba(255,255,255,.09);
  --lit-rgba-255-255-255-d1-d9f067: rgba(255,255,255,.1);
  --surface-dark-10: rgba(255,255,255,.10);
  --surface-dark-14: rgba(255,255,255,.14);
  --surface-dark-15: rgba(255,255,255,.15);
  --surface-dark-16: rgba(255,255,255,.16);
  --surface-dark-18: rgba(255,255,255,.18);
  --lit-rgba-255-255-255-d32-057b90: rgba(255,255,255,.32);
  --text-on-dark-soft: rgba(255,255,255,.65);
  --text-on-dark-muted: rgba(255,255,255,.68);
  --lit-rgba-255-255-255-d7-e28478: rgba(255,255,255,.7);
  --text-on-light-muted: rgba(255,255,255,.70);
  --surface-light-muted-72: rgba(255,255,255,.72);
  --surface-light-muted-74: rgba(255,255,255,.74);
  --lit-rgba-255-255-255-d75-daac4d: rgba(255,255,255,.75);
  --surface-light-muted-76: rgba(255,255,255,.76);
  --surface-light-muted-78: rgba(255,255,255,.78);
  --surface-light-muted-80: rgba(255,255,255,.8);
  --surface-light-muted: rgba(255,255,255,.82);
  --surface-light-muted-84: rgba(255,255,255,.84);
  --surface-light-muted-85: rgba(255,255,255,.85);
  --surface-light-muted-86: rgba(255,255,255,.86);
  --surface-light-muted-88: rgba(255,255,255,.88);
  --surface-light-soft: rgba(255,255,255,.9);
  --surface-light-soft-90: rgba(255,255,255,.90);
  --surface-light: rgba(255,255,255,.92);
  --surface-light-strong: rgba(255,255,255,.95);
  --alpha-transparent: rgba(255,255,255,0);
  --lit-rgba-255-255-255-0d0-f8758e: rgba(255,255,255,0.0);
  --alpha-transparent-alt: rgba(255,255,255,0.00);
  --lit-rgba-255-255-255-0d02-f52400: rgba(255,255,255,0.02);
  --surface-dark-03: rgba(255,255,255,0.03);
  --surface-dark-04: rgba(255,255,255,0.04);
  --surface-dark-05-alt: rgba(255,255,255,0.05);
  --surface-dark-06-alt: rgba(255,255,255,0.06);
  --surface-dark-07: rgba(255,255,255,0.07);
  --surface-dark-08-alt: rgba(255,255,255,0.08);
  --surface-dark-09-alt: rgba(255,255,255,0.09);
  --surface-dark-10-alt: rgba(255,255,255,0.10);
  --surface-dark-11: rgba(255,255,255,0.11);
  --surface-dark-12-alt: rgba(255,255,255,0.12);
  --surface-dark-13: rgba(255,255,255,0.13);
  --surface-dark-15-alt: rgba(255,255,255,0.15);
  --surface-dark-16-alt: rgba(255,255,255,0.16);
  --surface-dark-18-alt: rgba(255,255,255,0.18);
  --lit-rgba-255-255-255-0d2-6acb65: rgba(255,255,255,0.2);
  --surface-dark-20: rgba(255,255,255,0.20);
  --surface-dark-22: rgba(255,255,255,0.22);
  --surface-dark-24: rgba(255,255,255,0.24);
  --surface-dark-25: rgba(255,255,255,0.25);
  --surface-dark-26: rgba(255,255,255,0.26);
  --surface-dark-30: rgba(255,255,255,0.30);
  --surface-dark-34: rgba(255,255,255,0.34);
  --surface-dark-38: rgba(255,255,255,0.38);
  --surface-dark-42: rgba(255,255,255,0.42);
  --surface-dark-44: rgba(255,255,255,0.44);
  --surface-dark-46: rgba(255,255,255,0.46);
  --surface-dark-48: rgba(255,255,255,0.48);
  --surface-dark-52: rgba(255,255,255,0.52);
  --surface-dark-54: rgba(255,255,255,0.54);
  --surface-dark-55: rgba(255,255,255,0.55);
  --surface-dark-56: rgba(255,255,255,0.56);
  --surface-dark-58: rgba(255,255,255,0.58);
  --surface-dark-64: rgba(255,255,255,0.64);
  --lit-rgba-255-255-255-0d66-543ab9: rgba(255,255,255,0.66);
  --surface-dark-68: rgba(255,255,255,0.68);
  --surface-dark-70: rgba(255,255,255,0.70);
  --surface-dark-72: rgba(255,255,255,0.72);
  --surface-dark-74: rgba(255,255,255,0.74);
  --surface-dark-78: rgba(255,255,255,0.78);
  --lit-rgba-255-255-255-0d82-907d75: rgba(255,255,255,0.82);
  --surface-dark-86: rgba(255,255,255,0.86);
  --surface-dark-88: rgba(255,255,255,0.88);
  --surface-dark-92: rgba(255,255,255,0.92);
  --lit-rgba-255-255-255-0d95-02bf4c: rgba(255,255,255,0.95);
  --lit-rgba-255-90-90-d14-9ed57a: rgba(255,90,90,.14);
  --lit-rgba-255-90-90-d16-8622d6: rgba(255,90,90,.16);
  --lit-rgba-255-90-90-d18-6ee9e2: rgba(255,90,90,.18);
  --lit-rgba-255-90-90-d22-2262ea: rgba(255,90,90,.22);
  --lit-rgba-255-90-90-d25-457dac: rgba(255,90,90,.25);
  --lit-rgba-255-90-90-d35-b0349e: rgba(255,90,90,.35);
  --lit-rgba-26-29-34-0d97-73e522: rgba(26,29,34,0.97);
  --lit-rgba-29-32-37-0d98-af3d28: rgba(29,32,37,0.98);
  --lit-rgba-3-4-6-0d98-16bddd: rgba(3,4,6,0.98);
  --lit-rgba-30-144-255-d08-7eb545: rgba(30,144,255,.08);
  --lit-rgba-30-144-255-d10-893bdd: rgba(30,144,255,.10);
  --lit-rgba-30-144-255-d12-360694: rgba(30,144,255,.12);
  --lit-rgba-30-144-255-d18-426207: rgba(30,144,255,.18);
  --lit-rgba-30-144-255-d22-80d092: rgba(30,144,255,.22);
  --lit-rgba-30-144-255-d25-ad5d72: rgba(30,144,255,.25);
  --lit-rgba-30-144-255-d28-d3a9f6: rgba(30,144,255,.28);
  --lit-rgba-30-144-255-d32-b7710b: rgba(30,144,255,.32);
  --lit-rgba-30-30-30-0d72-6b16d1: rgba(30,30,30,0.72);
  --lit-rgba-32-173-106-d18-ba7f11: rgba(32,173,106,.18);
  --lit-rgba-32-173-106-d40-5c0118: rgba(32,173,106,.40);
  --lit-rgba-34-34-34-0d88-0d6450: rgba(34,34,34,0.88);
  --lit-rgba-34-34-34-0d92-08b9e8: rgba(34,34,34,0.92);
  --lit-rgba-34-37-42-0d98-825d9c: rgba(34,37,42,0.98);
  --lit-rgba-35-39-44-0d96-ec67c9: rgba(35,39,44,0.96);
  --lit-rgba-4-5-8-0d98-551be6: rgba(4,5,8,0.98);
  --lit-rgba-42-42-42-0d72-923e87: rgba(42,42,42,0.72);
  --lit-rgba-46-204-113-d16-2e3553: rgba(46,204,113,.16);
  --lit-rgba-46-204-113-d35-463bcc: rgba(46,204,113,.35);
  --lit-rgba-5-5-5-0d95-192c54: rgba(5,5,5,0.95);
  --lit-rgba-5-6-9-0d96-a56927: rgba(5,6,9,0.96);
  --lit-rgba-5-7-10-0d98-7b9ba9: rgba(5,7,10,0.98);
  --lit-rgba-54-59-66-0d98-5eacd6: rgba(54,59,66,0.98);
  --lit-rgba-56-62-70-0d98-f8cb84: rgba(56,62,70,0.98);
  --lit-rgba-60-66-74-0d88-1e461a: rgba(60,66,74,0.88);
  --lit-rgba-7-7-7-0d98-717cbe: rgba(7,7,7,0.98);
  --lit-rgba-7-9-12-0d99-e3905b: rgba(7,9,12,0.99);
  --lit-rgba-74-82-90-0d28-8b3a73: rgba(74,82,90,0.28);
  --lit-rgba-8-10-12-0d98-c54213: rgba(8,10,12,0.98);
  --lit-rgba-8-8-8-0d56-b7a3a6: rgba(8,8,8,0.56);
  --lit-rgba-8-8-8-0d76-f19577: rgba(8,8,8,0.76);
  --lit-rgba-8-8-8-0d82-cd7b40: rgba(8,8,8,0.82);
  --lit-rgba-80-220-160-0d85-ac4e60: rgba(80,220,160,0.85);
  --lit-rgba-82-88-96-0d96-23ad99: rgba(82,88,96,0.96);
  --lit-rgba-86-255-88-0d72-17c439: rgba(86,255,88,0.72);
  --lit-rgba-89-255-74-0d72-6aee89: rgba(89,255,74,0.72);
  --lit-rgba-89-255-74-0d88-3543df: rgba(89,255,74,0.88);
  --lit-rgba-90-170-255-0d10-62a324: rgba(90,170,255,0.10);
  --lit-rgba-90-190-255-0d08-6310e7: rgba(90,190,255,0.08);
  --lit-rgba-90-190-255-0d16-21a27b: rgba(90,190,255,0.16);
  --lit-rgba-90-190-255-0d42-c17b3c: rgba(90,190,255,0.42);
  --lit-rgba-90-190-255-0d96-5f1b21: rgba(90,190,255,0.96);
  --lit-rgba-90-98-108-0d92-13ac97: rgba(90,98,108,0.92);
  --lit-rgba-94-102-112-0d92-a912e9: rgba(94,102,112,0.92);
  --lit-rgba-94-102-112-0d94-e30295: rgba(94,102,112,0.94);
  --lit-rgba-96-165-250-d16-e5da62: rgba(96,165,250,.16);
  --lit-rgba-96-165-250-d34-00aae8: rgba(96,165,250,.34);
  --lit-rgba-96-165-250-d38-21a200: rgba(96,165,250,.38);
  --lit-rgba-96-165-250-0d18-2de528: rgba(96,165,250,0.18);
  --lit-rgba-96-165-250-0d40-afa04a: rgba(96,165,250,0.40);
  --lit-rgba-96-165-250-0d85-56b078: rgba(96,165,250,0.85);
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{ min-height: 100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background-color: var(--color-body-base);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

body.has-page-background{
  background-image: var(--page-bg, url('/public/images/backgrounds/default.webp'));
}

/*
 * Übergangs-Shell für Seiten, die ihren Hintergrund noch nicht über Body-Klassen
 * bzw. page-backgrounds.css steuern. R3e zieht diese Struktur weiter gerade.
 */
.page-bg,
.page-shell,
.app-shell{
  min-height: 100vh;
  position: relative;
}

.page-bg{
  background-image: url("/public/images/backgrounds/default.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.page-bg::before,
.page-shell::before,
.app-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--app-page-overlay);
}

.container,
.page-shell__container,
.app-shell__inner,
.app-page__container{
  position: relative;
  z-index: 2;
  padding: var(--app-shell-padding);
  max-width: var(--app-shell-max-width);
  margin: 0 auto;
}

.card,
.app-surface,
.app-page__section,
.app-section-card{
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px var(--shadow-35-alt);
}

.header{
  min-height: 25vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px 10px 20px;
  color: var(--color-white);
  background: linear-gradient(to bottom, var(--lit-rgba-0-0-0-0d6-675dec), var(--shadow-transparent-alt));
  text-shadow: 0 2px 4px var(--lit-rgba-0-0-0-0d8-ebabe1);
}

.header h1{
  margin: 0 0 10px 0;
  font-size: 2.4rem;
  letter-spacing: 1px;
  font-weight: 700;
}

.header-text{
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto 5px auto;
  opacity: 0.95;
  white-space: pre-wrap;
  font-weight: 400;
}

.header-sub{
  margin: 5px 0 0 0;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.header-sub-2{
  margin: 5px 0 0 0;
  font-size: 1.3rem;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.greeting-box{
  margin-top: 10px;
  margin-bottom: 8px;
  background-color: var(--lit-rgba-255-255-255-0d0-f8758e);
  padding: 8px 20px 8px;
  border-radius: 20px;
  box-shadow: 0 4px 10px var(--shadow-20);
  font-weight: bold;
  color: var(--color-white);
  font-size: 1.8rem;
  backdrop-filter: blur(5px);
  display: inline-block;
}

.lauftext-container{
  width: 100%;
  overflow: hidden;
  background-color: transparent;
  border: none !important;
  white-space: nowrap;
  position: relative;
  padding: 10px 0;
}

.lauftext-inhalt{
  display: inline-block;
  color: var(--color-danger-text-strong);
  font-weight: bold;
  font-size: 1.5rem;
  padding-left: 100%;
  animation: ticker 30s linear infinite;
}

@keyframes ticker{
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

.nav-grid{
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  padding: 20px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.nav-btn{
  appearance: none;
  background: var(--surface-dark-15-alt);
  border: none;
  border-radius: 12px;
  padding: 15px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-white);
  text-shadow: 0 1px 2px var(--lit-rgba-0-0-0-0d8-ebabe1);
  box-shadow: 0 4px 6px var(--shadow-10-alt);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition: transform 0.2s, background-color 0.2s;
  border-left: 5px solid transparent;
}

.nav-btn span{ margin-right: 15px; font-size: 1.4rem; }
.nav-btn:active{ transform: scale(0.96); background: var(--surface-dark-25); }
.nav-btn:hover{ transform: translateY(-2px); background: var(--lit-rgba-255-255-255-0d2-6acb65); }

.nav-footer{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  width: 100%;
}

dialog.news-popup{
  border: none;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px var(--lit-rgba-0-0-0-0d3-0309bf);
  max-width: 400px;
  width: 90%;
  font-family: sans-serif;
  text-align: center;
}

dialog.news-popup::backdrop{ background-color: var(--lit-rgba-0-0-0-0d7-f42b43); }

.btn-primary{
  background-color: var(--color-link-primary);
  color: var(--color-white);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  margin-top: 10px;
}

.small{
  opacity: 0.85;
  font-size: 13px;
}

.muted{
  opacity: 0.85;
}

a{ color:var(--color-white); }

@media screen and (max-width: 600px){
  body{ background-attachment: scroll; }

  .greeting-box{
    position: relative;
    top: 0;
    right: 0;
    margin: 0 auto 3px auto;
    display: table;
    color: var(--color-white);
    font-size: 1.3rem;
    background-color: var(--lit-rgba-255-255-255-0d0-f8758e);
  }

  .header{
    min-height: 15vh;
    padding-top: 10px;
    padding-bottom: 5px;
  }

  .header h1{ font-size: 1.7rem; }
  .header-text{ font-size: 1rem; }
  .header-sub{ font-size: 1.3rem; }
  .header-sub-2{ font-size: 1.5rem; }
  .lauftext-inhalt{ font-size: 1.4rem; }

  .nav-grid{
    grid-template-columns: 1fr;
    padding: 10px 15px;
    gap: 12px;
  }

  .nav-btn{
    padding: 18px 20px;
    font-size: 1.05rem;
  }

  .nav-footer{
    padding: 10px 15px 30px 15px;
  }
}




/*
 * R5e – Namensschema für Body-/Wrapper-/Komponentenklassen
 *
 * Ziel:
 * - neue oder bereinigte Seiten verwenden app-* Präfixe als kanonische Strukturspur
 * - Body-Klassen folgen page--modul-seite
 * - Wrapper laufen über app-shell / app-shell__inner / app-surface
 * - gemeinsame Kopfbereiche laufen über app-toolbar / app-heading / app-backlink
 */
.app-shell{
  min-height: 100vh;
  position: relative;
}

.app-shell__inner{
  display: grid;
  gap: 18px;
}

.app-shell--narrow .app-shell__inner{ max-width: 820px; }
.app-shell--wide .app-shell__inner{ max-width: 1280px; }

.app-surface{
  display: grid;
  gap: 18px;
}

.app-backlink,
.app-page__backlink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:800;
}

.app-heading{
  display:grid;
  gap:8px;
}

.app-heading--center{
  justify-items:center;
  text-align:center;
}

.app-heading__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.app-heading__icon{
  font-size: 1.75rem;
  line-height:1;
}

.app-heading__title{
  margin:0;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height:1.1;
}

.app-heading__subtitle{
  margin:0;
  font-size:1rem;
  line-height:1.5;
  color: var(--surface-light-soft);
}

.app-toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
}

.app-toolbar__main{
  display:grid;
  gap:6px;
}

.app-toolbar__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

@media (max-width: 980px){
  .app-toolbar{ align-items:stretch; }
  .app-toolbar__actions{ width:100%; justify-content:flex-start; }
}

/*
 * R3e – gemeinsame Page-Shell
 *
 * Ziel:
 * - ähnliche Fachseiten folgen derselben Grundstruktur
 * - Page Header, Action Bar, Content Container und Section/Card Blocks
 *   laufen über gemeinsame Klassen statt über viele lokale Wrappernamen
 */
.app-page{
  min-height: 100vh;
  position: relative;
}

.app-page__container{
  display: grid;
  gap: 18px;
}

.app-page--narrow .app-page__container{ max-width: 820px; }
.app-page--wide .app-page__container{ max-width: 1280px; }

.app-page__header{
  display: grid;
  gap: 8px;
  justify-items: start;
}

.app-page__title{
  margin: 0;
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
  line-height: 1.1;
}

.app-page__lead{
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--surface-light-soft);
}

.app-page__content{
  display: grid;
  gap: 16px;
}

.app-page__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.app-link-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.app-link-grid .nav-btn{ justify-content: flex-start; }

.app-page__footer{
  margin-top: 14px;
}

.app-page__footer.nav-footer{
  padding: 0;
  max-width: none;
}

.app-page__greeting{ margin-top: 10px; }



/*
 * R3g – gemeinsame UI-Komponentenklassen
 *
 * Ziel:
 * - wiederkehrende UI-Muster über gemeinsame Basisklassen lösen
 * - Status-Badges, Notices, Action-/Filter-Bars, Formularblöcke und Section-Cards
 *   nicht mehrfach unterschiedlich neu erfinden
 */
.app-badge-group{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.app-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--surface-dark-18);
  background:var(--shadow-18);
  color:inherit;
  font-weight:800;
  font-size:12px;
  line-height:1.2;
  text-decoration:none;
}

.app-badge--neutral{ background:var(--surface-dark-10); border-color:var(--surface-dark-18); }
.app-badge--info{ background:var(--lit-rgba-96-165-250-d16-e5da62); border-color:var(--lit-rgba-96-165-250-d38-21a200); color:var(--color-info-text-soft); }
.app-badge--ok{ background:var(--lit-rgba-32-173-106-d18-ba7f11); border-color:var(--lit-rgba-32-173-106-d40-5c0118); color:var(--color-success-text-soft-alt); }
.app-badge--warn{ background:var(--lit-rgba-255-193-7-d18-e61381); border-color:var(--lit-rgba-255-193-7-d40-0a88bc); color:var(--color-warning-text-soft); }
.app-badge--danger{ background:var(--lit-rgba-220-53-69-d16-b60119); border-color:var(--lit-rgba-220-53-69-d38-f9c97d); color:var(--color-danger-text-soft); }

.app-notice{
  margin:0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--surface-dark-18);
  background:var(--surface-dark-08);
}

.app-notice--ok{ background:var(--lit-rgba-0-180-90-d16-716589); border-color:var(--lit-rgba-0-180-90-d35-7ef0a8); }
.app-notice--warn{ background:var(--lit-rgba-255-180-0-d16-748a04); border-color:var(--lit-rgba-255-180-0-d35-4ca7dd); }
.app-notice--danger{ background:var(--lit-rgba-255-0-0-d18-adb35c); border-color:var(--lit-rgba-255-0-0-d35-49f15c); }
.app-notice--info{ background:var(--lit-rgba-96-165-250-d16-e5da62); border-color:var(--lit-rgba-96-165-250-d34-00aae8); }

.app-action-bar,
.app-page__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.app-action-bar--spread{ justify-content:space-between; align-items:flex-end; }

.app-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:end;
  padding:12px;
  border:1px solid var(--surface-dark-14);
  border-radius:14px;
  background:var(--lit-rgba-0-0-0-d16-ebeb8c);
}
.app-filter-bar input,
.app-filter-bar select,
.app-filter-bar textarea{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--surface-dark-18);
  background:var(--shadow-18);
  color:var(--color-white);
  font:inherit;
}
.app-form-block{ display:grid; gap:12px; }
.app-form-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

@media (max-width: 760px){
  .app-page__actions{ flex-direction: column; align-items: stretch; }
  .app-page__actions > *{ width: 100%; }
}


/*
 * R6l – Shared UI Shell Finalization
 *
 * Ziel:
 * - gemeinsame Leerzustände, Notice-Stacks, Pager und Filterleisten
 *   über modulübergreifende app-* Klassen angleichen
 * - vorhandene Modul-CSS nicht brechen, sondern eine ruhige gemeinsame Basis ergänzen
 */
.app-empty-state{
  display:grid;
  gap:10px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid var(--surface-dark-16);
  background:var(--surface-dark-08);
}
.app-empty-state--table{
  color:var(--surface-light-muted);
  text-align:center;
}
.app-empty-state__title{
  margin:0;
  font-size:1rem;
  font-weight:800;
}
.app-empty-state__text{
  margin:0;
  color:var(--surface-light-soft);
}
.app-empty-state__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.app-notice-stack{
  display:grid;
  gap:10px;
}
.app-pager{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}
.app-pager__status{
  color:var(--surface-light-muted-86);
  font-weight:700;
}
.app-filter-bar.admin-filters,
.app-filter-bar.crew-filters,
.app-filter-bar.dispo-filters{
  width:100%;
}
.app-filter-bar .btn,
.app-pager .btn{
  white-space:nowrap;
}
.app-badge.pill,
.pill.app-badge{
  border-radius:999px;
}
@media (max-width: 760px){
  .app-pager{
    flex-direction:column;
    align-items:stretch;
  }
  .app-pager > *{
    width:100%;
  }
  .app-empty-state__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .app-empty-state__actions > *{
    width:100%;
  }
}