/* Clockman — die Marke steht hier, an genau einer Stelle. Leitfarbe Orange.
 *
 * Aufbau seit 13.09.2026 nach dem Schwesterprodukt der Saglam Invest GmbH:
 * kantiges Zeichen mit Punkt, dunkle Seitenleiste, heller Kopf, kantige Karten
 * mit kleinem Etikett als Kopf, Chips mit Punkt, Schrift Inter. Die Farben bleiben
 * Clockman (docs/GESTALTUNG.md).
 *
 * Regeln, die aus gemessenen Kontrasten folgen:
 * - `--cm-orange` ist Fläche und Akzent, NIE Schriftfarbe auf Hell. Es liegt auf
 *   jedem hellen Grund unter 3,0.
 * - Knöpfe tragen das Orange des Zeichens, aber mit DUNKLER Schrift: Weiß darauf
 *   käme nur auf 2,88, `--cm-knopf-text` erreicht 5,83 und beim Überfahren 6,74
 *   (die Fläche wird dabei heller, nicht dunkler — der Kontrast steigt).
 * - Links sind schwarz und orange unterstrichen (`--cm-link`, `--cm-link-linie`,
 *   05.11.2026): ein abgedunkeltes Orange als Schrift wirkte braun.
 * - `--cm-salbei` ist ausschließlich Fläche.
 *
 * Jede Farbe ist hier vollständig definiert. Der Dunkelmodus überschreibt nur,
 * er führt nichts Neues ein — sonst leckt eine Farbe in die helle Ansicht. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter/InterVariable-latin.4b73e2ff3024.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
                 U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter/InterVariable-latin-ext.084b211fc382.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --cm-orange: #ef762c;        /* Fläche, Akzent, Fokusring — nie Schrift auf Hell */
  --cm-salbei: #d6d6d1;        /* nur Fläche (bis 05.11.2026 grünlich #a8c3b0) */
  --cm-lauf: #3f7d5c;          /* nur Fläche: laufender Abschnitt, Punkt im Zeitstrahl */
  --cm-knopf: #ef762c;         /* Knopffläche = Orange des Zeichens */
  --cm-knopf-hover: #f3884a;   /* heller beim Überfahren, Schrift darauf 6,74 */
  --cm-knopf-text: #111111;    /* 6,4 auf --cm-knopf; auch Chipschrift auf Orange (18.10.2026) */
  /* 05.11.2026 (Nutzer: „diese orangenen links … das sind farben die taugen nichts“):
     Linkschrift schwarz, die Unterstreichung trägt das Orange. Vorher #a2501d = Braun. */
  --cm-link: #111111;          /* 16,55 auf Grund · 18,88 auf Karte */
  --cm-link-linie: #ef762c;    /* nur Linie (Unterstreichung), nie Schrift */
  /* Hervorhebung beim Überfahren und Auswahlfläche. Bis 05.11.2026 Pfirsich #fde3cd;
     jetzt neutral - Orange kommt als Linie oder volle Fläche, nie als Pastell. */
  --cm-orange-hell: #ebebe8;
  --cm-tinte: #111111;         /* Überschriften — schwarz statt Dunkelgrün (Nutzer 18.10.2026) */
  /* Seitenleiste, Markenkopf der Anmeldung, Terminalkopf: eine dunkle Fläche.
     Eine Textfarbe ist keine Flächenfarbe — deshalb eigene Token. */
  --cm-kopf: #1c1c1e;          /* Fläche, in beiden Modi dunkel; neutral statt Grünschwarz (05.11.2026) */
  --cm-kopf-text: #ffffff;     /* 17,01 darauf */
  --cm-kopf-leise: #d4d4d8;    /* 11,51 darauf · 8,52 auf aktiv */
  --cm-kopf-abschnitt: #a1a1a6;/* Abschnittsnamen, 6,61 darauf */
  --cm-kopf-aktiv: #333336;    /* Fläche des aktiven Navigationspunkts */
  --cm-kopf-linie: #2c2c2f;    /* Trennlinien auf der dunklen Fläche */
  --cm-zeichen: #ffffff;       /* das C im Zeichen — Fläche, keine Schrift */
  --cm-zeichen-punkt: #22352b; /* der Punkt im Zeichen */
  --cm-text: #111111;          /* Fließtext, schwarz statt Olivgrün (Nutzer 18.10.2026) */
  --cm-leise: #5c5c5c;         /* neutrales Grau statt Grüngrau, 5,86 auf Grund · 6,69 auf Karte */
  /* Erledigt-Chip (Variante B, 18.10.2026): Offenes ist orange, Erledigtes schwarz. */
  --cm-chip-fertig: #111111;
  --cm-chip-fertig-text: #ffffff;
  /* 23.09.2026 — der Grund wird ein sehr helles Orange.
   *
   * Vorgeschichte: Am 14.09. kam #fbf5ee („bissl moderner"), weil Karte und
   * Grund davor fast gleich waren. Es half nicht — am 23.09. hieß es wieder,
   * Karte und Seite sähen gleich aus.
   *
   * GEMESSEN, und das dreht die ganze Erklärung um: Karte #ffffff auf Grund
   * #fbf5ee ergibt Kontrast 1,083. Das Vorbild, das dem Nutzer gefiel, liegt
   * bei 1,06 — also NIEDRIGER. Am Kontrast liegt es nicht. Es liegt am
   * Farbstich: #fbf5ee ist GELB-warm (R-G 6), und Weiß darauf liest sich als
   * „zweites Beige". Was die Trennung wirklich macht, sind Schatten, Abstand
   * und ein Kartenkopf, der nicht mehr die Seitenfarbe trägt (siehe .karte).
   *
   * Der Weg dahin, weil der Wert sonst willkürlich aussieht: Zuerst stand hier
   * ein sehr helles Orange (#fffbf9) — der Nutzer wollte den Grünstich des
   * Vorbilds ausdrücklich nicht. Dann lagen vier Töne in einem Umschalter
   * nebeneinander, und er hat sich für den kühlen entschieden. Genau das ist
   * die Lehre: Nebeneinander entscheidet man anders als beschrieben.
   *
   * #f6f8f7 ist neutral mit einem Hauch Grün — dieselbe Familie wie die dunkle
   * Schiene. Weiß darauf liest sich als Weiß, nicht als „zweites Beige".
   * Schriften halten ohne jede Änderung, mit mehr Luft als vorher:
   * Nebentext 5,03 (vorher 4,95) · Link 5,32 · Fließtext 8,96.
   *
   * 05.11.2026 — neutral statt grünstichig. Nutzer: „irgendwas passt nicht“.
   * Gemessen: drei Farbwelten auf einmal (neutrale Schrift, grünstichige
   * Flächen aus der Olivpalette, Pfirsich), dazu Karte auf Grund nur 1,07.
   * Jetzt ein Schwarz und warm-neutrale Grautöne: Karte 1,14, Haarlinie 1,32,
   * kräftige Linie 1,66. Im Vorher-/Nachher-Vergleich vom Nutzer gewählt. */
  --cm-grund: #f0f0ee;
  --cm-karte: #ffffff;
  --cm-linie: #e0e0dc;
  /* Zwei Linienstärken: die Haarlinie trennt Zeilen INNERHALB einer Karte, die
     kräftige zieht Kanten, die man sehen soll — Kartenrand, Reiterleiste,
     Umriss-Knöpfe. Vorher war beides dieselbe Farbe, und deshalb war entweder
     die Zeile zu laut oder die Kante zu leise. */
  --cm-linie-stark: #c9c9c4;
  /* Flaechen INNERHALB einer Karte (Saldo, Notiz, Pruefblock, Hervorhebung beim
     Ueberfahren). Bewusst neutral und nicht der warme Seitengrund: Der warme Ton
     ist die Seite; eine warme Flaeche mitten in einer weissen Karte war genau
     das, was am 23.09.2026 gestoert hat. */
  --cm-einlage: #f4f4f2;
  /* Vier Toene fuer Gesellschaftskacheln UND die Abwesenheitsarten in Kalender,
     Jahresblatt und Genehmigungen (a Arztgang, b Pflegeurlaub, c Urlaub,
     d Zeitausgleich). Dort sind sie Daten - nie vereinheitlichen. Schrift 5,66 bis 7,24. */
  --cm-kachel-a: #dfe8de;  --cm-kachel-a-text: #35563f;
  --cm-kachel-b: #e6e2f2;  --cm-kachel-b-text: #4a3f7a;
  --cm-kachel-c: #fbe4d3;  --cm-kachel-c-text: #8c4718;
  --cm-kachel-d: #d9e8ec;  --cm-kachel-d-text: #26555f;
  /* Kontenarten, keine Bewertung: Salbei bedeutet nicht positiver Bestand. */
  --cm-konto-urlaub: #f4f4f2;
  --cm-konto-zeit: #f4f4f2;
  --cm-warn: #b42318;          /* klares Rot statt Rotbraun #9a2c1e (05.11.2026), 6,57 auf Karte */
  --cm-warn-grund: #fbe6e2;
  /* Der rote Kreis in „Mein Team" (05.10.2026): Rot als FLÄCHE - --cm-warn ist Schrift. 5,2 darauf. */
  --cm-zaehler: #c8352a;
  --cm-zaehler-text: #ffffff;
  /* Linie oben auf Warnmeldungen - wie die orange Linie der Karten, nur rot (05.11.2026). */
  --cm-warn-linie: #c8352a;
  --cm-offline-grund: #ebebe8;
  --cm-offline-text: #505055;
  /* Anmeldung: Verlauf von hell (oben) nach dunkel (unten). Die Fußzeile steht
     unten; weiß auf der Stufe bei 62 % = 5,50, darunter nur dunkler. Umgekehrt
     (hell unten) käme sie auf 3,9. */
  --cm-anmelde-hell: #f08a45;
  --cm-anmelde-orange: #d9651f;
  --cm-anmelde-rost: #a94f19;
  --cm-anmelde-tief: #6f3310;
  --cm-anmelde-fuss: #ffffff;
  --schrift: 16px/1.5 Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  /* 23.09.2026: von 3px auf 8px. Die kantigen 3px stammen aus der ersten
     Fassung; im Vorbild sind Knöpfe, Felder und Chips deutlich runder, und
     genau das liest sich als „heutig". Karten bekommen mehr (siehe --radius-karte). */
  --radius: 8px;
  --radius-karte: 12px;
  /* Zwei Lagen: eine feine Kante direkt an der Karte, darunter ein weiter,
     sehr schwacher Schlagschatten. Der Schatten trennt die Karte vom Grund —
     nicht die Farbe. */
  --schatten-karte: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 16px -12px rgba(0, 0, 0, .28);
}
/* Eigens entworfen, nicht invertiert: Ein abgedunkeltes Beige wird ein
 * Braunton. Seit 05.11.2026 neutral dunkelgrau statt sehr dunkles Grün, wie im Hellen.
 * Links sind hell mit oranger Unterstreichung - dieselbe Regel in beiden Modi. */
@media (prefers-color-scheme: dark) {
  :root {
    --cm-salbei: #45454b;
    --cm-lauf: #6aa383;
    --cm-link: #f4f4f2;        /* 12,26 auf der Auswahlfläche */
    --cm-orange-hell: #2e2e33;
    --cm-tinte: #f4f4f2;
    --cm-kopf: #111113;        /* bleibt dunkel, setzt sich vom Grund ab */
    --cm-kopf-text: #f4f4f2;   /* 17,13 darauf */
    --cm-kopf-leise: #d4d4d8;  /* 12,76 darauf */
    --cm-kopf-abschnitt: #a1a1a6;
    --cm-kopf-aktiv: #26262a;
    --cm-kopf-linie: #232327;
    --cm-text: #e8e8e6;
    --cm-leise: #a8a8ad;
    --cm-grund: #18181a;
    --cm-karte: #222225;
    --cm-linie: #36363b;
    /* Im Dunkeln sitzt die Karte HELLER als der Grund; die kräftige Kante muss
       deshalb heller sein als die Haarlinie, nicht dunkler. */
    --cm-linie-stark: #4a4a50;
    --cm-einlage: #2a2a2e;
    --cm-kachel-a: #2c3a30;  --cm-kachel-a-text: #bfd4c4;
    --cm-chip-fertig: #ececec;
    --cm-chip-fertig-text: #111111;
    --cm-kachel-b: #312c44;  --cm-kachel-b-text: #c8c2e0;
    --cm-kachel-c: #3a2c20;  --cm-kachel-c-text: #e8c3a3;
    --cm-kachel-d: #243740;  --cm-kachel-d-text: #b8d4dc;
    --schatten-karte: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -16px rgba(0, 0, 0, .85);
    --cm-konto-urlaub: #2a2a2e;
    --cm-konto-zeit: #2a2a2e;
    --cm-warn: #f08a7c;
    --cm-warn-grund: #3a2420;
    --cm-zaehler: #f08a7c;
    --cm-zaehler-text: #2a0f0b;   /* 7,4 darauf */
    --cm-warn-linie: #f08a7c;
    --cm-offline-grund: #2a2a2e;
    --cm-offline-text: #d4d4d8;
  }
}
* { box-sizing: border-box; }
/* 450 statt 400: Inter wirkt auf hellem Grund dünn (Codex 23.09.2026,
   „gerade Tabellen und Nebeninformationen wirken dünner"). Die `font`-Kurzform
   setzt das Gewicht zurück — darum steht es DANACH. */
body { margin: 0; font: var(--schrift); font-weight: 450;
       color: var(--cm-text); background: var(--cm-grund); }
a { color: var(--cm-link); text-underline-offset: .22em; text-decoration-thickness: 2px;
    text-decoration-color: var(--cm-link-linie); }
h1 { font-size: 1.75rem; font-weight: 750; line-height: 1.2; margin: 0 0 .75rem; color: var(--cm-tinte); letter-spacing: -.03em; }
/* Der Erklärsatz unter einer Seitenüberschrift ist Nebentext, kein Absatz: kleiner,
   schmaler, direkt unter dem Titel. So liest sich eine Seite nicht als Textwand. */
h1 + p.leise, .zeile-kopf + p.leise { margin: -.35rem 0 1.25rem; font-size: .9rem; max-width: 68ch; }
/* Der Kopf ist hell: Das Dunkel trägt genau EINE Fläche, die Seitenleiste. */
.kopf { display: flex; align-items: center; gap: 1rem; min-height: 60px; padding: .5rem 1.4rem;
        background: var(--cm-karte); color: var(--cm-text); border-bottom: 1px solid var(--cm-linie); }
.kopf .kopfsuche { margin-left: auto; }
.kopf .kopfsuche + .glocke { margin-left: .25rem; }
.kopf .glocke { margin-left: auto; }
.kopf .glocke + .abmelden { margin-left: 0; }
/* Beschriftung nur fuer Vorleseprogramme: Ein Feld ohne Label ist fuer sie ein Feld
   ohne Namen, und ein Platzhalter verschwindet beim ersten Zeichen. */
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden;
                clip-path: inset(50%); white-space: nowrap; }
/* Kompakter als die Anmeldefelder: Die Kopfleiste ist 60 px hoch, dort passt kein 52-px-Feld. */
.kopfsuche { position: relative; display: flex; align-items: center; flex: 0 1 20rem; min-width: 0; margin: 0; }
.kopfsuche-zeichen { position: absolute; left: .7rem; width: 17px; height: 17px; fill: none;
                     stroke: var(--cm-leise); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.kopfsuche input { width: 100%; min-width: 0; margin: 0; min-height: var(--ziel-klein, 38px); padding: .3rem .7rem .3rem 2.2rem;
                   font-size: .92rem; }
.kopfsuche:focus-within .kopfsuche-zeichen { stroke: var(--cm-link); }
.kopf .abmelden { margin-left: auto; }
/* Brotkrume: der Weg leise, der aktuelle Ort kraeftig. Vorher war alles gleich
   fett, und damit sah der Weg aus wie ein zweiter Titel. */
.brotkrume { font-weight: 650; color: var(--cm-tinte); }
/* Nur wenn die Seite wirklich einen Weg angibt (ein <b> fuer den aktuellen
   Ort), wird der Vorspann leise. Ohne <b> steht dort der Kundenname, und der
   soll kraeftig bleiben - sonst wirkt der Kopf auf ALLEN anderen Seiten blass. */
.brotkrume:has(b) { font-weight: 500; color: var(--cm-leise); }
.brotkrume b { font-weight: 650; color: var(--cm-tinte); }
.brotkrume > span { padding: 0 .1rem; opacity: .55; }
/* Die Glocke: stumm, solange nichts offen ist. Die Zahl sitzt in der Ecke des Zeichens,
   nicht daneben — sonst wandert bei zweistelligen Zahlen die ganze Kopfzeile. */
.glocke { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px;
          flex: none; border-radius: var(--radius); color: var(--cm-leise); text-decoration: none; }
.glocke:hover, .glocke:focus-visible { background: var(--cm-einlage); color: var(--cm-tinte); }
.glocke-voll { color: var(--cm-tinte); }
.glocke-zeichen { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
                  stroke-linecap: round; stroke-linejoin: round; }
.glocke-zahl { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 .25rem;
               display: grid; place-items: center; border-radius: 8px; background: var(--cm-knopf);
               /* Nicht --cm-tinte: die kippt im Dunkelmodus auf Hell und stuende dann hell auf
                  Orange. --cm-knopf-text ist das Paar, das fuer genau diese Flaeche geprueft ist. */
               color: var(--cm-knopf-text); font-size: .68rem; font-weight: 800; line-height: 1; }
/* Ein Hinweis ist eine Bitte um Klärung, keine Störung - kein roter Kasten. Der
   frühere orange Rand LINKS ist weg (24.09.2026): Seit jede Karte oben orange
   ist, ergaben beide zusammen ein Winkeleisen. */
/* „Feierabend vergessen? Erledigt" las sich wie ein Satzende. Der Knopf bekommt
   eine eigene Zeile und einen linken Rand statt Einzug — dann ist er ein Knopf. */
.karte-hinweise .inline { display: block; margin-top: .4rem; }
.karte-hinweise .knopf-text { padding: .2rem 0; color: var(--cm-link); font-weight: 650; }
.marke { color: var(--cm-kopf-text); text-decoration: none; font-weight: 750; letter-spacing: -.03em;
         display: inline-flex; align-items: center; gap: .6rem; }
.kopf .marke { color: var(--cm-tinte); }
/* Das Zeichen: oranges Feld, kantiges C, Punkt oben links in der freien Ecke —
   gezeichnet aus CSS, damit es überall gleich ist, auch im Terminal und in den
   Offline-Hüllen, ohne weitere Datei. Die Maske ist das C aus
   docs/gestaltung/zeichen.svg; der Punkt liegt exakt auf seinem Kreis
   (Mitte 360/367, Radius 74 im Ausschnitt 190 250 900 760). */
.marke-zeichen { position: relative; display: inline-block; flex: none; width: 34px; height: 34px;
                 border-radius: 26%; background-color: var(--cm-orange); }
.marke-zeichen::before { content: ""; position: absolute; left: 17%; top: 22.1%; width: 66%; height: 55.7%;
  background-color: var(--cm-zeichen);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='190 250 900 760'%3E%3Cpath d='M1022 293H612C572 293 550 305 534 334L298 896C284 930 300 959 338 959H760L883 806H542L676 446H899Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='190 250 900 760'%3E%3Cpath d='M1022 293H612C572 293 550 305 534 334L298 896C284 930 300 959 338 959H760L883 806H542L676 446H899Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.marke-zeichen::after { content: ""; position: absolute; left: 24.04%; top: 25.25%; width: 10.85%; height: 10.85%;
                        border-radius: 50%; background-color: var(--cm-zeichen-punkt); }
.marke-zeichen-gross { width: 80px; height: 80px; }
.kunde { color: var(--cm-kopf-leise); flex: 1; }
.abmelden { display: flex; align-items: center; gap: .75rem; margin: 0; }
.wer { color: var(--cm-text); font-size: .9rem; }
.kuerzel { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
           background: var(--cm-kopf); color: var(--cm-kopf-text); font-size: .78rem; font-weight: 700; }
/* Breit genug für zwei Spalten mit Formularen nebeneinander (Bild vom 14.09.2026:
   bei 1040 px quetschte die Regelseite neun Auswahlfelder in ein Drittel). Fließtext
   bleibt trotzdem lesbar schmal. */
.inhalt { width: 100%; min-width: 0; max-width: none; margin: 0 auto; padding: 1.5rem 1.6rem 2.5rem; }
:where(.inhalt) p:where(:not([class]), .leise, .warn, .klein) { max-width: 85ch; }
.fuss { text-align: center; color: var(--cm-leise); font-size: .8rem; padding: 2rem 1rem; }
/* Karten: kantig, Haarlinie, ein Hauch Tiefe — weiß auf hellem Grund. */
/* Wer angemeldet ist, steht unten - wie im Entwurf. */
.schiene-ich { display: flex; align-items: center; gap: .7rem; padding: .55rem 0 .7rem; }
.schiene-ich .kuerzel { background: var(--cm-kopf-aktiv); color: var(--cm-kopf-text); }
.schiene-ich b { display: block; font-size: .88rem; font-weight: 600; color: var(--cm-kopf-text);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schiene-ich em { display: block; font-style: normal; font-size: .74rem; color: var(--cm-kopf-leise); }
.schiene-ich > span { min-width: 0; }

/* Kacheln fuer Gesellschaften: abgerundete Quadrate statt Kreise - Kreise sind
   Menschen. Der Ton kommt aus dem Kurznamen. */
.initialen-firma { border-radius: 10px; }
.kachel-1 { background: var(--cm-kachel-a); color: var(--cm-kachel-a-text); }
.kachel-2 { background: var(--cm-kachel-b); color: var(--cm-kachel-b-text); }
.kachel-3 { background: var(--cm-kachel-c); color: var(--cm-kachel-c-text); }
.kachel-4 { background: var(--cm-kachel-d); color: var(--cm-kachel-d-text); }
.karte { background: var(--cm-karte); border: 1px solid var(--cm-linie-stark); border-radius: var(--radius-karte);
         padding: 1.35rem; margin-bottom: 1.35rem; box-shadow: var(--schatten-karte); }
/* Jede Karte traegt oben die orange Linie (Nutzerwunsch 24.09.2026: „ueberall diese
   orangene linie oben bei den kastln … einheitlich"). Vorher hatten sie nur die
   Antraege; Konten grau, Verwaltung gar keine - drei Handschriften in einer App.
   EINE Regel hier statt einer je Seite, damit keine neue Seite sie vergisst. */
.inhalt-gesamt .karte { border-top: 3px solid var(--cm-orange); }
/* Eine Tabelle, die breiter ist als ihre Karte, scrollt IN der Karte. Vorher ragte
   sie über den Rand hinaus und die ganze Seite bekam einen Querbalken (Bild vom
   14.09.2026, Personal und Verwaltung bei schmalem Fenster). */
.karte:has(.tabelle) { overflow-x: auto; }
/* Steht das Etikett (oder die Kopfzeile mit Etikett) zuerst in der Karte, wird es
   zum Kartenkopf mit Linie — ohne dass eine Vorlage angefasst werden muss. */
.karte > .etikett:first-child, .karte > .zeile-kopf:first-child {
  margin: -1.25rem -1.25rem 1rem; padding: .7rem 1.25rem; border-bottom: 1px solid var(--cm-linie); }
.karte > .etikett:first-child, .karte > .zeile-kopf:first-child .etikett { color: var(--cm-text); }
.karte > .zeile-kopf:first-child .etikett { margin: 0; }
.karte-schmal { max-width: 420px; margin: 3rem auto; }
.etikett { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-leise);
           margin: 0 0 .75rem; font-weight: 700; }
.paare { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: .35rem 1.25rem; margin: 0; }
.paare dt { color: var(--cm-leise); }
.paare dd { margin: 0; overflow-wrap: anywhere; }
/* Am Handy steht der Wert unter seinem Namen; lange Herkunftsangaben ragten sonst hinaus. */
@media (max-width: 480px) { .paare { grid-template-columns: minmax(0, 1fr); row-gap: .1rem; } .paare dd { margin-bottom: .55rem; } }
/* Nebentext war nicht nur heller, sondern auch duenner als der Rest. Die Farbe
   traegt die Zurueckhaltung; das Gewicht muss sie nicht noch einmal tragen. */
.leise { color: var(--cm-leise); font-weight: 460; }
.warn { color: var(--cm-warn); font-weight: 600; }
label { display: block; margin-bottom: .75rem; font-weight: 600; font-size: .88rem; }
/* Ein Feld ist so breit wie das, was hineingehoert (24.09.2026).
   `width: 100%` stammt aus der Zeit, als eine Seite 640 px breit war; in der
   1520 px breiten Oberflaeche wurde daraus ein Datumsfeld ueber die halbe
   Seite. Die Obergrenze steht am Feld, nicht an der Karte - sonst muesste jede
   Seite sie einzeln setzen. `width: 100%` bleibt, damit es am Handy voll
   ausfuellt; `max-width` greift erst darueber. */
input[type=email], input[type=password], input[type=text], input[type=date], input[type=number] {
  display: block; width: 100%; max-width: min(100%, var(--feldbreite, 30rem)); margin-top: .3rem; padding: .6rem .75rem;
  min-height: var(--ziel, 42px); font: inherit;
  border: 1px solid var(--cm-linie-stark); border-radius: var(--radius);
  background: var(--cm-karte); color: var(--cm-text); }
/* Die Breite je Feldart. Als Variable, damit sie auch gegen die sehr spezifische
   Formularregel der Oberflaeche ankommt (siehe dort). */
input[type=date] { --feldbreite: 11rem; }
input[type=number] { --feldbreite: 9rem; }
input[type=email], input[type=password] { --feldbreite: 24rem; }
/* Auswahl- und Textfelder stehen überall wie Eingabefelder UNTER ihrer Beschriftung,
   in voller Breite; Hilfe- und Fehlertext darunter, nicht fett. */
label > select, label > textarea { display: block; width: 100%; max-width: min(100%, var(--feldbreite, 30rem)); margin-top: .3rem; }
label > select { min-height: var(--ziel, 42px); }
textarea { font: inherit; padding: .6rem .75rem; border: 1px solid var(--cm-linie-stark); border-radius: var(--radius);
           background: var(--cm-karte); color: var(--cm-text); resize: vertical; }
label > .leise, label > .warn { display: block; margin-top: .3rem; font-size: .85rem; }
label > .leise { font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cm-orange); outline-offset: 1px; border-color: var(--cm-orange); }
.knopf { font: inherit; font-weight: 650; padding: .65rem 1.15rem; min-height: var(--ziel, 44px); cursor: pointer; text-decoration: none;
         border: 1.5px solid var(--cm-knopf); border-radius: var(--radius); background: var(--cm-knopf); color: var(--cm-knopf-text); }
.knopf:hover { background: var(--cm-knopf-hover); border-color: var(--cm-knopf-hover); }
/* Nur auf dunkler Fläche (Terminalkopf): weiße Schrift, durchscheinender Rand. */
.knopf-leise { background: transparent; color: var(--cm-kopf-text);
               border: 1px solid color-mix(in srgb, var(--cm-kopf-text) 35%, transparent); min-height: 36px; padding: .4rem .8rem; }
/* Umriss-Knopf auf hellem Grund: oranger Rand, dunkle Schrift. */
.knopf-zweit { background: transparent; color: var(--cm-tinte); border: 1.5px solid var(--cm-orange); }
.knopf-zweit:hover { background: var(--cm-orange-hell); }
.knopf-gefahr { background: transparent; color: var(--cm-warn); border: 1.5px solid var(--cm-warn); }
.knopf-text { background: none; border: 0; color: var(--cm-leise); cursor: pointer; font: inherit; padding: 0 .3rem; }
.knopf-breit { width: 100%; }
.nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.nav a { color: var(--cm-kopf-text); text-decoration: none; font-size: .95rem; }
.nav a:hover { color: var(--cm-orange); }
.zeile-kopf { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: .75rem; }
.zeile-kopf .etikett, .zeile-kopf h1 { margin: 0; }
.kopf .knopf { min-height: 38px; padding: .35rem .9rem; font-size: .9rem; }
.suche { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.suche input[type=text] { width: auto; min-width: 16rem; margin: 0; }
.inline { display: inline; margin: 0; font-weight: 400; }
.formzeile { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.formzeile label { margin: 0; }
.formzeile select, .formzeile input { margin-top: .3rem; }
/* Auswahlfelder stehen wie Textfelder UNTER ihrer Beschriftung, nicht daneben. */
.formzeile label > select { display: block; }
.formzeile.klein { margin-top: .4rem; }
select { font: inherit; padding: .5rem .6rem; min-height: var(--ziel, 44px); border: 1px solid var(--cm-linie); border-radius: var(--radius); background: var(--cm-karte); color: var(--cm-text); }
.tabelle { width: 100%; border-collapse: collapse; }
.scroll-tabelle { max-width: 100%; overflow-x: auto; }
/* Handy: Tabellenzeilen als Karten (UX-Bestandsaufnahme 16.10.2026, Konten). Die Spaltenköpfe stehen als
   data-label an jeder Zelle; .ganz nimmt die ganze Breite. */
@media (max-width: 760px) {
  .tabelle-handy, .tabelle-handy tbody { display: block; width: 100%; min-width: 0; }
  .tabelle-handy thead { display: none; }
  .tabelle-handy tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .5rem; padding-block: .75rem; border-bottom: 1px solid var(--cm-linie); }
  .tabelle-handy tbody td { display: block; min-width: 0; border: 0; padding: .25rem 0; }
  /* Die Zeilenhervorhebung färbte sonst jede Zelle einzeln - mit weißen Fugen dazwischen. */
  .tabelle-handy tbody tr:hover > td { background: none; }
  .tabelle-handy tbody :is(td.ganz, td[colspan]) { grid-column: 1 / -1; }
  .tabelle-handy td[data-label]::before { content: attr(data-label); display: block; color: var(--cm-leise); font-size: .7rem; font-weight: 600; }
  /* Kontenliste (Paket E): zwei Werte je Person - je eine halbe Zeile statt zwei Drittel einer Dreierteilung. */
  .kt-liste .tabelle-handy tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem .9rem; padding-block: .6rem; }
}
.scroll-tabelle .tabelle { min-width: 620px; }
.scroll-tabelle input { max-width: 100%; box-sizing: border-box; }
.import-kennung { overflow-wrap: anywhere; }
.import-formular { min-width: 0; }
.import-formular > .karte { min-width: 0; }
.import-formular select, .import-formular input { max-width: 100%; }
.import-formular .knopf { margin: .25rem 0; }
.import-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.import-aktionen .knopf { display: inline-block; }
@media (max-width: 600px) {
  .kopf { flex-wrap: wrap; }
  .kopf .kopfsuche { order: 3; flex: 1 0 100%; margin-left: 0; }
  .kopf .abmelden { flex-wrap: wrap; min-width: 0; }
  .kopf .wer { overflow-wrap: anywhere; min-width: 0; }
}
/* Tabellen ruhig: Kopf ohne Füllfläche, nur kleine Versalien und eine Linie;
   Zeilen mit Luft und Hervorhebung beim Überfahren. Der Name ist die wichtigste
   Spalte — er bricht nicht um und ist kein unterstrichener Fließtextlink. */
.tabelle th { text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
              color: var(--cm-leise); background: transparent; font-weight: 700;
              padding: .55rem .7rem; border-bottom: 1px solid var(--cm-linie); }
.tabelle td { padding: .7rem; border-bottom: 1px solid var(--cm-linie); vertical-align: top;
              font-weight: 460; }
.tabelle tbody tr:last-child > td { border-bottom: 0; }
/* Nur unter dem Zeiger, und sehr leicht: Eine Dauerfläche hinter Text soll es
   innerhalb einer Karte nicht geben (Nutzer 23.09.2026). */
.tabelle tbody tr:hover > td { background: var(--cm-einlage); }
.tabelle td:first-child > a { white-space: nowrap; }
.tabelle a { color: var(--cm-tinte); font-weight: 600; text-decoration: none; }
.tabelle a:hover, .tabelle a:focus-visible { color: var(--cm-link); text-decoration: underline; }
/* Aufklappbare Nebenaktion in einer Zeile (z. B. „Rolle vergeben"). */
.aufklapp > summary { cursor: pointer; color: var(--cm-link); font-weight: 600; font-size: .88rem; padding: .35rem 0; list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::after { content: " ▾"; }
.aufklapp[open] > summary::after { content: " ▴"; }
.leerzustand { color: var(--cm-leise); text-align: center; padding: 1.5rem; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: .45rem 0; border-bottom: 1px solid var(--cm-linie); }
.liste li:last-child { border-bottom: 0; }
.liste.klein { font-size: .85rem; }
.akte-spalten { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
/* Einspaltig, wenn rechts nichts steht (Akte ohne Schreibrecht). Der Umbruch fürs Handy steht
   unten bei 1023 px - eine zweite, ältere Grenze bei 720 px war dort unerreichbar und ist weg. */
.akte-spalten.akte-einspaltig { grid-template-columns: minmax(0, 1fr); }
/* Zwei gleichwertige Spalten (z. B. Historie | Formular). Unter etwa 26rem je Spalte
   rutschen sie untereinander, statt Felder zu quetschen. */
.spalten-gleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-items: start; }
.akte-spalten > *, .spalten-gleich > * { min-width: 0; }
.karte-mittel { max-width: 640px; }
/* Chips: getönte Fläche, farbige Schrift, davor der Punkt aus dem Zeichen.
   Eckig statt Pille — runde Pillen in kantigen Karten sehen nach zwei Entwürfen aus. */
/* Pille statt Kästchen (23.09.2026): Ein Zustand ist keine Schaltfläche, und
   runde Enden unterscheiden ihn auf den ersten Blick von Knöpfen. */
/* Variante B (Nutzer 18.10.2026: „mach das so richtig orange“): kräftiges Orange, schwarze Schrift. */
.marke-chip { display: inline-flex; align-items: center; gap: .4em; background: var(--cm-orange); color: var(--cm-knopf-text);
              border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; font-weight: 600; margin: 0 .3rem .3rem 0;
              white-space: nowrap; }
/* Eine Marke bricht nie um: „Noch nicht / gestartet" auf zwei Zeilen ist keine Marke
   mehr, sondern ein Kasten. Umbrechen darf in einer Tabelle nur der Name - die
   automatische Spaltenbreite gibt ihm dann den Platz, den die anderen nicht brauchen. */
.marke-chip::before, .zeit-chip::before { content: ""; width: .45em; height: .45em; border-radius: 50%; flex: none;
                                           background-color: currentColor; }
/* Antragsstand (antraege.stand): Orange nur, wo DU gefragt bist; wer wartet, ist ruhig. */
.marke-chip.stand-warten { background: var(--cm-einlage); color: var(--cm-text); }
.marke-chip.stand-klaeren { background: var(--cm-warn-grund); color: var(--cm-warn); }
.marke-chip.stand-fertig { background: var(--cm-chip-fertig); color: var(--cm-chip-fertig-text); }
.marke-chip.stand-beendet { background: var(--cm-einlage); color: var(--cm-leise); }
.meldungen { list-style: none; padding: 0; margin: 0 0 1rem; }
/* Meldungen sehen aus wie Karten (05.11.2026): weiß, Linie oben - orange Hinweis, rot Warnung.
   Vorher Pfirsich- bzw. Rosafläche; dieselbe Regel wie „Fehler = Linie in Warnfarbe“. */
.meldung { padding: .7rem .9rem; border-radius: var(--radius); background: var(--cm-karte); color: var(--cm-text);
           border: 1px solid var(--cm-linie-stark); border-top: 3px solid var(--cm-orange); margin-bottom: .5rem; }
.meldung-error { border-top-color: var(--cm-warn-linie); }

/* ── Arbeitsplatz ────────────────────────────────────────────────────────
   Die Startseite ist um den Tag eines Menschen gebaut, nicht um das
   Datenmodell (docs/GESTALTUNG.md). Deshalb hier: eine Begruessung, grosse
   Zahlen und eine Leiste statt einer Zahlenreihe. */
.gruss { font-size: 1.9rem; font-weight: 750; letter-spacing: -.035em; margin-bottom: .1rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.kachel { margin-bottom: 0; }
.kachel p { margin: .2rem 0; }
.zahl-gross { font-size: 2.1rem; font-weight: 750; line-height: 1.1; letter-spacing: -.03em; color: var(--cm-tinte); }
/* Kennzahlen als EIN Band: Die Trennlinien entstehen aus dem Zwischenraum, das
   Band trägt die Linienfarbe als Grund. So stimmen die Linien auch beim Umbruch. */
.kennzahlen { display: flex; flex-wrap: wrap; gap: 1px; background: var(--cm-linie); border: 1px solid var(--cm-linie);
              border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.kennzahl { flex: 1 1 13rem; display: flex; gap: .8rem; align-items: flex-start; min-width: 0; padding: .95rem 1rem;
            background: var(--cm-karte); color: var(--cm-text); text-decoration: none; }
.kennzahl:hover { background: var(--cm-einlage); }
.kennzahl__zeichen { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
                     background: var(--cm-orange-hell); color: var(--cm-link); }
.kennzahl__zeichen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
                         stroke-linecap: round; stroke-linejoin: round; }
.kennzahl__text { display: block; min-width: 0; flex: 1; }
/* Initialen vor einem Namen (23.09.2026). Im Entwurf geben sie jeder Zeile ein
   Gesicht; ohne sie sind Listen aus Namen ein Textblock. Bewusst dieselbe
   Farbfläche wie die Symbolkacheln — nicht bunt je Person: Eine Farbe, die
   nichts bedeutet, sieht aus, als bedeute sie etwas. */
.initialen { display: inline-grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem;
             border-radius: 50%; background: var(--cm-konto-zeit); color: var(--cm-text);
             font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.zeile-mit-kachel { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.zeile-mit-kachel > span { min-width: 0; }
.kennzahl__name { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-leise); }
.kennzahl__wert { display: block; margin-top: .15rem; font-size: 1.7rem; font-weight: 800; line-height: 1.1;
                  letter-spacing: -.03em; color: var(--cm-tinte); font-variant-numeric: tabular-nums; }
.kennzahl__hinweis { display: block; margin-top: .15rem; font-size: .8rem; color: var(--cm-leise); }
.kennzahl__hinweis.warn { color: var(--cm-warn); }
.kennzahl__wert.leise { color: var(--cm-leise); }
.kennzahl__fuss { display: block; margin-top: .45rem; font-size: .78rem; font-weight: 600; color: var(--cm-link); }
/* Die Leiste traegt keine Schrift — sie ist reine Flaeche und wird per
   aria-label vorgelesen. Deshalb duerfen hier Flaechentoken ohne
   Kontrastschwelle stehen. */
.balken { display: flex; height: .4rem; border-radius: 2px; overflow: hidden;
          background: var(--cm-linie); margin: .5rem 0; }
.balken-teil { display: block; height: 100%; }
.balken-reserviert { background: var(--cm-orange); }
.balken-frei { background: var(--cm-salbei); }
.klein { font-size: .85rem; }

/* ── Seitenleiste ────────────────────────────────────────────────────────
   Die eine dunkle Fläche: oben das Zeichen mit Wortmarke und Firma, darunter
   Abschnitte, jeder Punkt mit Symbol. Der aktuelle Punkt trägt links einen
   orangen Strich — Orange als Signal, nicht als Fläche. */
.rahmen { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; }
.rahmen-allein { grid-template-columns: 1fr; }
.spalte { display: flex; flex-direction: column; min-width: 0; }
.schiene { display: flex; flex-direction: column; background: var(--cm-kopf); color: var(--cm-kopf-text); }
.schiene .marke { min-height: 60px; padding: .5rem 1rem; gap: .7rem; border-bottom: 1px solid var(--cm-kopf-linie); }
.marke-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.marke-wort { font-size: 1.18rem; font-weight: 750; letter-spacing: -.035em; }
.marke-firma { font-size: .72rem; font-weight: 400; letter-spacing: 0; color: var(--cm-kopf-leise);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schiene nav { display: grid; gap: 3px; padding: .7rem .6rem 1.2rem; }
.nav-gruppe { margin: 0; padding: 1.1rem .7rem .35rem; font-size: .67rem; letter-spacing: .1em;
              text-transform: uppercase; font-weight: 700; color: var(--cm-kopf-abschnitt); }
.nav-gruppe:first-child { padding-top: .3rem; }
.nav-punkt { position: relative; display: flex; align-items: center; gap: .8rem; padding: .62rem .75rem;
             border-radius: 9px; text-decoration: none; color: var(--cm-kopf-leise); font-size: .94rem;
             font-weight: 550; }
/* 19px statt 17: Im Entwurf tragen die Zeichen die Zeile mit, sie begleiten sie
   nicht nur. Etwas duenner gestrichen, damit sie dabei nicht schwer werden. */
.nav-zeichen { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
               stroke-linecap: round; stroke-linejoin: round; }
.nav-punkt:hover { color: var(--cm-kopf-text); background: var(--cm-kopf-aktiv); }
/* Mein Team (Paket C, LE-10): zwei Kacheln mit Zahl, Werkzeuge als Zeilen. */
.team-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .75rem; margin: 0 0 1.1rem; }
.team-kachel { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--cm-linie); border-top: 3px solid var(--cm-orange);
               border-radius: 14px; background: var(--cm-karte); color: var(--cm-text); text-decoration: none; }
.team-kachel strong { font-size: 1.4rem; font-weight: 750; letter-spacing: -.02em; }
.team-kachel small { color: var(--cm-leise); font-size: .86rem; }
.team-kachel-weg { margin-top: .25rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--cm-orange);
                   text-decoration-thickness: 2px; text-underline-offset: .22em; justify-self: start; }
.team-kachel-dunkel { background: var(--cm-kopf); color: var(--cm-kopf-text); border-color: var(--cm-kopf); border-top-color: var(--cm-orange); }
.team-kachel-dunkel .etikett, .team-kachel-dunkel small { color: var(--cm-kopf-leise); }
.team-werkzeuge { margin-top: 1.1rem; }
.team-werkzeuge h2.etikett { margin: 0 0 .4rem; font-size: .74rem; }
.werkzeugzeilen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cm-linie); border-radius: 12px; overflow: hidden; background: var(--cm-karte); }
.werkzeugzeilen li + li { border-top: 1px solid var(--cm-linie); }
.werkzeugzeilen a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; min-height: 54px;
                    padding: .6rem .9rem; color: var(--cm-text); text-decoration: none; }
.werkzeugzeilen a:hover strong { text-decoration: underline; }
.werkzeugzeilen strong { display: block; font-weight: 650; }
.werkzeugzeilen a > span > span { display: block; color: var(--cm-leise); font-size: .84rem; }
.werkzeug-zahl { min-width: 1.5rem; padding: 0 .45rem; border-radius: 999px; background: var(--cm-orange); color: var(--cm-knopf-text); font-size: .78rem;
                 font-weight: 800; line-height: 1.5rem; text-align: center; }
.nav-zahl { margin-left: auto; min-width: 1.4rem; padding: 0 .45rem; border-radius: 999px; background: var(--cm-orange);
            color: var(--cm-knopf-text); font-size: .74rem; font-weight: 800; line-height: 1.4rem; text-align: center; }
.nav-punkt[aria-current=page] { color: var(--cm-kopf-text); font-weight: 600; background: var(--cm-kopf-aktiv); }
.nav-punkt[aria-current=page]::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
                                        background-color: var(--cm-orange); }
.schiene-fuss { margin: auto 0 0; padding: .7rem 1.3rem .9rem; border-top: 1px solid var(--cm-kopf-linie);
                color: var(--cm-kopf-leise); font-size: .72rem; }
.schiene-fuss span { display: block; }
/* Der Firmenname der Instanz: dezent im Fuss statt als Plakette oben (24.09.2026).
   Eine Spur heller als die Versionszeile, damit er lesbar bleibt - aber kein Titel. */
.schiene-fuss .schiene-mandant { color: var(--cm-kopf-text); opacity: .8; font-weight: 600;
                                 overflow-wrap: anywhere; margin-bottom: .1rem; }
/* Leiste unten und ihr Schließen-Link gehören dem Handy; am Schreibtisch trägt die Schiene alles. */
.leiste, .schiene-schliessen { display: none; }
/* Zwei Fassungen desselben Blocks: die volle Liste für den Schreibtisch, eine Zeile mit
   Zahl und Pfeil für das Handy. Beide stehen in der Vorlage, CSS zeigt genau eine. */
.nur-handy { display: none; }
/* Rechtematrix: Zeilen mit einem Schalter, der aussieht wie ein Schalter - an einen Blick,
   nicht an ein Wort. Dieselbe Bauform fuer "heute wirksam" (nur lesend) und das Formular. */
.rm-schutz { list-style: none; margin: 0; padding: 0; }
.rm-schutz li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--cm-linie); }
.rm-schutz li:last-child { border-bottom: 0; }
.rm-schloss { width: 18px; height: 18px; flex: none; margin-top: .15rem; fill: none; stroke: var(--cm-leise); stroke-width: 1.8; }
.rm-technisch { margin-top: .6rem; font-size: .8rem; color: var(--cm-leise); }
.rm-technisch summary { cursor: pointer; }
.rm-technisch code { font-size: .78rem; }
.rm-firma + .rm-firma { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--cm-linie); }
.rm-firma h3 { margin: 0 0 .4rem; font-size: 1rem; display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: baseline; }
.rm-liste { list-style: none; margin: 0; padding: 0; }
.rm-zeile { display: flex; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--cm-linie); }
.rm-zeile:last-child { border-bottom: 0; }
/* Der Knopf am Zeilenende bricht am Handy nicht um (UX-Bestandsaufnahme 16.10.2026, Top 11). */
.rm-zeile > .knopf { flex: none; white-space: nowrap; }
details.rm-firma > summary { cursor: pointer; list-style-position: inside; }
details.rm-firma > summary h3 { display: inline; }
.rm-text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; margin: 0; }
.rm-text .klein { display: block; }
.schalter { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; border-radius: 13px;
            background: var(--cm-linie); transition: background .15s; }
.schalter-knopf { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
                  background: var(--cm-karte); transition: transform .15s; }
.schalter-an, .schalter-huelle input:checked + .schalter { background: var(--cm-orange); }
.schalter-an .schalter-knopf, .schalter-huelle input:checked + .schalter .schalter-knopf { transform: translateX(18px); }
.schalter-huelle { display: inline-flex; align-items: center; gap: .75rem; margin: 0; cursor: pointer; }
.schalter-huelle input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.schalter-huelle input:focus-visible + .schalter { outline: 2px solid var(--cm-orange); outline-offset: 2px; }
.rm-kopf { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.rm-form > label { display: block; margin-top: .9rem; }
.rm-form .rm-liste { margin-bottom: .5rem; }
.rm-diff { margin: .75rem 0; padding: .7rem .9rem; border-radius: var(--radius); background: var(--cm-einlage);
           border: 1px solid var(--cm-linie); font-size: .9rem; }
.rm-diff-aendert { background: var(--cm-orange-hell); border-color: var(--cm-orange); }
.rm-diff ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.rm-bestaetigen { margin-top: 1rem; padding: .75rem .9rem; border: 1px solid var(--cm-linie); border-radius: var(--radius); }
.rm-bestaetigen-schalter { display: flex; align-items: flex-start; }
.rm-bestaetigen-schalter .schalter { margin-top: .15rem; }
/* Freigabewege: die Stufenzahl als Marke am Zeilenende - eine Zahl, ein Wort. */
.fw-stufen { display: inline-grid; place-items: center; flex: none; min-width: 3.4rem; padding: .3rem .5rem;
             border-radius: var(--radius); background: var(--cm-orange-hell); color: var(--cm-tinte);
             font-size: 1.25rem; font-weight: 800; line-height: 1; }
.fw-stufen small { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                   color: var(--cm-text); }
.fw-form select[multiple] { min-height: 7rem; }
/* Regeln: zuerst die Zahl und der Satz, dann die Werte in Abschnitten. Die Herkunft
   ist ein Wort an der Zeile; der vollstaendige Nachweis bleibt eingeklappt darunter. */
.rg-stand { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rg-satz { margin: 0; font-size: 1.05rem; font-weight: 650; }
.rg-marke { display: inline-grid; place-items: center; flex: none; min-width: 4.2rem; padding: .35rem .6rem;
            border-radius: var(--radius); background: var(--cm-orange-hell); color: var(--cm-tinte);
            font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.rg-marke small { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                  color: var(--cm-text); }
.rg-marke-offen { box-shadow: inset 0 0 0 2px var(--cm-warn); }
.rg-gruppe + .rg-gruppe { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--cm-linie); }
.rg-gruppe-titel { margin: 0; font-size: .98rem; }
.rg-gruppe > .klein { margin: .1rem 0 .55rem; }
.rg-woher { display: inline-block; margin-left: .5rem; padding: .02rem .45rem; font-size: .72rem;
            border: 1px solid var(--cm-linie); border-radius: 999px; color: var(--cm-leise); white-space: nowrap; }
.rg-woher-eigen { border-color: var(--cm-orange); color: var(--cm-tinte); }
/* Paket E (HR-21): ein nicht eingestellter Standard ist der Normalfall - leise, ohne Kasten. */
.rg-standard { margin-left: .5rem; font-size: .75rem; font-style: italic; color: var(--cm-leise); }
.rg-datum { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; margin: 0; }
.rg-datum label { margin: 0; }
/* Regelseite der Person (Paket E): Klartext oben, Abschnitte als Klappen mit Kurzzeile. */
.rg-kopf { display: grid; gap: .35rem; }
.rg-kopf p { margin: 0; }
.rg-kopfzeile { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1rem; }
.rg-andertag > summary { cursor: pointer; color: var(--cm-link); font-size: .88rem; font-weight: 600; }
.rg-andertag[open] > summary { margin-bottom: .5rem; }
.rg-name { font-size: 1.35rem; font-weight: 750; line-height: 1.2; }
.rg-zusammenfassung { padding: .6rem .8rem; border-left: 3px solid var(--cm-orange); background: var(--cm-einlage);
                      border-radius: 0 var(--radius) var(--radius) 0; font-weight: 550; overflow-wrap: anywhere; }
.rg-kopf .rg-satz { margin-top: .35rem; font-size: .95rem; }
.rg-klappe > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; align-items: baseline;
                       cursor: pointer; list-style: none; min-height: var(--ziel, 44px); padding-block: .45rem; }
.rg-klappe > summary::-webkit-details-marker { display: none; }
.rg-klappe > summary::after { content: "›"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--cm-leise);
                              font-size: 1.1rem; transition: transform .15s; }
.rg-klappe[open] > summary::after { transform: rotate(90deg); }
.rg-klappe .rg-gruppe-titel, .rg-kurz { grid-column: 1; }
.rg-kurz { color: var(--cm-leise); font-size: .85rem; overflow-wrap: anywhere; }
.rg-klappe[open] > .klein { margin: .1rem 0 .55rem; }
.rg-gruppe.rg-klappe + .rg-gruppe.rg-klappe { margin-top: 0; padding-top: 0; }
.rg-klappe[open] { padding-bottom: .6rem; }
details.karte > summary { cursor: pointer; }
details.karte[open] > summary { margin-bottom: .75rem; }
/* Teams als Brett: Spalten sind Teams, Karten sind Personen - gegliedert wie im Organigramm,
   eine Gesellschaft auf einmal, Karten einzeilig (Nutzer 26.09.2026: „fürchterlich" - vorher
   11 000 px lang mit einem Formular an jeder Karte). Die Spalte, über der eine Karte schwebt,
   wird orange umrandet - das ist die ganze Rückmeldung, die es braucht. */
.teamsbrett { margin-bottom: 2rem; }
.teams-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin: 0 0 1.1rem; }
.teams-werkzeug p { margin: 0; flex: 1 1 22rem; max-width: 70ch; }
.teams-filter { flex: 0 1 20rem; margin: 0; }
.teamgruppe { margin: 0 0 1.4rem; }
.teamgruppe-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; margin: 0 0 .6rem;
                   padding-bottom: .35rem; border-bottom: 2px solid var(--cm-linie); }
.teamgruppe-kopf h2 { margin: 0; font-size: 1.05rem; color: var(--cm-tinte); }
.teamgruppe-ohne .teamgruppe-kopf { border-bottom-color: var(--cm-warn); }
.teamspalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .8rem;
               align-items: start; }
.teamspalte { background: var(--cm-karte); border: 1px solid var(--cm-linie); border-radius: var(--radius); padding: .6rem; }
.teamspalte-ohne { border-style: dashed; }
.teamspalte-inaktiv { opacity: .6; }
.teamspalte.ziel { background: var(--cm-orange-hell); outline: 2px dashed var(--cm-orange); outline-offset: -2px; }
.teamspalte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0 0 .4rem;
                   padding: 0 .15rem .4rem; border-bottom: 1px solid var(--cm-linie); }
.teamspalte-kopf h3 { margin: 0; font-size: .95rem; color: var(--cm-tinte); overflow-wrap: anywhere; }
.teamspalte-zahl { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--cm-leise); }
.teamspalte-weg, .teamspalte-leitung { flex-basis: 100%; margin: 0; font-size: .78rem; color: var(--cm-leise); }
.teamkarten { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.teamkarte { display: flex; align-items: center; gap: .5rem; min-height: 40px; padding: .25rem .4rem;
             border-radius: calc(var(--radius) - 2px); }
.teamkarte:hover { background: var(--cm-einlage); }
.teamkarte:has(input:checked) { background: var(--cm-orange-hell); }
.teamkarte[draggable=true] { cursor: grab; }
.teamkarte.fliegt { opacity: .45; }
.teamkarte input[type=checkbox] { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; accent-color: var(--cm-orange); }
.teamkarte .kuerzel { width: 28px; height: 28px; font-size: .7rem; }
.teamkarte-name { flex: 1 1 auto; min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
.teamkarte-nr { flex: none; font-size: .75rem; color: var(--cm-leise); font-variant-numeric: tabular-nums; }
.teamkarten .leerzustand { padding: .4rem; }
/* Ein großes Team (26 Leute in der Produktion) wäre allein 1 200 px hoch - es nimmt zwei Spuren
   und legt seine Karten nebeneinander. Erst ab 48rem, darunter gibt es nur eine Spur. */
@media (min-width: 48rem) {
  .teamspalte-gross { grid-column: span 2; }
  /* Spaltensatz statt Raster: Das Alphabet läuft erst hinunter, dann hinüber. */
  .teamspalte-gross .teamkarten { display: block; columns: 2; column-gap: .6rem; }
  .teamspalte-gross .teamkarte { break-inside: avoid; margin-bottom: .15rem; }
}
/* Ein Formular für alle, unten angeklebt - erreichbar auch unter der vierzigsten Karte. */
.teams-aktion { position: sticky; bottom: .75rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
                gap: .5rem .8rem; margin-top: 1rem; padding: .6rem .8rem; background: var(--cm-karte);
                border: 1px solid var(--cm-linie); border-top: 3px solid var(--cm-orange); border-radius: var(--radius);
                box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--cm-kopf) 45%, transparent); }
.teams-gewaehlt { font-weight: 650; color: var(--cm-tinte); }
.teams-aktion select { flex: 1 1 16rem; min-width: 0; margin: 0; }
/* Am Handy: über der unteren Leiste statt dahinter, eine Zeile für Ziel und Knopf - und
   angeklebt erst, wenn jemand angekreuzt ist (sonst deckte sie ein Viertel des Bildschirms zu). */
@media (max-width: 1023px) {
  .teams-aktion { bottom: calc(60px + env(safe-area-inset-bottom, 0px) + .5rem); padding: .5rem .6rem; gap: .4rem .5rem; }
  .teams-gewaehlt { flex-basis: 100%; font-size: .9rem; }
  .teams-aktion select { flex: 1 1 8rem; }
  .teams-aktion[data-leer] { position: static; }
}

/* Schmale Fenster: Die Leiste legt sich als Streifen über den Inhalt. Ein
   15rem-Band neben 375px Anzeigebreite wäre die halbe Seite. */
@media (max-width: 1023px) {
  /* Die Zeile mit dem Zeichen wächst nicht mit: Auf kurzen Seiten (z. B. „Deine Monate") verteilte das Raster die
     Resthöhe sonst auch auf die Schiene - ein dunkler Kopf von 158 statt 56 px (Paket A, 06.11.2026). */
  .rahmen { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Am Handy ist die Schiene nur noch die Zeile mit dem Zeichen. Die Navigation selbst
     liegt unten in der Leiste (drei Ziele) und hinter „Mehr" — dort erscheint die
     Schiene als Überlagerung, sobald sie angesprungen ist. Bisher stand die ganze
     Navigation umgebrochen über dem Inhalt und nahm ein Drittel des Schirms. */
  .schiene { flex-direction: row; align-items: center; gap: .5rem; padding: .25rem .5rem; }
  .schiene .marke { min-height: 48px; border-bottom: 0; padding: .25rem .5rem; }
  .schiene nav, .schiene-fuss, .schiene-schliessen { display: none; }
  .schiene:target { position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: stretch;
                    gap: 0; padding: 0; overflow-y: auto; }
  .schiene:target .marke { border-bottom: 1px solid var(--cm-kopf-linie); padding: .5rem 1rem; }
  .schiene:target .schiene-schliessen { display: inline-flex; align-items: center; gap: .5rem; position: absolute;
                                       top: .55rem; right: .75rem; min-height: 44px; padding: .4rem .7rem;
                                       color: var(--cm-kopf-leise); text-decoration: none; font-size: .9rem; }
  .schiene:target nav { display: grid; }
  .schiene:target .schiene-fuss { display: block; }
  .schiene:target ~ .leiste { display: none; }
  .inhalt { padding: 1.1rem .9rem 2rem; }
  /* Platz für die Leiste, samt der Kante unter dem Bildschirmrand beim iPhone. */
  .rahmen:not(.rahmen-allein) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .leiste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0;
            bottom: 0; z-index: 20; min-height: 60px; padding-bottom: env(safe-area-inset-bottom, 0px);
            background: var(--cm-karte); border-top: 1px solid var(--cm-linie); }
  .leiste-punkt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
                  min-height: 60px; padding: .4rem .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .01em;
                  color: var(--cm-leise); text-decoration: none; }
  .leiste-zeichen { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
                    stroke-linecap: round; stroke-linejoin: round; }
  .leiste-punkt { position: relative; }
  /* Paket C (LE-11): offene Freigaben als Zahl am Symbol. */
  .leiste-zahl { position: absolute; top: .35rem; left: calc(50% + 4px); min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
                 border-radius: 999px; background: var(--cm-orange); color: var(--cm-knopf-text); font-size: .66rem; font-weight: 800;
                 line-height: 1.15rem; text-align: center; }
  .leiste-punkt[aria-current=page] { color: var(--cm-tinte); }
  .leiste-punkt[aria-current=page] .leiste-zeichen { stroke: var(--cm-orange); stroke-width: 2.2; }
  /* Zusammenfassungszeilen: „Meine offenen Anträge — 2 Anträge ›“. Die Startseite wird
     am Handy kurz, jede Zeile ist ein Sprung; die vollen Listen bleiben dem Schreibtisch. */
  .nur-schreibtisch, .inhalt-gesamt .alltag-aktionen.nur-schreibtisch { display: none; }
  .nur-handy { display: flex; }
  .zeile-zusammenfassung { align-items: center; gap: .75rem; min-height: 56px; padding: .7rem 1rem;
                           margin: 0; background: var(--cm-karte); border: 1px solid var(--cm-linie);
                           border-radius: var(--radius); color: var(--cm-tinte); font-weight: 650;
                           text-decoration: none; }
  .zusammenfassung-zahl { margin-left: auto; font-weight: 500; font-size: .9rem; color: var(--cm-leise);
                          white-space: nowrap; }
  .zusammenfassung-pfeil { font-size: 1.5rem; line-height: 1; color: var(--cm-leise); }
}

/* ── Anmeldung ───────────────────────────────────────────────────────────
   Orange Seite, Karte mit dunklem Markenkopf und runder Kante, großer Knopf. */
.anmeldung { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center;
             padding: 2rem 1rem; background-color: var(--cm-anmelde-rost);
             background-image: linear-gradient(170deg, var(--cm-anmelde-hell) 0%, var(--cm-anmelde-orange) 32%,
                                               var(--cm-anmelde-rost) 62%, var(--cm-anmelde-tief) 100%); }
.anmelde-huelle { width: 100%; max-width: 440px; }
.anmelde-karte { background: var(--cm-karte); color: var(--cm-text); border-radius: 16px; overflow: hidden;
                 box-shadow: 0 30px 70px rgba(40, 15, 0, .5); }
.anmelde-kopf { position: relative; text-align: center; padding: 1.75rem 1.5rem 2rem; background: var(--cm-kopf); color: var(--cm-kopf-text); }
.anmelde-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 14px;
                       background-color: var(--cm-karte); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.anmelde-kopf .marke-zeichen { border-radius: 22%; margin-bottom: .7rem; }
.wortmarke { margin: 0; font-size: 1.7rem; font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.unterzeile { margin: .45rem 0 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cm-kopf-leise); }
.anmelde-inhalt { padding: 1rem 2rem 2rem; }
.anmelde-inhalt h1 { font-size: 1.15rem; margin: 0 0 1rem; }
.anmelde-firma { margin: 0 0 .15rem; font-size: .8rem; color: var(--cm-leise); }
.feld-rahmen { position: relative; display: block; margin-top: .3rem; }
.feld-rahmen input { margin-top: 0; min-height: 52px; padding-left: 2.8rem; font-size: 16px; border-width: 2px; }
.feld-zeichen { position: absolute; left: .95rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px;
                fill: none; stroke: var(--cm-leise); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.feld-rahmen:focus-within .feld-zeichen { stroke: var(--cm-link); }
/* Beschriftung auf dem Rahmen statt darüber — dieselbe Bauform wie beim
   Schwesterprodukt. Der Chip trägt die Kartenfarbe und schneidet damit den Rand,
   sonst läge die Linie mitten durch die Schrift. */
.feld-schwebend { margin-top: 1.5rem; }
.feld-name { position: absolute; top: -.55rem; left: .8rem; z-index: 1; padding: 0 .35rem;
             background: var(--cm-karte); font-size: .74rem; font-weight: 650; color: var(--cm-leise); }
.feld-rahmen:focus-within .feld-name { color: var(--cm-link); }
.anmelde-zeile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
                 gap: .5rem 1rem; margin-top: 1.1rem; }
.ankreuz { display: flex; align-items: center; gap: .55rem; font-size: .9rem; cursor: pointer; }
.ankreuz input { width: 18px; height: 18px; min-height: 0; margin: 0; flex: none; accent-color: var(--cm-orange); }
.anmelde-fussnote { margin: .45rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--cm-leise); }
.anmelde-inhalt .knopf { min-height: 50px; margin-top: .9rem; font-size: 1rem; }
/* „Passwort vergessen?" und „Zurück zur Anmeldung": in Linkfarbe - Orange ist nie Schrift. */
.anmelde-link { font-size: .9rem; font-weight: 600; }
/* Rechts neben „Angemeldet bleiben"; bricht die Zeile am Handy um, bleibt es rechts. Unten derselbe
   Abstand wie das Label daneben - sonst säße der Link 6 px tiefer als das Häkchen. */
.anmelde-zeile .anmelde-link { margin: 0 0 .75rem auto; }
.anmelde-zurueck { margin: 1rem 0 0; text-align: center; }
.anmelde-inhalt a.knopf { display: flex; align-items: center; justify-content: center; }
.anmelde-fuss { margin: 1.25rem 0 0; text-align: center; font-size: .78rem; line-height: 1.7; color: var(--cm-anmelde-fuss); }
.anmelde-fuss span { display: block; }
/* Steht versteckt da und wird erst sichtbar, wenn der Browser die Installation
   auch anbietet — ein Knopf ins Leere wäre eine Attrappe. */
.anmelde-installieren { display: block; margin: .35rem auto 0; padding: .2rem .3rem; border: 0; background: none;
                        font: inherit; font-size: .78rem; color: var(--cm-anmelde-fuss); text-decoration: underline;
                        text-underline-offset: .18em; cursor: pointer; }
.anmelde-installieren[hidden], .anmelde-hinweis[hidden] { display: none; }
@media (max-width: 480px) { .anmelde-inhalt { padding: 1rem 1.25rem 1.5rem; } }

/* AP06: tatsächlicher Verlauf, ohne vorgetäuschte Soll- oder Kontobewertung. */
.zeit-app { width: 100%; min-width: 0; margin: 1rem 0; }
.zeit-app h2 { color: var(--cm-tinte); font-size: 1.2rem; margin: 0 0 .75rem; }
.zeit-app h3 { color: var(--cm-tinte); font-size: 1rem; }
.zeit-kopf, .zeit-werkzeuge { display: flex; align-items: center; justify-content: space-between;
                             flex-wrap: wrap; gap: .75rem; }
.zeit-status { color: var(--cm-text); font-weight: 600; }
.zeit-zahl { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cm-tinte); }
.zeit-jetzt { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .9rem; margin: .4rem 0 1rem; }
.zeit-zahl-gross { font-size: clamp(2.4rem, 12vw, 3.2rem); line-height: 1; font-weight: 700;
                   font-variant-numeric: tabular-nums; color: var(--cm-tinte); }
.zeit-jetzt .leise { font-weight: 400; }
/* Der Tag als Kachelband statt als Fließtext: Arbeit und Pause sind die zwei Zahlen, die
   man beim Hinsehen sucht. Die Beschriftung gehört über die Zahl — im Markup folgt sie ihr,
   deshalb `column-reverse` statt einer zweiten Fassung der Vorlage. */
.zeit-zahlen, .zahlenband { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
               gap: 1px; background: var(--cm-linie); border: 1px solid var(--cm-linie);
               border-radius: var(--radius); overflow: hidden; margin: .9rem 0; }
/* Eine Kachel ist kein Absatz: Ohne max-width: none faellt sie unter die 85-Zeichen-Grenze
   fuer Fliesstext und laesst rechts in ihrer Spur eine Luecke stehen. */
.zeit-zahlen > p, .zahlenband > p { display: flex; flex-direction: column-reverse; gap: .1rem; margin: 0; max-width: none; padding: .8rem 1rem;
                   background: var(--cm-karte); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
                   text-transform: uppercase; color: var(--cm-leise); }
.zeit-zahlen strong, .zahlenband strong { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
                      text-transform: none; color: var(--cm-tinte); font-variant-numeric: tabular-nums; }
/* Die Bewertungszeile schließt unten an das Band an: eine Aussage über den Tag, keine dritte Kachel. */
.zeit-saldo { margin: -.9rem 0 .9rem; padding: .7rem 1rem; background: var(--cm-einlage);
              border: 1px solid var(--cm-linie); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
              font-size: .85rem; color: var(--cm-leise); }
.zeit-saldo .zeit-zahl { font-size: 1.15rem; margin-right: .35rem; }
/* Der Verlauf als Zeitstrahl: ein Punkt je Ereignis, eine Linie dazwischen. Vorher stand jede
   Zeile gleich schwer da und die Rohzeit lief quer durchs Bild. */
.zeit-ereignisse { list-style: none; margin: .5rem 0 0; padding: 0; }
/* Punkt UND Liniensegment gehören zur Zeile selbst. Lägen sie an der Liste, müsste ihr
   Abstand zur Zeile nachgerechnet werden — und stünde beim ersten Schriftgrad daneben. */
.zeit-ereignis { position: relative; padding: .3rem 0 .3rem 1.9rem; color: var(--cm-text); overflow-wrap: anywhere; }
.zeit-ereignis::before { content: ""; position: absolute; left: .19rem; top: .62rem; width: .62rem; height: .62rem;
                         border-radius: 50%; background: var(--cm-karte); border: 2px solid var(--cm-salbei); z-index: 1; }
.zeit-ereignis::after { content: ""; position: absolute; left: calc(.5rem - 1px); top: 1.3rem; bottom: -.3rem;
                        width: 2px; background: var(--cm-linie); }
.zeit-ereignis:last-child::after { display: none; }
.zeit-ereignis-start::before, .zeit-ereignis-fortsetzung::before { border-color: var(--cm-lauf); }
.zeit-ereignis-ende::before { border-color: var(--cm-tinte); }
.zeit-ereignis-pause::before { border-color: var(--cm-orange); }
.zeit-ereignis strong { color: var(--cm-tinte); }
.zeit-ereignis time { color: var(--cm-text); font-variant-numeric: tabular-nums; }
/* Was nicht zählt (doppelt gedrückt, Ende ohne Beginn), steht leise da: Es ist Beleg, keine Warnung.
   Sechsmal rot „widerspricht dem Zustand" (06.10.2026) sah aus, als wäre der Tag kaputt. */
.zeit-ereignis-zaehlt-nicht::before { border-color: var(--cm-linie); }
.zeit-ereignis-zaehlt-nicht strong, .zeit-ereignis-zaehlt-nicht time { color: var(--cm-leise); font-weight: 500; }
.zeit-zaehlt-nicht { margin-left: .5rem; font-size: .78rem; color: var(--cm-leise); }
/* Die Rohzeit bleibt lesbar, aber sie ist der Beleg und nicht die Aussage. */
.zeit-roh { display: block; font-size: .68rem; opacity: .8; }
/* Name, Kürzel und Personalnummer gehören in EINE Zelle: In der Tabelle sucht man die
   Person, nicht die Spalte. */
.person-zelle { display: flex; align-items: center; gap: .6rem; }
.person-zelle .kuerzel { width: 30px; height: 30px; font-size: .72rem; }
.person-zelle .klein { display: block; }
/* Die Woche als Streifen: sieben gleich breite Felder, heute mit orangem Fuß. Am Handy
   vier je Zeile — sieben wären dort 45 px breit und die Zahl bräche um. */
.zeit-woche { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px;
              margin: .9rem 0; padding: 0; background: var(--cm-linie); border: 1px solid var(--cm-linie);
              border-radius: var(--radius); overflow: hidden; }
.zeit-wochentag { display: grid; gap: .1rem; align-content: start; padding: .6rem .5rem .7rem;
                  background: var(--cm-karte); text-align: center; }
.zeit-wochentag__tag { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                       color: var(--cm-leise); }
.zeit-wochentag__datum { font-size: .7rem; color: var(--cm-leise); }
.zeit-wochentag strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--cm-tinte); }
/* Heute = orange Linie unten, keine Fläche (05.11.2026). Gewählt = schwarz, siehe alltag.css. */
.zeit-wochentag.ist-heute { background: var(--cm-karte); box-shadow: inset 0 -3px 0 var(--cm-orange); }
.zeit-wochentag .balken { margin-top: .3rem; }
@media (max-width: 640px) { .zeit-woche { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Mein Tag: Hauptsache links, Nebensachen rechts. Darunter stehen sie untereinander. */
/* ── Reiter ───────────────────────────────────────────────────────────────
   Eine Verwaltungsseite mit fuenf Karten untereinander ist eine Bildlaufstrecke.
   Die Reiter sind echte Links mit `?reiter=`, keine Umschalterei im Browser:
   So funktioniert die Seite auch ohne Skript, ist verlinkbar, und der Server
   schickt nur, was gebraucht wird. */
.reiter { display: flex; gap: .2rem; margin: 0 0 1.4rem; overflow-x: auto;
          overflow-y: hidden; scrollbar-width: none;
          border-bottom: 1px solid var(--cm-linie-stark); }
.reiter::-webkit-scrollbar { display: none; }
.reiter a { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
            padding: .7rem .9rem; margin-bottom: -1px; text-decoration: none; font-weight: 600;
            color: var(--cm-leise); border-bottom: 2px solid transparent; }
.reiter a:hover { color: var(--cm-tinte); }
.reiter a[aria-current] { color: var(--cm-tinte); border-bottom-color: var(--cm-orange); }
.zaehler { border-radius: 999px; padding: .05rem .45rem; font-size: .78rem; font-weight: 700;
           background: var(--cm-einlage); color: var(--cm-leise); }
.reiter a[aria-current] .zaehler { background: var(--cm-orange); color: var(--cm-knopf-text); }

/* ── Kartenkopf mit Nebenaktion ──────────────────────────────────────────
   Titel links, darunter ein Satz, der die Zahl einordnet; rechts die eine
   Handlung, die zu dieser Karte gehoert. Vorher lag sie als Fliesstextlink
   unter der Tabelle und wurde dort uebersehen. */
.kartenkopf { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
              margin: 0 0 .9rem; }
.kartenkopf h2 { margin: 0; }
.kartenkopf p { margin: .15rem 0 0; }
.kartenkopf .nebenaktion { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
                           color: var(--cm-link); text-decoration: none; font-weight: 600;
                           font-size: .92rem; white-space: nowrap; }
.kartenkopf .nebenaktion:hover { text-decoration: underline; }
/* Der Kopfknopf kann zugleich ein Aufklapper sein. Zugeklappt steht er rechts,
   aufgeklappt nimmt das Formular die ganze Breite - sonst quetscht es sich in
   die Ecke, in der der Knopf stand. */
.kartenkopf > details { margin-left: auto; }
.kartenkopf > details > summary { list-style: none; cursor: pointer; }
.kartenkopf > details > summary::-webkit-details-marker { display: none; }
.kartenkopf > details[open] { flex: 1 0 100%; margin-left: 0; }
/* Der Name in einer Tabellenzeile fuehrt auf die Seite dieses Eintrags. Kein
   unterstrichener Fliesstextlink - die Zeile liest sich als Liste, nicht als Text. */
.zeilenname { color: var(--cm-tinte); text-decoration: none; }
.zeilenname:hover { color: var(--cm-link); text-decoration: underline; }
.zeilentat { white-space: nowrap; }
/* Kopf der Seite EINER Gesellschaft: Kachel, Name, eine Zeile mit den Eckdaten. */
.firmenkopf__titel { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.firmenkopf__titel h1 { margin: 0 0 .2rem; }
.firmenkopf__titel p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.firmenkopf__titel .marke-chip { margin: 0; }
.initialen-gross { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; border-radius: 14px; }
/* Kachel mit hochgeladenem Logo: weisse Flaeche mit Kante, das Logo passt sich ein,
   ohne verzerrt oder beschnitten zu werden - quer und hoch gleichermassen. */
.firmenlogo { background: var(--cm-karte); border: 1px solid var(--cm-linie-stark); padding: 3px;
              overflow: hidden; }
.firmenlogo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.initialen-gross.firmenlogo { padding: 5px; }
.logo-vorschau { margin: 0 0 .9rem; }
.logo-vorschau img { display: block; max-width: 100%; max-height: 120px; object-fit: contain;
                     padding: .6rem; border: 1px solid var(--cm-linie-stark); border-radius: var(--radius);
                     background: var(--cm-karte); }
.logo-entfernen { margin-top: .4rem; }
/* Ein Zwischenschritt in der Brotkrume ist ein Link - leise wie der Rest des Weges. */
.brotkrume a { color: inherit; text-decoration: none; }
.brotkrume a:hover { color: var(--cm-link); text-decoration: underline; }
/* `max-width: none`: Absaetze mit .leise haben sonst eine Lesebreite von 85 Zeichen,
   und die Linie darueber endete mitten in der Karte. */
.karte-fussnote { margin: .9rem 0 0; padding-top: .8rem; border-top: 1px solid var(--cm-linie);
                  max-width: none; }

/* ── Zeilenaktion ────────────────────────────────────────────────────────
   Der Weg AUS einer Zeile heraus, rechts buendig. Kein Knopf: Es ist ein Gang
   zu einer anderen Seite, keine Entscheidung. */
.zeilentat { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
             color: var(--cm-tinte); text-decoration: none; font-weight: 600; }
.zeilentat:hover { color: var(--cm-link); }
.rechtsbuendig { text-align: right; }
/* Mehrere Knöpfe am Ende einer Tabellenzeile: nebeneinander, rechtsbündig, umbrechen erst als Ganzes. */
.zeilen-knoepfe { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.tabelle .zeilen-knoepfe .knopf { white-space: nowrap; }  /* stärker als .inhalt-gesamt .knopf */

/* ── Runde Symbolflaeche und Fortschritt ─────────────────────────────────
   Fuer die Spalte rechts: ein Zeichen, ein Satz, ein Balken, eine Handlung. */
.rundzeichen { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%;
               background: var(--cm-orange-hell); color: var(--cm-link); margin-bottom: .9rem; }
.rundzeichen svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2;
                   stroke-linecap: round; stroke-linejoin: round; }
/* ── Leerzustand ─────────────────────────────────────────────────────────
   Wenn eine Seite (noch) nichts zu zeigen hat (24.09.2026). Vorher stand ein
   einzelner grauer Satz auf weisser Flaeche - das sah aus wie ein Fehler, nicht
   wie ein Zustand. Jetzt: Zeichen, Titel, Satz, mittig, wie eine Karte, die
   ABSICHTLICH leer ist. Dasselbe Bauteil in Django-Vorlagen und in „Meine Zeit". */
.leerzustand { display: grid; justify-items: center; text-align: center; gap: .35rem;
               padding-block: 2.2rem 2.4rem; }
.leerzustand .rundzeichen { margin-bottom: .55rem; }
.leerzustand h2 { margin: 0; font-size: 1.12rem; letter-spacing: -.01em; color: var(--cm-tinte); }
.inhalt-gesamt .leerzustand p { margin: 0; max-width: 52ch; }
.leerzustand .knopf { margin-top: .9rem; }
/* Innerhalb einer Karte (die schon eine Überschrift hat): dasselbe Zeichen und derselbe Satz,
   ohne eigenen Rahmen (kern/_leer.html mit innen=True). */
.leerzustand-innen { padding-block: 1.1rem 1.3rem; }
.leerzustand-innen .rundzeichen { width: 2.4rem; height: 2.4rem; margin-bottom: .35rem; }
.leerzustand-titel { margin: 0; font-weight: 650; color: var(--cm-tinte); }
/* Nichts zu tun = eine Zeile mit Haken (UX-Prüfung 05.11.2026, LE-09/HR-23). */
.leerzustand-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .65rem; margin: 0 0 1.25rem; }
.leerzustand-zeile .rundzeichen { width: 2rem; height: 2rem; margin: 0; flex: none; }
.leerzustand-zeile .rundzeichen svg { width: 16px; height: 16px; }
.leerzustand-zeile strong { color: var(--cm-tinte); }
.erfassung-einladen { margin: 1.4rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--cm-linie); }
/* Felder eines Formulars in Spalten, wenn die Karte breit ist (Person anlegen, 27.09.2026). */
.formfelder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: 0 1.25rem; margin-bottom: .5rem; }
.inhalt-gesamt .formfelder > label > :where(input, select, textarea) { width: 100%; max-width: 100%; }
.formfelder + .etikett, form > .formfelder + h2 { margin-top: 1rem; }
.liste > li:has(> .leerzustand-innen), .tabelle td:has(> .leerzustand-innen) { border-bottom: 0; }
.fortschritt { display: block; height: .45rem; border-radius: 3px; overflow: hidden;
               background: var(--cm-einlage); margin: .5rem 0 1rem; }
.fortschritt > i { display: block; height: 100%; background: var(--cm-orange); }
.rail-knopf { width: 100%; justify-content: center; }
.fussnote { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 0; padding-top: .9rem;
            border-top: 1px solid var(--cm-linie); color: var(--cm-leise); font-size: .88rem; }

/* Eine Zeile gleich hoher Karten (Verwaltung, 27.09.2026): nebeneinander, soweit Platz ist,
   Ober- und Unterkante je Zeile gleich. */
.karten-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem; margin-bottom: 1.25rem; }
.inhalt-gesamt .karten-reihe > .karte { margin: 0; }
.platz { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.platz > * { min-width: 0; }
/* 2,3 : 1 statt 1,9 : 1 - die rechte Spalte fuehrt, die linke arbeitet. Bei 1440 px
   blieben links zu wenig Pixel, und Firmennamen brachen dreimal um. */
@media (min-width: 1024px) { .platz { grid-template-columns: minmax(0, 2.3fr) minmax(17rem, 1fr); } }
.zeit-aktionen { display: flex; gap: .6rem; flex-wrap: wrap; margin: .75rem 0; }
.zeit-app button:disabled { cursor: wait; }
/* Im hellen Inhalt ist der „leise" Knopf ein Umriss-Knopf wie .knopf-zweit. */
.zeit-app .knopf-leise { color: var(--cm-tinte); background: transparent; border: 1.5px solid var(--cm-orange); }
.zeit-app .knopf-leise:hover { color: var(--cm-tinte); background: var(--cm-orange-hell); }
.zeit-formular { display: grid; gap: .75rem; }
.zeit-feld { min-width: 0; margin-bottom: .6rem; }
.zeit-app input, .zeit-app textarea, .zeit-app select { max-width: 100%; font: inherit; min-height: var(--ziel, 44px);
    padding: .6rem; border: 1px solid var(--cm-linie); border-radius: var(--radius);
    color: var(--cm-text); background: var(--cm-karte); }
.zeit-app textarea { display: block; width: 100%; min-height: 5rem; }
.zeit-app :focus-visible { outline: 2px solid var(--cm-orange); outline-offset: 3px; }

.zeit-chip { display: inline-flex; align-items: center; gap: .4em; border-radius: var(--radius); padding: .15rem .55rem;
             background: var(--cm-orange); color: var(--cm-knopf-text); font-size: .8rem; font-weight: 600; }
/* Eine Notiz ist keine Warnung. „Nur tatsächliche Erfassung“ im Warnkasten gewöhnt die
   Leute daran, Rot zu überlesen — dann fällt der echte Konflikt nicht mehr auf. */
.zeit-notiz { padding: .6rem .8rem; margin: .5rem 0; background: var(--cm-einlage); color: var(--cm-text);
              border-left: 3px solid var(--cm-salbei); border-radius: 0 var(--radius) var(--radius) 0;
              font-size: .88rem; }
.zeit-konflikt { padding: .75rem; margin: .5rem 0; background: var(--cm-karte); color: var(--cm-text);
                 border: 1px solid var(--cm-linie-stark); border-top: 3px solid var(--cm-warn-linie);
                 border-radius: var(--radius); overflow-wrap: anywhere; }
.zeit-quittung { padding: .9rem; margin: .75rem 0; background: var(--cm-karte); color: var(--cm-text);
                border: 2px solid var(--cm-salbei); border-radius: var(--radius); overflow-wrap: anywhere; }
.zeit-gegenueber { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.zeit-korrekturen { display: grid; gap: 1rem; min-width: 0; width: 100%; }
.zeit-korrekturen > button { justify-self: start; }
.zeit-pruefkarte { min-width: 0; width: 100%; }
.zeit-pruefkarte > summary { display: flex; flex-wrap: wrap; gap: .5rem 1rem; cursor: pointer; padding: .5rem 0; }
.zeit-pruefkarte > summary::before { content: "▸"; }
.zeit-pruefkarte[open] > summary::before { content: "▾"; }
.zeit-pruefkarte-inhalt { display: grid; gap: 1rem; }
.zeit-pruefkarte-vergleich { min-width: 0; }
.zeit-pruefkarte .zeit-gegenueber > * { min-width: 0; overflow-wrap: anywhere; }
.zeit-tagespruefung-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem 1rem; margin-bottom: .75rem; }
.zeit-tagespruefung-kopf h3, .zeit-tagespruefung-kopf p { margin: 0; }
.zeit-tagespruefung-kopf p { color: var(--cm-leise); font-size: .85rem; }
.zeit-pruefkarte-inhalt > .zeit-notiz, .zeit-pruefkarte-inhalt > .zeit-konflikt { margin: 0; }
.zeit-pruefkarte-inhalt > .zeit-notiz p, .zeit-pruefkarte-inhalt > .zeit-konflikt p { margin: .3rem 0 0; }
.zeit-vergleich { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.zeit-vergleich caption { text-align: left; color: var(--cm-leise); font-size: .8rem; padding: .5rem 0 .8rem; }
.zeit-vergleich th, .zeit-vergleich td { text-align: left; padding: .8rem; vertical-align: middle; overflow-wrap: anywhere; border-bottom: 1px solid var(--cm-linie); }
.zeit-vergleich thead th { font-size: .75rem; color: var(--cm-leise); font-weight: 500; }
.zeit-vergleich thead th:first-child { width: 36%; }
.zeit-vergleich thead th:nth-child(3) { width: 2rem; padding-inline: 0; }
.zeit-vergleich small { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 400; }
.zeit-vergleich td time { font-size: 1rem; }
.zeit-vergleich .zeit-vergleich-geaendert { background: var(--cm-orange-hell); color: var(--cm-text); }
.zeit-vergleich-geaendert td time { font-size: clamp(1.2rem, 2vw, 1.85rem); line-height: 1.3; font-weight: 600; }
.zeit-vergleich-geaendert td:nth-child(2) time { font-weight: 400; }
.zeit-vergleich-unveraendert { color: var(--cm-leise); }
.zeit-vergleich-unveraendert th { font-weight: 500; }
.zeit-vergleich .zeit-vergleich-pfeil { padding-inline: 0; text-align: center; }
.zeit-pruefkarte-grund { overflow-wrap: anywhere; }
.zeit-pruefkarte-grund p { margin: .25rem 0 0; white-space: pre-wrap; }
.zeit-pruefkarte-nachweise { font-size: .85rem; overflow-wrap: anywhere; }
.zeit-pruefkarte-nachweise summary { cursor: pointer; min-height: var(--ziel); display: list-item; align-content: center; }
.zeit-pruefkarte-entscheidung { border-top: 1px solid var(--cm-linie); padding-top: 1rem; }
.zeit-pruefkarte-kommentar[hidden] { display: none; }
.zeit-pruefkarte-kommentar p { margin: .25rem 0; }
.zeit-pruefkarte-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.zeit-pruefkarte-fuss .zeit-aktionen { margin: 0; }
@media (max-width: 639px) {
  .zeit-vergleich th, .zeit-vergleich td { padding: .6rem .3rem; }
  .zeit-vergleich thead th:first-child { width: 33%; }
  .zeit-vergleich thead th:nth-child(3) { width: 1rem; }
  .zeit-vergleich th, .zeit-vergleich td, .zeit-vergleich small { font-size: .75rem; }
  .zeit-pruefkarte-fuss .zeit-aktionen { width: 100%; }
  .zeit-pruefkarte-fuss .zeit-aktionen button { flex: 1; }
}
.zeit-historie { margin-top: 1rem; }
.zeit-historie summary { cursor: pointer; padding: .5rem 0; min-height: var(--ziel-klein, 44px); }
.zeit-korrektur { padding: 1rem 0; border-top: 1px solid var(--cm-linie); }
.zeit-offener-tag { padding: .75rem 0; border-top: 1px solid var(--cm-linie); overflow-wrap: anywhere; }
.zeit-nachweis { display: block; color: var(--cm-text); background: var(--cm-orange-hell);
                 padding: .4rem .6rem; margin-top: .4rem; border-radius: var(--radius); overflow-wrap: anywhere; }
.zeit-nachtraege { list-style: none; padding: 0; margin: 0; }
.zeit-offline { background: var(--cm-offline-grund); color: var(--cm-offline-text); border: 2px dashed var(--cm-leise); }
/* Die EINE Ausnahme von der orangen Kartenlinie: Was nur auf dem Geraet liegt, ist
   noch nicht bestaetigt - rundum gestrichelt, auch oben. */
.inhalt-gesamt .karte.zeit-offline { border-top: 2px dashed var(--cm-leise); }
.zeit-offline h2, .zeit-offline .leise { color: var(--cm-offline-text); }
.zeit-offline li { padding: .7rem 0; overflow-wrap: anywhere; }
.zeit-offline small { display: block; }
/* Nur abgelehnte Nachträge übrig (07.10.2026): eine schlichte Zeile mit „Verwerfen", kein Puffer-Kasten. */
.zeit-abgelehnt h2 { font-size: 1rem; margin: 0 0 .4rem; }
.zeit-abgelehnt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.zeit-abgelehnt li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem;
  overflow-wrap: anywhere; }
.zeit-abgelehnt p { margin: .5rem 0 0; }
.zeit-nachtrag-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
                       gap: .75rem; min-width: 0; border: 1px solid var(--cm-linie); }
.zeit-nachtrag-felder .zeit-feld { display: grid; gap: .3rem; }

/* Arbeitsplatz, 22.09.2026: freigegebener Alltagsentwurf. Die Anmeldung und
 * das Terminal verwenden ihre eigene Hülle und behalten ihre Geometrie.
 * Keine neue Farbpalette, keine fachlichen Zustände allein durch Farbe. */
/* Dichte (Nutzer 27.09.2026: „die Menüpunkte links sind zu groß … allgemein alles groß … bissi dezenter
 * … so wie beim Fleetman"): am Schreibtisch 14 px und 38-px-Ziele wie Fleetman, am Handy 16 px und
 * 48-px-Ziele - dort tippt ein Daumen. Jede Höhe kommt aus --ziel/--ziel-klein, keine Regel erfindet
 * eine eigene. */
.oberflaeche { --radius: 9px; --ziel: 38px; --ziel-klein: 34px; font-size: 14px; line-height: 1.5; }
@media (max-width: 1023px) { .oberflaeche { --ziel: 48px; --ziel-klein: 44px; font-size: 16px; line-height: 1.55; } }
.oberflaeche .inhalt { padding-top: 2rem; }
.oberflaeche .karte { padding: 1.4rem; margin-bottom: 1.4rem; }
.oberflaeche .karte > .etikett:first-child,
.oberflaeche .karte > .zeile-kopf:first-child { margin: -1.4rem -1.4rem 1.2rem; padding: 1rem 1.4rem; }
.oberflaeche .etikett { font-size: 1rem; letter-spacing: -.01em; text-transform: none; }
.oberflaeche .knopf { display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; min-height: var(--ziel); text-align: center; }
.oberflaeche .kopf .knopf { min-height: var(--ziel-klein); }
.oberflaeche .glocke { width: var(--ziel-klein); height: var(--ziel-klein); }
.oberflaeche label { font-size: 1rem; }
.oberflaeche .nav-punkt { min-height: var(--ziel); font-size: .97rem; padding: .65rem .8rem; }
.oberflaeche .nav-zeichen { width: 20px; height: 20px; }
.oberflaeche .nav-gruppe { font-size: .75rem; padding-bottom: .65rem; }
.nav-ergaenzung { margin: .6rem 0 .2rem; border-top: 1px solid var(--cm-kopf-linie); }
.nav-ergaenzung > summary { padding: .75rem .8rem; min-height: var(--ziel); font-size: .85rem;
  cursor: pointer; color: var(--cm-kopf-leise); }
.nav-ergaenzung .nav-punkt { padding-left: 1.2rem; }
.oberflaeche :where(a, button, summary):focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 3px; }
.sprunglink { position: fixed; z-index: 100; top: .5rem; left: .5rem; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  padding: .8rem 1rem; background: var(--cm-karte); color: var(--cm-text); border: 2px solid var(--cm-link); }
.sprunglink:focus { clip-path: none; width: auto; height: auto; }
.arbeitsplatz-kopf { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .8rem 1.5rem; margin-bottom: 1.5rem; }
.arbeitsplatz-kopf .gruss { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: .15rem 0 .6rem; }
.arbeitsplatz-kopf .leise { margin: 0; font-size: 1rem; }
.arbeitsplatz-datum { margin: 0; font-size: .9rem; color: var(--cm-leise); }
.oberflaeche .platz { gap: 1.5rem; }
.oberflaeche .platz .zeit-app { margin-top: 0; }
.oberflaeche .kennzahlen { gap: .8rem; background: transparent; border: 0; overflow: visible; }
.oberflaeche .kennzahl { flex-basis: 100%; padding: 1.3rem; border: 1px solid var(--cm-linie); border-radius: var(--radius); }
.oberflaeche .kennzahl__name { font-size: .95rem; text-transform: none; letter-spacing: 0; }
.oberflaeche .kennzahl__wert { font-size: 2rem; margin: .4rem 0; }
.oberflaeche .kennzahl__hinweis, .oberflaeche .kennzahl__fuss { font-size: .85rem; }
.oberflaeche .kennzahl__zeichen { width: 2.6rem; height: 2.6rem; }
.oberflaeche .marke-chip, .oberflaeche .zeit-chip { border-radius: 999px; padding: .3rem .7rem; }
.oberflaeche .zeit-stempeln { border-top: 4px solid var(--cm-orange); }
.oberflaeche .zeit-stempeln .zeit-aktionen > .knopf { min-height: calc(var(--ziel) + 6px); }
.oberflaeche .zeit-jetzt { margin: 1rem 0 1.4rem; display: grid; gap: .7rem; }
.oberflaeche .zeit-zahl-gross { font-size: clamp(3rem, 7vw, 4.5rem); letter-spacing: -.06em; }
.oberflaeche .zeit-ereignis { padding-top: .7rem; padding-bottom: .7rem; }
.oberflaeche .zeit-ereignis::before { top: 1rem; }
.oberflaeche .zeit-ereignis::after { top: 1.65rem; bottom: -.7rem; }
.oberflaeche .zeit-ereignis time { display: inline-block; margin-left: .5rem; }
.oberflaeche .zeit-roh { font-size: .85rem; opacity: 1; }
.oberflaeche .zeit-werkzeuge { align-items: start; }
.zeit-ortszeit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.zeit-ortszeit input { width: 100%; min-width: 0; }
.zeit-korrektur-pruefung { padding: 1rem; border: 1px solid var(--cm-linie); border-radius: var(--radius); }
.oberflaeche summary { cursor: pointer; min-height: var(--ziel-klein); padding-top: .5rem; padding-bottom: .5rem; }
.oberflaeche .systemdetails .paare { margin-top: 1rem; }
@media (max-width: 1023px) {
  .oberflaeche .inhalt { padding-top: 1.25rem; }
  .oberflaeche .kennzahl { flex-basis: 18rem; }
  .oberflaeche .kopf { flex-wrap: wrap; gap: .5rem; }
  /* Paket F (AD-25): EINE Zeile statt eines dreizeiligen Firmennamens über dem Inhalt. */
  .oberflaeche .kopf .brotkrume { flex: 1 1 7rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .oberflaeche .kopf .wer, .oberflaeche .kopf .kuerzel { display: none; }
  .oberflaeche .kopf .kopfsuche { flex-basis: 100%; order: 1; }
  .oberflaeche .leiste-punkt { font-size: .78rem; }
}
@media (max-width: 480px) {
  .oberflaeche .inhalt { padding: 1rem .75rem 2rem; }
  .oberflaeche .karte { padding: 1rem; }
  .oberflaeche .karte > .etikett:first-child,
  .oberflaeche .karte > .zeile-kopf:first-child { margin: -1rem -1rem 1rem; padding: .9rem 1rem; }
  .oberflaeche .arbeitsplatz-kopf { gap: .75rem; }
  .oberflaeche .arbeitsplatz-kopf > .knopf { width: 100%; }
  .oberflaeche .kennzahl { padding: 1rem; }
  .oberflaeche .zeit-ereignis time { display: block; margin-left: 0; }
  .zeit-ortszeit { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .oberflaeche .zusammenfassung-zahl { white-space: normal; text-align: right; }
}
@media (max-width: 640px) {
  .zeit-gegenueber { grid-template-columns: minmax(0, 1fr); }
  .zeit-aktionen .knopf { flex: 1 1 9rem; }
  .zeit-feld input, .zeit-feld select { width: 100%; }
}

/* Freigegebene Alltagsseiten: kräftigere Flächen, feine Kanten und gezielte
 * Tiefe (Nutzer 22.09.). Die gemeinsame Hülle gilt jetzt auch in der Verwaltung.
 * Konten stehen direkt bündig zur Stempelkarte; der Gesamtlink steht darunter. */
/* EINE Inhaltsbreite fuer alle Seiten (Nutzer 23.09.2026: „ich will das bitte
 * ueberall gleich haben"). Vorher liefen drei Werte nebeneinander — 1760 fuer
 * die meisten Seiten, 1520 fuer Antraege, 1400 fuer Meine Zeit; bei 1920 px
 * Fensterbreite waren das gemessene 272 px Unterschied zwischen der breitesten
 * und der schmalsten Seite.
 *
 * Wer eine Seite wieder eigens verengen will, verschiebt damit nicht nur diese
 * Seite, sondern bricht den Vergleich zwischen allen. Der Waechter in
 * kern/tests_design_gesamt.py haelt das fest. */
.oberflaeche .inhalt-gesamt { max-width: none; padding-inline: clamp(1.25rem, 2.5vw, 3rem); }
.inhalt-arbeitsplatz .arbeitsplatz-kopf { margin-bottom: 2rem; }
.inhalt-arbeitsplatz .arbeitsplatz-kopf .gruss { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.045em; }
/* 23.09.2026: Hier stand ein eigener, einlagiger Schatten - er ersetzte den
   zweilagigen aus `.karte` und nahm jeder Seite der Oberflaeche die feine
   Nahkante. Jetzt dasselbe Token, und der Rand kommt aus --cm-linie-stark. */
.inhalt-gesamt .karte { box-shadow: var(--schatten-karte); }
.inhalt-arbeitsplatz .arbeitsplatz-konten { margin-bottom: 1.4rem; }
.inhalt-arbeitsplatz .arbeitsplatz-konten-fuss { display: flex; justify-content: flex-end; margin-top: .5rem; }
.inhalt-arbeitsplatz .arbeitsplatz-konten-fuss > a { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--ziel); }
.inhalt-gesamt .zeit-stempeln > .etikett { min-height: 3.65rem; }
/* ── Mein Tag, obere Reihe (Entwurf 24.09.2026) ─────────────────────────────
   Stempelkarte und Konten nebeneinander. Flex statt Raster: Fehlt eine Seite,
   nimmt die andere die ganze Breite.
   `flex-start`, NICHT `stretch` (Bild vom 24.09.2026): Links steht unter der
   Stempelkarte auch „Dein Tag im Verlauf". Mit `stretch` zogen sich die zwei
   Kontokacheln auf dessen ganze Höhe - fast 800 px weißer Kasten für drei
   Zeilen. Jede Seite ist so hoch wie ihr Inhalt. */
.arbeitsplatz-oben { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; margin-bottom: 1.25rem; }
.arbeitsplatz-stempel { flex: 1.15 1 24rem; min-width: 0; }
.arbeitsplatz-stempel > * { margin-bottom: 0; }
/* Die Stempelkarte liegt in `.zeit-app`, und die hat `margin: 1rem 0` - auf Mein Tag rutschte
   „Jetzt" dadurch 16 px unter die Oberkante der Kontokacheln (Bild vom 27.09.2026). */
.arbeitsplatz-stempel .zeit-app, .arbeitsplatz-stempel .zeit-app > :first-child { margin-top: 0; }
/* Rechte Spalte (27.09.2026): Konten, meine offenen Anträge, „Zur Freigabe" untereinander -
   vorher standen die Listen in einer eigenen Reihe, und rechts neben dem Tagesverlauf war es leer. */
.arbeitsplatz-seite { flex: 2 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.arbeitsplatz-seite > .arbeitsplatz-konten { min-width: 0; margin: 0; display: flex; flex-direction: column; }

/* ── Mein Tag als Raster (27.09.2026) ──────────────────────────────────────────────────────────
   Nutzer: „das eine beginnt irgendwo, das andere endet irgendwo … ich mag das nicht". Zwei Zeilen,
   je Zeile gleiche Ober- und Unterkante:   Jetzt   | Konten
                                           Verlauf | meine Anträge + Zur Freigabe
   Die Hüllen dazwischen (Stempelspalte, React-Einhängepunkt, .zeit-app, rechte Spalte) werden mit
   `display: contents` durchlässig; die React-Oberfläche liefert .zeit-oben und .zeit-unten. Die jeweils
   letzte Karte eines Feldes wächst bis zur Unterkante - so enden beide Spalten auf derselben Linie.
   Nur für die Konten: Die Kacheln wachsen auf die Höhe von „Jetzt" (eine Zeile), NICHT auf die des
   Tagesverlaufs - das war der Fehler vom 24.09. (1103 statt 187 px). */
.arbeitsplatz-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: stretch;
  grid-template-areas: "jetzt" "konten" "verlauf" "listen"; }
.arbeitsplatz-raster.ohne-konten { grid-template-areas: "jetzt" "verlauf" "listen"; }
/* Ohne Tagesverlauf (noch nie gestempelt) bleibt .zeit-unten leer - dann kein Feld dafür, sonst
   entstünde links ein Loch neben den Listen. */
.inhalt-arbeitsplatz .arbeitsplatz-raster .zeit-unten:empty { display: none; }
.arbeitsplatz-raster > .arbeitsplatz-stempel,
.arbeitsplatz-raster > .arbeitsplatz-stempel > [data-clockman-zeit],
.arbeitsplatz-raster .zeit-app,
.arbeitsplatz-raster > .arbeitsplatz-seite { display: contents; }
.arbeitsplatz-raster .zeit-oben { grid-area: jetzt; }
.arbeitsplatz-raster .zeit-unten { grid-area: verlauf; }
.arbeitsplatz-raster .arbeitsplatz-konten { grid-area: konten; }
.arbeitsplatz-raster .arbeitsplatz-unten { grid-area: listen; }
/* `.inhalt-arbeitsplatz` davor: Die Dichte-Regeln am Dateiende (.oberflaeche .karte { margin-bottom })
   haben sonst dieselbe Stärke und gewinnen - dann stünde unter jeder Karte ein Außenabstand und die
   Unterkanten liefen wieder auseinander. */
.inhalt-arbeitsplatz .arbeitsplatz-raster :is(.zeit-oben, .zeit-unten, .arbeitsplatz-unten) { display: flex;
  flex-direction: column; align-items: stretch; gap: 1.25rem; min-width: 0; }
.inhalt-arbeitsplatz .arbeitsplatz-raster :is(.zeit-oben, .zeit-unten, .arbeitsplatz-unten) > * { margin: 0; }
.inhalt-arbeitsplatz .arbeitsplatz-raster .zeit-oben > .zeit-stempeln,
.inhalt-arbeitsplatz .arbeitsplatz-raster .zeit-unten > .zeit-historie,
.inhalt-arbeitsplatz .arbeitsplatz-raster .arbeitsplatz-unten > .karte:last-child { flex-grow: 1; }
.inhalt-arbeitsplatz .arbeitsplatz-raster .arbeitsplatz-konten { display: flex; flex-direction: column; margin: 0; }
.arbeitsplatz-raster .arbeitsplatz-konten > .kennzahlen { flex-grow: 1; }
/* Steht über „Jetzt" noch ein Hinweis (offline, Quittung, offene Tage), wird die Zeile hoch - dann
   strecken sich die Kacheln NICHT mit, sonst werden sie wieder unnötig lang. */
.arbeitsplatz-raster:has(.zeit-oben > :not(.zeit-stempeln)) .arbeitsplatz-konten > .kennzahlen { flex-grow: 0; }
@media (min-width: 1024px) {
  .arbeitsplatz-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
    grid-template-areas: "jetzt konten" "verlauf listen"; }
  .arbeitsplatz-raster.ohne-konten { grid-template-areas: "jetzt listen" "verlauf listen"; }
  .arbeitsplatz-raster.ohne-listen { grid-template-areas: "jetzt konten" "verlauf verlauf"; }
  .arbeitsplatz-raster.ohne-konten.ohne-listen { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "jetzt" "verlauf"; }
  /* Kein Tagesverlauf: die Listen nehmen die zweite Zeile ganz. */
  .arbeitsplatz-raster:has(.zeit-unten:empty) { grid-template-areas: "jetzt konten" "listen listen"; }
  .arbeitsplatz-raster.ohne-konten:has(.zeit-unten:empty) { grid-template-areas: "jetzt listen"; }
  .arbeitsplatz-raster.ohne-listen:has(.zeit-unten:empty) { grid-template-areas: "jetzt konten"; }
}
/* Paket B (06.11.2026): „Für dich als Leitung" bzw. „Zu erledigen". Am Handy vor der Stempelkarte, am Schreibtisch
   rechts neben Stempelkarte und Konten (LE-01, LE-25). */
.arbeitsplatz-raster .arbeitsplatz-fuer { grid-area: fuer; }
.arbeitsplatz-raster.mit-fuer { grid-template-areas: "fuer" "jetzt" "konten" "verlauf"; }
.arbeitsplatz-raster.mit-fuer.ohne-konten { grid-template-areas: "fuer" "jetzt" "verlauf"; }
@media (min-width: 1024px) {
  .arbeitsplatz-raster.mit-fuer { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start;
    grid-template-areas: "jetzt fuer" "konten fuer" "verlauf fuer"; }
  .arbeitsplatz-raster.mit-fuer.ohne-konten { grid-template-areas: "jetzt fuer" "verlauf fuer"; }
  .arbeitsplatz-raster.mit-fuer:has(.zeit-unten:empty) { grid-template-areas: "jetzt fuer" "konten fuer"; }
  .arbeitsplatz-raster.mit-fuer.ohne-konten:has(.zeit-unten:empty) { grid-template-areas: "jetzt fuer"; }
}
.arbeitsplatz-fuer { display: grid; gap: .75rem; align-content: start; }
.arbeitsplatz-fuer > * { margin: 0; }
.arbeitsplatz-fuer h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
.fuer-zeilen { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cm-linie); border-radius: 10px; overflow: hidden; }
.fuer-zeilen li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: center;
  padding: .7rem .8rem; background: var(--cm-karte); }
.fuer-zeilen li + li { border-top: 1px solid var(--cm-linie); }
.fuer-zahl { min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; border-radius: 999px; display: grid; place-items: center;
  font-weight: 750; background: var(--cm-orange); color: var(--cm-knopf-text); }
.fuer-was strong { display: block; font-weight: 650; }
.fuer-was small { display: block; color: var(--cm-leise); font-size: .84rem; }
.fuer-weg { white-space: nowrap; font-weight: 600; min-height: var(--ziel, 44px); display: inline-flex; align-items: center; gap: .3rem; }
.freigaben-einzeln > summary { cursor: pointer; color: var(--cm-leise); font-size: .9rem; min-height: var(--ziel, 44px);
  display: flex; align-items: center; }
details.freigaben-einzeln[open] > summary { margin-bottom: .6rem; }
.kennzahl__details { font-weight: 600; font-size: .85rem; text-decoration: underline; text-decoration-color: var(--cm-link-linie);
  text-decoration-thickness: 2px; text-underline-offset: .22em; }

/* Kacheln: zwei nebeneinander, auch am Handy (9.5rem x 2 + Abstand passt in 343 px). */
.inhalt-arbeitsplatz .kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1rem; margin: 0; }
/* Weisse Karte statt farbiger Flaeche. Die Kontoart traegt jetzt nur noch das Zeichen,
   nicht die ganze Kachel - im Entwurf wirkt es dadurch ruhiger, und die grosse Zahl
   steht auf Weiss, wo sie am besten zu lesen ist. */
.inhalt-arbeitsplatz .kennzahl,
.inhalt-arbeitsplatz .kennzahl[data-kontoart="urlaub"],
.inhalt-arbeitsplatz .kennzahl[data-kontoart="zeit"] {
  display: flex; flex-direction: row; align-items: flex-start; gap: .9rem; padding: 1.2rem 1.25rem;
  background: var(--cm-karte); color: var(--cm-text); text-decoration: none;
  border: 1px solid var(--cm-linie-stark); border-top: 3px solid var(--cm-orange);
  border-radius: var(--radius-karte); box-shadow: var(--schatten-karte); }
.inhalt-arbeitsplatz .kennzahl__zeichen { box-shadow: none; }
.inhalt-arbeitsplatz .kennzahl[data-kontoart="zeit"] .kennzahl__zeichen { background: var(--cm-einlage); color: var(--cm-text); }
.inhalt-arbeitsplatz .kennzahl__text { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.inhalt-arbeitsplatz .kennzahl__name { color: var(--cm-text); font-weight: 600; font-size: .9rem;
  text-transform: none; letter-spacing: 0; }
.inhalt-arbeitsplatz .kennzahl__wert { font-size: clamp(1.9rem, 2.2vw, 2.4rem); line-height: 1.15;
  margin: .2rem 0 .15rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.inhalt-arbeitsplatz .kennzahl__hinweis { line-height: 1.45; font-size: .86rem; }
.inhalt-arbeitsplatz .kennzahl__marke { align-self: flex-start; margin: .45rem 0 0; }
.inhalt-arbeitsplatz .kennzahl .balken { margin-block: .75rem .1rem; }
/* Fuss: Nebenzahl links, Pfeil rechts - wie im Entwurf. Der Text „Buchungen ansehen"
   bleibt fuer Vorleseprogramme; sehend ist die ganze Kachel der Link. */
.inhalt-arbeitsplatz .kennzahl__fuss { display: flex; align-items: flex-end; justify-content: space-between;
  gap: .75rem; margin-top: auto; padding-top: .7rem; color: var(--cm-leise); font-weight: 450; font-size: .86rem; }
.inhalt-arbeitsplatz .kennzahl__pfeil { color: var(--cm-tinte); font-size: 1.15rem; line-height: 1; flex: none; }
.inhalt-arbeitsplatz .kennzahl:hover { border-color: var(--cm-link); }
.inhalt-arbeitsplatz .kennzahl:hover .kennzahl__pfeil { color: var(--cm-link); }

/* ── Mein Tag, untere Reihe ─────────────────────────────────────────────────
   Links, was ich offen habe; rechts, was andere von mir brauchen. `auto-fit`
   laesst keine leere Spalte stehen, wenn nur eine Liste da ist. */
.arbeitsplatz-unten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: 1.25rem; align-items: start; }
.arbeitsplatz-unten > .karte { margin: 0; }
.kartenkopf h2 .zaehler { font-size: .8rem; vertical-align: .15em; margin-left: .35rem; }
.freigaben-aktionen { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-left: auto; }
.kartenkopf .freigaben-aktionen .nebenaktion { margin-left: 0; }
.freigaben-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: 1.25rem; align-items: start; }
.freigaben-spalte { min-width: 0; border: 1px solid var(--cm-linie); border-radius: var(--radius); padding: 1rem; }
.freigaben-spaltenkopf { border-bottom: 1px solid var(--cm-linie); padding-bottom: .8rem; }
.freigaben-spaltenkopf h3 { margin: 0; font-size: 1.05rem; }
.freigaben-spaltenkopf p { margin: .35rem 0 0; }
.freigaben-spaltenkopf .zaehler { font-size: .8rem; margin-left: .3rem; }
.freigaben-gruppe { border-bottom: 1px solid var(--cm-linie); }
.freigaben-gruppe:last-child { border-bottom: 0; }
.freigaben-gruppe > summary { display: flex; align-items: center; gap: .65rem; padding: .9rem 0;
  min-height: var(--ziel); cursor: pointer; list-style: none; }
.freigaben-gruppe > summary::-webkit-details-marker { display: none; }
.freigaben-gruppe > summary::before { content: "▸"; }
.freigaben-gruppe[open] > summary::before { content: "▾"; }
.freigaben-gruppenname { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.freigaben-spalte .antragszeile__text { overflow-wrap: anywhere; gap: .15rem; }
.freigaben-spalte .antragszeile { gap: .65rem; }
.freigaben-spalte .antragszeile > .knopf { flex-shrink: 0; }
.freigaben-leer { margin: 0; padding: 1rem 0 !important; font-size: .9rem; }

/* Eine Antragszeile: Zeichen, zwei Zeilen Text, Zustand, Pfeil. */
.antragsliste li { padding: 0; }
.antragszeile { display: flex; align-items: center; gap: .85rem; padding: .8rem 0 !important; }
.antragszeile__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.antragszeile__text a { color: var(--cm-tinte); text-decoration: none; }
.antragszeile__text a:hover { color: var(--cm-link); text-decoration: underline; }
.antragszeile .marke-chip { margin: 0; flex: none; }
.zeilenzeichen { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem;
  border-radius: 10px; background: var(--cm-einlage); color: var(--cm-text); }
.zeilenzeichen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; }
.zeilenpfeil { flex: none; color: var(--cm-tinte); text-decoration: none; font-size: 1.1rem; padding: .2rem .1rem; }
.zeilenpfeil:hover { color: var(--cm-link); }
.knopf-klein { min-height: 36px; padding: .35rem .9rem; font-size: .88rem; }
/* Warum etwas haengt: einmal, unter der Liste, auf eigener Flaeche. */
.hinweisstreifen { margin: .8rem 0 0; padding: .65rem .85rem; border-radius: var(--radius);
  background: var(--cm-orange-hell); color: var(--cm-link); font-size: .88rem; font-weight: 550; }

/* Die wichtigste Aktion bekommt eine ruhige, kontrastreiche Fläche aus der
 * vorhandenen Marke. Keine zweite Akzentfarbe; Orange bleibt die Handlung. */
.inhalt-gesamt .zeit-stempeln { background: var(--cm-kopf); color: var(--cm-kopf-text);
  border-color: var(--cm-kopf); border-top-color: var(--cm-orange);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--cm-kopf) 55%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--cm-kopf-text) 10%, transparent); }
.inhalt-gesamt .zeit-stempeln .knopf:not(.knopf-leise):not(.knopf-zweit) {
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cm-orange) 65%, transparent); }
.inhalt-gesamt .zeit-stempeln > .etikett { color: var(--cm-kopf-leise); border-bottom-color: var(--cm-kopf-linie);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.inhalt-gesamt .zeit-stempeln h3 { color: var(--cm-kopf-text); font-size: 1.6rem;
  line-height: 1.3; letter-spacing: -.025em; margin-block: .4rem .65rem; }
.inhalt-gesamt .zeit-stempeln .leise { color: var(--cm-kopf-leise); font-weight: 400; }
.inhalt-gesamt .zeit-stempeln .zeit-zahl-gross { color: var(--cm-kopf-text); font-variant-numeric: tabular-nums;
  font-size: clamp(2.8rem, 6vw, 3.75rem); }
.inhalt-gesamt .zeit-stempeln .zeit-aktionen { margin-block: 1.5rem .25rem; align-items: center; gap: .75rem 1rem; }
.inhalt-gesamt .zeit-stempeln .zeit-aktionen > a:not(.knopf),
.inhalt-gesamt .zeit-stempeln .knopf-text { display: inline-flex; align-items: center; min-height: var(--ziel);
  color: var(--cm-kopf-text); text-underline-offset: .2em; }
.inhalt-gesamt .zeit-stempeln .knopf-leise,
.inhalt-gesamt .zeit-stempeln .knopf-zweit { color: var(--cm-kopf-text); border-color: var(--cm-kopf-leise); background: transparent; }
.inhalt-gesamt .zeit-stempeln .knopf-leise:hover,
.inhalt-gesamt .zeit-stempeln .knopf-zweit:hover { color: var(--cm-kopf-text); background: var(--cm-kopf-aktiv); }
/* Die Quittung belegt ihren Platz schon vor dem ersten Stempel. Sie verschiebt
 * weder die Karte noch ihre Knöpfe; lange Hinweise dürfen trotzdem umbrechen. */
.zeit-stempel-rueckmeldung { display: flex; align-items: flex-start; gap: .5rem;
  min-block-size: 4.4em; margin-block-start: .75rem; padding-block-start: .65rem;
  font-size: .85rem; line-height: 1.45; overflow-wrap: anywhere; }
.zeit-stempel-rueckmeldung p { margin: 0; }
.zeit-stempel-haken { flex: none; font-weight: 700; }
.inhalt-gesamt .zeit-stempel-rueckmeldung { color: var(--cm-kopf-leise);
  border-top: 1px solid var(--cm-kopf-linie); }
.inhalt-gesamt .zeit-stempel-rueckmeldung .zeit-stempel-haken { color: var(--cm-kopf-text); }
.zeit-stempeln .zeit-jetzt { position: relative; padding-inline-start: 1rem; }
.zeit-stempeln .zeit-jetzt > .leise { min-block-size: 3.2em; flex-basis: 100%; }
.inhalt-gesamt .zeit-historie > .zeit-kopf { align-items: flex-start; }
.inhalt-gesamt .zeit-historie .zeit-zahlen { margin-top: 1.25rem; }
.inhalt-gesamt .zeit-historie .zeit-zahlen .zeit-zahl { font-size: 1.7rem; }
.inhalt-gesamt .zeit-historie .zeit-ereignisse { margin-block: .75rem 1rem; }
.inhalt-gesamt .zeit-historie summary { min-height: var(--ziel); }

/* Derselbe Rhythmus auf den weiteren täglichen Wegen. Breite Tabellen bleiben
 * in ihren Scrollcontainern, Formulare und Beschriftungen dürfen umbrechen. */
.inhalt-gesamt .alltag-kopf { display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 2rem; }
.inhalt-gesamt .alltag-kopf > div { min-width: 0; }
.inhalt-gesamt .alltag-kopf h1 { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.045em; }
.inhalt-gesamt .alltag-kopf .leise { margin: .5rem 0 0; max-width: 70ch; font-size: 1rem; }
.inhalt-gesamt .alltag-aktionen { display: flex; flex-wrap: wrap; gap: .65rem 1rem; align-items: center; }
.inhalt-gesamt .alltag-aktionen a { min-height: var(--ziel); display: inline-flex; align-items: center; gap: .5rem; }
.inhalt-gesamt :where(h1, h2, h3, p, dd) { overflow-wrap: anywhere; }
.inhalt-gesamt .paare dd { font-variant-numeric: tabular-nums; }
.inhalt-zeit .zeit-app { margin-top: 0; }
.inhalt-zeit .zeit-woche { gap: .6rem; background: transparent; border: 0; overflow: visible; margin-block: 1.5rem; }
.inhalt-zeit .zeit-wochentag { padding: .9rem .6rem; border: 1px solid var(--cm-linie); border-radius: var(--radius); }
.inhalt-zeit .zeit-wochentag__tag, .inhalt-zeit .zeit-wochentag__datum { font-size: .85rem; }
.inhalt-zeit .zeit-wochentag strong { font-size: 1.5rem; margin-top: .2rem; }
.inhalt-zeit .zeit-wochentag.ist-heute .zeit-wochentag__tag,
.inhalt-zeit .zeit-wochentag.ist-heute .zeit-wochentag__datum { color: var(--cm-text); }
.inhalt-zeit .zeit-app > details { margin-block: 1.25rem; padding: .5rem 1.25rem;
  border: 1px solid var(--cm-linie); border-radius: var(--radius); background: var(--cm-karte); color: var(--cm-text); }
.inhalt-zeit .zeit-app > details > summary { min-height: var(--ziel); padding-block: .75rem; font-weight: 600; }
.inhalt-zeit .zeit-app > details[open] > summary { margin-bottom: 1rem; border-bottom: 1px solid var(--cm-linie); }
.inhalt-zeit .zeit-formular { max-width: 65rem; }
.inhalt-zeit .zeit-pruefkarte-entscheidung { max-width: none; }
.inhalt-gesamt .zeit-app input, .inhalt-gesamt .zeit-app select,
.inhalt-antraege .formular input:not([type=hidden]):not([type=checkbox]),
.inhalt-antraege .formular select, .inhalt-antraege .formular textarea {
  min-height: var(--ziel); border-radius: var(--radius); padding: .75rem; }
.inhalt-gesamt :where(input, select, textarea):focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 3px; }

.inhalt-konten .konten-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.inhalt-konten .konten-stichtag { display: grid; grid-template-columns: minmax(0, 11rem) max-content; align-items: end; }
.inhalt-konten .konten-stichtag > label { display: grid; gap: .3rem; margin: 0; }
.inhalt-konten .konten-stichtag :is(input, button) { height: var(--ziel); min-height: var(--ziel); margin: 0; }
@media (max-width: 600px) {
  .inhalt-konten .konten-stichtag { grid-template-columns: minmax(0, 1fr); }
  .inhalt-konten .konten-stichtag input { max-width: 100%; }
}
/* Kontenliste (Paket E, HR-19): eine Zeile je Person, der Wert ist der Link ins Konto. */
.kt-liste td { vertical-align: top; }
.kt-person { display: block; font-weight: 650; }
.kt-wert { display: grid; gap: .1rem; text-decoration: none; color: var(--cm-text); }
.kt-wert strong { justify-self: start; color: var(--cm-link); font-variant-numeric: tabular-nums;
                  text-decoration: underline; text-decoration-color: var(--cm-orange); text-decoration-thickness: 2px;
                  text-underline-offset: .25em; }
.kt-wert strong.warn { color: var(--cm-warn); }
.kt-wert:hover strong, .kt-wert:focus-visible strong { text-decoration-color: currentColor; }
.kt-unter { display: block; font-size: .8rem; color: var(--cm-leise); }
.inhalt-konten .konto-karte { display: flex; flex-direction: column; min-width: 0; margin-bottom: 0; }
.inhalt-konten .konto-karte[data-kontoart="urlaub"] { background: var(--cm-konto-urlaub); color: var(--cm-text); }
.inhalt-konten .konto-karte[data-kontoart="zeit"] { background: var(--cm-konto-zeit); color: var(--cm-text); }
.inhalt-konten .konto-verfuegbar { margin-block: .3rem 1rem; }
.inhalt-konten .konto-verfuegbar__wert { display: block; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.2;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--cm-tinte); }
.inhalt-konten .konto-karte .alltag-aktionen { margin-top: auto; padding-top: 1rem; }
.inhalt-konten .konto-karte .paare { grid-template-columns: minmax(7rem, .7fr) minmax(0, 1fr); gap: .7rem 1rem; }

.inhalt-antraege .antraege-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.inhalt-antraege .antrag-karte { margin-bottom: 0; }
.inhalt-antraege .antrag-karte > h2 { margin: 0 0 1rem; }
.inhalt-antraege .antrag-karte .antragstabelle { border: 1px solid var(--cm-linie); border-radius: var(--radius); }
.inhalt-antraege .antrag-karte .antragstabelle th { background: transparent; color: var(--cm-text); }
.inhalt-antraege .antrag-karte .antragstabelle td { font-variant-numeric: tabular-nums; }
.inhalt-antraege .antrag-neu { max-width: none; }
.inhalt-antraege .antrag-pruefung { border-radius: var(--radius); background: var(--cm-einlage); color: var(--cm-text); }
.inhalt-antraege .antrag-schritte { padding-top: .75rem; border-top: 1px solid var(--cm-linie); }
.oberflaeche .inhalt-antraege .antrag-schritte .knopf { min-height: var(--ziel); }
.inhalt-antraege .antrag-detail-raster { gap: 1.5rem; }
.inhalt-antraege .antrag-nachweis summary, .inhalt-antraege .antrag-nebenaktion summary { min-height: var(--ziel); }
/* Ein Fehler traegt die Kartenlinie in Warnfarbe - an derselben Stelle wie alle. */
.inhalt-antraege .antrag-fehler { border-top-color: var(--cm-warn); }

/* Anmeldung: dieselbe dunkle Markenfläche und orange Handlung wie „Jetzt“.
 * Nur das Login optiert ein; Einladungen behalten ihre bestehende Hülle. */
.anmeldung-wow { --radius: 12px; font-size: 17px; line-height: 1.55;
  background: var(--cm-kopf); color: var(--cm-kopf-text); padding: clamp(1.25rem, 4vw, 4rem);
  border-top: 4px solid var(--cm-orange); }
.anmeldung-wow .anmelde-huelle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
  align-items: center; gap: 2rem clamp(2rem, 5vw, 5rem); max-width: 1120px; }
.anmeldung-wow .anmeldung-auftakt { min-width: 0; }
.anmeldung-wow .anmeldung-eyebrow { color: var(--cm-kopf-leise); font-size: .9rem; border-left: 3px solid var(--cm-orange); padding-left: .85rem; }
.anmeldung-wow .anmeldung-versprechen { margin: 1.25rem 0; color: var(--cm-kopf-text);
  font-size: clamp(2.3rem, 4.5vw, 4rem); font-weight: 750; letter-spacing: -.05em; line-height: 1.08; overflow-wrap: anywhere; }
.anmeldung-wow .anmeldung-einstieg { color: var(--cm-kopf-leise); max-width: 32ch; }
.anmeldung-wow .anmeldung-vorteile { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.anmeldung-wow .anmeldung-vorteile li { display: flex; gap: .9rem; align-items: center; color: var(--cm-kopf-text); }
.anmeldung-wow .anmeldung-vorteile svg { width: 24px; height: 24px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.anmeldung-wow .anmelde-karte { min-width: 0; border-radius: var(--radius); border: 1px solid var(--cm-kopf-aktiv);
  border-top: 4px solid var(--cm-orange); box-shadow: 0 24px 64px -20px var(--cm-kopf),
  0 0 0 1px color-mix(in srgb, var(--cm-kopf-text) 12%, transparent); }
.anmeldung-wow .anmelde-kopf { padding: 1.5rem; border-bottom: 1px solid var(--cm-kopf-linie); }
.anmeldung-wow .anmelde-inhalt { padding: 1.5rem 2rem 2rem; }
.anmeldung-wow .anmelde-firma { font-size: .9rem; margin-bottom: .8rem; }
.anmeldung-wow .anmeldung-formkopf h1 { font-size: 1.8rem; margin: 0 0 .5rem; }
.anmeldung-wow .anmeldung-formkopf p { font-size: .95rem; color: var(--cm-leise); margin: 0 0 1.5rem; }
.anmeldung-wow .feld-rahmen { border-radius: var(--radius); min-height: 56px; }
.anmeldung-wow .feld-rahmen input { font-size: 17px; min-height: 56px; }
.anmeldung-wow .feld-name { font-size: .9rem; }
.anmeldung-wow .ankreuz { min-height: 48px; font-size: 1rem; }
.anmeldung-wow .anmelde-link { display: inline-flex; align-items: center; min-height: 48px; font-size: .95rem; }
.anmeldung-wow .anmelde-fussnote { font-size: .85rem; }
.anmeldung-wow .knopf { min-height: 54px; border-radius: var(--radius); font-size: 1rem;
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cm-orange) 65%, transparent); }
.anmeldung-wow .anmelde-fuss { grid-column: 1 / -1; margin: 0; color: var(--cm-kopf-leise); font-size: .8rem; }
.anmeldung-wow .anmelde-installieren { min-height: 48px; color: var(--cm-kopf-text); }
.anmeldung-wow .errorlist { overflow-wrap: anywhere; }
.anmeldung-wow :where(input, button):focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 3px; }
@media (max-width: 800px) {
  .anmeldung-wow { align-items: flex-start; padding: 1.25rem .85rem 1.5rem; }
  .anmeldung-wow .anmelde-huelle { max-width: 480px; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .anmeldung-wow .anmeldung-versprechen { font-size: 2rem; margin: 0; }
  .anmeldung-wow .anmeldung-eyebrow, .anmeldung-wow .anmeldung-einstieg,
  .anmeldung-wow .anmeldung-vorteile, .anmeldung-wow [data-nur-gross] { display: none; }
  .anmeldung-wow .anmelde-kopf { padding: 1rem; }
  .anmeldung-wow .anmelde-inhalt { padding: 1.2rem; }
}

@media (min-width: 760px) {
  .inhalt-konten .konten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .inhalt-arbeitsplatz .kennzahl, .inhalt-gesamt .zeit-stempeln .knopf { transition: transform 140ms ease; }
  .inhalt-arbeitsplatz .kennzahl:hover { transform: translateY(-2px); }
  .inhalt-gesamt .zeit-stempeln .knopf:active { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .inhalt-arbeitsplatz .kennzahl, .inhalt-gesamt .zeit-stempeln .knopf { transition: none; transform: none; }
}
@media (max-width: 480px) {
  .oberflaeche .inhalt-gesamt { padding-inline: .75rem; }
  .inhalt-arbeitsplatz .arbeitsplatz-kopf { margin-bottom: 1.25rem; }
  /* Zeichen über dem Text: Nebeneinander blieben ~95 px für die Zahl, und „10:00 h" brach in
     „10:0 / 0 h" (Bild vom 27.09.2026). Eine Zahl bricht nicht um. */
  .inhalt-arbeitsplatz .kennzahl, .inhalt-arbeitsplatz .kennzahl[data-kontoart] { flex-direction: column; gap: .55rem; padding: 1rem; }
  .inhalt-arbeitsplatz .kennzahl__wert { font-size: 1.7rem; overflow-wrap: normal; white-space: nowrap; }
  .inhalt-arbeitsplatz .kennzahl__zeichen { flex-shrink: 0; }
  .inhalt-gesamt .zeit-stempeln h3 { font-size: 1.4rem; }
  .inhalt-gesamt .alltag-kopf { margin-bottom: 1.25rem; }
  .inhalt-gesamt :is(.alltag-kopf, .arbeitsplatz-kopf) > .alltag-aktionen { width: 100%; }
  .inhalt-gesamt :is(.alltag-kopf, .arbeitsplatz-kopf) > .alltag-aktionen > .knopf { width: 100%; justify-content: center; }
  .inhalt-konten .konto-karte .paare { grid-template-columns: minmax(0, 1fr); }
  .inhalt-konten .konto-karte .paare dd { margin: -.4rem 0 .4rem; }
  .inhalt-zeit .zeit-wochentag { padding-inline: .3rem; }
}

/* Der Nutzer hat die Richtung nun für ALLE Produktseiten freigegeben. Die
 * gemeinsame Hülle trägt den Stil auch bei neuen Unterseiten automatisch;
 * Berechtigungen, fachliche Farbzustände und vorhandene Detailwege bleiben. */
.oberflaeche .inhalt-gesamt { padding-bottom: 3rem; }
.inhalt-gesamt h1 { font-size: clamp(2rem, 3vw, 2.8rem); letter-spacing: -.045em; }
.inhalt-gesamt .karte { min-width: 0; }
/* 27.09.2026: keine eigene Kartenbreite mehr (vorher 960 px) - der Nutzer will "überall die selbe
   Breite". Die Felder begrenzen sich selbst (--feldbreite), die Karte nicht. */
.inhalt-gesamt .karte-mittel { max-width: none; }
/* 23.09.2026 — hier stand `background: var(--cm-grund)`, also GENAU die
   Seitenfarbe. Damit verschmolz der Kartenkopf mit der Seite, und von der Karte
   blieben zwei Haarlinien übrig. Das war der eigentliche Grund für „weißer
   Rahmen und dann gleiche Hintergrundfarbe".
   Nutzeranweisung: „nicht da wo texte sind NUR der hintergrund" — innerhalb
   einer Karte trägt nichts mehr den warmen Ton. Der Kopf trennt sich über die
   Linie darunter. */
.inhalt-gesamt .karte:not(.zeit-stempeln) > .etikett:first-child,
.inhalt-gesamt .karte > .zeile-kopf:first-child {
  background: transparent; color: var(--cm-text);
  border-radius: var(--radius-karte) var(--radius-karte) 0 0; }
.inhalt-gesamt .karte > h2:not(.etikett) { font-size: 1.3rem; line-height: 1.35; letter-spacing: -.025em; }
.inhalt-gesamt .karte > h2:first-child { margin-top: 0; }
.inhalt-gesamt .alltag-kopf .etikett { color: var(--cm-leise); font-size: .85rem; margin-bottom: .65rem; }
.inhalt-gesamt .alltag-kopf .knopf { flex-shrink: 0; }
.inhalt-gesamt .alltag-kopf + .leise { margin-top: -1rem; margin-bottom: 1.5rem; }
.inhalt-gesamt :where(.akte-spalten, .spalten-gleich, .monats-aktionen) { gap: 1.5rem; }
.inhalt-gesamt :where(.karte, .alltag-kopf, .akte-spalten, .spalten-gleich) > * { min-width: 0; }
.inhalt-gesamt .paare { gap: .7rem 1.25rem; }
.inhalt-gesamt .paare dt, .inhalt-gesamt pre, .inhalt-gesamt code { overflow-wrap: anywhere; }
.inhalt-gesamt pre { white-space: pre-wrap; }
.inhalt-gesamt .liste > li { padding-block: .75rem; }
.inhalt-gesamt li, .inhalt-gesamt legend,
.inhalt-gesamt .rm-bestaetigen-schalter > span { overflow-wrap: anywhere; }
.inhalt-gesamt :where(form, form > *, fieldset, .rm-bestaetigen-schalter > *) {
  min-width: 0; max-width: 100%; }

/* Lesbare Eingaben in Verwaltung, Import und Freigaben. Schalter, unsichtbare
 * Kennungen und Checkboxen sind bewusst keine großen Textfelder. */
.inhalt-gesamt :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea),
.inhalt-gesamt .formular input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.inhalt-gesamt .formular select, .inhalt-gesamt .formular textarea {
  min-height: var(--ziel); max-width: min(100%, var(--feldbreite, 30rem)); min-width: 0; padding: .7rem .8rem;
  border: 1px solid var(--cm-linie-stark); border-radius: var(--radius);
  background: var(--cm-karte); color: var(--cm-text); font: inherit; }
.inhalt-gesamt input[type=file] { width: 100%; white-space: normal; }
.inhalt-gesamt input[type=file]::file-selector-button {
  min-height: 40px; max-width: 100%; margin-right: .75rem; padding: .5rem .75rem;
  border: 1px solid var(--cm-linie); border-radius: 8px;
  background: var(--cm-einlage); color: var(--cm-text); font: inherit; cursor: pointer; }
.inhalt-gesamt select[multiple] { min-height: 9rem; }
.inhalt-gesamt textarea { min-height: 7rem; }
.inhalt-gesamt label { overflow-wrap: anywhere; }
.inhalt-gesamt .formzeile { gap: 1rem; }
.inhalt-gesamt .formzeile > label { min-width: 0; }
.inhalt-gesamt .formzeile > label:has(> input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range])),
.inhalt-gesamt .formzeile > label:has(> select) { flex: 1 1 12rem; }
.inhalt-gesamt .formzeile > label > input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]),
.inhalt-gesamt .formzeile > label > select { width: 100%; }
.inhalt-gesamt .suche { gap: 1rem; padding: 1rem; background: var(--cm-karte); color: var(--cm-text);
  border: 1px solid var(--cm-linie); border-radius: var(--radius); }
.inhalt-gesamt .suche input[type=text] { flex: 1 1 16rem; min-width: 0; }
.inhalt-gesamt .errorlist { color: var(--cm-warn); overflow-wrap: anywhere; }
.inhalt-gesamt .fehler { color: var(--cm-warn); font-weight: 600; }
.inhalt-gesamt :where(.knopf, summary) { min-height: var(--ziel); }
.inhalt-gesamt .knopf { white-space: normal; overflow-wrap: anywhere; }
.inhalt-gesamt .knopf:not(.knopf-zweit):not(.knopf-gefahr):not(.knopf-leise) {
  box-shadow: 0 5px 12px -7px color-mix(in srgb, var(--cm-orange) 65%, transparent); }
/* Gefahrenbereich (05.11.2026): dieselbe Linie oben wie jede Karte, nur in Warnfarbe. */
.inhalt-gesamt .karte.karte-gefahr { border-top-color: var(--cm-warn-linie); }
.inhalt-gesamt .knopf-gefahr:hover { background: var(--cm-warn-grund); color: var(--cm-warn); border-color: var(--cm-warn); }
.inhalt-gesamt .regelfelder { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem 1.5rem; }
.rg-abschnitt { border-top: 1px solid var(--cm-linie); padding-block: .5rem; }
.rg-abschnitt > summary { cursor: pointer; font-weight: 650; min-height: var(--ziel, 44px); padding-block: .6rem; }
.inhalt-gesamt .regelfelder > :is(.errorlist, .warn),
.inhalt-gesamt .regelfelder > label:has(textarea),
.inhalt-gesamt .regelfelder > label:has(select[multiple]) { grid-column: 1 / -1; }

/* Tabellen bleiben vollständige Tabellen. Ein breiter Nachweis scrollt in
 * seinem Behälter, nie die ganze Seite; die Spalten werden nicht versteckt. */
.inhalt-gesamt .tabelle { font-size: 1rem; font-variant-numeric: tabular-nums; }
.inhalt-gesamt .tabelle th { font-size: .78rem; padding: .8rem .7rem; background: transparent; color: var(--cm-text); }
.inhalt-gesamt .tabelle td { padding: .85rem .7rem; }
.inhalt-gesamt :where(.antragstabelle, .scroll-tabelle, .monats-tabelle, .kal-rahmen) { max-width: 100%; border-radius: var(--radius); }
/* Versteckte Kalenderbeschriftungen bleiben am inneren Scrollbereich verankert. */
.inhalt-gesamt .kal-rahmen { position: relative; }
.inhalt-gesamt .kal-tafel thead th { color: var(--cm-text); }
.inhalt-gesamt .tabelle .knopf { min-height: var(--ziel); }
.inhalt-gesamt .aufklapp > summary { font-size: .95rem; }
.inhalt-gesamt details.karte > summary { font-size: 1.05rem; font-weight: 650; }
.inhalt-gesamt .rm-technisch { font-size: .9rem; }
.inhalt-gesamt .rm-technisch code { font-size: .85rem; }
.inhalt-gesamt .rm-zeile { padding-block: 1rem; }
.inhalt-gesamt .rm-text { overflow-wrap: anywhere; }
.inhalt-gesamt .rm-bestaetigen { padding: 1.15rem; }
.inhalt-gesamt .zahlenband, .inhalt-gesamt .monats-band { border-radius: var(--radius); overflow: hidden; }
.inhalt-gesamt .monats-zahl { background: var(--cm-karte); color: var(--cm-text); }
.inhalt-gesamt .monats-zahl strong { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.inhalt-gesamt :where(.monats-links, .kal-blaettern) > a { display: inline-flex; align-items: center; min-height: var(--ziel); }
.inhalt-gesamt .anw-liste { gap: 1rem; }
.inhalt-gesamt .anw-person { padding: 1rem; box-shadow: 0 3px 12px color-mix(in srgb, var(--cm-kopf) 6%, transparent); }
.inhalt-gesamt .anw-person .leise { font-size: .9rem; }
.inhalt-gesamt .anw-filter, .inhalt-gesamt .kal-steuer { gap: 1rem; }
.inhalt-gesamt .anw-filter label, .inhalt-gesamt .kal-steuer label { min-width: 0; }
.inhalt-gesamt .teamspalte { box-shadow: 0 3px 12px color-mix(in srgb, var(--cm-kopf) 6%, transparent); }
.inhalt-gesamt [hidden] { display: none !important; }
@media (min-width: 1100px) { .inhalt-gesamt .regelfelder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .inhalt-gesamt .akte-spalten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .inhalt-gesamt .paare { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .inhalt-gesamt .paare dd { margin-bottom: .75rem; }
  .inhalt-gesamt .suche { padding: .8rem; }
  .inhalt-gesamt .suche > .knopf { flex-basis: 100%; }
  .inhalt-gesamt .rm-zeile { gap: .75rem; align-items: flex-start; }
  .inhalt-gesamt .alltag-kopf .knopf { max-width: 100%; }
}

/* Terminal bleibt ein bedienbares Kioskgerät, kein geschrumpftes Dashboard.
 * Die dunkle Ruhefläche ist öffentlich und enthält weiterhin keinen Namen. */
.terminal-oberflaeche { --radius: 12px; font-size: 17px; line-height: 1.55; }
.terminal-oberflaeche .terminal-kopf { border-bottom: 3px solid var(--cm-orange); }
.terminal-oberflaeche .terminal-mitte { width: min(100%, 1120px); }
.terminal-oberflaeche .terminal-ruhe { padding: 1.5rem; margin: 0 auto 1.5rem;
  border: 1px solid var(--cm-kopf); border-top: 4px solid var(--cm-orange); border-radius: var(--radius);
  background: var(--cm-kopf); color: var(--cm-kopf-text);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--cm-kopf) 55%, transparent); }
.terminal-oberflaeche .terminal-ruhe h1, .terminal-oberflaeche .terminal-uhr { color: var(--cm-kopf-text); }
.terminal-oberflaeche .terminal-ruhe p { color: var(--cm-kopf-leise); }
.terminal-oberflaeche .terminal-uhr { font-size: clamp(3rem, 10vw, 6rem); }
.terminal-oberflaeche .terminal-ruhe-klein { padding: 1rem; }
.terminal-oberflaeche .terminal-ruhe-klein .terminal-uhr { font-size: 2.5rem; }
.terminal-oberflaeche .terminal-karte { border-radius: var(--radius);
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--cm-kopf) 20%, transparent); }
.terminal-oberflaeche .terminal-app input, .terminal-oberflaeche .terminal-app select,
.terminal-oberflaeche .terminal-app .knopf { border-radius: var(--radius); }
.terminal-oberflaeche .terminal-leser { padding: 1.25rem; border: 1px solid var(--cm-linie);
  border-radius: var(--radius); background: var(--cm-karte); color: var(--cm-text); }
.terminal-oberflaeche .terminal-hinweis, .terminal-oberflaeche .terminal-saldo { border-radius: var(--radius); }
.terminal-oberflaeche .terminal-kopf .knopf { min-height: 48px; }
.terminal-oberflaeche .terminal-start { width: calc(100% - 2rem); max-width: 680px;
  margin: clamp(2rem, 8vh, 5rem) auto; text-align: center; border-top: 4px solid var(--cm-orange); }
.terminal-oberflaeche .terminal-start .terminal-laden { padding: .75rem 0; }
.offline-oberflaeche .offline-kopf { background: var(--cm-kopf); color: var(--cm-kopf-text);
  border-bottom: 3px solid var(--cm-orange); }
.offline-oberflaeche .offline-kopf .marke { color: var(--cm-kopf-text); }
.inhalt-gesamt .offline-status { background: var(--cm-offline-grund); color: var(--cm-offline-text);
  border: 2px dashed var(--cm-leise); border-radius: var(--radius); padding: 1.25rem; }
.inhalt-gesamt .offline-status > .etikett:first-child { background: var(--cm-offline-grund); color: var(--cm-offline-text);
  margin: 0 0 .75rem; padding: 0 0 .75rem; border-bottom: 1px dashed var(--cm-leise); }
.anmeldung-wow .anmelde-inhalt .formular input,
.anmeldung-wow .anmelde-inhalt .formular textarea,
.anmeldung-wow .anmelde-inhalt .formular select { border-radius: var(--radius); }
@media (max-width: 600px) {
  .terminal-oberflaeche .terminal-ruhe { padding: 1rem; }
  .terminal-oberflaeche .terminal-leser { padding: 1rem; }
}


/* ── Bewegung ───────────────────────────────────────────────────────────────
   Bis v0.21.11 bewegte sich in Clockman nichts: zwei transition, keine
   Animation, in einer Anwendung ueber laufende Zeit. Vier Stellen, mehr nicht.
   Keine Farbe in den Keyframes - Farbe gehoert in die Token und wird geprueft.
   Bewegung ist Zugabe: ohne JavaScript und mit reduzierter Bewegung bleibt
   jede Seite vollstaendig bedienbar, nur eben still. */
@keyframes cm-atem { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
@keyframes cm-balken-waechst { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cm-herein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Der Punkt sagt, was kein Wort sagt: es laeuft gerade. Er sitzt vor der grossen
   Zahl und bekommt seine Farbe aus dem Laufton, nicht aus einem festen Wert. */
.zeit-stempeln-arbeit .zeit-jetzt::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%; flex: none;
  position: absolute; inset-inline-start: 0; inset-block-start: 1.65rem; background: var(--cm-lauf);
}

@media (prefers-reduced-motion: no-preference) {
  .zeit-stempeln-arbeit .zeit-jetzt::before { animation: cm-atem 2.4s ease-in-out infinite; }
  .inhalt-arbeitsplatz .balken-teil { transform-origin: left center;
    animation: cm-balken-waechst .6s cubic-bezier(.2, .7, .3, 1) both; }
  .zeit-quittung { animation: cm-herein .28s ease-out both; }
  .oberflaeche .knopf { transition: transform 120ms ease, box-shadow 120ms ease; }
  .oberflaeche .knopf:active { transform: translateY(1px); }
}

@media (prefers-reduced-motion: reduce) {
  .zeit-stempeln-arbeit .zeit-jetzt::before,
  .inhalt-arbeitsplatz .balken-teil,
  .zeit-quittung { animation: none; }
  .oberflaeche .knopf { transition: none; }
}


/* ── Organigramm ────────────────────────────────────────────────────────────
   Ein Baum ist eine verschachtelte Liste; die Linien sind Schmuck und stehen
   darum im Stilblatt, nicht im Markup. Am Schreibtisch ein echtes Diagramm von
   oben nach unten (Nutzer 26.09.2026: „ich möchte ein ordentliches Organigramm"),
   am Handy derselbe Baum eingerückt - ein Diagramm in 375 px wäre ein Suchbild. */
.organigramm { --og-linie: color-mix(in srgb, var(--cm-leise) 55%, transparent); --og-luft: 1.4rem; }
.og-hinweis { margin: 0 0 .9rem; max-width: 70ch; }
/* Organigramm-Seite (19.10.2026): zwei Blöcke nebeneinander über die ganze Breite; ein Block allein (ohne
   Schreibrecht) nimmt die Zeile ganz. Jeder Block bleibt lesbar schmal (max. 60 Zeichen je Zeile). */
.og-hinweise { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: .8rem 2.5rem; margin: 0 0 1.1rem; max-width: calc(120ch + 2.5rem); }
.og-hinweis-block h2 { margin: 0 0 .3rem; font-size: .85rem; color: var(--cm-tinte); }
.og-hinweis-block ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
.og-flaeche { overflow-x: auto; padding: .4rem .2rem 1rem; }
.og-diagramm, .og-aeste { list-style: none; margin: 0; padding: 0; }

/* Eine Spalte, die schmaler werden darf als ihr längster Name (19.10.2026): Ohne `minmax(0, 1fr)` machte der längste
   Name die Grid-Spalte breiter als die Kachel - Namen, Leitungszeile und der Chip „Team“ ragten 40–65 px über den
   Rand (gemessen bei 1920 px). Jetzt kürzt der Name mit „…“, der Chip bricht unter den Namen. */
.og-kachel { position: relative; background: var(--cm-karte); color: var(--cm-text); border: 1px solid var(--cm-linie);
  border-radius: var(--radius); padding: .7rem .8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.og-kachel[draggable=true] { cursor: grab; }
.og-kachel.fliegt { opacity: .45; }
.og-kachel.ziel { background: var(--cm-orange-hell); outline: 2px dashed var(--cm-orange); outline-offset: -2px; }
.og-still .og-kachel { opacity: .65; border-style: dashed; }
/* Die ganze Kachel öffnet die Einheit; der Link liegt darüber und ist selbst nicht ziehbar. */
.og-oeffnen { position: absolute; inset: 0; border-radius: inherit; z-index: 2; }
.og-oeffnen:focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 2px; }
.og-kachel:has(.og-oeffnen):hover { border-color: var(--cm-orange); box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--cm-tinte) 45%, transparent); }

.og-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; }
/* Silbentrennung, wo der Browser sie kann; sonst bricht ein zu langes Wort, statt über den Rand zu ragen. */
.og-kopf h3 { margin: 0; font-size: .95rem; line-height: 1.3; color: var(--cm-tinte); overflow-wrap: anywhere;
  hyphens: auto; }
.og-art { font-size: .7rem; }
.og-leitung, .og-zahlen { margin: 0; font-size: .8rem; }
.og-zahlen { display: flex; flex-wrap: wrap; gap: .1rem .7rem; }
/* Bricht nur an Leerzeichen um - in der schmalen Kachel (144 px bei 1280) ragte „64 mit Untereinheiten“ sonst hinaus. */
.og-zahl { overflow-wrap: normal; }

/* Oben die Gesellschaft - zugleich die Ablage für „direkt an die Firma hängen". */
.og-firmenkachel { display: flex; align-items: center; gap: .75rem; background: var(--cm-einlage); }
.og-firmenkachel h2 { margin: 0; font-size: 1.05rem; color: var(--cm-tinte); }
.og-firmenziel.ziel { background: var(--cm-orange-hell); }
/* Geschäftsführung ohne Anstellung (06.10.2026) - eine schlichte Liste unter dem Organigramm. */
.organ-liste { list-style: none; padding: 0; margin: .5rem 0 1rem; display: grid; gap: .5rem; }
.organ-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.organ-aktionen { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.organ-aktionen form { margin: 0; }
.organ-neu { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.organ-neu label { display: grid; gap: .3rem; margin: 0; }
/* Menschen im Organigramm (v0.21.75): ziehen auf eine Einheit, deren Leitung oder zurück in die Liste. Die Zeile „Leitung"
   ist ein eigenes, kleineres Ziel in der Kachel; sie leuchtet allein, damit klar ist, was der Wurf bewirkt. Namen und
   Leitungszeile liegen über dem Link der Kachel - der Name öffnet die Akte, nicht die Einheit. */
.og-kachel .team-personen, .og-kachel .team-weitere { position: relative; z-index: 3; }
/* Die Zeile der Leitung ist nur beim Ziehen einer Person ein eigenes Ziel - sonst gehört der Klick der Kachel
   („Einheit öffnen"); oben drüber lag sie mitten im Klickfeld (Browserprobe 07.10.2026). */
.zieht-person .og-kachel .og-leitungsziel { position: relative; z-index: 3; }
/* Rechts alle Mitarbeiter, links der Baum (Nutzer 07.10.2026: „alle mitarbeiter vielleicht rechts … wo man dann einfach
   hin und herziehen kann"). Die Liste ist eine eigene Spalte und liegt über nichts - ein klebendes Ziel ÜBER dem Baum
   verdeckte Einheiten (Browserprobe 07.10.2026). Am Schreibtisch bleibt sie beim Scrollen oben und scrollt in sich. */
.og-arbeitsflaeche { display: grid; gap: 1rem; }
.og-baumspalte { min-width: 0; position: relative; }
/* Ist der Baum breiter als seine Spalte (kleiner Bildschirm), läuft er rechts in einen Verlauf aus statt hart
   abgeschnitten zu wirken - der sah aus wie eine Überlappung mit der Liste (Nutzer 07.10.2026). Setzt js/organigramm.js. */
.og-baumspalte.mehr-rechts::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 3.5rem;
  pointer-events: none; background-image: linear-gradient(to right, transparent, var(--cm-karte)); }
.og-baumspalte.mehr-links::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3.5rem;
  pointer-events: none; z-index: 4; background-image: linear-gradient(to left, transparent, var(--cm-karte)); }
.og-baumspalte.mehr-rechts::after { z-index: 4; }
.og-leute { border: 1px solid var(--cm-linie); border-radius: var(--radius); padding: .7rem .8rem;
  background: var(--cm-karte); display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.og-leute.ziel { background: var(--cm-orange-hell); outline: 2px dashed var(--cm-orange); outline-offset: -2px; }
.og-leute-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 .5rem; }
/* „Mitarbeiter“ brach mit „· 1 ohne Einheit“ daneben mitten im Wort um (19.10.2026) - jetzt rückt die Zahl darunter. */
.og-leute-kopf h3 { margin: 0; font-size: 1rem; color: var(--cm-tinte); white-space: nowrap; }
.og-leute-hilfe, .og-leute-liste { margin: 0; }
.og-leute-liste + .og-leute-liste { border-top: 1px solid var(--cm-linie); padding-top: .3rem; }
.og-leute-text { display: grid; min-width: 0; flex: 1; }
.og-leute-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1100px) {
  .og-arbeitsflaeche { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .og-leute { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); }
  .og-leute-liste:last-child { overflow-y: auto; }
}
.og-ausgeblendet { margin: 1rem 0 0; text-align: center; }
/* Einstellungen → Protokoll (07.10.2026): Zeit links, dann wer und was - ein Satz je Änderung. */
.protokoll-liste { list-style: none; margin: 0; padding: 0; }
.protokoll-liste li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .2rem 1rem; padding: .55rem 0;
  border-bottom: 1px solid var(--cm-linie); }
.protokoll-liste li:last-child { border-bottom: 0; }
.protokoll-liste time { color: var(--cm-leise); font-variant-numeric: tabular-nums; font-size: .88rem; }
.protokoll-blaettern { display: flex; justify-content: space-between; margin: .8rem 0 0; }
@media (max-width: 600px) { .protokoll-liste li { grid-template-columns: 1fr; } }
.team-zug[draggable=true] { cursor: grab; }
.team-zug.fliegt { opacity: .45; }
.og-leitungsziel { border-radius: calc(var(--radius) / 2); padding: .1rem .3rem; margin-inline: -.3rem; }
.og-leitungsziel.ziel { background: var(--cm-orange-hell); outline: 2px dashed var(--cm-orange); outline-offset: 0; }

/* Handy und schmale Fenster: eingerückt, mit Linie links. */
.og-aeste { margin: .55rem 0 0 .8rem; display: grid; gap: .5rem; }
.og-aeste > .og-knoten { position: relative; padding-left: 1.1rem; }
.og-aeste > .og-knoten::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--og-linie); }
.og-aeste > .og-knoten:last-child::before { bottom: auto; height: 1.5rem; }
.og-aeste > .og-knoten::after { content: ""; position: absolute; left: 0; top: 1.5rem; width: .9rem; border-top: 2px solid var(--og-linie); }

@media (min-width: 1000px) {
  /* Von oben nach unten. Jede Ebene ist eine Zeile; die waagrechte Linie über den
     Geschwistern entsteht aus zwei Halbrahmen je Kind, der Stich nach oben aus dem
     Rahmen der Liste. Das erste und das letzte Kind runden die Ecke ab. */
  .og-diagramm { display: flex; justify-content: center; min-width: max-content; }
  .og-knoten { display: flex; flex-direction: column; align-items: center; }
  /* Mit dem Fenster mitgehen: Fünf Einheiten nebeneinander (Drystar, KOR Gruppe) passen so
     auch bei 1280 px ohne seitliches Scrollen. */
  .og-diagramm .og-kachel { width: clamp(9.5rem, 11vw, 12.5rem); }
  /* Gleiche Höhe je Kachel (Prüfung 27.09.2026): Eine Einheit mit „… mit Untereinheiten" war eine
     Zeile höher als ihre Nachbarin - gleiche Oberkante, verschiedene Unterkante. */
  .og-diagramm .og-kachel:not(.og-firmenkachel) { min-height: 6.6rem; }
  .og-diagramm .og-firmenkachel { width: auto; min-width: 16rem; max-width: 24rem; }
  .og-aeste { display: flex; justify-content: center; align-items: flex-start; gap: 0;
    margin: 0; padding-top: var(--og-luft); position: relative; }
  .og-aeste::before { content: ""; position: absolute; top: 0; left: 50%; height: var(--og-luft);
    border-left: 2px solid var(--og-linie); }
  .og-aeste > .og-knoten { padding: var(--og-luft) .45rem 0; }
  .og-aeste > .og-knoten::before, .og-aeste > .og-knoten::after {
    content: ""; position: absolute; top: 0; bottom: auto; left: auto; width: 50%; height: var(--og-luft);
    border: 0; border-top: 2px solid var(--og-linie); }
  .og-aeste > .og-knoten::before { right: 50%; }
  .og-aeste > .og-knoten::after { left: 50%; border-left: 2px solid var(--og-linie); }
  .og-aeste > .og-knoten:first-child::before, .og-aeste > .og-knoten:last-child::after { border-top: 0; }
  .og-aeste > .og-knoten:last-child::before { border-right: 2px solid var(--og-linie); border-radius: 0 .6rem 0 0; }
  /* Die runde Ecke des letzten Kindes führt schon hinunter - der gerade Strich daneben stand 2 px versetzt doppelt
     (Nutzer 07.10.2026: „darstellungsfehler"). Ein einziges Kind braucht ihn weiter. */
  .og-aeste > .og-knoten:last-child:not(:only-child)::after { border-left: 0; }
  .og-aeste > .og-knoten:first-child::after { border-radius: .6rem 0 0 0; }
  .og-aeste > .og-knoten:only-child::before { content: none; }
  .og-aeste > .og-knoten:only-child::after { border-top: 0; border-radius: 0; }

  /* Hängen darunter nur Blätter (Wien, Linz, Graz), stehen sie untereinander: Sonst
     wird ein Bereich mit drei Standorten dreimal so breit wie nötig. Eine Linie
     läuft hinter den Kacheln durch und ist nur zwischen ihnen zu sehen. */
  .og-aeste.og-stapel { flex-direction: column; align-items: center; gap: .7rem; }
  .og-stapel > .og-knoten { padding: 0; }
  .og-stapel > .og-knoten::before, .og-stapel > .og-knoten::after { content: none; }
  .og-stapel::after { content: ""; position: absolute; left: 50%; top: var(--og-luft); bottom: 1rem;
    border-left: 2px solid var(--og-linie); }
  .og-stapel .og-kachel { z-index: 1; }
}

/* ── Mein Team als Organigramm (Nutzer 05.10.2026) ────────────────────────────
   Dasselbe Baumbild wie das Organigramm der Einstellungen, in den Kacheln stehen
   die Menschen. Der rote Kreis zählt, was bei MIR liegt (kern/team_baum.py). Ein
   eigenes Farbpaar, weil Rot hier Fläche ist - --cm-warn ist Schrift. */
.team-organigramm { margin: 0 0 1.6rem; }
.team-organigramm .schritte-kopf p { margin: 0; display: flex; align-items: center; gap: .4rem; }
.team-organigramm .firmenreiter { margin-bottom: .7rem; }
/* An den Firmenreitern zählt der Kreis dasselbe - offen bei mir - und sieht darum gleich aus. */
.team-organigramm .firmenreiter a .zaehler { background: var(--cm-zaehler); color: var(--cm-zaehler-text); }
.team-offen { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .38rem;
  border-radius: 999px; background: var(--cm-zaehler); color: var(--cm-zaehler-text);
  font-size: .75rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.og-team .og-kopf { align-items: center; }
.og-team .og-kopf .team-offen { margin-left: auto; }
.og-team .og-firmenkachel h3 { margin: 0; font-size: 1.05rem; color: var(--cm-tinte); }
.team-personen { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .1rem; }
.team-person { display: flex; align-items: center; gap: .45rem; min-height: 2rem; padding: .2rem .35rem;
  border-radius: var(--radius); color: var(--cm-text); text-decoration: none; font-size: .85rem; }
.team-person:hover { background: var(--cm-einlage); }
.team-person[aria-current] { background: var(--cm-orange-hell); box-shadow: inset 0 0 0 2px var(--cm-orange); }
.team-person:focus-visible { outline: 3px solid var(--cm-orange); outline-offset: 1px; }
.team-person .initialen { width: 1.65rem; height: 1.65rem; font-size: .68rem; flex: none; }
.team-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-weitere > summary { cursor: pointer; margin-top: .2rem; font-size: .8rem; color: var(--cm-link); }
.schritte-person { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: -.2rem 0 .8rem; }
.schritte-person strong { color: var(--cm-tinte); }
@media (min-width: 1000px) {
  /* Etwas breiter als ein Organigramm ohne Namen: Hier stehen Menschen in der Kachel. */
  .og-team .og-diagramm .og-kachel:not(.og-firmenkachel),
  .og-personen .og-diagramm .og-kachel:not(.og-firmenkachel) { width: clamp(11rem, 13vw, 14.5rem); min-height: 0;
    align-content: start; }
  /* Neben der Mitarbeiterliste etwas schmaler: Fünf Einheiten nebeneinander (TVG) passen so ab ~1440 px neben die
     Liste; lange Namen kürzt die Kachel, voll stehen sie in der Liste. */
  .og-personen .og-diagramm .og-kachel:not(.og-firmenkachel) { width: clamp(9rem, 10vw, 14rem); }
  /* Allein auf ihrer Ebene (die Geschäftsführung ganz oben) kostet Breite nichts - dort stand „Geschäftsführu / ng". */
  .og-personen .og-aeste > .og-knoten:only-child > .og-kachel { width: clamp(11rem, 13vw, 14.5rem); }
}

/* Urlaub nach Gesetz (05.10.2026): woraus der Bestand besteht, ältester Anspruch zuerst (konten/_schichten.html). */
.konto-schichten { margin: .2rem 0 .7rem; }
.konto-schichten p { margin: 0 0 .2rem; }
.konto-schichten ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .88rem; }

/* ── Dichte am Schreibtisch (Nutzer 27.09.2026: „die Menüpunkte links sind zu groß … vielleicht ist
   auch allgemein alles groß … bissi dezenter … so wie beim Fleetman") ──────────────────────────────
   Maße aus Fleetman: Menüpunkt .885rem bei ~34 px, Überschrift ~1,5rem, Tabellen .875rem, Knöpfe und
   Felder 38 px. Nur ab 1024 px - am Handy bleiben Schrift und Ziele groß (Daumen, nicht Maus).
   Die Höhen selbst kommen aus --ziel/--ziel-klein an .oberflaeche; hier nur Schrift und Luft. */
@media (min-width: 1024px) {
  .oberflaeche .inhalt { padding-top: 1.4rem; }
  .oberflaeche .nav-punkt { min-height: 0; gap: .7rem; padding: .5rem .7rem; font-size: .885rem; line-height: 1.3;
                            border-radius: 7px; }
  .oberflaeche .nav-zeichen { width: 18px; height: 18px; }
  .oberflaeche .nav-gruppe { font-size: .67rem; padding: 1.1rem .7rem .35rem; }
  .nav-ergaenzung > summary { min-height: 0; padding: .5rem .7rem; font-size: .8rem; }
  .nav-ergaenzung .nav-punkt { padding-left: 1.1rem; }
  .schiene .marke, .kopf { min-height: 54px; }
  .oberflaeche .knopf { padding: .4rem .95rem; font-size: .875rem; }
  .inhalt-gesamt h1, .inhalt-gesamt .alltag-kopf h1 { font-size: 1.55rem; letter-spacing: -.03em; }
  .inhalt-arbeitsplatz .arbeitsplatz-kopf .gruss, .arbeitsplatz-kopf .gruss { font-size: 1.75rem; }
  .inhalt-gesamt .alltag-kopf { margin-bottom: 1.35rem; gap: .75rem 1.5rem; }
  .inhalt-gesamt .alltag-kopf .leise, .arbeitsplatz-kopf .leise { font-size: .9rem; margin-top: .3rem; }
  .inhalt-gesamt .alltag-kopf .etikett { font-size: .75rem; margin-bottom: .4rem; }
  .oberflaeche .karte { padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
  .oberflaeche .karte > .etikett:first-child,
  .oberflaeche .karte > .zeile-kopf:first-child { margin: -1.1rem -1.2rem 1rem; padding: .75rem 1.2rem; }
  .oberflaeche .etikett { font-size: .9rem; }
  .inhalt-gesamt .karte > h2:not(.etikett) { font-size: 1.05rem; }
  .leerzustand h2 { font-size: 1rem; }
  .leerzustand { padding-block: 1.6rem 1.8rem; }
  .inhalt-gesamt .tabelle { font-size: .875rem; }
  .inhalt-gesamt .tabelle th { font-size: .7rem; padding: .6rem .65rem; }
  .inhalt-gesamt .tabelle td { padding: .6rem .65rem; }
  .inhalt-gesamt :where(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea),
  .inhalt-gesamt .formular input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  .inhalt-gesamt .formular select, .inhalt-gesamt .formular textarea { padding: .45rem .7rem; }
  .inhalt-gesamt textarea { min-height: 5.5rem; }
  .oberflaeche label { font-size: .9rem; }
  .inhalt-gesamt .liste > li { padding-block: .55rem; }
  .inhalt-gesamt .rm-zeile { padding-block: .7rem; }
  .zahlenband strong, .zeit-zahlen strong { font-size: 1.4rem; }
  .oberflaeche .kennzahl__wert { font-size: 1.6rem; }
  .inhalt-arbeitsplatz .kennzahl__wert { font-size: clamp(1.5rem, 1.7vw, 1.85rem); }
  .inhalt-gesamt .zeit-stempeln h3 { font-size: 1.3rem; margin-block: .15rem .3rem; }
  /* „Jetzt" so hoch wie die Kontokacheln daneben, nicht umgekehrt (Nutzer 27.09.2026: die Kacheln
     „schon wieder unnötig hoch" - gemessen 251 zu 193 px). Der Kopf trug eine feste Mindesthöhe von
     3.65rem, und um Titel und Knöpfe stand mehr Luft als nötig. */
  .inhalt-gesamt .zeit-stempeln > .etikett { min-height: 0; }
  .inhalt-gesamt .zeit-stempeln .zeit-aktionen { margin-block: .75rem 0; }
  .inhalt-gesamt .zeit-stempeln .zeit-zahl-gross { font-size: clamp(2.3rem, 3.6vw, 3rem); }
  /* Mein Tag: Die Kontokacheln stehen daneben und werden auf die Höhe von „Jetzt" gezogen. Mit dem
     reservierten Rückmeldungsplatz (v0.21.42) wurde „Jetzt" 381 px hoch, die Kacheln mit - natürlich
     sind sie 173 px (Nutzer 27.09.2026: „unnötig hoch ... hässlich"). Darum hier Uhr NEBEN dem Text,
     zwei statt drei reservierte Textzeilen und eine reservierte Rückmeldungszeile: Die Knöpfe springen
     weiterhin nicht, die Karte bleibt so hoch wie vorher. Meine Zeit und das Handy bleiben unverändert. */
  .inhalt-arbeitsplatz .zeit-stempeln > .etikett .zeit-chip { padding: .1rem .55rem; font-size: .75rem; }
  .inhalt-arbeitsplatz .zeit-stempeln .zeit-jetzt { display: flex; flex-wrap: nowrap; align-items: center; gap: .9rem;
    margin: .5rem 0 0; }
  .inhalt-arbeitsplatz .zeit-stempeln .zeit-zahl-gross { font-size: 2.3rem; flex: none; }
  .inhalt-arbeitsplatz .zeit-stempeln .zeit-jetzt > .leise { min-block-size: 3em; min-width: 0; flex-basis: auto; }
  .inhalt-arbeitsplatz .zeit-stempeln-arbeit .zeit-jetzt::before { inset-block-start: 50%; translate: 0 -50%; }
  .inhalt-arbeitsplatz .zeit-stempel-rueckmeldung { min-block-size: 0; margin-block-start: .6rem; padding-block-start: .5rem; }
  /* Leer bleibt die Statuszeile im Baum (aria-live muss vorher da sein), belegt aber keinen Platz. Sie
     steht UNTER den Knöpfen: Kommt eine Quittung, wächst die Karte nach unten, nichts springt. */
  .inhalt-arbeitsplatz .zeit-stempel-rueckmeldung:empty { margin-block-start: 0; padding-block-start: 0; border-top-width: 0; }
  .inhalt-konten .konto-verfuegbar__wert { font-size: clamp(1.6rem, 2.2vw, 2.2rem); }
  .inhalt-gesamt .monats-zahl strong { font-size: 1.5rem; }
  .inhalt-zeit .zeit-wochentag strong { font-size: 1.2rem; }
}

/* ── Gleiche Breite auch innen (Nutzer 27.09.2026 zu „Meine Konten": „ur schmal … überall die selbe
   Breite"). Die Seite war nicht schmaler - der Leerzustand stand allein in der ersten von zwei
   Rasterspalten. Ein Leerzustand in einem Raster nimmt jetzt die ganze Zeile. */
.inhalt-gesamt :where(.konten-raster, .antraege-raster, .arbeitsplatz-unten, .kennzahlen) > .leerzustand { grid-column: 1 / -1; }

/* ── Rollen-Tabelle und Paket-Einladung (v0.21.46, Nutzer 28.09.2026: Rollenvergabe „URRR mühsam").
   Pakete sind gleich große Kacheln in einer Reihe; die Häkchen stehen mittig unter ihrer Rolle. */
.rollen-pakete { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.rollen-paket { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left;
  font: inherit; color: var(--cm-text); background: var(--cm-karte); cursor: pointer;
  border: 1px solid var(--cm-linie-stark); border-radius: var(--radius); padding: .75rem .9rem; min-height: 100%; }
.rollen-paket:hover, .rollen-paket:focus-visible { border-color: var(--cm-orange); }
.rollentabelle th, .rollentabelle td { vertical-align: middle; }
/* Die Gesellschaft ist Zeilenkopf (für Screenreader), liest sich aber wie ein Name, nicht wie ein Spaltenkopf. */
.inhalt-gesamt .rollentabelle tbody th { text-transform: none; letter-spacing: 0; font-size: inherit;
  font-weight: 600; color: var(--cm-text); }
.rollentabelle-spalte, .rollentabelle-zelle { text-align: center; }
.rollentabelle-spalte > span { display: block; }
.rollentabelle-alle { display: inline-flex; align-items: center; gap: .3rem; margin-top: .25rem; font-weight: 400;
  text-transform: none; letter-spacing: 0; }
.rollentabelle input[type=checkbox], .einladung-firmen input[type=checkbox] { width: 1.1rem; height: 1.1rem;
  accent-color: var(--cm-orange); }
.rollentabelle-herkunft { margin-top: 1rem; }
.rollentabelle-feld { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; cursor: pointer; }
.rollentabelle-name { display: none; }
/* Am Handy wäre die Tabelle 946 px breit (gemessen 28.09.2026): je Gesellschaft ein Block, die Rollen als
   beschriftete Häkchen in zwei Spalten. Die Spaltenköpfe bleiben für Screenreader im Baum. */
@media (max-width: 639px) {
  .rollentabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rollentabelle, .rollentabelle tbody, .rollentabelle tr { display: block; width: 100%; }
  .inhalt-gesamt .rollentabelle tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem 1rem; padding-block: .8rem; border-bottom: 1px solid var(--cm-linie); }
  .inhalt-gesamt .rollentabelle tbody th, .inhalt-gesamt .rollentabelle td { display: block; padding: 0; border: 0;
    text-align: left; }
  .inhalt-gesamt .rollentabelle tbody th { grid-column: 1 / -1; }
  .rollentabelle-name { display: inline; }
  .rollentabelle-feld { min-height: var(--ziel-klein, 44px); }
}
.einladung-paket { display: grid; gap: 1rem; }
.einladung-firmen { border: 1px solid var(--cm-linie); border-radius: var(--radius); padding: .6rem .9rem .8rem; margin: 0; }
.einladung-firmen legend { padding-inline: .3rem; font-weight: 600; }
.einladung-firmen > div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.einladung-firmen label { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; }
.einladung-paket > .knopf { justify-self: start; }

/* Meine Tage: Ein freier Tag ohne Zeit tritt zurück (Nutzer 28.09.2026: „die schrift bissi hellgrau …
   so das man sofort erkennt das ist quasi irrelevant"). Ein Wochenende MIT Zeit bleibt normal. */
.inhalt-gesamt .tabelle tr.tag-frei td { color: var(--cm-leise); }
.tag-korrigieren { margin: .3rem 0 0; }

.bericht-filter { display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:end; margin-bottom:1rem; }
.bericht-filter label { display:grid; gap:.35rem; margin:0; }
.bericht-filter > label { flex:1 1 16rem; max-width:30rem; }
.inhalt-gesamt .bericht-filter :is(input, button):not([type=hidden]) { height:var(--ziel); min-height:var(--ziel); margin:0; }
.bericht-filter p { margin:0; }
.bericht-filter input { width:100%; max-width:100%; }
.bericht-zweispaltig { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; }
.bericht-zweispaltig > * { min-width:0; }
.bericht-kennzahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap:1rem; }
.bericht-kennzahlen dt { color:var(--cm-leise); font-size:.875rem; }
.bericht-kennzahlen dd { margin:.3rem 0 0; font-size:1.35rem; font-weight:650; font-variant-numeric:tabular-nums; }
.bericht-rechnung { margin:0; }
.bericht-rechnung > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--cm-linie); }
.bericht-rechnung dd { margin:0; font-variant-numeric:tabular-nums; }
.bericht-rechnung > div:last-child { font-weight:700; border-top:2px solid var(--cm-tinte); }
.bericht-diagramm { margin:0; }
.bericht-diagramm figcaption { margin-bottom:1rem; }
.bericht-balkenzeile { display:grid; grid-template-columns:6.5rem minmax(0,1fr) 6rem; align-items:center; gap:.4rem; margin:.8rem 0; }
.bericht-balkenzeile dd { margin:0; }
.bericht-balken { position:relative; height:1.4rem; background:var(--cm-einlage); }
.bericht-null { position:absolute; left:50%; top:-.3rem; bottom:-.3rem; border-left:1px solid var(--cm-leise); }
.bericht-balkenwert { position:absolute; top:.15rem; bottom:.15rem; left:50%; background:var(--cm-chip-fertig); }
.bericht-balkenwert.bericht-minus { left:auto; right:50%; background:var(--cm-zaehler); }
.bericht-zahl { text-align:right; font-variant-numeric:tabular-nums; }
.monats-tabelle .bericht-woche { background:var(--cm-einlage); font-weight:650; }
.bericht-wochen tbody + tbody { border-top:2px solid var(--cm-linie-stark); }
@media (max-width:1000px) { .bericht-zweispaltig { grid-template-columns:1fr; } }
@media (max-width:639px) {
  .bericht-filter > * { width:100%; min-width:0; }
  .bericht-balkenzeile { grid-template-columns:minmax(0,1fr) 6rem; }
  .bericht-balken { grid-row:2; grid-column:1 / -1; }
  .bericht-wochen tbody { margin-bottom:1rem; }
}
.anw-druck { background: var(--cm-karte); color: var(--cm-tinte); }
.anw-druck main { padding: 2rem; }
.anw-druck-aktionen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.anw-druck table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.anw-druck th, .anw-druck td { text-align: left; padding: .5rem; overflow-wrap: anywhere; border-bottom: 1px solid var(--cm-linie); }
.anw-druck th:first-child { width: 32%; }
.anw-druck th:nth-child(2) { width: 34%; }
.anw-druck th:nth-child(3) { width: 14%; }
@media screen and (max-width: 639px) {
  .anw-druck main { padding: 1rem; }
  .anw-druck th, .anw-druck td { padding: .4rem .2rem; font-size: .8rem; }
}
@media print {
  .anw-druck main { padding: 0; }
  .anw-druck-aktionen { display: none; }
  .anw-druck h2 { break-after: avoid; }
  .anw-druck tr { break-inside: avoid; }
  .anw-druck thead { display: table-header-group; }
}

/* v0.26.5: „Mein Tag" am Schultag und der Homeoffice-Vermerk (nur Info) - über der Stempelkarte. */
.arbeitsplatz-stempel .mt-schule { margin-bottom: .8rem; display: grid; gap: .3rem; }
.arbeitsplatz-stempel .mt-schule h2 { margin: 0; font-size: 1.05rem; }
.arbeitsplatz-stempel .mt-schule p { margin: 0; }
.arbeitsplatz-stempel .mt-homeoffice { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .8rem; padding: .6rem .8rem; border: 1px solid var(--cm-linie); border-radius: var(--radius); background: var(--cm-karte); }
.arbeitsplatz-stempel .mt-homeoffice small { flex-basis: 100%; }
.arbeitsplatz-stempel .mt-wahl { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.arbeitsplatz-stempel .mt-wahl .knopf { min-height: 2.4rem; padding: .3rem .9rem; }
.arbeitsplatz-stempel .mt-wahl .mt-an { background: var(--cm-chip-fertig); color: var(--cm-chip-fertig-text); border-color: var(--cm-chip-fertig); }
/* v0.26.9 (Dokumente): ein Kasten fuer das, was jemand tun muss - Abgelaufenes, Geschicktes, ein neuer Schluessel. */
.kasten-warn { display: grid; gap: .3rem; margin: 0 0 1rem; padding: .75rem 1rem; border-left: 4px solid var(--cm-orange);
  background: var(--cm-einlage); border-radius: 0 10px 10px 0; min-width: 0; overflow-wrap: anywhere; }