/* ─── Brand-Tokens (gilt für ALLE Seiten, nicht nur index.html) ─── */
:root {
  --schwarz:    #0d0d0d;
  --dunkel:     #141a14;
  --gruen:      #1e3020;
  --gruen-mid:  #2d4a2d;
  --sand:       #f4ead8;
  --sand-2:     #ede0c8;
  --holz:       #6b3f1a;
  --holz-hell:  #8a5024;
  --weiss:      #faf7f0;
  --text:       #2a2a2a;
  --border:     #e0d8c8;
  --muted:      rgba(0,0,0,0.5);
  --card-bg:    #ffffff;    /* Cards: pures Weiß für Kontrast gegen --weiss-cream */
  --page-bg:    #faf7f0;
}

/* ─── Global Focus-Visible ───────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--holz, #b07840);
  outline-offset: 2px;
}

/* ─── Dark Mode Overrides ─────────────────────────────────── */
html { transition: none; -webkit-text-size-adjust: 100%; touch-action: manipulation; }
/* Kein horizontales Scrollen + kein Doppeltipp-Zoom (Lupe bleibt als Schrift-Zoom) */
html, body { overflow-x: clip; }

body {
  transition: background 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] {
  --weiss:     #0d1510;
  --sand:      #c0d0b8;
  --sand-2:    #b0c0a8;
  --holz:      #b07840;
  --holz-hell: #c89050;
  --text:      #c8d8c0;
  --gruen:     #0f1a10;
  --gruen-mid: #182818;
  --border:    #283228;
  --card-bg:   #182818;     /* Cards im Dark Mode: mid-grün */
  --page-bg:   #0d1510;
  color-scheme: dark;
}

[data-theme="dark"] input[type="radio"],
[data-theme="dark"] input[type="checkbox"] {
  accent-color: #7ab870;
}

/* ─── Floating Theme Toggle Button ───────────────────────────────
   Solide weiße Fläche im Light Mode, solide dunkle im Dark Mode +
   kräftiger Schatten + zusätzliche Outline-Schicht → erkennbar auf
   JEDEM Hintergrund (Fotos, helle Flächen, dunkle Flächen). */
.theme-toggle-float {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(0,0,0,0.25);
  cursor: pointer;
  /* Doppelschatten: dunkler Halo für Foto-Hintergründe + sanfter normaler Schatten */
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.5),
    0 3px 14px rgba(0,0,0,0.35),
    0 1px 3px rgba(0,0,0,0.2);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.theme-toggle-float:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6),
    0 6px 24px rgba(0,0,0,0.4),
    0 2px 6px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
.float-icon { width: 19px; height: 19px; flex-shrink: 0; }
.float-moon { display: block; color: #2a3e2a; }
.float-sun  { display: none; }
[data-theme="dark"] .float-moon { display: none; }
[data-theme="dark"] .float-sun  { display: block; color: #f0c050; }
[data-theme="dark"] .theme-toggle-float {
  background: #1a2818;
  border-color: rgba(180,210,180,0.45);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 3px 14px rgba(0,0,0,0.6),
    0 0 0 3px rgba(180,210,180,0.08);
}
[data-theme="dark"] .theme-toggle-float:hover {
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 6px 24px rgba(0,0,0,0.7),
    0 0 0 3px rgba(180,210,180,0.15);
}

/* ─── Senior Toggle — identische Größe & Stil wie .theme-toggle-float ── */
.senior-toggle {
  width: 44px !important;
  height: 44px !important;
  bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  right: 80px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,0.25) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.5),
    0 3px 14px rgba(0,0,0,0.35),
    0 1px 3px rgba(0,0,0,0.2) !important;
  color: #2a3e2a !important;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s, transform 0.15s !important;
}
.senior-toggle:hover {
  background: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.6),
    0 6px 24px rgba(0,0,0,0.4),
    0 2px 6px rgba(0,0,0,0.2) !important;
  transform: translateY(-2px) !important;
}
/* Aktiver Zustand (Schrift vergrößert) – sichtbarer grüner Akzent */
html.senior .senior-toggle {
  background: #2a5a2a !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #ffffff !important;
}
html.senior .senior-toggle { width: 44px !important; height: 44px !important; }

/* ══════════════════════════════════════════════════════════════
   DARK MODE — Element Overrides
   Fixes hardcoded colors that don't respond to CSS variables
   ══════════════════════════════════════════════════════════════ */

/* html background (impressum/datenschutz hardcode #faf7f0) */
[data-theme="dark"] html { background: var(--weiss); }

/* ── Headings ─────────────────────────────────────────────── */
/* h1/h2 use color:var(--gruen) which becomes #0f1a10 (near-black) in dark */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] .section-title { color: rgba(200,230,195,0.88); }

/* ── Page label / section label ──────────────────────────── */
[data-theme="dark"] .page-label,
[data-theme="dark"] .eckdaten-label { color: rgba(160,200,160,0.75); }  /* WCAG AA */

/* ── Body text (impressum/datenschutz: p/ul hardcoded #3a3a3a) ── */
[data-theme="dark"] p,
[data-theme="dark"] ul,
[data-theme="dark"] li { color: var(--text); }

/* ── Muted / secondary text ──────────────────────────────── */
[data-theme="dark"] .header-sub,
[data-theme="dark"] .intro,
[data-theme="dark"] .section-desc,
[data-theme="dark"] .field-hint,
[data-theme="dark"] .form-note,
[data-theme="dark"] .price-tag,
[data-theme="dark"] .eckdaten p { color: rgba(180,210,180,0.78); }
[data-theme="dark"] .dsgvo-check span { color: rgba(180,210,180,0.78); }

/* ── Labels ──────────────────────────────────────────────── */
[data-theme="dark"] label,
[data-theme="dark"] .field-group label { color: rgba(170,200,170,0.85); }  /* WCAG AA */

/* ── Links ───────────────────────────────────────────────── */
[data-theme="dark"] a { color: var(--holz); }
[data-theme="dark"] .content a { color: var(--holz); }

/* ── Footer (rgba(0,0,0,0.38) is invisible on dark bg) ───── */
[data-theme="dark"] footer { color: rgba(180,210,180,0.75); }  /* WCAG AA — war 0.38 = 3.2:1 */
[data-theme="dark"] footer a,
[data-theme="dark"] .footer-credit a { color: rgba(180,210,180,0.75); }  /* WCAG AA */
[data-theme="dark"] footer a:hover,
[data-theme="dark"] .footer-credit a:hover { color: rgba(180,210,180,0.95); }

/* ── Senior toggle Dark Mode — solider Hintergrund + Halo ──── */
[data-theme="dark"] .senior-toggle {
  background: #1a2818 !important;
  color: rgba(220,235,215,0.92) !important;
  border-color: rgba(180,210,180,0.45) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 3px 14px rgba(0,0,0,0.6),
    0 0 0 3px rgba(180,210,180,0.08) !important;
}
[data-theme="dark"] .senior-toggle:hover {
  background: #1a2818 !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 6px 24px rgba(0,0,0,0.7),
    0 0 0 3px rgba(180,210,180,0.15) !important;
}
[data-theme="dark"] html.senior .senior-toggle {
  background: #4d8b3d !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.55) !important;
}

/* ── Schriftgrößen-Stufen (zoom.js: .senior = Nah, .senior+.senior-2 = Näher) ──
   .senior bleibt "Zoom aktiv" → alle bestehenden per-Seite html.senior X {}-Tweaks
   greifen weiter. Stufe 2 erhöht nur die Basis-Schriftgröße zusätzlich.
   !important, weil die Legacy-Seiten teils ein inline html.senior{font-size:128%} haben. */
html.senior            { font-size: 113% !important; }
html.senior.senior-2   { font-size: 126% !important; }

/* ── Barrierefreiheits-Widget (von a11y.js injiziert) — Ecke unten links ── */
.a11y { position: fixed; left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9000; font-family: system-ui, -apple-system, sans-serif; }
.a11y-fab { display: grid; place-items: center; height: 50px; width: 50px; border-radius: 999px; border: none;
  background: #1e3020; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(10,25,12,.35); transition: transform .15s, background .2s; }
.a11y-fab:hover { background: #2d4a2d; transform: translateY(-2px); }
.a11y-panel { position: absolute; left: 0; bottom: 62px; width: 244px; padding: 14px; border-radius: 16px;
  background: #faf7f0; border: 1px solid #ddd4bc; box-shadow: 0 18px 50px rgba(20,40,20,.22); }
.a11y-panel[hidden] { display: none; }
.a11y-title { margin: 2px 0 10px; font-weight: 700; color: #1e3020; font-size: .95rem; }
.a11y-fs { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: .85rem; color: #2a2a2a; }
.a11y-fsbtns { display: flex; gap: 4px; }
.a11y-fsbtns button { min-width: 34px; height: 34px; border-radius: 8px; border: 1px solid #ddd4bc; background: #f4ead8; color: #1e3020; font-weight: 700; cursor: pointer; }
.a11y-fsbtns button:hover { background: #ede0c8; }
.a11y-opt { display: block; width: 100%; text-align: left; margin-top: 6px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid #ddd4bc; background: #fff; color: #2a2a2a; font-weight: 600; font-size: .85rem; cursor: pointer; }
.a11y-opt:hover { background: #f4ead8; }
.a11y-opt[aria-pressed="true"] { background: #1e3020; border-color: #1e3020; color: #fff; }
.a11y-reset { margin-top: 10px; width: 100%; padding: 8px; border: none; background: none; color: #6d6a60; font-size: .8rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.a11y-reset:hover { color: #1e3020; }
@media (prefers-reduced-motion: reduce) { .a11y-fab { transition: none; } }

/* Feature-Klassen (auf <html> gesetzt) */
html.a11y-links a[href] { text-decoration: underline !important; text-underline-offset: 2px; }
html.a11y-nomotion *, html.a11y-nomotion *::before, html.a11y-nomotion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* Hoher Kontrast: Filter je Inhalts-Abschnitt (nicht auf fixierte Nav/Widget — sonst bricht position:fixed) */
html.a11y-contrast body > *:not(nav):not(.a11y):not(.nav-mobile-menu) { filter: contrast(1.18); }

/* ── Form inputs — all pages ─────────────────────────────── */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .field-group input,
[data-theme="dark"] .stepper-val {
  background: #141e14;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus { border-color: rgba(100,160,100,0.55); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: rgba(170,200,170,0.55); }

/* Stepper buttons */
[data-theme="dark"] .stepper-btn { background: var(--weiss); color: var(--text); }
[data-theme="dark"] .stepper-btn:hover { background: rgba(180,210,180,0.1); }

/* ── Date picker (gaeste.html) ───────────────────────────── */
[data-theme="dark"] .dp-trigger {
  background: #141e14;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .dp-popup {
  background: #1a261a;
  border-color: var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
[data-theme="dark"] .dp-day { color: var(--text); background: none; }
[data-theme="dark"] .dp-day.dp-dim { color: rgba(180,210,180,0.18); }
[data-theme="dark"] .dp-day:hover { background: rgba(180,210,180,0.1); }
[data-theme="dark"] .dp-day.dp-sel { background: var(--sand) !important; color: #0f1a10 !important; }
[data-theme="dark"] .dp-icon { color: rgba(180,210,180,0.28); }
[data-theme="dark"] .dp-nav { color: rgba(180,210,180,0.65); }
[data-theme="dark"] .dp-nav:hover { background: rgba(180,210,180,0.1); }
[data-theme="dark"] .dp-wdays span { color: rgba(180,210,180,0.28); }
[data-theme="dark"] .dp-mlabel { color: rgba(200,230,195,0.8); }

/* ── Custom select (warteliste.html) ─────────────────────── */
[data-theme="dark"] .cs-trigger {
  background: #141e14;
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .cs-dropdown {
  background: #1a261a;
  border-color: var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
[data-theme="dark"] .cs-option:hover { background: rgba(180,210,180,0.08); }
[data-theme="dark"] .cs-option.selected { color: rgba(200,230,195,0.9); }
[data-theme="dark"] .cs-placeholder,
[data-theme="dark"] .cs-option.cs-placeholder-opt { color: rgba(170,200,170,0.55); }
[data-theme="dark"] .cs-arrow { color: rgba(170,200,170,0.4); }

/* ── Hinweis / info boxes ────────────────────────────────── */
[data-theme="dark"] .hinweis {
  background: rgba(30,48,32,0.35);
  border-left-color: rgba(100,160,100,0.35);
  color: rgba(180,210,180,0.72);
}
[data-theme="dark"] .success-msg {
  background: rgba(30,48,32,0.35);
  border-left-color: rgba(100,160,100,0.45);
}
[data-theme="dark"] .success-msg strong { color: rgba(200,230,195,0.9); }
[data-theme="dark"] .hund-hinweis {
  background: rgba(80,60,20,0.25);
  border-left-color: rgba(140,110,55,0.4);
  color: rgba(200,175,120,0.8);
}

/* ── PayPal section (gaeste.html) ────────────────────────── */
[data-theme="dark"] .paypal-hint {
  background: rgba(80,55,8,0.28);
  border-color: rgba(150,115,45,0.3);
  color: rgba(210,178,100,0.88);
}
[data-theme="dark"] .backup-code {
  background: #141e14;
  color: rgba(180,210,180,0.72);
  border-color: var(--border);
}
[data-theme="dark"] .backup-code.empty { color: rgba(170,200,170,0.28); }
[data-theme="dark"] .backup-copy {
  color: rgba(170,200,170,0.52);
  border-color: var(--border);
}
[data-theme="dark"] .backup-copy:hover { background: rgba(180,210,180,0.07); }
[data-theme="dark"] .paypal-btn.disabled {
  background: #1c281c;
  color: rgba(180,210,180,0.28);
}
[data-theme="dark"] .send-state { color: rgba(180,210,180,0.70); }

/* ── Disclaimer ──────────────────────────────────────────── */
[data-theme="dark"] .disclaimer { color: rgba(180,210,180,0.70); }
[data-theme="dark"] .disclaimer a { color: rgba(180,210,180,0.70); }

/* ── Primäre Action-Buttons (alle Seiten) ────────────────── */
/* var(--gruen)/#0f1a10 und var(--dunkel)/#0d0d0d → fast schwarz in dark */
[data-theme="dark"] .btn-submit {
  background: #2d5030;
  color: rgba(215,238,210,0.95);
}
[data-theme="dark"] .btn-submit:hover:not(:disabled) { background: #3a6040; }
[data-theme="dark"] .btn-dark {
  background: #2d5030;
  color: rgba(215,238,210,0.95);
  border: none;
}
[data-theme="dark"] .btn-dark:hover { background: #3a6040; }

/* ── Kontakt-Sektion (index.html) ────────────────────────── */
/* Sektion: sehr dunkel; Form: leicht erhöht und gut lesbar  */
[data-theme="dark"] .kontakt { background: #080e09; }

[data-theme="dark"] .section-label { color: rgba(160,200,160,0.75); }  /* WCAG AA */

[data-theme="dark"] .kontakt-text h2 { color: rgba(200,230,195,0.88); }
[data-theme="dark"] .kontakt-text p  { color: rgba(180,210,180,0.6); }
[data-theme="dark"] .kontakt-text a  { color: var(--holz); }

[data-theme="dark"] .form-group label { color: rgba(170,200,170,0.85); }  /* WCAG AA */

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea {
  background: #182818;
  border-color: #2e3e2e;
  color: var(--text);
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
  background: #1e3220;
  border-color: rgba(120,170,120,0.55);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
  color: rgba(170,200,170,0.25);
}

/* Submit-Bereich — Styling kommt jetzt von globalem .btn-dark Override */

/* DSGVO-Hinweis (inline style #888 überschreiben) */
[data-theme="dark"] .form-submit p,
[data-theme="dark"] .form-submit p a { color: rgba(170,200,170,0.75) !important; }  /* WCAG AA */

/* Erfolgsmeldung */
[data-theme="dark"] #form-success { color: rgba(140,200,140,0.85) !important; }

/* ── HR dividers ─────────────────────────────────────────── */
[data-theme="dark"] hr { border-top-color: var(--border); }

/* ── Page header border ──────────────────────────────────── */
[data-theme="dark"] .page-header { background: #0a1410; border-bottom-color: var(--border); }

/* ── Nav CTA "Warteliste" (oben rechts) ─────────────────── */
/* var(--holz) = #b07840 in dark → zu orange, lieber gedimmt */
[data-theme="dark"] .nav-cta {
  background: rgba(176,120,64,0.2);
  border: 1px solid rgba(176,120,64,0.35);
  color: rgba(210,175,120,0.9);
}
[data-theme="dark"] .nav-cta:hover {
  background: rgba(176,120,64,0.32);
}

/* ── Warteliste-Banner "Interesse an einer Parzelle?" ─────── */
/* var(--holz) = #b07840 → orange; var(--weiss) für h3 = #0d1510 → unsichtbar */
[data-theme="dark"] .wl-banner { background: #0a1410; }
[data-theme="dark"] .wl-banner h3 { color: rgba(200,230,195,0.88); }
[data-theme="dark"] .wl-banner p  { color: rgba(180,210,180,0.85); }  /* WCAG AA — war 0.55 = 3.0:1 */

/* ── ICS-Download-Button (gaeste.html) ───────────────────── */
[data-theme="dark"] .ics-btn {
  color: rgba(170,200,170,0.5);
  border-color: var(--border);
}
[data-theme="dark"] .ics-btn:hover {
  background: rgba(180,210,180,0.08);
  border-color: rgba(180,210,180,0.28);
  color: rgba(200,230,195,0.8);
}

/* ── Verhindert Auto-Zoom bei Formularfeldern auf iOS/Android ── */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]),
  textarea,
  select {
    font-size: max(16px, 1em);
  }
}

/* ── Info-Button (kleines "i" neben Labels) ───────────────────────────── */
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.35rem;
  padding: 0;
  border-radius: 50%;
  border: 1.4px solid var(--gruen, #3e5b3a);
  background: transparent;
  color: var(--gruen, #3e5b3a);
  font: italic 700 11px/1 'Times New Roman', Georgia, serif;
  cursor: pointer;
  vertical-align: 0;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.info-btn:hover {
  background: var(--gruen, #3e5b3a);
  color: var(--weiss, #faf7f0);
  transform: scale(1.08);
}
.info-btn:focus-visible {
  outline: 2px solid var(--holz, #6b3f1a);
  outline-offset: 2px;
}
[data-theme="dark"] .info-btn {
  border-color: rgba(180,210,180,0.55);
  color: rgba(180,210,180,0.75);
}
[data-theme="dark"] .info-btn:hover {
  background: rgba(180,210,180,0.18);
  color: var(--text);
}

/* ── Lageplan: Original-Scan-Hintergrund + transparente Klick-Overlays ── */
.lp-svg { display: block; background: var(--weiss); }
.lp-bg { fill: var(--weiss); }
.lp-bg-image { /* Original-Parzellenplan als Hintergrund */ }

/* Parzellen-Klickfläche: standardmäßig komplett transparent */
.parzelle { cursor: pointer; }
.parzelle rect.parzelle-hit,
.parzelle .parzelle-hit {
  fill: transparent !important;
  stroke: transparent !important;
  stroke-width: 1.5 !important;
  transition: fill 0.12s, stroke 0.12s;
}
.parzelle:hover rect.parzelle-hit,
.parzelle:hover .parzelle-hit {
  fill: rgba(107, 63, 26, 0.20) !important;
  stroke: var(--holz, #6b3f1a) !important;
}
.parzelle.selected rect.parzelle-hit,
.parzelle.selected .parzelle-hit {
  fill: rgba(107, 63, 26, 0.35) !important;
  stroke: var(--holz, #6b3f1a) !important;
  stroke-width: 2 !important;
}
/* Plot-Nummern aus dem alten Layout ausblenden (Original-Scan zeigt sie schon) */
.parzelle text { display: none !important; }

/* Sanitäranlagen-Klickfläche */
.lp-facility-hit { fill: rgba(0,0,0,0); }
.lp-fac-click { cursor: pointer; }
.lp-fac-click:hover .lp-facility-hit { fill: rgba(34, 139, 34, 0.30); }
.lp-fac-click.selected .lp-facility-hit { fill: rgba(107, 63, 26, 0.45); }

/* Dark Mode: leichte Bild-Aufhellung damit Plan auf dunklem Hintergrund sichtbar bleibt */
[data-theme="dark"] .lp-bg-image {
  filter: invert(0.92) hue-rotate(180deg) brightness(1.05);
}
[data-theme="dark"] .lp-bg { fill: var(--weiss); }
[data-theme="dark"] .parzelle:hover rect.parzelle-hit,
[data-theme="dark"] .parzelle:hover .parzelle-hit {
  fill: rgba(176, 120, 64, 0.25) !important;
  stroke: var(--holz) !important;
}
[data-theme="dark"] .parzelle.selected rect.parzelle-hit,
[data-theme="dark"] .parzelle.selected .parzelle-hit {
  fill: rgba(176, 120, 64, 0.45) !important;
  stroke: var(--holz) !important;
}

/* ── Ampel-Dots (Admin-Karte) ── */
.ampel-dot   { stroke: none; pointer-events: none; }
.ampel-gruen { fill: #22c55e; }
.ampel-gelb  { fill: #eab308; }
.ampel-rot   { fill: #ef4444; }
.ampel-grau  { fill: #9ca3af; }

/* ── Hover-Tooltip (Admin) ── */
.lp-tooltip {
  position: fixed;
  z-index: 9000;
  background: #fff;
  color: #2a2a2a;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 13px;
  font: 13px/1.5 system-ui,sans-serif;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  pointer-events: none;
  min-width: 190px;
  max-width: 260px;
}
.lp-tooltip strong { display: block; margin-bottom: 4px; font-size: 14px; }
.lp-tooltip hr { border: none; border-top: 1px solid #eee; margin: 6px 0; }
.lp-tooltip .tip-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.lp-tooltip .tip-label { color: #5a5a5a; }
[data-theme="dark"] .lp-tooltip {
  background: #1a261a;
  color: var(--text);
  border-color: var(--border);
  box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}
[data-theme="dark"] .lp-tooltip hr { border-top-color: var(--border); }
[data-theme="dark"] .lp-tooltip .tip-label { color: #6a8060; }

/* ── Facility Marker Clickable (Report-Modus) ── */
.lp-fac-click .lp-facility { transition: fill 0.15s; }
.lp-fac-click:hover .lp-facility { fill: #2a8a2a; }
.lp-fac-click.selected .lp-facility { fill: var(--holz,#6b3f1a); }
[data-theme="dark"] .lp-fac-click:hover .lp-facility { fill: #3a9a3a; }

/* ── Task Marker ── */
.task-marker circle { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }

/* ── Dark Mode: Modals, Cards, Tables, Form Elements ───────── */
[data-theme="dark"] .modal-sheet,
[data-theme="dark"] .lp-modal-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .action-card,
[data-theme="dark"] .data-card,
[data-theme="dark"] .help-callout,
[data-theme="dark"] .faq-item {
  background: var(--card-bg, #182818);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .modal-backdrop,
[data-theme="dark"] .drawer-overlay,
[data-theme="dark"] .lp-modal-backdrop {
  background: rgba(0,0,0,0.7);
}
[data-theme="dark"] .data-table th {
  background: #182818;
  color: rgba(200,230,195,0.88);
}
[data-theme="dark"] .data-table td,
[data-theme="dark"] .data-table {
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .badge {
  background: rgba(180,210,180,0.12);
  color: var(--text);
}
[data-theme="dark"] select option {
  background: #141e14;
  color: var(--text);
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
[data-theme="dark"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #141e14 inset !important;
  -webkit-text-fill-color: var(--text) !important;
}
[data-theme="dark"] .task-marker circle {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
[data-theme="dark"] .filter-bar input,
[data-theme="dark"] .filter-bar select {
  background: #141e14;
  border-color: var(--border);
  color: var(--text);
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Text-Balance (Portfolio-Standard): keine Orphan-Schlusszeilen. Progressive Enhancement. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }