/* =========================================================================
   Sprachclub Design-System · Grundbausteine (AP-30)
   Setzt tokens.css voraus. Klassen mit Praefix .ds-, BEM-artig
   (.ds-btn--primaer). Keine Abhaengigkeit von JavaScript oder Framework:
   Angular-Komponenten verwenden spaeter dieselben Klassen.
   Mobil zuerst; Tippflaechen mindestens --ds-ziel-groesse.
   ========================================================================= */

.ds-seite {
  margin: 0;
  background: var(--ds-hintergrund);
  color: var(--ds-text);
  font-family: var(--ds-schrift);
  font-size: var(--ds-fs-text);
  line-height: var(--ds-zeilenhoehe);
  -webkit-text-size-adjust: 100%;
}

:where(.ds-seite) h1, .ds-h1 { font-size: var(--ds-fs-h1); font-weight: var(--ds-gewicht-fett); line-height: 1.15; margin: 0 0 var(--ds-abstand-4); }
:where(.ds-seite) h2, .ds-h2 { font-size: var(--ds-fs-h2); font-weight: var(--ds-gewicht-fett); line-height: 1.2; margin: 0 0 var(--ds-abstand-3); }
:where(.ds-seite) h3, .ds-h3 { font-size: var(--ds-fs-h3); font-weight: var(--ds-gewicht-halbfett); margin: 0 0 var(--ds-abstand-2); }
.ds-leise { color: var(--ds-text-leise); }
.ds-klein { font-size: var(--ds-fs-klein); }
/* Links im Text - nicht Links, die als Schaltflaeche gestaltet sind (.ds-btn).
   :where() ohne Gewicht (AP-60): Grundregeln fuer Ueberschriften und Links sollen
   jede Komponentenklasse verlieren, statt sie zu uebersteuern. */
:where(.ds-seite a:not(.ds-btn)), .ds-link { color: var(--ds-link); text-underline-offset: 2px; }

.ds-container { width: 100%; max-width: var(--ds-breite); margin: 0 auto; padding: 0 var(--ds-abstand-4); box-sizing: border-box; }
.ds-stapel > * + * { margin-top: var(--ds-abstand-4); }
.ds-reihe { display: flex; flex-wrap: wrap; gap: var(--ds-abstand-3); align-items: center; }

/* Sichtbarer Fokus fuer alle Bausteine (nur Tastatur) */
.ds-btn:focus-visible, .ds-eingabe:focus-visible, .ds-auswahl:focus-visible,
.ds-textfeld:focus-visible, :where(.ds-seite a:not(.ds-btn)):focus-visible, .ds-link:focus-visible {
  outline: none;
  box-shadow: var(--ds-fokus);
}

/* ---------------- Schaltflaeche ---------------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-abstand-2);
  min-height: var(--ds-ziel-groesse); padding: 0 var(--ds-abstand-5);
  border: 2px solid transparent; border-radius: var(--ds-rund-pille);
  font: inherit; font-weight: var(--ds-gewicht-halbfett); line-height: 1.2;
  cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s;
}
.ds-btn--primaer { background: var(--ds-primaer); color: var(--ds-primaer-text); }
.ds-btn--primaer:hover { background: var(--ds-navy-weich); }
.ds-btn--akzent { background: var(--ds-akzent); color: var(--ds-akzent-text); }
.ds-btn--akzent:hover { background: var(--ds-gelb-stark); }
.ds-btn--sekundaer { background: var(--ds-flaeche); color: var(--ds-text); border-color: var(--ds-linie-stark); }
.ds-btn--sekundaer:hover { border-color: var(--ds-navy); }
.ds-btn--leise { background: transparent; color: var(--ds-text); }
.ds-btn--leise:hover { background: var(--ds-gelb-hell); }
.ds-btn--gefahr { background: var(--ds-flaeche); color: var(--ds-fehler); border-color: currentColor; }
.ds-btn--gefahr:hover { background: var(--ds-fehler-flaeche); }
.ds-btn--klein { min-height: 36px; padding: 0 var(--ds-abstand-4); font-size: var(--ds-fs-klein); }
.ds-btn--breit { width: 100%; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------------- Karte ---------------- */
.ds-karte {
  background: var(--ds-flaeche); border: 1px solid var(--ds-linie);
  border-radius: var(--ds-rund-gross); box-shadow: var(--ds-schatten-1);
  padding: var(--ds-abstand-4);
}
.ds-karte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-abstand-3); margin-bottom: var(--ds-abstand-3); }
.ds-karte__fuss { display: flex; flex-wrap: wrap; gap: var(--ds-abstand-2); margin-top: var(--ds-abstand-4); }
@media (min-width: 640px) { .ds-karte { padding: var(--ds-abstand-5); } }

/* ---------------- Formularfeld ---------------- */
.ds-feld { display: grid; gap: var(--ds-abstand-1); margin-bottom: var(--ds-abstand-4); }
.ds-feld__label { font-weight: var(--ds-gewicht-halbfett); }
.ds-feld__hinweis { font-size: var(--ds-fs-klein); color: var(--ds-text-leise); }
.ds-feld__fehler { font-size: var(--ds-fs-klein); color: var(--ds-fehler); font-weight: var(--ds-gewicht-halbfett); }
.ds-eingabe, .ds-auswahl, .ds-textfeld {
  width: 100%; box-sizing: border-box; min-height: var(--ds-ziel-groesse);
  padding: var(--ds-abstand-2) var(--ds-abstand-3);
  border: 1px solid var(--ds-linie-stark); border-radius: var(--ds-rund);
  background: var(--ds-flaeche); color: var(--ds-text);
  font: inherit; font-size: var(--ds-fs-text); /* 16px: kein Zoom auf iOS */
}
.ds-textfeld { min-height: 6em; resize: vertical; }
.ds-feld--fehler .ds-eingabe, .ds-feld--fehler .ds-auswahl, .ds-feld--fehler .ds-textfeld { border-color: var(--ds-fehler); }
.ds-auswahlfeld { display: flex; align-items: flex-start; gap: var(--ds-abstand-2); min-height: var(--ds-ziel-groesse); cursor: pointer; }
.ds-auswahlfeld input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ds-navy); }

/* ---------------- Dialog ---------------- */
.ds-dialog {
  width: min(560px, calc(100vw - 2 * var(--ds-abstand-4))); max-height: calc(100dvh - 2 * var(--ds-abstand-4));
  padding: 0; border: 0; border-radius: var(--ds-rund-gross); box-shadow: var(--ds-schatten-3);
  background: var(--ds-flaeche); color: var(--ds-text);
}
.ds-dialog[open] { display: flex; flex-direction: column; } /* damit nur der Inhalt scrollt, Kopf und Fuss bleiben stehen */
.ds-dialog::backdrop { background: rgba(19, 42, 55, 0.45); }
.ds-dialog__kopf { display: flex; justify-content: space-between; align-items: center; padding: var(--ds-abstand-4) var(--ds-abstand-5); border-bottom: 1px solid var(--ds-linie); }
.ds-dialog__inhalt { padding: var(--ds-abstand-5); overflow-y: auto; }
.ds-dialog__fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-abstand-2); padding: var(--ds-abstand-4) var(--ds-abstand-5); border-top: 1px solid var(--ds-linie); }

/* ---------------- Tabelle ---------------- */
.ds-tabelle-rahmen { overflow-x: auto; border: 1px solid var(--ds-linie); border-radius: var(--ds-rund); background: var(--ds-flaeche); }
.ds-tabelle { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-text); }
.ds-tabelle th, .ds-tabelle td { padding: var(--ds-abstand-3); text-align: left; border-bottom: 1px solid var(--ds-linie); vertical-align: top; }
.ds-tabelle th { font-size: var(--ds-fs-klein); font-weight: var(--ds-gewicht-halbfett); color: var(--ds-text-leise); background: var(--ds-flaeche-weich); }
.ds-tabelle tr:last-child td { border-bottom: 0; }
.ds-tabelle .ds-zahl { text-align: right; font-variant-numeric: tabular-nums; }
/* Mobil: Zeilen als Karten, Spaltenname aus data-label */
@media (max-width: 599px) {
  .ds-tabelle--stapelnd thead { display: none; }
  .ds-tabelle--stapelnd tr { display: block; border-bottom: 1px solid var(--ds-linie); padding: var(--ds-abstand-2) 0; }
  .ds-tabelle--stapelnd td { display: flex; justify-content: space-between; gap: var(--ds-abstand-3); border: 0; padding: var(--ds-abstand-1) var(--ds-abstand-3); }
  .ds-tabelle--stapelnd td::before { content: attr(data-label); color: var(--ds-text-leise); font-size: var(--ds-fs-klein); }
}

/* ---------------- Hinweis ---------------- */
.ds-hinweis {
  display: flex; gap: var(--ds-abstand-3); align-items: flex-start;
  padding: var(--ds-abstand-3) var(--ds-abstand-4); border-radius: var(--ds-rund);
  border-left: 4px solid currentColor; background: var(--ds-info-flaeche); color: var(--ds-info);
}
.ds-hinweis > * { color: var(--ds-text); }
.ds-hinweis p { margin: 0; }
.ds-hinweis p + p { margin-top: var(--ds-abstand-1); }
.ds-hinweis__titel { font-weight: var(--ds-gewicht-halbfett); color: inherit; }
.ds-hinweis--erfolg { background: var(--ds-erfolg-flaeche); color: var(--ds-erfolg); }
.ds-hinweis--warnung { background: var(--ds-warnung-flaeche); color: var(--ds-warnung); }
.ds-hinweis--fehler { background: var(--ds-fehler-flaeche); color: var(--ds-fehler); }

/* ---------------- Abzeichen ---------------- */
.ds-abzeichen { display: inline-block; padding: 2px var(--ds-abstand-2); border-radius: var(--ds-rund-pille); font-size: var(--ds-fs-klein); font-weight: var(--ds-gewicht-halbfett); background: var(--ds-gelb-hell); color: var(--ds-text); }
.ds-abzeichen--erfolg { background: var(--ds-erfolg-flaeche); color: var(--ds-erfolg); }
.ds-abzeichen--warnung { background: var(--ds-warnung-flaeche); color: var(--ds-warnung); }
.ds-abzeichen--fehler { background: var(--ds-fehler-flaeche); color: var(--ds-fehler); }

@media (prefers-reduced-motion: reduce) { .ds-btn { transition: none; } }