/* Gemeinsame Gestaltungswerte der fieldworksdiary-Dienste.
   Diese Datei enthält ausschließlich Variablen — kein Selektor hier
   verändert die Darstellung. Wer Komponenten will, bindet base.css dazu.

   Alle Textfarben erreichen 7:1 gegen --bg UND --card (WCAG 2.2, SC 1.4.6).
   Die Dienste werden im Gelände auf Handydisplays bei Tageslicht gelesen;
   die 4.5:1 der Stufe AA reichen dafür erfahrungsgemäß nicht.
   contrast_test.go rechnet jeden Wert im Build nach. */

:root {
  /* Sagt dem Browser, dass beide Themen unterstützt werden: Formularrahmen,
     Bildlaufleisten und sonstige native Vorgaben folgen damit dem Thema
     statt stur hell zu bleiben. Ohne diese Zeile bleiben außerdem
     Browser-Vorgabefarben für Links im dunklen Thema hell — unbesucht
     #0000EE, nur 1.90:1 gegen --bg, besucht #551A8B, 1.62:1. base.css
     setzt inzwischen eine eigene a-Regel (siehe dort), color-scheme bleibt
     trotzdem gesetzt, weil auch andere native Vorgaben davon profitieren. */
  color-scheme: light dark;

  /* Flächen */
  --bg: #f8fafc;
  --card: #ffffff;

  /* Text */
  --text: #1e293b;
  --text-muted: #475569;
  /* Gleich dem gedämpften Text: ein gesperrtes Bedienelement darf nicht
     durch schwachen Kontrast erkennbar gemacht werden, sondern durch
     aria-disabled, Mauszeiger und fehlende Reaktion. */
  --text-disabled: #475569;

  /* Akzent — die Markenfarbe stammt aus der iOS-App (fieldworksdiary-ng),
     die Grün als Markenfarbe führt; Web und App sollen zusammenpassen.
     iOS setzt die Markenfarbe als FLÄCHE (Knopf, Kopfbereich) mit weißer
     Schrift, das Web nutzt sie zusätzlich als TEXTFARBE (Link, ausgewählter
     Reiter). Ein einziger Wert kann beide Rollen nicht tragen: das helle
     Markengrün, das im dunklen Thema als Text lesbar wäre (#6ECB86), trägt
     weiße Schrift nur mit 1.99:1 — weit unter den geforderten 7:1. Deshalb
     zwei Token mit getrennter Rolle:
       --accent      Fläche. Dunkel genug für weiße Schrift, deshalb in
                      BEIDEM Thema derselbe Wert — es gibt keine "hellere"
                      Markenfarbe, die als Fläche taugt.
       --accent-text Textfarbe. Themenabhängig wie jede andere Textfarbe.
     Die iOS-Werte selbst erfüllen die 7:1-Zusage dieses Moduls nicht;
     --accent und --accent-hover sind deshalb minimal nachgezogene Werte
     (die iOS-App übernimmt sie parallel), --accent-text im dunklen Thema
     ist ein eigener, vom Markenwert leicht abgesetzter Ton. */
  --accent: #186029;
  --accent-on: #ffffff;
  --accent-text: #186029;
  --accent-hover: #124a1f;

  /* Status */
  /* Kein eigenes --success: Markengrün (135,5° im HSL-Farbkreis) und das
     frühere Erfolgsgrün (141,7°) liegen nur 6° auseinander — nebeneinander
     nicht unterscheidbar. In einem grünen System IST Erfolg die
     Markenfarbe: --accent-text steht überall dort, wo zuvor --success
     stand (siehe .badge-success in base.css, das den Klassennamen behält,
     aber jetzt --accent-text zeichnet). */
  /* --info ist das vormalige Markenblau (#1e40af) — mit dem Wechsel der
     Markenfarbe auf Grün frei geworden und nimmt hier dieselbe Rolle ein,
     die systemBlue in der iOS-App für wertungsfreie Hinweise trägt: eine
     Aussage, kein Urteil, anders als --warning oder --error. */
  --info: #1e40af;
  --error: #991b1b;
  --warning: #93390e;

  /* Linien. --border ist dekorativ und darf zart bleiben; --control-line
     begrenzt Bedienelemente und macht sie überhaupt erst erkennbar.
     WCAG 1.4.11 fordert nur für Letztere einen Kontrast (>= 3:1) —
     dekorative Trennlinien sind ausdrücklich ausgenommen. Getrennte
     Tokens, weil ein gemeinsamer Wert entweder die Linien zu hart oder
     die Bedienelemente zu schwach macht. */
  --border: #e2e8f0;
  --control-line: #767676;

  /* Form */
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* Schrift */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", Monaco, ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --card: #1e293b;

    --text: #f1f5f9;
    --text-muted: #b4c0ce;
    --text-disabled: #b4c0ce;

    /* --accent, --accent-on und --accent-hover bleiben unverändert: die
       Fläche des primären Knopfes ist in beiden Themen derselbe dunkle
       Markenton, siehe Begründung im hellen Thema oben. Nur die TEXTFARBE
       zieht im dunklen Thema nach — --accent-text wird hier heller, sonst
       stünde das dunkle Markengrün als Text auf dunklem Grund (1.91:1). */
    --accent-text: #6ecb86;

    --info: #93c5fd;
    --error: #fca5a5;
    --warning: #fcd34d;

    --border: #334155;
    --control-line: #8695a8;

    /* Auf dunklem Grund trägt ein Schatten nicht: --card steht gegen --bg
       nur bei 1.22:1. Karten heben sich hier über ihren Rand ab, nicht
       über den Schatten — siehe .card in base.css. */
    --shadow: none;
  }
}

/* Reset und Basiskomponenten der fieldworksdiary-Dienste.
   Setzt tokens.css voraus: jede Farbe hier ist eine Variable, kein Wert.
   Aufgenommen ist, was mehr als ein Dienst braucht — Fachliches wie die
   Wetterkarte in Tempus oder die Quellenliste in Ortus bleibt dort. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

.container {
  max-width: 48rem;
  margin-inline: auto;
  padding: 1rem;
}

/* Ohne eigene Regel greift die Browser-Vorgabe #0000EE — im dunklen Thema
   nur 1.90:1 gegen --bg, besucht sogar 1.62:1 (#551A8B). --accent-text
   erreicht in beiden Themen 7:1 gegen --bg und --card (siehe
   tokens_test.go). --accent-text, nicht --accent: ein Link ist Text, keine
   Fläche, und --accent ist als Fläche absichtlich in beiden Themen gleich
   dunkel — als Text auf dunklem Grund gelesen, versagt es (siehe
   tokens.css). Unterstrichen zusätzlich zur Farbe, weil Farbe allein kein
   Unterscheidungsmerkmal sein darf (WCAG 1.4.1). */
a {
  color: var(--accent-text);
  text-decoration: underline;
}

a:visited {
  color: var(--accent-text);
}

/* Sichtbarer Fokus ist Pflicht (WCAG 2.4.7). Der Browser-Vorgabering
   verschwindet auf farbigen Flächen, deshalb ein eigener mit Abstand —
   der Abstand hält ihn auch auf einem Knopf in Akzentfarbe sichtbar.
   --accent-text, weil der Ring eine Linie ist, keine Fläche — dieselbe
   Begründung wie bei a oben. */
:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}

/* --- Text --- */

.muted {
  color: var(--text-muted);
}

/* --- Flächen --- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* Der Rand steht hier immer, nicht nur im dunklen Thema: auf hellem Grund
   trägt der Schatten die Abhebung und der Rand stört nicht, auf dunklem
   ist er die einzige Trennung (--card gegen --bg nur 1.22:1) und
   --shadow ist dort none. Eine Regel für beide Themen statt zweier, die
   auseinanderlaufen können. */

.card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1rem;
}

/* --- Formular --- */

.form-group {
  margin-bottom: 1rem;
}

/* Als Block, nicht inline: sonst klebt die Beschriftung unmittelbar am
   Feld und beide verschmelzen optisch zu einem Wort. */
label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--text);
}

input,
select,
textarea {
  width: 100%;
  /* Ein <select> bemisst sich sonst an seinem längsten Eintrag und sprengt
     bei 200 % Textgröße seine Spalte — das erzeugt waagerechtes Rollen der
     ganzen Seite (WCAG 1.4.4 und 1.4.10). Felder bleiben deshalb an ihren
     Rahmen gebunden, nicht an ihren Inhalt. */
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
  /* Eine Linie, keine Fläche — --accent-text wie beim Fokusring oben. */
  border-color: var(--accent-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

textarea {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  resize: vertical;
  min-height: 10rem;
}

/* tokens.css begründet --text-disabled ausführlich damit, dass ein
   gesperrtes Bedienelement durch aria-disabled, Fläche und Mauszeiger
   kenntlich wird — nicht durch schwachen Kontrast. Diese Regel setzt das
   für Eingabefelder tatsächlich um; ohne sie fällt ein gesperrtes Feld auf
   die Browser-Vorgabe zurück (im dunklen Thema ein heller Kasten in
   dunkler Umgebung). [aria-disabled="true"] ist mit :disabled
   gleichgestellt: beide sagen dasselbe, nur eines davon per HTML-Attribut,
   das auch bei einem <div role="textbox"> oder einem serverseitig
   gerenderten Feld ohne natives disabled greift. */
input:disabled,
select:disabled,
textarea:disabled,
input[aria-disabled="true"],
select[aria-disabled="true"],
textarea[aria-disabled="true"] {
  color: var(--text-disabled);
  background: var(--bg);
  border-color: var(--control-line);
  cursor: not-allowed;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 400;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

/* --- Knöpfe --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px, wo es geht; 24 px sind die harte Untergrenze (WCAG 2.5.8). */
  min-height: 2.75rem;
  padding: 0.75rem 1rem;
  font: inherit;
  font-weight: 500;
  /* --accent-on, nicht --card: --accent ist in beiden Themen dieselbe
     dunkle Fläche (siehe tokens.css) — --card wäre im dunklen Thema
     dunkler Text auf dunkler Fläche. --accent-on ist eigens dafür da. */
  color: var(--accent-on);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
}

.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn:disabled {
  color: var(--text-disabled);
  background: var(--bg);
  border-color: var(--control-line);
  cursor: not-allowed;
}

.btn-secondary {
  color: var(--text);
  background: var(--card);
  border-color: var(--control-line);
}

.btn-secondary:hover {
  background: var(--bg);
  border-color: var(--text-muted);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Reiter --- */

.tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.tab {
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  font: inherit;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"] {
  /* Text und Linie, keine Fläche — --accent-text wie bei a und
     :focus-visible oben. */
  color: var(--accent-text);
  border-bottom-color: var(--accent-text);
}

/* --- Marken --- */

.badge {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  color: var(--text);
  border: 1px solid var(--control-line);
}

/* Der Klassenname bleibt .badge-success — ein Umbenennen bräche die Zusage
   an die Dienste ohne Gewinn. Die Farbe ist jetzt --accent-text: es gibt
   kein eigenes --success mehr (Begründung in tokens.css), in einem grünen
   System ist Erfolg die Markenfarbe. */
.badge-success {
  color: var(--accent-text);
  border-color: var(--accent-text);
}

.badge-info {
  color: var(--info);
  border-color: var(--info);
}

.badge-error {
  color: var(--error);
  border-color: var(--error);
}

.badge-warning {
  color: var(--warning);
  border-color: var(--warning);
}

/* --- Tabellen --- */

/* Eine breite Tabelle rollt in ihrem eigenen Kasten; die Seite selbst darf
   nicht waagerecht rollen (WCAG 1.4.10). */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
}

thead th {
  font-weight: 600;
  color: var(--text-muted);
}

/* --- Zustände --- */

.loading {
  display: none;
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.loading.active {
  display: block;
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  /* Eine Linie, keine Fläche — --accent-text wie bei a und
     :focus-visible oben. */
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 0.5rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error {
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* --warning ist definiert und geprüft, aber ohne diese Regel in keinem
   Dienst nutzbar — jeder der fünf hätte sich sonst seine eigene
   Warnungsbox erfunden, genau die Drift, die dieses Modul auflösen soll. */
.warning {
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* --info wäre sonst derselbe Fehler wie einst bei --warning: geprüft, aber
   ohne diese Regel in keinem Dienst nutzbar. */
.info {
  color: var(--info);
  border: 1px solid var(--info);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* --- Nur für Screenreader --- */

/* display:none oder visibility:hidden wären falsch: sie nehmen das Element
   auch aus dem Accessibility-Baum, die Ansage fiele aus. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
}

.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 1;
  padding: 0.5rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--control-line);
  border-radius: var(--radius-sm);
}

/* --- Größere Schirme --- */

@media (min-width: 640px) {
  .container {
    padding: 2rem;
  }

  .card {
    padding: 1.5rem;
  }
}

/* --- Weniger Bewegung --- */

/* Wer das im Betriebssystem einstellt, tut das oft wegen eines
   Gleichgewichtsleidens — eine Drehung genügt, um Übelkeit auszulösen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Seitengerüst --- */

/* Kopf, Inhalt und Fuß teilen sich .container und stehen damit in derselben
   Spur. In Expertus begann der Kopf zuvor am Fensterrand, während der Inhalt
   zentriert war — die Seite wirkte zerrissen. */

.ds-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.ds-kopf h1 {
  margin: 0;
  font-size: 1.5rem;
  /* --accent-text, nicht --accent: seit der Umstellung auf Grün ist
     --accent eine Fläche (dunkel in beiden Themen, für weiße Schrift) und
     als Textfarbe auf dunklem Grund mit 1,91:1 unlesbar. */
  color: var(--accent-text);
}

.ds-kopf-titel p {
  margin: 0.125rem 0 0;
  font-size: 0.875rem;
}

.ds-fuss {
  padding-top: 1rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}

.ds-fuss p {
  margin: 0;
}

.ds-fuss-fassung {
  margin-top: 0.4rem;
  font-variant-numeric: tabular-nums;
}

/* --- Akkordeon --- */

/* <details>/<summary> bringen Auf- und Zuklappen, Tastaturbedienung und die
   Screenreader-Ansage bereits mit — Ortus baut das für Quellen und Optionen
   von Hand nach (role="button", tabindex, aria-expanded, eigener
   Tastatur-Code), Tempus ein drittes Mal fürs Multiselect. Das Modul liefert
   nur noch die Gestaltung, nicht mehr das Verhalten. */
.akkordeon {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  /* Kein box-shadow wie bei .card: ein Akkordeon reiht sich meist mehrfach
     untereinander, ein Schatten pro Zeile wirkte dort unruhig. */
}

.akkordeon > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--bg);
  border-radius: var(--radius);
  /* list-style entfernt das Vorgabedreieck in Firefox, die
     ::-webkit-details-marker-Regel dasselbe in Chrome/Safari — ohne beides
     stünde neben dem Chevron aus dem Symbolpaket ein zweites, browsereigenes
     Dreieck. */
  list-style: none;
}

.akkordeon > summary::-webkit-details-marker {
  display: none;
}

/* Der Fokusring des Browsers greift auf <summary> zuverlässig; eine eigene
   Regel wie bei :focus-visible oben ist hier nicht nötig, weil die
   allgemeine Regel bereits genau dieses Element erfasst — sie ist nicht auf
   bestimmte Elemente eingeschränkt. */

/* Der Chevron dreht sich beim Öffnen. transition ist hier lokal nötig, weil
   erst [open] den Zustand liefert, gegen den animiert wird; die
   @media(prefers-reduced-motion: reduce)-Regel weiter unten (*, *::before,
   *::after) greift bereits auch hier — sie ist ohne Einschränkung auf
   Klassen formuliert und drosselt jede transition-duration im Dokument,
   auch diese. */
.akkordeon[open] > summary .icon {
  transform: rotate(180deg);
  transition: transform 0.2s;
}

.akkordeon-inhalt {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

/* --- Combobox --- */

/* Positionierungsrahmen für Eingabefeld und Vorschlagsliste — die Liste
   hängt sich absolut daran auf, ohne selbst den Textfluss zu verschieben. */
.combobox {
  position: relative;
}

.combobox-liste {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 10;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  list-style: none;
}

.combobox-liste .option {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Der hervorgehobene Zustand hängt an aria-selected, nicht an einer eigenen
   Klasse: Darstellung und Ansage teilen sich damit dieselbe Quelle und
   können nicht auseinanderlaufen — ein Skript, das aria-selected vergisst,
   zeigt auch optisch keine Hervorhebung mehr statt eine unbemerkt falsche. */
.combobox-liste .option[aria-selected="true"] {
  /* --accent-on auf --accent, dieselbe Paarung wie .btn: eine Fläche, die
     weiße Schrift trägt, keine Textfarbe auf einer neutralen Fläche. */
  color: var(--accent-on);
  background: var(--accent);
}

/* --- Koordinateneingabe --- */

/* Zwei Felder nebeneinander ist der Regelfall (Rechtswert/Hochwert oder
   Breite/Länge, siehe yZuerst in js/koordinaten.js): sie bilden zusammen
   EINE Angabe, und nebeneinander sieht man auf einen Blick, ob beide Werte
   plausibel zueinander passen — untereinander wirken sie wie zwei
   unabhängige Felder.

   Absichtlich KEINE @media-Abfrage nach der Fensterbreite: die Bedienform
   kann in einer schmalen Spalte innerhalb eines breiten Fensters stehen
   (eingebettet neben anderen Karten, in einer Seitenleiste, …), und dann
   sagt die Fensterbreite nichts über den tatsächlich verfügbaren Platz
   aus. repeat(auto-fit, minmax(…)) bemisst sich stattdessen am
   verfügbaren Platz DIESES Elements: reicht der Platz für zwei Spalten von
   je mindestens 11rem, stehen die Felder nebeneinander, sonst fällt die
   zweite Spalte automatisch weg — ein Feld mit Beschriftung bei 200 %
   Textgröße braucht mindestens so viel, sonst droht waagerechtes Rollen
   der ganzen Seite (WCAG 1.4.4/1.4.10), genau wie bei input/select/
   textarea oben begründet. Das MGRS-Einzelfeld ist davon nicht betroffen:
   es steht außerhalb von .koord-gitter in einer eigenen .form-group, die
   Umschaltung übernimmt js/koordinaten.js. */
.koord-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
}

/* --- Symbole --- */

/* Ein Symbol bemisst sich an der Schrift daneben, nicht an einer festen
   Pixelzahl: bei 200 % Textgröße wächst es mit (WCAG 1.4.4). */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.2em;
}

/* Im Knopf steht das Symbol neben der Beschriftung. */
.btn .icon {
  margin-right: 0.4em;
}

/* Ein Knopf, der nur ein Symbol trägt, bleibt quadratisch und behält die
   Mindestgröße für Zielflächen. */
.btn-icon {
  width: 2.75rem;
  padding: 0;
}

.btn-icon .icon {
  margin: 0;
}

/* --- Symbolübersicht (Referenzseite) --- */

/* Überschrift je Bedeutungsgruppe — Bedienung, Wetter, Mondphasen,
   Sonnenstände, Messwerte. Kleiner als .card-title, damit die Gruppen
   innerhalb der Karte "Symbole" als Unterteilung erkennbar bleiben, nicht
   als eigene Karte. */
.icon-gruppe-titel {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 1rem 0 0.5rem;
}

.icon-gruppe-titel:first-child {
  margin-top: 0;
}

/* Eine Kachel je Symbol, im Raster. auto-fill statt einer festen
   Spaltenzahl, damit die Übersicht bei 40 Symbolen nicht in eine einzige
   lange Spalte auf schmalen Bildschirmen zerfällt. */
.icon-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.75rem;
  margin: 0 0 0.5rem;
}

.icon-kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.75rem 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.icon-name {
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-align: center;
  word-break: break-word;
}

/* Größer als die Standardgröße (.icon = 1.25em): in der Kachel steht das
   Symbol allein, ohne Fließtext daneben, an dem es sich sonst bemisst —
   und gerade bei den Mondphasen muss die Flächenaufteilung bei
   tatsächlicher Einsatzgröße erkennbar sein. */
.icon-galerie .icon {
  width: 1.75em;
  height: 1.75em;
}