/* IKiM-Gestaltung · Version 1.1 · 02.11.2026

   Eine Gestaltung fuer alle Werkzeuge des IKiM (MD-Assist, Transferry,
   Dr. Brief und die weiteren). Gepflegt wird sie in MD-Assist
   (static/ikim-gestaltung.css), beschrieben in GESTALTUNG.md. Die anderen
   Werkzeuge uebernehmen diese Datei unveraendert; was nur ein Werkzeug hat,
   steht in dessen eigener CSS-Datei, die NACH dieser geladen wird.

   Regeln:
   - Nur Tokens verwenden. Farben, Abstaende, Radien, Schatten und Bewegung
     stehen oben; alles darunter greift auf sie zurueck.
   - Eine Akzentfarbe, dazu Erfolg, Warnung, Fehler. Dunkel hat eine eigene
     Palette, kein invertiertes Hell.
   - Thema ueber data-thema="hell" oder "dunkel" auf <html>; ohne Attribut
     folgt es dem System.
   - Bewegung 150 bis 300 ms mit einer Kurve, nur transform und opacity,
     prefers-reduced-motion beachtet.
   - Keine Browserform fuer Ankreuzfeld und Auswahlpunkt.

   Herkunft: Transferry (tf.css), uebertragen in Dr. Brief und MD-Assist. */

/* ---------- Tokens ---------- */
:root{
  --hinter:#F6F8FA; --flaeche:#FFFFFF; --flaeche-2:#EDF1F5;
  --linie:#DEE5EC; --linie-stark:#C6D0DA;
  --text:#16202A; --text-2:#46525F; --text-3:#7B8896;
  --akzent:#1765C1; --akzent-tief:#0F4C96; --akzent-hell:#E6F0FB; --akzent-text:#FFFFFF;
  --ok:#17905A; --ok-tief:#0F6B42; --ok-hell:#E3F5EC;
  --warn:#B7790B; --warn-hell:#FDF3DC;
  --fehler:#C2412F; --fehler-tief:#992F20; --fehler-hell:#FBE9E6;
  --toast:#16202A;
  --s-1:0 1px 2px rgb(22 32 42 / .06), 0 1px 1px rgb(22 32 42 / .04);
  --s-2:0 6px 18px rgb(22 32 42 / .08), 0 2px 4px rgb(22 32 42 / .05);
  --s-3:0 22px 48px rgb(22 32 42 / .16), 0 6px 14px rgb(22 32 42 / .08);
  --logo-navy:#003E77;
  --logo-papier:#FFFFFF;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-thema="hell"]){
    --hinter:#0E141A; --flaeche:#151D25; --flaeche-2:#1C2630;
    --linie:#26323E; --linie-stark:#34424F;
    --text:#E7EDF2; --text-2:#A9B5C1; --text-3:#7C8996;
    --akzent:#5AA2EE; --akzent-tief:#3B86D6; --akzent-hell:#16283B; --akzent-text:#08131F;
    --ok:#3CC386; --ok-tief:#2A9E69; --ok-hell:#12291F;
    --warn:#E6AE45; --warn-hell:#2B2312;
    --fehler:#EE7262; --fehler-tief:#D45848; --fehler-hell:#2E1714;
    --toast:#26313D;
    --s-1:0 1px 2px rgb(0 0 0 / .4);
    --s-2:0 8px 22px rgb(0 0 0 / .42);
    --s-3:0 24px 56px rgb(0 0 0 / .55);
    --logo-navy:#9CC5EC;
    --logo-papier:#0E141A;
    color-scheme:dark;
  }
}
:root[data-thema="dunkel"]{
  --hinter:#0E141A; --flaeche:#151D25; --flaeche-2:#1C2630;
  --linie:#26323E; --linie-stark:#34424F;
  --text:#E7EDF2; --text-2:#A9B5C1; --text-3:#7C8996;
  --akzent:#5AA2EE; --akzent-tief:#3B86D6; --akzent-hell:#16283B; --akzent-text:#08131F;
  --ok:#3CC386; --ok-tief:#2A9E69; --ok-hell:#12291F;
  --warn:#E6AE45; --warn-hell:#2B2312;
  --fehler:#EE7262; --fehler-tief:#D45848; --fehler-hell:#2E1714;
  --toast:#26313D;
  --s-1:0 1px 2px rgb(0 0 0 / .4);
  --s-2:0 8px 22px rgb(0 0 0 / .42);
  --s-3:0 24px 56px rgb(0 0 0 / .55);
  --logo-navy:#9CC5EC;
  --logo-papier:#0E141A;
  color-scheme:dark;
}
:root{
  /* Schrift: eine mit Charakter fuer Ueberschriften, eine ruhige fuer Text.
     Die Dateien bringt jedes Werkzeug selbst mit. */
  --schrift-titel:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --schrift:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display:var(--schrift-titel); --font-body:var(--schrift);
  --gr-1:12px; --gr-2:13px; --gr-3:14px; --gr-4:16px; --gr-5:18px; --gr-6:22px; --gr-7:28px; --gr-8:36px;
  /* 4px-Raster */
  --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:20px; --a-6:24px; --a-8:32px; --a-10:40px; --a-12:48px;
  --r-1:8px; --r-2:14px; --r-3:22px; --r-rund:999px;
  --t-1:150ms; --t-2:220ms; --t-3:300ms;
  --kurve:cubic-bezier(0.2, 0.8, 0.2, 1);
  --fokus:0 0 0 3px color-mix(in srgb, var(--akzent) 35%, transparent);
}

/* ---------- Grundlagen ---------- */
html{background:var(--hinter)}
body{font-family:var(--schrift);color:var(--text);-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01";
  background:radial-gradient(1200px 600px at 50% -10%, var(--akzent-hell), transparent 70%) fixed, var(--hinter)}
h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:700;letter-spacing:-.015em;line-height:1.2}
a{color:var(--akzent)}
::selection{background:color-mix(in srgb, var(--akzent) 28%, transparent)}
:focus-visible{outline:none;box-shadow:var(--fokus);border-radius:var(--r-1)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:none;box-shadow:var(--fokus)}
.zahl,.kennung{font-variant-numeric:tabular-nums}
.kennung{font-size:var(--gr-1);font-weight:600;letter-spacing:.04em;color:var(--text-3)}
*{scrollbar-width:thin;scrollbar-color:var(--linie-stark) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linie-stark);border-radius:10px;border:3px solid var(--hinter)}
svg.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- Seitenwechsel ----------
   Ein Wechsel zwischen Seiten blendet weich ueber statt hart zu schneiden
   (View Transitions zwischen Dokumenten). Browser ohne sie laden wie
   bisher. Was ueber den Wechsel stehen bleiben soll, bekommt im Werkzeug
   einen view-transition-name. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:gestaltung-aus var(--t-1) var(--kurve) both}
::view-transition-new(root){animation:gestaltung-ein var(--t-2) var(--kurve) both}
::view-transition-group(*){animation-duration:var(--t-2);animation-timing-function:var(--kurve)}
@keyframes gestaltung-aus{to{opacity:0}}
@keyframes gestaltung-ein{from{opacity:0}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}

/* ---------- Kopf: Symbolknopf, Kontoknopf, Kontomenue ---------- */
.symbolknopf{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;padding:0;
  border-radius:var(--r-1);border:1px solid transparent;background:transparent;color:var(--text-2);
  cursor:pointer;text-decoration:none;
  transition:background var(--t-1) var(--kurve), color var(--t-1) var(--kurve)}
.symbolknopf:hover{background:var(--flaeche-2);color:var(--text);border-color:transparent;text-decoration:none}
.symbolknopf.aktiv{background:var(--akzent-hell);color:var(--akzent);border-color:transparent}
.symbolknopf .neu-punkt{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;
  background:var(--akzent);box-shadow:0 0 0 2px var(--hinter)}
.wer{display:flex;align-items:center;gap:var(--a-2);padding:4px 10px 4px 4px;border-radius:var(--r-rund);
  border:1px solid var(--linie);background:var(--flaeche);cursor:pointer;color:var(--text);font-weight:600;
  transition:border-color var(--t-1) var(--kurve), box-shadow var(--t-1) var(--kurve)}
.wer:hover{border-color:var(--linie-stark);box-shadow:var(--s-1);color:var(--text);background:var(--flaeche)}
.wer[aria-expanded="true"]{border-color:var(--akzent)}
.kuerzel-rund{width:30px;height:30px;border-radius:50%;background:var(--akzent-hell);color:var(--akzent);
  display:grid;place-items:center;font-weight:700;font-size:var(--gr-1);flex:none}
.wer-text{display:flex;flex-direction:column;line-height:1.15;text-align:left;min-width:0}
.wer-text b{font-size:var(--gr-2);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wer-text span{font-size:var(--gr-1);color:var(--text-3);font-weight:500;white-space:nowrap}
.wer .ic{width:16px;height:16px;color:var(--text-3)}
@media (max-width:700px){ .wer-text,.wer .ic{display:none} .wer{padding:3px} }

.kontomenue{position:absolute;z-index:70;min-width:240px;padding:var(--a-1);border-radius:var(--r-2);
  background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--s-3);
  animation:aufklappen var(--t-2) var(--kurve)}
.kontomenue.zu{animation:zuklappen 140ms var(--kurve) forwards}
.kontomenue > button,.kontomenue > a{width:100%;display:flex;align-items:center;gap:var(--a-3);
  padding:var(--a-2) var(--a-3);border:0;background:none;border-radius:var(--r-1);cursor:pointer;
  color:var(--text);font-weight:500;text-align:left;font-size:var(--gr-3);box-shadow:none;
  justify-content:flex-start;text-decoration:none}
.kontomenue > button:hover,.kontomenue > a:hover{background:var(--flaeche-2);text-decoration:none;color:var(--text)}
.kontomenue > a.aktiv{color:var(--akzent)}
.kontomenue > button:active,.kontomenue > a:active{transform:none}
.kontomenue .ic{color:var(--text-3)}
.kontomenue hr{border:0;border-top:1px solid var(--linie);margin:var(--a-1) 0}
.kontomenue .menue-kopf{padding:var(--a-2) var(--a-3);font-size:var(--gr-1);color:var(--text-3);line-height:1.35}
.kontomenue .menue-kopf b{display:block;color:var(--text);font-size:var(--gr-2)}
.kontomenue .thema{display:flex;gap:2px;padding:var(--a-1) var(--a-2) var(--a-2)}
.kontomenue .thema button{flex:1;justify-content:center;padding:6px;font-size:var(--gr-1);font-weight:600;
  border:1px solid var(--linie);border-radius:var(--r-1);background:none;color:var(--text);box-shadow:none}
.kontomenue .thema button:hover{border-color:var(--linie-stark)}
.kontomenue .thema button[aria-pressed="true"]{border-color:var(--akzent);color:var(--akzent);background:var(--akzent-hell)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-4px) scale(.98)}}
@keyframes zuklappen{to{opacity:0;transform:translateY(-4px) scale(.98)}}

/* ---------- Bewegung beim Laden ---------- */
@keyframes hinein{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none}}
.gestaffelt > *{animation:hinein var(--t-3) var(--kurve) both}
.gestaffelt > *:nth-child(2){animation-delay:40ms} .gestaffelt > *:nth-child(3){animation-delay:80ms}
.gestaffelt > *:nth-child(4){animation-delay:120ms} .gestaffelt > *:nth-child(5){animation-delay:160ms}
.gestaffelt > *:nth-child(n+6){animation-delay:200ms}

/* ---------- Knoepfe ---------- */
button,.btn,.btn-link{border-radius:var(--r-1);border:1px solid var(--linie-stark);background:var(--flaeche);
  color:var(--text);font-weight:600;cursor:pointer;
  transition:transform var(--t-1) var(--kurve), background var(--t-1) var(--kurve),
             border-color var(--t-1) var(--kurve), box-shadow var(--t-1) var(--kurve),
             color var(--t-1) var(--kurve), filter var(--t-1) var(--kurve)}
button:hover,.btn-link:hover{border-color:var(--text-3);color:var(--text);background:var(--flaeche)}
button:active,.btn-link:active{transform:translateY(1px)}
button:disabled{opacity:.5;cursor:not-allowed;transform:none}
/* Der Hauptknopf drueckt sich ein wie eine Taste */
button.primaer,.btn-link.primaer-link{background:var(--akzent);border-color:transparent;color:var(--akzent-text);
  box-shadow:0 3px 0 var(--akzent-tief)}
button.primaer:hover,.btn-link.primaer-link:hover{background:var(--akzent);color:var(--akzent-text);
  filter:brightness(1.06);border-color:transparent}
button.primaer:active,.btn-link.primaer-link:active{transform:translateY(3px);box-shadow:0 0 0 var(--akzent-tief)}
button.primaer:disabled{box-shadow:0 3px 0 var(--akzent-tief)}
button.gefahr{color:var(--fehler);border-color:color-mix(in srgb, var(--fehler) 40%, var(--linie))}
button.gefahr:hover{background:var(--fehler-hell);border-color:var(--fehler);color:var(--fehler)}
.dialog-fuss button.gefahr{background:var(--fehler);color:#fff;border-color:transparent;
  box-shadow:0 3px 0 var(--fehler-tief)}
.dialog-fuss button.gefahr:active{transform:translateY(3px);box-shadow:none}
button.still{background:transparent;border-color:transparent;color:var(--text-2);box-shadow:none}
button.still:hover{background:var(--flaeche-2);color:var(--text);border-color:transparent}

/* ---------- Felder ---------- */
label{font-size:var(--gr-2);font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2)}
label input,label select,label textarea{margin-top:6px}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),select,textarea{
  border-radius:var(--r-1);border:1.5px solid var(--linie-stark);background:var(--flaeche);color:var(--text);
  transition:border-color var(--t-1) var(--kurve), box-shadow var(--t-1) var(--kurve)}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),select{min-height:40px}
input:not([type="checkbox"]):not([type="radio"]):hover,select:hover,textarea:hover{border-color:var(--text-3)}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{outline:none;
  border-color:var(--akzent);box-shadow:var(--fokus)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
/* Passwortfeld mit Auge (ikim-gestaltung.js) */
.passwort-huelle{position:relative;display:block}
label .passwort-huelle{margin-top:6px}
label .passwort-huelle input{margin-top:0}
.passwort-huelle input{padding-right:44px}
.passwort-huelle input::-ms-reveal,.passwort-huelle input::-ms-clear{display:none}
.passwort-huelle .passwort-auge{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:grid;place-items:center;
  width:34px;height:34px;min-height:0;margin:0;padding:0;border:0;border-radius:var(--r-1);
  background:transparent;color:var(--text-3);box-shadow:none;cursor:pointer;
  transition:background var(--t-1) var(--kurve), color var(--t-1) var(--kurve)}
.passwort-huelle .passwort-auge:hover{background:var(--flaeche-2);color:var(--text)}
.passwort-huelle .passwort-auge[aria-pressed="true"]{color:var(--akzent)}
/* Ankreuzfeld und Auswahlpunkt statt der Browserform */
input[type="checkbox"],input[type="radio"]{appearance:none;-webkit-appearance:none;width:20px;height:20px;
  margin:0;padding:0;border-radius:6px;border:2px solid var(--linie-stark);background:var(--flaeche);
  display:inline-grid;place-items:center;cursor:pointer;flex:none;vertical-align:middle;
  transition:background var(--t-1) var(--kurve), border-color var(--t-1) var(--kurve)}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]:hover,input[type="radio"]:hover{border-color:var(--text-3)}
input[type="checkbox"]:checked,input[type="radio"]:checked{background:var(--akzent);border-color:var(--akzent)}
input[type="checkbox"]:checked::after{content:"";width:5px;height:10px;border:solid var(--akzent-text);
  border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
input[type="checkbox"]:indeterminate{background:var(--akzent);border-color:var(--akzent)}
input[type="checkbox"]:indeterminate::after{content:"";width:10px;height:2.5px;background:var(--akzent-text)}
input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--akzent-text)}
input[type="checkbox"]:disabled,input[type="radio"]:disabled{opacity:.5;cursor:not-allowed}

/* ---------- Klappliste (ikim-gestaltung.js) ----------
   Das <select> traegt den Wert und steht im Layout; aufgeklappt wird eine
   eigene Liste. Der Pfeil ist ein Bild, weil ein Pseudoelement am select
   nicht geht; sein Grau passt zu --text-3 in beiden Themen. */
select:not([multiple]):not([size]){appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B8896' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px}
select[aria-expanded="true"]{border-color:var(--akzent);box-shadow:var(--fokus)}
.liste-pop{position:fixed;z-index:700;overflow:hidden;display:flex;flex-direction:column;padding:var(--a-1);
  border-radius:var(--r-2);background:var(--flaeche);border:1px solid var(--linie);box-shadow:var(--s-3);
  font-size:var(--gr-3);color:var(--text);animation:aufklappen var(--t-2) var(--kurve)}
.liste-pop.zu{animation:zuklappen 140ms var(--kurve) forwards}
.liste-zeilen{position:relative;overflow:auto;min-height:0}
.liste-pop [role="option"]{padding:var(--a-2) var(--a-3);border-radius:var(--r-1);cursor:pointer;
  display:flex;align-items:center;gap:var(--a-2);white-space:nowrap}
.liste-pop [role="option"][aria-selected="true"]{color:var(--akzent);font-weight:600}
.liste-pop [role="option"][aria-disabled="true"]{color:var(--text-3);cursor:default}
.liste-pop [role="option"].markiert{background:var(--flaeche-2)}
.liste-pop .option-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.liste-gruppe{padding:var(--a-2) var(--a-3) var(--a-1);font-size:var(--gr-1);font-weight:600;color:var(--text-3)}
.liste-suche{flex:none;height:36px;margin:var(--a-1) var(--a-1) var(--a-2);padding:0 var(--a-3);
  border-radius:var(--r-1);border:1px solid var(--linie);background:var(--flaeche-2);color:var(--text);
  font-size:var(--gr-3);outline:none;min-height:0}
.liste-suche:focus{border-color:var(--akzent)}
.liste-leer{padding:var(--a-3);color:var(--text-3);font-size:var(--gr-2)}

/* ---------- Tooltip (ikim-gestaltung.js) ---------- */
.tipp{position:fixed;z-index:720;max-width:300px;padding:var(--a-2) var(--a-3);border-radius:var(--r-1);
  background:var(--toast);color:#fff;font-size:var(--gr-2);font-weight:500;line-height:1.45;
  box-shadow:var(--s-2);pointer-events:none;animation:aufklappen var(--t-1) var(--kurve)}

/* ---------- Karten und Zustaende ---------- */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-2);box-shadow:var(--s-1)}
.karte h4,.karte-kopf h4{font-family:var(--schrift-titel);font-size:var(--gr-4);color:var(--text)}
.karte.klickbar{cursor:pointer;transition:transform var(--t-2) var(--kurve), box-shadow var(--t-2) var(--kurve),
  border-color var(--t-2) var(--kurve)}
.karte.klickbar:hover{transform:translateY(-2px);box-shadow:var(--s-2);border-color:var(--linie-stark)}
.warnung-kasten{background:var(--warn-hell);border:1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color:var(--text);border-radius:var(--r-1);padding:var(--a-3) var(--a-4)}
/* Klappbare Karte (ikim-gestaltung.js, klappbar) */
.karte.klappbar > .karte-kopf{cursor:pointer;user-select:none;transition:margin var(--t-3) var(--kurve)}
.karte.klappbar.zu > .karte-kopf{margin-bottom:0}
.klapp-knopf{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;margin-left:auto;
  border:0;border-radius:var(--r-1);background:transparent;color:var(--text-3);box-shadow:none;flex:none}
.klapp-knopf:hover{background:var(--flaeche-2);color:var(--text);border:0}
.klapp-knopf:active{transform:none}
.klapp-knopf .ic{width:16px;height:16px;transition:transform var(--t-2) var(--kurve)}
.karte.zu .klapp-knopf .ic{transform:rotate(-90deg)}
.klapp-inhalt{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--t-3) var(--kurve)}
.klapp-inhalt > div{min-height:0;overflow:hidden}
.karte.zu > .klapp-inhalt{grid-template-rows:0fr}

/* Zustand als Kapsel mit Punkt */
.zustand-marke{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-rund);
  font-size:var(--gr-1);font-weight:600;background:var(--flaeche-2);color:var(--text-2);white-space:nowrap}
.zustand-marke::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.9}
.zustand-marke.akzent{background:var(--akzent-hell);color:var(--akzent)}
.zustand-marke.ok{background:var(--ok-hell);color:var(--ok)}
.zustand-marke.warn{background:var(--warn-hell);color:var(--warn)}
.zustand-marke.fehler{background:var(--fehler-hell);color:var(--fehler)}
/* Leer und Laden */
.leer-zustand{text-align:center;padding:var(--a-12) var(--a-4);color:var(--text-2)}
.skelett{border-radius:var(--r-1);background:linear-gradient(90deg, var(--flaeche-2) 0%, var(--linie) 40%, var(--flaeche-2) 80%);
  background-size:300% 100%;animation:schimmer 1.4s ease-in-out infinite}
@keyframes schimmer{from{background-position:100% 0} to{background-position:0 0}}

/* ---------- Segmente: Umschalter mit Schieber ---------- */
.segmente{position:relative;display:inline-flex;padding:4px;border-radius:var(--r-2);background:var(--flaeche-2);
  border:1px solid var(--linie);max-width:100%;overflow-x:auto;scrollbar-width:none}
.segmente::-webkit-scrollbar{display:none}
.segmente button{position:relative;z-index:1;flex:none;border:0;background:none;height:34px;padding:0 16px;
  border-radius:10px;font-weight:600;font-size:var(--gr-2);color:var(--text-2);box-shadow:none;
  transition:color var(--t-2) var(--kurve)}
.segmente button:hover{background:none;color:var(--text)}
.segmente button[aria-selected="true"]{color:var(--text)}
.segmente .schieber{position:absolute;z-index:0;top:4px;bottom:4px;border-radius:10px;background:var(--flaeche);
  box-shadow:var(--s-1);transition:left var(--t-2) var(--kurve), width var(--t-2) var(--kurve)}

/* ---------- Tabellen ---------- */
.datentabelle th{font-size:var(--gr-1);font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-3)}
.datentabelle tbody tr{transition:background var(--t-1) var(--kurve)}
.datentabelle tbody tr:hover{background:var(--flaeche-2)}

/* ---------- Dialog ---------- */
.dialog-huelle{background:rgb(10 16 22 / .45);animation:gestaltung-einblenden var(--t-2) var(--kurve)}
.dialog-kasten{border-radius:var(--r-3);box-shadow:var(--s-3);border:1px solid var(--linie);
  animation:dialogein var(--t-3) var(--kurve)}
.dialog-kasten::before{display:none}
.dialog-fuss button:not(.primaer):not(.gefahr){background:transparent;border-color:transparent;color:var(--text-2)}
.dialog-fuss button:not(.primaer):not(.gefahr):hover{background:var(--flaeche-2);color:var(--text)}
@keyframes dialogein{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes gestaltung-einblenden{from{opacity:0}}

/* ---------- Meldungen ---------- */
.meldungen{position:fixed;z-index:95;left:50%;bottom:var(--a-6);transform:translateX(-50%);display:flex;
  flex-direction:column;gap:var(--a-2);align-items:center;pointer-events:none;width:min(440px, calc(100vw - 32px))}
.meldung-toast{pointer-events:auto;display:flex;align-items:center;gap:var(--a-3);padding:var(--a-3) var(--a-4);
  border-radius:var(--r-2);background:var(--toast);color:#fff;box-shadow:var(--s-3);font-weight:600;
  animation:toastein var(--t-3) var(--kurve) both}
.meldung-toast.ok .ic{color:#5BE0A0} .meldung-toast.fehler .ic{color:#FF9A8C}
.meldung-toast.geht{animation:toastaus var(--t-2) var(--kurve) forwards}
@keyframes toastein{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes toastaus{to{opacity:0;transform:translateY(8px)}}

/* ---------- Anmeldung ---------- */
.login-seite{background:radial-gradient(1200px 600px at 50% -10%, var(--akzent-hell), transparent 70%), var(--hinter);
  padding:var(--a-6) var(--a-4)}
.login-box{width:min(400px, 100%);border-radius:var(--r-3);box-shadow:var(--s-2);
  animation:dialogein var(--t-3) var(--kurve)}
.login-box::before{display:none}
.login-innen{padding:var(--a-8)}
.login-innen a{color:var(--akzent)}
.login-box button[type="submit"]{width:100%;height:52px;font-size:var(--gr-4);border-radius:var(--r-2);
  background:var(--akzent);border-color:transparent;color:var(--akzent-text);box-shadow:0 3px 0 var(--akzent-tief)}
.login-box button[type="submit"]:active{transform:translateY(3px);box-shadow:none}
.login-fehler{border-radius:var(--r-1);padding:var(--a-3);font-weight:600;animation:wackeln 360ms var(--kurve)}
@keyframes wackeln{20%{transform:translateX(-6px)} 40%{transform:translateX(5px)}
  60%{transform:translateX(-3px)} 80%{transform:translateX(2px)}}

/* ---------- Fusszeile ---------- */
.fusszeile{background:color-mix(in srgb, var(--hinter) 82%, transparent);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-delay:0ms !important;
    transition-duration:1ms !important}
}