/* ============================================================
   Komponente: einstellungen-liste
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → Einstellungen,
   node 13872:16142 („logged in") und 13872:16236 (mit
   Abmelde-Dialog), ausgelesen am 04.09.2026.

   Eine Karte mit Zeilen: links das Label, rechts das
   Bedienelement. Zeilen durch Linien getrennt. In Figma heißt
   sie „Filter Liste" — sie kommt aus dem Filter-Overlay und wird
   hier für die Einstellungen wiederverwendet.

   DIE GRUPPEN-HEADER SIND IN VERSALIEN, und das ist genau der
   Fall, den SKILL.md §8 dafür vorsieht: „UPPERCASE ist reserviert
   für Settings-Gruppen-Header im ‚Mehr'-Bereich und
   Filter-Abschnitts-Label." Sektions-Titel auf Discover-Screens
   nie — hier schon.

   Setzt tokens.css und base.css voraus.

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     45         Zeilenhöhe. Trägt das Touch-Target (§11.2).
     36         Kreis im Umschalter und in der Sprachfahne.
     121 / 83   Breite von Darstellungs-Umschalter und Toggle.
     7          Innenabstand oben/unten am Sprach-Knopf.
     5 / 10     Innenabstand links/rechts am Toggle.
     13 / 17    Mond und Sonne.
     4,5 x 10   Pfeil · 9 x 11 externer Link
   ============================================================ */

/* ------------------------------------------------------------
   Gruppe: Versalien-Header plus Karte
   ------------------------------------------------------------ */

.einstellungen-gruppe {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);                    /* 12 */
  width: 100%;
}

.einstellungen-gruppe__titel {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  color: var(--text-description);
  text-transform: uppercase;
}

/* Die Karte. `ul` vor der Klasse, weil base.css
   `ul[role="list"] { padding: 0 }` setzt und das spezifischer
   ist als eine Klasse allein — sonst fällt das Padding weg
   (dieselbe Falle wie im Inhalte-Overlay). */
ul.einstellungen-liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                    /* 16 */
  width: 100%;
  margin: 0;
  padding: var(--space-md);                /* 16 */
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  list-style: none;
}

/* Die Trennlinie gehört an die Zeile, nicht zwischen die Zeilen:
   so kollabiert sie mit, wenn eine Zeile ausgeblendet wird
   (§22.2b, dieselbe Begründung wie bei den verschachtelten
   Blöcken im Dialog). Nach der letzten Zeile steht keine. */
.einstellungen-liste__zeile:not(:last-child) {
  padding-bottom: var(--space-md);
  border-bottom: var(--outline-default) solid var(--label-outline);
}

.einstellungen-liste__inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  min-height: 45px;                        /* gemessen, siehe Kopf */
  border: 0;
  background: none;
  text-align: left;
  color: var(--text-primary);
}

/* Ist die Zeile ein Button, gibt sie beim Drücken nach. Ist sie
   nur eine Zeile mit einem Bedienelement rechts, nicht. */
button.einstellungen-liste__inhalt {
  cursor: pointer;
}

.einstellungen-liste__texte {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
}

.einstellungen-liste__label {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-title-text);
  line-height: var(--line-height-title-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-small-text-bold);   /* 1 % */
  color: var(--text-primary);
}

.einstellungen-liste__erklaerung {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-extra-small-text);
  line-height: var(--line-height-extra-small-text);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-small-text-bold);
  color: var(--text-description);
}

.einstellungen-liste__pfeil {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 4.5px;                            /* gemessen, siehe Kopf */
  height: 10px;
  color: var(--text-description);
}

/* Der externe Link zeigt, dass die Seite die App verlässt — zwei
   Signale wären besser als eines, aber Figma hat hier nur das
   Icon. Das Ziel benennt zusätzlich das Label. */
.einstellungen-liste__extern {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  width: 9px;                              /* gemessen, siehe Kopf */
  height: 11px;
  color: var(--text-description);
}

/* ------------------------------------------------------------
   DIE ZEILE ZEIGT SICH ÜBER IHREN ICON-BUTTON
   ------------------------------------------------------------
   Die Zeile war ein <button> ohne sichtbare Rückmeldung — beim
   Überfahren wechselte nur die Textfarbe auf text-accent. Das
   ist zweimal falsch: Blau ist mit „aktiv" belegt (§21), und
   ohne Fläche liest sich die Zeile als Text, nicht als Knopf.

   Seit dem 04.09.2026 hat das Design System dafür eine eigene
   Komponente: „Chevron icon Button" (13905:25138), ein
   Icon-Button 45 x 45, in Ruhe ohne Fläche, mit Hover und Press.
   Die Zeile nimmt genau die — statt einer selbst erfundenen
   Fläche über die ganze Zeile.

   DER CHEVRON IST KEIN EIGENER KNOPF. Er sieht aus wie einer,
   aber die ganze Zeile ist der Knopf; ein Button im Button wäre
   ungültiges HTML und würde die Zeile in zwei Tab-Stopps
   zerlegen. Deshalb ist er ein <span> mit dem Aussehen der
   Komponente, und seine Zustände hängen an der Zeile: wer
   irgendwo in der Zeile ist, sieht den Knopf reagieren.
   ------------------------------------------------------------ */

.einstellungen-liste__aktion {
  /* Der Icon-Button bringt 45 x 45, Radius und Rand schon mit.
     Hier fehlt nur, dass er selbst nichts abfängt — er ist Teil
     der Zeile, kein eigenes Ziel. */
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  button.einstellungen-liste__inhalt:hover .einstellungen-liste__aktion {
    background-color: var(--button-icon-button-fill-hover);
    border-color: var(--button-icon-button-outline);
    color: var(--text-primary);
  }
}

button.einstellungen-liste__inhalt:active .einstellungen-liste__aktion {
  background-color: var(--button-icon-button-fill-press);
  border-color: var(--button-icon-button-outline-press);
  box-shadow: inset 0 0 0 var(--outline-default) var(--button-icon-button-outline-press);
  color: var(--text-primary);
}

/* ------------------------------------------------------------
   Bedienelement: Sprach-Auswahl
   ------------------------------------------------------------
   Quelle: Figma „Design System" → Language Dropdown,
   node 1:1213 (zu) und 64:3064 (offen), ausgelesen am
   04.09.2026.

   ------------------------------------------------------------
   DIE FLÄCHE IST INVERTED, NICHT label-fill
   ------------------------------------------------------------
   Die Komponente allein steht auf label-fill. Im SCREEN liegen
   alle drei Bedienelemente aber auf einer Karte, und dort sind
   sie vertieft — label-fill-inverted. Genau das ist die Regel
   „Fläche folgt dem Untergrund" (§5, §6): in Dark ist label-fill
   derselbe Wert wie surface-card, das Element wäre auf der Karte
   unsichtbar.

   Ich hatte das am 04.09.2026 kurzzeitig auf label-fill gezogen,
   weil die Komponente das so zeigt. Falsch: verbindlich ist die
   Instanz im Screen, nicht die Komponente auf dem freien Blatt.
   Von Lisi korrigiert.

   ES SIND SCHALTER, ALSO GIBT ES KEINEN HOVER UND KEIN PRESS.
   Nicht vergessen, sondern so gewollt: ein Schalter zeigt seinen
   Zustand, nicht seine Berührbarkeit. Der Fokus-Ring aus
   base.css bleibt, der ist Pflicht.

   ZU     98 x 45, Polster 10 / 12 / 11 / 4, Fahne 36, dann 8
          Abstand, dann Kürzel und Chevron mit 5 Abstand und 5
          Polster rechts.
   OFFEN  Dieselbe Breite, insgesamt 161 hoch. Die gewählte
          Sprache BLEIBT als erste Zeile stehen und bekommt den
          aktiven Rand mit Glow; darunter die übrigen Sprachen,
          überall 16 Abstand, 4 eingerückt. Radius oben 24,
          unten radius-md, unten 12 Polster.

   DIE LISTE SCHIEBT DIE ZEILE NICHT AUSEINANDER. Sie liegt über
   dem, was darunter kommt (position: absolute) — sonst würde
   sich beim Öffnen die ganze Einstellungsliste bewegen, und die
   Zeile, die man anklicken will, wäre nicht mehr da, wo sie war.
   ------------------------------------------------------------ */

/* Der Platzhalter behält die Höhe der Zeile, egal ob offen. */
.sprach-feld {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 98px;                             /* gemessen, siehe Kopf */
  height: 45px;
}

.sprach-wahl {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: var(--space-md);                    /* 16 */
  width: 98px;
  border-radius: var(--radius-full);
}

/* Offen wird aus der Pille ein Behälter: eigene Fläche, eigener
   Rand, unten weniger rund als oben — so ist es gezeichnet. */
.sprach-wahl[data-offen] {
  background-color: var(--label-fill-inverted);
  border: var(--outline-default) solid var(--label-outline);
  border-radius: 24px 24px var(--radius-md) var(--radius-md);   /* oben gemessen, unten = radius-md */
  padding-bottom: var(--space-sm);         /* 12 */
}

.sprach-wahl__knopf {
  display: flex;
  align-items: center;
  gap: var(--space-xs);                    /*  8 */

  width: 98px;
  height: 45px;
  margin: 0;
  padding: 10px var(--space-sm) 11px var(--space-2xs);   /* 10 / 12 / 11 / 4 */
  border-radius: var(--radius-full);
  background-color: var(--label-fill-inverted);
  border: var(--outline-default) solid var(--label-outline);
  color: var(--text-primary);
  font-family: var(--font-family-inter);
  cursor: pointer;
}

/* Offen trägt die gewählte Zeile den aktiven Rand. Der Rand
   bleibt 1 px breit und wird über einen inneren Schatten auf
   2 px gebracht (§23.6) — sonst verschiebt sich der Inhalt. */
.sprach-wahl[data-offen] .sprach-wahl__knopf {
  border-color: var(--label-outline-active);
  box-shadow:
    0 0 0 1px var(--label-outline-active),
    inset 0 0 0 1px var(--label-outline-active),
    var(--glow-chip);
}

.sprach-wahl__fahne {
  width: 36px;                             /* gemessen, siehe Kopf */
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
}

.sprach-wahl__kuerzel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
}

.sprach-wahl__knopf .sprach-wahl__kuerzel {
  padding-right: 5px;
}

.sprach-wahl__pfeil {
  display: block;
  overflow: visible;
  flex-shrink: 0;
  /* Das Icon ist 4 x 9 und wird gedreht; im Layout belegt es
     danach 9 x 4. Deshalb steht hier die gedrehte Größe und die
     Drehung bezieht sich auf die Mitte. */
  width: 9px;
  height: 4px;
  /* Der Chevron zeigt nach rechts und wird nach unten gedreht —
     so ist es in Figma gebaut (rotate 90), und der Export liefert
     die Geometrie vor der Drehung (AGENTS.md §17). */
  transform: rotate(90deg);
  transition: transform calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

/* Offen zeigt der Chevron nach oben — er sagt, wohin der nächste
   Klick führt (zu). */
.sprach-wahl[data-offen] .sprach-wahl__pfeil {
  transform: rotate(-90deg);
}

ul.sprach-wahl__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);                    /* 16 — wie zwischen Pille und Liste */
  margin: 0;
  padding-left: var(--space-2xs);          /* 4 */
  list-style: none;
}

.sprach-wahl__option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);                    /*  8 */
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  font-family: var(--font-family-inter);
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .sprach-wahl__option:hover .sprach-wahl__kuerzel {
    color: var(--text-accent);
  }
}

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

/* ------------------------------------------------------------
   Bedienelement: Darstellung (Dunkel / Hell)
   ------------------------------------------------------------
   Zwei Zustände in einer Pille: die gewählte Seite ist eine
   gefüllte Pille in text-primary, die andere nur ein Icon. Die
   Beschriftung steht NUR an der gewählten Seite — so ist es in
   Figma. Zwei Signale (Fläche und Text), nicht Farbe allein.
   ------------------------------------------------------------ */

.darstellung-wahl {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;

  width: 121px;                            /* gemessen, siehe Kopf */
  height: 45px;
  padding-left: var(--space-2xs);          /* 4 */
  padding-right: var(--space-sm);          /* 12 */
  border-radius: var(--radius-full);
  background-color: var(--label-fill-inverted);
  border: var(--outline-default) solid var(--label-outline);
  cursor: pointer;
}

.darstellung-wahl__gewaehlt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);                   /* 4 */
  height: 36px;                            /* gemessen, siehe Kopf */
  width: 79px;
  padding-inline: var(--space-xs);
  border-radius: var(--radius-full);
  background-color: var(--text-primary);
  color: var(--text-opposite-background);
  overflow: hidden;
}

.darstellung-wahl__gewaehlt svg {
  display: block;
  overflow: visible;
  width: 13px;                             /* gemessen, siehe Kopf */
  height: 13px;
  flex-shrink: 0;
}

.darstellung-wahl__label {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
}

.darstellung-wahl__aus {
  display: block;
  overflow: visible;
  width: 17px;                             /* gemessen, siehe Kopf */
  height: 17px;
  flex-shrink: 0;
  color: var(--text-primary);
}

/* Im Light Mode wandert die gefüllte Pille nach rechts: dort ist
   „Hell" gewählt. Umgeschaltet über aria-pressed am Knopf. */
.darstellung-wahl[aria-pressed="true"] {
  flex-direction: row-reverse;
  padding-left: var(--space-sm);
  padding-right: var(--space-2xs);
}

/* ------------------------------------------------------------
   Bedienelement: Umschalter (an / aus)
   ------------------------------------------------------------
   Quelle: Figma „Design System" → Toggle on off, node 2948:6513
   (aus) und 9333:10855 (an), ausgelesen am 04.09.2026.

   Track 83 x 45 in label-fill mit 1 px label-outline. Der Kreis
   36 sitzt links (aus) oder rechts (an), beide Male **4 von der
   Kante** — am Component Set nachgemessen (09.09.2026, nach
   Lisis Änderung):
     aus  circle x 4,  y 4,5   ghost-outline, kein Haken
     an   circle x 43, y 4,5   label-text (weiss) mit Haken
   43 ist 83 − 4 − 36; der Weg dazwischen sind also 39.

   DIE 4 SIND JETZT EIN TOKEN. Der Knoten bindet
   `Padding and gaps/space/2xs`, hier also --space-2xs — keine
   gemessene Zahl mehr.

   Zwei frühere Ablesungen sind damit erledigt: „5 links / 10
   rechts" (rechts blieben dadurch 11) und danach 5 / 5.

   Drei Signale, nicht Farbe allein (WCAG 1.4.1): Position,
   Fläche und Haken.
   ------------------------------------------------------------ */

.umschalter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;

  width: 83px;                             /* gemessen, siehe Kopf */
  height: 45px;
  padding-inline: var(--space-2xs);        /* 4 — Token, siehe Kopf */
  border-radius: var(--radius-full);
  /* LABEL-FILL-INVERTED, WEIL DER SCHALTER AUF EINER KARTE SITZT
     (Lisi, 09.09.2026: „label inverted fill war richtig, weil der
     toggle sitzt ja auf card surface").

     Der Knoten im Design System bindet label-fill (#212C3E) —
     dort steht die Komponente aber auf surface-primary. In der
     Einstellungen-Liste liegt sie auf surface-card, und
     label-fill ist derselbe Wert wie die Karte: der Schalter
     verschwände darin. Eine Stufe tiefer, label-fill-inverted,
     ist die Regel „Fläche folgt dem Untergrund" (§5, §6) —
     dieselbe, nach der das Suchfeld auf einer Karte zu
     `Search inverted` wechselt und der Chip sich vertieft.

     Ich hatte das am 09.09.2026 kurzzeitig auf label-fill
     „korrigiert". Das war falsch: der Wert aus der Komponente
     gilt für ihren Untergrund, nicht für jeden. */
  background-color: var(--label-fill-inverted);
  /* DER STRICH ALS INNERER SCHATTEN, NICHT ALS border. In Figma
     liegt er INSIDE und verbraucht keinen Platz; ein CSS-border
     zieht bei border-box 1 px von jeder Seite ab, und der Kreis
     saß dann bei 6 statt 5 (AGENTS.md §8a). */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  cursor: pointer;
}

.umschalter__kreis {
  display: block;
  width: 36px;                             /* gemessen, siehe Kopf */
  height: 36px;
  border-radius: var(--radius-full);
  background-color: var(--button-ghost-outline);
}

/* Die Seite wechselt der Kreis über transform, nicht über
   justify-content — siehe weiter unten. Die Polster bleiben
   deshalb in beiden Zuständen bei 5. */

/* AN IST WEISS MIT HAKEN, NICHT BLAU. So steht es in der
   Komponente (9333:10855): der Kreis nimmt label-text, und darin
   liegt ein Haken 13,4 x 9,2 in text-opposite-background.
   Der Haken ist das zweite Signal neben Farbe und Position
   (WCAG 1.4.1) — mit einem blauen Kreis ohne Haken hing der
   Zustand allein an der Farbe. Nachgezogen am 04.09.2026. */
.umschalter[aria-checked="true"] .umschalter__kreis {
  background-color: var(--label-text);
  color: var(--text-opposite-background);
}

.umschalter__haken {
  display: block;
  overflow: visible;
  width: 13.4px;                           /* gemessen, siehe Kopf */
  height: 9.2px;
  opacity: 0;
}

.umschalter[aria-checked="true"] .umschalter__haken {
  opacity: 1;
}

/* Der Kreis trägt den Haken mittig. */
.umschalter__kreis {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Der Kreis wandert, er springt nicht. Nur transform und
   background-color laufen (§23.1) — die Breite bleibt gleich,
   also bewegt sich nichts im Layout.

   justify-content lässt sich nicht animieren, deshalb übernimmt
   das Wandern ein transform: von 0 bis zur Restbreite. */
.umschalter__kreis {
  transition:
    transform        calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out),
    background-color calc(var(--motion-press) * var(--motion-scale)) var(--motion-ease-out);
}

.umschalter {
  justify-content: flex-start;
}

/* 83 − 4 links − 4 rechts − 36 Kreis = 39 Weg. Das ist genau der
   Abstand zwischen den beiden Positionen in Figma: x 4 und x 43. */
.umschalter[aria-checked="true"] .umschalter__kreis {
  transform: translateX(39px);
}

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

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Die offene Sprach-Liste zeigt in Figma keinen Hover an den
     Zeilen. Hier tönt sich der Text — eine Fläche wäre die
     Regel (§10.1a), sie ist aber nicht gezeichnet.
   · Die Liste schließt sich in Figma nirgends sichtbar. Escape
     und ein Klick daneben sind hier ergänzt, weil eine Liste
     ohne Ausgang eine Falle ist (§19).
   · Der externe Link trägt nur ein Icon, keinen Text. Ob das
     für „verlässt die App" reicht, ist eine offene Frage —
     Farbe trägt hier nichts, das Icon allein muss es tun.
   ============================================================ */