/* ---------- Weiches Umschalten zwischen Hell und Dunkel ----------
   Die Farben sind als echte Farbwerte angemeldet (@property). Dadurch kann der
   Browser sie beim Umschalten Schritt für Schritt überblenden, statt sie
   von einem Bild aufs nächste zu tauschen. Alles, was diese Farben benutzt —
   Flächen, Schrift, Linien, Farbverläufe —, gleitet im Gleichschritt mit.
   Beim Laden der Seite gleitet nichts: Das Skript /thema.js setzt das
   Dunkel-Merkmal, bevor die Seite zum ersten Mal gezeichnet wird.
   Ältere Browser ohne @property schalten wie bisher sofort um. */
@property --grund      {syntax:"<color>";inherits:true;initial-value:#faf9f7}
@property --karte      {syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --text       {syntax:"<color>";inherits:true;initial-value:#1c1b19}
@property --leise      {syntax:"<color>";inherits:true;initial-value:#6f6b64}
@property --linie      {syntax:"<color>";inherits:true;initial-value:#e6e2db}
@property --dunkel     {syntax:"<color>";inherits:true;initial-value:#2b2a27}
@property --knopftext  {syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --privat       {syntax:"<color>";inherits:true;initial-value:#8fc1e3}
@property --privat-hell  {syntax:"<color>";inherits:true;initial-value:#f2f8fc}
@property --privat-tief  {syntax:"<color>";inherits:true;initial-value:#2f5f83}
@property --studium      {syntax:"<color>";inherits:true;initial-value:#e2a0a0}
@property --studium-hell {syntax:"<color>";inherits:true;initial-value:#fdf4f4}
@property --studium-tief {syntax:"<color>";inherits:true;initial-value:#8b3a3a}
@property --beruf        {syntax:"<color>";inherits:true;initial-value:#84af97}
@property --beruf-hell   {syntax:"<color>";inherits:true;initial-value:#f1f7f3}
@property --beruf-tief   {syntax:"<color>";inherits:true;initial-value:#2f5c45}
@property --gelb         {syntax:"<color>";inherits:true;initial-value:#e3c26a}
@property --gelb-hell    {syntax:"<color>";inherits:true;initial-value:#fdf9ef}
@property --gelb-tief    {syntax:"<color>";inherits:true;initial-value:#8a6d1f}
@property --grau         {syntax:"<color>";inherits:true;initial-value:#a3a6ad}
@property --grau-hell    {syntax:"<color>";inherits:true;initial-value:#f4f4f6}
@property --grau-tief    {syntax:"<color>";inherits:true;initial-value:#4b4e55}
@property --ju          {syntax:"<color>";inherits:true;initial-value:#cfff00}
@property --ju-hell     {syntax:"<color>";inherits:true;initial-value:#f8ffe0}
@property --ju-tief     {syntax:"<color>";inherits:true;initial-value:#5a6e00}
/* Zusätzliche Farben der überarbeiteten Plattform-Seiten */
@property --akzent       {syntax:"<color>";inherits:true;initial-value:#0071e3}
@property --akzent-hover {syntax:"<color>";inherits:true;initial-value:#0077ed}
@property --akzent-text  {syntax:"<color>";inherits:true;initial-value:#0066cc}
@property --fuellung     {syntax:"<color>";inherits:true;initial-value:#f2f2f4}
@property --glas         {syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --schatten     {syntax:"<color>";inherits:true;initial-value:#000000}
@property --fehler-text  {syntax:"<color>";inherits:true;initial-value:#c4271c}
@property --erfolg-text  {syntax:"<color>";inherits:true;initial-value:#1c7a36}
@property --fehler-grund {syntax:"<color>";inherits:true;initial-value:#fde9e8}
/* Die Startseite und die Anmeldung haben ihr eigenes Farbset (.buehne) */
@property --b-grund       {syntax:"<color>";inherits:true;initial-value:#fbfbfd}
@property --b-text        {syntax:"<color>";inherits:true;initial-value:#1d1d1f}
@property --b-text-ende   {syntax:"<color>";inherits:true;initial-value:#6e6e73}
@property --b-leise       {syntax:"<color>";inherits:true;initial-value:#6e6e73}
@property --b-blau        {syntax:"<color>";inherits:true;initial-value:#0071e3}
@property --b-blau-hover  {syntax:"<color>";inherits:true;initial-value:#0077ed}
@property --b-fokus       {syntax:"<color>";inherits:true;initial-value:#007dfa}
@property --b-licht-1     {syntax:"<color>";inherits:true;initial-value:#0071e3}
@property --b-licht-2     {syntax:"<color>";inherits:true;initial-value:#af52de}
@property --b-licht-3     {syntax:"<color>";inherits:true;initial-value:#ff9f0a}
@property --b-symbol-licht{syntax:"<color>";inherits:true;initial-value:#1446d2}
@property --b-feld        {syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --b-feld-linie  {syntax:"<color>";inherits:true;initial-value:#d2d2d7}

/* Dauer und Verlauf des Übergleitens: etwas über eine halbe Sekunde, sanft an-
   und auslaufend — zu schnell wirkt wie ein Flackern, zu langsam wie Verzögerung. */
html,
.buehne{
  transition-property:
    --grund,--karte,--text,--leise,--linie,--dunkel,--knopftext,
    --privat,--privat-hell,--privat-tief,--studium,--studium-hell,--studium-tief,
    --beruf,--beruf-hell,--beruf-tief,--gelb,--gelb-hell,--gelb-tief,--grau,--grau-hell,--grau-tief,--ju,--ju-hell,--ju-tief,
    --akzent,--akzent-hover,--akzent-text,--fuellung,--glas,--schatten,--fehler-text,--erfolg-text,--fehler-grund,
    --b-grund,--b-text,--b-text-ende,--b-leise,--b-blau,--b-blau-hover,--b-fokus,
    --b-licht-1,--b-licht-2,--b-licht-3,--b-symbol-licht,--b-feld,--b-feld-linie;
  transition-duration:.65s;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}

/* Das gesamte Design der Plattform steht hier — an genau einer Stelle. */
:root{
  --grund:#faf9f7; --karte:#ffffff; --text:#1c1b19; --leise:#6f6b64;
  --linie:#e6e2db; --dunkel:#2b2a27; --knopftext:#ffffff; --rand:14px;
  color-scheme:light;

  --privat:#8fc1e3;  --privat-hell:#f2f8fc;  --privat-tief:#2f5f83;
  --studium:#e2a0a0; --studium-hell:#fdf4f4; --studium-tief:#8b3a3a;
  --beruf:#84af97;   --beruf-hell:#f1f7f3;   --beruf-tief:#2f5c45;
  --gelb:#e3c26a;    --gelb-hell:#fdf9ef;    --gelb-tief:#8a6d1f;
  --grau:#a3a6ad;    --grau-hell:#f4f4f6;    --grau-tief:#4b4e55;
  --ju:#cfff00;      --ju-hell:#f8ffe0;      --ju-tief:#5a6e00;
}
/* Dunkles Farbschema — richtet sich nach dem System des Besuchers.
   Greift, sobald das Skript /thema.js das Merkmal gesetzt hat. */
html[data-thema="dunkel"]{
  --grund:#181715; --karte:#232220; --text:#f1efea; --leise:#a6a199;
  --linie:#38362f; --dunkel:#eeece6; --knopftext:#1c1b19;
  color-scheme:dark;

  --privat:#5b93c2;  --privat-hell:#20303c;  --privat-tief:#bcdcf5;
  --studium:#bf7373; --studium-hell:#3a2626; --studium-tief:#f0bcbc;
  --beruf:#5c8f74;   --beruf-hell:#1f2f27;   --beruf-tief:#a9dcbe;
  --gelb:#c6a24a;    --gelb-hell:#332c18;    --gelb-tief:#eccf82;
  --grau:#8a8d94;    --grau-hell:#27282b;    --grau-tief:#d0d2d8;
  --ju:#cfff00;      --ju-hell:#262b0c;      --ju-tief:#e0ff66;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--grund); color:var(--text);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2;margin:0}
.leise{color:var(--leise)}

/* ---------- Symbole: gezeichnete Icons, keine Emojis ---------- */
.icon{display:block;flex:none}

/* ---------- Kopfzeile ---------- */
.kopf{
  background:var(--karte); border-bottom:1px solid var(--linie);
  padding:14px 24px; display:flex; align-items:center; gap:16px;
}
.kopf .marke{font-weight:700; letter-spacing:-.02em}
.kopf .rechts{margin-left:auto; display:flex; align-items:center; gap:14px}
.kuerzel{
  width:32px;height:32px;border-radius:50%;background:var(--linie);
  display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--leise)
}

/* ---------- Flächen ---------- */
.mitte{max-width:1040px;margin:0 auto;padding:40px 24px 64px}
.schmal{max-width:660px}

/* ---------- Knöpfe ---------- */
.knopf{
  display:inline-block;border:0;border-radius:10px;padding:12px 20px;
  background:var(--dunkel);color:var(--knopftext);font:inherit;font-weight:600;
  cursor:pointer;text-decoration:none;text-align:center;
}
.knopf:hover{opacity:.9}
.knopf.breit{width:100%}
.knopf.gross{padding:15px 20px;font-size:1.02rem}
.knopf.leise{background:transparent;color:var(--leise);border:1px solid var(--linie)}
.knopf.leise:hover{opacity:1;border-color:var(--leise);color:var(--text)}

/* Kopier-Knopf unter einem Textfeld */
.kopieren{margin-top:10px;padding:9px 16px;font-size:.88rem}
.kopieren.geschafft{border-color:var(--beruf);color:var(--beruf-tief);background:var(--beruf-hell)}

/* Lösch-Knopf: erst nach einer Weile Gedrückthalten füllt er sich und löst aus —
   Loslassen davor bricht ab, so verschwindet nichts aus Versehen. */
.knopf.gefahr{background:var(--studium-tief)}
.knopf.halten{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}
.halten-fuellung{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.4)}
.halten-text{position:relative}

/* ---------- Anmeldung und schmale Karten ---------- */
.mittig{min-height:100vh;display:grid;place-items:center;padding:24px}
.karte{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--rand);
  padding:36px;width:100%;max-width:400px;box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.feld input{
  width:100%;padding:11px 13px;border:1px solid var(--linie);border-radius:10px;
  font:inherit;background:var(--karte);color:var(--text)
}
.feld input:focus{outline:2px solid var(--dunkel);outline-offset:1px;border-color:transparent}
.fehler{
  background:#fdf4f4;border:1px solid var(--studium);color:var(--studium-tief);
  border-radius:10px;padding:11px 14px;font-size:.9rem;margin-bottom:18px
}
.hinweis{
  background:var(--privat-hell);border:1px solid var(--privat);color:var(--privat-tief);
  border-radius:10px;padding:11px 14px;font-size:.9rem;margin-bottom:18px
}
.erfolg{
  background:var(--beruf-hell);border:1px solid var(--beruf);color:var(--beruf-tief);
  border-radius:10px;padding:11px 14px;font-size:.9rem;margin-bottom:18px
}

/* ---------- Öffentliche Startseite: nur Zeichen, Wort, Knopf ---------- */
.tor{text-align:center;max-width:360px;padding:44px 36px 36px}
.tor h1{font-size:1.5rem;margin-bottom:.3rem}
.tor p{margin:0 0 1.8rem;font-size:.92rem}
.tor .feld,.tor .fehler,.tor .hinweis,.tor .erfolg{text-align:left}
.tor-zeichen{
  display:grid;place-items:center;width:54px;height:54px;margin:0 auto 18px;
  border-radius:15px;background:var(--grund);border:1px solid var(--linie);color:var(--leise)
}

/* ---------- Arbeitsbereiche ---------- */
.bereich{
  border:1px solid var(--ton);background:var(--ton-hell);
  border-radius:var(--rand);padding:26px 22px 22px;margin-bottom:26px;position:relative
}
.bereich > .titel{
  position:absolute;top:-10px;left:18px;background:var(--ton-hell);
  padding:0 8px;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ton-tief)
}
.bereich[data-farbe="privat"] {--ton:var(--privat); --ton-hell:var(--privat-hell); --ton-tief:var(--privat-tief)}
.bereich[data-farbe="studium"]{--ton:var(--studium);--ton-hell:var(--studium-hell);--ton-tief:var(--studium-tief)}
.bereich[data-farbe="beruf"]  {--ton:var(--beruf);  --ton-hell:var(--beruf-hell);  --ton-tief:var(--beruf-tief)}
.bereich[data-farbe="gelb"]   {--ton:var(--gelb);   --ton-hell:var(--gelb-hell);   --ton-tief:var(--gelb-tief)}
.bereich[data-farbe="grau"]   {--ton:var(--grau);   --ton-hell:var(--grau-hell);   --ton-tief:var(--grau-tief)}
.bereich[data-farbe="ju"]     {--ton:var(--ju);     --ton-hell:var(--ju-hell);     --ton-tief:var(--ju-tief)}

/* Die Kacheln sind für alle gleich klein — es gibt keine Auswahl für Größe oder Form. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}

/* App-Kachel: neutral, weiß, mit der Farbe des Bereichs als Akzent */
.kachel{
  background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  padding:10px;display:flex;align-items:center;gap:10px;text-decoration:none;
  position:relative;transition:border-color .12s, transform .12s
}
.kachel:hover{border-color:var(--ton);transform:translateY(-1px)}
.kachel .symbol{
  width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--ton-hell);color:var(--ton-tief)
}
.kachel .symbol svg{width:17px;height:17px}
/* Der Name wird nie abgeschnitten: Er darf umbrechen, notfalls im Wort.
   Beide Zeilen sitzen eng beieinander und mittig neben dem Symbol. */
.kachel .text{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px}
.kachel .name{
  font-weight:600;font-size:.8rem;line-height:1.22;
  overflow-wrap:anywhere
}
.kachel .unter{
  font-size:.69rem;color:var(--leise);line-height:1.3;
  overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.kachel .unter:empty{display:none}
/* Kachel und ihr Zahnrad liegen nebeneinander, nicht ineinander:
   ein Klick auf die Kachel öffnet die App, einer aufs Zahnrad das Fenster. */
.kachelbox{position:relative;display:flex}
.kachelbox > .kachel{flex:1;min-width:0}
.kachelbox .zahnrad{
  position:absolute;top:6px;right:6px;opacity:0;transition:opacity .12s,color .12s;
  color:var(--leise);background:var(--karte);border:1px solid var(--linie);
  border-radius:8px;padding:4px;line-height:0;cursor:pointer
}
.kachelbox:hover .zahnrad,
.kachelbox .zahnrad:focus-visible{opacity:1}
.kachelbox .zahnrad:hover{color:var(--text);border-color:var(--leise)}
.kachelbox .zahnrad:focus-visible{outline:2px solid var(--dunkel);outline-offset:1px}
@media (hover:none){ .kachelbox .zahnrad{opacity:1} }

.kachel.neu{
  border-style:dashed;background:transparent;justify-content:center;
  color:var(--ton-tief);font-weight:600;font-size:.87rem
}
.kachel.neu:hover{border-color:var(--ton);background:var(--karte)}

.leerhinweis{font-size:.85rem;color:var(--leise);margin:0 0 14px}

@media (max-width:520px){
  .mitte{padding:28px 16px 48px}
  .karte{padding:28px 22px}
}

/* ---------- Formulare: App anlegen, Einstellungen ---------- */
.feld select{
  width:100%;padding:11px 13px;border:1px solid var(--linie);border-radius:10px;
  font:inherit;background:var(--karte);color:var(--text);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--leise) 50%),
                   linear-gradient(135deg,var(--leise) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px
}
.feld select:focus{outline:2px solid var(--dunkel);outline-offset:1px;border-color:transparent}
.formular .feld{margin-bottom:26px}
.unterzeile{font-size:.8rem;color:var(--leise);margin:7px 0 0;line-height:1.5}

/* Symbolauswahl — Radioknöpfe als kleine Kacheln mit Icon */
.symbolfeld{display:flex;flex-wrap:wrap;gap:8px}
.symbolwahl{cursor:pointer}
.symbolwahl input{position:absolute;opacity:0;width:0;height:0}
.symbolwahl span{
  display:grid;place-items:center;width:42px;height:42px;color:var(--leise);
  border:1px solid var(--linie);border-radius:11px;background:var(--karte);
  transition:border-color .12s,background .12s,color .12s
}
.symbolwahl:hover span{color:var(--text)}
.symbolwahl input:checked + span{border-color:var(--dunkel);background:var(--grund);color:var(--text)}
.symbolwahl input:focus-visible + span{outline:2px solid var(--dunkel);outline-offset:2px}

/* Auswahl zwischen zwei Möglichkeiten, als Karten */
.wahl{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  border:1px solid var(--linie);border-radius:11px;padding:13px 15px;
  background:var(--karte);margin-bottom:9px;transition:border-color .12s
}
.wahl:hover{border-color:var(--leise)}
.wahl:has(input:checked){border-color:var(--dunkel);background:var(--grund)}
.wahl input{margin-top:.32em;flex:none;accent-color:var(--dunkel)}
.wahl strong{display:block;font-size:.93rem;font-weight:600}
.wahl .beispiel{display:block;font-size:.8rem;color:var(--leise);margin-top:2px}

/* Abschnitt auf der Einstellungsseite */
.block{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--rand);
  padding:24px 24px 26px;margin-bottom:22px
}
.block h2{font-size:1.05rem;margin-bottom:1.1rem}
.block .formular .feld:last-of-type{margin-bottom:20px}

/* ---------- App ist angelegt ---------- */
.fertig{text-align:center;padding:8px 0 4px}
.grosssymbol{
  display:grid;place-items:center;width:60px;height:60px;margin:0 auto 16px;
  border-radius:16px;background:var(--karte);border:1px solid var(--linie);color:var(--leise)
}
.angaben{
  display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:2.2rem 0 0;
  padding:18px 20px;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--rand);font-size:.92rem
}
.angaben dt{color:var(--leise);font-size:.85rem}
.angaben dd{margin:0;overflow-wrap:anywhere}
code{
  font:.86em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--grund);border:1px solid var(--linie);border-radius:6px;padding:1px 6px
}
.prompt{
  width:100%;padding:16px 18px;border:1px solid var(--linie);border-radius:var(--rand);
  background:var(--karte);color:var(--text);resize:vertical;
  font:.82rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;overflow-wrap:normal
}
.prompt:focus{outline:2px solid var(--dunkel);outline-offset:1px;border-color:transparent}

/* ---------- Fenster am Zahnrad einer App ---------- */
.fenster{
  padding:0;border:1px solid var(--linie);border-radius:var(--rand);
  background:var(--karte);color:var(--text);width:min(600px,calc(100vw - 32px));
  max-height:min(86vh,780px);box-shadow:0 18px 48px rgba(0,0,0,.18)
}
.fenster::backdrop{background:rgba(28,27,25,.42)}
.fenster-kopf{
  display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--linie);position:sticky;top:0;
  background:var(--karte);border-radius:var(--rand) var(--rand) 0 0;z-index:1
}
.fenster-symbol{
  width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--grund);border:1px solid var(--linie);color:var(--leise)
}
.fenster-titel{
  font-weight:600;letter-spacing:-.01em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.fenster-zu{
  margin-left:auto;flex:none;border:1px solid var(--linie);background:transparent;
  color:var(--leise);border-radius:8px;padding:5px;line-height:0;cursor:pointer
}
.fenster-zu:hover{color:var(--text);border-color:var(--leise)}
.fenster-inhalt{padding:20px 18px 22px;overflow-y:auto;max-height:calc(86vh - 68px)}
.fenster-inhalt h3{font-size:.95rem;margin:1.8rem 0 .8rem}
.fenster-inhalt h3:first-of-type{margin-top:1.6rem}
.formular.eng .feld{margin-bottom:16px}
.angaben.klein{margin:0;padding:14px 16px;font-size:.86rem;gap:8px 18px}

/* ---------- Einstellungen: Auswahlknöpfe und Reihenfolge ---------- */
.wahlreihe{display:flex;gap:8px;flex-wrap:wrap}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl span{
  display:inline-block;padding:9px 16px;border:1px solid var(--linie);border-radius:10px;
  font-size:.9rem;background:var(--karte);cursor:pointer
}
.wahl input:checked + span{border-color:var(--dunkel);background:var(--grund);font-weight:600}
.wahl input:focus-visible + span{outline:2px solid var(--dunkel);outline-offset:1px}

/* ---------- Benutzerverwaltung ----------
   Jeder Benutzer ist erst nur eine Zeile (<summary>) — die Einstellungen
   dahinter kommen beim Aufklappen, nativ per <details>, ohne JavaScript. */
.mitgliedskarte{
  border:1px solid var(--linie);border-radius:10px;background:var(--karte);
  margin-bottom:10px;overflow:hidden
}
.mitgliedskarte summary{
  display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;
  list-style:none;user-select:none
}
.mitgliedskarte summary::-webkit-details-marker{display:none}
.mitgliedskarte summary:hover{background:var(--grund)}
.mitgliedskarte summary:focus-visible{outline:2px solid var(--dunkel);outline-offset:-2px}
.mitgliedsname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mitgliedspfeil{flex:none;color:var(--leise);display:grid;place-items:center;transition:transform .15s}
.mitgliedskarte[open] .mitgliedspfeil{transform:rotate(180deg)}
.mitgliedsinhalt{padding:2px 16px 18px;border-top:1px solid var(--linie)}

.ordnungsbereich{margin-bottom:16px}
.ordnungstitel{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--leise);margin-bottom:4px
}
.ordnung{list-style:none;margin:0;padding:0;border:1px solid var(--linie);border-radius:10px;background:var(--karte)}
.ordnung li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--linie)}
.ordnung li:first-child{border-top:none}
.ordnung .sym{
  width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:var(--grund);color:var(--leise)
}
.ordnung .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.ordnung form{display:flex;gap:6px;margin:0}
.pfeil{
  border:1px solid var(--linie);background:var(--karte);color:var(--leise);border-radius:8px;
  padding:5px 7px;line-height:0;cursor:pointer
}
.pfeil:hover:not(:disabled){color:var(--text);border-color:var(--leise)}
.pfeil:disabled{opacity:.3;cursor:default}
.pfeil:focus-visible{outline:2px solid var(--dunkel);outline-offset:1px}

/* ---------- Zwei-Faktor: QR-Bild und Ersatzcodes ---------- */
.qr{
  display:grid;place-items:center;margin:0 0 1.2rem;padding:16px;
  background:var(--karte);border:1px solid var(--linie);border-radius:12px
}
.qr svg{display:block;max-width:100%;height:auto}
.codeliste{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  margin:1.4rem 0 1rem
}
.ersatzcode{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;letter-spacing:.04em;
  background:var(--karte);border:1px solid var(--linie);border-radius:9px;padding:10px 12px;text-align:center
}

/* ---------- Startseite: Name groß, ein Knopf, sonst nichts ----------
   Im Stil von Apple: Systemschrift (auf Apple-Geräten SF Pro), sehr große,
   eng laufende Überschrift mit zarter Farbabstufung, viel Weißraum, ein Symbol
   wie ein App-Icon, der Knopf als blaue Pille. Hell und dunkel wie das System;
   im Dunkeln, wie bei Apple, auf reinem Schwarz. Gilt nur für diese Seite. */
.buehne{
  --b-grund:#fbfbfd; --b-text:#1d1d1f; --b-text-ende:#6e6e73; --b-leise:#6e6e73;
  --b-blau:#0071e3; --b-blau-hover:#0077ed; --b-fokus:rgba(0,125,250,.6);
  --b-licht-1:rgba(0,113,227,.13); --b-licht-2:rgba(175,82,222,.10); --b-licht-3:rgba(255,159,10,.09);
  --b-symbol-licht:rgba(20,70,210,.30); --b-feld:rgba(255,255,255,.72); --b-feld-linie:rgba(0,0,0,.10);
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center;
  padding:max(40px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
          max(40px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background:var(--b-grund); color:var(--b-text);
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html[data-thema="dunkel"] .buehne{
  --b-grund:#000000; --b-text:#f5f5f7; --b-text-ende:#86868b; --b-leise:#a1a1a6;
  --b-blau:#0071e3; --b-blau-hover:#2184f0; --b-fokus:rgba(41,151,255,.7);
  --b-licht-1:rgba(10,132,255,.26); --b-licht-2:rgba(191,90,242,.20); --b-licht-3:rgba(255,159,10,.10);
  --b-symbol-licht:rgba(10,132,255,.42); --b-feld:rgba(28,28,30,.72); --b-feld-linie:rgba(255,255,255,.14);
}
/* Weiche Farbflächen im Hintergrund, kaum wahrnehmbar — wie ein Schimmer. */
.buehne-licht{
  position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 38% at 22% 18%, var(--b-licht-1) 0%, transparent 70%),
    radial-gradient(40% 36% at 82% 30%, var(--b-licht-2) 0%, transparent 70%),
    radial-gradient(46% 40% at 55% 92%, var(--b-licht-3) 0%, transparent 72%);
  filter:blur(30px);
  animation:licht-einblenden 1.6s ease-out both;
}
.buehne-inhalt{
  text-align:center; max-width:min(1100px, 92vw);
  display:flex; flex-direction:column; align-items:center;
}
/* Das KW-Symbol (freigestelltes Bild, /kw-symbol.webp). Der Schatten folgt der Form
   des Icons, nicht einem Rechteck. */
.app-symbol{
  display:block; width:clamp(72px, 10vw, 96px); height:auto; aspect-ratio:1;
  filter:drop-shadow(0 14px 24px var(--b-symbol-licht)) drop-shadow(0 2px 4px rgba(0,0,0,.14));
  margin:0 0 clamp(1.6rem, 4vw, 2.4rem);
}
.grossname{
  font-size:clamp(2.6rem, 9.5vw, 6.5rem);
  font-weight:700; letter-spacing:-.045em; line-height:1.04;
  margin:0; text-wrap:balance; padding-bottom:.06em; /* Platz für Unterlängen beim Farbverlauf */
  color:var(--b-text);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grossname{
    background:linear-gradient(180deg, var(--b-text) 35%, var(--b-text-ende) 130%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
}
.unterton{
  margin:clamp(.7rem, 1.8vw, 1.1rem) 0 clamp(2rem, 5vw, 3rem);
  font-size:clamp(1.15rem, 2.7vw, 1.75rem); font-weight:500;
  letter-spacing:-.005em; line-height:1.25; color:var(--b-leise);
}
.pille{
  display:inline-block; border:0; border-radius:980px;
  padding:12px 28px; min-width:128px;
  background:var(--b-blau); color:#fff;
  font:inherit; font-size:1.0625rem; font-weight:400; letter-spacing:-.01em; line-height:1.3;
  text-decoration:none; cursor:pointer;
  transition:background-color .2s ease, transform .2s cubic-bezier(.2,.7,.2,1);
}
.pille:hover{background:var(--b-blau-hover)}
.pille:active{transform:scale(.97)}
.pille:focus-visible{outline:none; box-shadow:0 0 0 4px var(--b-fokus)}

/* Sanftes Einblenden, nacheinander von oben nach unten. */
@keyframes aufsteigen{
  from{opacity:0; transform:translateY(16px) scale(.985)}
  to{opacity:1; transform:none}
}
@keyframes licht-einblenden{from{opacity:0} to{opacity:1}}
.app-symbol, .grossname, .unterton, .pille{
  animation:aufsteigen .95s cubic-bezier(.2,.7,.2,1) both;
}
.app-symbol{animation-delay:.05s}
.grossname{animation-delay:.18s}
.unterton{animation-delay:.3s}
.pille{animation-delay:.42s}
@media (prefers-reduced-motion:reduce){
  .app-symbol, .grossname, .unterton, .pille, .buehne-licht{animation:none}
  .pille{transition:none}
}

/* ---------- Fenster auf der Übersicht: Einstellungen und "App anlegen" ----------
   Beides liegt seit 2026-09-10 nicht mehr auf eigenen Seiten, sondern als
   Fenster über der Übersicht. Deshalb etwas breiter als das Fenster einer App,
   und die Abschnitte darin sind keine eigenen Karten mehr — sie stehen ja
   schon auf einer. */
.fenster.weit{width:min(760px,calc(100vw - 32px))}
.fenster.klein{width:min(380px,calc(100vw - 32px))}
.fenster-inhalt .block{
  background:transparent;border:0;border-radius:0;padding:0;margin:0 0 24px
}
.fenster-inhalt .block + .block{border-top:1px solid var(--linie);padding-top:24px}
.fenster-inhalt .block:last-child{margin-bottom:0}
.fenster-inhalt .block h2{font-size:.98rem;margin-bottom:1rem}
.fenster-inhalt .block > .formular:last-child .knopf:last-child{margin-bottom:0}

/* ---------- Einstellungen: Sidebar mit Kategorien ----------
   Links die Kategorien (Allgemein, Sicherheit, Prompt, Benutzerverwaltung),
   rechts der Inhalt der gewählten — umgeschaltet von /kategorien.js.
   Auf schmalen Bildschirmen wird die Sidebar zu einer Leiste über dem Inhalt. */
.einstellungen-layout{display:flex;gap:22px;align-items:flex-start}
.einstellungen-nav{
  display:flex;flex-direction:column;gap:2px;flex:none;width:168px;
  position:sticky;top:0
}
.einstellungen-nav-knopf{
  display:block;width:100%;text-align:left;border:0;border-radius:9px;
  padding:9px 12px;background:transparent;color:var(--leise);font:inherit;
  font-size:.9rem;font-weight:600;cursor:pointer
}
.einstellungen-nav-knopf:hover{color:var(--text);background:var(--grund)}
.einstellungen-nav-knopf[aria-current="true"]{color:var(--text);background:var(--grund)}
.einstellungen-nav-knopf:focus-visible{outline:2px solid var(--dunkel);outline-offset:1px}
.einstellungen-kategorien{flex:1;min-width:0}

@media (max-width:640px){
  .einstellungen-layout{flex-direction:column;gap:14px}
  .einstellungen-nav{
    flex-direction:row;flex-wrap:wrap;width:auto;position:static;
    border-bottom:1px solid var(--linie);padding-bottom:10px
  }
}

/* Das Zahnrad in der Kopfzeile öffnet die Einstellungen. */
.kopf .zahnrad-kopf{
  border:0;background:transparent;color:var(--leise);
  padding:2px;line-height:0;cursor:pointer;border-radius:8px
}
.kopf .zahnrad-kopf:hover{color:var(--text)}
.kopf .zahnrad-kopf:focus-visible{outline:2px solid var(--dunkel);outline-offset:2px}

/* Die gestrichelte Kachel "App anlegen" ist jetzt ein Knopf, kein Verweis. */
button.kachel{font:inherit;color:inherit;cursor:pointer;width:100%}
button.kachel.neu{color:var(--ton-tief)}

/* ---------- Einstellungen: schlank und kompakt ----------
   Schmaleres Fenster, kleinere Knöpfe und Felder, engere Abstände.
   Gilt nur für das Einstellungsfenster. */
#fenster-einstellungen{width:min(640px,calc(100vw - 32px));font-size:.88rem;line-height:1.5}
#fenster-einstellungen .fenster-kopf{padding:9px 14px;gap:10px}
#fenster-einstellungen .fenster-symbol{width:26px;height:26px;border-radius:7px}
#fenster-einstellungen .fenster-symbol svg{width:15px;height:15px}
#fenster-einstellungen .fenster-titel{font-size:.95rem}
#fenster-einstellungen .fenster-zu{padding:3px;border-radius:7px}
#fenster-einstellungen .fenster-zu svg{width:14px;height:14px}
#fenster-einstellungen .fenster-inhalt{padding:14px 16px 16px;max-height:calc(86vh - 48px)}
#fenster-einstellungen .einstellungen-layout{gap:16px}
#fenster-einstellungen .einstellungen-nav{width:132px}
#fenster-einstellungen .einstellungen-nav-knopf{padding:6px 10px;font-size:.84rem;border-radius:7px}

#fenster-einstellungen .knopf,
#fenster-einstellungen .knopf.gross{
  padding:6px 14px;font-size:.84rem;font-weight:600;border-radius:8px
}
#fenster-einstellungen .knopf.breit{width:auto}
#fenster-einstellungen .kopieren{margin-top:8px;padding:6px 12px;font-size:.82rem}

#fenster-einstellungen .block{margin:0 0 16px}
#fenster-einstellungen .block + .block{padding-top:16px}
#fenster-einstellungen .block h2{font-size:.92rem;margin-bottom:.85rem}
#fenster-einstellungen .block h3,
#fenster-einstellungen .fenster-inhalt h3{font-size:.86rem;margin:1.1rem 0 .5rem}
#fenster-einstellungen .unterzeile{font-size:.78rem;margin:4px 0 0;line-height:1.45}

#fenster-einstellungen .feld,
#fenster-einstellungen .formular .feld{margin-bottom:12px}
#fenster-einstellungen .block .formular .feld:last-of-type{margin-bottom:12px}
#fenster-einstellungen .feld label{font-size:.8rem;margin-bottom:4px}
#fenster-einstellungen .feld input,
#fenster-einstellungen .feld select{padding:6px 10px;font-size:.88rem;border-radius:8px}
#fenster-einstellungen .feld select{padding-right:32px}
#fenster-einstellungen .prompt{padding:10px 12px;font-size:.78rem}

#fenster-einstellungen .fehler,
#fenster-einstellungen .hinweis,
#fenster-einstellungen .erfolg{padding:7px 12px;font-size:.84rem;margin-bottom:12px;border-radius:8px}

#fenster-einstellungen .wahlreihe{gap:6px}
#fenster-einstellungen .wahl span{padding:5px 12px;font-size:.84rem;border-radius:8px}
#fenster-einstellungen .wahl{padding:9px 12px;margin-bottom:6px;border-radius:9px}

#fenster-einstellungen .mitgliedskarte{margin-bottom:6px;border-radius:9px}
#fenster-einstellungen .mitgliedskarte summary{padding:8px 12px}
#fenster-einstellungen .mitgliedsinhalt{padding:2px 12px 12px}

#fenster-einstellungen .ordnungsbereich{margin-bottom:10px}
#fenster-einstellungen .ordnung li{padding:4px 10px;gap:8px}
#fenster-einstellungen .ordnung .sym{width:22px;height:22px;border-radius:6px}
#fenster-einstellungen .ordnung .nm{font-size:.85rem}
#fenster-einstellungen .pfeil{padding:3px 5px;border-radius:6px}

/* "Neuen Benutzer anlegen": der Knopf klappt das Formular auf (nativ per <details>). */
.neuer-benutzer > summary{list-style:none;cursor:pointer;user-select:none}
.neuer-benutzer > summary::-webkit-details-marker{display:none}
.neuer-benutzer[open] > summary{margin-bottom:14px}
#fenster-einstellungen .angaben.klein{padding:10px 12px;font-size:.82rem;gap:6px 14px}
#fenster-einstellungen .ersatzcode{padding:6px 10px;font-size:.9rem}
#fenster-einstellungen .codeliste{gap:6px;margin:1rem 0 .8rem}
#fenster-einstellungen .qr{padding:10px;margin-bottom:.9rem}

/* =====================================================================
   Überarbeitung im Stil von Apple — Anmeldung, Übersicht, Einstellungen
   =====================================================================
   Gilt NUR für Seiten, deren <html> die Klasse "plattform" trägt, und für die
   Anmeldung auf der Bühne. Alles darüber bleibt unverändert, damit Apps, die
   dieses Stylesheet einbinden, genauso aussehen wie vorher.

   Leitgedanken (nach Apples „Designing Fluid Interfaces“):
   - Rückmeldung sofort beim Drücken, nicht erst beim Loslassen.
   - Bewegung läuft sanft aus (kein Überschwingen bei Dingen, die nur erscheinen).
   - Durchscheinende Flächen (Kopfzeile, Fenster, Menü) statt harter Balken.
   - Große, enge Überschrift; Schrift wird mit der Größe enger gesetzt.
   - Bei „Bewegung reduzieren“ wird nur noch überblendet, nicht verschoben. */

/* ---------- Farben der Plattform-Seiten (Apple-Grautöne, hell und dunkel) ---------- */
html.plattform{
  --grund:#f5f5f7; --karte:#ffffff; --text:#1d1d1f; --leise:#6e6e73;
  --linie:#e0e0e5; --dunkel:#1d1d1f; --knopftext:#ffffff;
  --akzent:#0071e3; --akzent-hover:#0077ed; --akzent-text:#0066cc;
  --fuellung:#ececf0; --glas:#ffffff; --schatten:#000000;
  --fokus-ring:rgba(0,125,250,.45);
  --fehler-text:#c4271c; --erfolg-text:#1c7a36; --fehler-grund:#fde9e8;
  --glatt:cubic-bezier(.22,.8,.24,1);       /* läuft sanft aus, ohne Überschwingen */
  --sprache:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
}
html.plattform[data-thema="dunkel"]{
  --grund:#000000; --karte:#1c1c1e; --text:#f5f5f7; --leise:#a1a1a6;
  --linie:#38383c; --dunkel:#f5f5f7; --knopftext:#1d1d1f;
  --akzent:#0071e3; --akzent-hover:#2184f0; --akzent-text:#2997ff;
  --fuellung:#2c2c2e; --glas:#1c1c1e; --schatten:#000000;
  --fokus-ring:rgba(41,151,255,.6);
  --fehler-text:#ff8a82; --erfolg-text:#6fdc8c; --fehler-grund:#2b1715;
  /* Reines Schwarz als Grund: die Farbflächen der Bereiche etwas dunkler halten */
  --privat-hell:#141c23; --studium-hell:#231818; --beruf-hell:#131c17; --gelb-hell:#211c0f; --grau-hell:#1a1b1d; --ju-hell:#171a08;
}
html.plattform body{
  font-family:var(--sprache); line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
html.plattform h1,html.plattform h2,html.plattform h3{font-family:var(--sprache)}
html.plattform ::selection{background:color-mix(in srgb,var(--akzent) 28%,transparent)}

/* Sofortiges Drücken: eine kleine, flinke Rückmeldung unter dem Finger. */
html.plattform :is(.knopf,.kachel,.pille,.wahl,.pfeil,.einstellungen-nav-knopf,.menue-eintrag,.zahnrad,.zahnrad-kopf,.fenster-zu,.menue-knopf):active{
  transition-duration:.08s;
}

/* ---------- Kopfzeile: durchscheinend, der Inhalt läuft darunter durch ---------- */
html.plattform .kopf{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--glas) 72%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border-bottom:0; box-shadow:0 .5px 0 var(--linie);
  padding:10px max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));
  min-height:52px;
}
html.plattform .kopf .marke{font-size:1.02rem; font-weight:600; letter-spacing:-.02em}
html.plattform .kopf .rechts{gap:12px}
html.plattform .kopf .rechts .leise{font-size:.9rem}
html.plattform .kopf .rechts a.leise{
  padding:6px 12px; border-radius:980px; transition:background-color .2s,color .2s;
  text-decoration:none; margin-right:-6px
}
html.plattform .kopf .rechts a.leise:hover{background:var(--fuellung); color:var(--text)}
html.plattform .kuerzel{
  width:30px; height:30px; font-size:.7rem; font-weight:600; letter-spacing:.02em; flex:none;
  color:var(--auf-akzent,#fff); background:linear-gradient(160deg,color-mix(in srgb,var(--akzent) 60%,#fff),var(--akzent));
}
html.plattform .kopf .zahnrad-kopf{
  padding:7px; margin:-5px 0; border-radius:50%;
  transition:background-color .2s,color .2s,transform .5s var(--glatt);
}
html.plattform .kopf .zahnrad-kopf:hover{background:var(--fuellung); color:var(--text)}
html.plattform .kopf .zahnrad-kopf:active{transform:scale(.9) rotate(30deg)}
html.plattform .kopf .zahnrad-kopf:focus-visible,
html.plattform .menue-knopf:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}

/* ---------- Seitentitel der Übersicht ---------- */
html.plattform .mitte{max-width:1080px; padding:44px max(20px,env(safe-area-inset-right)) 72px max(20px,env(safe-area-inset-left))}
html.plattform .seitentitel{
  font-size:clamp(2rem,5.2vw,2.75rem); font-weight:700; letter-spacing:-.034em; line-height:1.08;
}
html.plattform .seitenuntertitel{
  margin:.55rem 0 2.4rem; font-size:1.0625rem; letter-spacing:-.005em; line-height:1.4;
  color:var(--leise); max-width:42ch; text-wrap:pretty;
}

/* ---------- Menü oben links ---------- */
html.plattform .menue-knopf{
  padding:7px; margin:-7px 0 -7px -7px; border-radius:50%;
  transition:background-color .2s;
}
html.plattform .menue-knopf:hover{background:var(--fuellung)}
html.plattform .menue-liste{
  top:calc(100% + 4px); left:14px; min-width:244px; padding:6px; border-radius:16px;
  border:0; background:color-mix(in srgb,var(--glas) 96%,transparent);   /* liegt in der Kopfzeile: dort wirkt kein eigener Weichzeichner */
  box-shadow:0 0 0 .5px var(--linie), 0 18px 44px color-mix(in srgb,var(--schatten) 22%,transparent);
  transform-origin:18px 0;   /* wächst aus dem Knopf heraus, der es geöffnet hat */
  opacity:1; transform:none;
  transition:opacity .22s ease, transform .38s var(--glatt), display .38s allow-discrete;
}
html.plattform .menue-liste[hidden]{opacity:0; transform:scale(.92) translateY(-6px); display:none}
@starting-style{
  html.plattform .menue-liste:not([hidden]){opacity:0; transform:scale(.92) translateY(-6px)}
}
html.plattform .menue-eintrag{
  padding:10px 12px; border-radius:10px; font-size:.95rem; letter-spacing:-.01em;
  transition:background-color .15s;
}
html.plattform .menue-eintrag:hover,
html.plattform .menue-eintrag:focus-visible{background:var(--fuellung); outline:none}
html.plattform .menue-eintrag[aria-current="true"]{background:var(--fuellung); font-weight:600}
html.plattform .menue-punkt{width:10px;height:10px}

/* ---------- Arbeitsbereiche: weiche Flächen, die Farbe nur als Hauch ---------- */
html.plattform .bereich{
  border:0; border-radius:24px; padding:20px 18px 18px; margin-bottom:22px;
  background:color-mix(in srgb,var(--ton-hell) 78%,var(--grund));
  box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--ton) 30%,transparent);
}
html.plattform .bereich > .titel{
  position:static; display:block; background:none; padding:0 6px; margin:0 0 14px;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--ton-tief);
}
html.plattform .kacheln{grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}

/* ---------- Kacheln ---------- */
html.plattform .kachel{
  background:var(--karte); border:0; border-radius:16px; padding:12px 14px 12px 12px; gap:12px;
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 9%,transparent),
             0 1px 2px color-mix(in srgb,var(--schatten) 6%,transparent);
  transition:transform .45s var(--glatt), box-shadow .45s var(--glatt), background-color .2s;
  -webkit-tap-highlight-color:transparent;
}
html.plattform .kachel:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--ton) 55%,transparent),
             0 10px 26px color-mix(in srgb,var(--schatten) 14%,transparent);
}
html.plattform .kachel:active{transform:scale(.97); box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 9%,transparent)}
html.plattform .kachel:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}
html.plattform .kachel .symbol{
  width:36px; height:36px; border-radius:10px;
  background:color-mix(in srgb,var(--ton) 20%,var(--karte)); color:var(--ton-tief);
}
html.plattform .kachel .symbol svg{width:19px; height:19px}
html.plattform .kachel .name{font-size:.875rem; font-weight:600; letter-spacing:-.012em; line-height:1.25}
html.plattform .kachel .unter{font-size:.75rem; letter-spacing:0; line-height:1.3}

html.plattform .kachelbox .zahnrad{
  top:8px; right:8px; border:0; padding:5px; border-radius:50%;
  background:color-mix(in srgb,var(--glas) 80%,transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 0 0 .5px var(--linie);
  transition:opacity .2s,color .2s,transform .3s var(--glatt);
}
html.plattform .kachelbox .zahnrad:hover{transform:rotate(45deg); border:0; color:var(--text)}
html.plattform .kachelbox .zahnrad:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}

html.plattform .kachel.neu{
  background:transparent; box-shadow:none;
  border:1.5px dashed color-mix(in srgb,var(--ton) 55%,transparent);
  color:var(--ton-tief); font-weight:500; font-size:.875rem; letter-spacing:-.01em;
  min-height:60px;
}
html.plattform .kachel.neu:hover{background:var(--karte); border-style:solid; border-color:color-mix(in srgb,var(--ton) 55%,transparent); transform:none}
html.plattform .kachel.neu:active{transform:scale(.98)}
html.plattform .leerhinweis{font-size:.9rem; padding:0 6px}

/* ---------- Knöpfe ---------- */
html.plattform .knopf{
  background:var(--akzent); color:#fff; border-radius:12px; padding:11px 20px;
  font-weight:500; font-size:.95rem; letter-spacing:-.01em;
  transition:background-color .2s, transform .35s var(--glatt), box-shadow .2s;
}
html.plattform .knopf:hover{opacity:1; background:var(--akzent-hover)}
html.plattform .knopf:active{transform:scale(.97)}
html.plattform .knopf:focus-visible{outline:none; box-shadow:0 0 0 4px var(--fokus-ring)}
html.plattform .knopf.leise{
  background:var(--fuellung); color:var(--akzent-text); border:0;
}
html.plattform .knopf.leise:hover{background:color-mix(in srgb,var(--fuellung) 82%,var(--text)); color:var(--akzent-text)}
html.plattform .knopf.gefahr{background:#d93a3a}
html.plattform .kopieren.geschafft{border:0; background:var(--beruf-hell); color:var(--beruf-tief)}

/* ---------- Felder ---------- */
html.plattform .feld label{font-size:.82rem; font-weight:500; color:var(--leise); letter-spacing:0; margin-bottom:6px}
html.plattform .feld input,
html.plattform .feld select{
  background-color:var(--fuellung); border:1px solid transparent; border-radius:11px;
  padding:11px 14px; font-size:1rem; letter-spacing:-.01em;
  transition:box-shadow .2s, background-color .2s, border-color .2s;
}
html.plattform .feld input:focus,
html.plattform .feld select:focus{
  outline:none; background-color:var(--karte); border-color:var(--akzent);
  box-shadow:0 0 0 4px var(--fokus-ring);
}
html.plattform .unterzeile{font-size:.8rem; color:var(--leise)}

/* ---------- Meldungen ---------- */
html.plattform :is(.fehler,.hinweis,.erfolg){border:0; border-radius:12px; padding:12px 14px; font-size:.9rem; line-height:1.45}
html.plattform .fehler{background:var(--fehler-grund); color:var(--fehler-text)}
html.plattform .hinweis{background:color-mix(in srgb,var(--akzent) 11%,var(--karte)); color:var(--akzent-text)}
html.plattform .erfolg{background:color-mix(in srgb,#30b050 13%,var(--karte)); color:var(--erfolg-text)}

/* ---------- Fenster (Einstellungen, App anlegen, App-Einstellungen) ---------- */
html.plattform dialog.fenster{
  border:0; border-radius:26px; padding:0; color:var(--text);
  background:color-mix(in srgb,var(--glas) 84%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(40px); backdrop-filter:saturate(180%) blur(40px);
  box-shadow:0 0 0 .5px var(--linie), 0 30px 80px color-mix(in srgb,var(--schatten) 34%,transparent);
  /* Ein Fenster wächst beim Öffnen sanft aus der Mitte und blendet ein;
     beim Schließen läuft es umgekehrt zurück. */
  opacity:0; transform:translateY(14px) scale(.965);
  transition:opacity .26s ease, transform .5s var(--glatt), overlay .5s allow-discrete, display .5s allow-discrete;
}
html.plattform dialog.fenster[open]{opacity:1; transform:none; display:flex; flex-direction:column; overflow:hidden}
html.plattform dialog.fenster .fenster-kopf{flex:none}
html.plattform dialog.fenster .fenster-inhalt,
html.plattform #fenster-einstellungen .fenster-inhalt{flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; overscroll-behavior:contain}
@starting-style{
  html.plattform dialog.fenster[open]{opacity:0; transform:translateY(14px) scale(.965)}
}
html.plattform dialog.fenster::backdrop{
  background:rgba(0,0,0,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0);
  transition:background-color .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease, overlay .5s allow-discrete, display .5s allow-discrete;
}
html.plattform dialog.fenster[open]::backdrop{
  background:rgba(0,0,0,.32); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
@starting-style{
  html.plattform dialog.fenster[open]::backdrop{background:rgba(0,0,0,0); -webkit-backdrop-filter:blur(0); backdrop-filter:blur(0)}
}
html.plattform .fenster-kopf{
  background:color-mix(in srgb,var(--glas) 60%,transparent);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom:0; box-shadow:0 .5px 0 var(--linie);
  border-radius:26px 26px 0 0; padding:14px 16px 14px 18px;
}
html.plattform .fenster-symbol{border:0; background:var(--fuellung); border-radius:10px; color:var(--text)}
html.plattform .fenster-titel{font-size:1rem; font-weight:600; letter-spacing:-.02em}
html.plattform .fenster-zu{
  border:0; background:var(--fuellung); color:var(--leise); border-radius:50%;
  padding:7px; transition:background-color .2s,color .2s,transform .3s var(--glatt);
}
html.plattform .fenster-zu:hover{color:var(--text); border:0}
html.plattform .fenster-zu:active{transform:scale(.9)}
html.plattform .fenster-zu:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}

/* Einstellungsfenster: bisher bewusst kompakt — das bleibt, nur feiner. */
html.plattform #fenster-einstellungen{width:min(680px,calc(100vw - 32px)); font-size:.9rem; line-height:1.5}
html.plattform #fenster-einstellungen .fenster-kopf{padding:12px 14px 12px 16px}
html.plattform #fenster-einstellungen .fenster-symbol{width:30px;height:30px;border-radius:9px}
html.plattform #fenster-einstellungen .fenster-titel{font-size:1rem}
html.plattform #fenster-einstellungen .fenster-zu{padding:6px}
html.plattform #fenster-einstellungen .fenster-inhalt{padding:16px 18px 20px}
html.plattform #fenster-einstellungen .einstellungen-layout{gap:20px}
html.plattform #fenster-einstellungen .einstellungen-nav{width:148px}
html.plattform #fenster-einstellungen .einstellungen-nav-knopf{
  padding:8px 12px; font-size:.9rem; font-weight:500; border-radius:10px; letter-spacing:-.01em;
  color:var(--text); transition:background-color .2s,color .2s;
}
html.plattform #fenster-einstellungen .einstellungen-nav-knopf:hover{background:var(--fuellung)}
html.plattform #fenster-einstellungen .einstellungen-nav-knopf[aria-current="true"]{
  background:var(--akzent); color:#fff;
}
html.plattform #fenster-einstellungen .einstellungen-nav-knopf:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}

html.plattform #fenster-einstellungen .knopf,
html.plattform #fenster-einstellungen .knopf.gross{padding:8px 16px; font-size:.88rem; font-weight:500; border-radius:10px}
html.plattform #fenster-einstellungen .kopieren{padding:7px 13px; font-size:.84rem}
html.plattform #fenster-einstellungen .block h2{font-size:1rem; font-weight:600; letter-spacing:-.02em; margin-bottom:.9rem}
html.plattform #fenster-einstellungen .block + .block{border-top:0; box-shadow:0 -.5px 0 var(--linie)}
html.plattform #fenster-einstellungen .feld input,
html.plattform #fenster-einstellungen .feld select{padding:9px 12px; font-size:.92rem; border-radius:10px}
html.plattform #fenster-einstellungen :is(.fehler,.hinweis,.erfolg){padding:9px 12px; font-size:.86rem; border-radius:10px}
html.plattform #fenster-einstellungen .prompt{border:0; background:var(--fuellung); border-radius:12px}
html.plattform #fenster-einstellungen .prompt:focus{outline:none; box-shadow:0 0 0 4px var(--fokus-ring); background:var(--karte)}

/* Auswahl: kleine Knöpfe in einer Reihe (das Kästchen selbst ist unsichtbar,
   sichtbar ist nur das Feld daneben) */
html.plattform .wahl,
html.plattform #fenster-einstellungen .wahl{border:0; background:none; padding:0; margin:0; border-radius:0; box-shadow:none}
html.plattform .wahl:hover,html.plattform .wahl:has(input:checked){background:none; border:0}
html.plattform .wahl span,
html.plattform #fenster-einstellungen .wahl span{
  border:0; background:var(--fuellung); border-radius:10px;
  transition:background-color .2s,color .2s,transform .3s var(--glatt)
}
html.plattform .wahl:hover input:not(:checked) + span{background:color-mix(in srgb,var(--fuellung) 82%,var(--text))}
html.plattform .wahl:active span{transform:scale(.96)}
html.plattform .wahl input:checked + span{background:var(--akzent); color:#fff; font-weight:500}
html.plattform .wahl input:focus-visible + span{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}
html.plattform .wahl input{accent-color:var(--akzent)}
html.plattform .symbolwahl span{border:0; background:var(--fuellung); border-radius:12px}
html.plattform .symbolwahl input:checked + span{background:var(--akzent); color:#fff}
html.plattform .symbolwahl input:focus-visible + span{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}

/* Listen: eingefasste Gruppen mit feinen Trennlinien */
html.plattform .mitgliedskarte,
html.plattform .ordnung{border:0; border-radius:14px; background:var(--fuellung)}
html.plattform .mitgliedskarte summary:hover{background:color-mix(in srgb,var(--fuellung) 85%,var(--text))}
html.plattform .mitgliedsinhalt{border-top:0; box-shadow:0 -.5px 0 var(--linie)}
html.plattform .mitgliedspfeil{transition:transform .4s var(--glatt)}
html.plattform .ordnung li{border-top:0; box-shadow:0 -.5px 0 var(--linie); margin-inline:12px; padding-inline:0}
html.plattform .ordnung li:first-child{box-shadow:none}
html.plattform .ordnung .sym{background:var(--karte); border-radius:8px; color:var(--leise)}
html.plattform .ordnungstitel{font-size:.78rem; letter-spacing:.02em; text-transform:none; font-weight:600; margin:0 0 6px 4px}
html.plattform .pfeil{border:0; background:var(--karte); border-radius:50%; padding:5px; transition:color .2s,transform .3s var(--glatt)}
html.plattform .pfeil:hover:not(:disabled){border:0; color:var(--akzent-text)}
html.plattform .pfeil:active:not(:disabled){transform:scale(.88)}
html.plattform .pfeil:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}

html.plattform .angaben{border:0; background:var(--fuellung); border-radius:14px}
html.plattform .qr{border:0; background:#fff; border-radius:14px}
html.plattform .ersatzcode{border:0; background:var(--fuellung); border-radius:10px}
html.plattform code{background:var(--fuellung); border:0}

/* ---------- Anmeldung (auf der Bühne wie die Startseite) ---------- */
.buehne{--fehler-text:#c4271c; --fehler-grund:#fde9e8}
html[data-thema="dunkel"] .buehne{--fehler-text:#ff8a82; --fehler-grund:#2b1715}
.buehne .anmelden{width:min(100%,380px)}
.buehne .anmelden .app-symbol{width:clamp(64px,8vw,78px); margin-bottom:clamp(1.2rem,3vw,1.8rem)}
.buehne .anmelden .grossname{font-size:clamp(2.1rem,7vw,3rem); letter-spacing:-.04em}
.buehne .anmelden .unterton{margin:.55rem 0 1.9rem; font-size:1.0625rem; font-weight:400}
.anmelde-formular{width:100%; text-align:left; animation:aufsteigen .95s cubic-bezier(.2,.7,.2,1) .36s both}
.buehne .fehler{
  text-align:left; margin:0 0 14px; padding:12px 14px; border-radius:12px; font-size:.92rem; line-height:1.45;
  background:var(--fehler-grund); color:var(--fehler-text); border:0
}
.gruppe{
  background:var(--b-feld); border-radius:14px; overflow:hidden;
  box-shadow:0 0 0 .5px var(--b-feld-linie), 0 10px 30px rgba(0,0,0,.05);
  -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
  transition:box-shadow .25s ease;
}
.gruppe:focus-within{box-shadow:0 0 0 .5px var(--b-feld-linie), 0 0 0 4px var(--b-fokus), 0 10px 30px rgba(0,0,0,.05)}
.gruppe label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.gruppe input{
  display:block; width:100%; border:0; outline:0; background:transparent; color:var(--b-text);
  font:inherit; font-size:1.0625rem; letter-spacing:-.01em; padding:16px 18px; border-radius:0;
}
.gruppe input::placeholder{color:var(--b-leise); opacity:.8}
.gruppe input + label + input{box-shadow:0 -.5px 0 var(--b-feld-linie)}
.gruppe input:-webkit-autofill{-webkit-text-fill-color:var(--b-text); transition:background-color 9999s}
.anmelde-formular .pille{
  display:block; width:100%; margin-top:16px; padding:14px 28px; font-size:1.0625rem; font-weight:500;
}
.anmelde-fuss{margin-top:20px; text-align:center; font-size:.85rem; color:var(--b-leise)}
@media (prefers-reduced-motion:reduce){
  .anmelde-formular{animation:none}
}

/* ---------- Bewegung reduzieren / Transparenz / Kontrast ---------- */
@media (prefers-reduced-motion:reduce){
  html.plattform .kachel,html.plattform .knopf,html.plattform .zahnrad-kopf,
  html.plattform .kachelbox .zahnrad,html.plattform .pfeil{transition-property:background-color,color,box-shadow,opacity}
  html.plattform .kachel:hover,html.plattform .kachel:active,html.plattform .knopf:active{transform:none}
  html.plattform dialog.fenster,html.plattform .menue-liste{transform:none !important}
  html.plattform dialog.fenster{transition-duration:.2s}
}
@media (prefers-reduced-transparency:reduce){
  html.plattform .kopf,html.plattform dialog.fenster,html.plattform .fenster-kopf,html.plattform .menue-liste{
    background:var(--karte); -webkit-backdrop-filter:none; backdrop-filter:none
  }
  .gruppe{-webkit-backdrop-filter:none; backdrop-filter:none; background:var(--b-feld)}
}
@media (prefers-contrast:more){
  html.plattform{--linie:#8e8e93; --leise:#515154}
  html.plattform[data-thema="dunkel"]{--linie:#8e8e93; --leise:#c7c7cc}
  html.plattform .kachel{box-shadow:0 0 0 1px var(--linie)}
}

/* ---------- Schmale Bildschirme und Touch ---------- */
@media (hover:none){
  /* Das Zahnrad ist hier immer sichtbar — der Text weicht ihm aus. */
  html.plattform .kachelbox:has(.zahnrad) .kachel{padding-right:46px}
}
@media (max-width:520px){
  html.plattform .kopf{gap:10px}
  html.plattform .kopf .rechts{gap:6px}
  html.plattform .kopf .rechts span.leise{display:none}   /* Platz für Zahnrad und „Abmelden“ */
}
@media (max-width:640px){
  html.plattform .mitte{padding-top:30px}
  html.plattform .bereich{border-radius:20px; padding:16px 12px 12px}
  html.plattform .kacheln{grid-template-columns:1fr}
  html.plattform dialog.fenster{border-radius:22px}
  html.plattform #fenster-einstellungen .einstellungen-nav{width:auto}
  html.plattform #fenster-einstellungen .einstellungen-nav-knopf{padding:7px 12px}
}

/* ---------- Übrige Anmelde- und Einrichtungsseiten ---------- */
.buehne .anmelden .unterton{max-width:34ch; text-wrap:balance}
.textlink{color:var(--b-blau); text-decoration:none; font-size:1rem; transition:opacity .2s}
.textlink:hover{text-decoration:underline; text-underline-offset:3px}
.textlink:focus-visible{outline:none; box-shadow:0 0 0 4px var(--b-fokus); border-radius:6px}
.anmelde-fuss{margin-top:22px}

/* Seiten mit Kopfzeile (Ersatzcodes, Zwei-Faktor einrichten, „App ist angelegt“) */
html.plattform .mitte.schmal{max-width:680px}
html.plattform .mitte .block{
  background:var(--karte); border:0; border-radius:22px; padding:24px 22px 26px; margin-bottom:18px;
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 9%,transparent), 0 1px 2px color-mix(in srgb,var(--schatten) 6%,transparent);
}
html.plattform .mitte .block h2{font-size:1.1rem; font-weight:600; letter-spacing:-.02em}
html.plattform .grosssymbol{border:0; background:var(--fuellung); border-radius:18px; color:var(--text)}
html.plattform .fertig{padding:4px 0 8px}
html.plattform .codeliste{gap:8px}
html.plattform a.knopf{text-decoration:none}
html.plattform .kopf a.marke{color:var(--text)}
html.plattform .formular .feld{margin-bottom:22px}

/* =====================================================================
   Bausteine für Apps im neuen Stil
   =====================================================================
   Eine App schaltet den neuen Stil mit <html class="plattform"> ein. Dann gelten
   die Regeln oben (Kopfzeile, Knöpfe, Felder, Fenster, Kacheln) und die
   Bausteine hier. Neue Apps nehmen die allgemeinen Namen (.zeile, .rundknopf,
   .kennzahl, .balken, .haken); die Namen der ersten drei Apps (Spritkosten,
   Umzug, Lärmprotokoll) sind mit aufgeführt, damit deren Seiten nicht umgebaut
   werden mussten. */

/* ---------- Einstellungen: Zugangsdaten hinter Knöpfen ---------- */
.zugang-knoepfe{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.zugang-knoepfe > details{width:100%}
.zugang-knoepfe > details > summary{display:inline-block}

/* ---------- Fenster, deren Inhalt in einem <form> steckt ---------- */
html.plattform dialog.fenster > form:not(.fenster-kopf){
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto; margin:0
}
html.plattform dialog.fenster > form:not(.fenster-kopf) > .fenster-kopf{flex:none}

/* ---------- Seitenkopf in Apps ---------- */
html.plattform .kopf-symbol{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  border:0; color:#fff; background:linear-gradient(160deg,color-mix(in srgb,var(--akzent) 60%,#fff),var(--akzent))
}
html.plattform .zurueck{
  border:0; background:var(--fuellung); color:var(--akzent-text); border-radius:980px;
  padding:6px 14px; font-size:.88rem; text-decoration:none; transition:background-color .2s,transform .3s var(--glatt)
}
html.plattform .zurueck:hover{background:color-mix(in srgb,var(--fuellung) 82%,var(--text)); color:var(--akzent-text)}
html.plattform .zurueck:active{transform:scale(.95)}

/* ---------- Inhaltsflächen ---------- */
html.plattform .block,
html.plattform .stand,
html.plattform .tracker-karte,
html.plattform .eintrag{
  background:var(--karte); border:0; border-radius:22px;
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 9%,transparent), 0 1px 2px color-mix(in srgb,var(--schatten) 6%,transparent)
}
html.plattform .stand,html.plattform .tracker-karte{padding:22px 24px 24px}
html.plattform .block h2{font-size:1.1rem; font-weight:600; letter-spacing:-.02em}
html.plattform .block h2 .zeilensymbol,html.plattform .zeilensymbol{color:var(--akzent-text)}
html.plattform .stand-titel{font-size:.78rem; letter-spacing:.02em; text-transform:none; font-weight:600}
html.plattform .listenkopf h2{font-weight:600; letter-spacing:-.02em}

/* ---------- Kennzahlen ---------- */
html.plattform :is(.kennzahl,.stand-zahl){
  background:color-mix(in srgb,var(--akzent) 9%,var(--karte)); border:0; border-radius:16px; padding:15px 17px
}
html.plattform :is(.kennzahl,.stand-zahl) :is(.stand-marke,.kennzahl-marke){color:var(--akzent-text); font-size:.8rem; font-weight:500}
html.plattform :is(.kennzahl,.stand-zahl) strong{
  font-size:1.9rem; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums
}
html.plattform .tracker-zahl{font-size:1.4rem; letter-spacing:-.03em; font-variant-numeric:tabular-nums}

/* ---------- Fortschrittsbalken ---------- */
html.plattform :is(.balken,.tracker-balken){height:8px; border:0; border-radius:999px; background:var(--fuellung); overflow:hidden}
html.plattform :is(.balken > i,.tracker-fuellung){
  background:linear-gradient(90deg,color-mix(in srgb,var(--akzent) 70%,#fff),var(--akzent));
  border-radius:999px; transition:width .6s var(--glatt)
}

/* ---------- Zeilen in Listen ---------- */
html.plattform :is(.zeile,.tankzeile,.ortzeile,.dateiliste li){
  background:var(--fuellung); border:0; border-radius:14px; padding:11px 14px; color:var(--text)
}
html.plattform :is(.tankliste,.ortliste){gap:6px}
html.plattform :is(.tankzeile,.ortzeile) :is(.datum,.name){font-weight:500; letter-spacing:-.01em}
html.plattform :is(.tankzeile,.ortzeile) :is(.betrag,.km){font-variant-numeric:tabular-nums}

/* Kleine runde Knöpfe in Zeilen und Köpfen (Bearbeiten, Löschen, Blättern) */
html.plattform :is(.rundknopf,.tankzeile button,.ortzeile button,.loeschen,.mediumkopf .laden){
  border:0; background:color-mix(in srgb,var(--text) 7%,transparent); color:var(--leise);
  border-radius:50%; padding:7px; line-height:0; cursor:pointer;
  transition:background-color .2s,color .2s,transform .3s var(--glatt)
}
html.plattform :is(.rundknopf,.tankzeile button,.ortzeile button,.loeschen,.mediumkopf .laden):hover{
  color:var(--text); background:color-mix(in srgb,var(--text) 13%,transparent); border:0
}
html.plattform :is(.rundknopf,.tankzeile button,.ortzeile button,.loeschen,.mediumkopf .laden):active{transform:scale(.88)}
html.plattform .loeschen:hover{color:#d93a3a; background:color-mix(in srgb,#ff453a 14%,transparent)}
html.plattform[data-thema="dunkel"] .loeschen:hover{color:#ff8a82}
html.plattform .blattzeile .pfeil{padding:8px}

/* ---------- Kalender (Spritkosten) ---------- */
html.plattform .wochenkopf span{font-size:.72rem; letter-spacing:.04em; font-weight:600}
html.plattform .tag{
  background:var(--fuellung); border:0; border-radius:14px;
  transition:background-color .2s,transform .35s var(--glatt),box-shadow .35s var(--glatt)
}
html.plattform .tag:hover{background:color-mix(in srgb,var(--fuellung) 80%,var(--text)); transform:translateY(-1px); border:0}
html.plattform .tag:active{transform:scale(.95)}
html.plattform .tag.gefuellt{background:color-mix(in srgb,var(--akzent) 13%,var(--karte)); border:0}
html.plattform .tag .km{color:var(--akzent-text); font-variant-numeric:tabular-nums}
html.plattform .tag.heute .nummer{background:var(--akzent); color:#fff}
html.plattform .tag.leerfeld{background:transparent; box-shadow:none}
html.plattform .tag:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}
html.plattform .rechnung{background:var(--fuellung); border:0; border-radius:12px}
html.plattform .gespeichert{border:0; background:color-mix(in srgb,#30b050 14%,var(--karte)); color:var(--erfolg-text); border-radius:980px; padding:7px 14px}

/* ---------- Haken (Umzug): runde Auswahlkreise wie bei Apple ---------- */
html.plattform :is(.haken,.punkt-haken){position:relative}
html.plattform .punkt-haken span{
  width:24px; height:24px; border-radius:50%; background:transparent;
  border:1.5px solid color-mix(in srgb,var(--text) 32%,transparent);
  transition:background-color .25s,border-color .25s,transform .35s var(--glatt)
}
html.plattform .punkt-haken span::after{
  width:6px; height:11px; border-color:#fff; transform:rotate(45deg) translate(-1px,-1px) scale(.6);
  transition:opacity .2s,transform .35s var(--glatt)
}
html.plattform .punkt-haken input:checked + span{background:var(--akzent); border-color:var(--akzent)}
html.plattform .punkt-haken input:checked + span::after{transform:rotate(45deg) translate(-1px,-1px) scale(1)}
html.plattform .punkt-haken:active span{transform:scale(.88)}
html.plattform .punkt-haken input:focus-visible + span{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}
html.plattform .punkt{padding:12px 4px; border-bottom:0; box-shadow:0 .5px 0 var(--linie)}
html.plattform .punkt:first-child{border-top:0}
html.plattform .punkt:last-child{box-shadow:none}
html.plattform .punkt.erledigt .punkt-text{text-decoration-color:color-mix(in srgb,var(--leise) 60%,transparent)}
html.plattform .punkt-text{transition:color .3s}

/* ---------- Eingabereihen zum Anlegen ---------- */
html.plattform .anlegen-form :is(input[type="text"],input[type="number"]){
  background:var(--fuellung); border:1px solid transparent; border-radius:12px;
  transition:box-shadow .2s,background-color .2s,border-color .2s
}
html.plattform .anlegen-form input:focus{
  outline:none; background:var(--karte); border-color:var(--akzent); box-shadow:0 0 0 4px var(--fokus-ring)
}
html.plattform .anlegen-form button{border-radius:12px}

/* ---------- Lärmprotokoll ---------- */
html.plattform :is(.eintragsform,.formular) :is(textarea,input[type="datetime-local"],input[type="text"]){
  background-color:var(--fuellung); border:1px solid transparent; border-radius:12px;
  transition:box-shadow .2s,background-color .2s,border-color .2s
}
html.plattform :is(.eintragsform,.formular) :is(textarea,input):focus{
  outline:none; background-color:var(--karte); border-color:var(--akzent); box-shadow:0 0 0 4px var(--fokus-ring)
}
html.plattform .wann .dauer{border:0; background:var(--fuellung); padding:1px 11px}
html.plattform .medium{border:0; background:var(--fuellung); border-radius:16px}
html.plattform .medium video{border-radius:12px}
html.plattform .fortschritt progress{accent-color:var(--akzent)}
html.plattform .meldung.fehler{border:0; background:var(--fehler-grund); color:var(--fehler-text); border-radius:12px}
html.plattform .meldung.hinweis{border:0; background:color-mix(in srgb,var(--akzent) 11%,var(--karte)); color:var(--akzent-text); border-radius:12px}
html.plattform .block.neu{padding:26px 26px 28px}
html.plattform .dateiknopf{font-weight:500}
html.plattform .knopf.klein{border-radius:10px}

@media (max-width:640px){
  html.plattform .block.neu{padding:20px 16px 22px}
  html.plattform .eintrag{padding:16px 16px 18px}
  html.plattform .stand,html.plattform .tracker-karte{padding:18px 18px 20px}
  html.plattform :is(.kennzahl,.stand-zahl) strong{font-size:1.55rem}
}
@media (prefers-reduced-motion:reduce){
  html.plattform :is(.tag,.rundknopf,.loeschen,.punkt-haken span,.punkt-haken span::after){transition-property:background-color,color,border-color,opacity}
  html.plattform .tag:hover,html.plattform .tag:active{transform:none}
}

/* Kalender (Spritkosten): Der heutige Tag trägt dieselbe Klasse „heute“ wie der Knopf „Heute“
   darüber, dessen Regel (Rand rechts automatisch, eigenes Polster) auch ihn trifft. Manche Browser
   schrumpfen die Kachel dadurch auf die Größe der Zahl. Hier wird das aufgehoben; der Tag bleibt
   hervorgehoben (Ring und blaue Zahl), aber so groß wie die anderen. */
html.plattform .tag.heute{
  margin:0; width:auto; min-width:0; justify-self:stretch; align-self:stretch;
  padding:5px; font-size:inherit;
  background:color-mix(in srgb,var(--akzent) 9%,var(--fuellung));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--akzent) 75%,transparent)
}
html.plattform .tag.heute.gefuellt{background:color-mix(in srgb,var(--akzent) 18%,var(--karte))}
html.plattform .tag.heute:hover{background:color-mix(in srgb,var(--akzent) 15%,var(--fuellung))}
html.plattform .tag.heute .nummer{width:1.85em; height:1.85em; font-weight:700}
html.plattform .tag.heute:focus-visible{box-shadow:inset 0 0 0 1.5px var(--akzent), 0 0 0 3px var(--fokus-ring)}

/* ---------- Seite nach dem Erzeugen eines Schlüssels ---------- */
html.plattform .haken-gross{
  display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  color:#30b050; background:color-mix(in srgb,#30b050 14%,var(--karte));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,#30b050 60%,transparent)
}
html.plattform .fertig{text-align:center}
html.plattform .schritte{list-style:none; counter-reset:schritt; margin:2rem 0 0; padding:0; display:grid; gap:14px}
html.plattform .schritte > li{
  counter-increment:schritt; position:relative; background:var(--karte); border-radius:20px;
  padding:20px 22px 22px 62px;
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 9%,transparent), 0 1px 2px color-mix(in srgb,var(--schatten) 6%,transparent)
}
html.plattform .schritte > li::before{
  content:counter(schritt); position:absolute; left:20px; top:20px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.85rem; font-weight:600; color:#fff; background:var(--akzent)
}
html.plattform .schritte h2{font-size:1.02rem; margin:0 0 .45rem; font-weight:600; letter-spacing:-.02em}
html.plattform .schritte p{margin:0 0 .8rem; font-size:.93rem; line-height:1.55}
html.plattform .befehl{
  margin:0; padding:12px 14px; background:var(--fuellung); border-radius:12px; overflow-x:auto;
  font:.84rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre
}
@media (max-width:520px){
  html.plattform .schritte > li{padding:18px 16px 20px 54px}
  html.plattform .schritte > li::before{left:14px}
}

/* In Fenstern liegen die Abschnitte flach auf dem Fenster (nur eine feine Trennlinie), nicht als eigene Karten. */
html.plattform .fenster-inhalt .block{
  background:transparent; box-shadow:none; border-radius:0; padding:0; margin:0 0 24px
}
html.plattform .fenster-inhalt .block + .block{padding-top:24px}

/* =====================================================================
   Einstellungen als eigene Seite (/settings) und die Glocke in der Kopfzeile
   ===================================================================== */

/* Zurück zur Übersicht (Kopfzeile der Einstellungen) */
html.plattform .kopf .zurueck{
  display:inline-flex; align-items:center; gap:2px; padding:6px 12px 6px 6px; margin:-6px 0 -6px -8px;
  border-radius:980px; color:var(--leise); text-decoration:none; font-size:.9rem;
  transition:background-color .2s,color .2s;
}
html.plattform .kopf .zurueck:hover{background:var(--fuellung); color:var(--text)}
html.plattform .kopf .zurueck:focus-visible{outline:none; box-shadow:0 0 0 3px var(--fokus-ring)}

/* Das Zahnrad ist jetzt ein Verweis zur Einstellungsseite */
html.plattform .kopf a.zahnrad-kopf{display:inline-block; text-decoration:none}

/* Die Glocke mit der Zahl ungelesener Neuigkeiten */
html.plattform .kopf .glocke-kopf{position:relative}
html.plattform .kopf .glocke-kopf:active{transform:scale(.9)}
html.plattform .glocke-zahl{
  position:absolute; top:-1px; right:-3px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; background:#e5484d; color:#fff; font-size:.65rem; font-weight:700;
  line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--glas)
}

/* Eine Seite statt Fenster: links die Kategorien über die ganze Höhe, daneben die
   Einstellungen über die ganze übrige Breite — ohne breite Ränder. */
html.plattform #fenster-einstellungen.einstellungen-seite{width:auto; max-width:none; font-size:.92rem; line-height:1.5}
html.plattform #fenster-einstellungen.einstellungen-seite .fenster-inhalt{
  padding:0; max-height:none; overflow:visible; flex:none
}
html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-layout{
  gap:0; align-items:stretch; min-height:calc(100vh - 52px)
}
html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-nav{
  width:232px; flex:none; position:sticky; top:52px; align-self:flex-start;
  height:calc(100vh - 52px); overflow-y:auto; padding:20px 12px;
  background:var(--karte); box-shadow:.5px 0 0 var(--linie)
}
html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-nav-knopf{padding:9px 14px; font-size:.95rem}
html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-kategorien{
  padding:28px clamp(20px,3.5vw,56px) 72px
}
html.plattform #fenster-einstellungen.einstellungen-seite .formular{max-width:760px}
html.plattform .seiten-meldung:empty{display:none}
html.plattform .seiten-meldung{margin-bottom:18px; max-width:760px}
@media (max-width:640px){
  html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-layout{flex-direction:column; min-height:0}
  html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-nav{
    position:sticky; top:52px; z-index:5; align-self:stretch; width:auto; height:auto;
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; padding:8px 12px;
    box-shadow:0 .5px 0 var(--linie)
  }
  html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-nav-knopf{width:auto; white-space:nowrap; flex:none}
  html.plattform #fenster-einstellungen.einstellungen-seite .einstellungen-kategorien{padding:18px 16px 56px}
}

/* Das Fenster mit den Neuigkeiten */
html.plattform .feld textarea{
  display:block; width:100%; resize:vertical; background-color:var(--fuellung); color:var(--text);
  border:1px solid transparent; border-radius:11px; padding:11px 14px; font:inherit; font-size:1rem;
  letter-spacing:-.01em; transition:box-shadow .2s, background-color .2s, border-color .2s
}
html.plattform .feld textarea:focus{
  outline:none; background-color:var(--karte); border-color:var(--akzent); box-shadow:0 0 0 4px var(--fokus-ring)
}
html.plattform .mitteilungen-inhalt h3{font-size:.95rem; margin:1.4rem 0 .8rem}
html.plattform .mitteilungen-inhalt h3:first-child{margin-top:.2rem}
.mitteilung{padding:14px 0; box-shadow:0 -.5px 0 var(--linie)}
.mitteilung:first-of-type{box-shadow:none; padding-top:0}
.mitteilung h4{margin:0; font-size:.98rem; font-weight:600; letter-spacing:-.01em}
.mitteilung p{margin:.35rem 0 0}
.mitteilung .mitteilung-zeit{font-size:.8rem}
.mitteilung-neu{
  font-size:.68rem; font-weight:700; color:#fff; background:var(--akzent); border-radius:980px;
  padding:1px 8px; margin-left:6px; vertical-align:2px; letter-spacing:.02em
}
.mitteilung-aktion{margin:10px 0 0}
.mitteilung-aktion .knopf{padding:6px 14px; font-size:.84rem}
fieldset.empfaenger{border:0; padding:0; margin:0 0 16px; min-width:0}
.empfaenger legend{font-size:.85rem; font-weight:600; margin-bottom:6px; padding:0}
.empfaenger-zeile{display:flex; align-items:center; gap:9px; padding:4px 0; font-size:.92rem; cursor:pointer}
.empfaenger-auswahl{margin:2px 0 0 26px}

/* =====================================================================
   Feinschliff Übersicht: Menü oben links und die Arbeitsbereiche
   (Stand 2026-10-09, im Stil von Apple — nur unter html.plattform)
   =====================================================================
   - Das Menü ist echtes Glas: Es liegt direkt in der Seite (menue.js) und
     weicht den Inhalt dahinter auf. Beim Öffnen „materialisiert" es sich:
     Weichzeichner und Größe wachsen gemeinsam, ausgehend vom Knopf.
   - Auswahl im Menü = Häkchen rechts, wie bei Apple. „Alle" trägt alle Farben.
   - Bereiche: ineinanderpassende Rundungen (Kachel 16 + Rand 14 = 30), die
     weichen „Squircle"-Ecken von Apple, wo der Browser sie kann.
   - „App anlegen" ist eine ruhige Farbfläche statt eines gestrichelten Rahmens.
   - Die Linie unter der Kopfzeile erscheint erst beim Scrollen. */

html.plattform{ --kante-licht:rgba(255,255,255,.75) }
html.plattform[data-thema="dunkel"]{ --kante-licht:rgba(255,255,255,.12) }

/* ---------- Linie unter der Kopfzeile nur bei durchlaufendem Inhalt ---------- */
html.plattform[data-kante="aus"] .kopf{ box-shadow:0 .5px 0 transparent }
html.plattform .kopf{ transition:box-shadow .3s ease }

/* ---------- Menü: Glas ---------- */
html.plattform .menue-liste{
  position:fixed; z-index:40; min-width:252px; padding:8px; border-radius:20px;
  background:color-mix(in srgb,var(--glas) 64%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(32px); backdrop-filter:saturate(180%) blur(32px);
  box-shadow:
    0 0 0 .5px color-mix(in srgb,var(--text) 14%,transparent),
    inset 0 .5px 0 var(--kante-licht),
    0 2px 6px color-mix(in srgb,var(--schatten) 8%,transparent),
    0 22px 56px color-mix(in srgb,var(--schatten) 26%,transparent);
  transition:
    opacity .24s ease,
    transform .42s var(--glatt),
    -webkit-backdrop-filter .42s var(--glatt),
    backdrop-filter .42s var(--glatt),
    display .42s allow-discrete,
    overlay .42s allow-discrete;
}
html.plattform .menue-liste[hidden]{
  opacity:0; transform:scale(.9) translateY(-4px);
  -webkit-backdrop-filter:saturate(100%) blur(0); backdrop-filter:saturate(100%) blur(0);
}
@starting-style{
  html.plattform .menue-liste:not([hidden]){
    opacity:0; transform:scale(.9) translateY(-4px);
    -webkit-backdrop-filter:saturate(100%) blur(0); backdrop-filter:saturate(100%) blur(0);
  }
}

/* Kleine Überschrift: sagt, wo man ist und was die Liste wählt. */
html.plattform .menue-titel{
  padding:6px 12px 8px; font-size:.75rem; font-weight:600; letter-spacing:.01em; color:var(--leise);
}

html.plattform .menue-eintrag{
  gap:12px; padding:10px 12px; border-radius:12px; font-weight:500; letter-spacing:-.011em;
  -webkit-tap-highlight-color:transparent;
}
html.plattform .menue-eintrag:hover,
html.plattform .menue-eintrag:focus-visible{ background:color-mix(in srgb,var(--text) 7%,transparent) }
html.plattform .menue-eintrag:active{ background:color-mix(in srgb,var(--text) 12%,transparent); transform:scale(.98) }
html.plattform .menue-eintrag[aria-current="true"]{ background:transparent; font-weight:500 }
html.plattform .menue-eintrag[aria-current="true"]:hover,
html.plattform .menue-eintrag[aria-current="true"]:focus-visible{ background:color-mix(in srgb,var(--text) 7%,transparent) }
html.plattform .menue-eintrag:focus-visible{ box-shadow:0 0 0 3px var(--fokus-ring) inset }

html.plattform .menue-punkt{
  width:12px; height:12px;
  box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--text) 22%,transparent);
}
/* „Alle" trägt die Farben aller Bereiche. */
html.plattform .menue-eintrag:first-of-type .menue-punkt{
  background:conic-gradient(from 210deg,var(--privat),var(--beruf),var(--gelb),var(--privat));
}
html.plattform .menue-haken{
  margin-left:auto; line-height:0; color:var(--akzent-text);
  opacity:0; transform:scale(.6);
  transition:opacity .2s ease, transform .35s var(--glatt);
}
html.plattform .menue-eintrag[aria-current="true"] .menue-haken{ opacity:1; transform:none }

/* ---------- Arbeitsbereiche ---------- */
html.plattform .bereich{
  border-radius:30px; padding:16px 14px 14px; margin-bottom:20px;
  box-shadow:
    inset 0 0 0 .5px color-mix(in srgb,var(--ton) 22%,transparent),
    inset 0 .5px 0 var(--kante-licht);
}
html.plattform .bereich > .titel{
  display:flex; align-items:center; gap:9px; margin:0 0 12px; padding:2px 8px 0;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.018em; line-height:1.3;
}
/* Derselbe Farbpunkt wie im Menü — so erkennt man den Bereich wieder. */
html.plattform .bereich > .titel::before{
  content:""; width:9px; height:9px; border-radius:50%; flex:none; background:var(--ton);
}
html.plattform .kachel{ border-radius:16px }
html.plattform .kachel .symbol{ border-radius:11px }

/* Auf Touch-Geräten bleibt eine Kachel nach dem Tippen nicht „angehoben" hängen. */
@media (hover:none){
  html.plattform .kachel:hover{
    transform:none;
    box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 9%,transparent),
               0 1px 2px color-mix(in srgb,var(--schatten) 6%,transparent);
  }
  html.plattform .kachel.neu:hover{ background:color-mix(in srgb,var(--ton) 12%,transparent) }
}

/* „App anlegen": eine ruhige Farbfläche, kein gestrichelter Rahmen. */
html.plattform .kachel.neu{
  border:0; box-shadow:none;
  background:color-mix(in srgb,var(--ton) 13%,transparent);
  color:var(--ton-tief); font-weight:500;
}
html.plattform .kachel.neu:hover{
  border:0; box-shadow:none; transform:none;
  background:color-mix(in srgb,var(--ton) 22%,transparent);
}
html.plattform .kachel.neu:active{ transform:scale(.97) }
html.plattform .kachel.neu:focus-visible{ box-shadow:0 0 0 3px var(--fokus-ring) }

@media (max-width:640px){
  html.plattform .bereich{ border-radius:28px; padding:14px 12px 12px }
}

/* ---------- Weiche Ecken (Apples „Squircle"), wo der Browser sie beherrscht ---------- */
@supports (corner-shape:squircle){
  html.plattform :is(.bereich,.kachel,.kachel .symbol,.menue-liste,.menue-eintrag){ corner-shape:squircle }
}

/* ---------- Bewegung, Transparenz, Kontrast: wie überall in der Plattform ---------- */
@media (prefers-reduced-motion:reduce){
  html.plattform .menue-liste{ transition:opacity .15s ease, display .15s allow-discrete !important }
  html.plattform .menue-haken{ transform:none; transition:opacity .15s ease }
  html.plattform .menue-eintrag:active{ transform:none }
  html.plattform .kachel.neu:active{ transform:none }
}
@media (prefers-reduced-transparency:reduce){
  html.plattform .menue-liste{ background:var(--karte); -webkit-backdrop-filter:none; backdrop-filter:none }
}
@media (prefers-contrast:more){
  html.plattform .menue-liste{ box-shadow:0 0 0 1px var(--linie), 0 12px 32px color-mix(in srgb,var(--schatten) 30%,transparent) }
  html.plattform .bereich{ box-shadow:inset 0 0 0 1px var(--linie) }
  html.plattform .kachel.neu{ box-shadow:inset 0 0 0 1px var(--linie) }
  html.plattform .menue-eintrag[aria-current="true"]{ box-shadow:inset 0 0 0 1px var(--linie) }
}

/* ---------- Seitenkopf der Übersicht: sachlich statt Werbetext ----------
   Eine ruhige Überschrift und darunter eine Zeile mit echten Zahlen (menue.js).
   Gilt nur auf der Übersicht (main.uebersicht), nicht auf den Einstellungen. */
html.plattform .mitte.uebersicht{ padding-top:34px }
html.plattform .uebersicht .seitentitel{
  font-size:clamp(1.75rem,4.2vw,2.125rem); font-weight:700; letter-spacing:-.03em; line-height:1.1;
}
html.plattform .uebersicht .seitenuntertitel{
  margin:.4rem 0 1.6rem; max-width:none; font-size:.9375rem; line-height:1.4; letter-spacing:-.003em;
  font-variant-numeric:tabular-nums;
}
html.plattform .uebersicht .seitenuntertitel:empty{ display:none }
html.plattform .uebersicht .seitentitel:has(+ .seitenuntertitel:empty){ margin-bottom:1.6rem }

/* ---------- Benutzerverwaltung: lesbar und ruhig geordnet ----------
   (Stand 2026-10-09) Fehler vorher: Die Karte war grau wie Knöpfe und Eingabefeld
   (alles --fuellung), dadurch verschwanden sie; und die gewählten Auswahlfelder
   blieben auf der Einstellungsseite grau mit weißer Schrift, weil die Regel für
   #fenster-einstellungen die blaue Farbe überstimmte.
   Jetzt: weiße Karte, graue Bedienelemente darauf, blaue Auswahl, klare Abschnitte.
   Rechte und Passwort-Zurücksetzen sind aufklappbar (<details>, ohne JavaScript). */

/* Gewählt = blau und gut lesbar, auch innerhalb der Einstellungsseite. */
html.plattform #fenster-einstellungen .wahl input:checked + span,
html.plattform #fenster-einstellungen .symbolwahl input:checked + span{
  background:var(--akzent); color:#fff;
}
html.plattform #fenster-einstellungen .wahl:hover input:not(:checked) + span{
  background:color-mix(in srgb,var(--fuellung) 82%,var(--text));
}
html.plattform .wahl span{ font-weight:500 }   /* gewählt und nicht gewählt gleich breit — nichts springt */

/* Die Karte hebt sich vom Seitengrund ab; die Elemente darin (grau) heben sich von der Karte ab. */
html.plattform .mitgliedskarte{
  background:var(--karte); border-radius:16px; margin-bottom:10px;
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 10%,transparent),
             0 1px 2px color-mix(in srgb,var(--schatten) 6%,transparent);
}
html.plattform .mitgliedskarte > summary{ padding:14px 18px; min-height:54px; transition:background-color .2s }
html.plattform .mitgliedskarte > summary:hover{ background:color-mix(in srgb,var(--fuellung) 60%,transparent) }
html.plattform .mitgliedskarte > summary:focus-visible{ outline:none; box-shadow:inset 0 0 0 3px var(--fokus-ring) }
html.plattform .mitgliedsname strong{ font-size:1rem; font-weight:600; letter-spacing:-.012em }
html.plattform .mitgliedsinhalt{ padding:0 18px 4px }

/* Kurzinfos oben: zwei ruhige Zeilen. */
html.plattform .mitgliedsinhalt > p.unterzeile{
  margin:0 !important; padding:3px 0; font-size:.85rem; line-height:1.5; font-variant-numeric:tabular-nums;
}
html.plattform .mitgliedsinhalt > p.unterzeile:first-child{ padding-top:14px }

/* Abschnitte sind durch eine feine Linie abgesetzt. */
html.plattform .mitgliedsinhalt > form{
  margin:0 !important; padding:16px 0; box-shadow:0 -.5px 0 var(--linie);
}
html.plattform .mitgliedsinhalt > form[action$="kontingent-erhoehen"]{ box-shadow:none; padding:10px 0 16px }
html.plattform .mitgliedsinhalt .formular.eng .feld{ margin-bottom:14px }
html.plattform .mitgliedsinhalt .feld label{ margin-bottom:8px }
html.plattform .mitgliedsinhalt .feld input{ max-width:420px }
html.plattform .mitgliedsinhalt .knopf{ padding:9px 16px; font-size:.9rem }

/* Aufklapper „Zugriff und Rechte": eine Zeile mit Pfeil, die Einstellungen erscheinen erst beim Öffnen. */
html.plattform .mitgliedsinhalt > details.unter-einstellung{ box-shadow:0 -.5px 0 var(--linie) }
html.plattform .mitgliedsinhalt > details.unter-einstellung > summary{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 0; min-height:50px; margin:0; border-radius:8px;
  cursor:pointer; list-style:none; user-select:none; -webkit-user-select:none;
  font-size:.95rem; font-weight:500; letter-spacing:-.011em; background:none;
  transition:color .2s;
}
html.plattform .mitgliedsinhalt > details.unter-einstellung > summary::-webkit-details-marker{ display:none }
html.plattform .mitgliedsinhalt > details.unter-einstellung > summary:hover{ background:none; color:var(--akzent-text) }
html.plattform .mitgliedsinhalt > details.unter-einstellung > summary:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--fokus-ring) }
html.plattform .unter-pfeil{
  color:var(--leise); line-height:0; display:grid; place-items:center;
  transition:transform .4s var(--glatt);
}
html.plattform details[open] > summary > .unter-pfeil{ transform:rotate(180deg) }
html.plattform .mitgliedsinhalt > details.unter-einstellung > form{ margin:0 !important; padding:2px 0 18px }

/* „Neues Anfangspasswort vergeben": ein Knopf, das Feld erscheint erst nach dem Klick. */
html.plattform .mitgliedsinhalt > details.unter-knopf{ padding:16px 0; box-shadow:0 -.5px 0 var(--linie) }
html.plattform .mitgliedsinhalt > details.unter-knopf > summary{
  display:inline-flex; align-items:center; width:auto; min-height:0; padding:9px 16px;
  border-radius:12px; background:var(--fuellung); color:var(--akzent-text);
  list-style:none; cursor:pointer; user-select:none; -webkit-user-select:none;
  font-size:.9rem; font-weight:500; letter-spacing:-.01em;
  transition:background-color .2s, transform .35s var(--glatt);
}
html.plattform .mitgliedsinhalt > details.unter-knopf > summary::-webkit-details-marker{ display:none }
html.plattform .mitgliedsinhalt > details.unter-knopf > summary:hover{ background:color-mix(in srgb,var(--fuellung) 82%,var(--text)) }
html.plattform .mitgliedsinhalt > details.unter-knopf > summary:active{ transform:scale(.97) }
html.plattform .mitgliedsinhalt > details.unter-knopf > summary:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--fokus-ring) }
html.plattform .mitgliedsinhalt > details.unter-knopf[open] > form{ margin:16px 0 0 !important; padding:0 }

/* Entfernen: ruhig rot getönt statt schwerem, vollflächigem Rot. Das Füllen beim Halten bleibt sichtbar. */
html.plattform .mitgliedsinhalt .knopf.gefahr{
  background:color-mix(in srgb,#d93a3a 12%,transparent); color:var(--fehler-text); font-weight:500;
}
html.plattform .mitgliedsinhalt .knopf.gefahr:hover{ background:color-mix(in srgb,#d93a3a 18%,transparent) }
html.plattform .mitgliedsinhalt .halten-fuellung{ background:color-mix(in srgb,#d93a3a 34%,transparent) }

@media (prefers-reduced-motion:reduce){
  html.plattform .unter-pfeil{ transition:none }
}
@media (prefers-contrast:more){
  html.plattform .mitgliedskarte{ box-shadow:0 0 0 1px var(--linie) }
}

/* Benutzerverwaltung auf der Einstellungsseite: deren eigene Regeln (#fenster-einstellungen)
   wiegen schwerer als die obigen — hier dieselben Maße noch einmal mit gleichem Gewicht. */
html.plattform #fenster-einstellungen .mitgliedskarte{ margin-bottom:10px; border-radius:16px }
html.plattform #fenster-einstellungen .mitgliedskarte > summary{ padding:14px 18px; min-height:54px }
html.plattform #fenster-einstellungen .mitgliedsinhalt{ padding:0 18px 4px }
html.plattform #fenster-einstellungen .mitgliedsinhalt > details.unter-einstellung > summary{ padding:14px 0; min-height:50px }
html.plattform #fenster-einstellungen .mitgliedsinhalt > details.unter-knopf > summary{ padding:9px 16px; min-height:0 }
html.plattform #fenster-einstellungen .mitgliedsinhalt .knopf{ padding:9px 16px; font-size:.9rem }
html.plattform #fenster-einstellungen .mitgliedsinhalt .feld label{ font-size:.82rem; margin-bottom:8px }
html.plattform #fenster-einstellungen .mitgliedsinhalt .formular.eng .feld{ margin-bottom:14px }
html.plattform #fenster-einstellungen .mitgliedsinhalt .wahlreihe{ gap:8px }
html.plattform #fenster-einstellungen .mitgliedsinhalt .wahl span{ padding:7px 14px; font-size:.88rem }

/* ---------- Fenster „Arbeitsbereiche und Apps" eines Benutzers ----------
   Ein Knopf in der Benutzerkarte öffnet es. Je Arbeitsbereich ein Häkchen,
   darunter die Apps mit eigenem Häkchen. Selbst Erstelltes ist immer aktiv
   (Häkchen gesperrt, mit Schloss und Hinweis gekennzeichnet). */
html.plattform .mitgliedsinhalt > .unter-zeile{ padding:10px 0 16px; box-shadow:0 -.5px 0 var(--linie) }

html.plattform .rechte-gruppen{ display:flex; flex-direction:column; gap:12px; margin:0 0 20px }
html.plattform .rechte-bereich{
  margin:0; padding:4px 0 6px; min-width:0; border:0; border-radius:16px;
  background:var(--fuellung);
}
html.plattform .rechte-zeile{
  display:flex; align-items:center; gap:12px; margin:0; padding:10px 16px; min-height:44px;
  cursor:pointer; -webkit-tap-highlight-color:transparent; letter-spacing:-.011em;
  font-size:.95rem; line-height:1.35; color:var(--text); font-weight:400;
}
html.plattform .rechte-kopf{ font-weight:600 }
html.plattform .rechte-name{ min-width:0; overflow-wrap:anywhere }
html.plattform .rechte-zeile input[type="checkbox"]{
  flex:none; width:20px; height:20px; margin:0; accent-color:var(--akzent); cursor:pointer;
}
html.plattform .rechte-zeile input:disabled{ cursor:not-allowed }
html.plattform .rechte-zeile:has(input:disabled){ cursor:default }
html.plattform .rechte-zeile input:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--fokus-ring); border-radius:5px }

/* Die Apps: eingerückt unter dem Arbeitsbereich, durch feine Linien getrennt. */
html.plattform .rechte-apps{ list-style:none; margin:0; padding:0 0 0 18px }
html.plattform .rechte-apps > li{ box-shadow:0 -.5px 0 var(--linie) }
html.plattform .rechte-apps > li:first-child{ box-shadow:0 -.5px 0 var(--linie) }
html.plattform .rechte-apps .rechte-zeile{ font-size:.9rem }
html.plattform .rechte-leer{ padding:10px 16px; font-size:.85rem; color:var(--leise) }

/* Ohne Häkchen beim Arbeitsbereich sind seine Apps für den Benutzer ganz weg — das sieht man. */
html.plattform .rechte-bereich:has(> .rechte-kopf input:not(:checked)) .rechte-apps{ opacity:.45 }
html.plattform .rechte-bereich:has(> .rechte-kopf input:not(:checked)) .rechte-apps .rechte-zeile{ cursor:default }
html.plattform .rechte-apps{ transition:opacity .25s ease }

/* Der Hinweis „Selbst erstellt · immer aktiv": ruhig, rechts, mit Schloss. */
html.plattform .rechte-hinweis{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:500; color:var(--leise); letter-spacing:0; text-align:right;
}
html.plattform .rechte-hinweis svg{ flex:none }
@media (max-width:520px){
  html.plattform .rechte-zeile{ flex-wrap:wrap; row-gap:2px }
  html.plattform .rechte-hinweis{ margin-left:32px; text-align:left; flex-basis:100% }
}

/* Der Auswahlknopf „Was darf der Benutzer?" sitzt unter den Gruppen. */
html.plattform dialog.fenster .rechte-gruppen + .feld{ margin-top:4px }
html.plattform dialog.fenster .formular.eng > .knopf{ margin-top:4px }

@media (prefers-contrast:more){
  html.plattform .rechte-bereich{ box-shadow:inset 0 0 0 1px var(--linie) }
  html.plattform .rechte-hinweis{ color:var(--text) }
}

/* Fenster innerhalb der Einstellungsseite (z. B. „Arbeitsbereiche und Apps"): Die Regeln der Seite
   nehmen ihrem Inhalt sonst den Rand — hier bekommt er ihn zurück. */
html.plattform #fenster-einstellungen dialog.fenster .fenster-inhalt{
  padding:18px 20px 22px; flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  max-height:none;
}
html.plattform #fenster-einstellungen dialog.fenster .feld label{ font-size:.82rem }
html.plattform #fenster-einstellungen dialog.fenster .wahl span{ padding:7px 14px; font-size:.88rem }
html.plattform #fenster-einstellungen dialog.fenster .knopf:not(.gefahr){ padding:10px 20px; font-size:.95rem }
html.plattform #fenster-einstellungen dialog.fenster{ max-height:min(88vh,820px) }

/* ---------- Wartefenster mit drehendem Kreis (nur Plattform-Seiten) ---------- */
html.plattform dialog.warte-fenster{
  border:0; border-radius:22px; padding:30px 34px 28px; text-align:center;
  width:max-content; min-width:260px; max-width:min(380px,calc(100vw - 40px));
  background:var(--karte); color:var(--text);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 10%,transparent),
             0 24px 64px color-mix(in srgb,var(--schatten) 30%,transparent);
}
html.plattform dialog.warte-fenster::backdrop{
  background:rgba(0,0,0,.36); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
html.plattform .warte-kreis{
  display:block; width:38px; height:38px; margin:0 auto 16px; border-radius:50%;
  border:3px solid var(--fuellung); border-top-color:var(--akzent);
  animation:warte-drehen .85s linear infinite;
}
html.plattform .warte-titel{margin:0 0 4px; font-size:1.05rem; font-weight:600; letter-spacing:-.015em}
html.plattform .warte-text{margin:0; font-size:.88rem; line-height:1.45; color:var(--leise)}
html.plattform .warte-text:empty{display:none}
html.plattform dialog.warte-fenster.fehler-zustand .warte-kreis{display:none}
html.plattform dialog.warte-fenster .warte-schliessen{margin-top:18px}
@keyframes warte-drehen{to{transform:rotate(360deg)}}
@keyframes warte-pulsieren{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html.plattform .warte-kreis{animation:warte-pulsieren 1.6s ease-in-out infinite; border-top-color:var(--akzent); border-color:var(--akzent)}
}

/* ---------- Abschnitt "Zugriff" im App-Fenster und "mehr …" bei den Symbolen ---------- */
.app-zugriff{margin:1.1rem 0 0}
.app-zugriff > summary,.symbole-mehr > summary{list-style:none;cursor:pointer;user-select:none;display:inline-block}
.app-zugriff > summary::-webkit-details-marker,.symbole-mehr > summary::-webkit-details-marker{display:none}
.app-zugriff[open] > summary{margin-bottom:14px}
.symbolfeld > .symbole-mehr{flex:1 0 100%}
.symbole-mehr > summary{padding:6px 14px;font-size:.85rem}
.symbole-mehr[open] > summary{margin-bottom:10px}
.symbole-mehr .mehr-auf{display:none}
.symbole-mehr[open] .mehr-auf{display:inline}
.symbole-mehr[open] .mehr-zu{display:none}
html.plattform .rechte-personen{padding-left:0}
html.plattform .app-zugriff .rechte-personen > li:first-child{box-shadow:none}
html.plattform .rechte-personen .rechte-zeile{ flex-wrap:wrap }
html.plattform .rechte-personen .rechte-name{ flex:1 1 auto; min-width:8em }
html.plattform .rechte-personen .rechte-hinweis{ flex:1 0 100%; margin:-4px 0 6px 30px; white-space:normal; font-size:.78rem; line-height:1.35 }

/* "Icon anpassen" im App-Fenster */
.icon-anpassen .symbolfeld{margin-bottom:14px}

/* Symbolauswahl: offen steht "weniger" unter allen Symbolen, "mehr …" oben ist dann weg */
.symbole-mehr[open] > summary{display:none}
.symbole-mehr .symbole-weniger{display:none;margin-top:12px;padding:6px 14px;font-size:.85rem}
.symbole-mehr[open] .symbole-weniger{display:inline-block}

/* ---------- Kacheln mit leicht gläsernem Touch (nur die App-Kacheln in den Bereichen) ----------
   Halbtransparente Fläche, der Bereich scheint durch, feiner heller Rand oben.
   Bei „Transparenz reduzieren" oder ohne Weichzeichner bleibt es die deckende Karte. */
html.plattform .bereich .kachel:not(.neu){
  background:color-mix(in srgb,var(--karte) 58%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--text) 10%,transparent),
             inset 0 1px 0 rgba(255,255,255,.55),
             0 2px 8px -2px color-mix(in srgb,var(--schatten) 10%,transparent);
}
html.plattform .bereich .kachel:not(.neu):hover{
  background:color-mix(in srgb,var(--karte) 72%,transparent);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--ton) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.6),
             0 10px 26px color-mix(in srgb,var(--schatten) 14%,transparent);
}
html.plattform[data-thema="dunkel"] .bereich .kachel:not(.neu){
  background:color-mix(in srgb,var(--karte) 42%,transparent);
  box-shadow:0 0 0 .5px rgba(255,255,255,.09),
             inset 0 1px 0 rgba(255,255,255,.09),
             0 2px 8px -2px rgba(0,0,0,.35);
}
html.plattform[data-thema="dunkel"] .bereich .kachel:not(.neu):hover{
  background:color-mix(in srgb,var(--karte) 56%,transparent);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--ton) 55%,transparent),
             inset 0 1px 0 rgba(255,255,255,.12),
             0 10px 26px rgba(0,0,0,.45);
}
@media (hover:none){
  html.plattform .bereich .kachel:not(.neu):hover{ background:color-mix(in srgb,var(--karte) 58%,transparent) }
  html.plattform[data-thema="dunkel"] .bereich .kachel:not(.neu):hover{ background:color-mix(in srgb,var(--karte) 42%,transparent) }
}
@media (prefers-reduced-transparency:reduce){
  html.plattform .bereich .kachel:not(.neu),
  html.plattform[data-thema="dunkel"] .bereich .kachel:not(.neu){ background:var(--karte); -webkit-backdrop-filter:none; backdrop-filter:none }
}

/* ---------- Untergliederung eines Arbeitsbereichs (Abschnitte, z. B. OV MAK / KV WUN) ----------
   Ein Abschnitt ist eine eigene Fläche in der Farbe des Bereichs mit Titelzeile; darin liegen die Kacheln. */
html.plattform .abschnitt{
  grid-column:1/-1; padding:16px 14px 14px; border-radius:16px;
  border:1px solid color-mix(in srgb,var(--ton) 55%,transparent);
  background:color-mix(in srgb,var(--ton) 9%,transparent);
}
html.plattform .abschnitt-lose{border:0; background:none; padding:0}
html.plattform .abschnitt > .abschnitt-titel{
  display:flex; align-items:center; gap:10px; margin:0 0 12px;
  font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ton-tief);
}
html.plattform .abschnitt > .abschnitt-titel::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--ton); flex:none}
html.plattform .abschnitt > .abschnitt-titel::after{content:""; flex:1; height:1px; background:color-mix(in srgb,var(--ton) 55%,transparent)}
html.plattform .feld[hidden]{display:none}

/* =====================================================================
   Glas-Oberfläche — der serverweite Stil für Apps und Plattform-Seiten
   (festgesetzt 2026-11-04, Vorbild: Buchhaltung KV Wunsiedel)
   =====================================================================
   Einschalten: <html class="plattform glas"> und im <head>
   <script src="https://kwuttke.de/glas.js?v=1" defer></script>.
   Alles steht NUR unter html.plattform.glas — Seiten ohne "glas" bleiben, wie sie sind.

   Die Farben bleiben die der Seite (--akzent, --karte, --grund …); es gibt keinen
   Farbverlauf im Hintergrund. Neu sind die Anzeige und die Bewegung:
   - schwebende Kopfzeile aus Glas (.kopf)
   - Seitenleiste mit Gleitmarke (<nav class="reiter"> direkt im <body> vor <main>; links, am Handy oben als Leiste;
     der aktive Eintrag trägt die Klasse aktiv oder ist-aktiv oder aria-current="true")
   - Glasflächen (.glasflaeche), Knöpfe mit Druckrückmeldung, Hinweis unten (.hinweis-toast)
   - Seitenwechsel (.seite.neu), gestaffelte Zeilen, Platzhalter beim Laden (.skelett)
   Das Skript /glas.js liefert die Gleitmarke und kwuttkeGlas.toast/eintritt/zu/oeffnen. */

/* ---------- Werte ---------- */
html.plattform.glas{
  --glas-flaeche:color-mix(in srgb,var(--glas) 62%,transparent);
  --glas-flaeche-stark:color-mix(in srgb,var(--glas) 82%,transparent);
  --glas-kante:rgba(255,255,255,.85);
  --glas-schatten:0 1px 0 rgba(255,255,255,.9) inset, 0 12px 32px -8px color-mix(in srgb,var(--schatten) 16%,transparent), 0 2px 6px color-mix(in srgb,var(--schatten) 5%,transparent);
  --glas-weich:blur(22px) saturate(170%);
  --ease:cubic-bezier(.16,1,.3,1);      /* sanft auslaufend */
  --ease-ein:cubic-bezier(.4,0,1,1);    /* für Ausgänge: schneller als Eingänge */
  --t-kurz:140ms; --t-mittel:240ms; --t-lang:520ms;
}
html.plattform.glas[data-thema="dunkel"]{
  --glas-flaeche:color-mix(in srgb,var(--glas) 70%,transparent);
  --glas-flaeche-stark:color-mix(in srgb,var(--glas) 88%,transparent);
  --glas-kante:rgba(255,255,255,.11);
  --glas-schatten:0 1px 0 rgba(255,255,255,.07) inset, 0 16px 40px -10px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.25);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.plattform.glas{ --glas-flaeche:var(--karte); --glas-flaeche-stark:var(--karte); }
}
@media (prefers-reduced-transparency:reduce){
  html.plattform.glas{ --glas-flaeche:var(--karte); --glas-flaeche-stark:var(--karte); --glas-weich:none; }
}

/* ---------- Kopfzeile: schwebende Glasleiste ---------- */
html.plattform.glas .kopf{
  position:sticky; top:12px; z-index:30; margin:12px 14px 0; min-height:56px; padding:10px 18px;
  border-radius:22px; border:1px solid var(--glas-kante);
  background:var(--glas-flaeche);
  -webkit-backdrop-filter:var(--glas-weich); backdrop-filter:var(--glas-weich);
  box-shadow:var(--glas-schatten);
}

/* ---------- Glasfläche für Inhalte ---------- */
html.plattform.glas :is(.glasflaeche,.karte,.block,.tracker-karte,.eintrag){
  background:var(--glas-flaeche); border:1px solid var(--glas-kante); border-radius:24px;
  -webkit-backdrop-filter:var(--glas-weich); backdrop-filter:var(--glas-weich);
  box-shadow:var(--glas-schatten);
}
html.plattform.glas .glasflaeche{ overflow:hidden; }
@media (hover:hover){
  html.plattform.glas .glasflaeche.hebt{ transition:transform var(--t-lang) var(--ease),box-shadow var(--t-lang) var(--ease); }
  html.plattform.glas .glasflaeche.hebt:hover{ transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 40px -14px color-mix(in srgb,var(--schatten) 26%,transparent); }
}

/* ---------- Aufbau mit Seitenleiste: links <nav class="reiter">, rechts <main class="seite"> ---------- */
html.plattform.glas body:has(> nav.reiter){
  display:grid; grid-template-columns:236px minmax(0,1fr); grid-template-rows:auto 1fr;
  column-gap:16px; align-items:start; padding:0 14px;
}
html.plattform.glas body:has(> nav.reiter) > .kopf{ grid-column:1 / -1; margin:12px 0 0; }
html.plattform.glas body > nav.reiter{ grid-column:1; grid-row:2; }
/* der Inhalt: <main> oder ein Element mit Klasse .seite, direkt im <body> */
html.plattform.glas body:has(> nav.reiter) > :is(.seite,main){ grid-column:2; grid-row:2; min-width:0; max-width:none; margin:0; padding:20px 0 72px; }

html.plattform.glas :is(.reiter,.einstellungen-nav){
  position:relative; display:flex; flex-direction:column; gap:4px; padding:8px;
  border-radius:24px; border:1px solid var(--glas-kante);
  background:var(--glas-flaeche);
  -webkit-backdrop-filter:var(--glas-weich); backdrop-filter:var(--glas-weich);
  box-shadow:var(--glas-schatten);
  scrollbar-width:none;
}
html.plattform.glas :is(.reiter,.einstellungen-nav)::-webkit-scrollbar{ display:none; }
@media (min-width:901px){ html.plattform.glas .reiter{ position:sticky; top:84px; margin-top:16px; } }

html.plattform.glas :is(.reiter button,.reiter a,.einstellungen-nav-knopf){
  position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:transparent; color:var(--text); text-align:left; text-decoration:none; cursor:pointer;
  font:inherit; font-size:.88rem; font-weight:500; letter-spacing:-.01em;
  padding:9px 11px; border-radius:14px;
  transition:transform var(--t-kurz) var(--ease),background-color var(--t-mittel),color var(--t-mittel),box-shadow var(--t-mittel);
}
html.plattform.glas :is(.reiter button,.reiter a) :is(.icon,.ikon){ flex:none; width:17px; height:17px; opacity:.7; }
html.plattform.glas :is(.reiter button,.reiter a) > span{ flex:1; }
html.plattform.glas :is(.reiter button,.reiter a,.einstellungen-nav-knopf):hover{ background:color-mix(in srgb,var(--text) 6%,transparent); color:var(--text); }
html.plattform.glas :is(.reiter button,.reiter a,.einstellungen-nav-knopf):active{ transform:scale(.98); }
html.plattform.glas :is(.reiter button,.reiter a,.einstellungen-nav-knopf):focus-visible{ outline:none; box-shadow:0 0 0 3px var(--fokus-ring); }
html.plattform.glas :is(.reiter .aktiv,.reiter .ist-aktiv,.reiter [aria-current="true"],.einstellungen-nav-knopf[aria-current="true"]){
  background:linear-gradient(180deg,color-mix(in srgb,var(--akzent) 92%,#fff),var(--akzent));
  color:var(--auf-akzent,#fff); font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 8px 20px -6px color-mix(in srgb,var(--akzent) 70%,transparent);
}
html.plattform.glas :is(.reiter .aktiv,.reiter .ist-aktiv,.reiter [aria-current="true"]) :is(.icon,.ikon){ opacity:1; }
html.plattform.glas .reiter kbd{ font:inherit; font-size:.62rem; opacity:.5; border:.5px solid currentColor; border-radius:5px; padding:0 4px; }
@media (hover:none){ html.plattform.glas .reiter kbd{ display:none; } }
html.plattform.glas .reiter-zahl{ font-size:.7rem; font-weight:700; min-width:19px; padding:1px 6px; border-radius:980px; text-align:center; background:color-mix(in srgb,var(--akzent) 35%,transparent); color:var(--akzent-text); }
html.plattform.glas .reiter-zahl[hidden]{ display:none; }
html.plattform.glas :is(.reiter .aktiv,.reiter .ist-aktiv,.reiter [aria-current="true"]) .reiter-zahl{ background:rgba(0,0,0,.16); color:inherit; }

/* Gleitmarke: der aktive Eintrag wandert, statt zu springen (setzt /glas.js) */
html.plattform.glas .reiter-marke{
  position:absolute; left:0; top:0; z-index:0; pointer-events:none; border-radius:14px; opacity:0;
  width:var(--mw,0); height:var(--mh,0); transform:translate(var(--mx,0),var(--my,0));
  background:linear-gradient(180deg,color-mix(in srgb,var(--akzent) 92%,#fff),var(--akzent));
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 8px 20px -6px color-mix(in srgb,var(--akzent) 70%,transparent);
}
html.plattform.glas .reiter-marke.bereit{ opacity:1; transition:transform var(--t-lang) var(--ease),width var(--t-lang) var(--ease),height var(--t-lang) var(--ease),opacity var(--t-mittel); }
html.plattform.glas .reiter-marke.bereit ~ :is(.aktiv,.ist-aktiv,[aria-current="true"]){ background:transparent; box-shadow:none; }

/* Schmale Bildschirme: die Seitenleiste wird zur schwebenden Leiste oben */
@media (max-width:900px){
  html.plattform.glas body:has(> nav.reiter){ display:block; padding:0 10px; }
  html.plattform.glas body:has(> nav.reiter) > .kopf{ margin:10px 0 0; top:10px; }
  html.plattform.glas .reiter{ position:relative; flex-direction:row; margin:12px 0 0; padding:6px; overflow-x:auto; border-radius:20px; }
  html.plattform.glas .reiter button,html.plattform.glas .reiter a{ width:auto; flex:1; justify-content:center; padding:10px 12px; white-space:nowrap; }
  html.plattform.glas .reiter button :is(.icon,.ikon),html.plattform.glas .reiter a :is(.icon,.ikon){ display:none; }
  html.plattform.glas .reiter button > span,html.plattform.glas .reiter a > span{ flex:none; }
  html.plattform.glas body:has(> nav.reiter) > :is(.seite,main){ padding:16px 0 72px; }
}

/* ---------- Einstellungen-Seite der Plattform: dieselbe Seitenleiste ---------- */
html.plattform.glas #fenster-einstellungen.einstellungen-seite .einstellungen-layout{ min-height:0; gap:16px; padding:16px 14px 0; align-items:flex-start; }
html.plattform.glas #fenster-einstellungen.einstellungen-seite .einstellungen-nav{
  width:236px; height:auto; max-height:calc(100vh - 100px); position:sticky; top:84px; padding:8px; overflow-y:auto;
}
html.plattform.glas #fenster-einstellungen.einstellungen-seite .einstellungen-nav-knopf{ padding:9px 11px; font-size:.88rem; }
html.plattform.glas #fenster-einstellungen.einstellungen-seite .einstellungen-kategorien{ padding:12px clamp(8px,2vw,28px) 72px; }
@media (max-width:640px){
  html.plattform.glas #fenster-einstellungen.einstellungen-seite .einstellungen-layout{ padding:12px 10px 0; gap:12px; }
  html.plattform.glas #fenster-einstellungen.einstellungen-seite .einstellungen-nav{
    width:auto; align-self:stretch; max-height:none; top:78px; flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:6px; border-radius:20px;
  }
  html.plattform.glas #fenster-einstellungen.einstellungen-seite .einstellungen-nav-knopf{ width:auto; flex:none; white-space:nowrap; }
}
/* Wechsel der Kategorie: der neue Inhalt gleitet herein */
html.plattform.glas [data-kategorie-inhalt]:not([hidden]){ animation:herein var(--t-lang) var(--ease) both; }

/* ---------- Knöpfe: kleiner, ruhiger, mit Druckrückmeldung ---------- */
html.plattform.glas .knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 14px; font-size:.85rem; font-weight:600; line-height:1.3; border-radius:980px; border:0;
  color:var(--auf-akzent,#fff);
  background:linear-gradient(180deg,color-mix(in srgb,var(--akzent) 90%,#fff),var(--akzent));
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 16px -6px color-mix(in srgb,var(--akzent) 75%,transparent);
  transition:transform var(--t-kurz) var(--ease),background-color var(--t-mittel),color var(--t-mittel),box-shadow var(--t-mittel),opacity var(--t-mittel);
}
html.plattform.glas .knopf:hover{ background:linear-gradient(180deg,color-mix(in srgb,var(--akzent-hover) 90%,#fff),var(--akzent-hover)); }
html.plattform.glas .knopf .icon,html.plattform.glas .knopf svg{ width:14px; height:14px; }
html.plattform.glas .knopf.breit{ display:flex; width:100%; padding:9px 16px; font-size:.88rem; }
html.plattform.glas .knopf.klein-knopf{ padding:5px 11px; font-size:.78rem; }
html.plattform.glas .knopf.leise{
  background:color-mix(in srgb,var(--glas-flaeche-stark) 60%,transparent); border:1px solid var(--glas-kante);
  color:var(--akzent-text); box-shadow:none;
}
html.plattform.glas .knopf.leise:hover{ background:color-mix(in srgb,var(--glas-flaeche-stark) 85%,transparent); }
html.plattform.glas .knopf.gefahr{ background:#d93a3a; color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.35) inset; }
html.plattform.glas .knopf:active{ transform:scale(.96); }
html.plattform.glas .knopf:disabled,html.plattform.glas .knopf[disabled]{
  background:color-mix(in srgb,var(--text) 7%,transparent); color:var(--leise); box-shadow:none; border:0; opacity:.6; cursor:not-allowed; transform:none;
}
@media (hover:hover){ html.plattform.glas .knopf:not(:disabled):hover{ transform:translateY(-1px); } html.plattform.glas .knopf:not(:disabled):active{ transform:scale(.96); } }
@media (pointer:coarse){ html.plattform.glas .knopf{ min-height:40px; } }
html.plattform.glas :is(.rundknopf,.symknopf){ transition:transform var(--t-kurz) var(--ease),background-color var(--t-mittel),color var(--t-mittel); }
html.plattform.glas .kopf .knopf{ padding:6px 13px; font-size:.82rem; }

/* ---------- Fenster: Milchglas, Öffnen von der Klickstelle aus, Schließen schneller als Öffnen ---------- */
html.plattform.glas dialog.fenster{
  background:var(--glas-flaeche-stark);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glas-kante); border-radius:28px;
  box-shadow:var(--glas-schatten), 0 30px 80px -20px rgba(0,0,0,.35);
}
html.plattform.glas dialog.fenster .fenster-kopf{ border-bottom:1px solid color-mix(in srgb,var(--text) 8%,transparent); box-shadow:none; background:transparent; }
html.plattform.glas dialog.fenster.schliesst{ opacity:0 !important; transform:translateY(6px) scale(.97) !important; transition:opacity 140ms var(--ease-ein),transform 140ms var(--ease-ein) !important; }
html.plattform.glas dialog.fenster.schliesst::backdrop{ opacity:0; transition:opacity 140ms; }

/* ---------- Hinweis unten: gleitet herein und wieder hinaus ---------- */
html.plattform.glas .hinweis-toast{
  position:fixed; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); z-index:120;
  max-width:min(560px,calc(100vw - 32px)); padding:12px 20px; border-radius:980px;
  background:color-mix(in srgb,var(--dunkel) 84%,transparent); color:var(--knopftext);
  border:1px solid var(--glas-kante); font-size:.9rem;
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 12px 36px color-mix(in srgb,var(--schatten) 30%,transparent);
  display:block; visibility:hidden; opacity:0; transform:translate(-50%,14px) scale(.96);
  transition:opacity 160ms var(--ease-ein),transform 160ms var(--ease-ein),visibility 0s 160ms;
}
html.plattform.glas .hinweis-toast.zeigt{
  visibility:visible; opacity:1; transform:translate(-50%,0) scale(1);
  transition:opacity var(--t-mittel) var(--ease),transform var(--t-lang) var(--ease),visibility 0s;
}

/* ---------- Bewegung ---------- */
/* Seitenwechsel: der Inhalt gleitet aus der Richtung herein, aus der man kommt (--dx / --dy setzt kwuttkeGlas.eintritt) */
@keyframes herein{
  from{ opacity:0; transform:translate(var(--dx,0px),var(--dy,10px)); filter:blur(5px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}
html.plattform.glas .seite.neu > *{ animation:herein var(--t-lang) var(--ease) both; }
html.plattform.glas .seite.neu > *:nth-child(2){ animation-delay:50ms; }
html.plattform.glas .seite.neu > *:nth-child(3){ animation-delay:100ms; }
html.plattform.glas .seite.neu > *:nth-child(4){ animation-delay:150ms; }
html.plattform.glas .seite.neu > *:nth-child(n+5){ animation-delay:190ms; }
/* Zeilen in Tabellen und Listen: gestaffelt, höchstens ein paar (--i setzt das Skript) */
@keyframes zeile-auf{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
html.plattform.glas .seite.neu :is(tbody tr,.liste > .bzeile,.zeile){ animation:zeile-auf var(--t-lang) var(--ease) both; animation-delay:calc(120ms + var(--i,0) * 32ms); }
/* Der eine große Moment einer Seite: eine Linie zeichnet sich von links nach rechts */
@keyframes aufziehen{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
html.plattform.glas .seite.neu .aufziehen{ animation:aufziehen 1100ms var(--ease) 200ms both; }
/* Neue oder geänderte Zeile leuchtet kurz auf */
@keyframes aufleuchten{ 0%{ background-color:color-mix(in srgb,var(--akzent) 55%,transparent); } 100%{ background-color:transparent; } }
html.plattform.glas :is(.frisch,.frisch td){ animation:aufleuchten 2200ms var(--ease) 250ms both; }
/* Eine Zeile, die entfernt wird, gleitet hinaus */
html.plattform.glas .geht{ opacity:0; transform:translateX(14px); transition:opacity 160ms var(--ease-ein),transform 160ms var(--ease-ein); pointer-events:none; }
/* Laden: nach kurzer Wartezeit schimmern Platzhalter, damit nichts einfriert */
@keyframes schimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
html.plattform.glas .skelett{ display:grid; gap:14px; }
html.plattform.glas .skelett span{
  display:block; height:120px; border-radius:24px; border:1px solid var(--glas-kante);
  background:linear-gradient(100deg,var(--glas-flaeche) 30%,color-mix(in srgb,var(--glas-flaeche-stark) 90%,transparent) 50%,var(--glas-flaeche) 70%) 0 0/300% 100%;
  animation:schimmer 1600ms linear infinite;
}
html.plattform.glas .skelett span:first-child{ height:56px; width:46%; }
html.plattform.glas .skelett span:nth-child(2){ height:170px; }

/* Wer weniger Bewegung wünscht: nichts wandert, nichts wird unscharf. Einblenden und Farbwechsel bleiben. */
@media (prefers-reduced-motion:reduce){
  @keyframes herein-leise{ from{ opacity:0; } to{ opacity:1; } }
  html.plattform.glas .seite.neu > *,html.plattform.glas .seite.neu :is(tbody tr,.liste > .bzeile,.zeile),
  html.plattform.glas [data-kategorie-inhalt]:not([hidden]){ animation:herein-leise 200ms linear both; animation-delay:0ms; }
  html.plattform.glas .seite.neu .aufziehen{ animation:none; }
  html.plattform.glas :is(.frisch,.frisch td){ animation-duration:1200ms; animation-delay:0ms; }
  html.plattform.glas .knopf:active,html.plattform.glas .knopf:not(:disabled):hover,html.plattform.glas .glasflaeche.hebt:hover{ transform:none; }
  html.plattform.glas .reiter-marke.bereit{ transition:opacity var(--t-mittel); }
  html.plattform.glas .hinweis-toast,html.plattform.glas .hinweis-toast.zeigt{ transform:translate(-50%,0); }
  html.plattform.glas .skelett span{ animation:none; }
  html.plattform.glas dialog.fenster.schliesst{ transform:none !important; }
}