/**
 * Default-Theme (Akzent: Orange). Per-Gemeinde-Override unter
 * /assets/communities/{slug}/main.css.
 *
 * Enthaelt:
 *  - Tailwind-Config-Ueberschreibungen (Farben, Fonts)
 *  - Globale Styles die bisher inline in jeder .html-Datei standen
 *  - Utility-Classes (hide-scroll, nav-fixed)
 *
 * Gemeinde-spezifische Akzentfarben/Fonts/Sub-Element-Styles werden im
 * /assets/communities/{slug}/main.css ueberschrieben — die Layout-API
 * haengt den Pfad automatisch an assets.css an. Statusbar-Farbe
 * (PWA + <meta name="theme-color">) kommt zusaetzlich aus
 * community.theme_color, siehe app/manifest.php + app/index.php.
 */

/* Tailwind runtime-config wird per <script> im <head> gesetzt (siehe index.php).
   Hier nur statische Styles die kein Tailwind-Preset brauchen. */

/* ============================================================================
   Inter — self-hosted (DSGVO-konform, kein Google-Fonts-Roundtrip)
   ----------------------------------------------------------------------------
   Begruendung: Einbindung ueber fonts.googleapis.com sendet die IP-Adresse
   des Besuchers an Google. Das LG Muenchen hat das 2022 (Az. 3 O 17493/20)
   ohne Einwilligung als DSGVO-Verstoss gewertet — Schadenersatzpflicht.
   Selbst-Hosting der OFL-lizenzierten Inter-WOFF2-Files schaltet das aus.
   Quelle der Files: fonts.gstatic.com (Variable-Font, 1 Datei pro Subset
   enthaelt alle Gewichte 300-700). Lizenz: SIL Open Font License 1.1
   (siehe app/assets/fonts/inter/LICENSE.txt).

   font-display: optional — kein Layout-Shift waehrend des Lesens (siehe
   PR #821). Bei kaltem Cache rendert der Erst-Besucher mit System-Font,
   ab dem zweiten Pageview ist Inter aus dem Browser-Cache da.
   ============================================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;     /* Variable-Font: ein File deckt 300-700 ab */
  font-display: optional;
  src: url('/assets/fonts/inter/inter-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;
  src: url('/assets/fonts/inter/inter-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   Design-Tokens (CSS-Variablen)
   ----------------------------------------------------------------------------
   Per-Gemeinde-Overrides liegen unter app/assets/communities/{slug}/main.css
   und werden NACH dieser Datei geladen (siehe erp/Classes/API/ApiLayout.php
   -> buildAssets). Eine Gemeinde stellt damit ihren Look mit wenigen Zeilen
   um, ohne dass Templates angefasst werden muessen.

   Defaults entsprechen 1:1 dem aktuellen Tailwind-basierten Design — Phase 1
   fuehrt die Variablen nur ein, sie werden noch nicht in Templates angewendet
   (das passiert in spaeteren Phasen, schrittweise pro Block-Typ).
   ============================================================================ */
:root {
  /* ---- Akzent-Farbe ---- */
  --accent:         #f97316;   /* tailwind orange-500 — primary */
  --accent-strong:  #ea580c;   /* tailwind orange-600 — hover/active */
  --accent-soft:    #fed7aa;   /* tailwind orange-200 — backgrounds */
  --accent-mute:    #fdba74;   /* tailwind orange-300 — disabled/indeterminate */
  --accent-on:      #ffffff;   /* Textfarbe AUF Akzent-Hintergrund */

  /* ---- Status-Farben ---- */
  --status-open:    #16a34a;   /* green-600 */
  --status-closed:  #ef4444;   /* red-500 */
  --status-info:    #2563eb;   /* blue-600 */
  --status-warning: #d97706;   /* amber-600 */
  --status-error:   #dc2626;   /* red-600 */

  /* ---- Neutrale Text- und Flaechenfarben ---- */
  --text-strong:    #111827;   /* gray-900 — Headings, primaerer Text */
  --text-default:   #1f2937;   /* gray-800 — Fliesstext */
  --text-muted:     #6b7280;   /* gray-500 — sekundaerer Text */
  --text-faint:     #9ca3af;   /* gray-400 — Labels, Meta */
  --border-default: #e5e7eb;   /* gray-200 — Trenner, Card-Border */
  --surface-soft:   #f3f4f6;   /* gray-100 — Card-Background */
  --surface-toggle-off: #d1d5db; /* gray-300 — inaktiver Toggle-Track */

  /* ---- Section-Rhythmus ----
     Der section-divider (h-2 grau) ist heute fester Block-Trenner.
     --block-py/px sind vorbereitet, werden aber in Phase 1 noch nicht
     erzwungen — Templates regeln padding/margin weiterhin via Tailwind. */
  --block-py:        0;            /* spaeter z.B. 1.5rem */
  --block-px:        0;            /* spaeter z.B. 1rem (px-5 = 1.25rem heute) */
  --divider-height:  0.5rem;       /* h-2 (8px) — section-divider */
  --divider-color:   var(--border-default);

  /* ---- Radius ----
     Design-Kern: kantig. Bewusst auf 0 — bei Bedarf pro Gemeinde anhebbar. */
  --radius:          0;
  --radius-pill:     9999px;       /* Toggle-Knob, Avatare (full-round bleibt) */

  /* ---- Typografie: Basis ---- */
  --font-family:     'Inter', system-ui, sans-serif;
  --font-size-base:  1rem;         /* 16px */
  --line-height-base: 1.5;
  --font-smoothing:  antialiased;

  /* ---- H1 — Page-Titel (text-2xl font-bold tracking-tight) ----
     Verwendet in: page-header, event-hero, news/detail, tenants/profile-header */
  --h1-size:         1.5rem;       /* text-2xl */
  --h1-weight:       700;          /* font-bold */
  --h1-line:         1.25;         /* leading-tight */
  --h1-tracking:     -0.025em;     /* tracking-tight */
  --h1-color:        var(--text-strong);

  /* ---- H2 (Block-Title) — Block-Headline mit Akzent-Underline (text-lg font-bold) ----
     Verwendet in: home/vereine, news/list-horizontal, list, resource-* */
  --h2-size:         1.125rem;     /* text-lg */
  --h2-weight:       700;
  --h2-line:         1.5;
  --h2-color:        var(--text-strong);

  /* ---- H2-Label — Kapitel-Label ueber Block (text-xs uppercase tracking-wide gray-400) ----
     Bei weitem haeufigste Variante (~35 Templates) */
  --label-size:      0.75rem;      /* text-xs */
  --label-weight:    500;          /* font-medium */
  --label-color:     var(--text-faint);
  --label-tracking:  0.025em;      /* tracking-wide */
  --label-transform: uppercase;

  /* ---- H3 — Item-Titel in Listen (text-[15px] / text-lg semibold) ---- */
  --h3-size:         1.125rem;     /* text-lg (text-card-Titel) */
  --h3-weight:       600;          /* font-semibold */
  --h3-line:         1.5;
  --h3-color:        var(--text-strong);

  /* ---- Wichtig-Box (Banner) ----
     --waste-color steuert das Pastell-Schema. Default = Akzent;
     pro waste_type ueber .wichtig-box[style="--waste-color: #xxx"] (Template). */
  --waste-color:     var(--accent-strong);
}

body {
  /* font-size + line-height bewusst nicht hier setzen — sie werden via
     Tailwind-Preflight von <html> geerbt (line-height: 1.5). Ein expliziter
     line-height auf body sorgte beim Font-Swap (Inter laedt async) fuer
     einen sichtbaren Layout-Shift, weil der Browser den Wert dann mit den
     neuen Inter-Metriken neu berechnet. Variablen --font-size-base /
     --line-height-base bleiben deklariert fuer spaetere h1/h2-Regeln. */
  font-family: var(--font-family);
  padding-bottom: 2.5rem;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   Tailwind-Bridge — Akzent-Klassen ans Token-System anbinden
   ----------------------------------------------------------------------------
   tailwind.css wird mit festen Hex-Werten aus tailwind.config.js gebaut
   (accent-500: #f97316 etc.). Ohne diesen Block wuerde ein Tenant-Override
   wie '.tenant-pfarrkirchen { --accent: #ea580c }' an den sichtbarsten
   Stellen verpuffen: H2-Block-Title-Underline (border-accent-500),
   Akzent-Buttons (bg-accent-500), Bottom-Nav-Active, Form-Focus-Rings.
   Diese Regeln ueberschreiben die kompilierten Hex mit var(--accent...),
   damit der Token-Override wirklich global durchschlaegt.

   Lade-Reihenfolge: tailwind.css (frueher) -> main.css (jetzt). Bei gleicher
   Spezifitaet (0,1,0) gewinnt die spaeter deklarierte Regel — also unsere.

   Stufung-Mapping (Tailwind-Step -> Token):
     50, 100         -> color-mix mit --accent (sehr helle Pastell-BGs)
     200, 300, 400   -> --accent-mute (mittel-helle Backgrounds)
     500             -> --accent (Default-Akzent)
     600, 700        -> --accent-strong (Hover-/Active-State)

   Wenn eine Gemeinde nur --accent + --accent-strong setzt, ziehen ALLE
   Stufen automatisch mit (color-mix berechnet die hellen Varianten).
   ============================================================================ */

/* Background — bg-accent-* */
.bg-accent-50          { background-color: color-mix(in srgb, var(--accent) 8%,  white); }
.bg-accent-100         { background-color: color-mix(in srgb, var(--accent) 18%, white); }
.bg-accent-500         { background-color: var(--accent); }
.bg-accent-600         { background-color: var(--accent-strong); }
.bg-accent-700         { background-color: color-mix(in srgb, var(--accent-strong) 88%, black); }

/* Text — text-accent-* */
.text-accent-500       { color: var(--accent); }
.text-accent-600       { color: var(--accent-strong); }
.text-accent-700       { color: var(--accent-strong); }
.text-accent-800       { color: color-mix(in srgb, var(--accent-strong) 80%, black); }

/* Border — border-accent-* */
.border-accent-200     { border-color: var(--accent-mute); }
.border-accent-300     { border-color: var(--accent-mute); }
.border-accent-500     { border-color: var(--accent); }
.border-accent-600     { border-color: var(--accent-strong); }

/* Hover-Varianten — gleiche Stufung, aber mit :hover */
.hover\:bg-accent-50:hover       { background-color: color-mix(in srgb, var(--accent) 8%,  white); }
.hover\:bg-accent-600:hover      { background-color: var(--accent-strong); }
.hover\:bg-accent-700:hover      { background-color: color-mix(in srgb, var(--accent-strong) 88%, black); }
.hover\:text-accent-500:hover    { color: var(--accent); }
.hover\:text-accent-600:hover    { color: var(--accent-strong); }
.hover\:text-accent-700:hover    { color: var(--accent-strong); }
.hover\:border-accent-200:hover  { border-color: var(--accent-mute); }
.hover\:border-accent-300:hover  { border-color: var(--accent-mute); }

/* Focus-Ring + Focus-Border — Form-Inputs (Tailwind nutzt --tw-ring-color
   als CSS-Variable, daher direkt setzen). */
.focus\:ring-accent-500:focus    { --tw-ring-color: var(--accent); }
.focus\:border-accent-500:focus  { border-color: var(--accent); }

.nav-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* Horizontaler Abstand zu abgerundeten Bildschirmkanten (iOS + Android).
     Mindestens 17px (auch auf iPhone Portrait wo safe-area-inset = 0 meldet),
     mehr wenn das Geraet eine groessere Safe-Area meldet. */
  padding-left: max(17px, env(safe-area-inset-left));
  padding-right: max(17px, env(safe-area-inset-right));
  /* Safe-Area-Bottom * 0.4: auf iPhone Face-ID-Modellen ~14px Polster
     ueber dem Home-Indicator-Pill. Android meldet hier 0 -> keine Aenderung. */
  padding-bottom: calc(env(safe-area-inset-bottom) * 0.4);
}

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Gemeindename im Header-Prefix hervorheben. JSON liefert z.B.
   "Stadt <b>Pfarrkirchen</b>" — das <b> wird hier schwarz dargestellt,
   waehrend der Rest der Zeile grau bleibt. */
header p b { color: #000; font-weight: 600; }

/* User-Agent [hidden] wird von Tailwinds .flex / .grid / .block-Utilities
   ueberschrieben — deshalb hier explizit mit !important erzwingen.
   Filter-JS setzt element.hidden = true auf versteckten Items. */
[hidden] { display: none !important; }

/* ---- Fullscreen-Overlays (Suche / Inbox) ---- */
.overlay-panel {
  position: fixed; inset: 0; z-index: 90;
  background: white;
  display: flex; flex-direction: column;
  transform: translateY(12px);
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.overlay-panel.open { transform: translateY(0); opacity: 1; }

/* Inbox-Variante: nicht fullscreen, sondern 80% Breite rechts angedockt
   wie ein klassisches Notification-Panel. Schatten zur visuellen Abgrenzung. */
#overlay-inbox.overlay-panel {
  left: auto;
  right: 0;
  width: 80vw;
  max-width: 480px;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}

/* Overlay-Variante, die ueber der Bottom-Nav endet, damit die Nav
   sichtbar und bedienbar bleibt (z.B. Menue per "Mehr"-Tab schliessen).
   z-index unter .nav-fixed (50), damit die Nav-Buttons obenauf liegen.
   bottom = Nav-Content-Hoehe (3.5rem) + halbes Safe-Area-Inset (vgl. .nav-fixed). */
.overlay-panel.above-nav {
  bottom: calc(3.5rem + env(safe-area-inset-bottom) * 0.4);
  z-index: 40;
}
.overlay-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  position: sticky; top: 0;
  background: white; z-index: 1;
}
.overlay-body { flex: 1; overflow-y: auto; }

/* ---- Toggle-Switch (.gem-toggle) ----
   Eigene CSS-Implementierung statt Tailwind peer-checked:-Variants — der
   Tailwind-Build im Repo enthaelt diese Variants nicht (peer-checked: kommt
   beim Conditional-Rebuild offenbar nicht durch), deshalb fielen Subscriptions-
   Toggles visuell stumm aus. Markup:
     <label class="gem-toggle [is-locked]">
       <input type="checkbox" class="gem-toggle__input" [checked] [disabled]>
       <span class="gem-toggle__track"></span>
       <span class="gem-toggle__knob"></span>
     </label>
   Drei sichtbare Zustaende ueber den input:
     :checked         -> orange Track + Knob nach rechts
     :indeterminate   -> mattes Orange + Knob in der Mitte (Master-Mixed)
     is-locked        -> ausgegraut, Track in mattem Orange, Knob rechts
*/
.gem-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.gem-toggle__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gem-toggle__track {
  display: inline-block;
  width: 2.5rem; height: 1.25rem;
  background: var(--surface-toggle-off);
  border-radius: var(--radius-pill);
  transition: background-color 0.15s;
}
.gem-toggle__knob {
  position: absolute;
  left: 0.125rem; top: 0.125rem;
  width: 1rem; height: 1rem;
  background: #fff;
  border-radius: var(--radius-pill);
  pointer-events: none;
  transition: transform 0.15s;
}
.gem-toggle__input:checked ~ .gem-toggle__track   { background: var(--accent); }
.gem-toggle__input:checked ~ .gem-toggle__knob    { transform: translateX(1.25rem); }
.gem-toggle__input:indeterminate ~ .gem-toggle__track { background: var(--accent-mute); }
.gem-toggle__input:indeterminate ~ .gem-toggle__knob  { transform: translateX(0.625rem); }
.gem-toggle.is-locked { cursor: not-allowed; opacity: 0.65; }
.gem-toggle.is-locked .gem-toggle__track { background: var(--accent-mute); }
.gem-toggle.is-locked .gem-toggle__knob  { transform: translateX(1.25rem); }
.gem-toggle__input:focus-visible ~ .gem-toggle__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Status-Farben fuer Oeffnungszeiten / Verfuegbarkeit / etc. ----
   Werden von Templates via class="status-{state}" bzw. "status-dot-{state}"
   angewendet. Pro Gemeinde in assets/communities/<gemeinde>/main.css
   ueberschreibbar. */
.status-open      { color: var(--status-open); }
.status-closed    { color: var(--status-closed); }
.status-always    { color: var(--status-open); }
.status-info      { color: var(--status-info); }
.status-warning   { color: var(--status-warning); }

.status-dot-open      { background-color: var(--status-open); }
.status-dot-closed    { background-color: var(--status-closed); }
.status-dot-always    { background-color: var(--status-open); }
.status-dot-info      { background-color: var(--status-info); }
.status-dot-warning   { background-color: var(--status-warning); }

/* ---- Wichtig-Box Farbschema (aus --waste-color abgeleitet) ----
   Home-Banner faerbt sich aus der CSS-Variable --waste-color, die das
   Template per inline-style setzt (Hex aus DB). Pastell-Varianten
   (Banner-BG, Border, Icon-BG, Label-Color, Arrow) entstehen per
   color-mix(). Fehlt die Variable, wird Orange als Default verwendet. */

.wichtig-box {
  /* Default = Akzent. Templates koennen pro Banner ueber inline-style
     "--waste-color: #xxx" einen anderen Hex setzen (waste-type-Farbe). */
  --waste-color: var(--accent-strong);
  background-color: color-mix(in srgb, var(--waste-color) 10%, white);
  border: 1px solid color-mix(in srgb, var(--waste-color) 22%, white);
}
.wichtig-box .wichtig-icon  {
  background-color: color-mix(in srgb, var(--waste-color) 28%, white);
  color: color-mix(in srgb, var(--waste-color) 85%, black);
}
.wichtig-box .wichtig-label { color: color-mix(in srgb, var(--waste-color) 80%, black); }
.wichtig-box .wichtig-arrow { color: color-mix(in srgb, var(--waste-color) 55%, white); }

/* ---- Umfrage-Balken Fade-In von links ---- */
@keyframes poll-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.poll-bar {
  transform-origin: left center;
  animation: poll-bar-grow 700ms cubic-bezier(.22,.61,.36,1);
}
.poll-bar.poll-bar--no-anim { animation: none; }

/* ---- Polyline-Endpunkte auf Leaflet-Karten ----
   WICHTIG: Map-Pins werden vom Backend pro Track gesteuert (items[*].color
   im tracks.json — Redaktion setzt die Farbe pro Wanderweg/Route). Wenn
   das JSON eine Farbe liefert, uebersteuert map.js diese Default-CSS-Regel
   inline. Diese Regel hier greift NUR als Fallback wenn die JSON-color
   fehlt. Daher absichtlich NICHT an --accent gekoppelt — sonst wuerde
   ein Gemeinde-Theme-Override die fachlich zugeordnete Track-Farbe
   verfaelschen. Wenn du die Default-Pin-Farbe global aendern willst,
   hier den Hex anpassen, NICHT die Theme-Tokens. */
.gem-map-endpoint {
  width: 26px; height: 26px;
  background: #ea580c;
  color: #ffffff;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 13px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

/* ---- Lightbox (Galerie-Viewer) ---- */
.gem-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center; justify-content: center;
  user-select: none;
}
.gem-lightbox.open { display: flex; }
.gem-lightbox-stage {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.gem-lightbox-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  transition: transform 0.15s ease-out;
  transform-origin: center center;
  touch-action: none;
  cursor: zoom-in;
}
.gem-lightbox-close,
.gem-lightbox-prev,
.gem-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.12);
  color: white; border: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 101;
}
.gem-lightbox-close { top: 12px; right: 12px; }
.gem-lightbox-prev  { left: 8px; top: 50%; transform: translateY(-50%); }
.gem-lightbox-next  { right: 8px; top: 50%; transform: translateY(-50%); }
.gem-lightbox-counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  color: white; font-size: 13px; font-family: Inter, system-ui, sans-serif;
  background: rgba(255,255,255,0.12);
  padding: 4px 10px;
}

/* ---- Wichtige News/Alerts ---- */
.wichtig-box.alert-important          { background-color: #fef2f2; border-color: #fecaca; }
.wichtig-box.alert-important .wichtig-icon  { background-color: #fecaca; color: #991b1b; }
.wichtig-box.alert-important .wichtig-label { color: #dc2626; }
.wichtig-box.alert-important .wichtig-arrow { color: #fca5a5; }

/* ---- POI: Karten-Marker + Listen-Item Highlight ----
   .poi-marker = Leaflet divIcon-Wrapper aus map.js (poiIcon()).
   .is-active wird vom Marker-Click-Handler bzw. Listen-Item-Klick gesetzt:
   Skaliert den Pin etwas, legt einen Akzent-Ring darum und einen
   weicheren Drop-Shadow drunter. Auf der Liste markiert .is-active die
   zuletzt angeklickte/fokussierte Row mit Akzent-Border + leichtem Bg.
   Beides nutzt CSS-Transition damit der Zustandswechsel sanft kommt. */
.poi-marker > span {
  transition: transform .15s ease, box-shadow .15s ease;
}
.poi-marker.is-active > span {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px #f97316, 0 4px 10px rgba(0,0,0,.25);
  z-index: 600;
}
.poi-list-item.is-active {
  background-color: #fff7ed;       /* orange-50 */
  border-color: #fdba74;           /* orange-300 */
}
