/* MD-Assist: was ueber die gemeinsame Gestaltung (ikim-gestaltung.css)
   hinausgeht (28.10.2026). Geladen als Letztes, nach style.css, mdtool.css
   und ikim-gestaltung.css.

   Hier stehen nur die Klassen, die MD-Assist aus seinem aelteren Grundstil
   mitbringt und die die gemeinsame Datei nicht kennt: der Kopf mit dem
   Umschalter der Betriebsarten, Feldtitel, Auswahlleisten, innere Karten.
   Seitenbreiten, Raster und die Bewegungen der Diagramme bleiben, wie sie
   sind. */

/* ---------- Kopf ---------- */
/* Steht beim Blaettern, leicht durchscheinend. Die Farben der Stiftung
   traegt das Logo; Transferry fuehrt sie nicht als Linie im Kopf. */
header{background:color-mix(in srgb, var(--hinter) 86%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--linie)}
header::before{display:none}
.header-right{gap:var(--a-2)}
.header-right .symbolknopf{flex:none}
.konto-huelle{position:relative}
.konto-huelle .kontomenue{top:calc(100% + 8px);right:0}
.hauptnav a.aktiv{color:var(--akzent);border-bottom-color:var(--akzent)}
.hauptnav a{transition:color var(--t-1) var(--kurve), border-color var(--t-1) var(--kurve)}

/* Umschalter der Betriebsarten (28.10.2026). Gleich breite Felder ueber ein
   Raster, sonst lag der Schieber bei »Analytics« neben dem Knopf. Die
   Knoepfe tragen keine der allgemeinen Knopfregeln: kein Rahmen, kein
   heller Grund beim Darueberfahren, kein Einsinken. Der Schieber hat einen
   Namen fuer den Seitenwechsel: Er gleitet ueber den Wechsel hinweg. */
/* Zwischen den Feldern 4 px Luft, sonst stiess die Blase an die
   Nachbarn. Der Schieber rechnet die Luecke in Breite und Weg mit ein. */
.modus-schalter{--luecke:4px;display:inline-grid;grid-template-columns:repeat(var(--modi, 3), 1fr);
  column-gap:var(--luecke);margin-left:var(--a-4);padding:4px;border-radius:var(--r-rund);
  background:var(--flaeche-2);border:1px solid var(--linie)}
.modus-schalter .schieber{top:4px;bottom:4px;left:4px;
  width:calc((100% - 8px - (var(--modi, 3) - 1) * var(--luecke)) / var(--modi, 3));
  border-radius:var(--r-rund);background:var(--akzent);box-shadow:inset 0 -2px 0 var(--akzent-tief);
  transform:translateX(calc(var(--pos, 0) * (100% + var(--luecke))));transition:transform var(--t-2) var(--kurve);
  view-transition-name:modus-schieber}
.modus-schalter .modus-knopf{min-width:0;height:30px;padding:0 var(--a-4);border:0;border-radius:var(--r-rund);
  background:transparent;box-shadow:none;color:var(--text-2);font-size:var(--gr-2);white-space:nowrap;
  transition:color var(--t-2) var(--kurve)}
.modus-schalter .modus-knopf:hover{background:transparent;border:0;color:var(--text)}
.modus-schalter .modus-knopf:active{transform:none}
.modus-schalter .modus-knopf.aktiv,.modus-schalter .modus-knopf.aktiv:hover{color:var(--akzent-text)}
@media (max-width:700px){
  .modus-schalter{margin-left:var(--a-2)}
  .modus-schalter .modus-knopf{padding:0 var(--a-3)}
}
/* Der Umschalter wird nie gestaucht (30.10.2026). Gemessen bei 1024 px:
   Der Kopf brauchte 1092 px, der Browser stauchte den Umschalter auf 114 px,
   und »Response« (78 px) lag unter dem Schieber. Stattdessen gibt der Kopf
   nach und nach Platz her: erst Name und Rolle am Konto (nur das Kuerzel
   bleibt, wie in Transferry), dann der Schriftzug am Logo. */
.modus-schalter{flex:none}
/* Seit der Verweildauer (30.10.2026) traegt Analytics fuenf Punkte; der Kopf
   darf breiter sein als der Inhalt darunter (1300 px), sonst passte der Name
   am Konto auf keinem Bildschirm mehr. */
.header-inner{max-width:1440px}
@media (min-width:701px) and (max-width:1459px){
  .wer-text,.wer > .ic{display:none}
  .wer{padding:3px}
  .modus-schalter .modus-knopf{padding:0 var(--a-3)}
}
@media (min-width:701px) and (max-width:1099px){
  .logo .logo-wort{display:none}
  .hauptnav a{padding:6px 7px}
  .header-inner{gap:var(--a-3)}
}
@media (min-width:701px) and (max-width:999px){
  .hauptnav a{padding:6px 5px;font-size:12.5px}
  .modus-schalter .modus-knopf{padding:0 var(--a-2)}
}

/* Seitenwechsel: Der Kopf bleibt stehen, nur der Inhalt blendet ueber
   (View Transitions; wo der Browser sie nicht kennt, wie bisher). Mit
   Uebergang entfaellt die eigene Einblendung von main, sonst blendete der
   Inhalt zweimal. */
header{view-transition-name:kopf}
/* Das alte Geruest rechts im Kopf (Name, »Abmelden«) geht im Kontomenue auf.
   Versteckt, damit es vor dem Menue nicht aufblitzt; sichtbar nur, wo kein
   Menue kommt (Kontoseite mit offener Pflicht, konto.js: kopf-schlicht). */
.header-right > form[action="/logout"],.header-right > #wer{display:none}
html.kopf-schlicht .header-right > form[action="/logout"],html.kopf-schlicht .header-right > #wer{display:revert}
html.weich main{animation:none}

/* ---------- Felder ---------- */
/* Feldtitel in normaler Schreibung, wie in Transferry */
.feld-titel,.feld-wahl > .feld-titel,.auswahlleiste label{font-size:var(--gr-2);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--text-2)}
.einst-gruppe{font-size:var(--gr-1);font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-3)}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),select,textarea{
  background:var(--eingabe-bg)}

/* ---------- Karten ---------- */
.karte-innen{border-radius:var(--r-1);background:var(--flaeche-2);border-color:var(--linie)}
.karte-innen h4{color:var(--text)}
.seiten-kopf h2{font-size:24px;color:var(--text)}
.untertitel{color:var(--text-2)}
.login-box h1{color:var(--text)}
.role-label{background:var(--akzent-hell);color:var(--akzent)}

/* ---------- Knoepfe ---------- */
button.klein{padding:3px 10px;font-size:var(--gr-1);min-height:0}
.wahl-stand{white-space:nowrap}
.wahl-stand span{margin-right:var(--a-2)}
.btn-weiter:hover{background:var(--akzent);border-color:transparent;color:var(--akzent-text)}
.datentabelle tbody tr.aktiv{background:var(--akzent-hell);box-shadow:inset 3px 0 0 var(--akzent)}