/* ============================================================
   HandwerkPro –€“ Designsystem
   Farben und Maße orientiert an gängigen Handwerker-Portalen:
   dunkelblaue Seitenleiste, weiße Arbeitsfläche, blaue Primäraktion.
   ============================================================ */

:root {
    --navy: #102F4B;
    --navy-hell: #1B4670;
    --navy-tief: #0B2337;
    --primaer: #0D87F2;
    --primaer-dunkel: #0A6FC7;
    --primaer-blass: #E7F2FE;
    --akzent: #F1553C;

    --text: #3C434A;
    --text-stark: #17212B;
    --text-schwach: #7E8896;
    --text-invers: #FFFFFF;
    --nav-text: #C3D0DD;

    /* Zwei Randstärken: die zarte trennt innerhalb einer Fläche (Tabellenzeilen), die
       normale umschließt eine Fläche. Ein einziger Wert ließ Listen vergittert wirken. */
    --rand: #E3E7EC;
    --rand-zart: #EDF0F4;

    /* Eine dritte Stärke für das, was auffallen soll: die Suchleiste, ein Feld unter dem
       Zeiger, eine Kachel beim Überfahren. Sie stand vorher als feste Farbe an sieben Stellen
       im Blatt – und blieb damit im Dunkeln hell. */
    --rand-stark: #CBD6E2;
    --rand-staerker: #A9BCD0;

    --flaeche: #FFFFFF;
    --flaeche-blass: #F7F9FB;
    --flaeche-grau: #EFF2F6;

    /* Statusfarben in zwei Stärken: kräftig für Punkte und Balken, blass als Grund unter
       dunkler Schrift. Volltonfarbige Pillen in einer langen Liste schreien; ein blasser
       Grund mit dunkler Schrift ist ruhiger und besser lesbar. */
    --gruen: #4E9A6A;
    --gruen-dunkel: #2F6B44;
    --gruen-blass: #E6F4EC;
    --gelb: #D9A227;
    --gelb-dunkel: #8A6218;
    --gelb-blass: #FBF2DC;
    --rot: #D95C5C;
    --rot-dunkel: #A83A3A;
    --rot-blass: #FBE9E9;
    --slate: #5F7383;
    --slate-blass: #ECF0F4;
    --navy-blass: #E8EDF3;
    --grau: #E7E9ED;

    --radius-klein: 8px;
    --radius: 10px;
    --radius-gross: 14px;

    /* Mehrschichtige, weiche Schatten statt einer harten Kante: näher an dem, was heutige
       Oberflächen zeigen, und sie halten die Flächen trotzdem klar getrennt. */
    --schatten: 0 1px 2px rgba(16, 47, 75, .05), 0 2px 6px rgba(16, 47, 75, .04);
    --schatten-mittel: 0 2px 4px rgba(16, 47, 75, .06), 0 8px 20px rgba(16, 47, 75, .07);
    --schatten-hoch: 0 12px 32px rgba(16, 47, 75, .14), 0 2px 8px rgba(16, 47, 75, .08);

    /* Ein Fokusring für alles Bedienbare – sichtbar, aber nicht schreiend. */
    --ring: 0 0 0 3px rgba(13, 135, 242, .22);

    --nav-breite: 232px;
    --kopf-hoehe: 64px;
}

/* ---------- Dunkle Oberfläche ----------
   Die Außendienst-App hat sie seit je (`Farben.xaml` führt sieben eigene Dunkelwerte); die
   Weboberfläche hatte keine. Wer morgens im dunklen Fahrzeug das Tablet nimmt, bekam in der App
   die dunkle Oberfläche und im Browser desselben Geräts die helle.

   **Nur die Token werden getauscht, keine Regel weiter unten.** Das ganze Stilblatt greift
   ohnehin über die Variablen zu; eine zweite Regel je Bauteil wäre die zweite Wahrheit, gegen
   die dieses Haus überall sonst argumentiert. Die Werte sind die der App – abgeschrieben und
   nicht neu erfunden, damit Gerät und Browser gleich aussehen.

   **Nach der Wahl des Benutzers, nicht nach der des Systems.** Sie hing zuerst an
   `prefers-color-scheme` – das war die billigste Lösung und die falsche Stelle: Ein Monteur,
   dessen Telefon dauerhaft dunkel steht, bekam die dunkle Oberfläche auch mittags auf der
   hellen Baustelle, und wer sie umgekehrt abends wollte, musste sein Betriebssystem umstellen.
   Jetzt entscheidet `Mitarbeiter.Thema` (hell / dunkel / nach der Uhr), und das Ergebnis steht
   als `data-thema` am Wurzelelement – gesetzt von `Dienste/Themazustand.cs`, gerechnet von
   `Handwerk.Shared/Farbwahl.cs`.

   **Ein Selektor und keine Medienabfrage daneben.** Zwei Wege in dieselben Token (Systemwahl
   *und* Benutzerwahl) hießen, den ganzen Satz doppelt zu pflegen – und beim ersten neuen Ton
   liefen sie auseinander. */
:root[data-thema="dunkel"] {
    --text: #D7DCE2;
    --text-stark: #F2F5F8;
    --text-schwach: #96A0AC;

    --flaeche: #132430;
    --flaeche-blass: #0D1A24;
    --flaeche-grau: #1B2E3C;

    --rand: #263B4B;
    --rand-zart: #1E3240;
    --rand-stark: #35526A;
    --rand-staerker: #466882;

    /* Die Seitenleiste war schon dunkel – sie rückt nur eine Stufe tiefer, sonst stünde sie
       heller da als die Arbeitsfläche daneben. */
    --navy: #0E2432;
    --navy-hell: #16384D;
    --navy-tief: #091A25;

    /* Das Blau wird eine Spur heller: Auf dunklem Grund verliert der Ausgangston zu viel
       Kontrast, und an ihm hängt jeder Knopf, der etwas auslöst. */
    --primaer: #3D9BF5;
    --primaer-dunkel: #2B85DB;
    --primaer-blass: #16304A;

    /* Die blassen Töne sind im Hellen fast weiß – im Dunkeln müssen sie fast schwarz sein,
       sonst leuchtet ein Hinweisband heller als die Seite. */
    --gruen-blass: #14312270;
    --gelb-blass: #3A2E1070;
    --rot-blass: #3A1C1C70;
    --slate-blass: #1B2E3C;
    --navy-blass: #16293A;
    --grau: #22323F;

    /* Die hellen Varianten tragen auf dunklem Grund nicht mehr – dort gilt der Grundton. */
    --gruen-dunkel: #6FBF8C;
    --gelb-dunkel: #E0B84A;
    --rot-dunkel: #E88080;

    /* Schatten auf dunklem Grund sieht man nicht; was die Fläche abheben muss, tut es über
       den Rand. Hier bleibt nur ein Hauch Tiefe. */
    --schatten: 0 1px 2px rgba(0, 0, 0, .28);
    --schatten-mittel: 0 2px 6px rgba(0, 0, 0, .34);
    --schatten-hoch: 0 12px 32px rgba(0, 0, 0, .46);
    --ring: 0 0 0 3px rgba(61, 155, 245, .3);
}

/* Bilder und Zeichnungen kommen auf weißem Grund aus dem Server – Belegvorschau, Logo,
   Bauteilzeichnung. Sie werden nicht eingefärbt: Ein invertiertes Fenstermaß ist kein
   Fenstermaß mehr.

   **Die eine Stelle, an der ein fester Wert richtig ist.** Hier stand `var(--flaeche)`, und das
   ist im Dunkeln dunkel – also genau die Farbe, vor der eine Bauteilzeichnung mit ihren dunklen
   Strichen verschwindet. Der Inhalt ist nicht mitgetauscht worden, also darf sein Grund es auch
   nicht: Er bleibt hell, und zwar in beiden Farbwelten derselbe. */
:root[data-thema="dunkel"] .vorschau img,
:root[data-thema="dunkel"] .zeichnung,
:root[data-thema="dunkel"] .belegbild,
:root[data-thema="dunkel"] .fensterliste__bild {
    background: #FFFFFF;
    border-radius: var(--radius-klein);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: Rubik, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--flaeche);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--text-stark); }
h1 { font-size: 26px; letter-spacing: -.02em; }
h2 { font-size: 18px; letter-spacing: -.01em; }
h3 { font-size: 15px; }

a {
    color: var(--primaer);
    text-decoration: none;
    text-underline-offset: 2px;
}

a:hover { text-decoration: underline; }

/* Zahlen in gleicher Breite. In einer Rechnungsliste stehen die Betraege damit untereinander
   auf der Stelle, statt je nach Ziffer zu wandern – der Unterschied faellt erst auf, wenn
   man es einmal richtig gesehen hat. */
table.tabelle,
.kennzahl__wert,
.summenblock,
.geld,
.zelle-rechts {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- Startanzeige ---------- */
.start-lader {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.start-lader__ring,
.lade-ring {
    width: 26px;
    height: 26px;
    border: 2px solid var(--rand);
    border-top-color: var(--slate);
    border-radius: 50%;
    animation: dreh .8s linear infinite;
}

@keyframes dreh { to { transform: rotate(360deg); } }

.lade-flaeche {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

/* ---------- Grundgerüst ---------- */
.huelle {
    display: flex;
    min-height: 100vh;
}

.nav {
    width: var(--nav-breite);
    flex: 0 0 var(--nav-breite);

    /* Ein sehr flacher Verlauf gibt der Leiste Tiefe, ohne dass es auffällt. */
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-tief) 100%);
    color: var(--nav-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

.nav__marke {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--kopf-hoehe);
    padding: 0 16px;
    flex: 0 0 var(--kopf-hoehe);
}

.nav__zeichen {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: var(--akzent);
    position: relative;
    flex: 0 0 26px;
}

.nav__zeichen::after {
    content: "";
    position: absolute;
    inset: 7px 4px 0 4px;
    background: var(--navy-tief);
    border-radius: 2px;
}

.nav__wort {
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    letter-spacing: .2px;
}

.nav__wort span { color: var(--akzent); }

.nav__liste {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 8px;
    flex: 1 1 auto;
}

/* Der aktive Punkt ist eine abgerundete Fläche statt eines Blocks mit Randstreifen – das
   ist die Form, die heute jede Seitenleiste hat, und sie lässt die Leiste luftiger wirken. */
.nav__punkt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: var(--radius-klein);
    color: var(--nav-text);
    font-size: 14px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}

.nav__punkt:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    text-decoration: none;
}

.nav__punkt.aktiv {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--akzent);
}

.nav__punkt svg { flex: 0 0 18px; opacity: .8; }
.nav__punkt.aktiv svg { opacity: 1; }

.nav__unterliste {
    list-style: none;
    margin: 2px 0 6px;
    padding: 0;
}

.nav__unterpunkt {
    display: block;
    padding: 7px 12px 7px 42px;
    border-radius: var(--radius-klein);
    color: var(--nav-text);
    font-size: 13px;
}

.nav__unterpunkt:hover { background: rgba(255, 255, 255, .05); }

.nav__unterpunkt:hover { color: #fff; text-decoration: none; }
.nav__unterpunkt.aktiv { color: #fff; font-weight: 500; }

.nav__marker {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primaer);
    margin-right: 8px;
    vertical-align: middle;
}

.nav__fuss {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav__fuss-name {
    flex: 1 1 auto;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav__abmelden {
    background: none;
    border: none;
    color: var(--nav-text);
    cursor: pointer;
    padding: 4px;
    display: flex;
}

.nav__abmelden:hover { color: #fff; }

/* ---------- Die eingeklappte Menüleiste ----------
   Eine Schiene aus Symbolen statt einer Spalte mit Wörtern. Die Leiste ist 232 Pixel breit;
   auf einem Tablet im Hochformat (768) ist das fast ein Drittel der Arbeitsfläche, und es ist
   der Unterschied zwischen drei und fünf sichtbaren Tabellenspalten.

   Die Breite steht an einer Stelle – der Variablen –, damit Leiste, Marke und Fuß nicht
   auseinanderlaufen. Was wegfällt, wird nicht verkleinert, sondern ausgeblendet: Ein Wort in
   sieben Pixeln ist kein Wort mehr, nur ein grauer Strich. */
.nav__klappe {
    background: none;
    border: none;
    color: var(--nav-text);
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    display: flex;
    border-radius: var(--radius-klein);
}

.nav__klappe:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.nav--schmal {
    --nav-breite: 60px;
    width: 60px;
    flex: 0 0 60px;
}

/* Die Marke wird zum Zeichen, und der Knopf rutscht darunter: nebeneinander bliebe in
   vierundsechzig Pixeln für keines von beiden genug Platz. */
.nav--schmal .nav__marke {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: auto;
    flex: 0 0 auto;
    padding: 10px 0;
}

/* Eingeklappt bleibt das Symbol und sonst nichts. Ein auf „Tages…" gekürztes Wort ist kein
   Wort mehr, sondern ein Fleck, der Platz kostet; wer den Namen braucht, bekommt ihn über den
   `title` am Punkt. */
.nav--schmal .nav__wort,
.nav--schmal .nav__fuss-name,
.nav--schmal .nav__unterliste,
.nav--schmal .nav__punkt span { display: none; }

.nav--schmal .nav__klappe { margin-left: 0; }

.nav--schmal .nav__liste { padding: 6px 6px 0; }

/* Vierundvierzig Pixel hoch: Das ist die Fläche, die ein Finger sicher trifft. Am Schreibtisch
   fällt sie nicht auf, auf dem Tablet ist sie der Unterschied zwischen treffen und danebentippen. */
.nav--schmal .nav__punkt {
    justify-content: center;
    gap: 0;
    padding: 0;
    min-height: 44px;
    box-shadow: none;
}

.nav--schmal .nav__punkt.aktiv {
    box-shadow: none;
    background: rgba(255, 255, 255, .14);
}

.nav--schmal .nav__fuss {
    flex-direction: column;
    gap: 8px;
    padding: 10px 0;
}

/* ---------- Bedienung mit dem Finger ----------
   Gilt nur, wo der Zeiger grob ist: Tablet und Telefon. Der Bürorechner mit Maus bleibt
   unberührt – dort wäre alles vierundvierzig Pixel hoch nur aufgeblasen.

   Vierundvierzig ist die Fläche, die ein Finger sicher trifft; die Außendienst-App rechnet aus
   demselben Grund mit achtundvierzig Punkten. Angefasst wird die **Höhe**, nicht die
   Schriftgröße: Ein Formular, dessen Schrift auf dem Tablet größer ist als am Rechner, sieht
   nach zwei verschiedenen Programmen aus. */
@media (pointer: coarse) {
    .knopf { height: 44px; }
    .knopf--klein { height: 38px; padding: 0 15px; }

    .feld,
    select.feld,
    input.feld { height: 44px; }

    /* Ein Haken von vierzehn Pixeln trifft niemand. Die Fläche wächst, das Zeichen nicht. */
    input[type="checkbox"],
    input[type="radio"] { width: 20px; height: 20px; }

    /* Zeilen in Listen sind Sprungziele – auch sie brauchen Fläche unter dem Finger. */
    .tabelle tbody td { padding-top: 11px; padding-bottom: 11px; }

    .nav__punkt { min-height: 44px; }

    /* Die kleinen Symbolknöpfe sind die schlimmsten Ziele: das Fragezeichen misst 24 Pixel,
       das Kreuz zum Schließen 29. Das **Zeichen** bleibt klein – nur die Fläche darum wächst,
       sonst sähe der Dialogkopf auf dem Tablet anders aus als am Rechner. */
    .hilfeknopf,
    .schliessen,
    .nav__klappe,
    .nav__abmelden {
        min-width: 40px;
        min-height: 40px;
        justify-content: center;
    }
}

/* ---------- Kopfband mit globaler Suche ---------- */
/* Die Leiste steht über jeder Seite und bleibt beim Blättern stehen: gesucht wird meistens
   mitten in einer anderen Arbeit, oft mit dem Telefon am Ohr. */
.kopfband {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 26px;

    /* Der Grund ist leicht getönt und trägt einen Hauch Navy, damit die weiße Leiste
       darauf sichtbar aufliegt statt mit dem Kopf der Seite zu verschwimmen. */
    background: linear-gradient(180deg, var(--flaeche-blass) 0%, var(--flaeche-grau) 100%);
    border-bottom: 1px solid var(--rand);
}

.suchleiste {
    position: relative;
    width: 100%;
    max-width: 760px;
}

/* Das Feld ist absichtlich größer als ein gewöhnliches Eingabefeld: es ist der Weg zu
   allem, und wer zum ersten Mal vor dem Programm sitzt, soll es zuerst sehen. */
.suchleiste__feld {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 14px;
    height: 46px;
    background: var(--flaeche);
    border: 2px solid var(--rand-stark);
    border-radius: 999px;
    box-shadow: var(--schatten);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.suchleiste__feld:hover { border-color: var(--rand-staerker); }

.suchleiste__feld:focus-within {
    border-color: var(--primaer);
    box-shadow: 0 0 0 4px var(--primaer-blass), 0 2px 10px rgba(13, 135, 242, .14);
}

/* Die Lupe trägt die Primärfarbe: ein Farbpunkt genügt, damit das Auge zuerst hier landet. */
.suchleiste__zeichen {
    color: var(--primaer);
    flex: 0 0 auto;
}

.suchleiste__eingabe {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--text-stark);
}

.suchleiste__eingabe::placeholder { color: var(--text-schwach); }

/* Das Tastenkürzel steht im Feld, wo es gebraucht wird –€“ und es tut auch etwas. */
.suchleiste__kuerzel {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--slate);
    background: var(--flaeche-grau);
    border: 1px solid var(--rand);
    border-radius: 6px;
    white-space: nowrap;
}

.suchleiste__feld:focus-within .suchleiste__kuerzel { display: none; }

.suchleiste__eingabe::-webkit-search-cancel-button { display: none; }

.suchleiste__leeren {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--text-schwach);
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 50%;
}

.suchleiste__leeren:hover { background: var(--flaeche-grau); color: var(--text); }

.suchleiste__lader {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--rand);
    border-top-color: var(--primaer);
    border-radius: 50%;
    animation: suchdreh .7s linear infinite;
}

@keyframes suchdreh { to { transform: rotate(360deg); } }

/* Der Schleier liegt hinter der Liste und fängt den Klick daneben ab. */
.suchleiste__schleier {
    position: fixed;
    inset: 0;
    z-index: 45;
}

.suchleiste__liste {
    position: absolute;
    z-index: 50;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten-hoch);
}

/* Die Antwort auf eine Frage –€“ Satz und die Lesart darunter. */
/* ---------- Hilfechat in der Suchleiste ----------

   Er steht über den Trefferzeilen und muss sich von ihnen absetzen, ohne sie zu erschlagen:
   eigener Grund, eine Linie darunter, und die Dringlichkeit als schmaler Streifen links. Die
   Farbe kommt nur vom Streifen – ein ganz rot hinterlegter Kasten in einer Suchliste liest sich
   wie ein Fehler der Suche. */
.suchleiste__hilfe {
    padding: 10px 10px 12px;
    background: var(--flaeche-blass);
    border-bottom: 1px solid var(--rand);
}

.suchleiste__hilfe-kopf {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-schwach);
    margin-bottom: 6px;
}

.suchleiste__hilfe-satz {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-stark);
}

.suchleiste__lage {
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-left: 3px solid var(--rand);
    border-radius: var(--radius);
}

.suchleiste__lage--kritisch { border-left-color: var(--rot); }
.suchleiste__lage--wichtig { border-left-color: var(--gelb-dunkel); }
.suchleiste__lage--hinweis { border-left-color: var(--primaer); }

.suchleiste__lage-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.suchleiste__stufe {
    flex: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-schwach);
}

.suchleiste__lage-lage {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-schwach);
}

/* Nummeriert, weil die Reihenfolge Teil der Aussage ist: Der erste Schritt begrenzt den
   Schaden. Eine Aufzählung mit Punkten läse sich wie eine Auswahl. */
.suchleiste__schritte {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
}

.suchleiste__schritte li { margin-bottom: 3px; }

.suchleiste__lage-fuss,
.suchleiste__sprungziele {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.suchleiste__hilfelink,
.suchleiste__sprungziel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 12px;
    color: var(--primaer);
    background: none;
    border: 1px solid var(--rand);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
}

.suchleiste__hilfelink:hover,
.suchleiste__sprungziel:hover { border-color: var(--primaer); }

.suchleiste__hilfeseiten { margin-top: 4px; }

.suchleiste__hilfe-untertitel {
    display: block;
    font-size: 11px;
    color: var(--text-schwach);
    margin-bottom: 4px;
}

.suchleiste__hilfeseite {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    background: none;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 12px;
}

.suchleiste__hilfeseite:hover { background: var(--flaeche-blass); }
.suchleiste__hilfeseite strong { display: block; }
.suchleiste__hilfeseite span { color: var(--text-schwach); }

.suchleiste__antwort {
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 4px;
}

.suchleiste__antwort-satz {
    font-weight: 600;
    color: var(--text-stark);
}

.suchleiste__antwort-filter {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-schwach);
}

/* Kennzeichnung, dass ein Sprachmodell die Frage gedeutet hat. */
.suchleiste__quelle {
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 600;
    color: var(--primaer-dunkel);
    background: var(--primaer-blass);
    border-radius: 999px;
}

.suchleiste__antwort-filter a {
    margin-left: 8px;
    color: var(--primaer);
}

.suchleiste__gruppe {
    padding: 8px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.suchleiste__treffer {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-klein);
    text-align: left;
    font: inherit;
    color: var(--text);
    cursor: pointer;
}

.suchleiste__treffer.aktiv { background: var(--primaer-blass); }

.suchleiste__treffer-zeichen { color: var(--slate); flex: 0 0 auto; }

.suchleiste__treffer-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.suchleiste__titel {
    font-weight: 500;
    color: var(--text-stark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suchleiste__unter {
    font-size: 12px;
    color: var(--text-schwach);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suchleiste__zusatz {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-schwach);
    white-space: nowrap;
}

.suchleiste__leer,
.suchleiste__fuss {
    padding: 12px 10px;
    font-size: 13px;
    color: var(--text-schwach);
}

.suchleiste__fuss { border-top: 1px solid var(--rand); }

@media (max-width: 800px) {
    .kopfband { padding: 8px 14px; }
    .suchleiste { max-width: none; }
    .suchleiste__kuerzel { display: none; }
}
/* ---------- Arbeitsfläche ---------- */
.inhalt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;

    /* Die Arbeitsfläche liegt einen Hauch unter Weiß. Karten und Tabellen darauf sind weiß
       und heben sich damit ohne kräftige Rahmen ab – das ist der Griff, der eine Oberflaeche
       am meisten aufräumt. */
    background: var(--flaeche-blass);
}

.seiten-kopf {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px 12px;
    min-height: var(--kopf-hoehe);

    /* **Der Kopf bricht um, und zwar hier und nicht erst im Werkzeugblock.** Der Kommentar
       an `__werkzeuge` verspricht seit je, das Werkzeug rutsche auf schmalen Geräten unter
       die Überschrift – nur konnte es das nie: Ein Umbruch *innerhalb* des Werkzeugblocks
       stapelt dessen Knöpfe, schiebt den Block aber nicht in eine eigene Zeile. Solange der
       Elternteil `nowrap` war, blieb dem Titel nur, zu schrumpfen; er trägt `min-width: 0`
       und wurde damit klaglos auf null gedrückt.
       Gemessen bei 375 Pixeln, Menüleiste ausgeklappt: Titelblock 0 px auf allen vier
       geprüften Seiten – die Überschrift war schlicht weg –, dazu bis zu 141 px Überlauf
       nach rechts. Eingeklappt stand „Lager" auf 3 px. Beides sieht man im Hellen am
       Bürorechner nie. */
    flex-wrap: wrap;
}

.seiten-kopf__titel {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.seiten-kopf__werkzeuge {
    display: flex;
    align-items: center;
    gap: 10px;

    /* Auf schmalen Geräten rutscht das Werkzeug unter die Überschrift (dafür sorgt das
       `flex-wrap` am `.seiten-kopf`), und die Knöpfe stapeln sich darin, statt die
       Überschrift zusammenzuquetschen oder über den Rand zu laufen. */
    flex-wrap: wrap;

    /* Ohne das hier bliebe der Block bei seiner Mindestbreite stehen – ein Flex-Element hat
       `min-width: auto` – und der Umbruch darin käme gar nicht erst zum Zuge. */
    min-width: 0;
}

/* ---------- Farbwahl in der Übersicht ----------
   Drei Knöpfe in einer Schale, der gewählte hebt sich ab – dasselbe Muster wie die Reiter der
   Einstellungen, nur eine Nummer kleiner. Ein einzelner Umschalter wäre kompakter und verstecke
   zwei der drei Zustände: Man sähe weder, was gilt, noch, was der nächste Druck bringt. */
.themaschalter {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    background: var(--flaeche-blass);
}

.themaschalter__knopf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border: none;
    border-radius: calc(var(--radius-gross) - 3px);
    background: none;
    color: var(--text-schwach);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.themaschalter__knopf:hover { color: var(--text); }

/* Der gewählte Knopf wird **eingefärbt** und nicht nur angehoben. Zuerst trug er eine hellere
   Fläche samt Schatten – im Hellen genügte das, im Dunkeln nicht: Dort liegen die beiden
   Flächentöne nur sechs Stufen auseinander, und einen Schatten sieht man auf dunklem Grund
   ohnehin nicht. Über dieselbe Farbe wie der aktive Reiter der Einstellungen trägt es in beiden
   Welten – und sagt zugleich „ausgewählt" und nicht „liegt obenauf". */
.themaschalter__knopf--aktiv {
    background: var(--primaer-blass);
    color: var(--primaer-dunkel);
    font-weight: 600;
}

/* Im Kopf einer Seite zählt der Platz mehr als das Wort: Das Symbol allein sagt schon, worum es
   geht, und die drei Wörter nebeneinander schöben den „Erstellen"-Knopf aus dem Bild. Der Name
   steht weiter im `title` und für Vorleseprogramme im Knopf. */
@media (max-width: 1180px) {
    .themaschalter__knopf span { display: none; }
    .themaschalter__knopf { padding: 0 9px; }
}

/* Mit dem Finger bedient werden auch diese drei – sie sind die kleinsten Ziele im Seitenkopf. */
@media (pointer: coarse) {
    .themaschalter__knopf { height: 38px; min-width: 40px; justify-content: center; }
}

.seiten-koerper {
    padding: 6px 28px 44px;
    flex: 1 1 auto;
}

/* Eine Reihe von Zahlen als eine Fläche: Entwurf, Unbezahlt, Überfällig, Im Mahnlauf.
   Vorher stand das als Gefüge von Inline-Angaben im Markup und sah aus wie ein Kasten aus
   einem älteren Programm. */
.zahlenband {
    display: flex;
    margin-bottom: 18px;
    max-width: 820px;
    background: var(--flaeche);
    border: 1px solid var(--rand-zart);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.zahlenband__feld {
    flex: 1 1 0;
    padding: 13px 18px;
    position: relative;
}

/* Trennung durch eine kurze Linie statt durch einen vollen Rahmen – sie fuehrt das Auge,
   ohne die Fläche zu zerschneiden. */
.zahlenband__feld + .zahlenband__feld::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--rand-zart);
}

.zahlenband__name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-schwach);
    margin-bottom: 2px;
}

.zahlenband__wert {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-stark);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .zahlenband { flex-wrap: wrap; }
    .zahlenband__feld { flex: 1 1 50%; }
}

.filterzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 14px;
    flex-wrap: wrap;
}

/* ---------- Bedienelemente ---------- */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease,
                transform .08s ease;
}

/* Beim Drücken sinkt der Knopf um ein Haar ein. Winzig, aber es macht die Bedienung
   greifbar – man sieht, dass der Druck angekommen ist. */
.knopf:active:not(:disabled) { transform: translateY(1px); }

.knopf--primaer {
    background: var(--primaer);
    color: #fff;
    box-shadow: 0 1px 2px rgba(10, 111, 199, .28), 0 2px 8px rgba(10, 111, 199, .18);
}

.knopf--primaer:hover {
    background: var(--primaer-dunkel);
    box-shadow: 0 1px 2px rgba(10, 111, 199, .32), 0 4px 12px rgba(10, 111, 199, .22);
}

.knopf--rand {
    background: var(--flaeche);
    color: var(--text-stark);
    border-color: var(--rand);
    box-shadow: 0 1px 1px rgba(16, 47, 75, .04);
}

.knopf--rand:hover { background: var(--flaeche-blass); border-color: var(--rand-stark); }

.knopf--still {
    background: transparent;
    color: var(--text);
}

.knopf--still:hover { background: var(--flaeche-grau); }

.knopf--gefahr {
    background: var(--rot);
    color: #fff;
    box-shadow: 0 1px 2px rgba(168, 58, 58, .24), 0 2px 8px rgba(168, 58, 58, .16);
}

.knopf--gefahr:hover { background: var(--rot-dunkel); }

.knopf--klein { height: 34px; padding: 0 13px; font-size: 13px; }

.knopf:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.feld {
    height: 40px;
    padding: 0 13px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-stark);
    background: var(--flaeche);
    width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.feld:hover:not(:focus) { border-color: var(--rand-stark); }
.feld::placeholder { color: var(--text-schwach); }

textarea.feld {
    height: auto;
    padding: 10px 12px;
    resize: vertical;
    line-height: 1.5;
}

.feld:focus,
.suche input:focus {
    outline: none;
    border-color: var(--primaer);
    box-shadow: var(--ring);
}

select.feld { cursor: pointer; }

.feld-gruppe { margin-bottom: 14px; }

.feld-gruppe label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-schwach);
    margin-bottom: 6px;
}

.feld-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 14px;
}

.suche {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 240px;
}

.suche svg {
    position: absolute;
    left: 11px;
    color: var(--text-schwach);
    pointer-events: none;
}

.suche input {
    height: 40px;
    width: 100%;
    padding: 0 13px 0 36px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    color: var(--text-stark);
    transition: border-color .12s ease, box-shadow .12s ease;
}

.schalter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-schwach);
}

/* ---------- Tabellen ---------- */
.tabelle-huelle {
    width: 100%;
    overflow-x: auto;
    background: var(--flaeche);
    border: 1px solid var(--rand-zart);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
}

table.tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* Kapitälchen und mehr Laufweite: der Kopf liest sich als Überschrift, nicht als erste
   Zeile. Ein mitlaufender Kopf wäre schön, geht hier aber nicht – die Hülle um die Tabelle
   muss breite Listen waagerecht scrollen können und ist damit selbst der Scrollbereich; ein
   „sticky“ darin hätte sich am Fenster nicht festgehalten. */
table.tabelle th {
    text-align: left;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-schwach);
    padding: 11px 12px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}

table.tabelle td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--rand-zart);
    vertical-align: middle;
}

table.tabelle tbody tr:last-child td { border-bottom: none; }

table.tabelle tbody tr {
    transition: background .1s ease;
}

table.tabelle tbody tr:hover { background: var(--flaeche-blass); }
table.tabelle tbody tr.klickbar { cursor: pointer; }
table.tabelle tbody tr.klickbar:hover { background: var(--primaer-blass); }

.zelle-rechts { text-align: right; }
.zelle-stark { font-weight: 500; color: var(--text-stark); }
.zelle-schwach { color: var(--text-schwach); }
.zelle-eng { width: 1%; white-space: nowrap; }

.tabelle-fuss {
    padding: 12px 14px;
    text-align: right;
    color: var(--text-schwach);
    font-size: 13px;
}

.leer-hinweis {
    padding: 56px 20px;
    text-align: center;
    color: var(--text-schwach);
    background: var(--flaeche-blass);
    border: 1px dashed var(--rand);
    border-radius: var(--radius);
}

.leer-hinweis h3 { color: var(--text); margin-bottom: 6px; }

/* ---------- Eingabefeld mit Vorschlägen ---------- */
/* Die Liste schwebt über dem Inhalt: in einer Tabellenzeile darf sie die Zeilenhöhe nicht
   verändern, sonst springt die ganze Positionstabelle beim Tippen. */
.vorschlagsfeld {
    position: relative;
}

.vorschlagsliste {
    position: absolute;
    z-index: 40;
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    max-width: 560px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(16, 47, 75, .12);
}

.vorschlag {
    padding: 7px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--rand-zart);
    font-size: 13px;
}

.vorschlag:last-child {
    border-bottom: none;
}

.vorschlag--aktiv {
    background: rgba(13, 135, 242, .08);
}

.vorschlag__zeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.vorschlag__fuss {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11px;
    margin-top: 2px;
}

/* ---------- Ablagefläche für Dateien ---------- */
/* Das Dateifeld liegt durchsichtig über der ganzen Fläche: so nimmt sie Fallenlassen und
   Klicken gleichermaßen an, ohne eigenes JavaScript. */
.ablage {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1px dashed var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    font-size: 13px;
    transition: border-color .12s, background .12s;
}

.ablage:hover {
    border-color: var(--primaer);
}

.ablage--aktiv {
    border-color: var(--primaer);
    border-style: solid;
    background: rgba(13, 135, 242, .06);
}

.ablage__eingabe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ablage__eingabe:disabled {
    cursor: progress;
}

.leer-hinweis h3 { color: var(--text); margin-bottom: 6px; }

/* ---------- Abzeichen ---------- */
/* Statuspillen mit blassem Grund, dunkler Schrift und einem farbigen Punkt. Volltonfarben
   über zwanzig Tabellenzeilen ergeben einen Flickenteppich, in dem gerade das Auffällige
   untergeht; so bleibt die Farbe erkennbar und die Liste ruhig. */
.abzeichen {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 23px;
    padding: 0 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

.abzeichen::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
    flex: 0 0 6px;
}

/* Der Rand jedes Abzeichens kommt aus seiner **eigenen Schriftfarbe** und nicht aus einer
   eigenen Farbe je Art. Sechs feste Pastelltöne standen hier – im Hellen richtig, im Dunkeln
   ein leuchtender Ring um eine dunkle Pille. Aus `currentColor` folgt der Rand jeder Farbwelt
   von selbst, und die nächste Abzeichenart braucht keinen siebten Ton. */
.abzeichen--blau {
    background: var(--primaer-blass);
    color: var(--primaer-dunkel);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
}

.abzeichen--gruen {
    background: var(--gruen-blass);
    color: var(--gruen-dunkel);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
}

.abzeichen--gelb {
    background: var(--gelb-blass);
    color: var(--gelb-dunkel);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
}

.abzeichen--rot {
    background: var(--rot-blass);
    color: var(--rot-dunkel);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
}

.abzeichen--slate {
    background: var(--slate-blass);
    color: var(--slate);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
}

.abzeichen--grau {
    background: var(--flaeche-grau);
    color: var(--text);
    border-color: var(--rand);
}

.abzeichen--navy {
    background: var(--navy-blass);
    color: var(--navy);
    border-color: color-mix(in srgb, currentColor 26%, transparent);
}

/* ---------- Karten ---------- */
.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand-zart);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.karte__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--rand-zart);
}

.karte__kopf h3 {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.karte__koerper { padding: 18px; }

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

/* ---------- Schnellzugriff ----------
   Kacheln, die sich jeder selbst aus dem Menü zieht. Die Farbe steht als Variable an der
   Kachel – gesetzt wird sie am Element, weil sie vom Benutzer kommt und nicht aus dem
   Stilblatt kommen kann; der Server lässt dafür nur einen Hexwert durch. */
.schnellzugriff { margin-bottom: 22px; }

.schnellzugriff__leer {
    border: 1px dashed var(--rand);
    border-radius: var(--radius-gross);
    padding: 16px 18px;
    color: var(--text-schwach);
    font-size: 13px;
    line-height: 1.55;
    background: var(--flaeche);
}

.schnellzugriff__leer strong { color: var(--text-stark); }

.schnellzugriff__hinweis {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-schwach);
}

/* Während etwas gezogen wird, zeigt der ganze Bereich, dass er annimmt. Ohne dieses Zeichen
   zieht man auf gut Glück und lässt daneben los. */
.schnellzugriff--bereit .schnellzugriff__leer,
.schnellzugriff--bereit .schnellzugriff__brett {
    outline: 2px dashed var(--primaer);
    outline-offset: 4px;
    border-radius: var(--radius-gross);
}

.schnellzugriff__brett {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 12px;
}

.schnellzugriff__kachel {
    position: relative;
    background: var(--flaeche);
    border: 1px solid var(--rand-zart);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    overflow: hidden;

    /* Der farbige Streifen oben statt einer farbigen Fläche: Die Kachel bleibt lesbar, und
       sechs verschiedene Volltonflächen nebeneinander sähen aus wie ein Spielbrett. */
    border-top: 3px solid var(--kachelfarbe);
    cursor: grab;
}

.schnellzugriff__kachel--ziel { outline: 2px solid var(--primaer); outline-offset: 2px; }

.schnellzugriff__sprung {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px 9px;
    color: var(--text-stark);
}

.schnellzugriff__sprung:hover { text-decoration: none; background: var(--flaeche-blass); }

.schnellzugriff__zeichen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-klein);
    background: color-mix(in srgb, var(--kachelfarbe) 12%, var(--flaeche));
    color: var(--kachelfarbe);
}

.schnellzugriff__titel {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schnellzugriff__werkzeuge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px 9px;
}

.schnellzugriff__werkzeug {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    border-radius: var(--radius-klein);
    padding: 5px 7px;
    font: inherit;
    font-size: 12px;
    color: var(--text-schwach);
    cursor: pointer;
}

.schnellzugriff__werkzeug:hover { background: var(--flaeche-blass); color: var(--text-stark); }

.schnellzugriff__werkzeug--neu { margin-right: auto; color: var(--kachelfarbe); font-weight: 500; }
.schnellzugriff__werkzeug--neu:hover { color: var(--kachelfarbe); text-decoration: none; }

.schnellzugriff__farbpunkt {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--kachelfarbe);
    display: inline-block;
}

.schnellzugriff__farben {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 10px 11px;
}

.schnellzugriff__farbe {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-schwach);
}

.schnellzugriff__farbe--keine { background: var(--flaeche); }

/* Die Ablagefläche erscheint erst, während etwas aus dem Menü unterwegs ist – ein
   gestrichelter Kasten, der immer dasteht, ist nur ein Loch in der Reihe. */
.schnellzugriff__ablage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 86px;
    border: 2px dashed var(--primaer);
    border-radius: var(--radius-gross);
    color: var(--primaer);
    font-size: 13px;
}

/* Die Tagesübersicht: links die Termine, rechts die Spalte mit Angeboten und Rechnungen.
   Die rechte Spalte ist fest 320 breit – unter etwa neunhundert Pixeln bleiben links keine
   dreihundert mehr übrig, und dann steht in der Terminkachel ein Wort je Zeile. */
.tagesraster {
    display: grid;
    gap: 22px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr) 320px;
}

.tagesraster--breit { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 900px) {
    .tagesraster { grid-template-columns: minmax(0, 1fr); }
}

.kennzahl {
    background: linear-gradient(180deg, var(--flaeche) 0%, var(--flaeche-blass) 100%);
    border: 1px solid var(--rand-zart);
    border-radius: var(--radius-gross);
    padding: 17px 19px;
    box-shadow: var(--schatten);
    transition: box-shadow .16s ease, transform .16s ease;
}

.kennzahl:hover {
    box-shadow: var(--schatten-mittel);
    transform: translateY(-1px);
}

.kennzahl__titel {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-schwach);
    margin-bottom: 8px;
}

.kennzahl__wert {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-stark);
    letter-spacing: -.03em;
}

.kennzahl__fuss {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-schwach);
    display: flex;
    align-items: center;
    gap: 6px;
}

.trend {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.trend--plus { background: var(--gruen-blass); color: var(--gruen-dunkel); }
.trend--minus { background: var(--rot-blass); color: var(--rot-dunkel); }
.trend--neutral { background: var(--flaeche-grau); color: var(--text-schwach); }

/* ---------- Reiter ---------- */
/* Die Reiterzeile bricht um, statt über den Rand zu laufen. Bei elf Reitern passte sie noch
   in eine Zeile, beim zwölften stand der letzte außerhalb – erreichbar war er dann nicht mehr,
   und gefehlt hätte er erst dem, der ihn sucht. Ein seitliches Rollen wäre die andere
   Möglichkeit; es versteckt die hinteren Reiter aber genauso, nur mit Balken. */
.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 18px;
}

.reiter__punkt {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-schwach);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: var(--radius-klein) var(--radius-klein) 0 0;
    font-family: inherit;
    transition: color .12s ease, background .12s ease, border-color .12s ease;
}

.reiter__punkt:hover { color: var(--text-stark); background: var(--flaeche-blass); }

.reiter__punkt.aktiv {
    color: var(--primaer-dunkel);
    border-bottom-color: var(--primaer);
    font-weight: 600;
}

/* ---------- Avatar ---------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    flex: 0 0 auto;
    letter-spacing: .3px;
}

.avatar--gross { width: 36px; height: 36px; font-size: 13px; }
.avatar-reihe { display: flex; gap: -6px; }
.avatar-reihe .avatar + .avatar { margin-left: -8px; border: 2px solid var(--flaeche); }

/* ---------- Kalender ---------- */
.kalender {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--flaeche);
}

.kalender__kopf {
    display: grid;
    grid-template-columns: 76px repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--rand);
    background: var(--flaeche-blass);
}

.kalender__kopf div {
    padding: 9px 10px;
    font-size: 13px;
    color: var(--text-schwach);
    border-left: 1px solid var(--rand);
}

.kalender__kopf div:first-child { border-left: none; }
.kalender__kopf .heute { color: var(--text-stark); font-weight: 500; }

.kalender__zeile {
    display: grid;
    grid-template-columns: 76px repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--rand);
    min-height: 72px;
}

.kalender__zeile:last-child { border-bottom: none; }

.kalender__person {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-right: 1px solid var(--rand);
    background: var(--flaeche-blass);
}

.kalender__zelle {
    border-left: 1px solid var(--rand);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.kalender__zelle:first-of-type { border-left: none; }
.kalender__zelle.wochenende { background: var(--flaeche-blass); }

.termin {
    border-left: 3px solid var(--primaer);
    background: var(--flaeche-blass);
    border-radius: 4px;
    padding: 5px 7px;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
}

.termin:hover { background: var(--flaeche-grau); }
.termin__titel {
    font-weight: 500;
    color: var(--text-stark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.termin__zeit { color: var(--text-schwach); font-size: 11px; }

/* ---------- Balkendiagramm ---------- */
.diagramm {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 230px;
    padding: 10px 4px 0;
    border-bottom: 1px solid var(--rand-zart);
}

.diagramm__saeule {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 6px;
}

/* Der Balken bekommt oben eine runde Kappe und einen leichten Verlauf: das ist der
   Unterschied zwischen einem gezeichneten Diagramm und einem gestapelten Kasten. */
.diagramm__balken {
    width: 100%;
    max-width: 52px;
    background: linear-gradient(180deg, #3AA0F7 0%, var(--primaer) 60%, var(--primaer-dunkel) 100%);
    border-radius: 6px 6px 2px 2px;
    min-height: 3px;
    box-shadow: 0 1px 2px rgba(10, 111, 199, .2);
    transition: filter .14s ease, transform .14s ease;
}

.diagramm__saeule:hover .diagramm__balken {
    filter: brightness(1.06) saturate(1.1);
    transform: scaleY(1.01);
    transform-origin: bottom;
}

.diagramm__achse {
    display: flex;
    gap: 10px;
    padding: 8px 4px 0;
}

.diagramm__achse span {
    flex: 1 1 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-schwach);
}

/* Zwei Reihen in einer Spalte – erstellt gegen abgeschlossen, erfasst gegen verrechnet.
   Sie stehen nebeneinander und nicht gestapelt: Gestapelt läse sich die zweite Reihe als
   Teil der ersten, und genau das ist sie in der Projektauswertung nicht. */
.diagramm__paar {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
    max-width: 52px;
    height: 100%;
}

.diagramm__paar .diagramm__balken { max-width: none; }

.diagramm__balken--zweit {
    background: linear-gradient(180deg, #7FC8A0 0%, var(--gruen) 60%, var(--gruen-dunkel) 100%);
    box-shadow: 0 1px 2px rgba(31, 122, 74, .18);
}

/* Die Erklärung der beiden Reihen. Ohne sie sind es zwei Farben ohne Bedeutung. */
.diagrammlegende {
    display: flex;
    gap: 18px;
    padding: 0 4px 10px;
    font-size: 12px;
    color: var(--text-schwach);
}

.diagrammlegende span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.diagrammlegende i {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--primaer);
}

.diagrammlegende i.zweit { background: var(--gruen); }

/* ---------- Rangliste ----------
   Ein Balken hinter der Zahl. Er ersetzt keine Spalte, er macht die Verhältnisse in einer
   Spalte sichtbar: Welcher Kunde die Hälfte des Jahres trägt, liest man an der Länge
   schneller ab als an fünfzehn Beträgen untereinander. */
.rangbalken {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--flaeche-blass);
    overflow: hidden;
    margin-top: 5px;
}

.rangbalken__fuellung {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 3px;
    background: var(--primaer);
    opacity: .8;
}

/* ---------- Trichter ----------
   Angebot → Auftrag → Rechnung. Die Stufen stehen nebeneinander und nicht als Pyramide:
   Eine gezeichnete Trichterform suggeriert, dass die Stufen auseinander hervorgehen – hier
   zählt jede für sich, was im Zeitraum entstanden ist. */
.trichter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.trichter__stufe {
    border: 1px solid var(--rand-zart);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--flaeche);
}

.trichter__name {
    font-size: 12px;
    color: var(--text-schwach);
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.trichter__wert {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-stark);
    margin: 2px 0 6px;
}

.trichter__fuss {
    font-size: 11px;
    color: var(--text-schwach);
    line-height: 1.35;
}

/* ---------- Dialog ---------- */
.dialog-huelle {
    position: fixed;
    inset: 0;
    background: rgba(11, 35, 55, .42);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
    z-index: 60;
    overflow-y: auto;
    animation: dialog-grund .16s ease-out;
}

.dialog {
    background: var(--flaeche);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten-hoch);
    width: 100%;
    max-width: 620px;
    animation: dialog-auf .18s cubic-bezier(.2, .8, .3, 1);
}

/* Der Dialog kommt eine Handbreit von unten herauf, statt zu erscheinen. Das ordnet ihn dem
   Blick unter – man sieht, dass er sich über die Seite legt und woher er kam. */
@keyframes dialog-auf {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to { opacity: 1; transform: none; }
}

@keyframes dialog-grund {
    from { opacity: 0; }
    to { opacity: 1; }
}

.dialog--breit { max-width: 940px; }
.dialog--weit { max-width: 1320px; }

.dialog__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 22px;
    border-bottom: 1px solid var(--rand-zart);
}

.dialog__koerper { padding: 20px; }

/* Der Fuß bricht um, statt überzulaufen. Ein `flex` ohne Umbruch drückt seine Kinder über den
   linken Rand hinaus, wenn sie zusammen zu breit sind – auf einem Telefon stand vom
   „Abbrechen" der Rückfrage nur noch „hen" im Bild, und die Seite ließ sich seitwärts
   schieben. Sichtbar wird das erst unter etwa 520 Pixeln, also nie am Bürorechner. */
.dialog__fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--rand);
    background: var(--flaeche-blass);
    border-radius: 0 0 10px 10px;
}

.schliessen {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-schwach);
    font-size: 18px;
    line-height: 1;
    padding: 4px;
}

.schliessen:hover { color: var(--text); }

/* ---------- Anmeldung ----------
   Die Anmeldung ist der erste Bildschirm der Anwendung und sah lange aus wie ein fremder:
   eigene Kartenmaße, eigene Radien, ein eigener Spruchblock. Sie benutzt jetzt dieselben
   Bausteine wie alles dahinter – `.karte`, `.feld-gruppe`, `.knopf` – und hier stehen nur
   noch die beiden Dinge, die es woanders nicht gibt: die Aufteilung in zwei Hälften und die
   Marke auf hellem Grund.

   Alle Farben und Maße kommen aus den Variablen in :root. Ein hart geschriebenes #fff oder
   ein eigener Radius ist genau die Abweichung, die man einzeln nicht sieht und in der Summe
   als „irgendwie anders" wahrnimmt. */
.anmeldung {
    display: flex;
    min-height: 100vh;
    background: var(--flaeche-blass);
}

.anmeldung__links {
    flex: 1 1 58%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.anmeldung__rechts {
    flex: 1 1 42%;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-tief) 100%);
    color: var(--text-invers);
    display: flex;
    align-items: center;
    padding: 48px;
}

.anmeldung__buehne { max-width: 380px; }

.anmeldung__spruch {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.4px;
}

.anmeldung__strich {
    height: 5px;
    width: 72px;
    background: var(--akzent);
    border-radius: 3px;
    margin: 18px 0;
}

.anmeldung__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--nav-text);
}

/* Die Aufzählung nennt, was in der Anwendung steckt – ohne Häkchengrafik: Ein Haken
   behauptet eine Zusage, hier steht schlicht ein Inhaltsverzeichnis. */
.anmeldung__liste {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    font-size: 13.5px;
    color: var(--nav-text);
}

.anmeldung__liste li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
}

.anmeldung__liste li::before {
    content: "";
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--akzent);
}

.anmeldung__kasten { width: 100%; max-width: 340px; }

/* Die Marke steht waagerecht wie in der Seitenleiste – derselbe Betrieb, dieselbe Anordnung.
   Senkrecht gestapelt war sie ein zweites Erscheinungsbild für dasselbe Zeichen. */
.anmeldung__marke {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
}

/* Das Zeichen der Seitenleiste in größer. Es braucht eine eigene Regel, weil die Einrückung
   des inneren Balkens in festen Pixeln steht: Auf 34 px gestreckt, aber mit der Einrückung
   für 26 px, wurde aus dem Zeichen ein gequetschter Klotz. */
.anmeldung__zeichen {
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: var(--akzent);
    position: relative;
    flex: 0 0 34px;
}

.anmeldung__zeichen::after {
    content: "";
    position: absolute;
    inset: 9px 5px 0 5px;
    background: var(--navy-tief);
    border-radius: 2px;
}

/* Der Schriftzug auf hellem Grund: dieselbe Form wie in der Leiste, nur in dunkler Farbe. */
.anmeldung__wort {
    font-size: 19px;
    font-weight: 500;
    color: var(--text-stark);
    letter-spacing: .2px;
}

.anmeldung__wort span { color: var(--akzent); }

.anmeldung__einleitung {
    font-size: 13px;
    color: var(--text-schwach);
    margin: -8px 0 16px;
}

/* Die Demo-Zugänge stehen bewusst auffällig da und nicht als beiläufige Fußnote: Auf einem
   Anmeldebildschirm Kennwörter abzudrucken ist eine Entwicklungshilfe, und man soll sofort
   sehen, dass diese Anwendung noch nicht scharf geschaltet ist. */
.anmeldung__hinweis {
    margin-top: 18px;
    padding: 12px 14px;
    background: var(--gelb-blass);
    border: 1px solid color-mix(in srgb, var(--gelb-dunkel) 30%, transparent);
    border-radius: var(--radius);
    font-size: 12px;
    color: var(--gelb-dunkel);
    line-height: 1.6;
}

.anmeldung__hinweis strong { color: var(--gelb-dunkel); }

/* Der Weg zwischen Anmelden und Registrieren. Er steht unter dem Knopf, durch eine Linie
   abgesetzt: Anmelden ist der tägliche Fall, der Wechsel der seltene – er soll zu finden
   sein, ohne mit dem Knopf um Aufmerksamkeit zu ringen. */
.anmeldung__wechsel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rand);
    text-align: center;
    font-size: 13px;
    color: var(--text-schwach);
}

.anmeldung__wechsel a {
    color: var(--primaer);
    font-weight: 600;
    text-decoration: none;
}

.anmeldung__wechsel a:hover { text-decoration: underline; }

/* Der Satz unter einem Feld, der eine Folge erklärt („lässt sich nicht tauschen"). Kleiner
   als das Feld und ruhiger als eine Warnung – es ist ein Hinweis, kein Befund. */
.anmeldung__feldhinweis {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-schwach);
    line-height: 1.5;
}

.anmeldung__erfolg {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--gruen-blass);
    border: 1px solid var(--gruen);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.6;
}

/* Eigene Zeile: Inline gesetzt lief die Überschrift in den Satz hinein und las sich wie
   dessen erstes Wort. */
.anmeldung__marker {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.fehler-band {
    background: var(--rot-blass);
    color: var(--rot-dunkel);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.erfolg-band {
    background: var(--gruen-blass);
    color: var(--gruen-dunkel);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* Ein neutraler Hinweis – weder Fehler noch Erfolg, etwa „Zusatz ist aus“. */
.hinweis-band {
    background: var(--flaeche-grau);
    color: var(--text);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* ---------- Dokumentenkacheln ---------- */
.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 16px;
}

.kachel {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--flaeche);
    box-shadow: var(--schatten);
    display: flex;
    flex-direction: column;
}

.kachel__bild {
    height: 130px;
    background: var(--flaeche-grau);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}

.kachel__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kachel__bild svg { color: var(--text-schwach); }

.kachel__koerper {
    padding: 10px 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.kachel__name {
    font-weight: 500;
    color: var(--text-stark);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kachel__daten {
    font-size: 12px;
    color: var(--text-schwach);
    margin-top: 2px;
}

.kachel__fuss {
    display: flex;
    /* Umbrechen statt abschneiden: Die Kachel ist schmal und trägt `overflow: hidden` – ohne
       diese Zeile verschwindet der dritte Knopf hinter der Kante, ohne dass es auffällt. Wer
       ihn sucht, findet ihn nie, denn abgeschnitten sieht aus wie nicht vorhanden. */
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    border-top: 1px solid var(--rand);
}

/* ---------- Kacheln mit einer Fensterzeichnung ----------
   Eine technische Zeichnung braucht mehr Platz als ein Vorschaubild: Die Kachel wird breiter
   und ihr Bildfeld höher. Und die Zeichnung nimmt die Höhe des Feldes an, statt ihre eigene
   mitzubringen – sonst ragt sie aus der Kachel heraus und wird oben und unten abgeschnitten. */

.kacheln--zeichnung {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.kachel__bild--zeichnung {
    height: 210px;
    background: var(--flaeche);
    padding: 6px;
}

.kachel__bild--zeichnung .fensterbild-huelle {
    height: 100%;
    width: 100%;
    padding: 0;
}

/* Vorschaufeld für das Firmenlogo */
.logo-feld {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 110px;
    padding: 10px;
    border: 1px dashed var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche-blass);
}

.logo-feld img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 900px) {
    .anmeldung__rechts { display: none; }
}

/* ---------- Detailseiten ---------- */
/* Das Kopfband der Detailseiten bleibt stehen – in einem langen Beleg will man jederzeit
   sehen, um welchen es geht, und die Knöpfe im Griff behalten. Der leichte Schatten setzt es
   von der Fläche darunter ab, sobald gescrollt wird. */
.detail-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--rand-zart);
    position: sticky;
    top: 0;

    /* Leicht durchscheinend, damit man sieht, dass darunter weitergeht – aber aus der
       Arbeitsfläche und nicht aus festem Weiß. Als `rgba(255,255,255,.92)` blieb die Leiste im
       Dunkeln weiß, und ausgerechnet sie: Sie klebt oben und trägt die Knöpfe des Belegs. */
    background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    backdrop-filter: saturate(1.6) blur(8px);
    box-shadow: var(--schatten);
    z-index: 20;
}

.detail-kopf h2 {
    font-size: 17px;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zurueck {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-schwach);
    padding: 6px;
    display: flex;
    border-radius: var(--radius-klein);
    transition: background .12s ease, color .12s ease;
}

.zurueck:hover { color: var(--text-stark); background: var(--flaeche-grau); }

.detail-raster {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 28px;
    padding: 24px 28px 44px;
    align-items: start;
}

@media (max-width: 1100px) {
    .detail-raster { grid-template-columns: minmax(0, 1fr); }
}

.merkmal { margin-bottom: 18px; }

.merkmal__name {
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-schwach);
    margin-bottom: 3px;
}

.merkmal__wert { color: var(--text); }

.merkmal-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.zeile-mit-symbol {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
    color: var(--text);
}

.zeile-mit-symbol svg { flex: 0 0 16px; margin-top: 2px; color: var(--text-schwach); }

.abschnitt { margin-bottom: 28px; }

.abschnitt__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.abschnitt__kopf h2 { font-size: 16px; }

/* Auf der getönten Arbeitsfläche braucht jede Liste ihre eigene weiße Fläche, sonst
   schwebt sie ohne Grund. Tabellen und Leerhinweise bekommen sie hier, ohne dass jede
   Detailseite eine Hülle ins Markup schreiben muss. */
.abschnitt > table.tabelle,
.abschnitt > .leer-hinweis {
    background: var(--flaeche);
    border: 1px solid var(--rand-zart);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    overflow: hidden;
}

.abschnitt > table.tabelle th:first-child { border-top-left-radius: var(--radius-gross); }
.abschnitt > table.tabelle th:last-child { border-top-right-radius: var(--radius-gross); }
.abschnitt > .leer-hinweis { border-style: solid; }

.beleg {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    padding: 34px 38px;
    box-shadow: var(--schatten);
}

.beleg__kopf {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}

.beleg__absender {
    font-size: 10px;
    color: var(--text-schwach);
    border-bottom: 1px solid var(--rand);
    padding-bottom: 3px;
    margin-bottom: 10px;
}

.beleg__meta { font-size: 13px; }

.beleg__meta div {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.beleg__meta span:first-child { color: var(--text-schwach); }

table.positionen { width: 100%; border-collapse: collapse; font-size: 13px; }

table.positionen th {
    text-align: left;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-schwach);
    border-bottom: 1px solid var(--rand);
    padding: 8px 6px;
}

table.positionen td {
    padding: 9px 6px;
    border-bottom: 1px solid var(--flaeche-grau);
    vertical-align: top;
}

table.positionen tr.gruppe td {
    background: var(--flaeche-blass);
    font-weight: 500;
    color: var(--text-stark);
}

.positionen__beschreibung {
    color: var(--text-schwach);
    font-size: 12px;
    white-space: pre-line;
    margin-top: 2px;
}

/* ---------- Positionen verschieben ---------- */
/* Gezogen wird nur am Griff: läge draggable auf der ganzen Zeile, könnte in den
   Eingabefeldern kein Text mehr markiert werden. */
.griff {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    color: var(--text-schwach);
    cursor: grab;
}

.griff:active {
    cursor: grabbing;
}

.zeile--zieht {
    opacity: .55;
}

.summenblock {
    margin-left: auto;
    width: 300px;
    margin-top: 18px;
}

.summenblock div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.summenblock div.gesamt {
    border-top: 1px solid var(--rand);
    margin-top: 6px;
    padding-top: 10px;
    font-weight: 500;
    font-size: 16px;
    color: var(--text-stark);
}

/* ---------- Blazor-Fehlerband ---------- */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: 10px 14px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 8px;
}

/* ---------- Anliegen: was auf der Tagesübersicht liegen geblieben ist ---------- */
.anliegen {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px 12px 14px;
    border: 1px solid var(--rand);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--flaeche);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
}

.anliegen:hover {
    border-color: var(--primaer);
    box-shadow: 0 1px 4px rgba(16, 47, 75, .08);
}

.anliegen__zahl {
    font-size: 21px;
    font-weight: 500;
    color: var(--text-stark);
    line-height: 1;
    min-width: 26px;
    text-align: center;
}

.anliegen__titel {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-stark);
}

.anliegen__zusatz {
    display: block;
    font-size: 12px;
    color: var(--text-schwach);
}

.anliegen--rot { border-left-color: var(--rot); }
.anliegen--gelb { border-left-color: var(--gelb); }
.anliegen--blau { border-left-color: var(--primaer); }
.anliegen--gruen { border-left-color: var(--gruen); }
.anliegen--grau { border-left-color: var(--slate); }

/* ---------- Feinheiten für alles ---------- */

/* Ein sichtbarer Fokusring an allem Bedienbaren – und zwar nur, wenn mit der Tastatur
   navigiert wird. Wer mit der Maus klickt, soll keinen Rahmen sehen; wer sich durch die Maske
   tabbt, muss jederzeit erkennen, wo er steht. */
a:focus-visible,
button:focus-visible,
.knopf:focus-visible,
.reiter__punkt:focus-visible,
.nav__punkt:focus-visible,
.nav__unterpunkt:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primaer);
    outline-offset: 2px;
    border-radius: var(--radius-klein);
}

/* In der dunklen Seitenleiste braucht der Ring die helle Farbe, sonst verschwindet er. */
.nav__punkt:focus-visible,
.nav__unterpunkt:focus-visible,
.nav__abmelden:focus-visible {
    outline-color: #fff;
}

/* Schlanke, unauffällige Scrollleisten. Die breiten grauen Balken von Windows sind das
   Erste, was eine Oberfläche alt aussehen lässt. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--rand-stark) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--rand-stark);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover { background: #AEB9C6; background-clip: content-box; }

/* Markierter Text in der Hausfarbe. */
::selection { background: rgba(13, 135, 242, .18); color: var(--text-stark); }

/* Wer Bewegung abgestellt hat, bekommt keine. Das ist keine Feinheit, sondern eine
   Einstellung des Betriebssystems, und sie gilt für manche Menschen aus gutem Grund. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Beim Drucken bleibt nur der Inhalt: Seitenleiste, Suchleiste und Knöpfe gehören nicht
   aufs Papier. Gedruckt wird aus dem Browser selten – aber wenn, dann richtig. */
@media print {
    .nav,
    .kopfband,
    .seiten-kopf__werkzeuge,
    .knopf {
        display: none !important;
    }

    .huelle { display: block; }
    .karte, .kennzahl { box-shadow: none; border-color: #ccc; }
    body { background: #fff; }
}

/* ============================================================
   Assistent
   Ein Faden, mehrere Wege: die Blase trägt ihren Kanal als Abzeichen im Fuß. Damit bleibt
   sichtbar, wo etwas gesagt wurde, ohne dass das Gespräch in Reiter zerfällt.
   ============================================================ */

.seiten-kopf__unter {
    margin: 4px 0 0;
    color: var(--text-schwach);
    font-size: 13px;
}

.assistent {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .assistent { grid-template-columns: minmax(0, 1fr); }
}

.assistent__spalte {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.assistent__faden {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

.hinweistext {
    margin: 0 0 10px;
    color: var(--text-schwach);
    font-size: 12px;
    line-height: 1.5;
}

/* ============================================================
   Karte
   Leaflet bringt eigene Maße mit; hier steht nur, wie sich die Fläche in die Karten der
   Anwendung einfügt – gerundete Ecken, ein zarter Rahmen, dieselbe Schrift.
   ============================================================ */

.karte-flaeche {
    width: 100%;
    border-radius: var(--radius);
    z-index: 0;
}

.karte-flaeche .leaflet-container {
    font: inherit;
    border-radius: var(--radius);
}

/* Die beschriftete Nadel der Terminkarte.

   Die Hülle ist absichtlich ohne Ausdehnung: Sind zwei Monteure auf einem Termin, steht das
   zweite Kürzel daneben und die Nadel wird breiter – eine feste Größe könnte Leaflet dann
   nicht mehr richtig ausrichten. Die Nadel selbst hängt über dem Punkt und läuft nach unten
   in eine Spitze aus, damit sie auf die Stelle zeigt statt daneben zu schweben. */
.kartennadel-huelle {
    width: 0 !important;
    height: 0 !important;
}

.kartennadel {
    position: absolute;
    bottom: 7px;
    left: 0;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 9px;
    border-radius: 14px;
    /* Weißer Rand und Schatten heben das Kürzel von den Kacheln ab – ohne sie verschwindet
       eine dunkle Farbe auf einer dunklen Straße. */
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(16, 32, 48, .35);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    white-space: nowrap;
    cursor: pointer;
}

.kartennadel::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #fff;
}

/* ============================================================
   Zeitleiste der Terminkarte
   Der Regler ist das Hauptwerkzeug und bekommt deshalb den ganzen übrigen Platz. Die Uhrzeit
   daneben steht in gleichbreiten Ziffern – sonst wackelt sie beim Ziehen, weil eine 1 schmaler
   ist als eine 8.
   ============================================================ */

.zeitleiste {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
}

.zeitleiste__uhr {
    min-width: 58px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-stark);
}

.zeitleiste__regler {
    flex: 1 1 240px;
    height: 26px;
    accent-color: var(--primaer);
    cursor: pointer;
}

/* ============================================================
   Aufmaß: Fensterzeichnung und Bildauswahl

   Die Hülle bekommt eine feste Höhe, die Zeichnung füllt sie aus. Das ist nötig, nicht nur
   hübsch: Eine SVG mit viewBox, aber ohne width und height hat keine eigene Größe und fällt
   in einem Flex-Kasten auf null zusammen – sichtbar bleibt dann nichts, und zwar ohne jede
   Fehlermeldung.

   Innerhalb einer Zeichnung stimmt der Maßstab weiterhin: Rahmen, Flügel und Maßkette sind in
   Millimetern gerechnet. Zwischen zwei Zeichnungen tut er es nicht mehr, weil jede ihre Box
   ausfüllt – deshalb steht an jeder ihre Maßkette.
   ============================================================ */

.fensterbild-huelle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    height: 320px;
}

.fensterbild-huelle .fensterbild {
    width: 100%;
    height: 100%;
}

.fensterbild-huelle--klein {
    padding: 4px;
    height: 76px;
}

.bildauswahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: 10px;
}

.bildkachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 8px;
    min-height: 88px;
    font: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.bildkachel:hover { border-color: var(--rand-stark); }

/* Die gewählte Kachel trägt einen doppelten Rand statt einer Füllung: Die Zeichnung darin
   soll dieselbe bleiben, damit man Gewähltes und Nichtgewähltes vergleichen kann. */
.bildkachel--gewaehlt {
    border-color: var(--primaer);
    box-shadow: inset 0 0 0 1px var(--primaer);
    color: var(--primaer);
    font-weight: 600;
}

.bildkachel__text {
    text-align: center;
    line-height: 1.25;
}

/* Die Fensterübersicht im Angebot: Bild links, Angaben rechts. Auf schmalem Schirm
   untereinander – auf dem Tablet ist nebeneinander beides zu klein. */
.fensterliste__zeile {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 22px;
    padding: 18px 20px;
    align-items: center;
}

.fensterliste__zeile + .fensterliste__zeile { border-top: 1px solid var(--rand-zart); }

@media (max-width: 760px) {
    .fensterliste__zeile { grid-template-columns: 1fr; }
}

.fensterliste__bild { background: #fff; border-radius: var(--radius); }

.fensterliste__nummer {
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.fensterliste__text h3 { margin: 4px 0 12px; }

/* Zwei Spalten aus Begriff und Wert – als Definitionsliste, weil es genau das ist. */
.fensterdaten {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 5px 14px;
    margin: 0 0 10px;
    font-size: 13.5px;
}

.fensterdaten dt { color: var(--text-schwach); }
.fensterdaten dd { margin: 0; color: var(--text-stark); }

/* Ein Befund der Plausibilitätsprüfung. */
.befund {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.45;
    border-left: 3px solid transparent;
}

.befund + .befund { margin-top: 6px; }

.befund--hinweis {
    background: var(--gelb-blass);
    border-left-color: var(--gelb);
    color: var(--gelb-dunkel);
}

.befund--fehler {
    background: var(--rot-blass);
    border-left-color: var(--rot);
    color: var(--rot-dunkel);
}

/* Der dritte Fall: nichts aufgefallen. Er stand an vier Stellen als `style`-Angabe im Markup
   mit festen Grün- und Weißtönen – und blieb damit im Dunkeln ein hellgrünes Band. Als Klasse
   neben den beiden anderen ist er das, was er ist: eine dritte Stufe desselben Bausteins. */
.befund--gut {
    background: var(--gruen-blass);
    border-left-color: var(--gruen);
    color: var(--gruen-dunkel);
}

/* Die Schrittleiste des Aufmaß-Assistenten. */
.schrittleiste {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.schritt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--rand);
    background: var(--flaeche);
    font: inherit;
    font-size: 12.5px;
    color: var(--text-schwach);
    cursor: pointer;
    white-space: nowrap;
}

.schritt--aktiv {
    border-color: var(--primaer);
    background: var(--primaer);
    color: #fff;
    font-weight: 600;
}

.schritt--erledigt { color: var(--text); border-color: var(--rand-stark); }

.schritt__zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--flaeche-blass);
    font-size: 11px;
    font-weight: 600;
}

.schritt--aktiv .schritt__zahl { background: rgba(255, 255, 255, .25); }

/* Die kleine Karte auf den Detailseiten sitzt unter der Anschrift. */
.karte-klein {
    margin-top: 12px;
    border-top: 1px solid var(--rand-zart);
    padding-top: 12px;
}

.karte-leer {
    padding: 18px;
    border: 1px dashed var(--rand);
    border-radius: var(--radius);
    color: var(--text-schwach);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* Fußzeile mit Blätterung: Zähler links, Knöpfe rechts. */
.blaetterung {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blaetterung__luecke { flex: 1 1 auto; }

/* ============================================================
   Sortierbare Spaltenüberschrift
   Die Schaltfläche füllt die ganze Zelle, damit das Ziel so groß ist wie die Überschrift
   aussieht – ein Pfeil allein wäre auf dem Tablet auf der Baustelle kaum zu treffen. Sie
   erbt die Schrift des <th>, sonst stünde eine Spalte plötzlich in Systemschrift da.
   ============================================================ */

.sortierkopf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.zelle-rechts .sortierkopf { justify-content: flex-end; }

.sortierkopf:hover { color: var(--text); }

.sortierkopf:focus-visible {
    outline: 2px solid var(--primaer);
    outline-offset: 2px;
    border-radius: 3px;
}

table.tabelle th.sortierkopf--aktiv { color: var(--text); }

/* ============================================================
   Filterzeile unter den Spaltenüberschriften
   Der Filter steht dort, wo die Werte stehen. Die Zeile trägt bewusst keine Großbuchstaben
   und keine Laufweite – sie ist Bedienung, nicht Überschrift, und darf sich vom Kopf
   darüber unterscheiden.
   ============================================================ */

table.tabelle th.filterzelle {
    padding: 0 8px 9px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
    text-transform: none;
    letter-spacing: normal;
    vertical-align: top;
}

.feld--filter {
    height: 30px;
    padding: 0 8px;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    border-radius: 7px;
    min-width: 0;
}

/* Ein gesetzter Filter muss auffallen: Sonst sucht man den Fehler in den Daten, während
   in Wahrheit noch eine Eingrenzung von vorgestern steht. */
.feld--gesetzt {
    border-color: var(--primaer);
    box-shadow: inset 0 0 0 1px var(--primaer);
    color: var(--primaer);
}

/* Von und bis stehen untereinander: Nebeneinander bekäme keines der beiden genug Breite,
   und ein Ausklappfeld überschritte die Hülle der Tabelle, die alles Herausragende
   abschneidet, weil sie breite Listen waagerecht scrollen muss. */
.bereichsfilter {
    display: grid;
    gap: 4px;
}

/* Der Streifen über der Tabelle: nur noch das, was für die ganze Liste gilt. */
.filterstand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 12px;
    font-size: 13px;
    color: var(--text-schwach);
}

/* ============================================================
   Klappbarer Kartenkopf
   Der ganze Kopf ist die Schaltfläche – ein kleiner Pfeil allein wäre ein zu schmales Ziel,
   besonders auf dem Tablet auf der Baustelle.
   ============================================================ */

.klapp-kopf {
    width: 100%;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--rand-zart);
    text-align: left;
    cursor: pointer;
}

.klapp-kopf:hover { background: var(--flaeche-blass); }

.klapp-kopf__rechts {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Ein Kästchen mit Beschriftung in der Filterzeile. */
.schalter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.schalter input { width: 16px; height: 16px; accent-color: var(--primaer); }

.assistent__faden > .karte__koerper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 62vh;
}

.assistent__eingabe {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--rand-zart);
}

.assistent__eingabe .feld { flex: 1; }

.assistent__sprung { padding: 0 16px 12px; }

.blase {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: var(--radius-gross);
    line-height: 1.45;
    white-space: pre-wrap;
}

.blase--frage {
    align-self: flex-end;
    background: var(--primaer);
    color: var(--text-invers);
    border-bottom-right-radius: var(--radius-klein);
}

.blase--antwort {
    align-self: flex-start;
    background: var(--flaeche-blass);
    border: 1px solid var(--rand-zart);
    border-bottom-left-radius: var(--radius-klein);
}

.blase--wartet { color: var(--text-schwach); font-style: italic; }

.blase__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 11px;
    opacity: .75;
}

.blase--frage .blase__fuss { justify-content: flex-end; }

.faden {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    cursor: pointer;
}

.faden:hover { background: var(--flaeche-blass); }
.faden.aktiv { background: var(--primaer-blass); border-color: var(--primaer); }

.faden__name { font-weight: 500; color: var(--text-stark); }

.faden__fuss {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-schwach);
}

/* ---------- Elektrotechnik ---------- */

/*
   Der Übersichtsschaltplan. Er ist breiter als hoch und braucht deshalb eine andere Hülle als
   das Fensterbild: Dort begrenzt die Höhe, hier die Breite.
*/
.anlagenbild-huelle {
    width: 100%;
    max-height: 520px;
    padding: 18px 10px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.anlagenbild-huelle svg { width: 100%; height: auto; max-height: 480px; }

.anlagenbild-huelle--klein { max-height: 120px; padding: 6px; }
.anlagenbild-huelle--klein svg { max-height: 108px; }

/*
   Das Rechenband unter einem Eingabeformular: die gerechneten Werte, die sich mit jeder
   Eingabe ändern. Es steht bewusst zwischen Eingabe und Befunden – erst die Zahl, dann die
   Beurteilung.
*/
.rechenband {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    padding: 12px 16px;
    margin-bottom: 14px;
    background: var(--flaeche-blass);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
}

.rechenband > div { display: flex; flex-direction: column; gap: 2px; }

.rechenband__titel {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-schwach);
}

.rechenband strong { font-size: 15px; color: var(--text-stark); }
.rechenband .zelle-schwach { font-size: 12px; }

/* Ein Wert, der eine Grenze reißt – dieselbe Farbe wie ein Befund der Stufe Fehler. */
.zelle-warnung { color: var(--rot); font-weight: 600; }

/* ---------- Zählerschrank ---------- */

/* Die Frontansicht. Anders als der Schaltplan ist sie hoch statt breit – der Schrank steht
   an der Wand, und so wird er auch gezeichnet. */
.schrankbild-huelle {
    width: 100%;
    max-height: 560px;
    padding: 16px 10px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.schrankbild-huelle svg { max-height: 528px; width: auto; max-width: 100%; }

.schrankbild-huelle--klein { max-height: 150px; padding: 6px; }
.schrankbild-huelle--klein svg { max-height: 138px; }

/* Der Editor: Eingabe links, Ergebnis rechts. Die Ansicht bleibt beim Scrollen stehen – ein
   Schrank mit vier Feldern ist länger als der Bildschirm, und gerade beim untersten Feld will
   man sehen, wo das Gerät landet. Damit sie samt Zahlen und Befunden auch auf einem
   Laptop in die Höhe passt, gibt die Zeichnung hier nach, statt über den Rand zu laufen. */
.schrankeditor {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    gap: 24px;
    align-items: start;
}

.schrankeditor__eingabe { grid-column: 1; grid-row: 1; }
.schrankeditor__eingabe > .abschnitt:last-child { margin-bottom: 0; }

.schrankeditor__ansicht {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 16px;
}

.schrankeditor__ansicht .abschnitt { margin-bottom: 14px; }
.schrankeditor__ansicht .schrankbild-huelle { max-height: min(560px, 58vh); }
.schrankeditor__ansicht .schrankbild-huelle svg { max-height: calc(min(560px, 58vh) - 32px); }

/* Schmal rutscht die Ansicht wieder nach oben – sie steht im Markup zuerst. */
@media (max-width: 1000px) {
    .schrankeditor { grid-template-columns: minmax(0, 1fr); }
    .schrankeditor__eingabe,
    .schrankeditor__ansicht { grid-column: auto; grid-row: auto; }
    .schrankeditor__ansicht { position: static; }
}

/* Ein Feld in der Konfiguration. Kein Kärtchen mit Schatten: Felder stehen nebeneinander in
   einem Schrank, nicht frei im Raum. Eine Linie oben genügt, um sie zu trennen. */
.feldkarte {
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.feldkarte__kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--flaeche-blass);
    border-bottom: 1px solid var(--rand);
}

.feldkarte__nr {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-schwach);
}

.hutschienen { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.hutschiene { display: flex; align-items: center; gap: 10px; }

.hutschiene__nr {
    width: 18px;
    flex: none;
    font-size: 11px;
    color: var(--text-schwach);
    text-align: right;
}

/* Das Raster ist die Hutschiene: eine Spalte je Teilungseinheit. Geräte spannen über so
   viele Spalten, wie sie breit sind – damit stimmt das Bild mit der Wirklichkeit überein,
   ohne dass irgendwo eine Breite in Pixeln steht. */
.hutschiene__plaetze {
    flex: 1 1 auto;
    display: grid;
    gap: 2px;
    background: var(--flaeche-grau);
    border: 1px solid var(--rand);
    border-radius: 4px;
    padding: 3px;
    min-height: 40px;
}

.platz {
    grid-row: 1;
    border: 0;
    border-radius: 3px;
    padding: 0 4px;
    min-height: 32px;
    font: inherit;
    font-size: 11px;
    line-height: 1.15;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.platz--frei { background: repeating-linear-gradient(45deg, transparent, transparent 3px, var(--rand) 3px, var(--rand) 4px); }
.platz--frei:hover { background: var(--primaer-blass); }

.platz--belegt {
    background: var(--flaeche);
    border: 1px solid var(--text);
    color: var(--text-stark);
    font-weight: 500;
}

.platz--belegt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.platz--belegt:hover { border-color: var(--primaer); }

.platz--fi { border-color: var(--primaer); color: var(--primaer-dunkel); }
.platz--haupt { border-width: 2px; }
.platz--steuer { border-style: dashed; }
.platz--blind { background: var(--flaeche-grau); border-style: dotted; color: var(--text-schwach); }

/* ==========================================================================
   Online-Hilfe
   Der Knopf steht auf jedem Bildschirm an derselben Stelle: rechts neben der
   Überschrift. Die Tafel schiebt sich von rechts herein und lässt den
   Bildschirm stehen – ein Dialog verdeckte genau das, wonach gefragt wurde.
   ========================================================================== */

.hilfeknopf {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--rand);
    border-radius: 50%;
    background: var(--flaeche);
    color: var(--text-schwach);
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}

.hilfeknopf:hover {
    color: var(--primaer-dunkel);
    border-color: var(--primaer);
    background: var(--primaer-blass);
}

.hilfeknopf--klein { width: 24px; height: 24px; }

.dialog__kopfknoepfe { display: flex; align-items: center; gap: 6px; }

/* Der Grund fängt den Klick daneben ab. Er bleibt fast durchsichtig: Die Hilfe legt
   die Seite nicht still, man soll weiterlesen können, was hinter ihr steht. */
.hilfe-grund {
    position: fixed;
    inset: 0;
    background: rgba(11, 35, 55, .18);
    z-index: 80;
    animation: dialog-grund .16s ease-out;
}

.hilfetafel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(30rem, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--flaeche);
    border-left: 1px solid var(--rand);
    box-shadow: var(--schatten-hoch);
    z-index: 81;
    animation: hilfe-herein .2s cubic-bezier(.2, .8, .3, 1);
}

@keyframes hilfe-herein {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

.hilfetafel__kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--rand-zart);
    flex: none;
}

.hilfetafel__marke {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primaer-dunkel);
}

.hilfetafel__zurueck {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: none;
    background: none;
    color: var(--text-schwach);
    cursor: pointer;
}

.hilfetafel__zurueck:hover { color: var(--text); }

.hilfetafel__koerper {
    padding: 18px 22px 40px;
    overflow-y: auto;
    flex: 1 1 auto;
    line-height: 1.62;
    color: var(--text);
}

.hilfetafel__titel {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.2;
    color: var(--text-stark);
}

.hilfetafel__kurz {
    margin: 0 0 4px;
    color: var(--text-schwach);
}

.hilfetafel__abschnitt {
    margin: 22px 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-stark);
}

.hilfetafel__koerper p { margin: 0 0 10px; }

/* Feld und Bedeutung stehen untereinander und nicht nebeneinander: Die Tafel ist
   schmal, und zwei Spalten ergäben zwei sehr enge. */
.hilfefelder { margin: 0; }

.hilfefeld {
    padding: 9px 0;
    border-bottom: 1px solid var(--rand-zart);
}

.hilfefeld:last-child { border-bottom: none; }

.hilfefeld dt {
    font-weight: 600;
    color: var(--text-stark);
    margin-bottom: 2px;
}

.hilfefeld dd { margin: 0; }

.hilfe-spruenge { display: flex; flex-direction: column; gap: 6px; }

.hilfe-sprung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    background: var(--flaeche-blass);
    color: var(--text-stark);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hilfe-sprung:hover { border-color: var(--primaer); color: var(--primaer-dunkel); }

@media (prefers-reduced-motion: reduce) {
    .hilfetafel, .hilfe-grund { animation: none; }
}

.hilfe-sprung__bereich {
    display: block;
    font-size: 11px;
    color: var(--text-schwach);
    letter-spacing: .04em;
}

/* ---------- Lager ---------- */

/* Gewerke und häufig gebrauchtes Material nebeneinander; auf schmalen Schirmen untereinander. */
.lager-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
    align-items: start;
}

/* Ein liegender Balken für Anteile – der Anteil steht als Breite da, nicht als zweite Zahl
   neben dem Betrag. */
.anteilbalken {
    height: 8px;
    border-radius: 4px;
    background: var(--flaeche-grau);
    overflow: hidden;
}

.anteilbalken__fuellung {
    height: 100%;
    border-radius: 4px;
    background: var(--primaer);
}

/* Die Kopfzeile je Lieferant in der Bestellliste. */
.tabelle tr.tabelle__gruppe td {
    background: var(--flaeche-blass);
    border-top: 1px solid var(--rand);
}

.tabelle tr.tabelle__unterzeile td {
    background: var(--flaeche-blass);
    font-size: 13px;
}

/* Eine Knopfreihe, von der genau einer gewählt ist – die Buchungsart. */
.segment {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* ---------- PV-Konfigurator ---------- */

/* Eingabe links, Ergebnis rechts – das Ergebnis ist breiter, weil Zeichnung und Liste Platz brauchen. */
.pv-raster {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .pv-raster { grid-template-columns: minmax(0, 1fr); }
}

.pv-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--text-schwach);
}

.pv-legende span { display: inline-flex; align-items: center; gap: 6px; }

.pv-legende i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Bild und Sinnbild gleich groß, damit die Zeilen der Materialliste auf einer Linie stehen. */
.teilliste__bild {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--flaeche-blass);
    object-fit: cover;
}
/* ---------- Logbuch ----------
   Ein Zeitstrahl: links die Marke mit dem Sinnbild der Art, rechts der Text. Die Linie
   entsteht aus dem Rand der Marke und nicht aus einem eigenen Element – ein Strich, den
   man zeichnet, hört beim letzten Eintrag nie an der richtigen Stelle auf. */
.verlauf { list-style: none; margin: 0; padding: 0; }

.verlauf__punkt {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    position: relative;
}

.verlauf__punkt:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--rand);
}

.verlauf__marke {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--flaeche-grau);
    color: var(--text-schwach);
    z-index: 1;
}

.verlauf__marke--blau { background: var(--navy-blass); color: var(--navy-hell); }
.verlauf__marke--navy { background: var(--navy-blass); color: var(--navy); }
.verlauf__marke--gruen { background: var(--gruen-blass); color: var(--gruen-dunkel); }
.verlauf__marke--gelb { background: var(--gelb-blass); color: var(--gelb-dunkel); }
.verlauf__marke--slate { background: var(--flaeche-grau); color: var(--text-schwach); }

.verlauf__inhalt { flex: 1 1 auto; min-width: 0; }

.verlauf__kopf {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.verlauf__text { margin-top: 2px; white-space: pre-wrap; }

.verlauf__fuss { margin-top: 2px; font-size: 12px; }

/* Ein Knopf, der wie ein Verweis aussieht – für Nebensächliches im Fließtext. */
.knopf-nackt {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--navy-hell);
    cursor: pointer;
    text-decoration: underline;
}

.feld--klein { padding: 4px 8px; font-size: 13px; }

/* Der nächste Einrichtungsschritt bei EBICS: ein Kasten, eine Erklärung, ein Knopf.
   Er steht heraus, weil er das Einzige ist, was an dieser Stelle zu tun ist. */
.ebics-schritt {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--primaer);
    border-radius: var(--radius);
    background: var(--primaer-blass);
}

.ebics-schritt__titel { font-weight: 700; color: var(--text-stark); }

.ebics-schritt__text { font-size: 13px; line-height: 1.5; max-width: 70ch; margin-top: 2px; }

/* Ein Zuordnungsvorschlag im Zahlungsabgleich: Knopf links, Begründung rechts.
   Die Begründung steht daneben und nicht in einem Hinweisfeld – wer 12.000 € bucht,
   soll sie lesen, ohne danach zu suchen. */
.vorschlag {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 4px 0;
    border-bottom: 1px solid var(--rand-zart);
}

.vorschlag:last-of-type { border-bottom: 0; }

.vorschlag__text { min-width: 0; font-size: 12px; line-height: 1.4; }

/* ============================================================
   Online-Angebotsannahme – die einzige Seite, auf der ein Kunde steht.
   Sie sieht deshalb nach Brief aus und nicht nach Anwendung: eine schmale
   Spalte auf ruhigem Grund, kein Menü, keine Werkzeugleiste.
   ============================================================ */
.freigabe {
    min-height: 100vh;
    background: var(--flaeche-grau);
    padding: 28px 16px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.freigabe__blatt {
    width: 100%;
    max-width: 820px;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
    padding: 28px 30px;
}

.freigabe__kopf {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--rand-zart);
}

.freigabe__firma { font-weight: 700; color: var(--text-stark); font-size: 15px; }

.freigabe__kennfeld { text-align: right; }

.freigabe__klein { font-size: 12px; color: var(--text-schwach); }

.freigabe__titel { font-size: 20px; margin: 18px 0 2px; color: var(--text-stark); }

.freigabe__text { margin: 16px 0; white-space: pre-wrap; line-height: 1.55; }

.freigabe__gruppe { background: var(--flaeche-blass); }

/* Der Summenblock rechts, wie auf dem Blatt – der Betrag ist das, wonach zuerst
   gesehen wird. */
.freigabe__summen {
    margin: 18px 0 0 auto;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.freigabe__summen > div { display: flex; justify-content: space-between; gap: 20px; }

.freigabe__summe {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--rand);
    font-weight: 700;
    font-size: 17px;
    color: var(--text-stark);
}

.freigabe__zeile { margin-top: 22px; display: flex; gap: 10px; }

.freigabe__knoepfe {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Die Antwort steht bewusst groß da: Wer hier landet, hat eben etwas entschieden
   und soll sehen, dass es angekommen ist. */
.freigabe__antwort { text-align: center; padding: 12px 0; }

.freigabe__antwort h2 { margin: 0 0 10px; color: var(--text-stark); }

.freigabe__antwort p { margin: 0 auto 12px; max-width: 46ch; line-height: 1.55; }

@media (max-width: 640px) {
    .freigabe__blatt { padding: 20px 16px; }
    .freigabe__kennfeld { text-align: left; }
    .freigabe__knoepfe .knopf { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   Plantafel – Zeilen (Mitarbeiter und Betriebsmittel) über Tagesspalten.
   Ein Raster und keine Tabelle: Die Spaltenzahl wechselt mit dem Ausschnitt,
   und eine Kachel soll sich über mehrere Tage ziehen lassen.
   ============================================================ */
.plantafel {
    display: grid;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--flaeche);
    overflow-x: auto;
}

.plantafel__kopf {
    display: contents;
}

.plantafel__spalte {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    background: var(--flaeche-blass);
    border-bottom: 1px solid var(--rand);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-schwach);
    text-align: center;
}

.plantafel__spalte--heute { color: var(--primaer); background: var(--primaer-blass); }

.plantafel__spalte--frei { background: var(--flaeche-grau); }

/* Die Namensspalte bleibt beim Wischen stehen – ohne sie weiß man nach der dritten
   Spalte nicht mehr, wessen Woche man liest. */
.plantafel__name {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand-zart);
    border-right: 1px solid var(--rand);
    min-width: 190px;
}

.plantafel__name--kopf { z-index: 3; background: var(--flaeche-blass); border-bottom-color: var(--rand); }

.plantafel__gruppe {
    grid-column: 1 / -1;
    padding: 6px 10px;
    background: var(--flaeche-grau);
    border-bottom: 1px solid var(--rand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.plantafel__nadel {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-invers);
}

.plantafel__zeilentitel { min-width: 0; }

.plantafel__zeilenname {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-stark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plantafel__zeilenzusatz { font-size: 11px; color: var(--text-schwach); }

.plantafel__zelle {
    min-height: 62px;
    padding: 4px;
    border-bottom: 1px solid var(--rand-zart);
    border-left: 1px solid var(--rand-zart);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.plantafel__zelle--frei { background: var(--flaeche-blass); }

.plantafel__zelle--heute { background: var(--primaer-blass); }

.plantafel__zelle--ziel { outline: 2px dashed var(--primaer); outline-offset: -3px; }

.plantafel__kachel {
    border-left: 3px solid var(--slate);
    border-radius: var(--radius-klein);
    background: var(--flaeche-blass);
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    width: 100%;
}

.plantafel__kachel:hover { background: var(--flaeche-grau); }

/* Der Konflikt ist der Grund für die ganze Tafel – er bekommt Grund und Rand, nicht nur
   ein Symbol am Rand, das im Gedränge untergeht. */
.plantafel__kachel--konflikt {
    background: var(--rot-blass);
    box-shadow: inset 0 0 0 1px var(--rot);
}

.plantafel__kachel--sperre { background: var(--slate-blass); font-style: italic; }

.plantafel__kachelzeit { font-weight: 700; color: var(--text-stark); }

.plantafel__kacheltext {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}

/* Ein dünner Balken statt einer Prozentzahl: Auf zwanzig Zeilen liest niemand zwanzig
   Zahlen, aber eine zu volle Zeile sieht man sofort. */
.plantafel__last {
    margin-top: auto;
    height: 3px;
    border-radius: 2px;
    background: var(--rand-zart);
    overflow: hidden;
}

.plantafel__last-balken { height: 100%; background: var(--gruen); }

.plantafel__last-balken--voll { background: var(--gelb); }

.plantafel__last-balken--ueber { background: var(--rot); }