/* studium/css/laenderSprachen.v1.css
   Integrationsschicht für die portierte Sektion "Länder & Sprachen".

   Das Modul-CSS (studium/vendor/laenderSprachen/laenderSprachen.css) bleibt
   bewusst unverändert: es enthält fein austarierte Layout-Korrekturen aus
   vielen Iterationen (Sticky-Kopfzeile, Scroll-Verhalten, Dropdown-Positionen).
   Wer dort Farben ersetzt, riskiert genau diese Korrekturen. Stattdessen liegt
   hier nur, was für dieses Deploy dazukommt:
     1. Einbettung unter der Deploy-Kopfzeile
     2. Dunkelmodus — die Vorlage ist durchgehend auf Hell verdrahtet
   Diese Datei wird NACH dem Modul-CSS geladen. */

/* ── 1. Einbettung ─────────────────────────────────────────────────────── */
/* Die Deploy-Kopfzeile ist position:fixed (aus hskReaderV2.v1.css) und liegt
   damit AUSSERHALB des Textflusses. Ohne eigenen Abstand begann das Modul
   ebenfalls bei 0 und seine eigene, klebende Kopfzeile (z-index 90) legte sich
   über die Deploy-Kopfzeile — „← Start“ war schlicht unsichtbar.
   Deshalb: Modul um die Höhe der Deploy-Kopfzeile nach unten versetzen und
   ebensoviel Höhe abziehen. Die Höhe kommt zur Laufzeit als --ls-chrome-h
   herein (sie bricht auf schmalen Fenstern um); der Rückfallwert entspricht
   der gemessenen einzeiligen Höhe. */
:root { --ls-chrome-h: 48px; }

.ls-host {
  margin-top: var(--ls-chrome-h);
  height: calc(100dvh - var(--ls-chrome-h));
  overflow: hidden;
}
.ls-host .ls-shell { height: calc(100dvh - var(--ls-chrome-h)); max-height: none; }
/* Die Modul-eigene Kopfzeile klebt innerhalb ihres Hosts, nicht am Fenster. */
.ls-host .ls-topbar { top: 0; }

/* `display:flex` in den Modulregeln setzt das hidden-Attribut ausser Kraft
   (eine display-Angabe schlägt den Browser-Standard `[hidden]{display:none}`).
   Das Modul steuert seine Ansichten aber genau über dieses Attribut. Folgen:
   die Schrift-Legende war immer sichtbar, und — gravierender — Weltkarte und
   Länderkarte wurden gleichzeitig untereinander angezeigt, statt einander
   abzulösen. Genau das liess die Navigation widersprüchlich wirken.
   Deshalb hier für alle betroffenen Bausteine wiederherstellen. */
.ls-host [hidden] { display: none !important; }

/* Der Sektionsname steht bereits in der Deploy-Kopfzeile. Die Modul-Kopfzeile
   wiederholte ihn direkt darunter — zwei identische Titel übereinander lesen
   sich wie zwei verschiedene Ebenen. Nur der Pfad (Weltkarte / aktuelles Land)
   bleibt, der trägt echte Information. */
.ls-host .ls-title strong { display: none; }
.ls-host .ls-crumb { font-size: 14px; font-weight: 700; color: var(--v2-fg); }

/* Die Laufzeit-Protokollklappe des Moduls ist ein Entwicklungswerkzeug und im
   Deploy nur Ablenkung. */
.ls-host .ls-debug { display: none; }

/* ── 1. Bedienleiste: umbrechen statt zusammenquetschen ────────────────── */
/* Die Leiste enthält zwei Knöpfe und zwei Auswahlfelder in EINER Flex-Zeile
   ohne Umbruch. Auf schmalen Fenstern schrumpften die Auswahlfelder dadurch
   auf die Breite ihres Pfeils zusammen — sichtbar blieb nur „…“, Land- und
   Sprachauswahl waren praktisch unbenutzbar. */
.ls-host .ls-controls { flex-wrap: wrap; row-gap: 8px; }
.ls-host .ls-dd { min-width: 180px; }
@media (max-width: 900px) {
  .ls-host .ls-topbar { height: auto; align-items: stretch; flex-wrap: wrap; }
  .ls-host .ls-controls { width: 100%; margin-left: 0; }
  /* Zwei Felder nebeneinander, solange das reicht … */
  .ls-host .ls-dd { width: calc(50% - 4px); }
  .ls-host .ls-script-toggle { flex: 1 1 auto; }
}
@media (max-width: 620px) {
  /* … darunter jedes Feld auf eine eigene Zeile, sonst wird es wieder zu eng. */
  .ls-host .ls-dd { width: 100%; }
}

/* ── 1a. Regionen-Zeile nicht unter der Kopfzeile verstecken ───────────── */
/* Die Kopfzeile des Moduls klebt oben (position:sticky). Sobald man in einer
   Länderansicht nach unten scrollt, rutschte die Zeile darunter — die mit dem
   Regionen-Wähler — unter die Kopfzeile und war nur noch halb sichtbar.
   Sie enthält aber ein zentrales Bedienelement, also klebt sie jetzt direkt
   unter der Kopfzeile mit. Deren Höhe wechselt je nach Fensterbreite (sie
   bricht um), deshalb kommt sie zur Laufzeit als --ls-topbar-h herein; der
   Rückfallwert entspricht der einzeiligen Desktop-Höhe. */
/* Beim Anspringen der Länderansicht muss die klebende Kopfzeile freibleiben,
   sonst rutscht die Regionen-Zeile wieder darunter. */
.ls-host .ls-map-panel { scroll-margin-top: var(--ls-topbar-h, 58px); }

.ls-host .ls-country-bar {
  position: sticky;
  top: var(--ls-topbar-h, 58px);
  z-index: 60;
  background: var(--v2-bg2, #fdfaf5);
  border-bottom: 1px solid var(--v2-line, #e3d8c6);
  border-radius: 0 0 8px 8px;
}
[data-theme="dark"] .ls-host .ls-country-bar { background: var(--v2-bg); }

/* ── 1b. Ruhige Infobox beim Überfahren der Karte ──────────────────────── */
/* Beim Bewegen über die Weltkarte schreibt das Modul die Infobox bei jeder
   Mausbewegung neu. Deren Inhalt ist je Land unterschiedlich hoch (keine bis
   acht Sprach-Badges, die verschieden umbrechen). Weil die Box unter der Karte
   im Textfluss liegt, verschob jede Höhenänderung das gesamte Dokument — beim
   Überstreichen "zappelte" die Karte.
   Lösung: die Vorschau bekommt eine feste Höhe, die Grundhöhe ist dieselbe.
   Damit ändert sich beim Überfahren nichts mehr am Layout. Die ausführliche
   Ansicht nach einem Klick (ohne --preview) wächst weiterhin frei. */
.ls-host .ls-info { min-height: 190px; }
.ls-host .ls-info--preview {
  height: 190px;
  min-height: 190px;
  max-height: 190px;
  overflow-y: auto;
  /* Kein Scroll-Ankern: sonst zieht der Browser die Seite nach, wenn sich der
     Inhalt der Box unter dem Zeiger austauscht. */
  overflow-anchor: none;
}
@media (max-width: 760px) {
  .ls-host .ls-info { min-height: 150px; }
  .ls-host .ls-info--preview { height: 150px; min-height: 150px; max-height: 150px; }
}

/* ── 2. Dunkelmodus ────────────────────────────────────────────────────── */
/* Nur Farben, keine Geometrie. Werte aus den Theme-Variablen des Readers,
   damit die Sektion zum Rest des Deploys passt. */
[data-theme="dark"] .ls-shell { background: var(--v2-bg); color: var(--v2-fg); }
[data-theme="dark"] .ls-topbar { background: var(--v2-card); border-bottom-color: var(--v2-line); box-shadow: none; }
[data-theme="dark"] .ls-crumb,
[data-theme="dark"] .ls-muted,
[data-theme="dark"] .ls-loader,
[data-theme="dark"] .ls-info > strong,
[data-theme="dark"] .ls-info-group b,
[data-theme="dark"] .ls-dd-item small,
[data-theme="dark"] .ls-dd-empty,
[data-theme="dark"] .ls-country-bar,
[data-theme="dark"] .ls-pill small { color: var(--v2-fg2); }
[data-theme="dark"] .ls-meta { color: var(--v2-fg); }

[data-theme="dark"] .ls-back,
[data-theme="dark"] .ls-dd-btn,
[data-theme="dark"] .ls-dd-menu,
[data-theme="dark"] .ls-dd-item,
[data-theme="dark"] .ls-pill,
[data-theme="dark"] .ls-badge,
[data-theme="dark"] .ls-script-toggle {
  background: var(--v2-card); border-color: var(--v2-line); color: var(--v2-fg);
}
[data-theme="dark"] .ls-dd-filter {
  background: var(--v2-bg); border-color: var(--v2-line); color: var(--v2-fg);
}
[data-theme="dark"] .ls-dd-item:hover,
[data-theme="dark"] .ls-pill:hover {
  background: var(--v2-accent-s); border-color: var(--v2-accent); color: var(--v2-accent);
}
[data-theme="dark"] .ls-map-box {
  background: var(--v2-card); border-color: var(--v2-line);
}
[data-theme="dark"] .ls-info {
  background: var(--v2-card); border-color: var(--v2-line); box-shadow: none;
}
[data-theme="dark"] .ls-info h4 { color: var(--v2-accent); }
[data-theme="dark"] .ls-error { color: var(--v2-err); }

/* Kartenflächen: heller Grundton würde im Dunkelmodus blenden. Die
   Zustandsfarben (Auswahl, Hover, Schrift-Overlay) bleiben unverändert — sie
   müssen sich in beiden Themes gleich stark abheben. */
[data-theme="dark"] .ls-map-box path,
[data-theme="dark"] .ls-map-box polygon,
[data-theme="dark"] .ls-map-box circle,
[data-theme="dark"] .ls-map-box rect,
[data-theme="dark"] .ls-map-box ellipse {
  fill: #39404f; stroke: #59637a;
}
[data-theme="dark"] .ls-map-box g:hover path,
[data-theme="dark"] .ls-map-box path:hover,
[data-theme="dark"] .ls-map-box polygon:hover { fill: #4d566a; }

/* Die Schrift-Legende bringt einen eigenen weissen Hintergrund mit. */
[data-theme="dark"] .ls-script-legend {
  background: var(--v2-card); border-color: var(--v2-line); box-shadow: none;
}
[data-theme="dark"] .ls-script-legend__btn { color: var(--v2-fg); }
[data-theme="dark"] .ls-hist-chip {
  background: var(--v2-card); border-color: var(--v2-line); color: var(--v2-fg);
}
[data-theme="dark"] .ls-script-toggle--active {
  background: var(--v2-accent); border-color: var(--v2-accent); color: #fff;
}

[data-theme="dark"] .ls-audio-btn {
  background: var(--v2-card); border-color: var(--v2-line); color: var(--v2-fg);
}
[data-theme="dark"] .ls-audio-btn:hover,
[data-theme="dark"] .ls-audio-btn:focus-visible {
  background: var(--v2-accent-s); border-color: var(--v2-accent);
}

/* ── 3. Fokus auf eine Schrift (Aufruf per #script=…) ─────────────────── */
/* Beim Sprung aus dem Schriftenlernen soll genau eine Schrift ins Auge
   fallen; die übrigen 25 Overlay-Farben treten zurück, statt zu konkurrieren. */
.ls-map-box .ls-sc-dim { opacity: .25; }
.ls-script-legend__btn--dim { opacity: .35; }

/* Sprache und Schrift sind zwei verschiedene Ziele — der zweite Knopf tritt
   optisch zurück, damit die Sprache die Hauptaktion bleibt. */
.ls-host .ls-learn-btn--script {
  background: transparent;
  color: var(--v2-accent, #2563eb);
  border: 1px solid currentColor;
  box-shadow: none;
}
.ls-host .ls-learn-btn--script small { opacity: .8; margin-left: .25rem; }

/* ── 4. Nicht lernbare historische Schriften ───────────────────────────── */
/* Chips ohne Lernziel sehen bewusst anders aus als verlinkte — sie sind
   Information, kein Knopf. */
.ls-hist-chip--plain { opacity: .6; cursor: default; text-decoration: none; }

/* ── 5. Geländerelief-Ebene ─────────────────────────────────────────────── */
/* Das Relief-<img> liegt HINTER der SVG (siehe laenderSprachenView.v3.js:
   applyTerrainLayer — DOM-Reihenfolge statt z-index) und wird per object-fit
   genauso "contain" eingepasst wie die SVG per preserveAspectRatio xMidYMid
   meet — beide Seitenverhältnisse stimmen überein, weil das Bild exakt für
   die viewBox der jeweiligen Karte berechnet wurde. */
.ls-host .ls-terrain-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none; user-select: none;
  filter: brightness(1.04);
}
[data-theme="dark"] .ls-host .ls-terrain-img {
  /* Das Relief ist ein helles Graustufenbild; im Dunkelmodus invertiert
     gehalten, sonst leuchtet es wie ein Fremdkörper neben dunklen Kartenflächen. */
  filter: invert(1) brightness(.82) contrast(.92);
}
/* Die Länderflächen müssen halbtransparent werden, damit das Relief darunter
   durchscheint -- fill-opacity wirkt unabhängig von den vielen bestehenden
   `fill:...!important`-Zustandsregeln (Hover/Auswahl/Schrift-Einfärbung),
   deshalb genügt eine einzige zusätzliche Regel statt jede einzeln anzupassen. */
.ls-host.ls-terrain-on .ls-map-box path,
.ls-host.ls-terrain-on .ls-map-box polygon,
.ls-host.ls-terrain-on .ls-map-box circle,
.ls-host.ls-terrain-on .ls-map-box rect,
.ls-host.ls-terrain-on .ls-map-box ellipse {
  fill-opacity: .42;
}
.ls-host.ls-terrain-on .ls-map-box .__selected,
.ls-host.ls-terrain-on .ls-map-box .__hover {
  fill-opacity: .7;
}