/* =========================================================================
   DrehDeck — Design-System v1.0 (2026)
   "Schwarz. Weiß. Ein Funke Lime." — Dark zuerst, Light sauber gespiegelt.
   Strikt monochrom (Neutral-Rampe) + genau eine Akzentfarbe (Lime #BEF264).
   Struktur durch Hairlines & Raum, nicht durch Schatten.
   Schriften: Montserrat (Display) · Helvetica (UI/Label) · Garamond (Fließtext).

   Legacy-Variablennamen aus DrehDeck.jsx bleiben erhalten, ihre Werte sind
   auf das neue Dark-System gemappt — so folgt das gesamte JS automatisch.
   ========================================================================= */

:root {
  /* ---- Neutral-Rampe ---- */
  --n-950: #0A0A0B;  /* Off-Black  */
  --n-900: #141417;  /* Surface    */
  --n-850: #1C1C20;  /* Raised     */
  --n-line:#2A2A30;  /* Line       */
  --n-700: #34343B;  /* Line stark */
  --n-600: #6E6E76;  /* Muted      */
  --n-500: #8A8A92;  /* Caption    */
  --n-400: #A0A0A8;  /* Soft       */
  --n-200: #D6D6DA;  /* Hint       */
  --n-50:  #FAFAFA;  /* Off-White  */

  /* ---- Akzent — genau eine Lime ---- */
  --accent: #BEF264;
  --accent-press: #A6E03F;
  --on-accent: #0A0A0B;
  --accent-ring: rgba(190,242,100,0.30);   /* #BEF2644D */
  --accent-tint: rgba(190,242,100,0.14);
  --accent-tint-bd: rgba(190,242,100,0.45);
  --accent-surface: #2A301C;               /* OPAKE lime-getönte Fläche (Prio-Zeilen) */

  /* ---- Semantische Tokens (Dark = Standard) ---- */
  --bg: var(--n-950);
  --surface: var(--n-900);
  --raised: var(--n-850);
  --line: var(--n-line);
  --line-strong: var(--n-700);
  --text: var(--n-50);
  --muted: var(--n-400);
  --faint: var(--n-600);
  --slate: var(--n-400);
  --ring: var(--accent);

  /* ---- Legacy-Lime/Status, auf neues System gemappt ---- */
  --lime: var(--accent);
  --lime-grad: var(--accent);            /* flach statt Verlauf */
  --lime-glow: rgba(190,242,100,0.18);
  --lime-ink: var(--accent);             /* lime-farbiger Text auf Dunkel */
  --lime-num: var(--accent);             /* flach (CI Do/Don't: keine Verläufe) */
  --lime-logo: var(--accent);            /* flach (CI Do/Don't: keine Verläufe) */
  --amber: var(--accent);                /* Checkbox/Fokus-Akzent */
  --green: #9BE25B;                      /* Status: fertig/geschnitten */
  --cyan: #5B9BFF;                       /* Status: läuft/in Arbeit */
  --danger: #E0524E;                     /* Status/Negativ — CI Material */
  --danger-press: #C8463F;               /* Danger gedrückt/aktiv (Swipe armed) */
  --danger-ring: rgba(224,82,78,0.45);   /* Danger-Kante/Ring */
  --danger-tint: rgba(224,82,78,0.06);   /* Danger-Fläche dezent */
  --cobalt-ink: #5B9BFF;
  --verm-ink: #E0524E;
  --done-badge: var(--accent);
  --done-ink: #0A0A0B;

  /* ---- Hairline + (minimale) Tiefe ---- */
  --hairline: #26262B;
  --glass-sh: none;                      /* Cards/Rows: solide, kein Schatten */

  /* ---- Mattes Liquid Glass — NUR schwebende Ebenen ---- */
  --glass-blur: 22px;
  --glass-tint: rgba(10,10,11,0.55);          /* Top-/Tab-/Nav-Bar, Sheets */
  --glass-tint-strong: rgba(10,10,11,0.70);   /* Modal-Sheet */
  --glass-edge: rgba(255,255,255,0.10);       /* helle Kante */
  --glass-edge-soft: rgba(255,255,255,0.08);  /* Bar-Hairline / Lichtkante */
  --glass-top: inset 0 1px 0 rgba(255,255,255,0.08); /* zarte Oberkante */
  --glass-shadow: 0 8px 40px rgba(0,0,0,0.45);       /* EIN weicher Schatten */
  --glass-fallback: rgba(20,20,23,0.92);             /* solider Ersatz */
  --glass-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Motion (CI: 120/160ms · press .97 · ease-out) ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur-base: 160ms;

  /* ---- Schriften: 3 Rollen — Montserrat=Display/Titel · Helvetica=UI/Label/Meta/Datum/Namen · Garamond=Fließtext.
         Kein Monospace für Text; italic nur in Garamond-Prosa. ---- */
  --sans: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --display: 'Montserrat', var(--sans);
  --logo: 'Montserrat', var(--display);
  --serif: 'Apple Garamond', 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Abstands-Skala (4-px-Basis) ---- */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-xxl: 32px;

  --ddtop: 60px; /* gemessene Topbar-Höhe; per JS gesetzt */
  color-scheme: dark;
}

/* ===================== Light — sauber gespiegelt ===================== */
[data-theme="light"] {
  --bg: var(--n-50);
  --surface: #FFFFFF;
  --raised: #FFFFFF;
  --line: #E4E4E7;
  --line-strong: #D6D6DA;
  --text: var(--n-950);
  --muted: var(--n-600);
  --faint: var(--n-500);
  --slate: var(--n-600);
  --hairline: #E4E4E7;
  --accent-surface: #ECF7CC;               /* helle Lime-Fläche (gespiegelt) */
  /* ---- Glas — Light gespiegelt ---- */
  --glass-tint: rgba(250,250,250,0.62);
  --glass-tint-strong: rgba(255,255,255,0.70);
  --glass-edge: rgba(10,10,11,0.08);
  --glass-edge-soft: rgba(10,10,11,0.05);
  --glass-top: inset 0 1px 0 rgba(255,255,255,0.6);
  --glass-shadow: 0 8px 40px rgba(10,10,11,0.10);
  --glass-fallback: rgba(255,255,255,0.96);
  --danger-tint: rgba(224,82,78,0.05);
  color-scheme: light;
}

/* ===================== Base / Reset ===================== */
html, body { overflow-x: clip; max-width: 100%; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.01em; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: var(--on-accent); }
button { font-family: inherit; color: inherit; transition: transform var(--dur-fast) var(--ease), background .15s ease, border-color .15s ease, opacity .15s ease, color .15s ease; }
button:active { transform: scale(.97); }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
button:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible) { outline: none; }
::placeholder { color: var(--faint); opacity: 1; font-weight: 400; }
input[type=date]::-webkit-calendar-picker-indicator { filter: invert(.85); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
#dd-print { display: none; }
@media print {
  html, body { background: #fff !important; color: #000 !important; overflow: visible !important; }
  .dd-app { display: none !important; }
  #dd-print { display: block !important; }
  .dd-reel { break-inside: avoid; page-break-inside: avoid; }
  @page { margin: 13mm; }
}

/* ===================== Layout ===================== */
.dd-root { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--sans); display: flex; justify-content: center; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; position: relative; overflow-x: clip; }
.dd-shell { width: 100%; max-width: 580px; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; position: relative; z-index: 1; }
.dd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 11px; border-bottom: 1px solid var(--glass-edge-soft); position: sticky; top: 0; z-index: 10; background: var(--glass-tint); backdrop-filter: blur(var(--glass-blur)) saturate(115%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%); box-shadow: var(--glass-top); }
.dd-content { flex: 1; padding: 18px 16px 100px; touch-action: pan-y; will-change: transform, opacity; }
.dd-banner { margin: 14px 20px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 13.5px; line-height: 1.45; background: var(--surface); }

.dd-navwrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; padding: 6px 14px max(env(safe-area-inset-bottom, 0px), 12px); pointer-events: none; transition: transform .2s ease, opacity .2s ease; }
.dd-navpill { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 430px; background: var(--glass-tint); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 9px 18px; backdrop-filter: blur(var(--glass-blur)) saturate(115%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%); box-shadow: var(--glass-shadow), var(--glass-top); transform-origin: bottom center; transition: transform .22s var(--ease); }
.dd-navpill.compact { transform: scale(0.86); }
.dd-navbtn { flex: 1; background: none; border: none; display: flex; flex-direction: column; align-items: center; padding: 4px 0 6px; cursor: pointer; }

/* ===================== Card / Row (Hairline, kein Schatten) ===================== */
.dd-card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--glass-sh); border-radius: 14px; padding: 15px; margin-bottom: 11px; }
.dd-row { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--glass-sh); display: flex; align-items: center; gap: 11px; border-radius: 13px; padding: 12px 13px; margin-bottom: 8px; }

/* ===================== Inputs / Buttons ===================== */
.dd-input { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; color: var(--text); font-size: 16px; font-family: var(--sans); width: 100%; outline: none; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; }
.dd-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
textarea.dd-input { line-height: 1.5; resize: vertical; }

.dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px 18px; font-size: 13px; cursor: pointer; font-family: var(--sans); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border: none; }
.dd-btn-primary { background: var(--accent); color: var(--on-accent); border: none; font-weight: 700; }
.dd-btn-primary:hover { background: var(--accent-press); }
.dd-btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); font-weight: 700; }
.dd-btn-ghost:hover { border-color: var(--n-600); }
.dd-icon-btn { background: none; border: none; padding: 9px; cursor: pointer; display: inline-flex; border-radius: 11px; flex-shrink: 0; color: var(--muted); }

.dd-chip { background: var(--surface); border: 1px solid var(--line-strong); color: var(--muted); border-radius: 999px; padding: 8px 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; font-family: var(--sans); }
.dd-chip-on { background: var(--accent-tint); border-color: var(--accent-tint-bd); color: var(--accent); }

.dd-scene-tag { font-family: var(--sans); font-size: 11.5px; font-weight: 700; color: var(--slate); background: rgba(255,255,255,0.06); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px 7px; flex-shrink: 0; letter-spacing: 0.5px; }

/* ===================== Tabs / Segmente ===================== */
.dd-tabwrap { position: sticky; top: var(--ddtop, 60px); z-index: 9; margin: -16px -15px 14px; padding: 10px 15px 10px; background: var(--glass-tint); backdrop-filter: blur(var(--glass-blur)) saturate(115%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%); border-bottom: 1px solid var(--glass-edge-soft); box-shadow: var(--glass-top); }

/* Mattes-Glas-Körnung + solider Fallback — nur schwebende Bars */
.dd-topbar::after, .dd-tabwrap::after, .dd-navpill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--glass-noise); background-size: 90px 90px; opacity: .05; mix-blend-mode: overlay; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dd-topbar, .dd-tabwrap, .dd-navpill, .dd-modal { background: var(--glass-fallback); }
}
/* Tab-Umschalter (ShootDetail) = Glas-Segment-Pill, material-gleich zur unteren Nav-Leiste */
.dd-tabbar { position: relative; display: flex; gap: 3px; background: var(--glass-tint); border: 1px solid var(--glass-edge); border-radius: 999px; padding: 4px; margin-bottom: 18px; box-shadow: var(--glass-top); }
.dd-tabbtn { flex: 1; background: none; border: none; color: var(--faint); font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; padding: 10px 0; border-radius: 999px; cursor: pointer; font-weight: 700; transition: color .18s ease, background .18s ease; }
.dd-tabbtn.on { background: var(--text); color: var(--bg); font-weight: 700; }

/* ===================== Checkbox ===================== */
.dd-check { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; border: 2.5px solid var(--accent); background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease; }
.dd-check.on { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ===================== Field-Tile (Profil/Anmeldung) ===================== */
.dd-field { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 7px 11px 8px; transition: border-color .15s ease, box-shadow .15s ease; }
.dd-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.dd-field-label { font-family: var(--sans); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); display: block; margin-bottom: 1px; }
.dd-input-bare { background: transparent; border: none; outline: none; color: var(--text); font-family: var(--sans); font-size: 16px; font-weight: 500; width: 100%; padding: 2px 0 0; box-sizing: border-box; }
.dd-input-bare:focus, .dd-input-bare:focus-visible { outline: none; box-shadow: none; }

/* ===================== Modal / Scrim ===================== */
.dd-scrim { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 0; }
.dd-scrim.center { align-items: center; padding: 16px; }
.dd-modal { position: relative; width: 100%; max-width: 580px; background: var(--glass-tint-strong); color: var(--text); border: 1px solid var(--glass-edge); border-bottom: none; border-radius: 18px 18px 0 0; padding: 22px; max-height: 92vh; overflow-y: auto; backdrop-filter: blur(30px) saturate(120%); -webkit-backdrop-filter: blur(30px) saturate(120%); box-shadow: 0 -8px 40px rgba(0,0,0,0.5), var(--glass-top); }
.dd-scrim.center .dd-modal { border-radius: 18px; border-bottom: 1px solid var(--glass-edge); max-width: 420px; box-shadow: var(--glass-shadow), var(--glass-top); }
/* Animation NUR beim Öffnen (Klasse dd-anim), nicht bei jedem Re-Render → kein Flackern */
.dd-scrim.dd-anim { animation: ddFade .18s ease; }
.dd-modal.dd-anim { animation: ddSheetUp .34s cubic-bezier(0.32, 0.72, 0, 1); }
.dd-scrim.center .dd-modal.dd-anim { animation: ddPop .26s cubic-bezier(0.22, 1, 0.36, 1); }
.dd-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dd-modal-title { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.dd-grabber { width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.22); margin: -8px auto 15px; flex-shrink: 0; }
.dd-eye { background: none; border: none; padding: 5px; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px; transition: background .15s ease; }
.dd-eye:active { background: var(--surface); }

@keyframes ddSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ===================== Undo-Toast ===================== */
.dd-undo { position: fixed; left: 0; right: 0; bottom: calc(max(env(safe-area-inset-bottom, 0px), 12px) + 78px); z-index: 60; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.dd-undo-inner { pointer-events: auto; display: flex; align-items: center; gap: 12px; background: var(--raised); color: var(--n-50); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 10px 16px; box-shadow: 0 12px 32px rgba(0,0,0,0.6); max-width: 420px; width: 100%; }
.dd-undo-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: var(--accent); font-family: var(--sans); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12.5px; }

/* ===================== Loading ===================== */
.dd-loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--muted); font-family: var(--sans); font-size: 13px; letter-spacing: 1px; background: var(--bg); }

/* ===================== Keyframes (1:1) ===================== */
@keyframes ddWeekL { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ddWeekR { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes ddPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }
@keyframes ddRing { 0%,100% { box-shadow: 0 0 0 0 rgba(224,82,78,0); } 50% { box-shadow: 0 0 0 8px rgba(224,82,78,0.14); } }
@keyframes ddPop { from { transform: scale(0.96) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes ddCelebrate { 0% { transform: scale(.4); opacity: 0; } 22% { transform: scale(1.08); opacity: 1; } 68% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.03); opacity: 0; } }
@keyframes ddFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ddScrim { 0% { background: rgba(0,0,0,0); } 12% { background: rgba(0,0,0,0.62); } 72% { background: rgba(0,0,0,0.62); } 100% { background: rgba(0,0,0,0); } }
@keyframes ddReward { 0% { transform: scale(1); } 22% { transform: scale(1.32); } 46% { transform: scale(.88); } 68% { transform: scale(1.12); } 86% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes ddBurst { 0% { transform: scale(.55); opacity: .6; } 100% { transform: scale(2); opacity: 0; } }
@keyframes ddSpark { 0% { transform: translateX(-50%) scale(0) rotate(-20deg); opacity: 0; } 45% { transform: translateX(-50%) scale(1.35) rotate(12deg); opacity: 1; } 100% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; } }
@keyframes ddShine { 0% { transform: translateY(160%); } 100% { transform: translateY(-160%); } }
@keyframes ddCharge { 0% { transform: scale(1,1); } 24% { transform: scale(1.22,1.06); } 54% { transform: scale(.92,.99); } 100% { transform: scale(1,1); } }
@keyframes ddFlash { 0% { opacity: .92; } 100% { opacity: 0; } }

/* ===================== Reduced Motion (CI: Bewegung raus, Zustände & Fokus bleiben) ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}