/* ============================================================================
   Residu — Anmeldung
   ============================================================================
   FARBEN ALS SEMANTISCHE MARKEN — nirgends ein roher Hexwert im Bauteil.
   Alle Paarungen gegen die Flaeche geprueft: Text 13:1, Nebentext 5,4:1,
   Akzent auf Flaeche 8,9:1. Der Knopf traegt dunkle Schrift auf Akzent (14:1).
   ========================================================================= */
:root{
  --bg:#080b0d;
  --flaeche:#11171a;
  --flaeche-hoch:#161e22;
  --linie:#212b30;
  --linie-hell:#2c383d;
  --text:#e7edee;
  --text-leise:#8c9a9e;
  --text-still:#65726f;
  --akzent:#5fd3bc;
  --akzent-tief:#3aa892;
  --warnung:#e8a94b;
  --fehler:#ff7a7a;

  --r-klein:8px;  --r:12px;  --r-gross:18px;

  /* EIN Bewegungsrhythmus fuer alles. Eintritt weich auslaufend,
     Austritt kuerzer als Eintritt (~65 %). */
  --schnell:150ms;
  --normal:240ms;
  --weich:cubic-bezier(.16,1,.3,1);
  --raus:cubic-bezier(.4,0,1,1);
}

*{box-sizing:border-box}
html,body{height:100%}

/* ============================================================================
   DAS HIER MUSS GANZ OBEN STEHEN — und `!important` ist hier kein Pfusch.
   ============================================================================
   Der Browser bringt `[hidden] { display: none }` mit. Diese Regel hat dieselbe
   Spezifitaet wie `.knopf` oder `.zurueck` — und Autorenregeln schlagen die
   Browser-Vorgabe IMMER. Ein `<button class="knopf" hidden>` blieb deshalb
   sichtbar, obwohl `hidden` gesetzt war.
   Genau so wurde der Knopf „Konfiguration" auch Nicht-Admins gezeigt und der
   Zurueck-Pfeil auf Schirmen ohne Rueckweg. Lautlos, weil das Attribut ja
   korrekt gesetzt war — nur eben wirkungslos. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:400 15px/1.55 ui-sans-serif,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  overflow-x:hidden;
}

/* ============================================================================
   HINTERGRUND — ein Koordinatengitter, das sehr langsam zieht.
   Es sagt „Ortung/Messung", nennt aber nichts. Bewegt wird ausschliesslich
   per transform, damit nichts neu umbrochen wird (kein Layout-Shift).
   ========================================================================= */
.grund{position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none}

.gitter{
  position:absolute; inset:-50%;
  background-image:
    linear-gradient(var(--linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size:54px 54px;
  opacity:.16;
  animation:ziehen 90s linear infinite;
  will-change:transform;
}
@keyframes ziehen{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(54px,54px,0)}
}

/* Der Schein hinter der Karte — atmet sehr langsam, damit die Flaeche lebt. */
.schein{
  position:absolute; left:50%; top:46%;
  width:min(760px,150vw); aspect-ratio:1; translate:-50% -50%;
  background:radial-gradient(circle, rgba(95,211,188,.14), rgba(95,211,188,.05) 42%, transparent 68%);
  animation:atmen 14s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes atmen{
  0%,100%{transform:scale(1);   opacity:.75}
  50%    {transform:scale(1.11);opacity:1}
}

/* Zwei Signalpunkte auf dem Gitter. Mehr waere Dekoration. */
.punkt{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--akzent); opacity:.5;
  box-shadow:0 0 12px 2px rgba(95,211,188,.5);
  animation:pulsen 5.5s ease-in-out infinite;
}
.punkt.a{left:18%; top:26%}
.punkt.b{left:79%; top:71%; animation-delay:2.4s}
@keyframes pulsen{
  0%,100%{transform:scale(.7); opacity:.18}
  50%    {transform:scale(1.5);opacity:.6}
}

/* Vignette: zieht den Blick zur Mitte, ohne dass man sie bemerkt. */
.grund::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, transparent 26%, var(--bg) 88%);
}

/* ============================================================================
   KARTE
   ========================================================================= */
main{
  position:relative; z-index:1; flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem 1rem 3rem;
}

.karte{
  width:min(372px,100%);
  background:linear-gradient(180deg,var(--flaeche-hoch),var(--flaeche));
  border:1px solid var(--linie);
  border-radius:var(--r-gross);
  padding:2.1rem 1.75rem 1.6rem;
  position:relative;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4);
  animation:karte-auf 620ms var(--weich) both;
  /* Die Karte waechst/schrumpft mit dem Schirm — die Hoehe wird beim Wechsel
     weich ueberblendet, sonst springt es. */
  transition:height var(--normal) var(--weich);
}
@keyframes karte-auf{
  from{opacity:0; transform:translateY(16px) scale(.985)}
  to  {opacity:1; transform:none}
}

/* Lichtkante oben — faengt den Akzent, verlaeuft nach aussen ins Nichts. */
.karte::before{
  content:""; position:absolute; left:12%; right:12%; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--akzent),transparent);
  opacity:.55;
}

/* Jedes Kind tritt versetzt ein (55 ms). Der Nutzer liest in der Reihenfolge,
   in der er es spaeter bedient. */
.stufe{animation:stufe-auf 500ms var(--weich) both}
@keyframes stufe-auf{
  from{opacity:0; transform:translateY(9px)}
  to  {opacity:1; transform:none}
}
.s1{animation-delay:.16s} .s2{animation-delay:.215s} .s3{animation-delay:.27s}
.s4{animation-delay:.325s} .s5{animation-delay:.38s} .s6{animation-delay:.435s}

/* ---------------------------------------------------------------- Wortmarke */
.marke{display:flex; flex-direction:column; align-items:center; gap:.85rem; margin-bottom:1.7rem}

/* DAS ZEICHEN IST EIN RESIDUENPLOT: eine Nulllinie, Staebe darueber und
   darunter, Punkte an deren Enden. Genau das bedeutet der Name — und es ist
   abstrakt genug, um nichts zu verraten. */
.zeichen{width:46px; height:46px; display:block; color:var(--akzent)}
.zeichen .achse{
  stroke:currentColor; stroke-width:1.5; opacity:.45;
  stroke-dasharray:34; stroke-dashoffset:34;
  animation:achse-ziehen 620ms var(--weich) .2s forwards;
}
@keyframes achse-ziehen{to{stroke-dashoffset:0}}
.zeichen .stab{
  stroke:currentColor; stroke-width:1.6; opacity:.42;
  transform-origin:center 20px; transform:scaleY(0);
  animation:stab-wachsen 420ms var(--weich) forwards;
}
.zeichen .kopf{
  fill:currentColor; opacity:0; transform-origin:center;
  animation:kopf-setzen 380ms var(--weich) forwards;
}
@keyframes stab-wachsen{to{transform:scaleY(1)}}
@keyframes kopf-setzen{from{opacity:0; transform:translateY(-3px) scale(.4)} to{opacity:1; transform:none}}
.p1{animation-delay:.40s} .p2{animation-delay:.46s} .p3{animation-delay:.52s}
.p4{animation-delay:.58s} .p5{animation-delay:.64s}

/* ============================================================================
   KEINE INLINE-STILE IN DIESER SEITE — auch keine style="…"-Attribute.
   ============================================================================
   Die Content-Security-Policy setzt `style-src 'self'` ohne 'unsafe-inline'.
   Das blockiert nicht nur <style>-Bloecke, sondern auch jedes style-Attribut
   am Element. Was hier fehlt, wirkt im Browser einfach nicht — lautlos.
   Deshalb bekommt selbst eine einzelne Zentrierung eine Klasse. */
.mitte{text-align:center}
.luft-klein{margin-top:.35rem}
.luft-gross{margin-top:.9rem}
.lockern{margin-bottom:.4rem; line-height:1.6}

/* Bestaetigung nach der Anmeldung — der Haken zeichnet sich einmal selbst. */
.haken{
  width:54px; height:54px; margin:.3rem auto 1.1rem; border-radius:50%;
  display:grid; place-items:center; color:var(--akzent);
  background:rgba(95,211,188,.09); border:1px solid rgba(95,211,188,.28);
}
.haken svg{width:26px; height:26px; stroke-dasharray:26; stroke-dashoffset:26;
  animation:haken-ziehen 480ms var(--weich) .12s forwards}
@keyframes haken-ziehen{to{stroke-dashoffset:0}}

.wortmarke{
  font:600 15px/1 ui-sans-serif,"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  letter-spacing:.42em; text-indent:.42em; text-transform:uppercase;
  color:var(--text);
}
.unterzeile{margin-top:.5rem; font-size:11.5px; color:var(--text-still); letter-spacing:.02em}

/* ------------------------------------------------------------------- Felder */
.feld{margin-bottom:1.05rem}
.feld > label{
  display:block; font-size:11.5px; font-weight:500; letter-spacing:.03em;
  color:var(--text-leise); margin-bottom:.42rem;
}
.feld .pflicht{color:var(--akzent); margin-left:.15rem}

.eingabe{position:relative; display:flex; align-items:center}

.eingabe > .sym{
  position:absolute; left:.7rem; width:17px; height:17px;
  color:var(--text-still); pointer-events:none;
  transition:color var(--normal) var(--weich);
}
.eingabe:focus-within > .sym{color:var(--akzent)}

.eingabe input{
  width:100%; min-height:48px;              /* Fingerziel, und iOS zoomt nicht */
  background:rgba(255,255,255,.022);
  border:1px solid var(--linie);
  border-radius:var(--r);
  padding:.72rem .72rem .72rem 2.5rem;
  color:var(--text); font:400 16px/1.4 inherit;
  transition:border-color var(--normal) var(--weich), background var(--normal) var(--weich);
  outline:none;
}
.eingabe select{
  width:100%; min-height:48px;
  background:rgba(255,255,255,.022);
  border:1px solid var(--linie);
  border-radius:var(--r);
  padding:.72rem 2.4rem .72rem 2.5rem;
  color:var(--text); font:400 16px/1.4 inherit;
  appearance:none; cursor:pointer; outline:none;
  transition:border-color var(--normal) var(--weich), background var(--normal) var(--weich);
}
.eingabe select:hover{border-color:var(--linie-hell)}
.eingabe:focus-within select{border-color:var(--akzent-tief); background:rgba(95,211,188,.045)}
.eingabe select:focus-visible{box-shadow:0 0 0 3px rgba(95,211,188,.2)}
.eingabe select:disabled{opacity:.45; cursor:default}
/* Ohne das zeichnet Windows die aufgeklappte Liste in Systemfarben — hellgrau
   auf weiss mitten in einer dunklen Oberflaeche. */
.eingabe select option{background:var(--flaeche); color:var(--text)}
.eingabe .pfeil{position:absolute; right:.85rem; width:14px; height:14px; color:var(--text-still); pointer-events:none}

input[type=password]{padding-right:3rem}
.eingabe input::placeholder{color:var(--text-still)}
.eingabe input:hover{border-color:var(--linie-hell)}
.eingabe:focus-within input{
  border-color:var(--akzent-tief);
  background:rgba(95,211,188,.045);
}
/* Sichtbarer Fokusring fuer die Tastatur — nie entfernen. */
.eingabe input:focus-visible{box-shadow:0 0 0 3px rgba(95,211,188,.2)}

/* Der Strich, der beim Fokus von links aufzieht. scaleX statt width:
   kein Umbruch, laeuft auf dem Compositor. */
.eingabe::after{
  content:""; position:absolute; left:11px; right:11px; bottom:-1px; height:1.5px;
  background:linear-gradient(90deg,var(--akzent),var(--akzent-tief));
  border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--normal) var(--weich);
}
.eingabe:focus-within::after{transform:scaleX(1)}

/* Dauerhafte Erklaerzeile — nicht als Platzhalter, der beim Tippen verschwindet. */
.helfer{margin-top:.4rem; font-size:11.5px; color:var(--text-still); line-height:1.45}

/* ------------------------------------------------------- Klartext-Umschalter */
.auge{
  position:absolute; right:.3rem;
  width:40px; height:40px;                   /* 44er-Ziel inkl. Rand */
  display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-klein);
  color:var(--text-still); cursor:pointer;
  transition:color var(--schnell) var(--weich), background var(--schnell) var(--weich);
}
.auge:hover{color:var(--text-leise); background:rgba(255,255,255,.05)}
.auge:focus-visible{outline:2px solid var(--akzent-tief); outline-offset:1px}
.auge svg{width:18px; height:18px}
.auge .zu{display:none}
.auge[aria-pressed="true"]{color:var(--akzent)}
.auge[aria-pressed="true"] .auf{display:none}
.auge[aria-pressed="true"] .zu{display:block}

/* ------------------------------------------------------------ Feststelltaste */
.hinweis{
  display:none; align-items:center; gap:.4rem;
  margin-top:.5rem; font-size:11.5px; color:var(--warnung);
  animation:stufe-auf 220ms var(--weich) both;
}
.hinweis.an{display:flex}
.hinweis svg{width:13px; height:13px; flex:none}   /* Zeichen UND Text, nie Farbe allein */

/* ------------------------------------------------------------ Passwortstaerke
   NUR beim Registrieren. Beim Anmelden waere sie Laerm: das Passwort steht
   laengst fest, und eine Bewertung aendert daran nichts mehr. */
.staerke{margin-top:.55rem}
.balken{display:flex; gap:4px}
.balken i{
  flex:1; height:3px; border-radius:2px; background:var(--linie);
  transition:background var(--normal) var(--weich);
}
.staerke .wort{margin-top:.35rem; font-size:11px; color:var(--text-still)}
.staerke[data-stufe="1"] i:nth-child(-n+1){background:var(--fehler)}
.staerke[data-stufe="2"] i:nth-child(-n+2){background:var(--warnung)}
.staerke[data-stufe="3"] i:nth-child(-n+3){background:var(--akzent-tief)}
.staerke[data-stufe="4"] i{background:var(--akzent)}

/* ------------------------------------------------------------------ Merkfeld */
.zeile{display:flex; align-items:center; justify-content:space-between; margin:-.15rem 0 1.35rem}

.merk{display:flex; align-items:center; gap:.55rem; cursor:pointer; font-size:12.5px; color:var(--text-leise); user-select:none; padding:.35rem 0}
.merk input{position:absolute; opacity:0; width:0; height:0}
.kasten{
  width:17px; height:17px; border-radius:5px;
  border:1.5px solid var(--linie-hell); background:rgba(255,255,255,.02);
  display:grid; place-items:center; flex:none;
  transition:background var(--schnell) var(--weich), border-color var(--schnell) var(--weich);
}
.kasten svg{width:11px; height:11px; color:#06120f; stroke-dasharray:16; stroke-dashoffset:16; transition:stroke-dashoffset var(--normal) var(--weich)}
.merk input:checked + .kasten{background:var(--akzent); border-color:var(--akzent)}
.merk input:checked + .kasten svg{stroke-dashoffset:0}
.merk input:focus-visible + .kasten{box-shadow:0 0 0 3px rgba(95,211,188,.22)}

.leise{
  font-size:12.5px; color:var(--text-leise); text-decoration:none; cursor:pointer;
  background:none; border:0; font-family:inherit; padding:0;
  transition:color var(--schnell) var(--weich);
}
.leise:hover{color:var(--akzent)}
.leise:focus-visible{outline:2px solid var(--akzent-tief); outline-offset:3px; border-radius:3px}

/* -------------------------------------------------------------------- Knopf */
.knopf{
  position:relative; width:100%; min-height:48px;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(180deg,var(--akzent),var(--akzent-tief));
  color:#06120f; font:650 14.5px/1 inherit; letter-spacing:.01em;
  border:0; border-radius:var(--r); cursor:pointer; overflow:hidden;
  transition:transform var(--schnell) var(--weich), filter var(--schnell) var(--weich), box-shadow var(--normal) var(--weich);
  box-shadow:0 6px 20px -8px rgba(95,211,188,.55);
}
.knopf:hover{filter:brightness(1.07); box-shadow:0 10px 26px -8px rgba(95,211,188,.7)}
.knopf:active{transform:scale(.985)}          /* Druckgefuehl, ohne Umbruch */
.knopf:focus-visible{outline:2px solid var(--akzent); outline-offset:3px}
.knopf:disabled{cursor:default; filter:none}
.knopf svg{width:16px; height:16px; transition:transform var(--normal) var(--weich)}
.knopf:hover svg{transform:translateX(3px)}

/* Glanz, der einmal ueber den Knopf laeuft — nur beim Zeigen. */
.knopf::after{
  content:""; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-180%) skewX(-18deg);
}
.knopf:hover::after{animation:glanz 780ms var(--weich)}
@keyframes glanz{to{transform:translateX(320%) skewX(-18deg)}}

/* Zweitrangige Handlung. Nie zwei gleich laute Knoepfe nebeneinander — sonst hat
   der Schirm keine erkennbare Hauptsache mehr. (Fehlte bis 0.4.0 ganz, deshalb war
   „Abmelden" genauso gruen wie „Konfiguration".) */
.knopf.zweit{
  background:none; color:var(--text-leise);
  border:1px solid var(--linie); box-shadow:none;
}
.knopf.zweit:hover{background:rgba(255,255,255,.04); color:var(--text); filter:none; box-shadow:none}
.knopf.zweit::after{display:none}
.knopf.zweit .kreisel{border-color:rgba(140,154,158,.3); border-top-color:var(--text-leise)}

/* Gefaehrliche Handlung — sichtbar anders als „nur zweitrangig". */
.knopf.gefahr{
  background:none; color:var(--fehler);
  border:1px solid rgba(255,122,122,.34); box-shadow:none;
}
.knopf.gefahr:hover{background:rgba(255,122,122,.09); filter:none; box-shadow:none}
.knopf.gefahr::after{display:none}

.knopf .inhalt{display:flex; align-items:center; gap:.5rem; transition:opacity var(--schnell) var(--raus)}
.knopf.laedt .inhalt{opacity:0}
.kreisel{
  position:absolute; width:19px; height:19px; opacity:0;
  border:2px solid rgba(6,18,15,.28); border-top-color:#06120f; border-radius:50%;
  transition:opacity var(--schnell) var(--weich);
}
.knopf.laedt .kreisel{opacity:1; animation:drehen .62s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}

/* -------------------------------------------------------------------- Meldung */
.meldung{
  display:none; align-items:flex-start; gap:.5rem;
  margin-top:.9rem; padding:.6rem .7rem;
  border-radius:var(--r-klein); font-size:12.5px; line-height:1.45;
}
.meldung.an{display:flex; animation:stufe-auf 240ms var(--weich) both}
.meldung svg{width:14px; height:14px; flex:none; margin-top:.12rem}
.meldung.schlecht{background:rgba(255,122,122,.09); border:1px solid rgba(255,122,122,.26); color:var(--fehler)}
.meldung.gut{background:rgba(95,211,188,.09); border:1px solid rgba(95,211,188,.26); color:var(--akzent)}

.karte.wackelt{animation:wackeln 360ms cubic-bezier(.36,.07,.19,.97)}
@keyframes wackeln{
  10%,90%{transform:translateX(-1.5px)} 20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)}
}

/* --------------------------------------------------------------------- Fuss */
.fuss{
  margin-top:1.45rem; padding-top:1.15rem; border-top:1px solid var(--linie);
  display:flex; align-items:center; justify-content:center; gap:1rem;
  font-size:12.5px;
}
.fuss .trenner{color:var(--linie-hell)}

/* ============================================================================
   SCHIRMWECHSEL
   Vorwaerts laeuft nach links, zurueck nach rechts — die Richtung sagt, wo man
   in der Abfolge steht.
   ========================================================================= */
.buehne{position:relative}
.schirm{display:none}
.schirm.aktiv{display:block}
.schirm.rein-vor {animation:rein-vor  340ms var(--weich) both}
.schirm.rein-zur {animation:rein-zur  340ms var(--weich) both}
@keyframes rein-vor{from{opacity:0; transform:translateX(22px)} to{opacity:1; transform:none}}
@keyframes rein-zur{from{opacity:0; transform:translateX(-22px)} to{opacity:1; transform:none}}

.zurueck{
  position:absolute; left:.75rem; top:.75rem;
  width:38px; height:38px; display:grid; place-items:center;
  background:none; border:0; border-radius:var(--r-klein);
  color:var(--text-still); cursor:pointer;
  transition:color var(--schnell) var(--weich), background var(--schnell) var(--weich);
}
.zurueck:hover{color:var(--text); background:rgba(255,255,255,.05)}
.zurueck:focus-visible{outline:2px solid var(--akzent-tief); outline-offset:1px}
.zurueck svg{width:17px; height:17px}

.titel{font:600 17px/1.3 inherit; text-align:center; margin:.2rem 0 .3rem}
.untertitel{text-align:center; font-size:12.5px; color:var(--text-still); margin-bottom:1.55rem; line-height:1.5}

/* ============================================================================
   VORSCHLAGSLISTE (Kombinationsfeld)
   ============================================================================
   Liegt ueber allem anderen und schiebt nichts weg — eine Liste, die das Formular
   auseinanderdrueckt, laesst den Knopf unter dem Finger wegrutschen.
   ========================================================================= */
.vorschlagsfeld{position:relative}

.vorschlaege{
  position:absolute; left:0; right:0; top:calc(100% - .3rem); z-index:5;
  margin:0; padding:.28rem; list-style:none;
  max-height:246px; overflow-y:auto;
  background:var(--flaeche-hoch); border:1px solid var(--linie-hell);
  border-radius:var(--r); box-shadow:0 18px 40px -14px rgba(0,0,0,.8);
  animation:stufe-auf 180ms var(--weich) both;
}
.vorschlaege li{
  padding:.5rem .6rem; border-radius:8px; cursor:pointer;
  display:flex; align-items:baseline; gap:.5rem;
  transition:background var(--schnell) var(--weich);
}
/* Zeiger UND Tastatur markieren dieselbe Zeile — sonst hat man zwei Auswahlen. */
.vorschlaege li:hover,
.vorschlaege li[aria-selected="true"]{background:rgba(95,211,188,.13)}
.vorschlaege .v-name{font-weight:600; font-size:14px; color:var(--text)}
.vorschlaege .v-stamm{font-size:12px; color:var(--akzent)}
.vorschlaege .v-zahl{
  margin-left:auto; font-size:11.5px; color:var(--text-still); white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.vorschlaege .v-leer{color:var(--text-still); font-size:12.5px; cursor:default; justify-content:center}
.vorschlaege .v-leer:hover{background:none}

/* ============================================================================
   VERWALTUNG
   ============================================================================
   Die Karte wird hier breiter. Ein Anmeldeformular soll schmal sein, eine Liste
   mit Adressen und Codes nicht — 372 px waeren dort nur Umbruch.
   ========================================================================= */
.karte.weit{width:min(760px,100%)}

.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; letter-spacing:.1em}

/* --------------------------------------------------- Fund nach Code-Pruefung */
.fund{
  border:1px solid rgba(95,211,188,.24); background:rgba(95,211,188,.06);
  border-radius:var(--r); padding:.7rem .85rem; margin-bottom:1.15rem;
  animation:stufe-auf 300ms var(--weich) both;
}
.fund-zeile{display:flex; justify-content:space-between; gap:1rem; font-size:13px; padding:.16rem 0}
.fund-name{color:var(--text-still)}
.fund-wert{color:var(--text); font-weight:600; text-align:right; word-break:break-all}

/* ------------------------------------------------------------------ Reiter */
.reiter{display:flex; gap:.3rem; border-bottom:1px solid var(--linie); margin:1.1rem 0 1.15rem}
.reiter-knopf{
  position:relative; background:none; border:0; cursor:pointer;
  padding:.6rem .85rem; font:500 13.5px/1 inherit; color:var(--text-leise);
  display:flex; align-items:center; gap:.4rem;
  transition:color var(--schnell) var(--weich);
}
.reiter-knopf:hover{color:var(--text)}
.reiter-knopf:focus-visible{outline:2px solid var(--akzent-tief); outline-offset:-2px; border-radius:6px}
.reiter-knopf.aktiv{color:var(--akzent)}
/* Der Balken waechst per scaleX — kein Umbruch, laeuft auf dem Compositor. */
.reiter-knopf::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:-1px; height:2px;
  background:var(--akzent); border-radius:2px;
  transform:scaleX(0); transition:transform var(--normal) var(--weich);
}
.reiter-knopf.aktiv::after{transform:scaleX(1)}
.zahl{
  min-width:18px; padding:.1rem .32rem; border-radius:9px; text-align:center;
  background:var(--linie); color:var(--text-leise); font-size:11px; font-variant-numeric:tabular-nums;
}
.reiter-knopf.aktiv .zahl{background:rgba(95,211,188,.16); color:var(--akzent)}

.bereich{display:none}
.bereich.aktiv{display:block; animation:stufe-auf 300ms var(--weich) both}

/* ------------------------------------------------------------------- Liste */
.liste{display:flex; flex-direction:column; gap:.55rem}
.leerzeile{color:var(--text-still); font-size:13px; text-align:center; padding:1.6rem 0; margin:0}

.eintrag{
  border:1px solid var(--linie); border-radius:var(--r);
  padding:.8rem .9rem; background:rgba(255,255,255,.014);
}
.eintrag.erledigt{opacity:.62}
.eintrag-kopf{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.eintrag-name{font-weight:650; font-size:14.5px}
.eintrag-mail{color:var(--text-leise); font-size:12.5px; word-break:break-all}
.eintrag-zeit{margin-left:auto; color:var(--text-still); font-size:11.5px; white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* Zeichen ist die Farbe NICHT allein — jede Marke traegt auch ein Wort. */
.marke-zustand{
  padding:.16rem .45rem; border-radius:5px; font-size:10.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
}
.marke-zustand.offen      {background:rgba(232,169,75,.14); color:var(--warnung); border:1px solid rgba(232,169,75,.3)}
.marke-zustand.angenommen {background:rgba(95,211,188,.12); color:var(--akzent);  border:1px solid rgba(95,211,188,.3)}
.marke-zustand.abgelehnt  {background:rgba(255,122,122,.1); color:var(--fehler);  border:1px solid rgba(255,122,122,.28)}
.marke-zustand.fertig     {background:rgba(255,255,255,.05); color:var(--text-leise); border:1px solid var(--linie)}

.eintrag-fuss{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.7rem}
.eintrag-fuss .knopf{width:auto; min-height:38px; padding:0 1rem; font-size:13px; flex:none}
.eintrag-fuss .knopf svg{display:none}

.code-anzeige{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.36rem .6rem; border-radius:7px;
  background:rgba(95,211,188,.09); border:1px solid rgba(95,211,188,.26);
  color:var(--akzent);
  font:600 13.5px/1 ui-monospace,"Cascadia Mono",Consolas,monospace; letter-spacing:.14em;
}
.code-anzeige.leer{background:rgba(255,255,255,.03); border-color:var(--linie); color:var(--text-still); letter-spacing:0; font-weight:400}
.nicht-zugestellt{color:var(--fehler); font-size:11.5px; display:flex; align-items:center; gap:.3rem}

/* ============================================================================
   RUECKFRAGE
   ========================================================================= */
dialog#frage{
  border:1px solid var(--linie); border-radius:var(--r-gross);
  background:linear-gradient(180deg,var(--flaeche-hoch),var(--flaeche));
  color:var(--text); padding:1.8rem 1.6rem 1.4rem;
  width:min(360px,calc(100% - 2rem));
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
}
dialog#frage::backdrop{background:rgba(4,7,8,.72); backdrop-filter:blur(2px)}
dialog#frage[open]{animation:stufe-auf 260ms var(--weich) both}
dialog#frage .titel{margin-top:0}
dialog#frage .untertitel{margin-bottom:1.4rem}
.frage-knoepfe{display:flex; gap:.6rem}
.frage-knoepfe .knopf{flex:1}

/* ============================================================================
   FASSUNGSANZEIGE
   Unten rechts, leise. Sie beantwortet die erste Frage jeder Fehlermeldung —
   „welcher Stand laeuft da eigentlich?" — ohne dass jemand nachfragen muss.
   ========================================================================= */
.fassung{
  position:fixed; right:.85rem; bottom:.7rem; z-index:2;
  display:flex; align-items:center; gap:.45rem;
  font:400 11px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;
  color:var(--text-still); letter-spacing:.03em;
  opacity:0; transition:opacity 600ms var(--weich) 900ms;
}
.fassung.da{opacity:.75}

/* Das Abzeichen erscheint NUR im Testbereich. Wer es sieht, weiss sofort, dass
   er nicht im Betrieb ist — genau dafuer ist es da. */
.fassung .abzeichen{
  padding:.16rem .38rem; border-radius:4px;
  background:rgba(232,169,75,.14); border:1px solid rgba(232,169,75,.35);
  color:var(--warnung); font-weight:600; letter-spacing:.08em;
}

/* ============================================================================
   WENIGER BEWEGUNG — nicht abgeschwaecht, sondern aus. Alles bleibt lesbar
   und bedienbar; nur der Weg dorthin entfaellt.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .zeichen .stab{transform:scaleY(1)}
  .zeichen .kopf{opacity:1}
  .zeichen .achse{stroke-dashoffset:0}
  .fassung{opacity:.75}
}

/* Sehr kleine Geraete: enger, aber nie gequetscht. */
@media (max-height:640px){
  .marke{margin-bottom:1.25rem}
  .zeichen{width:38px; height:38px}
}