/* =============================================================================
   zero.css — die gemeinsame Gestaltung des Zero-Netzes.
   =============================================================================

   EINE Datei für alle Dienste: Konto, Kalender, Finance, Office, Konverter,
   Chat, Cloud und die Karte. Wer hier etwas ändert, ändert es überall.

       /var/www/shared/css/zero.css      <- diese Datei, die Quelle
       /var/www/shared/deploy-ui.sh      <- verteilt sie an alle Dienste

   Die Kopien in den Diensten werden vom Verteilskript überschrieben. Bitte
   nicht dort ändern, sondern hier.

   Warum Kopien und kein gemeinsamer Verweis: Die Sicherheitsregel jedes
   Dienstes trägt `style-src 'self'` — ein Stylesheet von einer fremden
   Herkunft würde der Browser gar nicht erst laden. Jeder Dienst liefert seine
   eigene Kopie aus, aus derselben Quelle.

   Aufbau:
       1. Farben und Maße   — der Wortschatz. Nur hier stehen Zahlen.
       2. Grundlage         — Körper, Formularteile, Schaltflächen, Karten.
       3. Anmeldemaske      — überall dieselbe, in jedem Dienst.
       4. Anwendungsgerüst  — Navigation links, Blattfenster, Listen.

   Jeder Dienst legt darüber sein eigenes Stylesheet mit dem, was nur ihn
   betrifft — office.css, kalender.css, finance.css, konverter.css.
   ============================================================================= */

/* --- 1. Farben und Maße ---------------------------------------------------
   Der ganze Wortschatz auf einmal. Wer eine Farbe braucht, nimmt einen Namen
   von hier; wer eine neue braucht, trägt sie hier ein. Hex-Werte weiter unten
   sind Einzelfälle und kein Vorbild.

   Die Farbwelt stammt aus Zero Chat: dunkler Grund, EIN Akzent in Mint, Rot
   nur für Gefährliches, Gelb nur für Warnungen. Drei Bedeutungsfarben und
   sonst keine — was keine Bedeutung hat, bleibt grau. */

:root{
  --zero-scroll-spur:#0b111b;
  --zero-scroll-griff:#3d5360;
  --zero-scroll-aktiv:#62bda5;
  /* Eine Schriftfamilie und EINE Fettstufe für Betontes. Vorher stand an
     zwanzig Stellen `font-weight:800` — das ist keine Betonung mehr, das ist
     der Normalzustand. 700 trägt genauso und wirkt ruhiger. */
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"cv05","ss01";   /* geschlossenes ß, einstöckiges g */
  --fett:700;
  --fett-leicht:600;

  /* Grund und Schrift */
  --grund:#080b12;            /* der Untergrund der ganzen Seite */
  --text:#e8ecf4;             /* Fließtext auf dem Grund */
  --muted:#8c98aa;            /* Nebensächliches, Zusätze, Erklärungen */

  /* Flächen: vom Grund nach oben, drei Stufen */
  --panel:#111722;            /* Karten und Leisten */
  --panel2:#151d2a;           /* was auf einer Karte noch einmal absetzt */
  --flaeche:#1a2331;          /* Schaltflächen im Ruhezustand */
  --flaeche-hoch:#22304a;     /* dieselbe beim Überfahren */
  --line:#263044;             /* Trennlinien und Ränder von Karten */
  --rand:#303c50;             /* Ränder von Schaltflächen */

  /* Eingabefelder — dunkler als ihre Umgebung, damit sie als Loch lesbar sind */
  --feld:#090e16;
  --feld-rand:#2b3548;

  /* Der Akzent. Genau einer, im ganzen Netz derselbe. */
  --accent:#62e5bd;
  --accent-hell:#85f6d3;
  --accent-tief:#31bd93;
  --auf-akzent:#06110e;       /* Schrift AUF dem Akzent */

  /* Die drei Bedeutungsfarben */
  --gut-feld:#15241f;   --gut-rand:#2c5a4a;
  --warn-feld:#2c2413;  --warn-rand:#6a5622;  --warn-text:#f0c86a;
  --bad-feld:#481d27;   --bad-rand:#80303f;   --bad-text:#ffd7dc;
  --danger:#ff7785;

  /* Rundungen. Größere Flächen runden stärker — sonst wirkt eine große Karte
     wie ein Kasten mit abgeknabberten Ecken. */
  --rund-klein:10px; --rund:12px; --rund-gross:18px; --rund-voll:999px;

  color:var(--text);background:var(--grund);
}

/* --app-height folgt dem tatsächlich sichtbaren Bereich (siehe viewport.js)
   und berücksichtigt Browserleisten und die Bildschirmtastatur. dvh ist der
   erste Rückfall, 100vh der zweite für ältere Browser. */
:root{--app-height:100vh;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
      --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
@supports (height:100dvh){:root{--app-height:100dvh}}

*{box-sizing:border-box}
body{margin:0;min-height:var(--app-height);overscroll-behavior:none;
     background:radial-gradient(circle at 30% -10%,#182534 0,var(--grund) 38%);
     -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:0;background:none;color:inherit}

/* --- Anmeldemaske -------------------------------------------------------- */
/* Zweigeteilt: links die Aussage, rechts das Formular. Auf schmalen
   Bildschirmen bleibt nur das Formular. */

.auth{min-height:var(--app-height);display:grid;grid-template-columns:1.1fr .9fr}
.story{display:flex;flex-direction:column;justify-content:center;padding:8vw;background:linear-gradient(125deg,#0d151b,#101e26 55%,#0d131c)}
.story h1{font-size:clamp(3rem,6vw,6rem);line-height:.95;letter-spacing:-.06em;margin:12vh 0 24px}
.story p,.muted{color:var(--muted);line-height:1.7}
.authbox{display:grid;place-items:center;padding:30px}
.authbox form{width:min(420px,100%);padding:34px}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--fett)}
.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--rund);
  color:var(--auf-akzent);background:var(--accent);font-weight:var(--fett)}
.security{font-size:12px;color:var(--accent)}

/* --- Flächen und Formularteile ------------------------------------------ */

/* Auch die Karte kommt ohne Verlauf aus. Eine Fläche, ein Rand, ein Schatten —
   was darauf steht, soll wirken, nicht der Untergrund. */
.card{background:#111a24ed;border:1px solid var(--line);border-radius:var(--rund-gross);
  box-shadow:0 18px 50px #0006}
label{display:grid;gap:7px;margin:15px 0;color:#c9d0dc;font-size:13px;font-weight:700}
/* `hidden` muss `display` schlagen. Ohne diese Zeile bleibt ein
   `<label hidden>` sichtbar, weil die Regel darueber staerker ist als die
   des Browsers — und dann steht ein Feld da, das niemand ausfuellen soll. */
[hidden]{display:none !important}
/* 16px verhindert, dass iOS beim Antippen in das Feld hineinzoomt.
   Ankreuz- und Auswahlfelder sind ausgenommen: Sie auf volle Breite zu ziehen
   und mit Innenabstand zu versehen macht aus einem Kästchen einen Balken. */
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;padding:13px 14px;font-size:16px;color:#f3f6fb;background:var(--feld);border:1px solid var(--feld-rand);border-radius:10px;outline:0}
input[type=checkbox],input[type=radio]{width:auto;flex:none;margin:0;accent-color:var(--accent)}
input:focus,textarea:focus,select:focus{border-color:#30b990;box-shadow:0 0 0 3px #48d5aa18}
.error{padding:10px;color:var(--bad-text);background:var(--bad-feld);border:1px solid var(--bad-rand);border-radius:9px}

/* --- Schaltflächen ------------------------------------------------------- */

/* Knöpfe: eine Form, eine Höhe, kein Verlauf. Ein Farbverlauf auf einer
   Schaltfläche sagt nichts aus, er kostet nur Aufmerksamkeit — und auf einer
   Seite, die sich Schlichtheit auf die Fahne schreibt, sagt er das Falsche.
   Der Unterschied zwischen den drei Arten liegt in der Farbe, nicht in der
   Form. */
.primary,.secondary,.danger{padding:11px 16px;border-radius:var(--rund-klein);
  font-size:14px;font-weight:var(--fett);line-height:1.25;cursor:pointer;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s}
/* Ein Verweis, der wie eine Schaltfläche aussieht, soll auch so aussehen:
   Der Unterstrich des Browsers macht daraus sonst einen unterstrichenen Knopf. */
a.primary,a.secondary,a.danger{display:inline-block;text-align:center;text-decoration:none}

/* --- Verweise im Fließtext ----------------------------------------------
   HIER STAND NICHTS, und das war der Fehler. Ohne eigene Regel nimmt der
   Browser seine Vorgabe — reines Blau (#0000EE). Auf diesem Grund sind das
   1,9:1, und WCAG 1.4.3 verlangt 4,5:1. Es fiel nur deshalb lange nicht auf,
   weil die meisten Verweise eine Klasse tragen, die eine Farbe setzt; die
   ohne Klasse, mitten im Satz, waren praktisch unlesbar.

   Gefunden am 16.09.2026 von axe-core, hinter der Anmeldung — vor der
   Anmeldung meldeten acht Oberflächen null Verstöße.

   Der Akzent trägt 11,5:1 auf einer Karte und 12,6:1 auf dem Grund. Der
   Unterstrich bleibt: Farbe allein darf kein Bedeutungsträger sein
   (WCAG 1.4.1). */
a{color:var(--accent)}
a:hover,a:focus-visible{color:var(--accent-hell)}
.primary{color:var(--auf-akzent);background:var(--accent)}
.primary:hover{background:var(--accent-hell)}
.secondary{color:#d8e0ec;background:transparent;border-color:var(--rand)}
.secondary:hover{background:var(--flaeche);border-color:#3f5162}
.danger{color:var(--bad-text);background:transparent;border-color:var(--bad-rand)}
.danger:hover{background:var(--bad-feld)}
.primary:disabled,.secondary:disabled,.danger:disabled{opacity:.45;cursor:default}
.primary:focus-visible,.secondary:focus-visible,.danger:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.wide{width:100%}

/* --- Rückmeldung: gedrückt, beschäftigt, geschafft -------------------------
   Ein Knopf, der beim Drücken nichts tut, wird ein zweites Mal gedrückt. Auf
   einer langsamen Leitung ist das keine Ungeduld, sondern die einzig
   vernünftige Annahme — es sah ja aus, als sei der Klick danebengegangen.
   Genau daher kommen doppelte Bestellungen und doppelte Buchungen.

   Drei Zustände zu drei Zeitpunkten, und keiner braucht eine eigene Klasse:

     :active        beim Drücken       sofort, ohne Netz, ohne JavaScript
     [aria-busy]    während des Wegs   gesperrt, und der Screenreader liest es
     [data-stand]   danach             1,5 s ein Haken, dann wieder normal

   `aria-busy` statt `.laedt`: Es gibt keinen zweiten Namen für denselben
   Zustand, und die Vorlesehilfe kennt ihn schon. Wer eine eigene Klasse
   erfindet, hat danach zwei Wahrheiten und eine davon vergisst er. */

.primary:active,.secondary:active,.danger:active,.icon:active{transform:translateY(1px)}
.primary:active{background:var(--accent-tief)}
.secondary:active{background:var(--flaeche-hoch);border-color:var(--accent-tief)}
.danger:active{background:var(--bad-rand)}
.icon:active{background:var(--flaeche-hoch)}

/* Beschäftigt. Der Knopf behält seine Beschriftung — „Wird gespeichert…" wäre
   ein zweiter Text, der irgendwann nicht mehr zum ersten passt. Er bekommt
   einen Ring davor und nimmt keine Klicks mehr an. */
.primary[aria-busy=true],.secondary[aria-busy=true],.danger[aria-busy=true]{
  pointer-events:none;cursor:default;
  display:inline-flex;align-items:center;justify-content:center;gap:9px}
.wide[aria-busy=true]{display:flex}
.primary[aria-busy=true]::before,.secondary[aria-busy=true]::before,
.danger[aria-busy=true]::before{
  content:"";flex:none;width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  animation:zero-dreht .7s linear infinite}
@keyframes zero-dreht{to{transform:rotate(360deg)}}

/* Geschafft. Kurz und ohne Fenster: Ein Bestätigungsdialog nach dem Speichern
   verlangt einen zweiten Klick dafür, dass der erste geklappt hat. */
.primary[data-stand=gut],.secondary[data-stand=gut],.danger[data-stand=gut]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  color:var(--accent);background:var(--gut-feld);border-color:var(--gut-rand)}
.wide[data-stand=gut]{display:flex}
.primary[data-stand=gut]::before,.secondary[data-stand=gut]::before,
.danger[data-stand=gut]::before{content:"\2713";font-weight:var(--fett)}

/* Und schiefgegangen — sonst ist der einzige Weg zurück aus dem Wartezustand
   der Erfolg, und ein Fehler lässt den Ring ewig drehen. */
.primary[data-stand=schlecht],.secondary[data-stand=schlecht],
.danger[data-stand=schlecht]{
  color:var(--bad-text);background:var(--bad-feld);border-color:var(--bad-rand)}

/* Zwei Größen. Ein Knopf in Standardhöhe sprengt jede Tabellenzeile, und die
   Hauptaktion einer Seite darf größer sein als das, was neben ihr steht. */
.klein{padding:7px 11px!important;font-size:12.5px!important;border-radius:8px!important}
.gross{padding:14px 22px!important;font-size:15.5px!important}
.icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--flaeche);border:1px solid var(--rand);color:#d8e0ec;flex:none}
.icon:hover{background:var(--flaeche-hoch)}
.icon.on{background:var(--gut-feld);border-color:var(--gut-rand);color:var(--accent)}
.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* --- Kleine Abstandsklassen ------------------------------------------------
   Sie ersetzen `style="margin-top:10px"` im Markup. Der Unterschied ist nicht
   Geschmack, sondern Wirkung: Ein `style`-Attribut wird von `style-src 'self'`
   VERWORFEN — es steht im Quelltext und tut nichts, und der Browser meldet es
   bei jedem Aufruf. Ein per JavaScript gesetzter Stil (`element.style.x = y`)
   ist davon NICHT betroffen und darf bleiben.

   Deshalb hier nur das, was sonst im Markup stünde: ein paar Abstände und
   zwei Ausrichtungen. Ein ganzer Werkzeugkasten aus Hilfsklassen soll das
   nicht werden — dafür gibt es Klassen mit Bedeutung. */

.dazu{margin-top:10px}
.dazu-viel{margin-top:14px}
.dazu-mehr{margin-top:18px}
.volle-hoehe{min-height:100vh}
/* Chat rechnet mit der Hoehe, die das Telefon wirklich freigibt — die
   Adressleiste faehrt beim Rollen ein und aus. */
.volle-hoehe-app{min-height:var(--app-height,100vh)}
.brand-mittig{justify-content:center}

/* --- Anordnung ----------------------------------------------------------- */

.hidden{display:none!important}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.spread{justify-content:space-between}
.grow{flex:1;min-width:0}
.tiny{font-size:12px}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stack{display:grid;gap:12px}
.empty{margin:auto;text-align:center;color:var(--muted)}

/* --- Marken und Zeichen -------------------------------------------------- */

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:var(--fett);letter-spacing:.03em;background:var(--flaeche);border:1px solid var(--rand);color:#c2ccda}
.pill.good{background:var(--gut-feld);border-color:var(--gut-rand);color:var(--accent)}
.pill.warn{background:var(--warn-feld);border-color:var(--warn-rand);color:var(--warn-text)}
.pill.bad{background:var(--bad-feld);border-color:var(--bad-rand);color:var(--bad-text)}
.badge{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:9px;font-size:10px;font-weight:var(--fett);color:var(--auf-akzent);background:var(--accent)}
.avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--rund);
  font-weight:var(--fett);font-size:14px;color:var(--auf-akzent);background:var(--accent);
  flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.group{background:#5f8fd8}
.avatar.lg{width:64px;height:64px;border-radius:19px;font-size:24px}

/* --- Listen, Reiter, Suche ----------------------------------------------- */

.searchbar{display:flex;gap:8px}
.searchbar input{padding:10px 12px}
.tabs{display:flex;gap:4px;padding:3px;background:#0d1420;border:1px solid #1d2634;border-radius:11px}
.tabs button{flex:1;padding:7px;border-radius:8px;font-size:12px;font-weight:var(--fett);color:var(--muted)}
.tabs button.active{background:var(--gut-feld);color:var(--accent)}
.tabs button .badge{margin-left:5px}
.listrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--flaeche)}
.listrow:first-child{border-top:0}

/* --- Dateien und Fortschritt --------------------------------------------- */

.file{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:11px;background:#0e1620}
.file .grow b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progress{height:3px;border-radius:2px;background:#1d2634;overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);transition:width .2s}

/* --- Auflagen (Dialoge) --------------------------------------------------- */

.sheet{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#04070ccc;backdrop-filter:blur(6px);z-index:40}
.sheet .card{width:min(560px,100%);max-height:86dvh;overflow:auto;padding:26px;overscroll-behavior:contain}
.sheet h2,.sheet h3{margin:0 0 4px}
.sheet .section{padding:16px 0;border-top:1px solid var(--line)}
.sheet .section:first-of-type{border-top:0}

/* --- Schalter ------------------------------------------------------------- */

.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;font-size:14px}
.switch small{display:block;margin-top:4px;font-weight:400;color:var(--muted);font-size:12px;line-height:1.6}
.toggle{position:relative;width:46px;height:26px;border-radius:999px;background:var(--flaeche-hoch);border:1px solid var(--rand);flex:none;transition:.16s}
.toggle:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.16s}
.toggle.on{background:#1c4437;border-color:var(--gut-rand)}
.toggle.on:after{left:23px;background:var(--accent)}

/* --- Code und Hinweise ---------------------------------------------------- */

.codebox{padding:12px;border-radius:10px;background:var(--feld);border:1px solid var(--feld-rand);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all;line-height:1.7}
.toasts{position:fixed;right:18px;bottom:18px;display:grid;gap:9px;z-index:60}
.toast{padding:12px 15px;border-radius:11px;background:var(--panel2);border:1px solid var(--line);box-shadow:0 14px 40px #0009;font-size:13px;max-width:340px}
.toast.bad{border-color:var(--bad-rand)}
.banner{padding:11px 26px;background:var(--warn-feld);border-bottom:1px solid var(--warn-rand);color:var(--warn-text);font-size:13px}
.banner.bad{background:var(--bad-feld);border-color:var(--bad-rand);color:var(--bad-text)}

/* --- Auf dem Telefon ------------------------------------------------------ */

@media(max-width:760px){
  .auth{grid-template-columns:1fr}
  .story{display:none}
  .authbox{padding:20px;padding-top:calc(20px + var(--safe-t));padding-bottom:calc(20px + var(--safe-b))}
  .authbox form{padding:24px}
  .sheet{padding:0;place-items:stretch}
  .sheet .card{max-height:none;height:100%;border-radius:0;width:100%;
               padding:22px 18px calc(28px + var(--safe-b));
               padding-top:calc(22px + var(--safe-t))}
  .icon{width:42px;height:42px}
  .toasts{right:12px;left:12px;bottom:calc(12px + var(--safe-b))}
  .toast{max-width:none}
}

/* Berührungsbedienung: größere Ziele, kein Doppeltipp-Zoom */
@media(pointer:coarse){
  button,.listrow{touch-action:manipulation}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* --- Rechtsleiste ---------------------------------------------------------
   Impressum und Datenschutz müssen ohne Anmeldung erreichbar sein. Deshalb
   steht diese Zeile in der Anmeldemaske jedes Dienstes, überall gleich. */
.rechtsleiste{margin-top:18px;text-align:center;font-size:11.5px;line-height:2;color:var(--muted)}
.rechtsleiste a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.rechtsleiste a:hover{color:var(--accent)}
.authbox .rechtsleiste{margin-top:14px}

/* --- Die Anmeldemaske der Dienste am Zero Konto ---------------------------
   Dieselbe Maske wie bei Chat und Cloud — nur steht rechts kein Formular,
   sondern der Weg zum gemeinsamen Konto. Drei Unterschiede braucht es:

     * Über der Aussage steht eine Zeile mehr (der Kicker), unter ihr die
       Leiste zu den anderen Diensten. Der große Abstand über der Überschrift
       muss deshalb kleiner werden, sonst wird unten abgeschnitten.
     * Der Kasten rechts braucht Luft zwischen Knopf und Kleingedrucktem.
     * Die linke Spalte darf notfalls rollen statt zu verschlucken. */

.auth-konto .story{justify-content:center;gap:0;overflow:auto}
.auth-konto .story .security{margin:6px 0 0}
.auth-konto .story h1{margin:clamp(18px,4vh,44px) 0 20px;font-size:clamp(2.2rem,4.6vw,4.2rem)}
.auth-konto .story > p{margin:0 0 14px;max-width:46ch}
.auth-konto .story .zero-dienste{margin-top:clamp(20px,3vh,32px)}
.auth-konto .authbox .card>*+*{margin-top:14px}
.auth-konto .authbox .card .muted.tiny{margin-top:16px}
.auth-konto .authbox h2{margin:0}


/* --- 4. Anwendungsgerüst --------------------------------------------------
   Navigation links, Blattfenster, Meldungen, Listen und Formularteile — alles,
   was Kalender, Finance, Office und Konverter gleich machen. */

.shell{min-height:100vh;min-height:var(--app-height,100vh);
       display:grid;grid-template-columns:236px 1fr}
.hauptteil{min-width:0;display:grid;grid-template-rows:auto 1fr;align-content:start}
.inhalt{width:min(1240px,100%);margin:0 auto;padding:22px;
        padding-bottom:calc(22px + var(--safe-b))}

/* Die Kopfzeile gibt es nur auf schmalen Bildschirmen - auf dem Rechner steht
   alles, was dort stünde, in der Leiste links. */
.kopf{display:none}
.kopf .luecke{flex:1}

/* --- Navigation links ------------------------------------------------------ */

.seitenleiste{display:flex;flex-direction:column;gap:12px;min-height:0;
              padding:20px 14px;padding-top:calc(20px + var(--safe-t));
              padding-bottom:calc(20px + var(--safe-b));
              background:#0b0f17;border-right:1px solid var(--line);
              position:sticky;top:0;height:100vh;height:var(--app-height,100vh);overflow:auto}
.seitenleiste .marke{display:flex;align-items:center;gap:9px;font-weight:var(--fett);font-size:15px;
                     padding:0 6px 6px;color:#e7edf5}
.seitenleiste .marke .logo{width:30px;height:30px;flex:none}
.suchzeile input{width:100%}
.navliste{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.navknopf{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
          border-radius:10px;font-size:13.5px;font-weight:600;text-align:left;
          color:var(--muted);background:transparent;border:1px solid transparent}
.navknopf:hover{background:#131c28;color:#dce5ef}
.navknopf[aria-pressed=true]{color:var(--auf-akzent);background:var(--accent);border-color:var(--accent)}
.navzeichen{width:20px;flex:none;text-align:center;font-size:15px;line-height:1}
.nurschmal{display:none}

/* --- Zeitleiste der Ansicht ----------------------------------------------- */

.zeitleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.zeitleiste h2{margin:0;font-size:19px;min-width:210px}
.zeitleiste .pfeile{display:flex;gap:4px}
.zeitleiste .pfeile button{width:36px;height:36px;display:grid;place-items:center;
                           border-radius:9px;font-size:16px}

/* --- Listen und Zeilen ---------------------------------------------------- */

.liste{display:grid;gap:8px}
.zeile{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;
       border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.zeile.erledigt{opacity:.55}
.zeile.erledigt .titel{text-decoration:line-through}
.zeile .titel{font-size:14px;font-weight:600}
.zeile .grow{flex:1;min-width:0}
.zeile small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.haken{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid #35455c;
       background:transparent;display:grid;place-items:center;cursor:pointer;padding:0;
       font-size:13px;line-height:1;color:var(--auf-akzent)}
.haken[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}
.wichtig-1{border-left:3px solid var(--signal,var(--danger))}
.wichtig-2{border-left:3px solid #ffb454}
.wichtig-3{border-left:3px solid #35455c}
.balken{height:6px;border-radius:3px;background:#1d2634;overflow:hidden;margin-top:8px}
.balken i{display:block;height:100%;background:var(--accent)}
.perlen{display:flex;gap:3px;flex-wrap:wrap;margin-top:8px}
.perle{width:13px;height:13px;border-radius:4px;background:#1d2634}
.perle.an{background:var(--accent)}
.perle.heute{box-shadow:0 0 0 1.5px var(--accent)}
.straehne{font-variant-numeric:tabular-nums;font-weight:var(--fett);color:var(--accent)}

/* --- Formulare ------------------------------------------------------------ */

.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.knopfzeile{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.knopfzeile .links{margin-right:auto}
.tagwahl{display:flex;gap:5px;flex-wrap:wrap}
.tagwahl button{width:40px;height:36px;border-radius:9px;font-size:12px;font-weight:700;
                color:var(--muted);background:#0e1620;border:1px solid var(--line)}
.tagwahl button[aria-pressed=true]{color:var(--auf-akzent);background:var(--accent);border-color:var(--accent)}
.teilzeile{display:flex;align-items:center;gap:8px;margin-top:6px}
.teilzeile input[type=text]{flex:1}
.danger-knopf{padding:11px 16px;border-radius:10px;font-size:14px;font-weight:700;
              color:var(--bad-text);background:var(--bad-feld);border:1px solid var(--bad-rand);cursor:pointer}

/* --- Fenster -------------------------------------------------------------- */

.blatt-grund{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;
             background:#050810cc;backdrop-filter:blur(4px);overflow:auto}
.blatt-karte{width:min(620px,100%);max-height:88dvh;overflow:auto;padding:22px;
             background:var(--panel);border:1px solid var(--line);border-radius:16px;
             box-shadow:0 24px 70px #000a}
.blatt-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.blatt-kopf h2{margin:0;font-size:18px}
.mini{width:32px;height:32px;border-radius:9px;font-size:18px;line-height:1;
      color:var(--muted);background:transparent;border:1px solid var(--line)}
.blatt-rumpf{display:grid;gap:12px}

/* --- Meldung -------------------------------------------------------------- */

.meldung{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%) translateY(14px);
         z-index:90;max-width:min(520px,92vw);padding:11px 16px;border-radius:11px;font-size:13px;
         color:#dce5ef;background:#141d2b;border:1px solid var(--line);box-shadow:0 12px 40px #0009;
         opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.meldung[data-an="1"]{opacity:1;transform:translateX(-50%) translateY(0)}
.meldung[data-art=fehler]{border-color:var(--bad-rand);color:var(--bad-text)}
.meldung[data-art=warnung]{border-color:#4a3a12;color:#ffd8a8}

/* --- Auf dem Telefon ------------------------------------------------------ */

@media(max-width:900px){
  /* Auf dem Telefon wandert die Navigation an den unteren Rand: dorthin
     reicht der Daumen, und die Beschriftung weicht dem Zeichen. */
  .shell{grid-template-columns:1fr;grid-template-rows:1fr}
  .seitenleiste{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;
                flex-direction:row;gap:0;padding:6px 4px;
                padding-bottom:calc(6px + var(--safe-b));
                border-right:0;border-top:1px solid var(--line);z-index:40;
                background:#0b0f17f2;overflow:visible}
  .seitenleiste .marke,.seitenleiste>.primary,.suchzeile{display:none}

  /* ALLES IN EINE ZEILE. Vorher standen der Dienstumschalter, das
     Alpha-Angebot und die Rechtslinks als eigene Bloecke UNTER der
     Navigation — zusammen 167 Punkte, ein Viertel des Bildschirms, und die
     Navigation selbst war aus der Leiste herausgedraengt und nicht mehr zu
     sehen. Ein vierzeiliger Werbesatz in einer Navigationsleiste ist an der
     falschen Stelle; die Bereiche des Dienstes sind das, wofuer die Leiste da
     ist.

     Jetzt rollt die ganze Leiste seitwaerts — dasselbe Muster wie bei der
     Werkzeugleiste im Rechenblatt. Die Navigation steht vorn, alles Weitere
     dahinter und schmal. Nichts ist verschwunden, nur nichts nimmt mehr
     Hoehe. */
  .seitenleiste{align-items:center;gap:8px;overflow-x:auto;overflow-y:hidden;
                scrollbar-width:none}
  .seitenleiste::-webkit-scrollbar{display:none}
  .navliste{flex-direction:row;gap:0;margin:0;width:auto;flex:0 0 auto;
            overflow:visible}

  /* Der Umschalter: eine Reihe statt eines Rasters, ohne Ueberschrift. Was er
     ist, sagen die Zeichen und der `title` — der Platz einer Ueberschrift ist
     hier eine ganze Zeile. */
  /* Der Umschalter ist am Schreibtisch ein Raster mit Ueberschrift und
     Kontoknopf UNTEREINANDER. In einer Zeile muss daraus ein Nebeneinander
     werden — sonst bleibt die Leiste zweizeilig, und der halbe Gewinn ist
     wieder weg. */
  .seitenleiste .zero-dienste{display:flex;align-items:center;flex:0 0 auto;gap:6px}
  .seitenleiste .zero-dienste-titel{display:none}
  .seitenleiste .zero-dienste-gitter .zero-dienstleiste{display:flex;gap:4px}
  .seitenleiste .zero-dienstknopf{padding:8px;min-width:40px}
  .seitenleiste .zero-kontoknopf{padding:8px 12px;white-space:nowrap}

  /* Alpha: der Knopf bleibt, der Werbesatz geht. Wer hier steht, sucht einen
     Weg und liest kein Angebot. */
  .seitenleiste .zero-alpha{flex:0 0 auto;gap:0}
  .seitenleiste .zero-alpha .zero-dienste-titel,
  .seitenleiste .zero-alpha-satz,
  .seitenleiste .zero-alpha-mandant{display:none}
  .seitenleiste .zero-alpha-knopf{margin:0;padding:8px 12px;white-space:nowrap}
  .seitenleiste .zero-alpha .zero-dienstleiste{display:flex;gap:4px}

  /* Rechtliches bleibt erreichbar — es muss es auch —, aber in einer Zeile
     und klein. Drei umgebrochene Links waren hier drei Zeilen. */
  .leistenfuss{margin:0;padding:0;flex:0 0 auto}
  .leistenfuss .rechtsleiste{white-space:nowrap;font-size:10px;line-height:1.3;
                             padding:0 4px}
  .navknopf{flex-direction:column;gap:3px;min-width:62px;padding:6px 4px;
            border-radius:9px;font-size:9.5px;font-weight:700;text-align:center}
  .navknopf[aria-pressed=true]{background:var(--gut-feld);color:var(--accent);border-color:transparent}
  .navzeichen{width:auto;font-size:17px}
  .navname{white-space:nowrap}
  .kopf{display:flex;align-items:center;gap:10px;
        padding:10px 12px;padding-top:calc(10px + var(--safe-t));
        border-bottom:1px solid var(--line);background:#0b0f17;position:sticky;top:0;z-index:30}
  .nurschmal{display:inline-flex}
  .hauptteil{padding-bottom:78px}
  .inhalt{padding:12px}
  .zeitleiste h2{font-size:16px;min-width:0}
  .feldpaar{grid-template-columns:1fr}
  .blatt-grund{padding:0;place-items:end stretch}
  .blatt-karte{width:100%;max-height:92dvh;border-radius:18px 18px 0 0;
               padding-bottom:calc(22px + var(--safe-b))}
}
@media(pointer:coarse){
  .kopf{background:#0b0f17}
  .blatt-grund{backdrop-filter:none;background:#050810f2}
  .reiter button{padding:10px 15px}
  .haken{width:26px;height:26px}
}

/* --- 5. Der Dienstumschalter ----------------------------------------------
   Von hier kommt man in jeden anderen Zero-Dienst. Gebaut von
   shared/js/dienste.js, gestaltet hier — damit er überall gleich aussieht,
   ohne dass ein Dienst dafür etwas ergänzen muss.

   Zwei Formen: als Raster für die Seitenleiste (dort ist Platz knapp, also
   Zeichen statt Namen) und als Zeile für eine Kopfzeile. Kein Aufklappmenü:
   Was man sieht, klickt man schneller als was man erst öffnen muss. */

.zero-dienste{display:grid;gap:8px}
.zero-dienste-titel{margin:0;font-size:10.5px;font-weight:var(--fett);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:0 6px}

.zero-dienstleiste{display:flex;gap:6px}
.zero-dienste-gitter .zero-dienstleiste{display:grid;grid-template-columns:repeat(3,1fr)}
.zero-dienste-leiste .zero-dienstleiste{flex-wrap:wrap;align-items:center}

.zero-dienstknopf{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 6px;border-radius:var(--rund-klein);text-decoration:none;
  font-size:12.5px;font-weight:700;color:#c2ccda;
  background:var(--flaeche);border:1px solid var(--rand);
  transition:background .16s,border-color .16s,color .16s}
.zero-dienstknopf svg{width:17px;height:17px;flex:none;
  fill:none;stroke:var(--accent);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.zero-dienstknopf:hover,.zero-dienstknopf:focus-visible{
  background:var(--flaeche-hoch);border-color:var(--accent);color:var(--text);outline:0}

/* Im Raster tragen die Zeichen allein — der Name steht im Titel und wird
   vorgelesen. Sieben Namen in einer 236 Punkte breiten Leiste wären
   sieben abgeschnittene Wörter. */
.zero-dienste-gitter .zero-dienstknopf span{display:none}
.zero-dienste-leiste .zero-dienstknopf{padding:7px 11px}

/* --- Alpha Business in der Zero-Leiste ------------------------------------
   Wer Alpha benutzt, erreicht seine Module von jedem Zero-Dienst aus in einem
   Klick. Wer es nicht benutzt, bekommt keine Werbeflaeche, sondern EINEN Satz
   und einen Knopf. Der Unterschied ist wichtig: Eine Leiste, die jedem etwas
   verkaufen will, lernt man wegzusehen. */

.zero-alpha{gap:6px}
.zero-alpha .zero-dienstknopf svg{stroke:var(--accent-hell,#8ff0d0)}
.zero-alpha-mandant{margin:2px 0 0;padding:0 6px;font-size:11px;color:var(--muted);
                    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zero-alpha-satz{margin:0;padding:0 6px;font-size:11px;line-height:1.45;
                 color:var(--muted)}
.zero-alpha-knopf{display:block;margin-top:6px;padding:8px;border-radius:var(--rund-klein);
                  text-align:center;text-decoration:none;font-size:12px;
                  font-weight:var(--fett);color:var(--text);
                  background:var(--flaeche);border:1px solid var(--rand)}
.zero-alpha-knopf:hover,.zero-alpha-knopf:focus-visible{
  background:var(--flaeche-hoch);border-color:var(--accent);outline:0}
.zero-alpha-angebot{display:grid;gap:4px}

.zero-kontoknopf{display:block;padding:9px;border-radius:var(--rund-klein);
  text-align:center;text-decoration:none;font-size:12.5px;font-weight:var(--fett);
  color:var(--auf-akzent);background:var(--accent)}
.zero-kontoknopf:hover,.zero-kontoknopf:focus-visible{background:var(--accent-hell);outline:0}

@media(max-width:900px){
  .zero-dienste-leiste .zero-dienstknopf span{display:none}
  .zero-dienste-leiste .zero-dienstknopf{padding:8px}
}

/* --- 6. Die Dienstnabe -----------------------------------------------------
   Die Acht um eine Mitte — dieselbe Zeichnung wie auf paulbartsch.de, nur
   trägt jede Kachel hier zusätzlich ihren Stand: offen, beantragt, gesperrt.

   Warum eine Zeichnung und keine Kachelliste: Eine Liste sagt „hier sind
   acht Dinge". Die Nabe sagt „hier ist ein Konto, und daran hängen acht
   Dinge" — und genau das ist die Aussage dieses Dienstes.

   Gerechnet wird in Prozent auf einer Fläche mit festem Seitenverhältnis.
   `container-type: inline-size` erlaubt Schriftgrößen in `cqw`: Sie wachsen
   mit der Nabe statt mit dem Fenster. */

.nabe{container-type:inline-size;position:relative;aspect-ratio:1717/916;width:100%;
      border-radius:20px;overflow:hidden;border:1px solid var(--line);
      background:radial-gradient(58% 62% at 50% 48%,#10362e 0%,#0b1a20 42%,transparent 72%),
                 linear-gradient(150deg,#080d14,#0a121a 55%,#070b11)}
.nabe::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),
                   linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:3.2cqw 3.2cqw;
  mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}

.nabe-kachel,.nabe-mitte{position:absolute;display:flex;align-items:center;gap:1.2cqw;
  padding:1.2cqw 1.5cqw;border-radius:1.4cqw;text-decoration:none;
  border:1px solid #1e2c33;background:#0c141bd9;color:var(--text);
  transition:border-color .25s,background .25s,box-shadow .25s}
.nabe-kachel svg{flex:none;width:3.6cqw;height:3.6cqw;fill:none;stroke:var(--accent);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nabe-kachel>div{min-width:0;display:grid;gap:.2cqw}
.nabe-kachel b{font-size:1.75cqw;font-weight:var(--fett);letter-spacing:-.015em;white-space:nowrap}
.nabe-stand{font-size:1.1cqw;font-weight:700;letter-spacing:.02em}
.nabe-frei .nabe-stand{color:var(--accent)}
.nabe-beantragt .nabe-stand{color:var(--warn-text)}
.nabe-gesperrt .nabe-stand{color:var(--muted)}

a.nabe-kachel:hover,a.nabe-kachel:focus-visible{border-color:var(--accent);
  background:#10241fd9;box-shadow:0 0 0 1px #31bd9333,0 8px 30px #31bd9326;outline:0}
.nabe-gesperrt{border-style:dashed;border-color:#2b3a44}
.nabe-freischalten{margin-top:.4cqw;align-self:flex-start;padding:.5cqw 1cqw;
  border-radius:99px;font-size:1.05cqw;font-weight:var(--fett);cursor:pointer;
  color:var(--auf-akzent);background:var(--accent);border:0}
.nabe-freischalten:disabled{opacity:.5;cursor:default}

.nabe-mitte{flex-direction:column;justify-content:center;gap:.5cqw;
  left:38.6%;top:30.3%;width:22.8%;height:36.5%;text-align:center;
  border-color:#2f7f68;background:#0a1218f2;
  box-shadow:0 0 0 1px #31bd9320,0 0 6cqw #31bd9322}
.nabe-mitte svg{width:5.6cqw;height:5.6cqw;fill:none;stroke:var(--accent);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.nabe-mitte b{font-size:2.4cqw;letter-spacing:-.03em;white-space:nowrap}
.nabe-mitte small{font-size:1.25cqw;color:var(--muted);line-height:1.35;
  max-width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Die acht Plätze — dieselben wie auf der Startseite. */
.nabe-chat     {left:11.5%;top:8.5%; width:25.5%;height:19.5%}
.nabe-cloud    {left:63.0%;top:8.5%; width:25.5%;height:19.5%}
.nabe-map      {left:6.5%; top:37.0%;width:26.0%;height:19.5%}
.nabe-konverter{left:67.5%;top:37.0%;width:26.0%;height:19.5%}
.nabe-finance  {left:11.5%;top:65.5%;width:25.5%;height:19.5%}
.nabe-kalender {left:63.0%;top:65.5%;width:25.5%;height:19.5%}
.nabe-office   {left:37.0%;top:74.0%;width:26.0%;height:19.5%}
/* Zero Foto: Spiegelbild von Office über der Mitte, etwas schmaler, damit es Chat und Cloud nicht berührt. */
.nabe-foto     {left:38.5%;top:3.6%; width:23.0%;height:19.5%}

/* --- Dienste ausserhalb der Nabe -------------------------------------------
   In der Nabe hängen die sieben kostenfreien Zero-Dienste. Was sonst noch mit
   diesem Konto erreichbar ist — Alpha Business etwa —, steht darunter als
   eigene Karte.

   WARUM EINE EIGENE KLASSE UND NICHT `.nabe-kachel`: Eine Nabenkachel sitzt
   auf einem festen Platz (`position:absolute`, Koordinaten je Kennung). Wer
   sie ausserhalb der Nabe benutzt, bekommt eine Kachel ohne Koordinaten —
   und die landet irgendwo auf der Seite. Genau so ist Alpha Business
   quer über die Übersicht gerutscht. */

.dienstkarten-kopf{margin:26px 0 4px;font-size:15px;letter-spacing:-.01em}
.dienstkarten-satz{margin:0 0 12px;font-size:13px}
.dienstkarten{display:grid;gap:10px;
              grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.dienstkarte{display:flex;align-items:center;gap:12px;min-width:0;
             padding:14px 16px;border-radius:var(--rund);text-decoration:none;
             border:1px solid var(--line);background:var(--panel);color:var(--text);
             transition:border-color .2s,background .2s}
.dienstkarte svg{flex:none;width:26px;height:26px;fill:none;stroke:var(--accent);
                 stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dienstkarte>div{min-width:0;display:grid;gap:2px}
.dienstkarte b{font-size:14.5px;font-weight:var(--fett);letter-spacing:-.01em}
.dienstkarte-zweck{font-size:12px;color:var(--muted)}
a.dienstkarte:hover,a.dienstkarte:focus-visible{border-color:var(--accent);
  background:var(--panel2);outline:0}
.dienstkarte.nabe-gesperrt{border-style:dashed;border-color:#2b3a44}

/* Die Leitungen: Kästen mit zwei Rändern und einer runden Ecke. Kein SVG —
   so wandern sie von selbst mit, wenn die Nabe schmaler wird. */
.nabe-leitung{position:absolute;pointer-events:none;border:0 solid #5f817c;
  transition:border-color .25s,box-shadow .25s}
.nabe-l-chat     {left:36.5%;top:24.3%;width:13.5%;height:6.0%;
                  border-top-width:2px;border-right-width:2px;border-top-right-radius:1.2cqw}
.nabe-l-cloud    {left:50.0%;top:24.3%;width:13.5%;height:6.0%;
                  border-top-width:2px;border-left-width:2px;border-top-left-radius:1.2cqw}
.nabe-l-map      {left:32.5%;top:46.7%;width:6.1%;height:0;border-top-width:2px}
.nabe-l-konverter{left:61.4%;top:46.7%;width:6.1%;height:0;border-top-width:2px}
.nabe-l-finance  {left:36.5%;top:66.8%;width:13.5%;height:8.5%;
                  border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:1.2cqw}
.nabe-l-kalender {left:50.0%;top:66.8%;width:13.5%;height:8.5%;
                  border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:1.2cqw}
.nabe-l-office   {left:49.9%;top:66.8%;width:0;height:7.2%;border-left-width:2px}
.nabe-l-foto     {left:49.9%;top:23.1%;width:0;height:7.2%;border-left-width:2px}

.nabe-kachel:hover+.nabe-leitung,.nabe-kachel:focus-visible+.nabe-leitung{
  border-color:var(--accent-hell);box-shadow:0 0 2.4cqw #31bd9366}

/* Unter 760 Punkten wird aus der Nabe eine Liste: Acht Kacheln auf 400
   Punkten wären Briefmarken, und die Leitungen dazwischen ein Gekrakel. */
@media(max-width:760px){
  .nabe{aspect-ratio:auto;container-type:normal;display:grid;gap:10px;padding:14px}
  .nabe-leitung{display:none}
  .nabe-kachel,.nabe-mitte{position:static;width:auto;height:auto;
    padding:13px 15px;border-radius:12px;gap:12px}
  .nabe-mitte{order:-1;flex-direction:row;flex-wrap:wrap;text-align:left;row-gap:2px}
  .nabe-mitte svg{width:28px;height:28px;flex:none}
  .nabe-mitte b{font-size:17px}
  .nabe-mitte small{flex-basis:100%;font-size:12.5px;padding-left:40px;max-width:none}
  .nabe-kachel svg{width:24px;height:24px}
  .nabe-kachel b{font-size:14.5px;white-space:normal}
  .nabe-stand{font-size:11.5px}
  .nabe-freischalten{font-size:11.5px;padding:5px 11px}
}

/* --- Das Rechtsklickmenü ---------------------------------------------------
   Was man oft tut, soll dort erreichbar sein, wo man gerade ist. Es klappt
   zum Zeiger auf und weicht dem Bildrand aus.

   Bewusst schmal und ohne Zeichen: Ein Schnellmenue liest man nicht, man
   trifft es. Zeichen daneben machen jede Zeile breiter und keine schneller. */

.zero-schnellmenue{position:fixed;z-index:200;min-width:172px;max-width:280px;
  padding:5px;border-radius:var(--rund);border:1px solid var(--line);
  background:var(--panel2);box-shadow:0 18px 48px #000a;
  display:grid;gap:1px}
.zero-schnellmenue-punkt{display:flex;align-items:center;gap:12px;width:100%;
  padding:8px 10px;border:0;border-radius:var(--rund-klein);background:none;
  color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.zero-schnellmenue-punkt:hover:not(:disabled),
.zero-schnellmenue-punkt:focus-visible{background:var(--flaeche);outline:0}
.zero-schnellmenue-punkt:disabled{color:var(--muted);opacity:.55;cursor:default}
.zero-schnellmenue-punkt.gefahr{color:var(--bad-text,#ff8f8f)}
.zero-schnellmenue-punkt.gefahr:hover:not(:disabled),
.zero-schnellmenue-punkt.gefahr:focus-visible{background:var(--bad-feld,#2a1416)}
.zero-schnellmenue-taste{margin-left:auto;color:var(--muted);font-size:11px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.zero-schnellmenue-trenner{margin:4px 6px;border-top:1px solid var(--line)}

/* Auf dem Telefon gibt es keinen Rechtsklick, und ein langer Druck ruft das
   Menue des Systems. Dort ist dieses hier nicht der Weg — die Knoepfe stehen
   ohnehin sichtbar. */
@media (pointer: coarse){
  .zero-schnellmenue{min-width:200px}
  .zero-schnellmenue-punkt{padding:11px 12px;font-size:14px}
}

/* Eine Karte, die etwas Endgueltiges anbietet. Sie sieht anders aus als die
   anderen, weil sie etwas anderes ist — aber nicht schreiend: Wer sein Konto
   loeschen will, soll es finden, ohne dass es jeden anderen anspringt. */
.gefahrkarte{border-color:var(--bad-rand,#4a2020)}
.gefahrkarte h2{color:var(--bad-text,#ff8f8f)}
.gefahrkarte .feldsatz{max-width:26rem}

/* --- Der Fuss unter einer Einrichtungskarte --------------------------------
   Die Leiste der anderen Dienste und das Alpha-Angebot gehoeren UNTER die
   Karte und nicht an den Seitenrand. Vorher hingen sie ganz links, und der
   Knopf zog sich ueber die ganze Fensterbreite — er sah aus wie der wichtigste
   Knopf der Seite, dabei ist er der beilaeufigste.

   Dieselbe Breite wie die Karte darueber, damit eine Kante entsteht statt
   drei. */
.einrichtungsfuss{max-width:520px;margin:26px auto 0;display:grid;gap:18px}
.einrichtungsfuss .zero-dienste-titel{padding-left:2px}
.einrichtungsfuss .zero-alpha-satz,
.einrichtungsfuss .zero-dienste-titel{padding-left:2px;padding-right:2px}
/* Der Knopf so breit wie die Karte, nicht wie das Fenster. */
.einrichtungsfuss .zero-alpha-knopf{max-width:100%}

/* Die Alpha-Leiste unter einer Einrichtungskarte ist NICHT die aus der
   Seitenleiste — auch wenn sie dieselben Klassen trägt.

   In der Seitenleiste ist sie 236 Punkte breit. Dafür ist `zero-dienste-gitter`
   gebaut: drei feste Spalten, und die Modulnamen sind ausgeblendet, weil drei
   Namen nebeneinander in 236 Punkten drei abgeschnittene Wörter wären.

   Unter der Tresorkarte ist sie 520 Punkte breit. Dieselbe Regel macht daraus
   drei Kacheln von je 170 Punkten mit einem 17-Punkt-Zeichen in der Mitte —
   und bei zehn gebuchten Modulen vier Reihen namenloser Kacheln, die über die
   Karte hinausragen und breiter wirken als das Passwortfeld darüber. Auf der
   Seite, auf der man ein Tresorwort eingibt, ist das der lauteste Gegenstand.

   Hier ist Platz. Also: so viele Spalten, wie hineinpassen, und die Namen
   bleiben stehen — sie sind der Grund, warum man hinsieht. */
.einrichtungsfuss .zero-dienste-gitter .zero-dienstleiste{
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.einrichtungsfuss .zero-dienste-gitter .zero-dienstknopf{
  justify-content:flex-start;padding:9px 11px;min-width:0}
.einrichtungsfuss .zero-dienste-gitter .zero-dienstknopf span{
  display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.einrichtungsfuss .zero-alpha-mandant{padding-left:2px}

/* Auf dem Telefon steht ein Modul je Zeile. Zwei halbe Namen nebeneinander
   sind kein Gewinn gegenüber einem ganzen. */
@media(max-width:520px){
  .einrichtungsfuss .zero-dienste-gitter .zero-dienstleiste{
    grid-template-columns:1fr}
}

/* --- Die Tresorkarte -------------------------------------------------------
   Die Karte, auf der das Tresorwort eingegeben wird — beim Einrichten und
   beim Aufschließen.

   Sie stand bisher nur in kalender.css. Finance und Office tragen dieselbe
   Klasse und hatten die Regel nicht: Dort lief die Karte auf die volle Breite
   von `.inhalt` (bis 1240 Punkte), während der Fuß darunter bei 520 blieb.
   Ein Passwortfeld über die halbe Bildschirmbreite, und darunter, versetzt,
   die Dienstleiste. Genau die Kante, die `.einrichtungsfuss` vermeiden
   sollte — nur eine Etage höher.

   Eine Klasse, die drei Dienste benutzen, gehört in die Datei, die alle drei
   lesen. */
.tresor-karte{width:min(520px,100%);margin:0 auto;padding:30px}
@media(max-width:600px){.tresor-karte{padding:22px}}

/* Der Wiederherstellungsschlüssel. Er wird EINMAL gezeigt und danach nie
   wieder — also muss er abschreibbar sein: feste Zeichenbreite, weite
   Sperrung, und `user-select:all`, damit ein Klick ihn ganz markiert statt
   ein Fünfergrüppchen.

   Stand bisher ebenfalls nur in kalender.css. In Office und Finance war der
   einzige Weg zurück in den eigenen Tresor ein Absatz Fließtext. */
.notschluessel{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;
               letter-spacing:.12em;text-align:center;line-height:2;padding:14px;
               border-radius:11px;background:#0e1620;border:1px dashed var(--gut-rand);
               color:var(--accent);user-select:all;overflow-wrap:anywhere}
@media(max-width:420px){.notschluessel{font-size:16px;letter-spacing:.08em}}

/* --- Ziehen: Anfasser und Ablegeziel ---------------------------------------
   Ziehen ist die einzige Bedienung, die sich nicht ankündigt. Ein Knopf sieht
   aus wie ein Knopf; eine ziehbare Karte sieht aus wie eine Karte. Der Zeiger
   ist der einzige Hinweis, den es vor dem ersten Versuch gibt — und `grab`
   stand bisher an genau zwei Stellen in alpha.css und keiner in zero.css.

   Dazu gehört immer die Gegenseite: Wo etwas hinkann, muss man sehen, BEVOR
   man loslässt. Sonst ist Ziehen ein Ratespiel mit Rückgängig als Preis. */
[draggable=true]{cursor:grab}
[draggable=true]:active,.zieht{cursor:grabbing}
/* Das gezogene Stück bleibt sichtbar, tritt aber zurück: Es ist gerade
   nirgends. */
.zieht{opacity:.45}

/* Ein gepunkteter Griff. Er sagt „hier anfassen" an Stellen, wo die ganze
   Fläche zu ziehen missverständlich wäre — etwa in einer Zeile, die man auch
   anklicken kann. */
.griff{flex:none;width:16px;height:20px;cursor:grab;border-radius:4px;
  background-image:radial-gradient(currentColor 1.1px,transparent 1.2px);
  background-size:5px 5px;background-position:2px 3px;
  background-repeat:round;color:var(--muted);opacity:.7}
.griff:hover{color:var(--text);opacity:1}
.griff:active{cursor:grabbing}

/* Das Ablegeziel. Gestrichelt, nicht gefüllt: Eine volle Fläche sieht aus, als
   sei schon etwas abgelegt. */
.ablegeziel{outline:2px dashed var(--accent);outline-offset:-3px;
  background:var(--gut-feld)}
.ablegeziel-aus{outline:2px dashed var(--bad-rand);outline-offset:-3px;
  background:var(--bad-feld)}

/* Die Einfügemarke zwischen zwei Karten. Sie beantwortet die Frage, die ein
   umrandetes Ablegeziel offen lässt: davor oder danach? */
.einfuegemarke{position:relative}
.einfuegemarke::before{content:"";position:absolute;inset-inline:0;height:2px;
  border-radius:2px;background:var(--accent);box-shadow:0 0 0 3px #62e5bd22}
.einfuegemarke[data-seite=vor]::before{top:-5px}
.einfuegemarke[data-seite=nach]::before{bottom:-5px}

/* Einheitliche Scrollbalken auf Seiten, in Dialogen und verschachtelten Listen.
   Bewusst ausgeblendete Leisten der mobilen Navigation haben Vorrang. */
* { scrollbar-width: thin; scrollbar-color: var(--zero-scroll-griff) var(--zero-scroll-spur); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--zero-scroll-spur); border-radius: 999px; }
::-webkit-scrollbar-thumb { background: var(--zero-scroll-griff); border: 2px solid var(--zero-scroll-spur); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--zero-scroll-aktiv); }
::-webkit-scrollbar-corner { background: var(--zero-scroll-spur); }
@media (forced-colors: active) { * { scrollbar-color: auto; } }