/* =========================================================================
   Laternenparker — Design-Fundament (Tokens + App-Bausteine)
   Eine Quelle der Wahrheit für App (app.laternen-parker.de) und Website.
   Beschlossen 2026-06-13: Gold #f0c33a, System-Sans, Statusfarben-Treppe,
   Tab-Leiste unten, Theme wählbar (auto/hell/dunkel), Symbol+Label-Buttons.
   ========================================================================= */

/* ---- 1. Marke & Status (themenunabhängig, immer gleich → Wiedererkennung) */
:root {
  --brand-gold:        #f0c33a;
  --brand-gold-deep:   #e3b22c;

  /* Statusfarben. frei = einziger Kreis; lädt/belegt/unbekannt = abger. Quadrat; defekt = Raute. */
  --status-available:  #3ddc84;  /* frei      – hellster Punkt, Kreis     */
  --status-charging:   #b3261e;  /* lädt      – dunkelrot                  */
  --status-unknown:    #8b94a0;  /* keine Daten                           */
  --status-occupied:   #7e4029;  /* belegt    – rötliches Braun (klar unter lädt/blockiert) */
  --status-blocked:    #e8821e;  /* blockiert/reserviert – orange         */
  --status-defekt:     #4b5159;  /* defekt    – am dunkelsten, Raute       */

  /* ---- 2. Typografie (System-Sans, keine Web-Fonts) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fw-heading: 600;
  --fw-body:    400;
  --tracking-heading: -0.02em;
  --text-xs:  0.80rem;
  --text-sm:  0.90rem;
  --text-md:  1.00rem;
  --text-lg:  1.20rem;
  --text-xl:  1.50rem;
  --text-2xl: 2.00rem;
  --leading:  1.55;

  /* ---- 3. Abstände (8px-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.50rem;
  --space-3: 0.75rem;
  --space-4: 1.00rem;
  --space-5: 1.25rem;
  --space-6: 1.50rem;
  --space-8: 2.00rem;

  /* ---- 4. „Dicke-Finger"-Maße: großzügige Touchflächen */
  --tap-min:     48px;   /* absolutes Minimum jeder Touchfläche  */
  --tap-comfy:   56px;   /* Standard für Hauptaktionen           */
  --navbar-h:    64px;   /* Höhe der unteren Tab-Leiste          */
  --sheet-grip:  40px;   /* Greiffläche oben am Bottom-Sheet      */

  /* ---- 5. Radien & Schatten */
  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-pill: 999px;
  --shadow-card:  0 2px 12px rgba(0,0,0,.18);
  --shadow-sheet: 0 -8px 30px rgba(0,0,0,.35);

  /* ---- 6. Z-Ebenen */
  --z-map: 0;
  --z-fab: 30;
  --z-sheet: 40;
  --z-navbar: 50;
  --z-toast: 60;
}

/* ---- 7. Themen: Dunkel (Default, wie die Marken-Startseite) ------------- */
:root, [data-theme="dark"] {
  --bg:        #0c1014;
  --bg-grad:   radial-gradient(1200px 600px at 50% -10%, #16202b 0%, #0c1014 60%);
  --surface:   #16202b;
  --surface-2: #1d2935;
  --fg:        #e8edf2;
  --muted:     #8a97a6;
  --border:    rgba(138,151,166,.22);
  --overlay:   rgba(8,12,16,.55);
}

/* ---- 8. Themen: Hell ---------------------------------------------------- */
[data-theme="light"] {
  --bg:        #f4f6f8;
  --bg-grad:   radial-gradient(1200px 600px at 50% -10%, #ffffff 0%, #eef1f4 60%);
  --surface:   #ffffff;
  --surface-2: #f0f3f6;
  --fg:        #18222b;
  --muted:     #5b6772;
  --border:    rgba(20,30,40,.14);
  --overlay:   rgba(20,30,40,.35);
}

/* ---- 9. Basis ----------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--text-md);
  line-height: var(--leading);
  color: var(--fg);
  background: var(--bg-grad);
  background-color: var(--bg);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3 { font-weight: var(--fw-heading); letter-spacing: var(--tracking-heading); line-height: 1.2; }
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
a { color: var(--brand-gold); }

/* Wortmarke */
.lp-wordmark { font-weight: var(--fw-heading); letter-spacing: var(--tracking-heading); }
.lp-wordmark .accent { color: var(--brand-gold); }

/* ---- 10. Buttons (Symbol + Label), Mindest-Touchfläche eingebaut -------- */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-comfy); padding: 0 var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg);
  font: inherit; font-weight: 500; cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
.lp-btn:active { filter: brightness(1.12); }
.lp-btn--primary { background: var(--brand-gold); color: #1a1300; border-color: transparent; font-weight: 600; }
.lp-btn--ghost   { background: transparent; }
.lp-btn svg { width: 22px; height: 22px; }

/* Runder Icon-Button mit darunterliegendem Label (Tab-Stil) */
.lp-iconbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: var(--tap-min); min-height: var(--tap-min); padding: var(--space-1) var(--space-2);
  border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: var(--text-xs); cursor: pointer;
}
.lp-iconbtn svg { width: 26px; height: 26px; }
.lp-iconbtn[aria-current="page"], .lp-iconbtn.is-active { color: var(--brand-gold); }

/* Schwebender Aktionsknopf (z.B. Standort) */
.lp-fab {
  position: fixed; right: var(--space-4); bottom: calc(var(--navbar-h) + var(--space-4));
  width: var(--tap-comfy); height: var(--tap-comfy); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-gold); color: #1a1300; border: none;
  box-shadow: var(--shadow-card); cursor: pointer; z-index: var(--z-fab);
}
.lp-fab svg { width: 26px; height: 26px; }

/* ---- 11. Untere Tab-Leiste (4 Symbole, daumenbereich) ------------------- */
.lp-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-navbar);
  display: flex; justify-content: space-around; align-items: stretch;
  height: var(--navbar-h);
  padding-bottom: env(safe-area-inset-bottom);   /* iPhone-Notch/Home-Bar  */
  background: var(--surface); border-top: 1px solid var(--border);
}
.lp-tabbar .lp-iconbtn { flex: 1; }

/* ---- 12. Bottom-Sheet (ersetzt den zu großen Legenden-Screen) ---------- */
.lp-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  background: var(--surface); color: var(--fg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(calc(100% - var(--sheet-grip) - 1.6rem));  /* eingeklappt: nur Griff + Titel */
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  max-height: 80vh; overflow: hidden;
}
.lp-sheet.is-open { transform: translateY(0); }
.lp-sheet.is-dragging { transition: none; }      /* während des Ziehens kein Nachlauf */
.lp-sheet__grip {
  height: var(--sheet-grip); display: flex; align-items: center; justify-content: center;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.lp-sheet__grip:active { cursor: grabbing; }
.lp-sheet__grip::before {
  content: ""; width: 44px; height: 5px; border-radius: var(--radius-pill);
  background: var(--muted); opacity: .5;
}
.lp-sheet__body { padding: 0 var(--space-5) var(--space-6); overflow-y: auto; max-height: calc(80vh - var(--sheet-grip)); }
/* Halbtransparenter Hintergrund, schließt bei Tipp daneben */
.lp-scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1);
  background: var(--overlay); opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.lp-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ---- 13. Karten/Listen ------------------------------------------------- */
.lp-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-4); box-shadow: var(--shadow-card);
}

/* ---- 14. Status-Punkt (Farbe + Form, nie Farbe allein) ----------------- */
.lp-status { display: inline-flex; align-items: center; gap: var(--space-2); }
.lp-status__dot { width: 16px; height: 16px; border-radius: 3px; flex: none; }                        /* Standard: abger. Quadrat */
.lp-status--available .lp-status__dot { background: var(--status-available); border-radius: 50%; }    /* nur frei = Kreis */
.lp-status--charging  .lp-status__dot { background: var(--status-charging); }                         /* abger. Quadrat */
.lp-status--unknown   .lp-status__dot { background: var(--status-unknown); }                          /* abger. Quadrat */
.lp-status--occupied  .lp-status__dot { background: var(--status-occupied); }                         /* abger. Quadrat */
.lp-status--blocked   .lp-status__dot { background: var(--status-blocked); }                          /* abger. Quadrat */
.lp-status--defekt    .lp-status__dot { background: var(--status-defekt); transform: rotate(45deg); } /* Raute */

/* ---- 15. Theme-Umschalter (3 Segmente) --------------------------------- */
.lp-themeswitch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.lp-themeswitch button {
  min-height: var(--tap-min); padding: 0 var(--space-4);
  background: transparent; color: var(--muted); border: none; font: inherit; cursor: pointer;
}
.lp-themeswitch button.is-active { background: var(--brand-gold); color: #1a1300; font-weight: 600; }

/* Inhalt soll nicht unter der Tab-Leiste verschwinden */
.lp-has-tabbar { padding-bottom: calc(var(--navbar-h) + env(safe-area-inset-bottom) + var(--space-4)); }