/* ============================================================
   muveup Facelift: Design-Tokens
   Einzige Datei mit Hex-Werten. Quelle: design/DESIGN.md (Figma „muveup-Prozesse“).
   Ebene 1: Palette (--c-*). Ebene 2: semantische Tokens (--color-*), die Bausteine nutzen.
   Dark Mode: nur vorbereitet. Ein späteres [data-theme="dark"] tauscht nur Ebene 2.
   ============================================================ */

:root {
  /* ---------- Palette: Marke ---------- */
  --c-purple: #88589F;
  --c-purple-rgb: 136 88 159;
  --c-purple-hover: #7A4F8F;
  --c-purple-50: rgb(var(--c-purple-rgb) / 0.5);
  --c-purple-20: rgb(var(--c-purple-rgb) / 0.2);
  --c-purple-10: rgb(var(--c-purple-rgb) / 0.1);
  --c-purple-300: #C4ACCF;
  --c-purple-100: #E7DEEC;
  /* Kartenstil in muveup-Farben (F19, js/map.js liest sie zur Laufzeit, Mapbox braucht feste Farben) */
  --map-land: #F8F5FA;
  --map-park: #EEE7F2;
  --map-water: #D9CBE2;
  --map-building: #EDE6F1;
  --map-road: #FFFFFF;
  --map-road-major: #F3ECF6;
  --map-road-case: #E2D7E8;
  --map-text: #4A3A57;
  --map-text-muted: #80708C;
  --map-halo: #FFFFFF;

  --c-orange: #E28600;
  --c-orange-rgb: 226 134 0;
  --c-orange-hover: #D07B00;
  --c-orange-text: #A86300;
  --c-orange-50: rgb(var(--c-orange-rgb) / 0.5);
  --c-orange-10: rgb(var(--c-orange-rgb) / 0.1);
  --c-orange-300: #F1C380;
  --c-orange-glow-rgb: 255 170 80;
  --c-cream: #FFF8ED;
  --c-cream-rgb: 255 236 214;

  /* ---------- Palette: Neutrale ---------- */
  --c-white: #FFFFFF;
  --c-white-rgb: 255 255 255;
  --c-black-rgb: 0 0 0;
  --c-bg: #F0F0F0;
  --c-surface-2: #F3F3F3;
  --c-surface-3: #FAFAFA;
  --c-line: #E2E2E2;
  --c-line-strong: #C2C2C2;
  --c-placeholder: #D9D9D9;
  --c-ink: #282828;
  --c-ink-strong: #1C1C1C;
  --c-ink-muted: #616161;
  --c-ink-subtle: #9F9F9F; /* wie Figma (Danie 2026-11-08), 2,65 : 1 auf Weiß, bewusst unter AA */
  --c-ink-faint: #B3B3B3;
  --c-ink-on-dark: #F8F9FA;

  /* ---------- Palette: Status und Genre ---------- */
  --c-success: #69C97D;
  --c-success-cal: rgb(129 199 132 / 0.56);
  --c-success-dark: #59A85C;
  --c-success-100: #C0E3C2;
  --c-coral: #FF825A;
  --c-blue: #2E83B9;
  --c-danger: #FF0004;
  --c-danger-text: #D40003;
  --c-danger-hover: #E00004;
  --c-danger-rgb: 255 0 4;
  --c-danger-20: rgb(var(--c-danger-rgb) / 0.2);
  --c-success-rgb: 105 201 125;
  --c-success-20: rgb(var(--c-success-rgb) / 0.2);
  --c-draft: rgb(194 194 194 / 0.5);


  /* Karten-Genres (Master-Karte). Nur als rgb-Tripel, damit Marker ohne Hex auskommen. */
  /* Eine feste Farbe je Genre (F24r Punkt 57): Töne aus main, so abgedunkelt, dass weiße Schrift mindestens 4.6:1 hält */
  --c-genre-rock-rgb: 205 29 29;
  --c-genre-jazz-rgb: 44 132 65;
  --c-genre-pop-rgb: 217 35 132;
  --c-genre-electronic-rgb: 14 125 172;
  --c-genre-folk-rgb: 103 73 50;
  --c-genre-hiphop-rgb: 145 91 200;
  --c-genre-klassik-rgb: 136 114 7;
  --c-genre-blues-rgb: 16 104 114;
  --c-genre-metal-rgb: 102 119 135;
  --c-genre-reggae-rgb: 80 129 32;
  --c-genre-indie-rgb: 211 64 11;
  --c-genre-punk-rgb: 179 15 69;
  --c-genre-soul-rgb: 159 60 67;
  --c-genre-country-rgb: 148 110 43;
  --c-genre-funk-rgb: 183 69 183;
  --c-genre-rnb-rgb: 58 112 220;
  --c-genre-latin-rgb: 186 90 5;
  --c-genre-gospel-rgb: 110 55 0;
  --c-genre-disco-rgb: 149 44 175;
  --c-genre-house-rgb: 23 132 96;
  --c-genre-techno-rgb: 82 82 82;
  --c-genre-trance-rgb: 36 36 224;
  --c-genre-dubstep-rgb: 89 62 163;
  --c-genre-ambient-rgb: 76 126 101;
  --c-genre-schlager-rgb: 176 31 137;
  --c-genre-volksmusik-rgb: 40 93 27;
  --c-genre-austropop-rgb: 146 12 34;
  --c-genre-wienerlied-rgb: 97 58 78;
  --c-genre-alpenrock-rgb: 139 62 29;
  --c-genre-kabarett-rgb: 55 55 24;
  --c-genre-weltmusik-rgb: 20 80 76;
  --c-genre-singersongwriter-rgb: 47 101 142;
  --c-genre-liedermacher-rgb: 147 99 161;
  --c-genre-alternative-rgb: 74 47 211;
  --c-genre-sonstige-rgb: 123 116 101;
  --c-genre-fallback-rgb: 136 88 159;
  --genre-rock: rgb(var(--c-genre-rock-rgb));
  --genre-jazz: rgb(var(--c-genre-jazz-rgb));
  --genre-pop: rgb(var(--c-genre-pop-rgb));
  --genre-electronic: rgb(var(--c-genre-electronic-rgb));
  --genre-folk: rgb(var(--c-genre-folk-rgb));
  --genre-hiphop: rgb(var(--c-genre-hiphop-rgb));
  --genre-klassik: rgb(var(--c-genre-klassik-rgb));
  --genre-blues: rgb(var(--c-genre-blues-rgb));
  --genre-metal: rgb(var(--c-genre-metal-rgb));
  --genre-reggae: rgb(var(--c-genre-reggae-rgb));
  --genre-indie: rgb(var(--c-genre-indie-rgb));
  --genre-punk: rgb(var(--c-genre-punk-rgb));
  --genre-soul: rgb(var(--c-genre-soul-rgb));
  --genre-country: rgb(var(--c-genre-country-rgb));
  --genre-funk: rgb(var(--c-genre-funk-rgb));
  --genre-rnb: rgb(var(--c-genre-rnb-rgb));
  --genre-latin: rgb(var(--c-genre-latin-rgb));
  --genre-gospel: rgb(var(--c-genre-gospel-rgb));
  --genre-disco: rgb(var(--c-genre-disco-rgb));
  --genre-house: rgb(var(--c-genre-house-rgb));
  --genre-techno: rgb(var(--c-genre-techno-rgb));
  --genre-trance: rgb(var(--c-genre-trance-rgb));
  --genre-dubstep: rgb(var(--c-genre-dubstep-rgb));
  --genre-ambient: rgb(var(--c-genre-ambient-rgb));
  --genre-schlager: rgb(var(--c-genre-schlager-rgb));
  --genre-volksmusik: rgb(var(--c-genre-volksmusik-rgb));
  --genre-austropop: rgb(var(--c-genre-austropop-rgb));
  --genre-wienerlied: rgb(var(--c-genre-wienerlied-rgb));
  --genre-alpenrock: rgb(var(--c-genre-alpenrock-rgb));
  --genre-kabarett: rgb(var(--c-genre-kabarett-rgb));
  --genre-weltmusik: rgb(var(--c-genre-weltmusik-rgb));
  --genre-singersongwriter: rgb(var(--c-genre-singersongwriter-rgb));
  --genre-liedermacher: rgb(var(--c-genre-liedermacher-rgb));
  --genre-alternative: rgb(var(--c-genre-alternative-rgb));
  --genre-sonstige: rgb(var(--c-genre-sonstige-rgb));
  --genre-r1: rgb(166 83 55);
  --genre-r2: rgb(120 100 40);
  --genre-r3: rgb(91 109 36);
  --genre-r4: rgb(57 115 38);
  --genre-r5: rgb(39 117 58);
  --genre-r6: rgb(38 115 96);
  --genre-r7: rgb(45 112 134);
  --genre-r8: rgb(69 100 193);
  --genre-r9: rgb(112 83 198);
  --genre-r10: rgb(159 64 191);
  --genre-r11: rgb(178 59 148);
  --genre-r12: rgb(187 62 94);
  /* Veranstaltungstypen (F24t Punkt 107): je Typ ein fester Ton, alle mit weißer Schrift lesbar (Kontrast mindestens 5:1). Zuordnung im Code: CatalogTagLabels.venueColorClass */
  --venue-cafe: rgb(138 90 60);
  --venue-bar: rgb(142 47 90);
  --venue-club: rgb(91 45 158);
  --venue-disco: rgb(176 36 122);
  --venue-restaurant: rgb(168 67 42);
  --venue-hotel: rgb(47 93 138);
  --venue-theater: rgb(140 29 44);
  --venue-konzerthalle: rgb(61 79 158);
  --venue-festival: rgb(181 64 26);
  --venue-openair: rgb(46 125 79);
  --venue-galerie: rgb(95 100 112);
  --venue-pub: rgb(107 74 31);
  --venue-lounge: rgb(106 61 124);
  --venue-eventlocation: rgb(15 111 143);
  --venue-kulturzentrum: rgb(122 92 0);
  --venue-biergarten: rgb(85 122 31);
  --venue-kleinkunstbuehne: rgb(154 63 143);
  --venue-heuriger: rgb(74 107 20);
  --venue-gasthaus: rgb(138 75 20);
  --venue-imbissstand: rgb(176 58 16);
  --venue-markt: rgb(44 122 114);
  --venue-eissalon: rgb(194 56 110);
  --venue-brauerei: rgb(148 100 16);
  --venue-weinschenke: rgb(110 31 63);
  --venue-schanigarten: rgb(47 122 47);
  --venue-sonstige: rgb(107 107 107);

  /* ---------- Verläufe ---------- */
  --g-card-fade: linear-gradient(180deg, rgb(var(--c-black-rgb) / 0) 0%, var(--c-ink) 100%);
  --g-fade-white: linear-gradient(180deg, rgb(var(--c-white-rgb) / 0) 0%, var(--c-white) 100%);
  --g-fade-orange: linear-gradient(180deg, rgb(var(--c-orange-rgb) / 0) 0%, var(--c-orange) 55%);
  --g-skeleton-sweep: linear-gradient(90deg, transparent 0%, var(--c-surface-3) 50%, transparent 100%);
  --g-skeleton-sweep-dark: linear-gradient(90deg, transparent 0%, rgb(var(--c-white-rgb) / 0.07) 50%, transparent 100%);

  /* ---------- Semantisch (Bausteine nutzen nur diese) ---------- */
  --color-bg: var(--c-bg);
  --color-surface: var(--c-white);
  --color-surface-muted: var(--c-surface-2);
  --color-surface-input: var(--c-bg);
  --color-surface-soft: var(--c-surface-3);
  --color-surface-warm: var(--c-cream);
  --color-text: var(--c-ink);
  --color-text-strong: var(--c-ink-strong);
  --color-text-muted: var(--c-ink-muted);
  --color-text-subtle: var(--c-ink-subtle);
  --color-text-placeholder: var(--c-ink-faint);
  --color-text-on-brand: var(--c-white);
  --color-border: var(--c-line);
  --color-border-strong: var(--c-line-strong);
  --color-primary: var(--c-purple);
  --color-primary-hover: var(--c-purple-hover);
  --color-accent: var(--c-orange);
  --color-accent-hover: var(--c-orange-hover);
  --color-accent-text: var(--c-orange-text);
  --color-success: var(--c-success);
  --color-success-text: var(--c-success-dark);
  --color-danger: var(--c-danger);
  --color-danger-text: var(--c-danger-text);
  --color-disabled: var(--c-line);
  --color-focus: var(--c-purple);
  --color-overlay: rgb(var(--c-black-rgb) / 0.32);
  --color-backdrop-tint: rgb(var(--c-white-rgb) / 0.35);
  --color-footer: var(--c-ink);
  --color-tag-jazz: var(--c-success);
  --color-tag-indie: var(--c-coral);
  --color-tag-songwriter: var(--c-blue);
  --color-cal-fixed: var(--c-success-cal);
  --color-cal-request: var(--c-orange-50);
  --color-cal-tender: var(--c-purple-50);
  --color-cal-draft: var(--c-draft);

  /* ---------- Schrift ---------- */
  --font-sans: 'Roboto', 'Roboto Fallback', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --lh-base: 1.5;
  --lh-tight: 1.2;
  --lh-message: 1.7;

  /* Web-Skala nach GAPS.md Punkt 4 (Figma 5 bis 8 → 11, 10 → 12, 12 → 13, ab 15 gleich) */
  --fs-hero: clamp(40px, 4.5vw, 65px);
  --fs-display: 30px;
  --fs-h1: 25px;
  --fs-h2: 22px;
  --fs-h3: 20px;
  --fs-h4: 18px;
  --fs-body-lg: 15px;
  --fs-body: 13px;
  --fs-small: 12px;
  --fs-micro: 11px;
  --fs-tag: 11px;
  --fs-input-mobile: 16px;

  /* ---------- Abstände ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-8: 40px;
  --sp-10: 62px;
  --sp-20: 80px;
  /* Musikerkarte: ein Format überall (F24g), Figma 266 × 366 */
  /* Profilbild überall quadratisch mit runden Ecken (F24t Punkt 160), Anteil der Größe */
  --avatar-radius: 28%;
  --artist-card-w: 266px;
  --artist-card-h: 366px;
  --artist-card-body-h: 68px;

  /* ---------- Radien ---------- */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-sm-lg: 10px;
  --r-md: 15px;
  --r-lg: 25px;
  --r-xl: 30px;
  --r-pill: 999px;
  --r-round: 50%;

  /* ---------- Schatten, Unschärfe, Konturen ---------- */
  --sh-bar: 0 2px 4px rgb(var(--c-black-rgb) / 0.25);
  --sh-1: 4px 4px 6.5px rgb(var(--c-black-rgb) / 0.05);
  --sh-2: 0 4px 4px rgb(var(--c-black-rgb) / 0.25);
  --sh-3: 0 4px 20px rgb(var(--c-black-rgb) / 0.2);
  --sh-panel: -10px 5px 15px rgb(var(--c-black-rgb) / 0.25);
  --sh-sheet: 0 -6px 24px rgb(var(--c-black-rgb) / 0.16);
  --blur-backdrop: blur(10px); /* Figma 20: Figma zeichnet etwa doppelt so stark wie CSS, deshalb halbiert (Danie 2026-11-08 „wie im Figma“) */
  --blur-soft: blur(3px); /* Figma 6, halbiert wie --blur-backdrop */
  --bw-hair: 0.5px;
  --bw: 1px;
  --bw-select: 2px;
  --bw-tab: 4px;
  --bw-progress: 8px;
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus);

  /* ---------- Shell-Maße ---------- */
  --topbar-h: 54px;
  --topbar-h-mobile: 56px;
  --sidebar-w: 147px;
  --aside-w: 426px;
  --content-max: 1316px;
  --page-gutter: var(--sp-10);
  --page-gutter-mobile: var(--sp-4);
  --bottom-nav-h: 64px;
  --footer-h: 46px;
  --dialog-w: 440px;
  --panel-w-sm: 520px;
  --panel-w-md: 765px;
  --panel-w-lg: 990px;
  --panel-w-xl: 1134px;
  --panel-sum-w: 165px;
  --applicants-event-w: 432px;
  --control-h: 32px;
  --control-h-lg: 50px;
  --icon-btn: 40px;
  --tap-min: 40px;
  --fab-h: 52px;
  --marquee-speed: 36; /* px je Sekunde */
  --marquee-hold: 1500ms;
  --marquee-return: 700ms;
  --marquee-fade: 16px;
  --wizard-card-h: 640px;
  --wizard-card-min-h: 420px;
  --wizard-error-h: 88px;
  --auth-card-h: 456px;
  --stepper-h: 36px;
  --stepper-h-mobile: 33px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Wo klebende Elemente anhalten: unter der Kopfzeile, am Desktop mit festem Rahmen am Rand der Hauptkarte (css/layout.css) */
  --sticky-top: calc(var(--topbar-h) + var(--safe-top));
  --scrollbar-size: 6px;
  --scrollbar-rgb: var(--c-purple-rgb);
  --scrollbar-alpha: 0.35;
  --scrollbar-alpha-hover: 0.6;

  /* ---------- Breakpoints (nur Doku: Media Queries nutzen 480 / 900 / 901 direkt) ---------- */
  --bp-sm: 480px;
  --bp-md: 900px;

  /* ---------- z-index ---------- */
  --z-raised: 1;
  --z-sticky: 100;
  --z-fab: 900;
  --z-topbar: 1000;
  --z-bottom-nav: 1000;
  --z-popover: 1050;
  --z-panel: 1100;
  --z-topbar-open: 1200;
  --z-dialog: 1300;
  --z-toast: 1400;
  --z-splash: 2000;

  /* ---------- Motion ---------- */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 360ms;
  --dur-press: 100ms;
  --dur-page: 300ms;
  --dur-sweep: 1600ms;
  --dur-moment: 900ms;
  --dur-confetti: 1100ms;
  --delay-skel: 120ms;
  --stagger: 40ms;
  --shift-rise: 12px;
  --shift-page: 20px;
  --shift-step: 24px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.22, 1, 0.36, 1);
  /* Druck: Knöpfe und Chips, runde Symbole, große Flächen (Kacheln, Optionen) */
  --press-scale: 0.97;
  --press-scale-sm: 0.94;
  --press-scale-lg: 0.985;
}

/* Feder mit leichtem Überschwingen (rund 2 %), wo linear() unterstützt wird */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.0305 2%, 0.1186 4.1%, 0.2528 6.3%, 0.4183 8.8%, 0.5682 11.2%, 0.7012 13.8%, 0.8051 16.4%, 0.8846 19.1%, 0.9424 21.9%, 0.9817 24.9%, 1.0055 28.1%, 1.0179 31.6%, 1.0216 35.6%, 1.0193 40.4%, 1.0091 50.8%, 1.0025 62.4%, 0.9998 80%, 1);
    --ease-pop: linear(0, 0.0705 5%, 0.2262 10%, 0.4095 15%, 0.585 20%, 0.7343 25%, 0.8502 30%, 0.9331 35%, 0.9874 40%, 1.019 45%, 1.0341 50%, 1.0382 55%, 1.0356 60%, 1.0297 65%, 1.0228 70%, 1.016 75%, 1.0103 80%, 1.0058 85%, 1.0026 90%, 1.0005 95%, 1);
  }
}

/* Mobil keine Schrift unter 12 px (REVIEW, Abschnitt Mobil), Bausteine erben das über die Tokens */
@media (max-width: 900px) {
  :root {
    --fs-micro: 12px;
    --fs-tag: 12px;
  }
}

/* Dark Mode (vorbereitet, nicht aktiv): später hier nur Ebene 2 überschreiben.
:root[data-theme="dark"] {
  --color-bg: ...;
  --color-surface: ...;
  --color-text: ...;
}
*/