/* ==========================================================================
   halle-crime.de – Fundament für ALLE Seiten
   --------------------------------------------------------------------------
   Bis 2026-08-01 gab es zwei getrennte Designsysteme: die Karte (style.css,
   „Liquid Glass“) und die Inhaltsseiten (pages.css, flache Karten auf blauem
   Balken). Gleiche Klassennamen bedeuteten dort Verschiedenes, Farben und
   Radien drifteten auseinander (Audit-Befund D2). Diese Datei ist ab jetzt
   die EINZIGE Quelle für Tokens und Material; style.css und pages.css
   enthalten nur noch das, was für Karte bzw. Lesetext wirklich verschieden
   ist.

   Materialstand: „Liquid Glass“ in der Fassung von iOS/macOS 27. Gegenüber
   der ersten Fassung (iOS 26) hat Apple 2026 nachgeschärft, und zwar genau
   in die Richtung, die auch das Barrierefreiheits-Audit verlangt hat:
     – stärkere Diffusion des Hintergrunds, dadurch mehr Kontrast im Text
     – dunklere Außenkante, damit sich schwebende Flächen klar abgrenzen
     – sichtbare Lichtkante („Reflexion“) an der Oberkante
     – ruhigere Sättigung, damit Farbe von unten nicht in die Schrift blutet
     – durchgehende Schicht unter Leisten, an denen Inhalt vorbeiscrollt
   Was NICHT übernommen wurde: der Regler zum Abschwächen des Effekts. Im Web
   gibt es dafür bereits eine Systemeinstellung – `prefers-reduced-transparency`
   wird unten respektiert. Ein eigener Regler wäre eine zweite, schlechtere
   Bedienung derselben Sache.

   Grundregel der Aufteilung (wie bei Apple selbst): Glas trägt BEDIENUNG
   (Leisten, Panels, schwebende Hinweise). Lesetext steht auf einer OPAKEN
   Fläche. Absätze durch eine Unschärfe zu lesen kostet genau die Lesbarkeit,
   die iOS 27 zurückholen wollte.
   ========================================================================== */

:root {
  /* Radius-Skala (konzentrisch: innen = außen − Abstand) */
  --r-lg: 16px;   /* schwebende Panels, Header, Sheets, Inhaltskarten */
  --r-md: 12px;   /* Popups, Disclosures, eingebettete Kästen */
  --r-sm: 9px;    /* Buttons, Eingaben, Segmented-Container */
  --r-xs: 6px;    /* Segmente, kleine Flächen */

  /* Typo-Skala */
  --fs-l: 1.0625rem;  /* 17 – Titel, Fließtext auf Leseseiten */
  --fs-m: 0.9375rem;  /* 15 – Inhalt */
  --fs-s: 0.8125rem;  /* 13 – Bedienelemente, Meta */
  --fs-xs: 0.75rem;   /* 12 – Fußnoten (Minimum) */

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Farben */
  --bg: #eef1f4;                         /* Seitengrund der Leseseiten */
  --text: #1c2733;
  --muted: #5a6b7b;
  --accent: #0b6fb8;
  --accent-strong: #0a5f9e;              /* Text auf getönten Akzent-Flächen (AA ≥ 4.5:1) */
  --on-accent: #ffffff;                  /* Schrift AUF Akzentflächen – im Dark Mode dunkel */
  --border: rgba(18, 32, 44, 0.12);
  --fill: rgba(18, 32, 44, 0.06);        /* stille Flächen (Segmented-Grund) */
  --surface: #ffffff;                    /* opake Flächen: Lesekarten, Panelsinhalte */

  /* Glas-Material (iOS-27-Fassung) */
  --glass-bg: rgba(249, 251, 253, 0.86);
  --glass-bg-strong: rgba(252, 253, 255, 0.96); /* Popups: Lesbarkeit zuerst */
  --glass-brd: rgba(255, 255, 255, 0.65);
  --glass-edge: rgba(12, 30, 46, 0.22);
  --glass-spec: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --glass-blur: saturate(1.5) blur(22px);
  --glass-opaque: #f5f7f9;               /* Ersatz, wenn kein Glas möglich/gewollt */

  --shadow-float: 0 12px 34px rgba(8, 22, 36, 0.16), 0 1px 2px rgba(8, 22, 36, 0.10);
  --shadow-raise: 0 1px 4px rgba(8, 22, 36, 0.18);
  --shadow-card: 0 1px 3px rgba(12, 30, 46, 0.06);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
}

/* Sichtbarer Fokus für Tastatur-Bedienung – auf jeder Seite gleich. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* --- Das Glas ------------------------------------------------------------
   Eine Definition für jede schwebende Fläche, egal auf welcher Seite.
   Reihenfolge der Schatten: Außenkante, Lichtkante, Schlagschatten. */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 0 0 0.5px var(--glass-edge), var(--glass-spec), var(--shadow-float);
}
/* Ohne backdrop-filter (alte Browser) oder bei reduzierter Transparenz: opak.
   Die Lichtkante entfällt dann – sie ergibt ohne Durchsicht keinen Sinn. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: var(--glass-opaque);
    box-shadow: 0 0 0 0.5px var(--glass-edge), var(--shadow-float);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glass {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: var(--glass-opaque);
    box-shadow: 0 0 0 0.5px var(--glass-edge), var(--shadow-float);
  }
}

/* --- Sprunglink ----------------------------------------------------------
   Nur bei Fokus sichtbar – für die Maus unsichtbar, für die Tastatur der
   erste Halt. Bewusst ohne transition: der Link soll beim Tabben sofort
   dastehen, nicht eingeblendet werden. */
.skip-link {
  position: absolute; left: 10px; top: -64px; z-index: 2000;
  background: var(--surface); color: var(--accent);
  padding: 10px 16px; border-radius: 0 0 var(--r-md) var(--r-md);
  border: 1px solid var(--border); border-top: 0;
  font-size: var(--fs-s); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* --- Segmented Control ---------------------------------------------------
   Eine Bedienvokabel für „genau eine Auswahl aus wenigen“. Vorher gab es
   .chip zweimal mit verschiedener Bedeutung: auf der Karte als Segment, auf
   der Analysen-Seite als eigenständiger Knopf mit Rahmen. Jetzt beides hier.
   .chips.wrap für Gruppen, die nicht in eine Zeile passen. */
.chips {
  display: flex; gap: 2px; padding: 3px;
  background: var(--fill); border-radius: var(--r-sm);
}
.chips.wrap { flex-wrap: wrap; }
.chip {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent;
  color: var(--muted); font-family: inherit; font-size: var(--fs-s);
  font-weight: 600; min-height: 34px; padding: 0 4px;
  border-radius: var(--r-xs); cursor: pointer; white-space: nowrap;
}
.chips.wrap .chip { flex: 0 1 auto; padding: 0 12px; }
.chip:hover { color: var(--text); }
.chip.active {
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-raise);
}

/* --- Touch-Geräte: Klickziele ≥ 44 px (HIG) --- */
@media (pointer: coarse) {
  .chip { min-height: 44px; }
}

/* --- Dark Mode -----------------------------------------------------------
   Ein Satz Werte für alle Seiten. Der aufgehellte Akzent trägt keinen weißen
   Text mehr (nur 2,7:1) – darum --on-accent hier dunkel: 7,2:1. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181c;
    --text: #e7eaed;
    --muted: #9aa6b1;
    --accent: #58a9e8;
    --accent-strong: #58a9e8;   /* auf dunklem Tint bereits ≥ 4.5:1 */
    --on-accent: #0a1722;
    --border: rgba(235, 242, 248, 0.14);
    --fill: rgba(235, 242, 248, 0.08);
    --surface: #232b33;

    --glass-bg: rgba(18, 23, 29, 0.82);
    --glass-bg-strong: rgba(22, 28, 34, 0.96);
    --glass-brd: rgba(255, 255, 255, 0.13);
    --glass-edge: rgba(0, 0, 0, 0.62);
    --glass-spec: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --glass-opaque: #171d23;

    --shadow-float: 0 12px 36px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-raise: 0 1px 4px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .chip.active { background: #35404b; color: #fff; }
}