/* Oberfläche der Plattform, Stil A „Klar wie Langdock“.
   Werte und Bausteine in docs/DESIGN.md, Ton und Zielgruppe in docs/PRODUCT.md.
   Weiße Arbeitsfläche, links eine ruhige Seitenleiste, ein einziger Akzent.
   Hell ist in dieser Runde der einzige Modus. */

:root {
  --marke: #1f4d3a;  /* Tannengrün der Wortmarke, wie das O und operanda.eu */
  color-scheme: light;

  /* Grundfarben */
  --grund: oklch(100% 0 0);
  --flaeche: oklch(98.4% 0.002 275);
  --flaeche-2: oklch(96.6% 0.003 275);
  --linie: oklch(92.4% 0.004 275);
  --linie-stark: oklch(87% 0.006 275);
  /* Trägt jetzt eine echte Root-Definition; web/zentrale.css:302 schreibt sie
     weiter mit dem alten Fallback var(--flaeche-stark, var(--linie)) — das
     ist seit dieser Zeile redundant, aber harmlos, weil der Wert gleich ist. */
  --flaeche-stark: var(--linie);
  --text: oklch(24% 0.012 275);
  --text-leise: oklch(52% 0.010 275);
  --text-still: oklch(64% 0.008 275);

  /* Ein Akzent, sonst keiner */
  --akzent: oklch(38.2% 0.061 164);  /* Tannengrün #1f4d3a, seit 06.10.2026 statt Lila */
  --akzent-dunkel: oklch(31.7% 0.05 164);
  --akzent-hell: oklch(95.5% 0.016 164);
  --akzent-linie: oklch(87% 0.035 164);

  /* Zustände: immer Punkt plus Wort */
  --laeuft: oklch(58% 0.105 155);
  --wartet: oklch(66% 0.115 72);
  --ruht: oklch(74% 0.008 275);
  /* Ungelesen (Chatliste): Blau wie im Mailprogramm, getrennt von läuft/wartet */
  --ungelesen: oklch(56% 0.17 255);

  /* Fehler und Löschen */
  --fehler: oklch(52% 0.17 28);

  --r-xs: 4px;
  --r-s: 6px;
  --r-m: 8px;
  --r-l: 12px;
  --r-xl: 16px;
  --r-voll: 999px;

  /* Abstände. Die Skala aus DESIGN.md, sonst nichts. */
  --a-1: 4px;
  --a-2: 8px;
  --a-3: 12px;
  --a-4: 16px;
  --a-5: 22px;
  --a-6: 32px;

  /* Schrift. Die sieben Stufen aus DESIGN.md. */
  --s-titel: 23px;
  --s-block: 16.5px;
  --s-unter: 15px;
  --s-text: 14.5px;
  --s-knopf: 13.5px;
  --s-klein: 13px;
  --s-kennzeichen: 11px;

  /* Schatten. Nur unter Dialogen und schwebenden Flächen. --schatten-dialog
     stand bis zur Aufräumrunde zu Aufgabe 17 unbenutzt da (die dialog-Regel
     trug ihren Schatten roh, mit einem anderen Wert) — der Wert hier ist
     jetzt der tatsächlich gezeigte, und die Regel liest ihn. */
  --schatten-panel: 0 4px 18px oklch(24% .012 275 / .08);
  --schatten-dialog: 0 16px 40px oklch(0% 0 0 / .16);
  --schatten-schwebend: 0 12px 28px oklch(0% 0 0 / .12);
  --schatten-knopf: 0 4px 14px oklch(0% 0 0 / .16);
  /* Fokusring: die drei Stellen, an denen der Ring wortgleich auftrat
     (web/chat-styles.css, web/zentrale.css zweimal). Wo der Ring dünner ist
     oder eine andere Farbe trägt, bleibt er bewusst roh — das ist keine
     Abweichung, die ein gemeinsames Token verdeckt. */
  --fokusring: 0 0 0 3px var(--akzent-hell);

  /* Ebenen. Wer eine neue braucht, trägt sie hier ein statt zu raten. Kein
     Token für <dialog> (--e-dialog stand hier bis Fix-Runde 1 zu Aufgabe 13,
     unbenutzt): showModal() legt einen Dialog in den Top-Layer des Browsers,
     der braucht kein z-index und überholt jede dieser Ebenen von selbst. */
  --e-klebend: 20;
  --e-handynav: 25;
  --e-panel: 30;
  --e-leistenmenue: 40;

  /* Bewegung */
  --zeit: .15s;

  /* Der fehlende Radius: sechsmal benutzt, nie definiert. Knöpfe und Felder
     sind 8 px, das ist der Wert, der hier gemeint war. */
  --r-knopf: var(--r-m);

  --seitenleiste: 248px;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Ältere Browser ohne OKLCH bekommen neutrale Werte, nicht nichts. */
@supports not (color: oklch(50% 0 0)) {
  :root {
    --grund: #fff; --flaeche: #fafafb; --flaeche-2: #f2f3f6; --linie: #e6e7ec; --linie-stark: #d5d7de;
    --text: #2b2c34; --text-leise: #6c6e7a; --text-still: #8b8d98;
    --akzent: #1f4d3a; --akzent-dunkel: #163a2b; --akzent-hell: #e9f1ec; --akzent-linie: #cfe0d6;
    --laeuft: #3f9161; --wartet: #c08327; --ruht: #babcc4; --ungelesen: #2f6bd8; --fehler: #b3341f;
  }
}

/* ---------------------------------------------------------------- Grund */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* dvh statt vh: in der installierten iOS-App sind 100vh 844 statt 797 pt
   (mit Statusleiste, gemessen 03.10.2026). Der Überhang machte jede Seite
   scrollbar; sie rutschte beim Wischen unter die Statusleiste und wurde dort
   weichgezeichnet. */
body {
  margin: 0; min-height: 100dvh; background: var(--grund); color: var(--text);
  font-family: var(--schrift); font-size: 14.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--akzent); text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-dunkel); }
/* Kein eigener Radius beim Fokus: der Ring folgt der Form des Elements
   (runde Knöpfe blieben sonst beim Fokussieren eckig, Chatkopf-Schliff 13.10.2026). */
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
code { font-family: var(--mono); font-size: .88em; background: var(--flaeche-2); padding: .08em .35em; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; letter-spacing: -.01em; }
h1 { font-size: 23px; font-weight: 600; }
h2 { font-size: 16.5px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
h4 { font-size: 13px; font-weight: 600; color: var(--text-still); text-transform: uppercase; letter-spacing: .06em; }
p { margin: 0 0 .75rem; max-width: 68ch; }
ul { margin: .25rem 0; padding-left: 1.2rem; }
.klein { color: var(--text-leise); font-size: 13px; line-height: 1.5; }
.warn { color: var(--wartet); font-style: normal; }
em.warn { font-style: normal; }
[hidden] { display: none !important; }

/* ============================================================== Rahmen */
.app { display: flex; min-height: 100dvh; }

/* ------------------------------------------------------------ Seitenleiste */
.seite {
  width: var(--seitenleiste); flex: none;
  background: var(--flaeche); border-right: 1px solid var(--linie);
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 12px 12px; position: sticky; top: 0; height: 100dvh;
}
.logo { display: flex; align-items: center; gap: 9px; padding: 2px 8px 18px; color: var(--text); text-decoration: none; }
.logo:hover { color: var(--text); }
.logo .zeichen { width: 28px; height: 28px; flex: none; display: flex; }
.logo .worte { min-width: 0; }
.logo b { display: block; color: var(--marke); font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.logo span { display: block; font-size: 11.5px; color: var(--text-still); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seite-oben { display: flex; align-items: flex-start; gap: 2px; }
.seite-oben .logo { flex: 1; min-width: 0; padding-right: 0; }
.leiste-knopf {
  flex: none; width: 30px; height: 30px; min-height: 0; padding: 0;
  color: var(--text-still); background: transparent; border: 1px solid transparent;
}
.leiste-knopf:hover { color: var(--text); background: var(--flaeche-2); border-color: transparent; }
.js .leiste-knopf { display: inline-flex; }
.leiste-knopf { display: none; }

/* Eingeklappte Seitenleiste: nur Symbole. Die Wörter bleiben für Vorleser im DOM. */
.leiste-schmal { --seitenleiste: 60px; }
/* Sichtbarer Überlauf, sonst schneidet die schmale Leiste das Kontomenü ab
   (auf den zentralen Seiten scrollt sie sonst mit overflow-y: auto). */
html.leiste-schmal .seite { padding: 18px 8px 12px; overflow: visible; }
.leiste-schmal .seite-oben { flex-direction: column; align-items: center; gap: 10px; margin-bottom: 14px; }
.leiste-schmal .logo { flex: none; padding: 2px 0 0; }
.leiste-schmal .logo .worte, .leiste-schmal .seite .nav-wort, .leiste-schmal .konto-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.leiste-schmal .seite .wahl { display: none; }
.leiste-schmal .nav a { justify-content: center; padding: 8px 0; }
.leiste-schmal .navgruppe + .navgruppe { border-top: 1px solid var(--linie); padding-top: 12px; }
.leiste-schmal .seite .app-knopf { justify-content: center; margin: 0 0 12px; padding: 5px 0; width: 100%; }

/* Arbeitsplatz-Wähler: <details>, kommt ohne JS aus */
.wahl { margin: 0 0 14px; }
.wahl > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--r-m);
  background: var(--grund); font-size: 13.5px; font-weight: 500; color: var(--text);
}
.wahl > summary::-webkit-details-marker { display: none; }
.wahl > summary:hover { border-color: var(--linie-stark); }
.wahl > summary .was { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wahl > summary .vor { font-size: 11px; color: var(--text-still); font-weight: 400; display: block; letter-spacing: .06em; text-transform: uppercase; }
.wahl > summary .pfeil { flex: none; color: var(--text-still); transition: transform .15s ease-out; }
.wahl[open] > summary .pfeil { transform: rotate(180deg); }
.wahlliste { margin: 4px 0 0; padding: 4px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--grund); }
.wahlliste a {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-s);
  font-size: 13.5px; color: var(--text); text-decoration: none;
}
.wahlliste a:hover { background: var(--flaeche-2); color: var(--text); }
.wahlliste a[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 500; }
.wahlliste a .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wahlliste a .w { font-size: 12px; color: var(--text-still); }
.wahlliste .neu { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 6px; color: var(--text-leise); }
/* Unternehmens-Wähler: dieselbe Liste, aber jede Zeile ist ein Formular-POST. */
.unwahl { margin-bottom: 8px; }
.wahlliste form { margin: 0; }
.wahlliste form > button.text {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 0; padding: 6px 8px;
  border-radius: var(--r-s); font-size: 13.5px; font-weight: 400; color: var(--text-leise); text-align: left;
}
.wahlliste form > button.text:hover { background: var(--flaeche-2); color: var(--text); }
.wahlliste form > button.text[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 500; }
.wahlliste form > button.text .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wahlliste form > button.text .w { font-size: 12px; color: var(--text-still); }
/* Fall 461: „Ansicht als“ im Unternehmenswähler, je Person Ansehen und Handeln. */
.wahlliste .ansichtals { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 4px; }
.wahlliste .ansichtals .vor { margin: 4px 8px 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-still); }
.wahlliste .ansichtzeile { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; padding: 5px 8px; border-radius: var(--r-s); }
.wahlliste .ansichtzeile:hover { background: var(--flaeche-2); }
.wahlliste .ansichtzeile .n { flex: 1 0 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text); }
.wahlliste .ansichtzeile button { flex: none; min-height: 0; margin: 0; padding: 1px 0; border: 0; background: none; font-size: 12.5px; font-weight: 500; color: var(--akzent); }
.wahlliste .ansichtzeile button:hover { background: none; text-decoration: underline; }
.wahlliste .unsuche { display: flex; gap: 6px; padding: 4px 4px 8px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
.wahlliste .unsuche input { flex: 1; min-width: 0; }

/* Einträge */
.nav { display: flex; flex-direction: column; }
.navgruppe { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.navgruppe:last-child { margin-bottom: 0; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--r-s);
  font-size: 14px; color: var(--text-leise); text-decoration: none;
}
.nav a:hover { background: var(--flaeche-2); color: var(--text); }
.nav a .ic { flex: none; color: var(--text-still); }
.nav a[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); font-weight: 500; }
.nav a[aria-current] .ic { color: var(--akzent); }
/* Unter „Projekte“ klappen die eigenen Projekte auf, je mit dem Farbzeichen
   aus /projekte (.n-agentsym). Ein Klick filtert die Chatliste. */
.nav-zeile { display: flex; align-items: center; gap: 2px; }
.nav-zeile > a { flex: 1; min-width: 0; }
.nav-klapp { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-s);
  background: none; color: var(--text-still); cursor: pointer; }
.nav-klapp:hover { background: var(--flaeche-2); color: var(--text); }
.nav-klapp .pfeil { transition: transform .15s; }
.nav-projekte-zu .nav-klapp .pfeil { transform: rotate(-90deg); }
.nav-projekte { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; padding-left: 14px; }
.nav-projekte-zu .nav-projekte { display: none; }
.nav a.nav-projekt { padding: 4px 10px 4px 8px; font-size: 13.5px; gap: 9px; }
.nav a.nav-projekt .nav-wort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-projektsym { flex: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center;
  color: #fff; font-size: 10.5px; font-weight: 700; background: oklch(52% 0.13 var(--ton, 164)); }
/* Fall 486: Apps und Zahnrad sitzen rechts in der Zeile und erscheinen beim
   Überfahren oder mit dem Fokus; ohne Maus stehen sie immer da. */
.nav-projektzeile { position: relative; }
.nav .nav-projektzeile a.nav-projekt { padding-right: 60px; }
.nav .nav-projektzeile:hover a.nav-projekt { background: var(--flaeche-2); color: var(--text); }
.nav-projekt-knoepfe { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; opacity: 0; }
.nav a.nav-projekt-knopf { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border-radius: var(--r-s); color: var(--text-still); }
.nav a.nav-projekt-knopf .ic { color: inherit; }
.nav-projektzeile:hover .nav-projekt-knoepfe, .nav-projekt-knoepfe:focus-within { opacity: 1; }
.nav a.nav-projekt-knopf:hover { background: var(--flaeche); color: var(--text); }
@media (hover: none) { .nav-projekt-knoepfe { opacity: 1; } }
.leiste-schmal .nav-klapp, .leiste-schmal .nav-projekte { display: none; }

/* Am Handy steht dafür ein kleiner Kreis im Kopf, die Seitenleiste ist dort weg. */
.hkopf .konto {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-voll);
  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text-leise); text-decoration: none;
}
.hkopf .konto[aria-current] { color: var(--akzent); border-color: currentColor; }
.seitenfuss { margin-top: auto; padding-top: 20px; }
.seitenfuss .app-knopf { margin: 0 4px 12px; }
/* Aufgabe 13: die Dropdown-Panels (Kontomenü, Zeilenmenü, „Verbindung
   hinzufügen“, „Mehr“ am Handy) teilen sich Fläche, Rand, Radius und
   Schatten — eine Regel statt vier Wiederholungen. Was sich wirklich
   unterscheidet (Innenabstand: 6/8/16 px je nach Inhalt, Breite, Position,
   Sprunghöhe der Einträge), bleibt an der jeweiligen Stelle stehen; die
   Erhebung dazu steht im Bericht zu Aufgabe 13. .z-menu (Betreuung,
   web/zentrale.css, eigene Datei ohne ui.js) hat einen helleren Rand
   (--linie statt --linie-stark) und bleibt deshalb außen vor — nur sein
   z-index bekommt dort das Ebenen-Token.
   .panel ist zugleich die Hülle, die ui.menue() selbst baut: eigene
   Position/Breite/Innenabstand, weil eine neue Stelle sonst nichts hätte,
   an dem sie sich orientieren könnte. */
.panel, .zeilenmenue > div {
  background: var(--grund); border: 1px solid var(--linie-stark);
  border-radius: var(--r-m); box-shadow: var(--schatten-panel);
}
.panel { position: absolute; z-index: var(--e-panel); min-width: 12rem; padding: var(--a-1); }
.panel a, .panel button {
  display: block; width: 100%; padding: var(--a-2) var(--a-3); min-height: 44px;
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--text);
  text-align: left; text-decoration: none; font-size: 13px; font-weight: 400; white-space: normal;
}
.panel a:hover, .panel button:hover { background: var(--flaeche); }
.panel a.gefahr, .panel button.gefahr, .panel a.gefahr:hover, .panel button.gefahr:hover { color: var(--fehler); }
.panel hr { margin: var(--a-1) 0; border: 0; border-top: 1px solid var(--linie); }
.konto-menue { position: relative; border-top: 1px solid var(--linie); padding-top: 8px; font-size: 13px; display: flex; align-items: center; gap: 2px; }
.konto-menue > a.konto-zeile { flex: 1; min-width: 0; }
/* Fall 499: der Abmelden-Knopf neben dem Profil, nur als Zeichen; das Wort
   bleibt für Vorleser. */
.konto-abmelden { flex: none; margin: 0; }
.konto-abmelden button { min-height: 0; width: 32px; height: 32px; padding: 0; justify-content: center; color: var(--text-still); }
.konto-abmelden button .ic { color: inherit; }
.konto-abmelden button:hover { color: var(--text); background: var(--flaeche-2); }
.konto-abmelden .nav-wort { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.leiste-schmal .konto-menue { flex-direction: column; }
.konto-kreis { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--linie-stark); border-radius: 50%; background: var(--grund); color: var(--text-leise); font-size: 11px; }
.konto-text { flex: 1; min-width: 0; }
.konto-text b, .konto-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-text b { font-weight: 500; }
.konto-text small { margin-top: 2px; font-size: 12px; color: var(--text-leise); }
/* „App installieren“: unten in der Seitenleiste über der Nutzerzeile, am Handy
   klein im Kopf. Das Skript blendet ihn nur ein, wo Installieren geht. */
.seite .app-knopf { margin: auto 4px 10px; justify-content: flex-start; color: var(--text-leise); }
.seite .app-knopf .ic, .hkopf .app-knopf .ic { flex: none; color: var(--text-still); }
.hkopf .app-knopf { flex: none; min-height: 32px; padding: 5px 9px; gap: 5px; color: var(--text-leise); }
/* Daneben der Käfer fürs Feedback (Fall 307). Der schwebende Knopf des Widgets
   bleibt aus, sobald das Skript den Käfer bereitgestellt hat (Klasse fb-eigen). */
.fuss-knoepfe { display: flex; align-items: center; gap: 6px; margin: 0 4px 12px; }
.fuss-knoepfe:not(:has(> :not([hidden]))) { display: none; }
.seitenfuss .fuss-knoepfe .app-knopf { margin: 0; }
/* Fall 527: die beiden Knöpfe dürfen die Leiste nie breiter machen als sie
   ist; wird das Wort zu lang, bekommt es Punkte statt die Leiste einen Querscroll. */
.fuss-knoepfe { min-width: 0; }
.fuss-knoepfe .app-knopf { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.fuss-knoepfe .app-knopf .nav-wort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-knopf { flex: none; margin-left: auto; min-height: 0; padding: 5px 7px; color: var(--text-leise); }
.fb-knopf .ic { flex: none; color: var(--text-still); }
.fb-knopf:hover .ic { color: var(--text); }
/* Ein Fall läuft: der Käfer wird rot, die Schrittzahl steht im Tooltip. */
.fb-knopf[data-fall], .fb-knopf[data-fall] .ic { color: var(--fehler); }
.fb-knopf[data-fall] { border-color: color-mix(in oklch, var(--fehler) 40%, var(--grund)); }
.leiste-schmal .fuss-knoepfe { flex-direction: column; margin: 0 0 12px; }
.leiste-schmal .seite .fuss-knoepfe .app-knopf { margin: 0; }
.leiste-schmal .fb-knopf { margin-left: 0; width: 100%; justify-content: center; }
.fb-eigen button[data-fb-placeholder] { display: none !important; }
ol.schritte { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
ol.schritte li { padding-left: 2px; }

/* ---------------------------------------------------------- Arbeitsfläche */
.flaeche { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--grund); }

.oben {
  display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  padding: 14px 32px; border-bottom: 1px solid var(--linie);
}
.oben .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oben > .zustand { flex: none; }
.oben .rechts form { margin: 0; }

main { padding: 32px; padding-bottom: 64px; flex: 1; min-width: 0; max-width: 924px; }
main.weit { max-width: 1500px; }

.seitenkopf { margin-bottom: 0; }
.seitenkopf h1.titel { font-size: 23px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 6px; }
.seitenkopf p.unter { margin: 0 0 28px; color: var(--text-leise); font-size: 14.5px; max-width: 640px; }
.seitenkopf p.unter:last-child { margin-bottom: 0; }

.block .innen > form.reihe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.block .innen > form.reihe > input { flex: 0 1 280px; width: 280px; }
/* Auswahlfelder in einer Reihe (Rolle beim Einladen) bleiben schmal. */
.block .innen > form.reihe > select { flex: 0 0 auto; width: auto; }
.block .innen > form.reihe > input[type=search] { flex: 0 1 280px; width: 280px; }

/* Reiter einer Seite (ui.reiter), wie im Mockup `.reiter`: unterstrichen, nicht als Pille. */
.abschnitte {
  display: flex; gap: 2px; margin: 0 0 18px; padding: 0;
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linie);
}
.abschnitte::-webkit-scrollbar { display: none; }
.abschnitte a { color: var(--text-leise); text-decoration: none; font-size: 14px; padding: 9px 12px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abschnitte a:hover { color: var(--text); }
.abschnitte a[aria-current] { color: var(--text); border-bottom-color: var(--akzent); font-weight: 550; }

/* -------------------------------------------------- Kopfzeile am Handy */
.hkopf, .hnav { display: none; }

/* ------------------------------------------------------------- Hinweise */
.hinweis {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--r-m); margin: 0 0 24px; border: 1px solid;
  max-width: 640px; font-size: 13.5px;
}
.hinweis .ic { flex: none; margin-top: 2px; }
.hinweis.ok { background: var(--akzent-hell); border-color: var(--akzent-linie); color: var(--akzent-dunkel); }
.hinweis.fehler { background: color-mix(in oklch, var(--fehler) 7%, var(--grund)); border-color: color-mix(in oklch, var(--fehler) 35%, var(--grund)); color: var(--text); }
/* `span` ist das alte Markup, `.hinweis-text` kommt aus ui.hinweis() (Aufgabe 7) —
   beide tragen dieselbe Vorsilbe, bis alle Stellen umgestellt sind. */
.hinweis.fehler > span::before, .hinweis.fehler > .hinweis-text::before { content: "Das hat nicht geklappt: "; font-weight: 600; }
.hinweis.still > span::before, .hinweis.still > .hinweis-text::before { content: none; }
.hinweis.neutral { background: var(--flaeche); border-color: var(--linie); color: var(--text-leise); }
/* Zeilen, die wie die Banner über die ganze Breite laufen (Fall 342). */
.hinweis.breit { max-width: none; }
/* EU-Guthaben: leer (rot) und niedrig (bernstein), für Verwalter oben auf jeder Seite. */
.hinweis.alarm { background: color-mix(in oklch, var(--fehler) 9%, var(--grund)); border-color: color-mix(in oklch, var(--fehler) 45%, var(--grund)); color: var(--text); max-width: none; }
.hinweis.alarm .ic { color: var(--fehler); }
/* `warnung` ist der Name aus ui.hinweis() (Aufgabe 7) für dieselbe Sache wie
   `achtung` — solange raues Markup mit `achtung` noch danebensteht (die
   Varianten mit `.still`/`.breit`), tragen beide Klassen dieselben Werte. */
.hinweis.achtung, .hinweis.warnung { background: color-mix(in oklch, var(--wartet) 10%, var(--grund)); border-color: color-mix(in oklch, var(--wartet) 45%, var(--grund)); color: var(--text); max-width: none; }
.hinweis.achtung .ic, .hinweis.warnung .ic { color: var(--wartet); }
.hinweis.alarm a, .hinweis.achtung a, .hinweis.warnung a { color: inherit; font-weight: 500; }
/* Das Kreuz gibt es nur am Hinweis zur Nutzung, solange er warnt (src/html.js
   `nutzungBanner`). Es sitzt außen rechts und drängt sich nicht vor den Text. */
.hinweis-zu {
  flex: none; margin: -4px -6px -4px auto; padding: 0; width: 28px; height: 28px;
  min-height: 0; display: grid; place-items: center;
  color: var(--text-leise); background: none; border: 0; border-radius: var(--r-s);
}
.hinweis-zu:hover { color: var(--text); background: color-mix(in oklch, var(--text) 7%, transparent); }
.budget .hinweis { margin-bottom: 14px; }

/* --------------------------------------------------------------- Zustand */
.zustand { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-leise); white-space: nowrap; vertical-align: middle; }
.punkt { display: inline-block; width: 7px; height: 7px; border-radius: var(--r-voll); background: var(--ruht); flex: none; vertical-align: middle; }
.punkt.laeuft { background: var(--laeuft); }
.punkt.wartet { background: var(--wartet); }
.punkt.ruht { background: var(--ruht); }
.punkt.fehler { background: var(--fehler); }
.stand { display: inline-block; font-size: 12px; font-weight: 500; color: var(--text-still); border: 1px solid var(--linie); border-radius: var(--r-voll); padding: .05rem .55rem; vertical-align: middle; }
.stand.ok { color: var(--text-leise); border-color: var(--linie-stark); }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-voll);
  border: 1px solid var(--linie); background: var(--flaeche);
  font-size: 12.5px; color: var(--text-leise); white-space: nowrap; text-decoration: none;
}
.chip b { color: var(--text); font-weight: 500; }
a.chip:hover { border-color: var(--linie-stark); color: var(--text-leise); }
/* Die beiden benannten Arten von ui.chip() (Aufgabe 10): „warnung“ in der
   Textfarbe von .warn, „akzent“ in den Akzentfarben. */
.chip.akzent { border-color: var(--akzent-linie); color: var(--akzent-dunkel); background: var(--akzent-hell); }
.chip.warnung { color: var(--wartet); }

/* ---------------------------------------------------------------- Knöpfe */
button, .knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 7px 14px; border: 1px solid var(--akzent); border-radius: var(--r-m);
  background: var(--akzent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.25;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
button.klein, .knopf.klein, .knoepfe.klein button, .knoepfe.klein .knopf { min-height: 30px; padding: 5px 11px; font-size: 13px; color: #fff; }
button:hover, .knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
button:disabled, .knopf[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button:disabled:hover { background: var(--akzent); border-color: var(--akzent); }
button.leise, .knopf.leise { background: var(--grund); color: var(--text); border-color: var(--linie-stark); }
button.leise:hover, .knopf.leise:hover { background: var(--flaeche-2); border-color: var(--linie-stark); color: var(--text); }
button.leise:disabled, button.leise:disabled:hover { background: var(--grund); border-color: var(--linie); }
button.gefahr, .knopf.gefahr { background: var(--grund); color: var(--fehler); border-color: color-mix(in oklch, var(--fehler) 40%, var(--grund)); }
button.gefahr:hover, .knopf.gefahr:hover { background: var(--fehler); border-color: var(--fehler); color: #fff; }
/* Fix-Welle Punkt 7: button.text und .knopf.text standen bisher getrennt und
   widersprachen sich (Rahmen, Innenabstand) — seit knopf() immer beide
   Klassen setzt (class="knopf text"), gewann durch höhere Spezifität still
   immer .knopf.text, mit einer Ausnahme: bei :hover zog button.text:hover
   (Element+Klasse+Pseudoklasse zählt eine Stufe mehr als zwei Klassen ohne
   Element) die Textfarbe auf --akzent-dunkel — das war die einzige Stelle,
   an der button.text wirklich mitentschied. Zusammengeführt auf genau die
   Werte, die dadurch schon galten: border 0 statt einer transparenten
   1px-Linie, das volle Skalen-Padding statt der halben button.text-Form,
   dunklere Textfarbe beim Hover. Belegt mit Playwright: computed style vor
   und nach der Zusammenführung byte-gleich, im Ruhezustand wie im Hover. */
button.text, .knopf.text { background: none; border: 0; padding: var(--a-1) var(--a-2);
  color: var(--akzent); font-size: var(--s-knopf); min-height: 34px; cursor: pointer; }
button.text:hover, .knopf.text:hover { background: var(--flaeche-2); color: var(--akzent-dunkel); border-radius: var(--r-s); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.knoepfe form { margin: 0; }
td.knoepfe { margin-top: 0; }

/* ------------------------------------------------------------- Formulare */
form { margin: 0; }
label { display: block; margin: 0 0 14px; font-size: 13.5px; font-weight: 500; }
label > input:not([type=radio]):not([type=checkbox]), label > select, label > textarea { margin-top: 5px; font-weight: 400; }
label .hilfe, .hilfe { display: block; color: var(--text-leise); font-size: 12.5px; font-weight: 400; margin-top: 5px; }
input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=file]),
select, textarea {
  display: block; width: 100%; padding: var(--a-2) var(--a-3);
  border: 1px solid var(--linie-stark); border-radius: var(--r-m);
  background: var(--grund); color: var(--text); font: inherit;
  /* 14px/36px sind die Desktop-Werte von vorher (Fix-Runde 1 zu Aufgabe 9:
     die einzeln aufgezählten Typen — text/email/password/number/search —
     ließen type="date" durchfallen, fünf Felder standen ohne Gestalt da.
     Unter 860px überschreibt der Handy-Block beide auf die Grenzen des
     Betriebssystems, siehe dort). */
  font-size: 14px; line-height: 1.4; min-height: 36px;
  transition: border-color var(--zeit) ease-out, box-shadow var(--zeit) ease-out;
}
input:hover, select:hover, textarea:hover { border-color: color-mix(in oklch, var(--linie-stark) 55%, var(--text)); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--akzent) 18%, transparent); }
input::placeholder, textarea::placeholder { color: var(--text-still); }
input:disabled, select:disabled, textarea:disabled { opacity: .5; background: var(--flaeche); cursor: not-allowed; }
/* Kästchen und Radio behalten ihre Größe, auch als Flex-Kind in label.zeile. */
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; accent-color: var(--akzent); flex: none; }
textarea { resize: vertical; min-height: 4.5rem; }
label.zeile { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-weight: 400; }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zeile > input:not([type=checkbox]):not([type=radio]) { flex: 1 1 14rem; width: auto; }
.zeile > label.zeile { margin: 0; }
.stapel > button, .stapel > .knoepfe { margin-top: 4px; }
.stapel details + button { margin-top: 12px; }
.feldzeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 20px; }

/* Eingeklappte Bereiche */
details.erweitert-auf { margin: 12px 0 0; }
details.erweitert-auf > summary { cursor: pointer; color: var(--akzent); font-size: 13.5px; font-weight: 500; padding: 5px 0; list-style: none; display: inline-flex; align-items: center; gap: 8px; user-select: none; }
details.erweitert-auf > summary::-webkit-details-marker { display: none; }
details.erweitert-auf > summary::before { content: ""; width: .42rem; height: .42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease-out; margin-left: 2px; }
details.erweitert-auf[open] > summary::before { transform: rotate(45deg); }
details.erweitert-auf > summary:hover { color: var(--akzent-dunkel); }
details.erweitert-auf > :not(summary) { margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--linie); }
details.erweitert-auf > form, details.erweitert-auf > .inhalt { margin-top: 8px; padding-top: 4px; padding-bottom: 4px; }

/* ------------------------------------------------------------------ Blöcke */
.block { border: 1px solid var(--linie); border-radius: var(--r-l); margin: 0 0 24px; background: var(--grund); }
.block > header { padding: 16px 22px; border-bottom: 1px solid var(--linie); display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.block > header > div:first-child { flex: 1 1 20rem; min-width: 0; }
.block > header h2, .block > header h3 { margin: 0; font-size: 15px; font-weight: 600; }
.block > header p { margin: 3px 0 0; font-size: 13px; color: var(--text-leise); max-width: 62ch; }
.block > header .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.block > header .rechts form { margin: 0; }
.block .innen { padding: 18px 22px; }
.block .innen > :last-child { margin-bottom: 0; }
.block .fuss { margin: 0; max-width: none; padding: 11px 22px; font-size: 13px; color: var(--text-leise); background: var(--flaeche); border-top: 1px solid var(--linie); border-radius: 0 0 var(--r-l) var(--r-l); }
.block .fuss p:last-child { margin-bottom: 0; }

/* Eigene Seite: Stand, Freigabe und Erläuterungen als getrennte Gruppen. */

/* Seite „Verbindungen“ (A4, plan-apps-und-verbindungen): Reiter mit Anzahl,
   die Liste nach Bereich, je Konto eine Zeile als Link ohne Knöpfe. Knöpfe
   stehen nur in „Braucht deine Aufmerksamkeit“ und auf der Seite des Kontos. */
.abschnitte .anzahl { margin-left: 6px; color: var(--text-still); font-weight: 400; font-variant-numeric: tabular-nums; }
.abschnitte a[aria-current] .anzahl { color: var(--text-leise); }
/* Ein Postfach, zwei Teile (K4, 19.09.2026). Microsoft 365 führt Outlook und
   Teams als zwei Entra-Apps, also als zwei Verbindungen desselben Postfachs.
   In der Liste ist das ein Eintrag mit einem Kopf und je Teil einer Zeile —
   jeder Teil behält Kennung, Datum und Zustand, denn die Rechte gelten je Teil. */

/* Die Kennung eines Kontos (K1, 19.09.2026). Die Verbindungs-Id ist die eine
   maschinelle Kennung — im Chat, in X-CS-Konto, in jedem Fehler. Wer einen
   Fehler in der Hand hat, muss dieselbe Zeichenfolge hier wiederfinden. */
.block.achtung { border-color: color-mix(in oklch, var(--wartet) 40%, var(--linie)); }
.block.achtung > header h2 { display: flex; align-items: center; gap: 8px; }
/* Fall 364: die Erklärung je Zeile steht zugeklappt da. */

/* Die Stufe eines Zugriffs (Block D): unter der Agentenzeile eine Karte mit
   drei Knöpfen. */

/* Apps teilen Konten (A2): das Zeichen „für alle“ in der Zeile eines Kontos
   und unter „Wird genutzt von“ — die einzige Nutzung, die andere betrifft. */

/* Seite je App (A2): „Wer die App öffnen darf“ als Radioliste; „Verbindungen
   der App“ je Kennung mit zwei Radiokarten, der Wahl des Kontos und dem Satz,
   was die Einstellung bedeutet. */
.modus { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--linie-stark);
  border-radius: var(--r-m); font-weight: 400; cursor: pointer; }
.modus input { margin-top: 3px; }
.modus b { font-size: 14px; font-weight: 600; }
.modus span { grid-column: 2; font-size: 13px; color: var(--text-leise); }
.modus:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.modus.aus { opacity: .55; cursor: not-allowed; }
/* Was die App an diesem System braucht (docs/plan-app-bedarf.md, D1). Steht
   über der Kontenwahl, weil es für beide Arten gilt — nicht nur für „für alle“. */
.feldzeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 10px; }
/* `min-width: 0` und die Bremse am `select`: die Mindestbreite eines Auswahlfelds
   richtet sich sonst nach der längsten Option, und ein langer Kontoname macht die
   Zeile breiter als die Karte (wie auf der Freigabekarte, `.fk-inhalt select`). */
.feldzeile label { margin: 0; min-width: 0; font-size: 13px; color: var(--text-leise); }
.feldzeile select { max-width: 100%; }
/* z-index war 20 (unter dem Kontomenü/Zeilenmenü bei 30) — auf --e-panel
   angehoben, damit es nie hinter etwas mit derselben oder höherer Ebene
   verschwindet (Aufgabe 13, Erhebung zu den Ebenen-Token). */

/* Freigabeseite (A3, /konto/freigabe): eine Karte in der Mitte wie im Entwurf
   (Ansicht 4). Je Eintrag „eigenes“ eine Zeile mit Logo, System und der Wahl
   des eigenen Kontos; unten eine Hauptaktion und „Nicht jetzt“. */
.chatKarte { border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--grund); }

/* Die Zeilen der Anmeldung beim Anbieter (V4): Formulare klappen darunter auf;
   Rückfragen stehen als eigener Block oben. */
/* Dienstkacheln: Symbol des Systems, Häkchen wenn verbunden, die Konten als
   Pillen mit Kürzel. Ein Klick öffnet den Dialog mit den Einstellungen. Die
   Farben der Symbole sind die einzigen Fremdfarben der Oberfläche. */
/* Echte Logos stehen in Originalfarben auf weißer Kachel mit Rand. */
.dz-logo { align-items: center; justify-content: center; background: var(--grund); border: 1px solid var(--linie); border-radius: 10px; }
dialog.konfig .dkopf .dz-logo { display: flex; }
.dz-logo img { display: block; width: 66%; height: 66%; object-fit: contain; }

/* Der Dialog hinter einer Kachel. Innenabstand sitzt auf Kopf und Inhalt,
   nicht auf dem Dialog: so trifft ein Klick auf den Dialog selbst nur den
   Hintergrund, und der schließt. */
dialog.konfig { max-width: 36rem; padding: 0; max-height: calc(100vh - 2rem); overflow: auto; }
dialog.konfig .dkopf { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 16px; border-bottom: 1px solid var(--linie);
  /* Fall 453: der Kopf mit dem × bleibt beim Scrollen oben stehen. */
  position: sticky; top: 0; z-index: 2; background: var(--grund); }
dialog.konfig .dkopf .dz { flex: none; width: 40px; height: 40px; }
dialog.konfig .dtitel { flex: 1; min-width: 0; }
dialog.konfig .dtitel h2 { margin: 1px 0 2px; font-size: 16.5px; }
dialog.konfig .dtitel p { margin: 0; font-size: 13px; color: var(--text-leise); }
dialog.konfig .zu { flex: none; min-height: 0; padding: 6px; margin: -3px -8px 0 0; background: none; border-color: transparent; color: var(--text-still); }
dialog.konfig .zu:hover { background: var(--flaeche-2); border-color: transparent; color: var(--text); }
dialog.konfig .dinhalt { padding: 0 22px 20px; }
/* Der Fuß einer Rückfrage (ui.bestaetigung(), Aufgabe 12): ohne eigenen
   Rumpf trägt er dieselben Seiten- und Unterabstände wie .dinhalt, sonst
   säße das Formular am Rand. */
dialog.konfig .dfuss { padding: 0 22px 20px; }
.dteil { margin: 0; max-width: none; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.dteil:last-child { border-bottom: 0; padding-bottom: 0; }
.dteil > h3 { font-size: 13.5px; font-weight: 600; margin: 0 0 8px; }
.dteil > p.klein { margin: 8px 0 12px; }
.dteil > :last-child { margin-bottom: 0; }
/* Anmeldung im Browser aus der Tabelle auf /verbindungen (Feedback 327): ein
   Dialog für Link, Code und Stand. Der Knopf „Anmeldung fortsetzen“ gibt es
   nur mit JavaScript; ohne stehen Link und Code in der Zeile. Während der
   Arbeitsplatz geweckt wird, dreht sich der Kreisel und die Sekunden laufen. */
dialog.browserlogin .bl-warten { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13.5px; color: var(--text-leise); max-width: none; }
dialog.browserlogin .bl-schritt { margin: 0 0 10px; font-size: 13.5px; max-width: none; }
dialog.browserlogin [data-fuer] { margin-top: 18px; }
dialog.browserlogin .bl-einmal { font-size: 15px; letter-spacing: .04em; }
dialog.browserlogin .bl-frist { margin: 16px 0 0; }
dialog.browserlogin .bl-frist button.text { min-height: 0; padding: 0 4px; font-size: 13px; }
dialog.browserlogin .hinweis { margin: 14px 0 0; max-width: none; }
/* Bisher ungenutzt — Aufgabe 15 gibt ihm die ersten Aufrufstellen im Client
   (ui.warten(), ui.kreisel()). `inline-block` und `vertical-align`, damit er
   auch in einem <p> ohne eigenes Flex-Layout richtig neben dem Text steht
   (die drei Stellen, an denen der Zielknoten selbst ein <p> ist). */
/* Leise gehalten (Wecken eines Projekts lenkte ab): grau statt Akzent, langsam,
   und erst nach 0,6 s sichtbar — kurze Ladezeiten zeigen gar keinen Kreisel. */
.kreisel { flex: none; display: inline-block; vertical-align: middle; width: 12px; height: 12px; margin-right: var(--a-2); border-radius: var(--r-voll); border: 1.5px solid var(--linie); border-top-color: var(--text-still); animation: kreisen 1.6s linear infinite, kreisel-ein .4s ease-out .6s both; }
@keyframes kreisen { to { transform: rotate(360deg); } }
@keyframes kreisel-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kreisel { animation: none; } }
/* Fall 497: beim Wecken eines Projekts hüpft das O (ui.wecken(), ui.weckO()).
   Block mit Satz darunter; `klein` steht inline vor einem Satz oder in einem Knopf. */
.weckbild { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 16px; color: var(--text-leise); text-align: center; }
.weckbild p { margin: 0; max-width: 32em; font-size: 14px; }
.weck-o { display: block; width: 46px; height: 46px; transform-origin: 50% 100%; animation: weck-huepfen 1.15s cubic-bezier(.3, 0, .2, 1) infinite; }
.weck-o svg { display: block; width: 100%; height: 100%; }
.weck-o.klein { display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin-right: 8px; }
@keyframes weck-huepfen {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  14% { transform: translateY(0) scale(1.08, .9); }
  50% { transform: translateY(-16px) scale(.97, 1.04); }
  86% { transform: translateY(0) scale(1.04, .95); }
}
@media (prefers-reduced-motion: reduce) { .weck-o { animation: none; } }
/* ui.warten(): Kreisel plus Satz, sichtbar (Kreisel) und hörbar (role=status
   in ui.js). Reine Textformatierung — die Anordnung übernimmt .kreisel selbst. */
.warten { margin: 0; color: var(--text-leise); font-size: var(--s-klein); }

/* Budget */
.budget .zeile { display: flex; align-items: baseline; gap: 10px 16px; margin-bottom: 10px; flex-wrap: wrap; }
.budget .gross { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.budget .von { font-size: 14px; color: var(--text-leise); }
.balken { height: 6px; border-radius: var(--r-voll); background: var(--flaeche-2); overflow: hidden; margin: 4px 0; }
.balken > span { display: block; height: 100%; background: var(--akzent); border-radius: var(--r-voll); }
.balken.warn > span { background: var(--wartet); }
.balken.voll > span { background: var(--fehler); }
/* Der Nutzungs-Chip der Kopfzeile trägt denselben Balken, nur schmal. */
.chip .balken { width: 44px; flex: none; margin: 0; }
/* „Deine Nutzung“ im Seitenfuß über dem Profil (Vorlage der Neuordnung,
   26.09.2026; vorher ganz oben, plan-verbindungen V2). */
.nutzungsgruppe { margin: 0 0 12px; padding: 12px 0 0; border-top: 1px solid var(--linie); }
.nutzungsgruppe a.nutzung-zeile { display: flex; text-decoration: none; color: var(--text-leise); border-radius: var(--r-m); font-size: 14px; }
.nutzungsgruppe a.nutzung-zeile:hover { background: var(--flaeche-2); color: var(--text); }
.nutzungsgruppe a.nutzung-zeile[aria-current] { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.nav a.nutzung-zeile, .nutzungsgruppe a.nutzung-zeile { flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 10px; }
.nutzung-zeile .nz-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nutzung-zeile .nz-kopf b { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.nutzung-zeile .balken { margin: 3px 0 1px; }
.nutzung-zeile .nz-satz, .nutzung-zeile .nz-un { font-size: 12px; line-height: 1.4; color: var(--text-still); }
.leiste-schmal .nav a.nutzung-zeile, .leiste-schmal .nutzungsgruppe a.nutzung-zeile { align-items: center; padding: 6px 4px; }
.leiste-schmal .nutzung-zeile .nz-kopf { justify-content: center; }
.leiste-schmal .nutzung-zeile .balken { width: 36px; }
.leiste-schmal .nutzung-zeile .nz-satz, .leiste-schmal .nutzung-zeile .nz-un { display: none; }

/* Zeilen der Arbeitsplätze in „Meine Arbeitsplätze“ */
/* /apps (A1): „Deine Apps“ und „Von Kollegen“ als zwei Abschnitte. */
/* Fläche und Farbe gelten für alle drei Formen desselben leeren Zustands.
   Was reines Layout ist — die Ausrichtung (bei .z-leer und .chatLeer eine
   andere als hier, weil sie vom jeweiligen Rahmen abhängt), die Position im
   Flex-Kontext und die eigene Breite — bleibt bei der jeweiligen Klasse in
   web/zentrale.css und web/chat-styles.css. */
.leer, .z-leer, .chatLeer { padding: 32px 22px; color: var(--text-leise); }
.leer { text-align: center; }
.leer p { margin: 0 auto 12px; }
.leer .knoepfe { justify-content: center; margin-top: 0; }

/* Erste Schritte auf der Übersicht (V2, docs/plan-marktluecken.md): eine
   Zeile je Schritt. Der Haken trägt keine Aussage allein, neben ihm steht
   immer ein Wort; die Farbe kommt aus --laeuft wie überall bei „fertig“. */
.eschritte .innen { padding-top: 14px; padding-bottom: 16px; }
.eschritt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.eschritt-liste li { display: flex; gap: 12px; align-items: flex-start; }
.eschritt-liste .marke {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: var(--r-voll);
  border: 1px solid var(--linie-stark); background: var(--grund); color: var(--text-leise);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.eschritt-liste li.fertig .marke { border-color: var(--laeuft); color: var(--laeuft); }
.eschritt-liste .text { min-width: 0; }
.eschritt-liste .kopf { margin: 0; font-size: 14px; }
.eschritt-liste .wort { margin-left: 6px; font-size: 12px; color: var(--text-still); }
.eschritt-liste li.fertig .wort { color: var(--laeuft); }
.eschritt-liste li.fertig .kopf b { color: var(--text-leise); font-weight: 500; }
.eschritt-liste .satz { margin: 2px 0 0; font-size: 13px; color: var(--text-leise); max-width: 66ch; }
.eschritt-liste .text > a { display: inline-block; margin-top: 4px; font-size: 13px; }

/* ---------------------------------------------------------------- Fakten */
dl.fakten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0 0 8px; font-size: 13.5px; }
dl.fakten dt { color: var(--text-leise); }
dl.fakten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
dl.fakten dd .klein { display: block; margin-top: 2px; }

/* --------------------------------------------------------------- Tabellen */
.scroll { overflow-x: auto; margin: 0 0 12px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th { color: var(--text-still); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding-top: 6px; padding-bottom: 7px; white-space: nowrap; }
tbody tr:hover { background: var(--flaeche); }
td:first-child, th:first-child { padding-left: 2px; }
td:last-child, th:last-child { padding-right: 2px; }
table.zahlen td:not(:first-child), table.zahlen th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tfoot th { font-weight: 600; border-bottom: none; border-top: 1px solid var(--linie-stark); }
/* Kürzel vor dem Namensfeld beim Anlegen eines Arbeitsplatzes. */
td .zeile { gap: 6px 12px; }
td form.zeile { margin: 0; }
td .knopf, td button { vertical-align: middle; }
/* Anmeldung im Browser auf /verbindungen (Feedback 328): ohne Schieber am
   Rechner. Feste Spalten, der Zustand bricht um, die Zeit des letzten Stands
   steht klein darunter. Am Handy stapelt sie wie jede .stapelbar. */
/* Gestapelte Tabellen auf schmalen Bildschirmen: jede Zelle trägt ihre Spalte
   als data-l, der Kopf verschwindet. Warum 720 und nicht 860 (Fix-Runde 1 zu
   Aufgabe 16): zwischen 720 und 860 passt eine Tabelle mit wenigen, kurzen
   Spalten noch waagerecht in den Rahmen — erst darunter wird das Nebeneinander
   eng genug, dass Stapeln die bessere Lesbarkeit gibt. Eine bewusste, engere
   Schwelle für Tabellen, keine Abweichung, die vereinheitlicht gehört. */
@media (max-width: 720px) {
  table.stapelbar thead { display: none; }
  table.stapelbar, table.stapelbar tbody, table.stapelbar tr, table.stapelbar td, table.stapelbar th { display: block; width: 100%; }
  table.stapelbar tr { padding: 10px 0; border-bottom: 1px solid var(--linie); }
  table.stapelbar td, table.stapelbar th { border: none; padding: 3px 0; }
  table.stapelbar td[data-l]::before, table.stapelbar th[data-l]::before {
    content: attr(data-l); display: block; font-size: 11px; color: var(--text-still);
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1px;
  }
  table.stapelbar td:empty { display: none; }
  table.stapelbar tbody tr:hover { background: none; }
  /* table.zahlen richtet ab der zweiten Spalte rechts aus und verbietet den
     Umbruch (oben) — im Stapel steht die Beschriftung darüber statt daneben,
     dort wäre rechtsbündig und nowrap nur eine zufällig schmale Zeile statt
     einer Hilfe (Aufgabe 11: die Verbrauchstabellen des Betreibers sind die
     ersten table.zahlen, die überhaupt stapeln). */
  table.stapelbar.zahlen td:not(:first-child), table.stapelbar.zahlen th:not(:first-child) { text-align: left; white-space: normal; }
}

/* Anbietername mit Logo davor, in Tabellenköpfen und Zusammenfassungen (Fall 333). */
.anbieter-marke { display: inline-flex; align-items: center; gap: 6px; }
.anbieter-marke img { flex: none; width: 16px; height: 16px; border-radius: 3px; }
.zeilenmenue { position: relative; display: inline-block; }
/* Die Tastfläche wächst von 32 auf 44 px (Aufgabe 13, gewollte Korrektur) —
   min-width/min-height statt fester Größe, damit ein größerer Inhalt (kommt
   hier nicht vor) sie nicht quetscht. */
.zeilenmenue > summary {
  list-style: none; cursor: pointer; user-select: none; display: grid; place-items: center;
  min-width: 44px; min-height: 44px; border-radius: var(--r-m); color: var(--text-leise); font-size: 18px; line-height: 1;
}
.zeilenmenue > summary::-webkit-details-marker { display: none; }
.zeilenmenue > summary:hover, .zeilenmenue[open] > summary { background: var(--flaeche-2); color: var(--text); }
.zeilenmenue > div {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--e-panel); width: 260px; padding: 6px; text-align: left;
}
.zeilenmenue form { margin: 0; }
@media (max-width: 720px) {
  .zeilenmenue > div { right: auto; left: 0; }
}

/* ------------------------------------------------------------ Systemkatalog */
/* ----------------------------------------------------------------- Dialoge */
dialog { border: 1px solid var(--linie); border-radius: var(--r-l); background: var(--grund); color: var(--text); padding: 24px; max-width: 30rem; width: calc(100% - 2rem); box-shadow: var(--schatten-dialog); }
dialog::backdrop { background: oklch(24% 0.012 275 / .4); }
dialog h2 { margin-bottom: 8px; }
dialog .knoepfe { justify-content: flex-end; margin-top: 20px; }

/* ------------------------------------------------------ Anmeldung, Einladung */
.allein { display: grid; place-items: center; min-height: 100dvh; background: var(--flaeche); padding: 32px 16px; }
.allein main { width: 100%; max-width: 24rem; padding: 0; }
.allein .marke { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 22px; color: var(--text); text-decoration: none; }
.allein .marke .zeichen { width: 28px; height: 28px; flex: none; display: flex; }
.allein .marke b { color: var(--marke); font-size: 14.5px; font-weight: 600; }
.allein .fussnote { margin: 18px 0 0; max-width: none; text-align: center; font-size: 12.5px; color: var(--text-still); }
.allein .rechtslinks { margin-top: 6px; }
.allein .rechtslinks a { color: var(--text-still); }

/* ------------------------------------------------------ Impressum, Datenschutz, Nutzungsbedingungen
   Lange Fließtexte, die jemand von oben nach unten liest oder nach einer
   Stelle durchsucht. Deshalb breiter als das Anmeldefeld, aber schmal genug
   für angenehme Zeilenlängen, und die Abschnitte klar getrennt. */
/* 40rem: die Absätze sind global auf 68ch begrenzt, eine breitere Karte
   ließe rechts nur eine leere Spalte stehen. */
.allein main.weit { max-width: 40rem; }
.recht { background: var(--grund); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 34px 32px; }
.recht h1 { margin-bottom: 6px; }
.recht .lead { margin-bottom: 4px; color: var(--text-still); }
.recht .recht-stand { margin: 0 0 22px; }
.recht section { margin-top: 26px; scroll-margin-top: 18px; }
.recht section h2 { font-size: 15.5px; margin-bottom: 8px; }
.recht section p { margin: 0 0 10px; }
.recht section p:last-child { margin-bottom: 0; }
.recht section ul { margin: 0 0 10px 18px; }
.recht section li { margin-bottom: 4px; }
.recht table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 13px; }
.recht th, .recht td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linie); }
.recht th { font-weight: 600; white-space: nowrap; }
.recht .recht-inhalt { border: 1px solid var(--linie); border-radius: var(--r-m); padding: 14px 18px; background: var(--flaeche); }
.recht .recht-inhalt ol { margin: 0 0 0 18px; font-size: 13px; }
.recht .recht-inhalt li { margin-bottom: 3px; }
.recht .recht-fuss { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 13px; }
/* 620 statt 860: .recht steckt in .allein main.weit (max-width: 40rem =
   640px, oben) und hat keine Seitenleiste, an der ein App-Breakpoint hinge —
   die Schwelle gehört zur eigenen Breite der Karte, nicht zum App-Rahmen.
   Knapp darunter berührt die Karte sonst mit vollem Innenabstand die Ränder
   des Bildschirms. */
@media (max-width: 620px) { .recht { padding: 22px 18px; } }
/* Anleitungen unter /hilfe/<kennung> (src/anleitungen.js): derselbe Rahmen
   wie die Rechtstexte, nur ohne <section>, weil der Text aus Markdown kommt.
   In der App (angemeldet) steht die Karte im normalen Inhaltsbereich und
   bekommt dort dieselbe Lesebreite wie draußen. */
.anleitung { max-width: 46rem; }
.anleitung .lead { margin-bottom: 18px; }
.anleitung-text h2 { font-size: 15.5px; margin: 28px 0 8px; scroll-margin-top: 18px; }
.anleitung-text h3 { font-size: 14px; margin: 18px 0 6px; scroll-margin-top: 18px; }
.anleitung-text p { margin: 0 0 10px; }
.anleitung-text ul, .anleitung-text ol { margin: 0 0 12px; padding-left: 22px; }
.anleitung .recht-inhalt ol { margin: 0; padding-left: 20px; }
.anleitung-text li { margin-bottom: 5px; }
.anleitung-text li > ul, .anleitung-text li > ol { margin: 5px 0 0; padding-left: 18px; }
.anleitung-text .scroll { margin: 6px 0 14px; }
.anleitung-text table { margin: 0; }

/* „Für Techniker“: eine Zeile, die sich aufklappt. Der ganze Block ist der
   Rahmen, es gibt keinen eigenen Kopf darüber. */

/* Teile innerhalb eines Blocks (z. B. unter „Für Techniker“) */
.teil { margin: 0 0 28px; }
.teil:last-of-type { margin-bottom: 0; }
.teil > h3 { margin-bottom: 6px; }
.teil.aus { opacity: .75; }

/* ================================================================== Handy */
@media (max-width: 860px) {
  .seite { display: none; }
  .app { display: block; }
  .flaeche { min-height: 100dvh; padding-bottom: 62px; }

  .hkopf {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--grund);
    position: sticky; top: 0; z-index: var(--e-klebend);
  }
  .hkopf .mitte { flex: 1; min-width: 0; }
  .hkopf .mitte b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hkopf .mitte span { display: block; font-size: 11.5px; color: var(--text-still); line-height: 1.3; }
  .hkopf .zeichen { width: 28px; height: 28px; flex: none; display: flex; }
  .hkopf .wahl { margin: 0; flex: none; max-width: 45%; }
  .hkopf .wahl > summary { padding: 6px 10px; }
  .hkopf .wahl > summary .vor { display: none; }
  .hkopf .wahlliste { position: absolute; right: 14px; top: 52px; left: 14px; z-index: var(--e-panel); background: var(--grund);
    box-shadow: var(--schatten-schwebend); }
  /* Aufgabe 16: .hkopf gibt es nur am Handy (Zeile 417 blendet ihn auf dem
     Desktop aus), der App-Knopf darin ist also immer eine Tastfläche — bisher
     stand er auf 32px. .hkopf .app-knopf (zwei Klassen) schlägt jede reine
     Klassenregel, das Mobilgesetz am Dateiende erreicht ihn deshalb nicht. */
  .hkopf .app-knopf { min-height: 44px; }

  .hnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--e-handynav);
    border-top: 1px solid var(--linie); background: var(--flaeche);
    /* Unter dem Home-Balken genügt ein Teil seiner Sicherheitszone; mit
       7px + der vollen Zone stand unter den Wörtern fast so viel leere
       Fläche wie die Leiste selbst hoch war (Handy-Fotos 03.10.2026). */
    padding: 4px 4px max(6px, calc(env(safe-area-inset-bottom) - 12px));
  }
  .hnav a { flex: 1; text-decoration: none; color: var(--text-still); font-size: 10.5px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; border-radius: var(--r-s); }
  .hnav a .ic { color: currentColor; }
  .hnav a[aria-current] { color: var(--akzent); font-weight: 500; }

  .hnav > a { min-width: 0; min-height: 44px; color: var(--text-leise); }

  /* Das Kreuz am Hinweis ist am Handy die Tastfläche (44 px), auf dem
     Desktop bleibt es bei der kleineren Form aus .hinweis-zu (docs/DESIGN.md
     setzt Knöpfe dort ausdrücklich auf 34 px). */
  .hinweis-zu { min-width: 44px; min-height: 44px; }

  .oben { padding: 11px 16px; }
  main { padding: 22px 16px; padding-bottom: 44px; }
  .block > header, .block .innen, .block .fuss { padding-left: 16px; padding-right: 16px; }
  dl.fakten { grid-template-columns: 1fr; gap: 2px; }
  dl.fakten dt { padding-top: 8px; }
  dl.fakten dt:first-child { padding-top: 0; }
  /* dvh statt vh (Aufgabe 12): vh zählt die eingeblendete Tastatur nicht aus
     der verfügbaren Höhe heraus, dvh schon — sonst schneidet die Tastatur
     den unteren Teil des Dialogs ab, gerade bei Formularen mit mehreren
     Feldern. Der desktop-Wert (calc(100vh - 2rem), oben) bleibt daneben
     bestehen; hier gilt nur die knappere Handy-Höhe. */
  dialog.konfig { max-height: 90dvh; overflow-y: auto; }
  dialog.konfig .dkopf, dialog.konfig .dinhalt, dialog.konfig .dfuss { padding-left: 16px; padding-right: 16px; }
  /* 16px ist die Schwelle, unter der iOS beim Fokus in ein Feld hineinzoomt
     — kein Gestaltungswert, sondern eine Grenze des Betriebssystems. Bisher
     stand hier gar nichts, der Desktop-Wert (14px/36px) galt unverändert
     weiter auf dem Handy: jedes Formular außerhalb des Chats zoomte beim
     Antippen (Aufgabe 9). Die Chatansicht hat dasselbe Muster schon, siehe
     web/zentrale.css um Zeile 353. */
  input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=file]),
  select, textarea { font-size: 16px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.zur-zentrale { margin: 0 0 22px; font-size: 13px; }

/* Fall 361: der Hinweis, wenn ein persönliches Konto in einem Agenten hängt,
   den andere öffnen dürfen. Kein Fehler, aber etwas, das man wissen will. */

/* K6: Doppelte Konten (/verbindungen/doppel). Je Gruppe stehen die Datensätze
   als Karten untereinander; die bleibende trägt den Akzentrand und die Marke,
   darunter die Vorschau dessen, was ein Zusammenführen täte. */
/* --------------------------------------------------------------- Mobilgesetz
 *
 * Eine Stelle für das, was unter 860 px für jeden Baustein gilt. Wer einen
 * neuen Baustein baut, trägt ihn hier ein — nicht in einen eigenen Media-Block
 * neben seiner Komponente. Sonst stehen am Ende wieder vier Media-Blöcke für
 * dieselbe Sache, wie vor Aufgabe 16.
 *
 * Was NICHT hierher gehört: die drei Schwellen 620/720/860 selbst bleiben
 * getrennt (docs/plan-baukasten.md, Aufgabe 16 — 720 für Tabellen ist eine
 * bewusste Wahl im Bestand, zwischen 720 und 860 passen breite Tabellen noch),
 * ebenso jede Regel, die nur eine einzelne Komponente betrifft (die lebt bei
 * ihrer Komponente, in web/zentrale.css oder hier weiter oben im passenden
 * Handy-Block). Hier steht nur, was für JEDEN Knopf, JEDES Feld gilt.
 */
@media (max-width: 860px) {
  /* Alles, was man antippt, ist mindestens 44 px. Platz kommt aus Abständen,
     nie aus Zielflächen (docs/DESIGN.md, Abschnitt „Handy unter 860 px“).
     Bleiben absichtlich klein: .knopf.text und die .klein-Varianten (zwei
     Klassen schlagen eine) — für die gilt weiter der Desktop-Grundwert aus
     docs/DESIGN.md (34 px, klein 30 px), siehe die Tippziel-Erhebung zu
     Aufgabe 16. Ebenso unberührt: .panel a/button und .zeilenmenue > summary
     sind schon unconditional 44 px, jeder Baustein in web/zentrale.css trägt
     seine eigene 44-px-Regel in seinem eigenen Handy-Block. */
  button, .knopf, summary { min-height: 44px; min-width: 44px; }
}

/* Erinnerungen im Chat: Herkunft lesbar, interner Markup bleibt verborgen. */
.chat-erinnerung { display: block; margin: .6em 0; padding: .65em .85em; border-left: 3px solid currentColor; opacity: .8; }

/* Dateien (Fall 475): Anhänge und Zeichnungen (docs/plan-zeichnen.md, Z3) unter /dateien */
.zeichnungsliste { list-style: none; margin: 8px 0 24px; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 720px; }
.zeichnungsliste .zeichnungZeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border-radius: var(--r-s, 8px); border: 1px solid transparent; }
.zeichnungsliste .zeichnungSym { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--flaeche); color: var(--text-leise); }
.ordnerliste .zeichnungSym { background: var(--akzent-hell); color: var(--akzent-dunkel); }
.zeichnungsliste .zeichnungText { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.zeichnungsliste .zeichnungText strong { overflow-wrap: anywhere; }
/* Fall 466: das ⋯-Menü einer Zeichnung klappt als Liste auf (.zeilenmenue
   mit .panel, wie ui.menue), nicht mehr als Knopfreihe in der Zeile. Rechts
   bündig, auch am Handy: der Knopf steht am rechten Rand der Zeile. */
.zeichnungsliste .zeichnungMenue { flex: none; }
.zeichnungMenue.zeilenmenue > .panel { right: 0; left: auto; width: 248px; max-width: calc(100vw - 32px); -webkit-user-select: text; user-select: text;
  /* Beim Aufklappen scrollt das Skript das Menü ins Bild, nicht unter Kopf oder Handy-Leiste. */
  scroll-margin: 80px 0 96px; }
.zeichnungMenue .panel form { margin: 0; }
.zeichnungsliste .zeichnungMenue .panel a:hover { text-decoration: none; }
.zeichnungMenue .zeichnungVerschieben { display: flex; flex-direction: column; gap: 6px; padding: var(--a-2) var(--a-3); }
.zeichnungMenue .zeichnungVerschieben label { display: flex; flex-direction: column; gap: 4px; }
.zeichnungMenue .zeichnungVerschieben select, .zeichnungMenue .zeichnungVerschieben input[name="neu"] { width: 100%; min-height: 36px; font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--linie-stark); border-radius: var(--r-s, 8px); background: var(--grund); color: var(--text); }
/* Mit Skript schickt die Auswahl selbst ab; der Knopf erscheint nur für „Neuer Ordner …“. */
.zeichnungMenue .zeichnungVerschieben.mitSkript:not(.neuerOrdner) .zeichnungVerschiebenKnopf { display: none; }
.zeichnungMenue .panel .zeichnungVerschiebenKnopf { width: auto; min-height: 32px; align-self: flex-start; padding: 4px 12px; border: 1px solid var(--linie-stark); }
.zeichnungMenue .zeichnungLoeschen > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: var(--a-2) var(--a-3); border-radius: var(--r-s); color: var(--fehler); font-size: 13px; }
.zeichnungMenue .zeichnungLoeschen > summary::-webkit-details-marker { display: none; }
.zeichnungMenue .zeichnungLoeschen > summary:hover { background: var(--flaeche); }
.zeichnungMenue .zeichnungLoeschen p { margin: 0; padding: 0 var(--a-3) var(--a-2); }
.zeichnungMenue .zeichnungLoeschen form { padding: 0 var(--a-3) var(--a-2); }
.zeichnungMenue .panel .zeichnungLoeschen button { width: auto; min-height: 36px; padding: 6px 12px; text-align: center; border: 1px solid var(--fehler); color: var(--fehler); background: var(--grund); font-weight: 500; }
.zeichnungMenue .panel .zeichnungLoeschen button:hover { background: var(--fehler); color: var(--grund); }
/* Fall 480: Reiter links, „Neuer Ordner“ rechts auf derselben Linie. */
.dateienReiter { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--linie); margin: 0 0 18px; }
.dateienReiter .abschnitte { flex: 1; min-width: 0; margin: 0; border-bottom: 0; }
.dateienReiter > .knopf { flex: none; }
.zeichnungNeuerOrdner { display: grid; gap: 12px; padding-top: 16px; }
.zeichnungNeuerOrdner input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 13.5px; padding: 6px 10px; border: 1px solid var(--linie-stark); border-radius: var(--r-m, 8px); }
.ordnerAufloesen { margin-top: 16px; max-width: 720px; }
.ordnerAufloesen > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ordnerAufloesen[open] { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ordnerAufloesen form { margin: 0; }
.zeichnungArchiv > summary { cursor: pointer; }
.zeichnungArchiv > summary h3 { display: inline; }
/* Ziehen und Ablegen (Fall 443) */
.zeichnungsliste [data-ziehbar] { cursor: grab; }
.zeichnungsliste .zeichnungZeile, .zeichnungsliste .zeichnungZeile a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.zeichnungsliste .zeichnungZeile.zieht { opacity: .45; }
.zieht-zeichnung [data-ordner-ziel] { border-color: var(--linie-stark); border-style: dashed; }
[data-ordner-ziel].ablegen { background: var(--akzent-hell) !important; border-color: var(--akzent) !important; border-style: solid !important; }
.seitenkopf h1 a[data-ordner-ziel] { border: 1px dashed transparent; border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
.zeichnungGeist { list-style: none; background: var(--grund); box-shadow: 0 8px 24px rgba(0,0,0,.18); border: 1px solid var(--akzent); border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.zeichnungGeist .zeichnungMenue { display: none; }
.zeichnungGeist .zeichnungText { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.zeichnungGeist .zeichnungText a { color: var(--text); text-decoration: none; }
.zeichnungGeist .zeichnungSym { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--flaeche); color: var(--text-leise); }
.zeichnungsliste.ordnerliste { margin-bottom: 4px; }
.zeichnungsliste .zeichnungZeile:hover { background: var(--flaeche); }
.zeichnungsliste .zeichnungZeile a { color: var(--text); text-decoration: none; }
.zeichnungsliste .zeichnungZeile a:hover { text-decoration: underline; }
.dateiZeile .zeichnungText .klein a { color: var(--text-leise); text-decoration: underline; }
/* Speicherplatz und Belegung oben auf /dateien */
.dateienSpeicher { max-width: 720px; margin: 4px 0 16px; padding: var(--a-3) var(--a-4); border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--grund); display: flex; flex-direction: column; gap: var(--a-2); }
.dateienSpeicherKopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-2); flex-wrap: wrap; }
.dateienSpeicherZeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--a-3); font-size: 13.5px; }
.dateienSpeicherZeile > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.dateienSpeicherWert { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dateienSpeicherZeile .balken { flex-basis: 100%; }


/* Meeting-Seite (src/meetings-routen.js, web/meeting.js) */
.meetingPlayer { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; max-width: 640px; }
.meetingPlayer input[type=range] { flex: 1; min-width: 80px; }
.meetingPlayer [data-zeit] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.meetingTranskript { max-width: 760px; }
.meetingTranskript p { margin: 0 0 10px; line-height: 1.5; }
.meetingTranskript a[data-springe] { font-variant-numeric: tabular-nums; text-decoration: none; margin-right: 4px; }