/* ============================================================================================
   Kontor am Tresen — die Anordnung der Einstellungen.
   Nur Anordnung und das, was die Bibliothek fuer ein SCHREIBENDES Formular noch nicht hat.
   Alle Bauteile stehen in parts.css, alle Werte in tokens.css.

   §11.2 Regel 1 gilt: keine font-size, kein Radius, keine Farbe ausser aus den Tokens.
   Die einzige Ausnahme ist unten am Auswahl-Knopf markiert — sie ist woertlich aus §5.11b
   und steht mit demselben Wortlaut schon in parts.css.

   WARUM HIER SCHALTER, AUSWAHL UND FLAECHE STEHEN
   parts.js baut Schalter und Auswahl als <button>. Ein <button> traegt keinen Wert; ein
   Einstellungsformular, das ueber form[data-settings-section] gespeichert wird, braucht
   echte Felder. Die Regeln hier setzen ein <input>/<select>/<textarea> in DIESELBEN
   Bauteilklassen. Sobald parts.js/parts.css das koennen, faellt dieser Block ersatzlos weg.
   ============================================================================================ */

/* Die Huelle steht in parts.css (.k-seite) und gilt fuer alle elf Ansichten ausser Start.
   .k-einst, sein Papiergrund, sein Seitenrand und der eigene Weg-zurueck-Knopf sind
   dorthin gewandert oder weggefallen — der Rueckweg auf den Tresen ist die Leiste (§5.5).
   Der Weg zurueck zur UEBERSICHT bleibt (§7.7), aber als Textknopf aus der Bibliothek. */

.k-einst-mitte {
  padding: 40px 0;
  text-align: center;
}

/* §7.3 Der Nur-lesen-Zustand steht oben in der Ansicht, einmal. */
.k-einst-marke {
  padding: 12px 0 0;
}

/* ---- Zwei Schalter in einer Zeile: Mail und Push ---------------------------------------- */

/* display:flex ist Pflicht, nicht Geschmack: .k-schalter ist ein <span>. In der Zeile der
   Bibliothek ist es ein Flex-Kind und wird dadurch blockartig; hier braucht es denselben
   Zusammenhang, sonst bleibt es inline und die 46 x 28 px fallen ersatzlos weg. */
.k-einst-paarteil {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
}

/* Die Woerter stehen einmal ueber den beiden Spalten, nicht dreizehnmal daneben. */
.k-einst-legende {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 2px 6px;
}

.k-einst-legende > i {
  flex: 1;
}

.k-einst-legende > span {
  width: 46px;
  text-align: center;
  color: var(--ink-3);
}

.k-einst-paar > .k-nur-lesen-wert {
  width: 46px;
  text-align: center;
}

/* ---- Knoepfe ------------------------------------------------------------------------------ */

.k-einst-tat {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;
}

.k-einst-tat > .k-knopf {
  flex: 1 1 140px;
}

.k-einst-form {
  display: block;
}