/* =====================================================================
   SALIGER KUNDENPORTAL · Stylesheet
   Design-System "Nachtlabor": dunkel-atmosphaerisch wie Linear —
   tiefer Raum mit Mesh-Verlauf + feinem Grain, Glas-Karten mit
   Lichtkante, leuchtende Akzente in Saliger-Blau und Gold.
   Typo-Skala 24/15/14/13/11 · Tabellenziffern fuer alle Werte.
   ===================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Marke (in beiden Modi gleich) */
    --primary-color: #41538B;
    --brand-rgb: 65, 83, 139;
    --brand-300: #8a9bcb;
    --brand-400: #5f72ad;
    --primary-light: #5a6fa8;
    --primary-dark: #2d3a61;
    --accent-color: #e8b84b;
    --surface-dark: #1d2650;

    /* Login-Seiten (immer helle Karten auf dunklem Grund) */
    --white: #ffffff;
    --karte-text: #1a2233;
    --karte-text-2: #5b6474;
    --medium-gray: #e6e9f0;
    --fehler-tief: #b3261e;
    --fehler-hintergrund: #fdecea;
    --erfolg-tief: #1a7f4f;

    --gradient-1: linear-gradient(135deg, #41538B 0%, #2d3a61 100%);
    --sh-brand: 0 1px 3px rgba(var(--brand-rgb), 0.35), 0 6px 18px -4px rgba(var(--brand-rgb), 0.45);
    /* KEINE Rundung - Festlegung Yannick 16.09.2026 ("Kanten"). Die
       Variablen bleiben, damit eine Stelle entscheidet. */
    --radius: 0;
    --radius-klein: 0;
    --transition-fast: all 0.16s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- HELLER MODUS (Standard, Industrie-freundlich) ---- */
    color-scheme: light;
    --bg:            #f2f4f9;
    --flaeche:       #ffffff;
    --flaeche-hoch:  #ffffff;
    --linie:         rgba(20, 30, 60, 0.09);
    --linie-zart:    rgba(20, 30, 60, 0.055);
    --linie-stark:   rgba(20, 30, 60, 0.16);
    --lichtkante:    inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --karten-schatten: 0 1px 2px rgba(16, 24, 48, 0.04), 0 4px 12px -4px rgba(16, 24, 48, 0.07);

    --titel:      #16203a;
    --text-color: #1c2537;
    --text-light: #4a5670;
    --dark-gray:  #828ca4;
    --text-faint: #a2abbf;

    --fehler: #b3261e;
    --haken:  #1a7f4f;
    --icon:   #41538B;
    --gold-lesbar: #9a7413;
    --warn-glow: none;

    --knr-bg: #ffffff;
    --pill-bg: #f4f6fa;
    --pill-aktiv-bg: rgba(var(--brand-rgb), 0.07);
    --pill-aktiv-border: rgba(var(--brand-rgb), 0.22);
    --pill-aktiv-text: #374674;
    --chip-bg: rgba(232, 184, 75, 0.16);
    --chip-border: rgba(154, 116, 19, 0.35);
    --chip-text: #8a6d1a;
    --avatar-bg: #f4f6fa;
    --avatar-border: rgba(20, 30, 60, 0.12);
    --eingabe-bg: #ffffff;

    /* Modul-Farbnoten (dezent, je Modul eine) */
    --tint-blau-bg: rgba(65, 83, 139, 0.1);      --tint-blau-fg: #41538B;
    --tint-gold-bg: rgba(232, 184, 75, 0.18);    --tint-gold-fg: #9a7413;
    --tint-stahl-bg: rgba(74, 86, 112, 0.1);     --tint-stahl-fg: #4a5670;
    --tint-violett-bg: rgba(110, 79, 176, 0.1);  --tint-violett-fg: #6e4fb0;
    --tint-gruen-bg: rgba(26, 127, 79, 0.1);     --tint-gruen-fg: #1a7f4f;
    --tint-rot-bg: rgba(179, 38, 30, 0.09);      --tint-rot-fg: #b3261e;

    --mesh:
        radial-gradient(55% 45% at 100% 0%, rgba(var(--brand-rgb), 0.07), transparent 62%),
        radial-gradient(45% 40% at 0% 100%, rgba(110, 79, 176, 0.05), transparent 60%);
    --grain: 0.012;
    --scroll-thumb: #cdd5e3;
    --scroll-thumb-hover: #a8b3c9;
    --schleier-farbe: rgba(10, 16, 40, 0.5);

    --sh-sm: 0 1px 2px rgba(16, 24, 48, 0.06);
    --sh-md: 0 2px 6px rgba(16, 24, 48, 0.06), 0 10px 24px -8px rgba(16, 24, 48, 0.12);
    --sh-xl: 0 8px 18px rgba(16, 24, 48, 0.1), 0 36px 70px -16px rgba(16, 24, 48, 0.22);
}

/* ---- DUNKLER MODUS "Nachtlabor" (folgt der Browser-Einstellung) ---- */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg:            #0a0f1e;
        --flaeche:       #131a2e;
        --flaeche-hoch:  #1a2238;
        --linie:         rgba(255, 255, 255, 0.07);
        --linie-zart:    rgba(255, 255, 255, 0.05);
        --linie-stark:   rgba(255, 255, 255, 0.13);
        --lichtkante:    inset 0 1px 0 rgba(255, 255, 255, 0.045);
        --karten-schatten: 0 2px 6px rgba(0, 0, 0, 0.3), 0 10px 24px -8px rgba(0, 0, 0, 0.45);

        --titel:      #ffffff;
        --text-color: #eef1f9;
        --text-light: #aeb7d0;
        --dark-gray:  #7a849e;
        --text-faint: #59617a;

        --fehler: #f87171;
        --haken:  #34d399;
        --icon:   #8a9bcb;
        --gold-lesbar: #e8b84b;
        --warn-glow: 0 0 24px rgba(248, 113, 113, 0.35);

        --knr-bg: rgba(255, 255, 255, 0.04);
        --pill-bg: rgba(255, 255, 255, 0.04);
        --pill-aktiv-bg: rgba(var(--brand-rgb), 0.18);
        --pill-aktiv-border: rgba(138, 155, 203, 0.35);
        --pill-aktiv-text: #8a9bcb;
        --chip-bg: rgba(232, 184, 75, 0.1);
        --chip-border: rgba(232, 184, 75, 0.3);
        --chip-text: #e8b84b;
        --avatar-bg: rgba(255, 255, 255, 0.06);
        --avatar-border: rgba(255, 255, 255, 0.13);
        --eingabe-bg: #1a2238;

        --tint-blau-bg: rgba(95, 114, 184, 0.22);   --tint-blau-fg: #8a9bcb;
        --tint-gold-bg: rgba(232, 184, 75, 0.13);   --tint-gold-fg: #e8b84b;
        --tint-stahl-bg: rgba(255, 255, 255, 0.07); --tint-stahl-fg: #aeb7d0;
        --tint-violett-bg: rgba(139, 92, 246, 0.16);--tint-violett-fg: #a78bfa;
        --tint-gruen-bg: rgba(52, 211, 153, 0.12);  --tint-gruen-fg: #34d399;
        --tint-rot-bg: rgba(248, 113, 113, 0.12);   --tint-rot-fg: #f87171;

        --mesh:
            radial-gradient(55% 45% at 100% 0%, rgba(var(--brand-rgb), 0.16), transparent 62%),
            radial-gradient(45% 40% at 0% 100%, rgba(110, 79, 176, 0.10), transparent 60%),
            radial-gradient(30% 25% at 15% 10%, rgba(232, 184, 75, 0.05), transparent 65%);
        --grain: 0.017;
        --scroll-thumb: #2c3650;
        --scroll-thumb-hover: #3a4666;
        --schleier-farbe: rgba(4, 7, 16, 0.6);

        --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --sh-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
        --sh-xl: 0 8px 18px rgba(0, 0, 0, 0.5), 0 36px 70px -16px rgba(0, 0, 0, 0.7);
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Das hidden-Attribut gewinnt IMMER - auch gegen display:flex/grid der
   Komponenten (sonst blendet JS aus, aber das Auge sieht es trotzdem). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--text-color);
    background: var(--bg);
    line-height: 1.55;
    letter-spacing: -0.006em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-feature-settings: 'cv02', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Atmosphaere: Mesh-Verlauf + feines Grain ueber dem ganzen Raum */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--mesh);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--grain);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; }
a { color: var(--icon); }

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(138, 155, 203, 0.35);
    border-radius: 0;
}

::selection { background: rgba(var(--brand-rgb), 0.45); }

/* Scrollbar passend zum Modus */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: content-box; }

/* ---------------- Eintritts-Animationen ---------------- */

@keyframes aufblenden {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: none; }
}
@keyframes schuetteln {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}
.anim { animation: aufblenden 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Kommt die Seite nach einem Klick im Formular zurueck, blendet sie
   NICHT neu ein - sie ist ja dieselbe Seite, nur einen Schritt weiter.
   Der Schalter kommt aus seite_kopf() und steht nur bei POST. */
body:has(.seite-ruhig) .anim { animation: none; }
.anim--2 { animation-delay: 0.06s; }
.anim--3 { animation-delay: 0.12s; }
.anim--4 { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Ladebalken beim Seitenwechsel ----------------------------------
   Ein Klick in der Navigation holt nur noch den Inhalt (siehe
   „Seitenwechsel" in portal.js). Antwortet der Server nicht sofort, soll
   man sehen, dass etwas laeuft - sonst wirkt der Klick tot. Ein Streifen
   von zwei Pixeln, mehr braucht es nicht; er erscheint erst nach 150 ms,
   damit er bei schnellen Antworten gar nicht auftaucht. */
/* Der Balken WAECHST ueber die ganze Seite, statt dass ein kurzes Stueck
   hin und her wandert (Yannick 15.09.2026): Bei einer schnellen Antwort
   war das Stueck nach einem Viertel schon wieder weg - das sah aus, als
   sei etwas haengengeblieben.

   Er laeuft zuegig los und wird zum Ende hin langsamer, bleibt aber kurz
   vor dem Rand stehen: Die letzten Prozent gehoeren der Antwort, nicht
   der Schaetzung. Ist sie da, springt er auf voll und blendet aus. */
.ladebalken {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    z-index: 900; pointer-events: none;
    background: var(--primary-light);
    transition: width 1.6s cubic-bezier(0.05, 0.75, 0.2, 1), opacity 0.25s ease;
}
.ladebalken--laeuft { width: 92%; }
.ladebalken--fertig {
    width: 100%; opacity: 0;
    transition: width 0.18s ease-out, opacity 0.3s ease 0.12s;
}

/* ---------------- App-Layout: Seitenleiste + Inhalt ---------------- */

.app { display: flex; min-height: 100vh; position: relative; z-index: 1; }
.app__haupt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sidebar {
    width: 240px;
    flex: none;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--white);
    background: linear-gradient(180deg, #121830, #0c1120);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    overflow: hidden;
    z-index: 100;
}
.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(80% 30% at 0% 0%, rgba(95, 114, 184, 0.20), transparent 60%),
        radial-gradient(70% 30% at 100% 100%, rgba(110, 79, 176, 0.14), transparent 60%);
}
.sidebar > * { position: relative; }
.sidebar__kopf { padding: 1.55rem 1.35rem 1.15rem; }
.sidebar__marke { display: block; }
.sidebar__logo {
    height: 27px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.96;
}
.sidebar__untertitel {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent-color);
    opacity: 0.9;
}
.sidebar__nav {
    flex: 1;
    padding: 0.4rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}
.sidebar__nav-titel {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #a7b0cc;
    opacity: 0.5;
    padding: 0 0.8rem;
    margin: 0.9rem 0 0.35rem;
}
.sidebar__nav::-webkit-scrollbar { width: 0; }
.sidebar__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    /* Seitlich 13px statt 12,8: Der Zaehler haengt am rechten Rand - auf einem
       Bruchteil-Pixel wird sein Kreis unscharf und die Ziffer wandert. */
    padding: 0.58rem 0.8125rem;
    border-radius: 0;
    text-decoration: none;
    font-size: 0.895rem;
    font-weight: 480;
    color: #a7b0cc;
    transition: var(--transition-fast);
}
.sidebar__link svg { width: 16px; height: 16px; flex: none; opacity: 0.85; }
.sidebar__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }
.sidebar__link--aktiv {
    background: rgba(255, 255, 255, 0.07);
    color: var(--white);
    font-weight: 560;
}
.sidebar__link--aktiv svg { opacity: 1; color: var(--brand-300); }
.sidebar__link--aktiv::before {
    content: '';
    position: absolute;
    left: -0.75rem;
    top: 24%;
    bottom: 24%;
    width: 2.5px;
    border-radius: 0;
    background: var(--accent-color);
}

.sidebar__fuss {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.95rem 1.05rem 1.05rem;
    background: rgba(0, 0, 0, 0.14);
}
/* Standort-Wechsler (eigenes Dropdown im App-Stil, oeffnet nach oben) */
.wechsler { position: relative; margin-bottom: 0.9rem; }
.wechsler__titel { padding: 0; margin: 0 0 0.35rem; }
.wechsler__knopf {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    color: var(--white);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}
.wechsler__knopf:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.28); }
.wechsler__aktuell { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wechsler__name {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.94);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wechsler__ort { font-size: 0.7rem; color: #7a849e; }
.wechsler__pfeil { display: inline-flex; color: #7a849e; transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); flex: none; }
.wechsler__pfeil svg { width: 13px; height: 13px; transform: rotate(-90deg); }
.wechsler--offen .wechsler__pfeil svg { transform: rotate(90deg); }

.wechsler__menue {
    /* Klappt nach UNTEN. Frueher nach oben, weil der Wechsler im Fuss der
       Leiste sass - dort war das die einzige Richtung. Seit er oben unter
       dem Logo steht, lief das Menue aus dem Bild (06.08.2026). */
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1c2440;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 4px;
    z-index: 120;
    display: flex;
    flex-direction: column;
}
.wechsler__suche {
    position: relative;
    padding: 2px 2px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 4px;
    flex: none;
}
.wechsler__suche svg {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(calc(-50% - 2px));
    width: 12px;
    height: 12px;
    color: #7a849e;
    pointer-events: none;
}
.wechsler__suche input {
    width: 100%;
    padding: 0.4rem 0.5rem 0.4rem 1.7rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    color: rgba(255, 255, 255, 0.92);
    font: inherit;
    font-size: 0.8rem;
}
.wechsler__suche input::placeholder { color: #59617a; }
.wechsler__suche input:focus { outline: none; border-color: var(--brand-300); }
.wechsler__liste {
    overflow-y: auto;
    /* Eine Zeile je Standort: In diese Hoehe passen rund 15 statt vorher 4. */
    max-height: min(440px, 62vh);
    scrollbar-width: thin;
    scrollbar-color: #2c3650 transparent;
}
.wechsler__leer {
    font-size: 0.78rem;
    color: #7a849e;
    padding: 0.5rem 0.6rem;
}
.wechsler__eintrag {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.36rem 0.55rem;
    border: none;
    border-radius: 0;
    background: none;
    color: #a7b0cc;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}
.wechsler__eintrag:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
/* Name links (kuerzt mit …), Kundennummer rechts - beides in EINER Zeile. */
.wechsler__eintrag .wechsler__name { color: inherit; flex: 1; min-width: 0; font-size: 0.78rem; font-weight: 550; }
.wechsler__eintrag .wechsler__nr {
    flex: none; font-size: 0.7rem; text-align: right; white-space: nowrap;
    color: #7a849e; font-variant-numeric: tabular-nums;
}
.wechsler__eintrag:hover .wechsler__nr, .wechsler__eintrag--aktiv .wechsler__nr { color: #a7b0cc; }
.wechsler__abschnitt {
    margin: 0.3rem 0 0.1rem; padding: 0.45rem 0.55rem 0.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #7a849e;
}
/* Der gewaehlte Standort traegt einen Strich am linken Rand statt eines
   Hakens: Die Haken-Spalte hielt in JEDER Zeile Platz frei, den nur eine
   einzige nutzte - und genau der fehlte den Namen (Yannick 18.09.2026). */
.wechsler__eintrag--aktiv {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 2px 0 0 var(--accent-color);
}
.sidebar__benutzer {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}
.sidebar__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.sidebar__benutzer-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.sidebar__benutzer-name { font-size: 0.84rem; font-weight: 570; color: rgba(255, 255, 255, 0.95); }
.sidebar__benutzer-standort {
    font-size: 0.72rem;
    color: #7a849e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sidebar__abmelden {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.46rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: var(--transition-fast);
}
/* Abmelden ist seit 19.09.2026 ein Knopf in einem Formular (POST + Token) - er soll aussehen wie der Link zuvor. */
button.sidebar__abmelden { background: none; font-family: inherit; cursor: pointer; }
.sidebar__abmelden svg { width: 14px; height: 14px; }
.sidebar__abmelden:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); border-color: rgba(255, 255, 255, 0.3); }

/* Mobil-Kopfleiste + Schleier (Sidebar wird zum Einschub) */
.mobilbar { display: none; }
.schleier { display: none; }

/* ---------------- Inhalt ---------------- */

.inhalt {
    max-width: 1120px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 2.6rem 3rem;
    flex: 1;
}
/* Hier lag bis zum 15.09.2026 eine Einblendung ueber den GANZEN Inhalt.
   Sie lief zusaetzlich zu den `.anim`-Bausteinen darin - alles blendete
   also doppelt ein -, und beim Bereichswechsel der Stammdaten wanderte
   dadurch auch die Navigation mit, was wie ein Neuaufbau aussah. Was
   einblenden soll, sagt es jetzt selbst: `.anim` und `.sd__inhalt`. */

/* Seitenkopf: Eyebrow + Titel + Meta-Zeile (+ Aktion rechts) */
.seitenkopf {
    margin-bottom: 1.9rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem 2rem;
    flex-wrap: wrap;
}
/* `flex: 1 1 …` statt nur min-width: Ohne Schrumpfrecht nahm eine lange
   Unterzeile die ganze Zeile ein und schob die Aktionen auf breiten
   Bildschirmen unter den Titel (gesehen 14.09.2026 bei 1400 px). */
.seitenkopf__haupt { flex: 1 1 12rem; min-width: 0; }
/* Umbrechen statt ueberlaufen: drei Knoepfe (Auftrag, Reparatur) waren am
   Telefon breiter als die Seite. */
.seitenkopf__aktionen { display: flex; gap: 0.6rem; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; padding-top: 1.1rem; }

/* Zurueck zur Liste - EIN Muster fuer jede Detailseite: kleiner Pfeil,
   daneben das Ziel, oben links ueber der Ueberschrift.

   Pfeil UND Wort: Der Pfeil zeigt die Richtung, das Wort sagt wohin
   (Yannick 14.09.2026). Und links oben, nicht rechts bei den Knoepfen -
   dort stehen Aktionen (PDF, Lieferschein), und ein „Alle Auftraege"
   dazwischen sah aus wie eine davon. Dasselbe Muster nutzt das Formblatt
   schon laenger; hier wird es zum Baustein fuer alle. */
.zurueck, .blatt__zurueck {
    display: inline-flex; align-items: center; gap: 0.3rem;
    margin-bottom: 0.85rem; font-size: 0.8rem; font-weight: 600;
    color: var(--text-faint); text-decoration: none;
}
.zurueck:hover, .blatt__zurueck:hover { color: var(--icon); }
.zurueck svg, .blatt__zurueck svg { width: 13px; height: 13px; transform: rotate(180deg); }
.seitenkopf--gross h1 { font-size: 1.8rem; }
.seitenkopf__datum,
.seitenkopf__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold-lesbar);
    opacity: 0.9;
    margin-bottom: 0.35rem;
}
.seitenkopf h1 {
    font-size: 1.55rem;
    font-weight: 650;
    letter-spacing: -0.022em;
    line-height: 1.28;
    color: var(--titel);
}
.seitenkopf__unterzeile {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
.seitenkopf__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-light);
}
.seitenkopf__meta svg { width: 13px; height: 13px; opacity: 0.65; vertical-align: -2px; margin-right: 0.3rem; }
.knr {
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    font-size: 0.78rem;
    color: var(--text-color);
    border: 1px solid var(--linie-stark);
    background: var(--knr-bg);
    border-radius: 0;
    padding: 0.12rem 0.55rem;
}

.abschnittstitel {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dark-gray);
    margin: 2rem 0 0.8rem;
}
.abschnittstitel:first-of-type { margin-top: 0; }

/* ---------------- Kennzahlen: EIN leuchtender Block ---------------- */

.statgruppe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    box-shadow: none;
    overflow: hidden;
    margin-bottom: 2.1rem;
}
.stat {
    display: flex;
    flex-direction: column;
    padding: 1.05rem 1.45rem 1.15rem;
    border-left: 1px solid var(--linie-zart);
    margin-left: -1px;
    transition: var(--transition-fast);
}
.stat:hover { background: rgba(var(--brand-rgb), 0.04); }
/* Eine Kennzahl darf ein Link sein (z. B. auf die offenen Stammdaten-Wuensche) -
   dann aber ohne Linkfarbe und Unterstreichung, sonst faellt sie aus der Reihe. */
a.stat { color: inherit; text-decoration: none; }
a.stat:hover .stat__name { color: var(--primary-color); }
.stat__name {
    order: 1;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--dark-gray);
    margin-bottom: 0.3rem;
}
.stat__wert {
    order: 2;
    display: block;
    font-size: 1.7rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--titel);
    font-variant-numeric: tabular-nums;
}
.stat--warnung .stat__wert { color: var(--fehler); text-shadow: var(--warn-glow); }

/* ---------------- Modul-Kacheln ---------------- */

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 0.9rem;
}
.kachel {
    position: relative;
    display: block;
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    box-shadow: none;
    padding: 1.15rem 1.25rem 1.05rem;
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}
a.kachel:hover {
    border-color: rgba(138, 155, 203, 0.45);
    background: var(--flaeche-hoch);
}
a.kachel:hover .kachel__pfeil { opacity: 1; transform: translateX(2px); }
.kachel__titel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--titel);
    margin-bottom: 0.4rem;
}
.kachel__symbol {
    width: 30px;
    height: 30px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: var(--tint-blau-bg);
    color: var(--tint-blau-fg);
}
.kachel__symbol svg { width: 16px; height: 16px; }
.kachel__symbol--gold    { background: var(--tint-gold-bg);    color: var(--tint-gold-fg); }
.kachel__symbol--stahl   { background: var(--tint-stahl-bg);   color: var(--tint-stahl-fg); }
.kachel__symbol--violett { background: var(--tint-violett-bg); color: var(--tint-violett-fg); }
.kachel__symbol--gruen   { background: var(--tint-gruen-bg);   color: var(--tint-gruen-fg); }
.kachel__pfeil {
    margin-left: auto;
    display: inline-flex;
    color: var(--icon);
    opacity: 0;
    transition: var(--transition-fast);
}
.kachel__pfeil svg { width: 15px; height: 15px; }
.kachel__text {
    font-size: 0.82rem;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    min-height: 2.55em;
}
.kachel__status {
    font-size: 0.72rem;
    font-weight: 550;
    color: var(--dark-gray);
    background: var(--pill-bg);
    border: 1px solid var(--linie);
    border-radius: 0;
    padding: 0.14rem 0.62rem;
    display: inline-block;
}
.kachel__status--aktiv {
    color: var(--pill-aktiv-text);
    background: var(--pill-aktiv-bg);
    border-color: var(--pill-aktiv-border);
}
.kachel--bald { opacity: 0.6; }

/* ---------------- Inhalts-Karten ---------------- */

.karten-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.9rem;
    align-items: start;
    margin-bottom: 0.9rem;
}
.karten-raster--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .karten-raster--2 { grid-template-columns: 1fr; } }
/* Nur eine Karte im Raster: Sie soll die Seite nicht ausfuellen -
   sonst stehen Begriff und Wert einer Definitionsliste meterweit
   auseinander (Angebot ohne Referenzen, 14.09.2026). */
.karten-raster--eins { grid-template-columns: minmax(0, 34rem); }

.karte {
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: var(--radius);
    box-shadow: none;
    padding: 1.25rem 1.4rem 1.3rem;
}
.karte__kopf {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--titel);
    margin-bottom: 0.95rem;
}
.karte__symbol { display: inline-flex; color: var(--icon); }
.karte__symbol svg { width: 16px; height: 16px; }
.karte__zwischentitel {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dark-gray);
    margin: 1.05rem 0 0.45rem;
}
.karte__kopf + .karte__zwischentitel,
.karte__hinweis + .karte__zwischentitel,
.anschrift .karte__zwischentitel { margin-top: 0; }
.def + .karte__zwischentitel { margin-top: 1.1rem; }
.karte__absatz { font-size: 0.86rem; color: var(--text-color); line-height: 1.6; }
.karte__absatz--leer { color: var(--dark-gray); font-size: 0.83rem; }
.karte__hinweis { font-size: 0.82rem; color: var(--text-light); margin-bottom: 0.65rem; }

/* Definitionszeilen */
.def { display: flex; flex-direction: column; }
.def__zeile {
    display: grid;
    /* Feste Obergrenze statt 40 %: In einer breiten Karte schob der
       Prozentwert den Begriff auf 400 px und den Wert weit nach rechts -
       zwischen „Fachbereich" und „Elektrik" lag eine Handbreit Nichts. */
    grid-template-columns: minmax(130px, 14rem) 1fr;
    gap: 1rem;
    font-size: 0.86rem;
    align-items: baseline;
    padding: 0.46rem 0;
    border-bottom: 1px solid var(--linie-zart);
}
.def__zeile:first-child { padding-top: 0; }
.def__zeile:last-child { border-bottom: none; padding-bottom: 0; }
.def__zeile dt { color: var(--text-light); }
.def__zeile dd {
    color: var(--text-color);
    font-weight: 480;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

/* Haken-Listen (Vorgaben, Logistik, Rechnungsstellung) */
.merkmale {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.3rem 1rem;
}
.merkmale li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-color);
    line-height: 1.5;
}
.merkmale svg {
    width: 13px;
    height: 13px;
    flex: none;
    margin-top: 0.28rem;
    color: var(--haken);
    opacity: 0.9;
}

/* Anschriften nebeneinander */
.anschriften {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* Personen (Ansprechpartner) */
.personen { list-style: none; display: flex; flex-direction: column; }
.person {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--linie-zart);
}
.person:first-child { padding-top: 0; }
.person:last-child { border-bottom: none; padding-bottom: 0; }
.person__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--avatar-bg);
    border: 1px solid var(--avatar-border);
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-top: 0.1rem;
}
.person__daten { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }
.person__name { font-weight: 600; font-size: 0.88rem; color: var(--titel); }
.person__funktion { font-size: 0.79rem; color: var(--text-light); }
.person__kontakt {
    font-size: 0.82rem;
    color: var(--text-light);
    overflow-wrap: anywhere;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.2rem;
}
.person__kontaktteil {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: inherit;
    text-decoration: none;
}
.person__kontaktteil svg { width: 12px; height: 12px; color: var(--dark-gray); }
a.person__kontaktteil:hover { color: var(--icon); }

/* Chips (sparsam: Kennzeichnungen wie "Hauptkontakt") */
.chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 550;
    color: var(--chip-text);
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: 0;
    padding: 0.06rem 0.5rem;
    line-height: 1.6;
}
.chip--klein { vertical-align: 2px; margin-left: 0.35rem; }

/* ---------------- Dashboard-Raster + Aktivitaets-Feed ---------------- */

.dash-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.6rem;
    align-items: start;
}
@media (max-width: 1080px) { .dash-raster { grid-template-columns: 1fr; } }

.aktivitaet { padding-bottom: 0.9rem; }
.aktivitaet__liste { list-style: none; display: flex; flex-direction: column; }
.ereignis {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--linie-zart);
}
.ereignis:last-child { border-bottom: none; }
.ereignis__punkt {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    margin-top: 0.45rem;
    background: var(--tint-blau-fg);
}
.ereignis__punkt--gold { background: var(--tint-gold-fg); }
.ereignis__punkt--gruen { background: var(--tint-gruen-fg); }
.ereignis__punkt--rot { background: var(--tint-rot-fg); }
.ereignis__text { font-size: 0.84rem; color: var(--text-color); line-height: 1.45; min-width: 0; }
.ereignis__text strong { font-weight: 600; color: var(--titel); font-variant-numeric: tabular-nums; }
.ereignis__zeit { display: block; font-size: 0.74rem; color: var(--dark-gray); margin-top: 0.05rem; }
.ereignis__link { text-decoration: none; color: inherit; }
.ereignis__link:hover strong { color: var(--icon); text-decoration: underline; }

/* Sekundaerer Knopf (Seitenkopf-Aktionen) */
.knopf.knopf--sekundaer {
    background: var(--flaeche);
    color: var(--text-color);
    border: 1px solid var(--linie-stark);
    padding: 0.5rem 1rem;
    font-size: 0.86rem;
    font-weight: 550;
}
.knopf.knopf--sekundaer svg { width: 14px; height: 14px; color: var(--icon); }
.knopf.knopf--sekundaer:hover {
    filter: none;
    border-color: var(--icon);
    box-shadow: none;
}

/* ---------------- Aufträge: Werkzeugleiste, Liste, Timeline ---------------- */

.werkzeugleiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
/* Reiter als Unterstrich: kein Segment-Schalter, keine Kachel fuer den
   aktiven - eine Linie unter dem Wort, wie in einem Register. */
.tabs {
    display: inline-flex;
    border-bottom: 1px solid var(--linie);
    gap: 0.2rem;
}
.tabs__tab {
    padding: 0.45rem 0.85rem 0.55rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: 0.86rem;
    font-weight: 550;
    color: var(--text-light);
    text-decoration: none;
    transition: var(--transition-fast);
    white-space: nowrap;
}
.tabs__tab:hover { color: var(--titel); }
.tabs__tab--aktiv {
    color: var(--titel);
    border-bottom-color: var(--icon);
}
.tabs__zahl { color: var(--dark-gray); font-variant-numeric: tabular-nums; margin-left: 0.3rem; }

.suche { position: relative; flex: 1; min-width: 190px; max-width: 300px; }
.suche input {
    width: 100%;
    padding: 0.5rem 0.85rem 0.5rem 2.1rem;
    background: var(--flaeche);
    border: 1px solid var(--linie-stark);
    border-radius: 0;
    color: var(--text-color);
    font: inherit;
    font-size: 0.87rem;
    transition: var(--transition-fast);
}
.suche input::placeholder { color: var(--dark-gray); }
.suche input:focus { outline: none; border-color: var(--icon); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16); }
.suche svg {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--dark-gray);
    pointer-events: none;
}

/* Hier stand bis 15.09.2026 die Kartenliste (`.auftragsliste`/`.auftrag`).
   Seit Reparaturen, Rechnungen und Fahrdienst auf den gemeinsamen
   Listen-Bausteinen laufen, benutzt sie keine Seite mehr. Geblieben ist
   `.auftrag__fuss`: Die Unterauftraege der Auftragsseite tragen es. */
.auftrag__fuss { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.75rem; flex-wrap: wrap; }

/* Abzeichen (DAkkS/Werks/Express/Abgeschlossen) */
.abzeichen {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
    padding: 0.14rem 0.45rem;
    line-height: 1.6;
    background: var(--tint-blau-bg);
    color: var(--tint-blau-fg);
}
.abzeichen--stahl { background: var(--tint-stahl-bg); color: var(--tint-stahl-fg); }
.abzeichen--gold  { background: var(--tint-gold-bg);  color: var(--tint-gold-fg); }
.abzeichen--gruen { background: var(--tint-gruen-bg); color: var(--tint-gruen-fg); }
.abzeichen--rot   { background: var(--tint-rot-bg);   color: var(--tint-rot-fg); }
.abzeichen--violett { background: var(--tint-violett-bg); color: var(--tint-violett-fg); }
/* Abzeichen mit Symbol davor - das Zeichen faellt schneller auf als das Wort */
.abzeichen--symbol { display: inline-flex; align-items: center; gap: 0.28rem; }
.abzeichen--symbol svg { width: 11px; height: 11px; flex: none; }

/* Mini-Timeline in der Liste */
.prozess-mini { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 160px; max-width: 380px; }
.prozess-mini__schritt { height: 5px; border-radius: 0; flex: 1; background: var(--linie); }
.prozess-mini__schritt--fertig { background: var(--primary-light); }
.prozess-mini__schritt--aktiv { background: var(--accent-color); }
.prozess-mini__label { font-size: 0.79rem; font-weight: 600; color: var(--text-light); white-space: nowrap; }

/* Grosser Prozess-Stepper (Detailseite) */
.prozess { display: flex; margin: 0.4rem 0 0.6rem; }
.schritt {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    min-width: 0;
}
.schritt::before, .schritt::after {
    content: '';
    position: absolute;
    top: 12px;
    height: 2px;
    background: var(--linie);
}
.schritt::before { left: 0; right: calc(50% + 16px); }
.schritt::after  { left: calc(50% + 16px); right: 0; }
.schritt:first-child::before, .schritt:last-child::after { display: none; }
.schritt--fertig::before, .schritt--fertig::after,
.schritt--aktiv::before { background: var(--primary-light); }
.schritt__punkt {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--linie-stark);
    background: var(--flaeche);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: var(--transition-fast);
}
.schritt__punkt svg { width: 12px; height: 12px; color: var(--white); display: none; }
.schritt--fertig .schritt__punkt {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.schritt--fertig .schritt__punkt svg { display: block; }
.schritt--aktiv .schritt__punkt {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px var(--tint-gold-bg), 0 0 16px rgba(232, 184, 75, 0.35);
}
.schritt--aktiv .schritt__punkt::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-color);
}
.schritt__name {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--dark-gray);
    text-align: center;
    line-height: 1.3;
}
.schritt--fertig .schritt__name { color: var(--text-light); }
.schritt--aktiv .schritt__name { color: var(--titel); }
.schritt__datum { font-size: 0.68rem; color: var(--dark-gray); }

/* Auf dem Telefon schieben sich sechs bis neun Beschriftungen
   uebereinander und sind nicht mehr zu lesen (gesehen 14.09.2026). Dort
   traegt die Punktkette den Stand, beschriftet wird nur der Schritt, der
   gerade laeuft - was er bedeutet, steht direkt darunter im Status. */
@media (max-width: 720px) {
    .prozess { padding-bottom: 1.5rem; }
    .schritt__name, .schritt__datum { display: none; }
    .schritt--aktiv .schritt__name {
        display: block;
        position: absolute; top: 100%; left: 50%;
        transform: translateX(-50%);
        margin-top: 0.45rem; white-space: nowrap;
        color: var(--titel);
    }
    /* Am Rand wuerde der zentrierte Text ueber die Karte hinausragen. */
    .schritt:first-child .schritt__name { left: 0; transform: none; }
    .schritt:last-child  .schritt__name { left: auto; right: 0; transform: none; }
}

/* dichter Stepper (Reparatur: 9 Stufen) */
.prozess--dicht .schritt__name { font-size: 0.67rem; }
.prozess--dicht .schritt__punkt { width: 22px; height: 22px; }
.prozess--dicht .schritt::before { right: calc(50% + 14px); }
.prozess--dicht .schritt::after  { left: calc(50% + 14px); }

/* Freigabe-Hinweis (Kostenvoranschlag wartet auf den Kunden) */
.hinweis--freigabe {
    background: var(--tint-gold-bg);
    color: var(--text-color);
    border: 1px solid var(--chip-border);
}
.hinweis--freigabe svg { color: var(--tint-gold-fg); }
.hinweis--freigabe strong { color: var(--titel); }

.prozess-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--linie-zart);
    margin-top: 1rem;
    padding-top: 0.85rem;
    font-size: 0.85rem;
    color: var(--text-light);
}
.prozess-status strong { color: var(--titel); font-weight: 600; }

/* Positionen-Tabelle */
.tabelle-huelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tabelle th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dark-gray);
    padding: 0.35rem 0.6rem 0.5rem;
    border-bottom: 1px solid var(--linie);
    white-space: nowrap;
}
.tabelle td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--linie-zart);
    color: var(--text-color);
    vertical-align: top;
}
.tabelle tr:last-child td { border-bottom: none; }
.tabelle .tnum { font-variant-numeric: tabular-nums; }
.tabelle__neben { color: var(--dark-gray); font-size: 0.78rem; }
.tabelle__freitext { color: var(--text-light); font-style: italic; }
.tabelle__rechts { text-align: right; }
.tabelle__warnung { color: var(--fehler); font-weight: 600; }
.tabelle__link { color: var(--icon); text-decoration: none; font-weight: 550; }
.tabelle__link:hover { text-decoration: underline; }
.tabelle tr[data-zeile-link] { cursor: pointer; transition: var(--transition-fast); }
.tabelle tr[data-zeile-link]:hover td { background: rgba(var(--brand-rgb), 0.05); }
.tabelle tfoot td { border-bottom: none; padding-top: 0.35rem; padding-bottom: 0.15rem; }
.tabelle__summe td { color: var(--text-light); font-size: 0.84rem; }
.tabelle__summe:first-child td { border-top: 1px solid var(--linie); padding-top: 0.65rem; }
.tabelle__summe--gesamt td { color: var(--titel); font-weight: 650; font-size: 0.92rem; padding-bottom: 0; }

.knopf.knopf--inaktiv { opacity: 0.55; cursor: not-allowed; }
.knopf.knopf--inaktiv:hover { border-color: var(--linie-stark); box-shadow: none; transform: none; }

/* Subauftraege: aufklappbare Bereiche je Labor */
.abschnittstitel__zusatz {
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-faint);
    margin-left: 0.5rem;
}
/* Flach wie die Listenzeilen: Die Laborzeilen standen als einzelne
   Kaestchen untereinander und liessen den Beleg wie einen Baukasten
   wirken (Yannick 14.09.2026). Getrennt wird jetzt durch dieselbe zarte
   Linie, aufgeklappt hebt sich die Zeile leicht ab. */
.subauftraege { display: flex; flex-direction: column; }
.subauftrag { border-bottom: 1px solid var(--linie-zart); }
.subauftrag[open] { background: var(--pill-bg); }
.subauftrag summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1.15rem;
    transition: var(--transition-fast);
    flex-wrap: wrap;
}
.subauftrag summary::-webkit-details-marker { display: none; }
.subauftrag summary:hover { background: rgba(var(--brand-rgb), 0.05); }
.subauftrag__chevron {
    display: inline-flex;
    color: var(--dark-gray);
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    flex: none;
}
.subauftrag__chevron svg { width: 14px; height: 14px; }
.subauftrag[open] .subauftrag__chevron { transform: rotate(90deg); }
.subauftrag__labor { font-weight: 600; font-size: 0.92rem; color: var(--titel); }
.subauftrag__unter {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dark-gray);
    border: 1px solid var(--linie-stark);
    border-radius: 0;
    padding: 0 0.35rem;
    font-variant-numeric: tabular-nums;
}
.subauftrag__rechts { margin-left: auto; font-size: 0.76rem; color: var(--dark-gray); white-space: nowrap; }
.subauftrag__inhalt {
    padding: 0.85rem 1.15rem 1rem;
    border-top: 1px solid var(--linie-zart);
}
.subauftrag__inhalt .auftrag__fuss { margin: 0 0 0.85rem; }

/* --- Team: Bereiche eines Support-Zugangs (aufklappbar in der Zelle) --- */
.bereiche { min-width: 12rem; }
.bereiche__kopf {
    list-style: none; cursor: pointer; font-weight: 550; color: var(--ueb-link);
    white-space: nowrap;
}
.bereiche__kopf::-webkit-details-marker { display: none; }
.bereiche__kopf::after { content: ' ›'; }
.bereiche[open] > .bereiche__kopf::after { content: ' ‹'; }
.bereiche__form { margin-top: 0.5rem; }
.bereiche__wahl {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1rem; margin-bottom: 0.6rem; font-size: 0.82rem;
}
.bereiche__feld { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
/* Passwort festlegen: Feld und Knopf in einer Reihe, rechtsbuendig wie die Knoepfe darueber. */
.passwort-setzen { display: flex; justify-content: flex-end; align-items: center; gap: 0.4rem; }
.passwort-setzen .eingabe { width: 17rem; padding-top: 0.35rem; padding-bottom: 0.35rem; font-size: 0.84rem; }

/* Sync-Protokoll: Meldungen und Nummern lesbar, ohne die Tabelle zu sprengen. */
.protokoll__text { white-space: pre-wrap; font-size: 0.76rem; margin: 0.4rem 0 0; max-width: 40rem; }
.protokoll__nummern { max-width: 22rem; overflow-wrap: anywhere; }

/* ---------------- App-Formulare (Benutzerverwaltung) ---------------- */

.formular { display: flex; flex-direction: column; gap: 0.9rem; max-width: 700px; }
/* Zweites Formular in derselben Karte (Verwaltung > Einstellungen > Selbstregistrierung). */
form + .formular { margin-top: 1.4rem; }
.formular__fuss { display: flex; align-items: center; gap: 1.1rem; margin-top: 0.2rem; }
.formzeilen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem 1rem;
}
.formfeld { display: flex; flex-direction: column; gap: 0.3rem; }
.formfeld--schmal { max-width: 150px; }
.formfeld--breit { grid-column: 1 / -1; }
.formfeld__name { font-size: 0.78rem; font-weight: 600; color: var(--text-light); }
.eingabe {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--eingabe-bg);
    border: 1px solid var(--linie-stark);
    border-radius: 0;
    color: var(--text-color);
    font: inherit;
    font-size: 0.9rem;
    transition: var(--transition-fast);
}
.eingabe:focus { outline: none; border-color: var(--icon); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16); }
.eingabe:disabled { opacity: 0.55; cursor: not-allowed; }

.kontrollzeile--dunkel { color: var(--text-color); margin: 0 0 1rem; }
.kontrollzeile--dunkel .kontrollzeile__box {
    background: var(--eingabe-bg);
    border-color: var(--linie-stark);
}
.kontrollzeile--dunkel .kontrollzeile__box:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.kontrollzeile--dunkel .kontrollzeile__box:disabled { opacity: 0.55; cursor: not-allowed; }

.rechte-bereich { border: none; margin: 0; padding: 0; transition: var(--transition-fast); }
.rechte-bereich[disabled] { opacity: 0.45; }
.rechte-tabelle__wahl { text-align: center; }
.rechte-tabelle__wahl label { display: block; cursor: pointer; padding: 0.1rem 0; }
.rechte-tabelle__wahl input {
    accent-color: var(--primary-color);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.rechte-tabelle__blindtext {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Benutzerliste: Aktionen rechts */
.knopf.knopf--klein { padding: 0.32rem 0.7rem; font-size: 0.76rem; }
.knopf.knopf--gefahr { color: var(--fehler); }
/* Der gefüllte Gefahr-Knopf ("Endgültig löschen"): rote Schrift auf dem dunklen Blau des
   Hauptknopfs war nicht zu lesen. Festes Rot, weil das helle Rot des dunklen Schemas keine
   weiße Schrift trägt. */
.knopf.knopf--gefahr:not(.knopf--sekundaer) { background: #b3261e; border-color: #b3261e; color: #fff; }
.knopf.knopf--gefahr:not(.knopf--sekundaer):hover { background: #8f1d17; border-color: #8f1d17; }
.knopf.knopf--gefahr:hover { border-color: var(--fehler); }

/* ---------------- Admin-Kundensicht: Hinweisleiste ---------------- */

.kundensicht-leiste {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.55rem 1.5rem;
    background: var(--tint-gold-bg);
    border-bottom: 1px solid var(--accent-color);
    font-size: 0.82rem;
    color: var(--titel);
}
.kundensicht-leiste__text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.kundensicht-leiste__text svg { width: 15px; height: 15px; color: var(--tint-gold-fg); }
.kundensicht-leiste__warn { color: var(--tint-rot-fg); }
.kundensicht-leiste__aktionen form {
    display: inline-flex;
    gap: 0.5rem;
}
.online-punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tint-gruen-fg);
    margin-right: 0.4rem;
    vertical-align: middle;
}
.tabelle__aktionen {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}
/* Lange deutsche Wörter ("Drehmomentschraubwerkzeuge") und Mailadressen bestimmen sonst die
   Mindestbreite der Spalten - die Tabelle lief aus der Karte, die Knöpfe rechts waren weg.
   Wörter dürfen nach Silben trennen (wo der Browser das kann); nur die Mailadresse darf überall
   umbrechen - mitten im Wort ohne Trennstrich sähe sonst jede Zelle zerhackt aus. */
.tabelle--silben td { hyphens: auto; }
.tabelle--silben .tabelle__still { overflow-wrap: anywhere; }
/* Formulare: vier Knöpfe je Zeile - zwei nebeneinander statt alle untereinander. */
.formulare__aktionen { min-width: 10.6rem; }
.formulare__aktionen > .knopf { margin: 0 0 0.3rem 0.2rem; }
.formulare__aktionen .tabelle__aktionen { gap: 0.2rem; }
.tabelle--silben th, .tabelle--silben td { padding-left: 0.45rem; padding-right: 0.45rem; }
.verwaltung-schalter { display: inline-flex; margin-left: 0.5rem; }
.hinweis .verwaltung-schalter { margin-left: auto; }

.verwaltung-anpassen {
    flex-basis: 100%;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--linie);
    padding-top: 0.5rem;
}
.verwaltung-anpassen > summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--tint-blau-fg);
}
.verwaltung-anpassen__form { margin-top: 0.75rem; }
.verwaltung-box { flex-wrap: wrap; }

/* =====================================================================
   STAMMDATEN

   Bewusst ohne Kacheln: Neun gerahmte Karten in einem Raster ergaben neun
   konkurrierende Blickfaenge und ungleich hohe Spalten. Stattdessen eine
   ruhige Spalte, Abschnitte durch Weissraum und feine Linien getrennt,
   links eine mitlaufende Bereichsnavigation.

   Es gibt KEINEN Bearbeitungsmodus. Was der Kunde aendern darf, ist immer
   beschreibbar und daran erkennbar, dass es hinterlegt ist - damit gibt es
   auch keinen Moment, in dem die Seite umspringt.
   ===================================================================== */

.sd { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 2.6rem; align-items: start; }

/* Der Bereichswechsel ist ein Wechsel der rechten Spalte, kein neuer
   Seitenaufbau - deshalb kommt der Inhalt seitlich herein, von der
   Navigation weg. Kurz gehalten: Er soll den Wechsel zeigen, nicht
   aufhalten (Yannick 15.09.2026). */
.sd__inhalt { min-width: 0; }
/* Die Bewegung liegt am einzelnen Bereich, nicht an der Spalte: Sie soll
   bei JEDEM Umblenden laufen, nicht nur beim ersten Aufbau. */
.sd__bereich { animation: sd-wechsel 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes sd-wechsel {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
    /* Gestapelt kommt der Inhalt von unten - seitlich sieht es dort aus,
       als sei die Seite verrutscht. */
    @keyframes sd-wechsel {
        from { opacity: 0; transform: translateY(7px); }
        to   { opacity: 1; transform: none; }
    }
}
@media (max-width: 900px) { .sd { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ---------------- Bereichsnavigation ---------------- */
.lotse { position: sticky; top: 1.2rem; display: flex; flex-direction: column; gap: 0.1rem; }

/* Zwei Ebenen in EINER Navigation: der Bereich, darunter seine
   Abschnitte. Der Bereich traegt mehr Gewicht - er wechselt die Seite,
   die Abschnitte springen nur (Yannick 15.09.2026). */
.lotse__gruppe { display: flex; flex-direction: column; }
.lotse__bereich {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem; border-radius: 0;
    font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em;
    color: var(--text-light); text-decoration: none;
    transition: var(--transition-fast);
}
.lotse__bereich:hover { background: var(--pill-bg); color: var(--titel); }
.lotse__bereich--aktiv { background: var(--pill-bg); color: var(--titel); }
.lotse__bereich .lotse__punkt { margin-left: auto; }
/* Die Abschnitte ruecken ein und stehen an einer feinen Linie - damit
   sieht man auf einen Blick, dass sie zum Bereich darueber gehoeren.

   AUF- UND ZUFAHREN wie ein Akkordeon (Yannick 15.09.2026): Der Trick ist
   `grid-template-rows: 0fr -> 1fr`. Auf eine Hoehe von `auto` laesst sich
   nicht ueberblenden, auf einen Bruchteil einer Zeile schon - und anders
   als ein geratener `max-height`-Wert stimmt das bei drei Abschnitten
   genauso wie bei sieben.

   `visibility` faehrt erst NACH der Bewegung auf `hidden`: Sonst
   verschwaende der Inhalt schlagartig, und mit der Tab-Taste landete man
   in einer zugefahrenen Liste. */
.lotse__unter {
    display: grid; grid-template-rows: 0fr;
    margin-left: 0.95rem; padding-left: 0.5rem;
    border-left: 1px solid transparent;
    opacity: 0; visibility: hidden;
    transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.18s ease,
                margin-block 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease,
                visibility 0s linear 0.3s;
}
.lotse__innen {
    overflow: hidden; min-height: 0;
    display: flex; flex-direction: column; gap: 0.1rem;
}
.lotse__bereich--aktiv + .lotse__unter {
    grid-template-rows: 1fr;
    margin-block: 0.1rem 0.5rem;
    border-left-color: var(--linie);
    opacity: 1; visibility: visible;
    transition-delay: 0s;
}
@media (max-width: 900px) {
    /* Am Telefon zaehlt nur der Bereichswechsel. Die Abschnitte sind
       Sprungmarken - auf einem Telefon scrollt man ohnehin, und sieben
       Kaesten davon kosten eine halbe Bildschirmhoehe (Yannick 15.09.2026). */
    .lotse {
        position: static; flex-direction: row; flex-wrap: nowrap; gap: 0.4rem;
        overflow-x: auto; scrollbar-width: none;
        padding-bottom: 0.8rem; border-bottom: 1px solid var(--linie);
    }
    .lotse::-webkit-scrollbar { display: none; }
    .lotse__gruppe { flex: none; }
    /* Am Telefon steht die Navigation in EINER Zeile - dort ist fuer ein
       Akkordeon kein Platz. */
    .lotse__unter { display: none; }
    .lotse__bereich {
        border: 1px solid var(--linie); border-radius: 0;
        padding: 0.34rem 0.7rem; font-size: 0.82rem; white-space: nowrap;
    }
    .lotse__bereich--aktiv { border-color: var(--linie-stark); }
}
.lotse__glied {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.44rem 0.6rem; border-radius: 0;
    font-size: 0.83rem; color: var(--text-light); text-decoration: none;
    border-left: 2px solid transparent;
    transition: var(--transition-fast);
}
.lotse__glied:hover { background: var(--pill-bg); color: var(--titel); }
.lotse__glied--aktiv {
    color: var(--pill-aktiv-text); font-weight: 600;
    background: var(--pill-aktiv-bg); border-left-color: var(--primary-color);
}
/* Punkt am Bereich, in dem etwas geaendert wurde oder in Bearbeitung ist -
   sonst muesste man acht Bereiche durchscrollen, um das zu sehen. */
.lotse__punkt {
    width: 6px; height: 6px; border-radius: 50%; flex: none; margin-left: auto;
    background: var(--accent-color); box-shadow: 0 0 0 2px var(--bg);
}
.lotse__punkt[hidden] { display: none; }
@media (max-width: 900px) {
    .lotse__glied {
        border-left: none; border: 1px solid var(--linie);
        padding: 0.32rem 0.65rem; font-size: 0.79rem;
    }
    .lotse__punkt { margin-left: 0.15rem; }
}

/* ---------------- Abschnitt ---------------- */
.feld {
    padding-bottom: 2.2rem; margin-bottom: 2.2rem;
    border-bottom: 1px solid var(--linie);
    scroll-margin-top: 1.2rem;
}
.feld:last-of-type { border-bottom: none; margin-bottom: 0; }
.feld__titel {
    font-size: 1.05rem; font-weight: 650; color: var(--titel);
    margin: 0 0 0.9rem; letter-spacing: -0.01em;
}
.feld__gruppe {
    font-size: 0.69rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--dark-gray); margin: 1.5rem 0 0.1rem; padding-top: 0.9rem;
    border-top: 1px solid var(--linie-zart);
}

/* Meldung innerhalb eines Abschnitts, z. B. wenn keine Botentour faehrt */
.feld__warnung {
    display: flex; align-items: flex-start; gap: 0.5rem;
    margin: 0.6rem 0 0; padding: 0.6rem 0.75rem;
    background: var(--tint-gold-bg); border: 1px solid var(--chip-border);
    border-radius: var(--radius-klein);
    font-size: 0.82rem; color: var(--text-color); line-height: 1.45;
}
.feld__warnung svg { width: 15px; height: 15px; flex: none; margin-top: 0.12rem; color: var(--gold-lesbar); }
.feld__warnung a { color: inherit; font-weight: 600; }

/* ---------------- Eine Angabe ----------------
   Beschriftung samt erklaerendem Halbsatz links, Wert rechts. */
.ang {
    display: grid; grid-template-columns: minmax(180px, 38%) minmax(0, 1fr);
    gap: 0.5rem 1.6rem; align-items: center;
    padding: 0.62rem 0; border-bottom: 1px solid var(--linie-zart);
    /* Bezugspunkt fuer die schwebende Hinweiskarte (siehe .hinweiszeile). */
    position: relative;
}
.ang:last-child { border-bottom: none; }
.ang__begriff { min-width: 0; }
.ang__label { font-size: 0.86rem; font-weight: 600; color: var(--titel); }
.ang__eingang { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex-wrap: wrap; }
.ang__wert { font-size: 0.88rem; color: var(--text-color); overflow-wrap: anywhere;
              min-width: 0; }
.ang__wert--leer { color: var(--text-faint); }
/* ---------------- Erklaerung am Fragezeichen ----------------
   Fuer die zwei Zusatzleistungen, die Geld kosten. Der Text steht als
   eigene Zeile in derselben Angabe und laeuft ueber beide Spalten - so
   bleibt Platz fuer ganze Saetze, statt sie in einen Tooltip zu pressen,
   den auf dem Handy niemand aufbekommt. */
.hinweisknopf {
    margin-left: 0.4rem; width: 16px; height: 16px; padding: 0;
    border: 1px solid var(--linie-stark); border-radius: 50%;
    background: none; color: var(--text-faint);
    font: 600 0.7rem/1 inherit; cursor: pointer; vertical-align: 1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hinweisknopf:hover { color: var(--icon); border-color: var(--icon); }
.hinweisknopf:focus-visible { outline: 2px solid var(--icon); outline-offset: 2px; }
.hinweisknopf[aria-expanded="true"] {
    background: var(--icon); border-color: var(--icon); color: #fff;
}
/* Der Hinweis LEGT SICH UEBER die Seite, er schiebt sie nicht auseinander.
   Vorher stand er als eigene Zeile in der Angabe: Beim Aufgehen rutschte
   alles darunter nach unten, beim Zugehen wieder hoch - „das ist so
   sprunghaft“ (Yannick 16.09.2026). Jetzt ist es eine Karte, die darueber
   schwebt; unter ihr bewegt sich nichts.

   `.ang` ist dafuer der Bezugspunkt - siehe `position: relative` dort. */
.hinweiszeile {
    position: absolute; z-index: 30; top: calc(100% - 0.35rem); left: 0;
    width: min(64ch, 100%);
    /* Nie hoeher als der Bildschirm: Ein langer Text machte sonst die
       Seite laenger, weil eine absolute Karte den Rollbereich mitwaechst
       (gesehen an der Drehmomentnorm, Yannick 16.09.2026). */
    max-height: min(60vh, 22rem); overflow-y: auto;
    padding: 0.8rem 0.95rem; border-radius: 0;
    background: var(--flaeche-hoch);
    border: 1px solid var(--linie);
    box-shadow: var(--karten-schatten);
    overscroll-behavior: contain;
}
/* Waere unten kein Platz mehr, klappt die Karte nach oben. Welche der
   beiden Richtungen gilt, entscheidet das Skript beim Aufgehen. */
.hinweiszeile--hoch {
    top: auto; bottom: calc(100% - 0.35rem);
}
.hinweiszeile--hoch::before { top: auto; bottom: -5px; transform: rotate(225deg); }
.hinweiszeile[hidden] { display: none; }
/* Kleines Dreieck zum Fragezeichen hin - sonst schwebt die Karte ohne
   erkennbare Herkunft im Raum. */
.hinweiszeile::before {
    content: ''; position: absolute; top: -5px; left: 1.4rem;
    width: 9px; height: 9px; transform: rotate(45deg);
    background: var(--flaeche-hoch);
    border-left: 1px solid var(--linie); border-top: 1px solid var(--linie);
}
/* Nicht jede Erklaerung haengt an einem Fragezeichen: Unter dem
   Hoechstbetrag der Reparaturfreigabe steht eine, die dauerhaft dasteht.
   Die darf nicht schweben - sie gehoert in die Zeile. */
.hinweiszeile--fest {
    position: static; z-index: auto; width: auto; max-width: 64ch;
    background: none; border: none; box-shadow: none; border-radius: 0;
    border-left: 2px solid var(--linie-stark);
    padding: 0.1rem 0 0.1rem 0.85rem; margin: 0.35rem 0 0.15rem;
}
.hinweiszeile--fest::before { display: none; }

@media (max-width: 620px) {
    /* Am Telefon ist fuer eine schwebende Karte kein Platz - dort steht
       der Text wieder in der Zeile. Gesprungen wird da ohnehin weniger:
       Die Angabe ist einspaltig, der Text steht direkt unter dem Wort,
       auf das er sich bezieht. */
    .hinweiszeile {
        position: static; width: auto; box-shadow: none;
        border: none; border-left: 2px solid var(--linie-stark);
        border-radius: 0; padding: 0.1rem 0 0.1rem 0.85rem;
        margin: 0.35rem 0 0.15rem;
    }
    .hinweiszeile::before { display: none; }
}
.hinweiszeile p {
    margin: 0 0 0.5rem;
    font-size: 0.82rem; line-height: 1.6; color: var(--text-light);
}
.hinweiszeile p:last-child { margin-bottom: 0; }
/* Die Marke sagt in drei Worten, worauf sich der Kunde einlaesst - wer nur
   ueberfliegt, soll wenigstens die lesen. */
.hinweiszeile__marke {
    display: inline-block; margin-bottom: 0.45rem;
    padding: 0.12rem 0.5rem; border-radius: 0;
    background: var(--tint-gold-bg); color: var(--tint-gold-fg);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
}

/* Der eingefrorene Wortlaut im Adminbereich. Bewusst als <pre>: Es ist
   ein Nachweis, kein Fliesstext - Zeilenumbrueche gehoeren dazu. */
.wortlaut {
    padding: 0.9rem 1rem; margin: 0.3rem 0;
    border-left: 3px solid var(--icon); border-radius: var(--radius-klein);
    background: var(--pill-bg);
}
.wortlaut__kopf { margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--text-light); }
.wortlaut__text {
    margin: 0; font-family: inherit; font-size: 0.84rem; line-height: 1.6;
    color: var(--text-color); white-space: pre-wrap; overflow-wrap: anywhere;
}
.tabelle__still { font-size: 0.76rem; color: var(--text-faint); }

/* ---------------- Formblätter ----------------
   Reparaturfreigabe, Kalibriernorm, Wartung.

   Diese Seiten ersetzen ein unterschriebenes Dokument. Deshalb sehen sie
   aus wie eines und nicht wie ein Webformular: schmale Spalte, Briefkopf
   mit Empfänger und Datum, nummerierte Punkte wie auf dem Papier, und am
   Ende ein Block, der sich deutlich vom Rest abhebt - dort endet das
   Lesen und beginnt das Verpflichten.

   Eine Spalte, 660px. Wer eine rechtsverbindliche Erklärung abgibt, soll
   nicht zwischen zwei Spalten hin und her springen. */
/* Bis zum 16.09.2026 eine 660-px-Lesespalte in der Mitte - die halbe
   Seite blieb leer, und die Gegenueberstellung alt/neu passte nirgends
   hin (Yannick). Jetzt nutzt das Blatt die Breite; lesbar bleibt es,
   weil die Textbloecke ihre eigene Zeilenlaenge behalten (max-width in
   ch, siehe .blatt__lead und .sachteil__absatz). */
.blatt { max-width: 1120px; margin: 0 auto; }

/* Titel links, Briefkopf rechts. Unter 900 px untereinander - dort ist
   fuer zwei Spalten kein Platz. */
.blatt__kopfzeile {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem 2.5rem; align-items: start;
}
.blatt__kopftext { min-width: 0; }
@media (max-width: 900px) {
    .blatt__kopfzeile { grid-template-columns: 1fr; }
}

/* Der Kopf endete einfach - jetzt schliesst ihn eine Linie ab, und
   darunter beginnt sichtbar der Inhalt. */
.blatt__kopf {
    margin-bottom: 2.4rem; padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--linie);
}
/* Im Formblatt etwas mehr Luft - alles andere kommt vom Baustein oben. */
.blatt__zurueck { margin-bottom: 1.4rem; }

.blatt__marke {
    margin: 0 0 0.35rem; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--icon);
}
.blatt__titel {
    margin: 0 0 0.6rem; font-size: clamp(1.75rem, 1.1rem + 1.6vw, 2.3rem);
    line-height: 1.15; font-weight: 700; letter-spacing: -0.025em;
    color: var(--titel);
}
.blatt__unter {
    margin: 0; font-size: 1rem; line-height: 1.6;
    color: var(--text-light); max-width: 56ch;
}

/* Briefkopf: für wen, von wem, wann. Was der Kunde auf dem Papier
   ausfüllen musste, steht hier schon - er ist ja angemeldet. */
/* Keine Karte mehr, sondern eine Angabenzeile wie im `.seitenkopf` der
   uebrigen Seiten: Der Briefkopf ist eine Auskunft, kein Bauteil. */
.blatt__meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, auto));
    gap: 0.9rem 2.2rem; margin: 0; padding: 0;
    border: none; background: none; box-shadow: none;
}
@media (max-width: 900px) {
    .blatt__meta { margin-top: 1.4rem; }
}
.blatt__meta div { min-width: 0; }
.blatt__meta dt {
    margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.blatt__meta dd {
    margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--titel);
    overflow-wrap: anywhere;
}

/* Zwei Schritte, sichtbar. Ein Formular, das verpflichtet, darf nicht
   überraschend beim Absenden landen. */
.schritte {
    display: flex; gap: 1.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none;
    padding-bottom: 1.1rem; border-bottom: 1px solid var(--linie);
}
/* Die Trennlinie zum Kopf traegt der Kopf selbst - hier waere sie doppelt. */
.blatt__kopf .schritte { border-bottom: none; padding-bottom: 0; }
.schritte__punkt {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; font-weight: 600; color: var(--text-faint);
}
.schritte__zahl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: none; border-radius: 50%;
    border: 1px solid var(--linie-stark); font-size: 0.72rem; font-weight: 700;
    /* = Innenhoehe (22px - 2px Rand): Mit der geerbten Zeilenhoehe sass die
       Ziffer 1,1 px zu hoch - siehe „ZAHL IM KREIS" am Ende der Datei. */
    line-height: 20px;
}
.schritte__zahl svg { width: 12px; height: 12px; }
.schritte__punkt--aktiv { color: var(--titel); }
.schritte__punkt--aktiv .schritte__zahl {
    background: var(--icon); border-color: var(--icon); color: #fff;
}
.schritte__punkt--fertig { color: var(--haken); }
.schritte__punkt--fertig .schritte__zahl {
    background: transparent; border-color: var(--haken); color: var(--haken);
}

/* Liegt schon eine Erklärung vor, steht das ganz oben - sonst gibt jemand
   dieselbe Festlegung ein zweites Mal ab. */
.stand {
    display: flex; gap: 0.8rem; align-items: flex-start;
    margin-bottom: 1.6rem; padding: 0.9rem 1.1rem;
    border: 1px solid var(--linie); border-left: 3px solid var(--haken);
    border-radius: var(--radius-klein); background: var(--flaeche);
}
.stand__inhalt { margin: 0 0 0.2rem; font-size: 0.9rem; font-weight: 600; color: var(--titel); }
.stand__wann { margin: 0; font-size: 0.78rem; color: var(--text-faint); }


/* ---- Die Auswahl: nummeriert wie auf dem Papier ---- */
/* Eine Liste, keine Kaesten: volle Breite, eine Zeile je Moeglichkeit,
   dazwischen eine Haarlinie - dieselbe Sprache wie die Wertzeilen auf der
   Auftragsseite (Yannick 16.09.2026). Nebeneinander liessen sich die drei
   zwar vergleichen, sie sahen aber aus wie Knoepfe aus einem anderen
   Produkt. Untereinander liest man ausserdem den ganzen Satz, statt ihn in
   eine schmale Spalte zu brechen. */
.wahlen {
    border-top: 1px solid var(--linie);
    margin-top: 0.2rem;
}
.wahlen .wahl {
    margin-bottom: 0; border-bottom: 1px solid var(--linie);
}

.wahl { margin-bottom: 0.7rem; }
/* Der Balken links ist im Ruhezustand durchsichtig - so springt die Zeile
   beim Auswaehlen nicht um seine Breite. */
.wahl__karte {
    display: flex; gap: 0.9rem; align-items: flex-start;
    padding: 1.1rem 1.15rem 1.1rem 1rem;
    border: none; border-left: 3px solid transparent;
    background: none; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.wahl__karte:hover { background: var(--pill-bg); }
.wahl__karte input { position: absolute; opacity: 0; pointer-events: none; }
.wahl__karte:has(input:checked) {
    border-left-color: var(--icon); background: var(--pill-aktiv-bg);
}
.wahl__karte:has(input:focus-visible) { outline: 2px solid var(--icon); outline-offset: 2px; }

/* Die Nummer ist zugleich der Auswahlpunkt - ein zusätzlicher Radiokreis
   daneben wäre doppelt gemoppelt. */
.wahl__nummer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    border: 1.5px solid var(--linie-stark); background: var(--flaeche);
    font-size: 0.78rem; font-weight: 700; color: var(--text-light);
    transition: all 0.15s;
}
.wahl__karte:has(input:checked) .wahl__nummer,
.wahl__nummer--gewaehlt {
    background: var(--icon); border-color: var(--icon); color: #fff;
}
.wahl__inhalt { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
/* Betragsfeld und Unterwahl gehoeren zur Moeglichkeit darueber - sie
   ruecken auf deren Textspalte ein, nicht an den Zeilenrand. */
.wahlen .wahl__anhang { margin-left: 2.6rem; }
.wahl__zeile { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.wahl__titel { font-size: 0.95rem; font-weight: 700; color: var(--titel); }
.wahl__preis {
    padding: 0.1rem 0.45rem; border-radius: 0;
    background: var(--tint-gold-bg); color: var(--tint-gold-fg);
    font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
/* Der verbindliche Satz - ruhiger gesetzt als die Überschrift, aber
   vollständig da. Er ist der Inhalt der Erklärung. */
.wahl__text  {
    font-size: 0.85rem; line-height: 1.65; color: var(--text-color); max-width: 78ch;
}
.wahl__folge { font-size: 0.82rem; line-height: 1.55; color: var(--text-faint); }
.wahl__warnung {
    display: flex; gap: 0.4rem; align-items: flex-start; margin-top: 0.15rem;
    font-size: 0.82rem; line-height: 1.55; color: var(--gold-lesbar); font-weight: 600;
}
.wahl__warnung svg { width: 15px; height: 15px; flex: none; margin-top: 0.15rem; }

/* Zusatzangaben hängen sichtbar an ihrer Möglichkeit - eingerückt unter
   der Karte, mit derselben Linie verbunden. Sie sind IMMER da: Wer wählen
   soll, muss vorher sehen, was die Wahl von ihm verlangt. */
.wahl__anhang {
    margin: 0 0 0 2.4rem; padding: 0.85rem 0 0.3rem 1rem;
    border-left: 2px solid var(--linie);
}
.wahl__anhang-frage {
    display: block; margin-bottom: 0.5rem;
    font-size: 0.82rem; font-weight: 600; color: var(--text-light);
}
.betragsfeld { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.betragsfeld .eingabe { width: 8.5rem; flex: none; text-align: right; }
.betragsfeld__waehrung { font-size: 0.95rem; font-weight: 700; color: var(--titel); }
.betragsfeld__regel { font-size: 0.76rem; color: var(--text-faint); }
.unterwahlen { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.unterwahl {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.86rem; cursor: pointer;
}
.unterwahl input { accent-color: var(--icon); }

/* ---- Weitere Fragen desselben Bogens ----
   Anders als der Anhang AN einer Wahlmöglichkeit stehen sie für sich.
   Deshalb ohne Einzug und ohne den Strich, der sie sonst einer Karte
   darüber zuordnen würde - sie gehören zu keiner, sie sind eigene
   Fragen. */
.wahl__anhang--eigen { margin: 0 0 1.6rem; padding: 0; border-left: none; }
.wahl__anhang-frei {
    margin-left: 0.45rem; font-weight: 500; color: var(--text-faint);
    text-transform: none; letter-spacing: 0;
}
.wahl__anhang-hinweis {
    display: block; margin-top: 0.55rem;
    font-size: 0.78rem; color: var(--text-faint);
}
/* Untereinander, sobald die Möglichkeiten selbst einen Satz tragen -
   nebeneinander wären zwei Sätze nicht mehr auseinanderzuhalten. */
.unterwahlen--gestapelt { flex-direction: column; gap: 0.6rem; }
.unterwahl--breit { align-items: flex-start; }
/* Unterfragen eines Hakens (Formblatt „Ersatz von Parallelendmaßen"): eingerueckt
   unter ihrer Hauptfrage und nur sichtbar, solange die angehakt ist. Reines CSS -
   wo `:has()` fehlt, bleiben sie einfach stehen; der Server zaehlt sie ohne den
   Haken darueber ohnehin als „Nein". */
.wahl__unterfragen {
    margin: 0.7rem 0 0 1.55rem; padding-left: 0.9rem;
    border-left: 2px solid var(--linie-zart);
    display: grid; gap: 0.6rem;
}
@supports selector(:has(*)) {
    .wahl__unterfragen { display: none; }
    .wahl__anhang--haken:has(> .unterwahl > input:checked) > .wahl__unterfragen { display: grid; }
}
.unterwahl--breit input { margin-top: 0.2rem; }
.unterwahl__text {
    display: block; margin-top: 0.1rem;
    font-size: 0.8rem; line-height: 1.5; color: var(--text-light);
}
.eingabe--breit { max-width: 34rem; }
.def--erklaerung { margin-top: 1.1rem; }

/* ---- Der Lead: ein Satz, bevor die Entscheidung kommt ----
   Größer gesetzt als der Fließtext. Wer nur diesen einen Satz liest, muss
   verstanden haben, worum es geht. */
.blatt__lead {
    margin: 0 0 1.8rem; font-size: 1rem; line-height: 1.7;
    color: var(--text-color); max-width: 58ch;
}

/* ---- Das Kostenbeispiel ----
   Das Herzstück der Wartungsseite: zwei Rechnungen nebeneinander, unten
   die Ersparnis. Es beantwortet die einzige Frage, die der Kunde hier
   wirklich hat - lohnt sich das für mich. Deshalb bekommt es Platz und
   Farbe, während der Rest der Seite ruhig bleibt. */
.beispiel { margin: 1.8rem 0 0; }
.beispiel__titel {
    margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 700;
    letter-spacing: -0.01em; color: var(--titel);
}
.beispiel__fall { margin: 0 0 1rem; font-size: 0.85rem; color: var(--text-light); }

.beispiel__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.beispiel__saeule {
    display: flex; flex-direction: column;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--linie); border-radius: var(--radius);
    background: var(--flaeche);
}
/* Die Wartungsseite ist die Antwort - sie trägt die Farbe. */
.beispiel__saeule--gut {
    border-color: var(--icon); background: var(--pill-aktiv-bg);
    box-shadow: inset 0 0 0 1px var(--icon);
}
.beispiel__kopf {
    margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--titel);
}
.beispiel__unter {
    margin: 0.1rem 0 0.9rem; font-size: 0.78rem; color: var(--text-faint);
}
.beispiel__posten { margin: 0; }
.beispiel__posten div {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: 0.34rem 0; font-size: 0.86rem;
}
.beispiel__posten dt { color: var(--text-light); }
.beispiel__posten dd {
    margin: 0; color: var(--text-color); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.beispiel__text {
    margin: 0.7rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--text-light);
}
.beispiel__summe {
    display: flex; justify-content: space-between; gap: 1rem;
    margin: auto 0 0; padding-top: 0.7rem;
    border-top: 1px solid var(--linie-stark);
    font-size: 0.88rem; color: var(--text-light);
}
.beispiel__summe strong { font-size: 1.05rem; color: var(--titel); white-space: nowrap; }
.beispiel__saeule--gut .beispiel__summe { border-top-color: var(--icon); }
.beispiel__saeule--gut .beispiel__summe strong { color: var(--icon); }

/* Die Ersparnis ist die Zahl, wegen der jemand unterschreibt. */
.beispiel__ersparnis {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; margin: 0.9rem 0 0; padding: 0.9rem 1.2rem;
    border-radius: var(--radius); background: var(--icon); color: #fff;
    font-size: 0.92rem; font-weight: 600;
}
.beispiel__ersparnis strong {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap;
}

/* ---- Sachabschnitte: der Inhalt des Formblatts ----
   Offen, nicht eingeklappt. Wer die Wartung zum ersten Mal liest, muss
   den Vorteil sehen, ohne etwas aufzuklappen. */
/* Zwei Spalten fuer den Sachinhalt: Listen und Absaetze sind kurz genug
   dafuer, und nebeneinander sieht man den Zusammenhang, statt zweimal zu
   scrollen. `align-items: start` - sonst zoege der laengere Abschnitt den
   kuerzeren auf seine Hoehe. */
.sachteile {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 2.5rem; align-items: start;
}
.sachteil--breit { grid-column: 1 / -1; }
/* `min-width: 0` an jedem Abschnitt: Die Sachtabelle hat eine
   Mindestbreite von 480 px; ohne das waere die Spalte mitgewachsen und
   der Abschnitt haette am Telefon 137 px ueber den Rand gestanden -
   Ueberschrift abgeschnitten (gesehen 16.09.2026). Scrollen soll der
   Rahmen um die Tabelle, nicht der Abschnitt. */
.sachteile > .sachteil { min-width: 0; }
/* Fliesstext ueber die ganze Breite laeuft in zwei Spalten: Die Zeile
   bleibt lesbar kurz, die Seite trotzdem gefuellt. Ueberschrift und
   Schlusssatz laufen ueber beide. */
.sachteil--spalten { columns: 2; column-gap: 2.5rem; }
.sachteil--spalten > .sachteil__titel,
.sachteil--spalten > .sachteil__fuss { column-span: all; }
.sachteil--spalten .sachteil__absatz { max-width: none; break-inside: avoid; }
@media (max-width: 900px) {
    .sachteil--spalten { columns: 1; }
}
@media (max-width: 900px) {
    .sachteile { grid-template-columns: minmax(0, 1fr); }
}

.sachteil { margin-top: 2.6rem; }
/* Zwilling von `.beleg__titel`: Kleinkapitael ueber einer Haarlinie. So
   sehen Abschnitte im ganzen Portal aus - Uebersicht, Auftrag, Beleg
   (Yannick 16.09.2026: „in unserem Stil"). */
.sachteil__titel {
    margin: 0 0 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--linie);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise);
}

/* Sprungmarke fuer alle, die schon wissen, was sie wollen. */
.blatt__sprung { margin: -0.9rem 0 1.6rem; font-size: 0.82rem; }
.blatt__sprung a {
    color: var(--icon); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid transparent;
}
.blatt__sprung a:hover { border-bottom-color: var(--icon); }

/* Die Auswahl steht am Ende, wo auf dem Bogen das Formular stand -
   und hebt sich vom Erklärteil darüber ab. */
.blatt__frage {
    margin: 2.4rem 0 1rem; padding-top: 1.6rem;
    border-top: 2px solid var(--linie-stark);
    font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--titel);
}

/* ---- Hintergrund: das Einzige, was eingeklappt bleibt ----
   Ihre PDFs haben sechs Seiten Erklärung vor einem Kreuzchen. Hier steht
   dieselbe Substanz, aber sie verstellt nicht den Weg zur Entscheidung. */
.klapp { border-bottom: 1px solid var(--linie-zart); }
.klapp:last-child { border-bottom: none; }
/* Steht der Hintergrund allein, braucht er einen eigenen Rahmen. */
.klapp--allein {
    margin-top: 1.6rem; border: 1px solid var(--linie);
    border-radius: var(--radius-klein); background: var(--flaeche);
}
.klapp--allein > .klapp__kopf { padding: 0.8rem 1.1rem; }
.klapp--allein .klapp__inhalt { padding: 0 1.1rem 1.1rem 2.4rem; }
.klapp__kopf {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.75rem 0; cursor: pointer; list-style: none;
    font-size: 0.88rem; font-weight: 600; color: var(--text-color);
}
.klapp__kopf::-webkit-details-marker { display: none; }
.klapp__kopf::before {
    content: ''; flex: none; width: 7px; height: 7px;
    border-right: 1.5px solid var(--icon); border-bottom: 1.5px solid var(--icon);
    transform: rotate(-45deg); transition: transform 0.15s;
}
.klapp[open] > .klapp__kopf { color: var(--titel); }
.klapp[open] > .klapp__kopf::before { transform: rotate(45deg); }
.klapp__inhalt { padding: 0 0 1.1rem 1.3rem; }

/* ---- Der Stapel mit allem Vertiefenden ----
   Was nicht jeder lesen muss, liegt hier - erreichbar, aber nicht im Weg.
   Ein Rahmen um den Stapel sagt: Das gehoert zusammen und ist ein
   Angebot, keine Pflicht. */
.mehr { margin-top: 2.8rem; }
/* Zwilling von `.beleg__titel` - dieselbe Sprache wie auf der
   Auftragsseite: Kleinkapitael ueber einer Haarlinie, kein Kasten. */
.mehr__titel {
    margin: 0 0 0.25rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--linie);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise);
}
/* Im Stapel steht der Inhalt ohne eigene Ueberschrift - die traegt der
   Aufklapper. Die Einrueckung von `.klapp__inhalt` bleibt. */
.mehr .sachteil__absatz:last-child,
.mehr .sachteil__fuss:last-child { margin-bottom: 0; }

/* ---- Normauszug ----
   Auf dem Papier steht er abgesetzt und traegt das Gewicht des Abschnitts.
   Kein Kasten, sondern ein Balken links und groessere Schrift: Ein Zitat
   ist kein Hinweis, es ist der Beleg. */
.zitat { margin: 1.2rem 0 0; padding: 0 0 0 1.2rem; border-left: 3px solid var(--icon); }
.zitat__text {
    margin: 0; font-size: 1.02rem; line-height: 1.6; font-style: italic;
    color: var(--titel); max-width: 56ch;
}
.zitat__quelle {
    margin: 0.5rem 0 0; font-size: 0.76rem; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--text-faint);
}

/* ---- Frage und Antwort ----
   Untereinander, getrennt durch eine Haarlinie - dieselbe Sprache wie die
   Wertzeilen auf der Auftragsseite. Karten mit Nummernkreisen sahen aus
   wie aus einem anderen Produkt (Yannick 16.09.2026). */
.fragen { margin: 0.6rem 0 0; }
.frage { padding: 0.9rem 0; border-bottom: 1px solid var(--linie-zart); }
.frage:first-child { padding-top: 0; }
.frage:last-child { border-bottom: none; padding-bottom: 0; }
.frage__frage {
    margin: 0 0 0.45rem; font-size: 0.89rem; font-weight: 650;
    line-height: 1.45; color: var(--titel); max-width: 62ch;
}
.frage__antwort { margin: 0; }
.frage__antwort p {
    margin: 0 0 0.6rem; font-size: 0.84rem; line-height: 1.7;
    color: var(--text-light); max-width: 62ch;
}
.frage__antwort p:last-child { margin-bottom: 0; }

/* Die Warnung nach der Wahl: Sie steht jetzt oben in der Erklaerung und
   traegt deshalb einen eigenen Rahmen - sie soll nicht zu uebersehen sein
   (Yannick 16.09.2026). */
.blatt__warnung--stark {
    margin-top: 0; margin-bottom: 1.2rem;
    border: 1px solid var(--fehler-tief); border-radius: var(--radius-klein);
    padding: 0.85rem 1rem; background: var(--fehler-hintergrund);
}

.sachteil__absatz {
    margin: 0 0 0.75rem; font-size: 0.86rem; line-height: 1.7;
    color: var(--text-light); max-width: 62ch;
}
.sachteil__absatz:last-child { margin-bottom: 0; }
.sachteil__fuss { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--text-faint); }

.sachliste { margin: 0; padding: 0; list-style: none; }
.sachliste li {
    display: flex; gap: 0.6rem; align-items: flex-start;
    padding: 0.4rem 0; font-size: 0.86rem; line-height: 1.6; color: var(--text-light);
}
.sachliste:not(.sachliste--haken) li::before {
    content: ''; flex: none; width: 5px; height: 5px; margin-top: 0.55rem;
    border-radius: 50%; background: var(--linie-stark);
}
.sachliste--haken li svg {
    width: 16px; height: 16px; flex: none; margin-top: 0.15rem; color: var(--haken);
}

/* Die Tabelle steht in ihrem Abschnitt ueber beide Spalten
   (.sachteil--breit) und braucht deshalb keinen eigenen Ausbruch mehr.
   Der Rahmen bleibt scrollbar - am Telefon passt sie nicht. */
.sachtabelle-rahmen { overflow-x: auto; }
.sachtabelle { width: 100%; border-collapse: collapse; min-width: 480px; }
.sachtabelle th {
    padding: 0.45rem 0.7rem 0.45rem 0; text-align: left;
    border-bottom: 1.5px solid var(--linie-stark);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-faint);
}
.sachtabelle td {
    padding: 0.5rem 0.7rem 0.5rem 0; border-bottom: 1px solid var(--linie-zart);
    font-size: 0.83rem; line-height: 1.5; color: var(--text-light);
}
/* Jede zweite Zeile ganz leicht hinterlegt: Bei elf Zeilen mit drei
   Spalten verrutscht man sonst beim Lesen. */
.sachtabelle tbody tr:nth-child(even) td { background: var(--pill-bg); }
.sachtabelle tr:last-child td { border-bottom: none; font-weight: 700; color: var(--titel); }
.sachtabelle__wert { text-align: right; }
.sachtabelle td:first-child { color: var(--text-color); }
/* Texttabelle (Formblatt Parallelendmasse, 19.09.2026): In den Spalten steht
   Fliesstext. Rechtsbuendig gesetzt flattert er links, und die fette
   Schlusszeile - bei Zahlentabellen die Summe - hebt grundlos die letzte
   Zeile hervor. Also linksbuendig, oben ausgerichtet, alle Zeilen gleich. */
.sachtabelle--text .sachtabelle__wert { text-align: left; }
.sachtabelle--text td { vertical-align: top; }
.sachtabelle--text tr:last-child td { font-weight: inherit; color: var(--text-light); }
.sachtabelle--text td:first-child,
.sachtabelle--text tr:last-child td:first-child { color: var(--text-color); font-weight: 600; }

/* Der Merksatz bleibt sichtbar - er ist eine Bedingung, kein Hintergrund. */
/* Merksaetze nebeneinander: Es sind Bedingungen, keine Erzaehlung -
   untereinander schoben sie die Auswahl eine Bildschirmhoehe nach unten. */
.merksaetze {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 1rem; align-items: start; margin-top: 1.6rem;
}
.merksaetze .merksatz { margin-top: 0; height: 100%; }

.merksatz {
    margin-top: 1.4rem; padding: 1rem 1.15rem;
    border: 1px solid var(--gold-lesbar); border-radius: var(--radius-klein);
    background: var(--tint-gold-bg);
}
.merksatz__marke {
    margin: 0 0 0.3rem; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--tint-gold-fg);
}
.merksatz__text { margin: 0; font-size: 0.87rem; line-height: 1.65; color: var(--text-color); }

@media (max-width: 620px) {
    .beispiel__paar { grid-template-columns: 1fr; }
    .beispiel__ersparnis { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* ---- Schritt 2: die Erklärung ---- */
.erklaerung {
    padding: 1.4rem 1.5rem; margin-bottom: 1.4rem;
    border: 1px solid var(--linie-stark); border-radius: var(--radius);
    background: var(--flaeche); box-shadow: none;
}
.erklaerung__marke {
    margin: 0 0 1rem; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint);
}
.erklaerung__wahl { display: flex; gap: 0.85rem; align-items: flex-start; }
.erklaerung__titel {
    margin: 0; font-size: 1.15rem; font-weight: 700;
    letter-spacing: -0.01em; color: var(--titel);
}
.erklaerung__kernwert {
    margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--text-color);
}
.erklaerung__kernwert strong { color: var(--icon); }
.erklaerung__text {
    margin-top: 1rem; padding-left: 1rem;
    border-left: 2px solid var(--linie);
}
.erklaerung__text p {
    margin: 0 0 0.6rem; font-size: 0.85rem; line-height: 1.65; color: var(--text-light);
}
.erklaerung__text p:last-child { margin-bottom: 0; }

.blatt__warnung {
    display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0 0;
    padding: 0.8rem 1rem; border-radius: var(--radius-klein);
    background: var(--tint-gold-bg);
    font-size: 0.84rem; line-height: 1.55; color: var(--gold-lesbar); font-weight: 600;
}
.blatt__warnung svg { width: 16px; height: 16px; flex: none; margin-top: 0.15rem; }

/* ---- Die Abgabe: der letzte Abschnitt der Erklaerung ----
   Hier stand bis zum 16.09.2026 ein zweiter Kasten mit der Ueberschrift
   „An die Stelle Ihrer Unterschrift", getoentem Grund und einer
   gestrichelten Linie ueber Name und Datum - alles Anleihen beim
   Unterschriftsbogen auf Papier.

   Unterschrieben wird im Portal aber nichts. Der Kunde gibt seine
   Erklaerung ab; das ist EIN Vorgang und gehoert auf EIN Blatt (Yannick
   16.09.2026). Geblieben ist eine Haarlinie - der Schnitt zwischen dem,
   was erklaert wird, und dem, womit es abgegeben ist. */
.abgabe {
    display: block; margin-top: 1.6rem; padding-top: 1.4rem;
    border-top: 1px solid var(--linie);
}
.zustimmung {
    display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 0.7rem;
    padding: 0.9rem 1rem; border: 1px solid var(--linie);
    border-radius: var(--radius-klein); background: var(--flaeche); cursor: pointer;
    transition: border-color 0.15s;
}
.zustimmung:hover { border-color: var(--linie-stark); }
.zustimmung:has(input:checked) { border-color: var(--icon); }
.zustimmung input { margin-top: 0.15rem; flex: none; accent-color: var(--icon); }
.zustimmung span { font-size: 0.84rem; line-height: 1.6; color: var(--text-color); }
.zustimmung--warnung { border-color: var(--gold-lesbar); background: var(--tint-gold-bg); }
.zustimmung--warnung:has(input:checked) { border-color: var(--gold-lesbar); }

/* Wer abgibt, steht als Angabenzeile da - wie der Briefkopf oben, nicht
   wie eine Unterschriftszeile. Die gestrichelte Linie darueber ist weg. */
.abgabe__meta {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.7rem 1.2rem; margin: 1.2rem 0 0;
}
.abgabe__meta dt {
    margin: 0 0 0.1rem; font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.abgabe__meta dd {
    margin: 0; font-size: 0.84rem; font-weight: 600; color: var(--titel);
    overflow-wrap: anywhere;
}
.abgabe__fuss {
    margin: 0.9rem 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--text-faint);
}

.blatt__aktionen {
    display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem;
}
.blatt__aktionen .knopf svg { width: 15px; height: 15px; }
.blatt__nurlesen {
    margin-top: 1.4rem; padding: 0.9rem 1.1rem;
    border-radius: var(--radius-klein); background: var(--pill-bg);
    font-size: 0.84rem; color: var(--text-light);
}

/* ---- Preise: eine Tabelle, ein Stand-Datum ----
   Zahlen stehen nirgends sonst. Steht hier nichts, erscheint der Block
   gar nicht - dann tragen kostenpflichtige Punkte nur ihre Marke. */
.preisblock {
    margin: 1.4rem 0 0; padding: 1rem 1.15rem;
    border: 1px solid var(--linie); border-radius: var(--radius-klein);
    background: var(--flaeche);
}
.preisblock__titel {
    margin: 0 0 0.6rem; font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint);
}
/* ---- Kalibrierung gegen Wartung ----
   Zwei Zeilen je Leistung, wie in der Papierfassung. Die Kalibrierung
   steht als Vergleichsmass, die Wartung darunter hervorgehoben - sie ist
   das, worum es auf dieser Seite geht.

   Zahlen rechtsbuendig und in Tabellenziffern, damit sich Spalten
   vergleichen lassen, ohne dass das Auge springt. */
.preisblock__gruppe {
    margin: 1.3rem 0 0.5rem; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light);
}
.preisblock__gruppe:first-of-type { margin-top: 0.3rem; }
.preistabelle-rahmen { overflow-x: auto; }

.preisvergleich { width: 100%; border-collapse: collapse; min-width: 460px; }
.preisvergleich thead th {
    padding: 0 0.7rem 0.5rem 0; text-align: left;
    border-bottom: 1.5px solid var(--linie-stark);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
/* Der Spaltenkopf gehoert UEBER seine Zahl, nicht daneben: gleiche
   Ausrichtung, gleiches Innenmass wie die Zelle darunter. Bis zum
   16.09.2026 stand er links und die Zahl rechts - bei vier Messbereichen
   suchte das Auge zu jedem Betrag den passenden Kopf (Yannick).
   Die feste Breite haelt die Wertspalten gleich gross; ohne sie richteten
   sie sich nach der Laenge ihrer Ueberschrift („bis 100 Nm" gegen
   „bis 1.000 Nm") und standen unterschiedlich weit auseinander. Der
   Rest der Zeile bleibt der Leistung - sie ist die einzige Spalte, die
   mitwaechst. */
.preisvergleich thead th.preisvergleich__wert { text-align: right; padding-right: 0; width: 8.5rem; }
/* Jede Leistung ist ein eigener tbody - so laesst sich das Paar aus
   Kalibrierung und Wartung als Einheit absetzen. */
.preisvergleich__block { border-bottom: 1px solid var(--linie); }
.preisvergleich__block:last-child { border-bottom: none; }
.preisvergleich tbody th {
    padding: 0.55rem 0.7rem 0.2rem 0; text-align: left;
    font-size: 0.86rem; font-weight: 700; color: var(--titel);
}
.preisvergleich tbody td {
    padding: 0.55rem 0 0.2rem; font-size: 0.86rem;
    color: var(--text-light); font-variant-numeric: tabular-nums;
}
.preisvergleich__zusatz {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.35rem;
    border-radius: 0; background: var(--pill-bg);
    font-size: 0.68rem; font-weight: 600; color: var(--text-faint);
}
/* Die Wartungszeile: eingerueckt, mit Pfeil, und die Zahl kraeftig -
   sie ist die Antwort auf die Frage dieser Seite. */
.preisvergleich__wartung th {
    padding: 0.05rem 0.7rem 0.6rem 0.9rem; position: relative;
    font-size: 0.83rem; font-weight: 600; color: var(--icon);
}
.preisvergleich__wartung th::before {
    content: '→'; position: absolute; left: 0; color: var(--icon); font-weight: 400;
}
.preisvergleich__wartung td {
    padding: 0.05rem 0 0.6rem; font-weight: 700; color: var(--icon);
}
.preisvergleich__wert { text-align: right; }
/* Kein Preis ist kein Preis - der Strich sagt das, eine leere Zelle
   saehe nach einem Fehler aus. */
.preisvergleich__leer { color: var(--text-faint) !important; font-weight: 400 !important; }


.preistabelle { width: 100%; border-collapse: collapse; }
.preistabelle td {
    padding: 0.42rem 0; font-size: 0.86rem; color: var(--text-color);
    border-bottom: 1px solid var(--linie-zart);
}
.preistabelle tr:last-child td { border-bottom: none; }
.preistabelle__wert { text-align: right; font-weight: 700; color: var(--titel); white-space: nowrap; }
.preisblock__fuss { margin: 0.7rem 0 0; font-size: 0.76rem; color: var(--text-faint); }

@media (max-width: 560px) {
    .blatt__titel { font-size: 1.35rem; }
    .schritte { gap: 1rem; }
    .schritte__punkt { font-size: 0.76rem; }
    .wahl__anhang { margin-left: 1.2rem; }
    /* Muss hier stehen: Die Zeile darueber kommt im Stylesheet NACH dem
       Modifikator und wuerde ihn sonst auf schmalen Schirmen einruecken -
       eigene Fragen bekaemen den Einzug, der zu einer Wahlkarte gehoert. */
    .wahl__anhang--eigen { margin-left: 0; }
    .erklaerung { padding: 1.1rem 1rem; }
}

/* ---------------- "Angebot anfordern" ----------------
   Steht unter jeder Angabe, die Mehrkosten ausloesen kann. Bewusst
   zurueckhaltend: Der Knopf soll erreichbar sein, aber niemanden
   anspringen - er ist ein Angebot, keine Aufforderung. */
.angebotszeile {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin: 0.1rem 0 0.9rem; padding-left: 0.85rem;
    border-left: 2px solid transparent;
}
.angebotszeile__wann { font-size: 0.78rem; color: var(--text-faint); }

/* Kleines Schloss am Zeilenende: pflegen wir. Kein Zaun, aber eindeutig. */
.ang__fest { flex: none; margin-left: auto; color: var(--text-faint); display: inline-flex; }
.ang__fest svg { width: 13px; height: 13px; }
@media (max-width: 620px) {
    .ang { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.7rem 0; }
    .ang__fest { margin-left: 0.4rem; }
}

/* Beschreibbar: hinterlegt, damit man es ohne Erklaerung sieht */
.ang__eingabe {
    width: 100%; padding: 0.38rem 0.6rem;
    background: var(--pill-bg); border: 1px solid transparent; border-radius: 0;
    font: inherit; font-size: 0.88rem; color: var(--text-color);
    transition: var(--transition-fast);
}
.ang__eingabe::placeholder { color: var(--text-faint); }
.ang__eingabe:hover:not(:disabled) { border-color: var(--linie-stark); }
.ang__eingabe:focus {
    background: var(--eingabe-bg); border-color: var(--pill-aktiv-border);
    outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.12);
}
.ang__eingabe:disabled { opacity: 0.45; cursor: not-allowed; }
.ang__eingabe[data-geaendert] { background: var(--tint-gold-bg); border-color: var(--chip-border); }
/* Fehlende Pflichtangabe nach einem Absendeversuch */
.ang__eingabe--fehlt {
    background: var(--fehler-hintergrund);
    border-color: rgba(179, 38, 30, 0.55);
}
.ang__eingabe--fehlt:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }
/* Sternchen an einer Pflichtangabe */
.ang__pflicht { color: var(--fehler-tief); margin-left: 0.15rem; font-weight: 600; }
.ang__eingabe--kurz { flex: 0 0 5rem; width: 5rem; }
select.ang__eingabe { cursor: pointer; }

/* ---------------- Auf- und zufahren ----------------
   Dieselbe Mechanik wie in der Bereichsnavigation: Ein Gitter mit
   `grid-template-rows: 0fr` laesst sich weich auf `1fr` fahren, ohne dass
   irgendwo eine Hoehe in Pixeln stehen muesste - die kennt hier niemand.
   `visibility` faehrt erst NACH der Bewegung auf `hidden`: Sonst waere der
   Inhalt schlagartig weg, und mit der Tab-Taste landete man in einem
   zugefahrenen Block.

   HEISST `rollo` UND NICHT `klapp`: Den Namen gab es schon - der
   eingeklappte Hintergrund der Formblaetter (`<details class="klapp">`,
   weiter oben im Stylesheet). Meine Regeln standen spaeter und machten
   ihn unsichtbar; gefunden am 16.09.2026 an der Normenaenderung. */
.rollo {
    display: grid; grid-template-rows: 0fr;
    opacity: 0; visibility: hidden;
    transition: grid-template-rows 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.18s ease,
                visibility 0s linear 0.3s;
}
.rollo__innen { overflow: hidden; min-height: 0; }
.rollo--auf {
    grid-template-rows: 1fr; opacity: 1; visibility: visible;
    transition-delay: 0s;
}
/* Der Knopf davor. Bewusst leise: Dahinter liegt, was die meisten nie
   brauchen - er soll auffindbar sein, nicht auffallen. */
.klapper {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0.55rem 0 0; padding: 0.3rem 0;
    background: none; border: none; cursor: pointer;
    font: 600 0.79rem/1 inherit; color: var(--text-light);
    transition: var(--transition-fast);
}
.klapper:hover { color: var(--titel); }
.klapper__pfeil {
    width: 14px; height: 14px; flex: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.klapper[aria-expanded="true"] .klapper__pfeil { transform: rotate(180deg); }
/* Die erste Zeile im aufgefahrenen Block braucht etwas Luft zum Knopf. */
.klapper[aria-expanded="true"] + .rollo .ang:first-child { padding-top: 0.2rem; }

/* ---------------- Mehrere Mailadressen ----------------
   Eine Adresse je Zeile, darunter der Knopf fuer die naechste. Die Liste
   nimmt die volle Breite (flex-basis 100%), damit der Knopf umbricht und
   unter den Feldern steht statt daneben. */
.mailliste { flex: 1 1 100%; display: grid; gap: 0.3rem; min-width: 0; }
.mailliste__mehr { align-self: flex-start; }
/* Mehrere Zeilen machen die Angabe hoch - die Beschriftung gehoert dann
   neben die ERSTE Adresse, nicht in die Mitte des Blocks. */
.ang--mails { align-items: start; }
.ang--mails .ang__begriff { padding-top: 0.3rem; }
/* Fester Text: dieselbe Zeilenform wie in der Eingabe, damit sich beim
   Sperren nicht das Bild aendert. */
.ang__wert--zeilen { white-space: pre-line; }

/* Laufender Aenderungswunsch - steht in der Zeile, wo der Kunde ihn sucht */
.ang__wartet {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
    font-size: 0.8rem;
}
.ang__wartet-alt { color: var(--dark-gray); text-decoration: line-through;
                   text-decoration-color: var(--text-faint); }
.ang__wartet-pfeil { color: var(--text-faint); }
.ang__wartet-neu { font-weight: 600; color: var(--titel); }

/* ---------------- Auswahl als Liste ----------------
   Statt eines Ausklappfelds: Die wichtigsten Moeglichkeiten stehen da, der
   Rest liegt in Gruppen, die aufgehen (Format der Kalibrierdaten, Yannick
   18.09.2026: "von der Standardliste weg fände ich viel besser").

   KEIN Kasten um die Liste (Yannick 18.09.2026: "das ragt jetzt ganz komisch
   raus"): Die Stammdaten leben von Typografie und Weissraum - eine Zeile hebt
   sich hier durch ihren Haken hervor, nicht durch einen Rahmen. Die Gruppen
   tragen dieselbe Zwischenueberschrift wie sonst auf der Seite
   (.feld__gruppe), nur anklickbar.

   Die Gruppen sind <details> - das Auf und Zu kann der Browser selbst, dafuer
   braucht es kein Skript, und `name` am Element haelt nur EINE offen.
   Angehakt wird mit Haken, nicht mit Punkten: Papier und PDF duerfen beide
   gelten, und aus den Gruppen nimmt man eine Wahl mit demselben Klick wieder
   heraus. */
.ang--liste { align-items: start; }
.ang--liste .ang__begriff { padding-top: 0.3rem; }
.wl {
    display: flex; flex-direction: column; width: 100%; min-width: 0;
    /* Damit die Gruppen von 0 auf ihre Hoehe fahren koennen (::details-content). */
    interpolate-size: allow-keywords;
}
.wl__eintrag {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.3rem 0.45rem; margin: 0 -0.45rem; cursor: pointer;
    font-size: 0.88rem; color: var(--text-color);
    transition: background 0.15s, color 0.15s;
}
.wl__eintrag:hover { background: var(--pill-bg); }
.wl__eintrag input { position: absolute; opacity: 0; width: 0; height: 0; }
.wl__marke {
    position: relative; flex: none; width: 15px; height: 15px;
    border: 1px solid var(--linie-stark); background: var(--eingabe-bg);
    transition: var(--transition-fast);
}
.wl__marke::after {
    content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transition: transform 0.15s;
}
.wl__eintrag:has(input:checked) { color: var(--titel); font-weight: 600; }
.wl__eintrag:has(input:checked) .wl__marke {
    border-color: var(--primary-color); background: var(--primary-color);
}
.wl__eintrag:has(input:checked) .wl__marke::after { transform: rotate(45deg) scale(1); }
.wl__eintrag:has(input:focus-visible) { outline: 2px solid var(--icon); outline-offset: 1px; }
/* Haken UND Zahl in einer Zeile (Warnstufen der Faelligkeitslisten): Der Haken
   nimmt den Platz links, die Zahl steht rechts daneben - mit ihrer Einheit,
   damit "45" nicht ohne Bedeutung dasteht. Der Klick auf das Feld darf den
   Haken NICHT umlegen, deshalb liegt es ausserhalb seiner Beschriftung. */
.wl__reihe { display: flex; align-items: center; gap: 0.5rem; }
/* Der Haken nimmt nur so viel Platz, wie sein Wort braucht - aber bei allen
   Stufen gleich viel, damit die Zahlen bündig untereinander stehen. */
.wl__reihe .wl__eintrag { flex: 0 1 auto; min-width: 10rem; }
.wl__text { min-width: 0; overflow-wrap: anywhere; }
.wl__zahl { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; }
.wl__einheit { font-size: 0.8rem; color: var(--text-faint); }
/* Eingerueckt: Was zu einer Gruppe gehoert, steht unter ihrem Titel. */
.wl__eintrag--tief { padding-left: 1.5rem; }
/* Der Gruppentitel ist die Zwischenueberschrift der Seite - nur anklickbar.
   Ohne Trennstrich darueber: Der wuerde die Liste in Kaesten zerlegen. */
.wl__titel {
    display: flex; align-items: center; gap: 0.4rem;
    margin: 0.7rem -0.45rem 0.1rem; padding: 0.3rem 0.45rem; cursor: pointer;
    font-size: 0.69rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--dark-gray); list-style: none; transition: background 0.15s, color 0.15s;
}
.wl__titel::-webkit-details-marker { display: none; }
.wl__titel:hover { background: var(--pill-bg); color: var(--titel); }
.wl__winkel { display: inline-flex; color: var(--text-faint); transition: transform 0.2s; }
.wl__winkel svg { width: 12px; height: 12px; }
/* Der Winkel zeigt zur Seite und beim Aufklappen nach unten - eine Vierteldrehung. */
.wl__gruppe[open] > .wl__titel { color: var(--titel); }
.wl__gruppe[open] .wl__winkel { transform: rotate(90deg); }
/* Auf- und zufahren statt springen. `::details-content` koennen noch nicht
   alle Browser - dort geht die Gruppe schlicht auf, ohne Fahrt. */
.wl__gruppe::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 0.26s ease, content-visibility 0.26s allow-discrete;
}
.wl__gruppe[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
    .wl__gruppe::details-content { transition: none; }
}

/* ---------------- Schalter ----------------
   Eindeutiger als eine Checkbox mitten in einer Datenzeile. */
.schalter { display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter__bahn {
    position: relative; flex: none; width: 38px; height: 21px; border-radius: 999px;
    background: var(--medium-gray); transition: var(--transition-fast);
}
.schalter__bahn::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 48, 0.28);
    transition: var(--transition-fast);
}
.schalter input:checked + .schalter__bahn { background: var(--primary-color); }
.schalter input:checked + .schalter__bahn::after { transform: translateX(17px); }
/* Fest stehender Schalter: Er gilt, laesst sich aber nicht umlegen (Kalibrierdaten -
   VAME 3 kommt immer ueber die Cloud). Ohne das saehe er aus wie jeder andere und
   reagierte bloss nicht. */
.schalter input:disabled + .schalter__bahn { opacity: 0.5; }
.schalter:has(input:disabled) { cursor: not-allowed; }
.schalter input:focus-visible + .schalter__bahn { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.22); }
.schalter__text { font-size: 0.84rem; color: var(--text-light); }

/* ---------------- Merkmale als Marken ---------------- */
.marken { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; }
.marken li {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0.2rem 0.6rem;
    background: var(--pill-bg); border: 1px solid var(--linie); border-radius: 0;
    font-size: 0.775rem; color: var(--text-color);
}

/* ---------------- Ansprechpartner ----------------
   Einziger Bereich mit mehreren gleichartigen Datensaetzen - das
   rechtfertigt die eigene Form. */
.kontakte { display: flex; flex-direction: column; }
.kontakt { padding: 0.8rem 0; border-bottom: 1px solid var(--linie-zart); }
.kontakt:last-child { border-bottom: none; }
.kontakt__kopf { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
.kontakt__avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--avatar-bg); border: 1px solid var(--avatar-border);
    font-size: 0.74rem; font-weight: 650; color: var(--text-light);
}
.kontakt--neu .kontakt__avatar { border-style: dashed; color: var(--text-faint); }
.kontakt__marke {
    font-size: 0.69rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--pill-aktiv-text);
}
.kontakt__marke--still { color: var(--dark-gray); }
.kontakt__marke--neu { color: var(--text-faint); }
.kontakt__weg {
    margin-left: auto; background: none; border: none; cursor: pointer;
    font-size: 0.77rem; color: var(--dark-gray); padding: 0.2rem 0.35rem; border-radius: 0;
    font-family: inherit;
}
.kontakt__weg:hover { color: var(--fehler-tief); background: var(--fehler-hintergrund); }
.kontakt__weg[aria-pressed="true"] {
    color: var(--fehler-tief); background: var(--fehler-hintergrund); font-weight: 600;
}
.kontakt--geht .kontakt__felder { opacity: 0.4; }
.kontakt__felder {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.9rem;
    transition: var(--transition-fast);
}
@media (max-width: 620px) { .kontakt__felder { grid-template-columns: 1fr; } }
.kontakt__paar { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.kontakt__paar--breit { grid-column: 1 / -1; }
.kontakt__zeichen { flex: none; color: var(--dark-gray); display: inline-flex; }
.kontakt__zeichen svg { width: 14px; height: 14px; }

/* ---------------- Aktionsleiste ----------------
   Kommt erst, wenn wirklich etwas anders ist, und klebt dann unten -
   sonst muesste der Kunde nach jeder Aenderung ans Seitenende scrollen. */
.aktionsleiste {
    position: sticky; bottom: 1rem; z-index: 6;
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin-top: 1.6rem; padding: 0.8rem 1rem;
    background: var(--flaeche); border: 1px solid var(--pill-aktiv-border);
    border-radius: var(--radius); box-shadow: 0 10px 30px -12px rgba(16, 24, 48, 0.45);
}
.aktionsleiste__text { font-size: 0.85rem; color: var(--text-light); margin-right: auto; }
.aktionsleiste__zahl { font-weight: 650; color: var(--titel); }

/* ---------------- Zusammenfassung vor dem Einreichen ---------------- */
.wunschliste { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.wunsch {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
    padding: 0.42rem 0.6rem; background: var(--pill-bg); border-radius: 0;
    font-size: 0.84rem;
}
.wunsch__was { font-weight: 600; color: var(--titel); min-width: 8rem; }
.wunsch__wandel { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-right: auto; }
.wunsch__alt { color: var(--dark-gray); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.wunsch__pfeil { color: var(--text-faint); }
.wunsch__neu { font-weight: 600; color: var(--titel); }
@media (max-width: 640px) {
    .wunsch { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
    .wunsch__was { min-width: 0; }
}

/* Knopfzeile unter einem Formular (auch von verwaltung_hilfen.php benutzt) */
.formular__aktionen {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.3rem;
}

/* ---------------- Verwaltung: Protokoll + Anpassungen ----------------
   Nur im Adminbereich verwendet. Bewusst ohne eigene Farben - beide
   Ansichten leben von den vorhandenen Abzeichen und Flaechen. */

/* Tages-Trenner ueber den Buendeln */
.protokoll__tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--dark-gray);
    margin: 1.1rem 0 0.4rem;
}
.protokoll__tag:first-of-type { margin-top: 0.2rem; }

/* Ein Buendel = ein Kunde an einem Tag, aufklappbar */
.protokoll__bund {
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    margin-bottom: 0.4rem;
    overflow: hidden;
}
.protokoll__bund[open] { border-color: var(--linie-stark); }
.protokoll__kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    list-style: none;
    transition: var(--transition-fast);
}
.protokoll__kopf::-webkit-details-marker { display: none; }
.protokoll__kopf:hover { background: var(--pill-bg); }
.protokoll__kopf::before {
    content: "";
    flex: none;
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.6px solid var(--dark-gray);
    border-bottom: 1.6px solid var(--dark-gray);
    transform: rotate(-45deg);
    transition: transform 0.16s ease;
}
.protokoll__bund[open] > .protokoll__kopf::before { transform: rotate(45deg); }
.protokoll__kunde { font-weight: 650; color: var(--titel); font-size: 0.86rem; }
.protokoll__wer   { color: var(--text-light); font-size: 0.82rem; margin-right: auto; }
.protokoll__bund > .tabelle,
.protokoll__bund > .karte__absatz { padding: 0 0.75rem; }
.protokoll__bund > .tabelle { width: calc(100% - 1.5rem); margin: 0 0.75rem 0.4rem; }
.protokoll__bund > .karte__absatz { padding-bottom: 0.7rem; margin: 0; }

.tabelle--eng td { padding: 0.38rem 0.6rem; }
.tabelle--eng th { padding: 0.3rem 0.6rem 0.4rem; }

/* Freigabe der Stammdaten-Wünsche */
.eingriff__bemerkung {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--tint-blau-bg);
    border-radius: 0;
    font-size: 0.82rem;
    color: var(--text-color);
}
.eingriff__bemerkung svg { width: 15px; height: 15px; flex: none; margin-top: 0.1rem; }
.eingriff__grund {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0.35rem;
    padding: 0.3rem 0.55rem;
    background: var(--fehler-hintergrund);
    color: var(--fehler-tief);
    border-radius: 0;
    font-size: 0.79rem;
}
.eingriff__grund svg { width: 14px; height: 14px; flex: none; }
.eingriff__entscheiden {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--linie);
}
.eingriff__entscheiden .eingabe { flex: 1 1 16rem; }
.eingabe--klein { padding: 0.36rem 0.6rem; font-size: 0.82rem; }

/* Zeitraum-Umschalter neben dem Suchfeld */
.filterleiste { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Anpassungen: ein Block je Beleg */
.eingriff {
    border: 1px solid var(--linie);
    border-radius: var(--radius-klein);
    background: var(--flaeche);
    margin-bottom: 0.5rem;
    padding: 0.7rem 0.8rem;
}
.eingriff--versteckt { border-color: rgba(179, 38, 30, 0.3); }
.eingriff__kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.eingriff__beleg { font-weight: 650; color: var(--titel); font-size: 0.88rem; }
.eingriff__kunde { color: var(--text-light); font-size: 0.82rem; margin-right: auto; }
.eingriff__aktionen { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.eingriff__aktionen form { display: inline; }

/* ERP-Wert -> Portal-Wert, eine Zeile je Feld */
.eingriff__felder { display: grid; gap: 0.3rem; }
.eingriff__feld {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0.5rem;
    background: var(--pill-bg);
    border-radius: 0;
    font-size: 0.82rem;
}
.eingriff__name { color: var(--text-light); }
.eingriff__wandel { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.eingriff__alt {
    color: var(--dark-gray);
    text-decoration: line-through;
    text-decoration-color: var(--text-faint);
}
.eingriff__pfeil { color: var(--text-faint); }
.eingriff__neu { font-weight: 600; color: var(--titel); }
.eingriff__quelle { color: var(--dark-gray); font-size: 0.75rem; white-space: nowrap; }
@media (max-width: 640px) {
    .eingriff__feld { grid-template-columns: 1fr; gap: 0.15rem; }
    .eingriff__quelle { white-space: normal; }
}

/* ---------------- Kalender ----------------
   Flach wie die Listen: keine Karte, keine abgerundeten Kacheln, sondern
   ein Raster aus duennen Linien - und kein Rahmen aussen herum.

   Der heutige Tag traegt seine Zahl in einem gefuellten Kreis statt eines
   gelben Kastens um die ganze Zelle. Ein Kasten um einen Tag sieht nach
   Auswahl aus, und auswaehlen kann man hier nichts (Yannick 15.09.2026).

   Der Datumsklotz der alten Fahrtenkarte (`.fahrt__datum` & Co.) ist am
   15.09.2026 entfallen - die Fahrtenliste zeigt den Termin in der Zeile. */

.kalender__navigation { display: flex; align-items: center; gap: 0.4rem; justify-self: start; }
.kalender__titel {
    font-size: 0.95rem; font-weight: 600; color: var(--titel);
    min-width: 10.5rem; text-align: center;
    font-variant-numeric: tabular-nums;
}
.kalender__pfeil {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border: 1px solid var(--linie); border-radius: 0;
    background: var(--flaeche); color: var(--icon);
    text-decoration: none; transition: var(--transition-fast);
}
.kalender__pfeil:hover { border-color: var(--linie-stark); color: var(--titel); }
.kalender__pfeil svg { width: 15px; height: 15px; }
.kalender__pfeil--zurueck svg { transform: rotate(180deg); }

/* Ganz links eine schmale Spalte fuer die Kalenderwoche: In Betrieben
   wird in KW geplant, und die Nummer steht sonst nirgends
   (Yannick 15.09.2026). */
.kalender__gitter { display: grid; grid-template-columns: 2.6rem repeat(7, minmax(0, 1fr)); }
.kalender__kw {
    display: flex; align-items: flex-start; justify-content: center;
    padding: 0.55rem 0.2rem 0;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
    color: var(--ueb-leise); font-variant-numeric: tabular-nums;
}
.kalender__wtag--kw { padding-left: 0; padding-right: 0; }

/* Dieselbe Schrift wie die Spaltenkoepfe der Listen. */
.kalender__wtag {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise);
    padding: 0 0.6rem 0.5rem;
    border-bottom: 1px solid var(--linie);
}

.kalender__tag {
    /* Etwas hoeher als breit wirkt eine Zelle gedrungen, deutlich
       breiter als hoch wirkt sie wie ein Balken. Auf der vollen
       Seitenbreite (Yannick 15.09.2026) passen 106 px dazwischen - und
       zwei Termine an einem Tag haben noch Platz. */
    min-height: 106px;
    padding: 0.5rem 0.75rem 0.65rem;
    border-bottom: 1px solid var(--linie-zart);
    border-left: 1px solid var(--linie-zart);
    display: flex; flex-direction: column; gap: 0.25rem;
    overflow: hidden;
}
/* Die Montagsspalte behaelt ihre Linie: Sie trennt die Wochennummer vom
   Kalender. Rechts bleibt das Raster offen - eingerahmt ist es nicht. */
/* Tage vor dem Ersten und nach dem Letzten bleiben leer - ohne Fuellung.
   Eine graue Flaeche sah aus wie "gesperrt"; dass dort kein Datum steht,
   sagt schon alles. */
.kalender__tag--leer { background: none; }

.kalender__nummer {
    font-size: 0.78rem; color: var(--text-light);
    font-variant-numeric: tabular-nums; line-height: 1.5;
    align-self: flex-start;
}
.kalender__tag--wochenende .kalender__nummer { color: var(--ueb-leise); }
.kalender__tag--heute .kalender__nummer {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; height: 1.5rem; margin: -0.12rem 0 0 -0.3rem;
    border-radius: 50%; background: var(--primary-color); color: #fff;
    font-weight: 650;
    /* Mit 1.5 sass der Tag 0,9 px zu hoch - siehe „ZAHL IM KREIS". */
    line-height: calc(1.5rem - 1px);
}

.kalender__chip {
    display: block;
    font-size: 0.68rem; font-weight: 600;
    padding: 0.12rem 0.4rem; border-radius: 0;
    background: var(--tint-blau-bg); color: var(--tint-blau-fg);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.kalender__chip:hover { filter: brightness(1.08); }
.kalender__chip--abholung { background: var(--tint-gold-bg); color: var(--tint-gold-fg); }

/* Eine FRIST ist kein Termin: Da steht niemand vor der Tuer, da laeuft
   nur etwas ab. Deshalb ohne gefuellte Flaeche - ein Punkt in der Farbe
   des Moduls und der Text daneben (Yannick 15.09.2026). */
.kalender__chip--frist {
    display: flex; align-items: center; gap: 0.35rem;
    background: none; padding-left: 0; padding-right: 0;
    color: var(--text-light); font-weight: 550;
}
/* RING statt Punkt: Am Telefon bleibt von jedem Eintrag nur ein Fleck -
   und "Zustellung" waere in derselben Farbe blau gewesen wie "Auftrag
   fertig". Gefuellt = es kommt jemand, offen = es laeuft etwas ab. */
.kalender__chip--frist::before {
    content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: none; border: 2px solid var(--ueb-leise); box-sizing: border-box;
}
a.kalender__chip--frist:hover { color: var(--titel); filter: none; }
.kalender__chip--gold::before   { border-color: var(--tint-gold-fg); }
.kalender__chip--blau::before   { border-color: var(--tint-blau-fg); }
.kalender__chip--vorort   { background: var(--tint-violett-bg); color: var(--tint-violett-fg); }
.kalender__chip--mobil    { background: var(--tint-gruen-bg); color: var(--tint-gruen-fg); }

.kalender__leer { margin-top: 1.1rem; font-size: 0.86rem; color: var(--ueb-leise); }

/* Nur am Telefon: Dort sind die Termine Punkte und brauchen einen
   Schluessel. Am Rechner steht die Beschriftung im Chip selbst - eine
   Legende daneben wiederholt sie nur (Yannick 15.09.2026). */
.kalender__legende { display: none; }
@media (max-width: 720px) {
    .kalender__legende {
        display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
        margin-top: 1.1rem; padding-top: 0.9rem;
        border-top: 1px solid var(--linie);
    }
}
.kalender__legendeneintrag {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.78rem; color: var(--text-light);
}

@media (max-width: 720px) {
    /* Am Telefon zaehlt nur noch, OB an einem Tag etwas ist: Die Namen
       passen nicht in eine Zelle von 45 px, ein Punkt schon. */
    .kalender__tag {
        min-height: 58px; padding: 0.3rem;
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem;
    }
    .kalender__nummer { width: 100%; font-size: 0.72rem; line-height: 1.2; }
    .kalender__tag--heute .kalender__nummer { width: auto; }
    /* Als Punkt zaehlt die kraeftige Farbe: Der blasse Flaechenton war
       auf 8 px kaum noch zu sehen. So haben Termine und Fristen dieselbe
       Deutlichkeit - auch in der Legende darunter. */
    .kalender__chip { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 0; background: var(--tint-blau-fg); }
    .kalender__chip--abholung { background: var(--tint-gold-fg); }
    .kalender__chip--vorort   { background: var(--tint-violett-fg); }
    .kalender__chip--mobil    { background: var(--tint-gruen-fg); }
    /* Fristen haben keine Flaeche - hier traegt ihr Punkt die Farbe. */
    .kalender__chip--frist { width: auto; height: auto; gap: 0; background: none; }
    .kalender__chip--frist::before { width: 9px; height: 9px; }
    .kalender__gitter { grid-template-columns: 1.9rem repeat(7, minmax(0, 1fr)); }
    .kalender__kw { padding: 0.35rem 0 0; font-size: 0.6rem; }
    .kalender__wtag { padding: 0 0.2rem 0.4rem; text-align: center; letter-spacing: 0.08em; }
    .kalender__titel { min-width: 8.5rem; font-size: 0.9rem; }
    .kalender__legendeneintrag .kalender__chip { width: 10px; height: 10px; }
}

.seiten-fussnote {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.7rem;
    padding-top: 1rem;
    border-top: 1px solid var(--linie);
    font-size: 0.8rem;
    color: var(--text-light);
}
.seiten-fussnote svg { width: 14px; height: 14px; flex: none; margin-top: 0.2rem; color: var(--dark-gray); }

/* ---------------- Formulare (Login-/Auth-Karten sind HELL) ---------------- */

.feld { display: block; margin-bottom: 1.05rem; }
/* Beschriftung als Kleinkapitael, das Feld als Textzeile mit Haarlinie -
   dieselbe Sprache wie die Suche im Portal. Erst der Fokus zieht die
   Linie in der Hausfarbe nach (17.09.2026). */
.feld__beschriftung {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--karte-text-2);
    margin-bottom: 0.1rem;
}
.feld__huelle { position: relative; }
.feld__eingabe {
    width: 100%;
    padding: 0.5rem 0 0.55rem;
    border: 0;
    border-bottom: 1px solid #c9d0dd;
    border-radius: 0;
    font: inherit;
    font-size: 1rem;
    color: var(--karte-text);
    background: transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.feld__eingabe::placeholder { color: #a9b2c3; }
.feld__eingabe:hover { border-bottom-color: #a4aec2; }
.feld__eingabe:focus {
    outline: none;
    border-bottom-color: var(--primary-color);
    box-shadow: 0 1px 0 0 var(--primary-color);
}
/* Browser-Autofill nicht gelb einfaerben lassen */
.feld__eingabe:-webkit-autofill,
.feld__eingabe:-webkit-autofill:hover,
.feld__eingabe:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
    -webkit-text-fill-color: var(--karte-text);
    transition: background-color 999999s;
}
.feld__eingabe--mit-knopf { padding-right: 2.4rem; }

.pw-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0.4rem;
    border-radius: 0;
    cursor: pointer;
    color: #8b93a5;
    display: flex;
    transition: var(--transition-fast);
}
.pw-toggle:hover { color: var(--primary-color); background: rgba(65, 83, 139, 0.07); }
.pw-toggle svg { width: 18px; height: 18px; }

.knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--radius-klein);
    padding: 0.72rem 1.4rem;
    font: inherit;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: none;
}
.knopf:hover { filter: brightness(1.12); transform: translateY(-1px); }
.knopf:active { transform: none; filter: brightness(0.98); }
.knopf--voll { width: 100%; }
.knopf--laedt { pointer-events: none; opacity: 0.85; }
.knopf__spinner {
    width: 17px;
    height: 17px;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: drehen 0.7s linear infinite;
    display: none;
}
.knopf--laedt .knopf__spinner { display: inline-block; }
@keyframes drehen { to { transform: rotate(360deg); } }

.hinweis {
    border-radius: var(--radius-klein);
    padding: 0.75rem 0.95rem;
    font-size: 0.87rem;
    margin-bottom: 1.05rem;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}
.hinweis svg { width: 17px; height: 17px; flex: none; margin-top: 0.15rem; }
/* Rückfrage im Hinweis: Die Knöpfe gehören UNTER den Text, nicht daneben.
   In derselben Zeile drängt der Knopf die Frage weg - und gefragt wird
   hier nach etwas, das sich nicht rückgängig machen lässt. */
.hinweis__aktionen {
    flex-basis: 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin-top: 0.65rem; padding-left: calc(17px + 0.55rem);
}
/* `flex-basis: 100%` bricht nur um, wenn der Hinweis umbrechen DARF - das fehlte bis 18.09.2026,
   die Knöpfe standen deshalb doch neben der Frage. Der Text behält seinen Platz neben dem Symbol. */
.hinweis:has(> .hinweis__aktionen) { flex-wrap: wrap; }
.hinweis:has(> .hinweis__aktionen) > span { flex: 1 1 0; min-width: 0; }
.hinweis--fehler {
    background: var(--fehler-hintergrund);
    color: var(--fehler-tief);
    border: 1px solid rgba(179, 38, 30, 0.25);
    animation: schuetteln 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
/* Abstaende bewusst NICHT eigens gesetzt: Ein Info-Hinweis steht im
   selben Stapel wie Erfolgs- und Warnhinweise und muss sich gleich
   verhalten. Der fruehere Sonderfall (oben Luft, unten keine) galt dem
   Testkasten im Anmeldefenster - auf der Angebotsseite klebte der Kasten
   dadurch an den Eckdaten (Yannick 14.09.2026). */
.hinweis--info {
    background: rgba(65, 83, 139, 0.06);
    color: var(--primary-dark);
    border: 1px dashed var(--primary-light);
    display: block;
}
.login-karte .hinweis--info { margin-top: 1.25rem; margin-bottom: 0; }
/* Etwas laeuft ab, ist aber noch nicht schiefgegangen - der Goldton des
   Portals, wie bei .zustimmung--warnung. Rot waere hier falsch: Ein
   Entwurf, der in drei Tagen endet, ist kein Fehler. */
.hinweis--warnung {
    background: var(--tint-gold-bg);
    color: var(--gold-lesbar);
    border: 1px solid var(--gold-lesbar);
}
.hinweis--warnung strong { color: var(--gold-lesbar); }

.hinweis--erfolg {
    background: #e9f7ef;
    color: var(--erfolg-tief);
    border: 1px solid rgba(26, 127, 79, 0.25);
}

/* Feld-Zusaetze */
.feld__kopfzeile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.feld__eingabe--fehler { border-bottom-color: var(--fehler-tief); }
.feld__eingabe--fehler:focus { border-bottom-color: var(--fehler-tief); box-shadow: 0 1px 0 0 var(--fehler-tief); }
.feld__capslock {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #8a6d1a;
}
.feld__vergleich {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--fehler-tief);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.feld__vergleich svg { width: 14px; height: 14px; }
.feld__vergleich[hidden] { display: none; }

.link-klein {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
}
.link-klein:hover { text-decoration: underline; }

/* Checkbox-Zeile ("Angemeldet bleiben") */
.kontrollzeile {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.86rem;
    color: var(--karte-text);
    margin: 0.15rem 0 1.15rem;
    cursor: pointer;
    user-select: none;
}
.kontrollzeile__box {
    appearance: none;
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 0.15rem;
    border: 1.5px solid var(--medium-gray);
    border-radius: 0;
    background: var(--white);
    cursor: pointer;
    transition: var(--transition-fast);
    position: relative;
}
.kontrollzeile__box:hover { border-color: var(--primary-light); }
.kontrollzeile__box:checked {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.kontrollzeile__box:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 4px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.kontrollzeile__zusatz { color: var(--karte-text-2); font-size: 0.78rem; }

/* Passwort-Regel-Checkliste */
.pw-regeln {
    list-style: none;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}
.pw-regeln li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: #8b93a5;
    transition: var(--transition-fast);
}
.pw-regeln svg { width: 14px; height: 14px; opacity: 0.4; }
.pw-regeln li.pw-regeln--ok { color: var(--erfolg-tief); }
.pw-regeln li.pw-regeln--ok svg { opacity: 1; }

/* ---------------- Login ---------------- */

/* =====================================================================
   ANMELDUNG (17.09.2026)

   Kein Kasten auf einem Verlauf. Die Seite selbst ist zweigeteilt: links
   das Marineblau der Seitenleiste als Flaeche, rechts Weiss. Keine
   Schatten, kein Schimmer, keine Rundung - dieselbe Sprache wie das
   Portal dahinter. Die Nebenseiten (Passwort vergessen, neues Passwort,
   Einladung) liegen als flache weisse Tafel auf demselben Blau.
   ===================================================================== */
.login-seite {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-dark);
}
.login-buehne {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}
.login-buehne--geteilt {
    display: grid;
    grid-template-columns: minmax(22rem, 46%) minmax(0, 1fr);
    align-items: stretch;
    padding: 0;
}

/* Links: die Marke */
.login-marke {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: clamp(2rem, 4.5vw, 4rem) clamp(2rem, 5vw, 4.5rem);
    background: var(--surface-dark);
    color: var(--white);
}
.login-marke__logo {
    height: 32px;
    width: auto;
    align-self: flex-start;
    filter: brightness(0) invert(1);
    opacity: 0.96;
}
.login-marke__mitte { margin-top: auto; margin-bottom: auto; max-width: 30rem; }
.login-marke__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.login-marke__titel {
    margin: 0;
    font-size: clamp(1.7rem, 2.6vw, 2.35rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
    font-weight: 600;
}
.login-marke__titel em { font-style: normal; color: var(--accent-color); }
.login-marke__fuss {
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
}

/* Rechts: das Formular in einer schmalen Spalte */
.login-feld {
    display: grid; place-items: center;
    padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
    background: var(--white);
    color: var(--karte-text);
}
.login-karte {
    width: 100%; max-width: 22rem;
    display: flex; flex-direction: column;
}
.login-karte__titel {
    margin: 0 0 1.9rem;
    color: var(--karte-text);
    font-size: 1.55rem; font-weight: 600; letter-spacing: -0.025em;
}
.login-karte .feld { margin-bottom: 1.4rem; }
.login-karte .kontrollzeile { margin: 0.2rem 0 1.5rem; }
/* Der Knopf in seiner natuerlichen Breite, wie ueberall im Portal. */
.login-karte .knopf--voll {
    width: auto; min-width: 11rem; align-self: flex-start;
    height: 44px; padding: 0 1.6rem;
}
.login-karte .hinweis { margin: 0 0 1.4rem; }
.login-karte__hilfe {
    margin: 1.6rem 0 0;
    font-size: 0.8rem; line-height: 1.55; color: var(--karte-text-2);
    max-width: 30ch;
}
.login-karte__test {
    margin-top: 1.6rem; padding: 0.8rem 0.95rem;
    border: 1px solid #c9d0dd;
    font-size: 0.78rem; line-height: 1.55; color: var(--karte-text-2);
}
.login-karte__testtitel {
    margin: 0 0 0.3rem;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--karte-text-2);
}

@media (max-width: 900px) {
    /* Untereinander: oben ein kompaktes Band der Marke, darunter das
       Formular ueber die volle Breite. Die vier Punkte fallen weg -
       sie nehmen auf dem Telefon nur den Platz, den das Formular
       braucht. */
    .login-buehne--geteilt { grid-template-columns: 1fr; }
    .login-marke { gap: 1.2rem; padding: 1.4rem 1.4rem 1.6rem; }
    .login-marke__logo { height: 26px; }
    .login-marke__mitte { margin: 0; }
    .login-marke__eyebrow { margin-bottom: 0.5rem; }
    .login-marke__titel { font-size: 1.35rem; }
    .login-marke__fuss { display: none; }
    .login-feld { padding: 1.8rem 1.4rem 2.4rem; place-items: start; }
    .login-karte { max-width: none; }
    .login-karte .knopf--voll { width: 100%; }
}

/* Schlanke Karte fuer Passwort-vergessen / Reset / Einladung */
.auth-karte {
    background: var(--white);
    color: var(--karte-text);
    border-radius: 0;
    padding: 2.4rem 2.3rem;
    width: 100%;
    max-width: 440px;
    animation: aufblenden 0.55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.auth-karte__logo { height: 32px; width: auto; display: block; margin-bottom: 1.4rem; }
.auth-karte__titel {
    color: var(--karte-text);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
}
.auth-karte__text { color: var(--karte-text-2); font-size: 0.9rem; margin-bottom: 1.3rem; }
.auth-karte__text strong { color: var(--karte-text); }
.auth-karte__fuss {
    margin-top: 1.2rem;
    font-size: 0.82rem;
    color: var(--karte-text-2);
    text-align: center;
}
a.knopf { text-decoration: none; text-align: center; }
/* :not(.knopf) - sonst faerbt die Linkfarbe auch die Knopf-Links
   („Zur Übersicht", „Neuen Link anfordern"): blaue Schrift auf blauem
   Knopf, unlesbar (404-Seite und Passwort-Reset, gesehen 14.09.2026). */
.login-karte a:not(.knopf), .auth-karte a:not(.knopf) { color: var(--primary-color); }

/* =====================================================================
   REGISTRIERUNG - zweigeteilt wie die Anmeldung, rechts ein breites, helles
   Blatt (Yannick 19.09.2026: „Das muss hell sein, nicht so klein und dann so
   viel Dunkelblau aussenrum").

   Links steht die Marke als schmale Flaeche und bleibt beim Rollen stehen.
   Rechts das Blatt: der Abschnittsname in einer eigenen Spalte, daneben die
   Felder - aufgebaut wie ein Formblatt, nicht wie ein Kasten auf einer Flaeche.
   Feste helle Werte wie auf der Anmeldeseite: Das Blatt bleibt weiss, auch
   wenn das Portal dunkel laeuft.
   ===================================================================== */
.login-karte__hilfe a { white-space: nowrap; }

.login-buehne--blatt { grid-template-columns: minmax(17rem, 32%) minmax(0, 1fr); }
.login-buehne--blatt .login-marke { position: sticky; top: 0; align-self: start; height: 100vh; }
.login-marke__heim { align-self: flex-start; display: inline-flex; }

.reg-blatt {
    display: flex; flex-direction: column;
    min-height: 100vh;
    padding: clamp(2.6rem, 5.5vw, 5rem) clamp(1.5rem, 6vw, 6rem) 2.2rem;
    background: var(--white);
    color: var(--karte-text);
    /* Auch die Auswahllisten des Browsers bleiben hell - im dunklen Portal stuende sonst
       dunkle Schrift auf dunkler Liste. */
    color-scheme: light;
}
.reg-blatt__inhalt { width: 100%; max-width: 47rem; }
.reg-blatt__inhalt a:not(.knopf) { color: var(--primary-color); }
.reg-blatt__titel {
    margin: 0 0 2.4rem;
    font-size: clamp(1.75rem, 2.4vw, 2.15rem);
    font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
    color: var(--karte-text);
}
.reg-blatt__text { max-width: 35rem; margin: 0 0 1.4rem; font-size: 0.95rem; line-height: 1.6; color: var(--karte-text-2); }
.reg-blatt__text strong { color: var(--karte-text); font-weight: 600; }
.reg-blatt .hinweis { max-width: 35rem; margin: 0 0 1.6rem; }
.reg-blatt__fuss { margin-top: auto; padding-top: 3.2rem; display: flex; gap: 1.5rem; font-size: 0.74rem; }
.reg-blatt__fuss a { color: var(--karte-text-2); text-decoration: none; }
.reg-blatt__fuss a:hover { color: var(--primary-color); text-decoration: underline; }

/* Abschnitt: Name links, Felder rechts, darueber eine Haarlinie. */
.reg-abschnitt {
    display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 2rem;
    padding-top: 1.6rem; margin-bottom: 0.7rem;
    border-top: 1px solid #dde2eb;
}
.reg-abschnitt__titel {
    margin: 0.2rem 0 1.1rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--karte-text);
}
.reg-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1.6rem; min-width: 0; }
.reg-s2 { grid-column: span 2; }
.reg-s3 { grid-column: span 3; }
.reg-s4 { grid-column: span 4; }
.reg-s6 { grid-column: span 6; }
/* Die Abschnitts-Regel `.feld` weiter oben (Innenabstand + Linie) schlaegt auf diese
   Seiten durch - hier ausdruecklich zurueckgesetzt, sonst stuende unter jedem linken
   Feld eine zweite Linie. */
.reg-blatt .feld { padding-bottom: 0; border-bottom: 0; margin-bottom: 1.5rem; }
.reg-blatt .feld__beschriftung em { font-style: normal; font-weight: 500; letter-spacing: 0.06em; text-transform: none; opacity: 0.8; }
.reg-felder select.feld__eingabe {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 1.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235b6474' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.15rem center; background-size: 0.7rem;
}

/* „Ich bin ..." - drei kantige Felder, das gewaehlte in der Hausfarbe. */
.reg-wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.reg-wahl__punkt { position: relative; display: inline-flex; }
.reg-wahl__punkt input { position: absolute; opacity: 0; pointer-events: none; }
.reg-wahl__punkt span {
    display: inline-flex; align-items: center;
    height: 2.65rem; padding: 0 1.2rem;
    border: 1px solid #c9d0dd;
    font-size: 0.92rem; font-weight: 550; color: var(--karte-text);
    cursor: pointer; user-select: none;
    transition: var(--transition-fast);
}
.reg-wahl__punkt span:hover { border-color: var(--primary-color); color: var(--primary-color); }
.reg-wahl__punkt input:checked + span { background: var(--primary-color); border-color: var(--primary-color); color: var(--white); }
.reg-wahl__punkt input:focus-visible + span { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* Ein Interessent hat keine Adressnummer: Das Feld verschwindet, die Firma nimmt die Zeile.
   Ohne :has() bleibt es stehen - der Server verlangt es fuer Interessenten ohnehin nicht. */
@supports selector(:has(*)) {
    .reg-blatt:has(input[name="typ"][value="interessent"]:checked) .reg-nur-kunde { display: none; }
    .reg-blatt:has(input[name="typ"][value="interessent"]:checked) .reg-firma { grid-column: span 6; }
}

.reg-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.7rem; }
.reg-aktionen .knopf { height: 44px; padding: 0 1.8rem; min-width: 11rem; }
.reg-aktionen__neben { font-size: 0.86rem; color: var(--karte-text-2); }
.reg-schmal { max-width: 24rem; }
/* Falle fuer Automaten: im Dokument, aber fuer niemanden sichtbar. */
.feld--falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Zweiter Knopf auf dem Blatt. Feste helle Werte - .knopf--sekundaer wuerde im dunklen Portal dunkel. */
.knopf.knopf--hell { background: transparent; color: var(--karte-text); border: 1px solid #c9d0dd; }
.knopf.knopf--hell:hover { filter: none; border-color: var(--primary-color); color: var(--primary-color); }

@media (max-width: 900px) {
    /* Untereinander wie die Anmeldung: oben das Band der Marke, darunter das Blatt. */
    .login-buehne--blatt { grid-template-columns: 1fr; }
    .login-buehne--blatt .login-marke { position: static; height: auto; }
    .reg-blatt { min-height: 0; padding: 2rem 1.4rem 1.8rem; }
    .reg-blatt__titel { margin-bottom: 1.8rem; }
    .reg-abschnitt { grid-template-columns: 1fr; padding-top: 1.3rem; }
    .reg-abschnitt__titel { margin-bottom: 1.2rem; }
}
@media (max-width: 560px) {
    .reg-felder > * { grid-column: span 6; }
    .reg-felder > .reg-m2 { grid-column: span 2; }
    .reg-felder > .reg-m4 { grid-column: span 4; }
    .reg-aktionen .knopf { width: 100%; }
}


/* ==== EINSTIEG-ANFANG ==== */
/* =====================================================================
   GEFUEHRTER EINSTIEG nach der Registrierung (einstieg.php) - auf dem hellen
   Blatt der Registrierung. Links steht statt des Satzes die Liste der Schritte.
   Dazu die beiden Bausteine, die auch „Mein Zugang" (zugang.php) zeigt:
   Zwei-Faktor einrichten (.zf) und die Wege ins Kalenderprogramm (.abo).
   Kanten statt Rundungen, Haarlinien statt Kaesten - wie der Rest.
   ===================================================================== */

/* ---- EINGEBUNDENE ABSCHNITTE der Stammdatenseite (Logistik, Datenversand, Kalibriervorgaben, Synergien) ----
   Das Blatt ist IMMER hell. Die Abschnitte kommen aber aus den Dateien der Stammdatenseite und tragen die
   Farbvariablen des Portals - im dunklen Modus stuende sonst helle Schrift auf weissem Blatt. Deshalb gelten
   auf dem Blatt fest die hellen Werte (erzeugt aus der :root-Regel, nicht abgetippt). */
.reg-blatt {
    --bg: #f2f4f9;
    --flaeche: #ffffff;
    --flaeche-hoch: #ffffff;
    --linie: rgba(20, 30, 60, 0.09);
    --linie-zart: rgba(20, 30, 60, 0.055);
    --linie-stark: rgba(20, 30, 60, 0.16);
    --lichtkante: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --karten-schatten: 0 1px 2px rgba(16, 24, 48, 0.04), 0 4px 12px -4px rgba(16, 24, 48, 0.07);
    --titel: #16203a;
    --text-color: #1c2537;
    --text-light: #4a5670;
    --dark-gray: #828ca4;
    --text-faint: #a2abbf;
    --fehler: #b3261e;
    --haken: #1a7f4f;
    --icon: #41538B;
    --gold-lesbar: #9a7413;
    --warn-glow: none;
    --knr-bg: #ffffff;
    --pill-bg: #f4f6fa;
    --pill-aktiv-bg: rgba(var(--brand-rgb), 0.07);
    --pill-aktiv-border: rgba(var(--brand-rgb), 0.22);
    --pill-aktiv-text: #374674;
    --chip-bg: rgba(232, 184, 75, 0.16);
    --chip-border: rgba(154, 116, 19, 0.35);
    --chip-text: #8a6d1a;
    --avatar-bg: #f4f6fa;
    --avatar-border: rgba(20, 30, 60, 0.12);
    --eingabe-bg: #ffffff;
    --tint-blau-bg: rgba(65, 83, 139, 0.1);
    --tint-blau-fg: #41538B;
    --tint-gold-bg: rgba(232, 184, 75, 0.18);
    --tint-gold-fg: #9a7413;
    --tint-stahl-bg: rgba(74, 86, 112, 0.1);
    --tint-stahl-fg: #4a5670;
    --tint-violett-bg: rgba(110, 79, 176, 0.1);
    --tint-violett-fg: #6e4fb0;
    --tint-gruen-bg: rgba(26, 127, 79, 0.1);
    --tint-gruen-fg: #1a7f4f;
    --tint-rot-bg: rgba(179, 38, 30, 0.09);
    --tint-rot-fg: #b3261e;
    --mesh: radial-gradient(55% 45% at 100% 0%, rgba(var(--brand-rgb), 0.07), transparent 62%), radial-gradient(45% 40% at 0% 100%, rgba(110, 79, 176, 0.05), transparent 60%);
    --grain: 0.012;
    --scroll-thumb: #cdd5e3;
    --scroll-thumb-hover: #a8b3c9;
    --schleier-farbe: rgba(10, 16, 40, 0.5);
    --sh-sm: 0 1px 2px rgba(16, 24, 48, 0.06);
    --sh-md: 0 2px 6px rgba(16, 24, 48, 0.06), 0 10px 24px -8px rgba(16, 24, 48, 0.12);
    --sh-xl: 0 8px 18px rgba(16, 24, 48, 0.1), 0 36px 70px -16px rgba(16, 24, 48, 0.22);
}
/* Dort ist .sd ein Raster aus Navigation und Inhalt - hier gibt es nur den Inhalt. */
.sd.sd--einstieg { display: block; margin-top: 2rem; }
/* `.feld` ist in diesen Abschnitten der ABSCHNITT (nicht das Eingabefeld der Registrierung): seine
   eigene Regel zurueckholen, die `.reg-blatt .feld` weiter unten sonst ueberschreibt. */
.reg-blatt .sd--einstieg .feld { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid #dde2eb; }
.reg-blatt .sd--einstieg .feld:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0.4rem; }
/* Kalibriervorgaben im Einstieg: unbeantwortete Zeilen rot. */
.ang--fehlt .ang__label { color: var(--fehler); }
/* EINE Ordnung fuer jede Zeile im Einstieg (Yannick 20.09.2026: der Kunde soll Ordnung sehen): links steht nur der Name,
   rechts ALLES, was dazugehoert - die Auswahl oder der Stand, darunter der Verweis auf das Formblatt, darunter der
   Haken (sd_einstieg_ohne(), z. B. Keine Gewinde). Die Einrueckung ist die linke Spalte von .ang (minmax(180px, 38%))
   samt Abstand. Auf der Stammdatenseite bleibt alles, wie es ist. */
.sd--einstieg .angebotszeile,
.sd--einstieg .ang__ohne-zeile { padding-left: calc(max(180px, 38%) + 1.6rem); }
.sd--einstieg .angebotszeile { margin: 0; padding-top: 0.3rem; padding-bottom: 0.8rem; border-left: 0; }
/* Der graue Halbsatz steht IMMER unter dem Knopf - sonst stuende er mal daneben, mal darunter, je nach Laenge des Knopfes. */
.sd--einstieg .angebotszeile { row-gap: 0.3rem; }
.sd--einstieg .angebotszeile__wann { flex-basis: 100%; }
.ang__ohne-zeile { padding-top: 0.3rem; padding-bottom: 0.8rem; }
.ang__ohne-zeile .ang__ohne { display: inline-flex; margin: 0; font-size: 0.86rem; }
.ang__ohne--fehlt { color: var(--fehler); }
/* Die Trennlinie steht erst NACH dem letzten Teil einer Zeile. Ohne :has() bleibt sie unter dem Namen - auch in Ordnung. */
@supports selector(:has(*)) {
    /* Zwischen Zeile und Verweis kann ein verstecktes Element liegen (Hoechstbetrag, Erklaerung am Fragezeichen). */
    .sd--einstieg .ang:has(+ .angebotszeile),
    .sd--einstieg .ang:has(+ [hidden] + .angebotszeile),
    .sd--einstieg .ang:has(+ .ang__ohne-zeile) { border-bottom: 0; padding-bottom: 0.1rem; }
    .sd--einstieg .angebotszeile,
    .sd--einstieg .ang__ohne-zeile { border-bottom: 1px solid var(--linie-zart); }
    .sd--einstieg .angebotszeile:has(+ .angebotszeile),
    .sd--einstieg .angebotszeile:has(+ .ang__ohne-zeile) { border-bottom: 0; padding-bottom: 0.2rem; }
    /* Am Ende eines Abschnitts zieht der Abschnitt selbst die Linie. */
    .sd--einstieg .feld__inhalt > .angebotszeile:last-child,
    .sd--einstieg .feld__inhalt > .ang__ohne-zeile:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
}
/* Uebersprungen (assets/js/zugang.js): Zeile und Formblatt-Verweis treten zurueck. */
.ang--uebersprungen .ang__begriff, .ang--uebersprungen .ang__eingang, .angebotszeile--uebersprungen { opacity: 0.45; }
@media (max-width: 620px) {
    .sd--einstieg .angebotszeile, .sd--einstieg .ang__ohne-zeile { padding-left: 0; }
}
/* Heisst der erste Abschnitt wie die Seite, steht der Name nicht zweimal da. */
.sd--erster-titel-weg .feld:first-of-type > .feld__titel { display: none; }
/* Viele Schritte: die Liste links rueckt zusammen, damit sie auch auf flachen Bildschirmen passt. */
.est-leiste--lang .est-leiste__punkt { padding-bottom: 0.8rem; font-size: 0.88rem; }
.est-leiste--lang .est-leiste__marke { width: 1.4rem; height: 1.4rem; font-size: 0.66rem; }
.est-leiste--lang .est-leiste__punkt:not(:last-child)::before { left: calc(0.7rem - 0.5px); top: 1.4rem; }
.login-marke--leiste:has(.est-leiste--lang) .login-marke__mitte { margin-top: clamp(1.2rem, 5vh, 3rem); }
/* Seite Angaben pruefen: bisher -> neu, darunter der Hinweis auf Mehrkosten (wie auf der Bestaetigungsseite der Stammdaten). */
.est-alt { color: var(--karte-text-2); }
.est-kosten { margin: 0.5rem 0 0.3rem; padding: 0.6rem 0.75rem; background: rgba(232, 184, 75, 0.16); border: 1px solid rgba(154, 116, 19, 0.35); }
.est-kosten__marke { display: block; margin-bottom: 0.25rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #8a6d1a; }
.est-kosten p { margin: 0.35rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--karte-text-2); }
.est-kosten p:first-of-type { margin-top: 0; }

/* ---- Die Schritte links ---- */
.login-marke--leiste .login-marke__mitte { margin-top: clamp(2.2rem, 11vh, 6rem); margin-bottom: auto; max-width: none; }
.login-marke--leiste .login-marke__eyebrow { margin-bottom: 1.6rem; }
.est-leiste { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.est-leiste__punkt {
    position: relative;
    display: flex; align-items: center; gap: 0.95rem;
    padding-bottom: 1.35rem;
    font-size: 0.95rem; line-height: 1.2;
    color: rgba(255, 255, 255, 0.5);
}
.est-leiste__punkt:last-child { padding-bottom: 0; }
/* Die Linie zwischen den Marken */
.est-leiste__punkt:not(:last-child)::before {
    content: ""; position: absolute; left: calc(0.8rem - 0.5px); top: 1.6rem; bottom: 0;
    width: 1px; background: rgba(255, 255, 255, 0.16);
}
.est-leiste__punkt--fertig:not(:last-child)::before { background: rgba(232, 184, 75, 0.55); }
.est-leiste__marke {
    flex: none; display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.est-leiste__marke svg { width: 12px; height: 12px; stroke-width: 3; }
.est-leiste__punkt--fertig { color: rgba(255, 255, 255, 0.78); }
.est-leiste__punkt--fertig .est-leiste__marke { background: var(--accent-color); border-color: var(--accent-color); color: var(--surface-dark); }
.est-leiste__punkt--aktiv { color: var(--white); font-weight: 600; }
.est-leiste__punkt--aktiv .est-leiste__marke { background: var(--white); border-color: var(--white); color: var(--surface-dark); }
.est-balken { display: none; }

/* ---- Das Blatt ---- */
.est-zaehler {
    margin: 0 0 0.7rem;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--karte-text-2);
}
.est-zaehler + .reg-blatt__titel { margin-bottom: 1.3rem; }
.reg-blatt__titel + .reg-abschnitt, .reg-blatt__titel + form { margin-top: 2.2rem; }
.est-kontakt__name { margin: 0 0 0.5rem; font-size: 1.02rem; font-weight: 600; color: var(--karte-text); }
.est-liste { margin: 0 0 1.4rem; display: grid; gap: 0.3rem; }
.est-liste > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.est-liste--breit > div { grid-template-columns: minmax(9rem, 38%) minmax(0, 1fr); }
.est-liste dt { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--karte-text-2); }
.est-liste dd { margin: 0; font-size: 0.95rem; color: var(--karte-text); overflow-wrap: anywhere; }
.est-felder { margin-top: 0.4rem; }
.est-fest { display: block; margin: 0; padding: 0.5rem 0 0.55rem; font-size: 1rem; color: var(--karte-text); overflow-wrap: anywhere; }
p.est-fest { padding-top: 0.15rem; }
.est-status { margin: 0 0 1.4rem; font-size: 0.86rem; color: var(--karte-text-2); }
.est-haken { margin: 0 0 1.4rem; color: var(--karte-text); }
.est-ueber { margin-bottom: 0.6rem; }
.est-versand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; }
.est-versand__zeile--fest { margin-bottom: 1.5rem; }
.est-alle { display: flex; align-items: flex-end; gap: 1rem; margin-bottom: 0.2rem; }
.est-alle .feld { flex: 1 1 auto; min-width: 0; }
.est-alle .knopf { flex: none; height: 2.65rem; margin-bottom: 1.5rem; padding: 0 1.2rem; }
.est-anschrift__felder { margin-top: 0.3rem; }
/* „Wie Standort-Anschrift": die Felder verschwinden. Ohne :has() bleiben sie stehen - der Server
   beachtet sie dann nicht. */
@supports selector(:has(*)) {
    .est-anschrift:has(input[value="0"]:checked) .est-anschrift__felder { display: none; }
}
.est-aktionen { margin-top: 1.6rem; }
.est-zurueck { font-size: 0.9rem; color: var(--karte-text-2); text-decoration: none; }
.reg-blatt__inhalt a.est-zurueck:not(.knopf) { color: var(--karte-text-2); }
.est-zurueck:hover { color: var(--primary-color); text-decoration: underline; }
.est-zurueck--knopf { border: 0; background: none; padding: 0; font: inherit; font-size: 0.9rem; cursor: pointer; }
/* Abmelden im Fuss des Blatts - nur im Einstieg, dort gibt es kein Portal-Menue. */
.reg-blatt__abmelden { margin-left: auto; }
.reg-blatt__abmelden button { border: 0; background: none; padding: 0; font: inherit; color: var(--karte-text-2); cursor: pointer; }
.reg-blatt__abmelden button:hover { color: var(--primary-color); text-decoration: underline; }
.est-code { margin-top: 1.8rem; }
.est-code__feld { max-width: 13rem; }
.feld__eingabe--code { font-size: 1.45rem; letter-spacing: 0.32em; font-variant-numeric: tabular-nums; }
.login-karte__text { margin: -1.2rem 0 1.7rem; font-size: 0.9rem; line-height: 1.55; color: var(--karte-text-2); }
/* Code-Seite der Anmeldung: Unter dem einen Feld steht die Kontrollzeile - die Linie der Abschnitts-Regel `.feld` gehoert dort nicht hin. */
.login-karte--code .feld { border-bottom: 0; padding-bottom: 0.6rem; }
.est-fazit { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; gap: 0.7rem; }
.est-fazit li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 1rem; color: var(--karte-text); }
.est-fazit svg { width: 18px; height: 18px; flex: none; margin-top: 0.2rem; color: var(--erfolg-tief); }

/* ---- Baustein: Zwei-Faktor einrichten. Farben je Umgebung - das Blatt ist immer hell,
        „Mein Zugang" folgt dem Portal (hell/dunkel). ---- */
.zf, .abo, .zugang { --b-text: var(--text-color); --b-text2: var(--text-light); --b-linie: var(--linie-stark); }
.reg-blatt .zf, .reg-blatt .abo { --b-text: var(--karte-text); --b-text2: var(--karte-text-2); --b-linie: #c9d0dd; }
.zf { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 2rem; align-items: start; max-width: 40rem; margin: 1.6rem 0 0; }
/* Der QR-Code steht IMMER schwarz auf weiss - sonst liest ihn keine Kamera. */
.zf__qr { padding: 0.7rem; background: #ffffff; border: 1px solid var(--b-linie); line-height: 0; }
.zf__qr svg { display: block; width: 100%; height: auto; }
.zf__schritte { margin: 0; padding: 0; list-style: none; counter-reset: zf; display: grid; gap: 0.85rem; }
.zf__schritte li {
    counter-increment: zf; position: relative; padding-left: 2.3rem;
    font-size: 0.93rem; line-height: 1.5; color: var(--b-text);
}
.zf__schritte li::before {
    content: counter(zf); position: absolute; left: 0; top: 0.05rem;
    display: grid; place-items: center; width: 1.45rem; height: 1.45rem;
    border: 1px solid var(--b-linie); font-size: 0.7rem; font-weight: 700; color: var(--b-text2);
}
.zf__hand { margin-top: 1.2rem; font-size: 0.86rem; color: var(--b-text2); }
.zf__hand summary { cursor: pointer; color: var(--primary-color); }
.zf__hand p { margin: 0.7rem 0 0.5rem; }
.zf__schluessel {
    display: inline-block; padding: 0.45rem 0.65rem;
    border: 1px solid var(--b-linie);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.92rem; letter-spacing: 0.06em; color: var(--b-text);
    user-select: all; overflow-wrap: anywhere;
}

/* ---- Baustein: Notfallcodes (stehen nur einmal da) ---- */
.notfall { --b-text: var(--text-color); --b-text2: var(--text-light); --b-linie: var(--linie-stark);
           max-width: 40rem; margin: 0.4rem 0 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--b-linie); }
.reg-blatt .notfall { --b-text: var(--karte-text); --b-text2: var(--karte-text-2); --b-linie: #dde2eb; }
.notfall__titel { margin: 0 0 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--b-text); }
.notfall__text { max-width: 35rem; margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.6; color: var(--b-text2); }
.notfall__liste {
    list-style: none; margin: 0 0 1.2rem; padding: 0;
    display: grid; grid-template-columns: repeat(2, max-content); gap: 0.45rem 2.6rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 1rem; letter-spacing: 0.06em; color: var(--b-text); user-select: all;
}
/* EIN Notfallcode (Yannick 20.09.2026) steht groesser und allein da. */
.notfall__liste--einer { grid-template-columns: max-content; font-size: 1.35rem; letter-spacing: 0.1em; }
/* Quelle fuer den Kopieren-Knopf: im Dokument, aber nicht zu sehen. */
.notfall__quelle { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notfall .knopf { height: 2.65rem; padding: 0 1.1rem; font-size: 0.86rem; }
.feld__eingabe--notfall { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 1.15rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- Baustein: Wege ins Kalenderprogramm ---- */
.abo { max-width: 40rem; margin: 0 0 0.4rem; }
.abo__wege { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.6rem; }
.abo__wege .knopf { height: 44px; padding: 0 1.4rem; }
.abo__adresse { display: block; }
.abo__beschriftung {
    display: block; margin-bottom: 0.4rem;
    font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--b-text2);
}
.abo__zeile { display: flex; gap: 0.6rem; }
.abo__feld {
    flex: 1 1 auto; min-width: 0; height: 2.65rem; padding: 0 0.75rem;
    border: 1px solid var(--b-linie); border-radius: 0; background: transparent;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 0.8rem;
    color: var(--b-text);
}
.abo__feld:focus { outline: none; border-color: var(--primary-color); }
.abo__zeile .knopf { flex: none; height: 2.65rem; padding: 0 1.1rem; font-size: 0.86rem; }
.abo__hinweis { margin: 0.9rem 0 0; font-size: 0.8rem; line-height: 1.55; color: var(--b-text2); }

/* ---- „Mein Zugang" (im Geruest des Portals) ---- */
.zugang { max-width: 46rem; }
.zugang__abschnitt { padding-bottom: 2.4rem; margin-bottom: 2.2rem; border-bottom: 1px solid var(--linie); scroll-margin-top: 1.5rem; }
.zugang__abschnitt:last-child { border-bottom: 0; margin-bottom: 0; }
.zugang .beleg__titel { margin-bottom: 1.4rem; }
.zugang__formular { max-width: 23rem; }
.zugang__text { max-width: 38rem; margin: 0 0 1.2rem; font-size: 0.93rem; line-height: 1.6; color: var(--text-light); }
.zugang__stand { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1.1rem; font-size: 0.95rem; font-weight: 550; color: var(--text-color); }
.zugang__stand svg { width: 17px; height: 17px; flex: none; color: var(--haken); }
.zugang__mehr { font-size: 0.9rem; color: var(--text-light); }
.zugang__mehr summary { cursor: pointer; color: var(--icon); width: fit-content; }
.zugang__mehr[open] summary { margin-bottom: 1.2rem; }
.zugang .hinweis { max-width: 38rem; }
.zugang .zf { margin: 0 0 1.8rem; }
/* Die Felder der Anmeldeseiten sind fuer helle Karten gebaut - hier folgen sie dem Portal. Und die
   Abschnitts-Regel `.feld` (Innenabstand + Linie) wird zurueckgesetzt, wie auf dem Blatt. */
.zugang .feld { padding-bottom: 0; border-bottom: 0; margin-bottom: 1.4rem; }
.zugang .feld__beschriftung { color: var(--text-light); }
.zugang .feld__eingabe { color: var(--text-color); border-bottom-color: var(--linie-stark); }
.zugang .feld__eingabe:hover { border-bottom-color: var(--dark-gray); }
.zugang .feld__eingabe:focus { border-bottom-color: var(--icon); box-shadow: 0 1px 0 0 var(--icon); }
.zugang .feld__eingabe:-webkit-autofill,
.zugang .feld__eingabe:-webkit-autofill:hover,
.zugang .feld__eingabe:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--flaeche) inset; -webkit-text-fill-color: var(--text-color);
}
.zugang .pw-toggle { color: var(--dark-gray); }
.zugang .pw-regeln li { color: var(--dark-gray); }
.zugang .pw-regeln li.pw-regeln--ok { color: var(--haken); }
.zugang .formular__fuss { flex-wrap: wrap; gap: 0.7rem; }
/* .knopf--hell traegt feste helle Werte fuer das Blatt - im dunklen Portal stuende dunkle Schrift auf dunklem Grund. */
.zugang .knopf.knopf--hell { color: var(--text-color); border-color: var(--linie-stark); }
.zugang .knopf.knopf--hell:hover { color: var(--icon); border-color: var(--icon); }
a.konto__eintrag { text-decoration: none; }

@media (max-width: 900px) {
    /* Die Liste der Schritte weicht einem Balken - sie naehme dem Formular sonst den halben Bildschirm. */
    .login-marke--leiste { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.9rem 1.2rem; }
    .login-marke--leiste .login-marke__mitte { flex: 1 1 100%; order: 3; margin: 0; }
    .login-marke--leiste .login-marke__eyebrow { display: none; }
    .est-leiste { display: none; }
    .est-balken { display: block; height: 3px; background: rgba(255, 255, 255, 0.16); }
    .est-balken span { display: block; height: 100%; background: var(--accent-color); }
    .est-versand { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .zf { grid-template-columns: 1fr; gap: 1.4rem; }
    .zf__qr { max-width: 12rem; }
    .est-liste > div, .est-liste--breit > div { grid-template-columns: 1fr; gap: 0.1rem; }
    .est-alle { flex-direction: column; align-items: stretch; gap: 0; }
    .est-alle .knopf { margin-bottom: 1.5rem; }
    .abo__wege .knopf { width: 100%; }
    .notfall__liste { grid-template-columns: 1fr; }
}
/* ==== EINSTIEG-ENDE ==== */

/* ---------------- Fusszeile ---------------- */

.fusszeile {
    border-top: 1px solid var(--linie);
    padding: 0.85rem 2.6rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: var(--text-faint);
}
.fusszeile__links { display: flex; gap: 1.1rem; }
.fusszeile__links a { color: var(--text-faint); text-decoration: none; transition: var(--transition-fast); }
.fusszeile__links a:hover { color: var(--icon); }

/* ---------------- Mobil: Sidebar wird zum Einschub ---------------- */

@media (max-width: 900px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: auto;
        width: 264px;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--sh-xl);
    }
    body.menue-offen .sidebar { transform: none; }

    .schleier {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--schleier-farbe);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.28s ease;
        z-index: 90;
    }
    body.menue-offen .schleier { opacity: 1; pointer-events: auto; }
    body.menue-offen { overflow: hidden; }

    .mobilbar {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(12, 17, 32, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 0.55rem 1rem;
    }
    .mobilbar__menue {
        border: none;
        background: none;
        padding: 0.45rem;
        margin-left: -0.45rem;
        border-radius: 0;
        cursor: pointer;
        color: #eef1f9;
        display: flex;
    }
    .mobilbar__menue svg { width: 22px; height: 22px; }
    .mobilbar__menue:hover { background: rgba(255, 255, 255, 0.07); }
    .mobilbar__logo { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: 0.96; }
    .mobilbar__avatar {
        margin-left: auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--primary-color);
        color: var(--white);
        font-size: 0.78rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .inhalt { padding: 1.4rem 1rem 2.2rem; }
    .fusszeile { padding: 0.85rem 1rem; }
    .statgruppe { grid-template-columns: repeat(2, 1fr); }
    .stat { padding: 0.9rem 1rem 0.95rem; border-top: 1px solid var(--linie-zart); margin-top: -1px; }
    .stat__wert { font-size: 1.35rem; }
    .seitenkopf h1 { font-size: 1.3rem; }
}

/* ---------------- Nachweis einer abgegebenen Erklärung ----------------
   Das Gegenstück zum unterschriebenen Blatt. Wird ausgedruckt, wenn ein
   Auditor fragt - deshalb ist das Druckbild hier kein Nachgedanke,
   sondern der eigentliche Zweck.

   Am Bildschirm nüchtern, auf Papier ohne Portal-Drumherum: Navigation,
   Kopfleiste und Schaltflächen verschwinden beim Drucken. */
.nachweis { max-width: 680px; margin: 0 auto; }

.nachweis__nurbildschirm {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin: 0 0 1.6rem;
}

.nachweis__kopf {
    padding-bottom: 1.2rem; margin-bottom: 1.4rem;
    border-bottom: 2px solid var(--titel);
}
.nachweis__marke {
    margin: 0 0 0.4rem; font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.nachweis__titel {
    margin: 0 0 0.3rem; font-size: 1.5rem; line-height: 1.2;
    font-weight: 700; letter-spacing: -0.02em; color: var(--titel);
}
.nachweis__nummer { margin: 0; font-size: 0.88rem; color: var(--text-light); }

.nachweis__daten {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.9rem 1.6rem; margin: 0 0 1.8rem;
}
.nachweis__daten dt {
    margin: 0 0 0.12rem; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.nachweis__daten dd {
    margin: 0; font-size: 0.88rem; color: var(--titel); overflow-wrap: anywhere;
}

.nachweis__erklaerung h2,
.nachweis__pruefung h2 {
    margin: 0 0 0.7rem; padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--linie);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-light);
}
/* Der Wortlaut als <pre>: Es ist ein Nachweis, kein Fließtext -
   Zeilenumbrüche gehören dazu. */
.nachweis__wortlaut {
    margin: 0 0 1.8rem; padding: 1rem 1.2rem;
    border-left: 3px solid var(--titel); background: var(--pill-bg);
    font-family: inherit; font-size: 0.87rem; line-height: 1.7;
    color: var(--text-color); white-space: pre-wrap; overflow-wrap: anywhere;
}

.nachweis__pruefung { margin-bottom: 1.8rem; }
.nachweis__pruefung p {
    margin: 0 0 0.7rem; font-size: 0.86rem; line-height: 1.65; color: var(--text-color);
}
.nachweis__pruefung--unveraendert h2 { color: var(--haken); border-bottom-color: var(--haken); }
.nachweis__pruefung--veraendert {
    padding: 1rem 1.2rem; border: 2px solid var(--fehler-tief);
    border-radius: var(--radius-klein); background: var(--fehler-hintergrund);
}
.nachweis__pruefung--veraendert h2 { color: var(--fehler-tief); border-bottom-color: var(--fehler-tief); }

.nachweis__summen { margin: 0 0 0.7rem; }
.nachweis__summen div { margin-bottom: 0.6rem; }
.nachweis__summen dt {
    margin: 0 0 0.15rem; font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint);
}
.nachweis__summen dd { margin: 0; }
/* Die Prüfsumme muss abtippbar und vergleichbar sein - deshalb feste
   Zeichenbreite und Umbruch an jeder Stelle. */
.nachweis__hash {
    font-family: "Consolas", "SF Mono", "Menlo", monospace;
    font-size: 0.76rem; line-height: 1.5; color: var(--titel);
    word-break: break-all;
}
.nachweis__fuss { margin: 0; font-size: 0.76rem; line-height: 1.55; color: var(--text-faint); }

.nachweis__fusszeile {
    padding-top: 1rem; border-top: 1px solid var(--linie);
    font-size: 0.74rem; color: var(--text-faint);
}
.nachweis__fusszeile p { margin: 0 0 0.2rem; }

.stand__nachweis { color: var(--icon); font-weight: 600; }

/* ---- Druckbild ----
   Auf Papier zählt der Inhalt. Alles, was zur Bedienung gehört, fällt
   weg - und die Farben werden zu Schwarz auf Weiß, weil ein Ausdruck
   aus dem Bürodrucker sonst grau in grau wird. */
@media print {
    body { background: #fff; color: #000; }
    .kopfleiste, .seitennav, .fussleiste, .nachweis__nurbildschirm,
    nav, header.seitenkopf, footer:not(.nachweis__fusszeile) { display: none !important; }
    .nachweis { max-width: none; margin: 0; }
    .nachweis__titel, .nachweis__daten dd, .nachweis__hash { color: #000; }
    .nachweis__wortlaut {
        background: none; border-left: 2px solid #000;
        page-break-inside: avoid; color: #000;
    }
    .nachweis__pruefung--veraendert { border-color: #000; background: none; }
    .nachweis__erklaerung, .nachweis__pruefung { page-break-inside: avoid; }
    a[href]::after { content: ""; }   /* keine URLs hinter Verweisen */
}

/* Hinweis im Abschnittskopf der Stammdaten: wer hat hier zuletzt etwas
   geaendert. Bewusst leise - er soll auffallen, wenn man ihn braucht,
   und sonst nicht stoeren. */
.feld__zuletzt {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
    margin: -0.35rem 0 0.8rem; font-size: 0.8rem; color: var(--text-faint);
}
/* Kurze Erlaeuterung unter einer Abschnittsueberschrift - eine Zeile, in
   der Sprache des Formblatts selbst (siehe lib/sd_bereich_formulare.php). */
.feld__hinweis { margin: -0.4rem 0 0.9rem; font-size: 0.84rem; color: var(--text-light); }

.feld__zuletzt svg { width: 0.95rem; height: 0.95rem; flex: none; }
.feld__zuletzt a { color: inherit; text-decoration: underline; }
.feld__zuletzt a:hover { color: var(--titel); }

/* Der Kostenhinweis auf der Bestaetigungsseite. Offen, nicht zugeklappt:
   Er steht genau an der Stelle, an der der Kunde verbindlich zustimmt -
   und es ist derselbe Text, der danach beim Wunsch gespeichert wird. */
.wunsch__kosten {
    flex-basis: 100%; margin: 0.35rem 0 0;
    padding: 0.6rem 0.75rem; border-radius: 0;
    background: var(--tint-gold-bg); border: 1px solid var(--chip-border);
}
.wunsch__kosten p {
    margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.5;
    color: var(--dark-gray); max-width: 62ch;
}
.wunsch__kosten p:first-child { margin-top: 0; }

/* Standort ganz oben in der Leiste - direkt unter dem Logo. Er entscheidet,
   welche Zahlen der Kunde ueberall sieht, deshalb steht er dort und nicht
   im Fuss. Der Trennstrich unten schliesst ihn gegen die Module ab. */
.sidebar__standort {
    padding: 0 0.75rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.35rem;
}
.sidebar__standort .wechsler__titel { margin-top: 0; }

/* Zahl am rechten Rand einer Modulzeile: was auf den Kunden wartet.
   Zurueckhaltend - sie soll auffallen, wenn man die Leiste ansieht, aber
   nicht von der Beschriftung ablenken. */
.sidebar__zahl {
    margin-left: auto;
    /* Ein ECHTER Kreis (20 x 20, vorher 20 x 19,1) und die Ziffer ueber das
       Raster in die Mitte gesetzt statt ueber die Zeilenhoehe - siehe
       „ZAHL IM KREIS" am Ende dieser Datei. */
    display: inline-grid; place-items: center;
    min-width: 1.25rem; height: 1.25rem;
    padding: 0 0.3125rem;
    /* Die einzige Pille neben dem Schalter: Ein Zaehler ist ein Punkt
       mit Zahl, kein Kasten (Yannick 17.09.2026). */
    border-radius: 999px;
    background: rgba(232, 184, 75, 0.16);
    border: 1px solid rgba(232, 184, 75, 0.32);
    color: var(--accent-color);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    /* Zeilenhoehe = Innenhoehe des Kreises (20px - 2px Rand). Der Browser
       rundet den halben Zeilenabstand AB: Mit `1` oder `1.35` blieb ein
       Bruchteil uebrig, und die Ziffer sass 1,3 px zu hoch (gemessen). Mit
       18px ist der halbe Abstand eine ganze Zahl - nichts zu runden. */
    line-height: calc(1.25rem - 2px);
}
.sidebar__link--aktiv .sidebar__zahl {
    background: rgba(232, 184, 75, 0.24);
    border-color: rgba(232, 184, 75, 0.5);
}

/* Konto im Fuß der Leiste: eine Zeile, die sich zu einem kleinen Menü
   öffnet. Vorher standen hier drei Zeilen für Dinge, die man ein- bis
   zweimal pro Sitzung braucht. */
.konto { position: relative; }
.konto__knopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: none;
    border: 1px solid transparent;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}
.konto__knopf:hover,
.konto--offen .konto__knopf {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
.konto__pfeil { margin-left: auto; opacity: 0.5; transition: var(--transition-fast); }
.konto__pfeil svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.konto--offen .konto__pfeil { opacity: 0.9; }
.konto--offen .konto__pfeil svg { transform: rotate(90deg); }

.konto__menue {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1c2440;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    padding: 4px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.konto__eintrag {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.52rem 0.7rem;
    border-radius: 0;
    text-decoration: none;
    font-size: 0.85rem;
    color: #a7b0cc;
    transition: var(--transition-fast);
}
button.konto__eintrag { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }
.konto__eintrag svg { width: 15px; height: 15px; flex: none; opacity: 0.8; }
.konto__eintrag:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.konto__eintrag--abmelden { color: #d8a0a0; }
.konto__eintrag--abmelden:hover { background: rgba(200, 90, 90, 0.16); color: #ffc9c9; }

/* =====================================================================
   ÜBERSICHT (Startseite)

   Die Seite hat kein festes Raster. Jeder Block erscheint nur, wenn er
   zutrifft; leere Plaetze bleiben leer. Deshalb steht hier nichts, was
   eine feste Hoehe oder eine feste Spaltenzahl erzwingt.

   Der Massstab unter der Strecke ist der Strichmassstab aus unserem
   Logo - ein feiner Strich je Geraet, ein grober alle vier.

   Farben kommen ausschliesslich aus den Token oben, damit der dunkle
   Modus mitlaeuft.
   ===================================================================== */
:root {
    /* Linkfarbe der Uebersicht. Die Markenfarbe direkt zu nehmen geht
       nur im hellen Modus: auf dunklem Grund kommt #41538B auf 2,6:1
       und ist damit unlesbar. */
    --ueb-link: #41538B;
    /* Leises Grau fuer Datum, Rubriken, Zeitangaben. Das Portal-Grau
       (--dark-gray) kommt auf hellem Grund nur auf 3,1:1 - unter dem
       Minimum von 4,5:1 fuer kleine Schrift. #666f85 ist der hellste
       Ton, der besteht (4,57 auf dem Grund, 5,03 auf der Karte). */
    --ueb-leise: #666f85;
    --ueb-s1: #b9c3de;
    --ueb-s2: #8a9bcb;
    --ueb-s3: #5f72ad;
    --ueb-s4: #41538B;
    --ueb-s5: #2d3a61;
}
@media (prefers-color-scheme: dark) {
    :root {
        --ueb-link: #9db0dd;
        --ueb-leise: #98a2bb;
        /* Im Dunkeln heisst "weiter vorn" heller, nicht dunkler. */
        --ueb-s1: #3c4870;
        --ueb-s2: #5f72ad;
        --ueb-s3: #8a9bcb;
        --ueb-s4: #b9c3de;
        --ueb-s5: #d7ddee;
    }
}

/* --- A8 · Ankuendigungsband (auf ALLEN Seiten, siehe seite.php) --- */
.ank {
    display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
    padding: 0.65rem 1rem; margin-bottom: 1.5rem;
    font-size: 0.87rem; line-height: 1.5;
    border-left: 3px solid var(--dark-gray);
    background: var(--pill-bg); color: var(--text-color);
}
.ank--warnung { border-left-color: var(--fehler); background: var(--tint-rot-bg); }
.ank__mk {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--dark-gray); white-space: nowrap;
}
.ank--warnung .ank__mk { color: var(--fehler); }
.ank__text { flex: 1 1 22rem; min-width: 0; }
.ank__bis { margin-left: auto; color: var(--dark-gray); white-space: nowrap; font-size: 0.8rem; }

/* --- Kopfzeile ----------------------------------------------------- */
.ueb-kopf {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    padding-bottom: 0.6rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--linie);
}
.ueb-kopf__datum {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ueb-leise);
}
.ueb-kopf__seit { font-size: 0.8rem; color: var(--text-light); }
.ueb-kopf__wo { margin-left: auto; font-size: 0.8rem; color: var(--ueb-leise); }

/* --- Das Band: Lage links, Einzelheiten rechts --------------------- */
.ueb-band {
    display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: 0 2.4rem; align-items: start; margin-bottom: 1rem;
}
.ueb-band__links, .ueb-band__rechts { min-width: 0; }
/* Die Einzelheiten sind Text und deshalb auf Lesebreite begrenzt - der
   Rest der Spalte blieb dadurch leer. Die Fristen stellen sich daneben,
   statt eine eigene Bildschirmzeile zu beanspruchen. */
.ueb-band__rechts {
    /* `auto` statt fester Breite: Gibt es keine Einzelheiten, faellt die
       Spalte auf null zusammen und die Fristen ruecken nach links -
       sonst stuenden sie am rechten Rand, mit einem Loch davor. */
    /* Anteile statt `auto`: Mit `auto` zog ein langer Artikelname die
       Geraetespalte auf ihre volle Textbreite und quetschte die Fristen
       daneben auf Streichholzbreite (Live-Screenshot Yannick 17.09.2026).
       Die Fristen behalten mindestens 14rem; die Namen brechen um. */
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr);
    gap: 0 2.4rem; align-items: start;
}
/* Keine feste Spaltenzuweisung: Das Raster setzt die Bloecke in der
   Reihenfolge, in der sie dastehen. Ein erzwungenes `grid-column: 2`
   liess die Karte in einer zweiten Spalte kleben, auch wenn es nur
   eine gab - mit einem Loch davor. */
.ueb-band__rechts > .ueb-rang2 { margin-top: 0; }
/* Keine Fristen: Die Einzelheiten bekommen die Spalte allein und reichen
   damit bis zum rechten Rand. */
.ueb-band__rechts--voll { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1500px) {
    .ueb-band__rechts { grid-template-columns: 1fr; }
    .ueb-band__rechts > .ueb-rang2 { margin-top: 1.2rem; }
}
.ueb-band > div > *:last-child { margin-bottom: 0; }

/* --- Rang 1: die Lage ---------------------------------------------- */
.ueb-lage { max-width: 44ch; margin-bottom: 1.2rem; }
.ueb-lage__mk {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--fehler); margin-bottom: 0.5rem;
}
.ueb-lage h1 {
    font-size: 2.4rem; line-height: 1.14; font-weight: 600;
    letter-spacing: -0.035em; color: var(--titel);
}
.ueb-lage h1 em { font-style: normal; color: var(--fehler); }
.ueb-lage__text { margin-top: 1rem; color: var(--text-light); max-width: 46ch; }
.ueb-lage--ruhig { max-width: 40ch; }

.ueb-knopfzeile { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }
.ueb-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 1.1rem; border: 1px solid transparent;
    border-radius: var(--radius-klein);
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    transition: var(--transition-fast);
}
.ueb-knopf--haupt { background: var(--primary-color); color: #fff; }
.ueb-knopf--zweit { background: var(--flaeche); color: var(--titel); border-color: var(--linie-stark); }
.ueb-knopf--zweit:hover { border-color: var(--primary-color); }
.ueb-knopf--haupt:hover { background: var(--primary-dark); }
.ueb-knopf:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* --- Die Geraete des Rang-1-Falls, einzeln ------------------------- */
/* Kein Lesebreiten-Deckel: Die Zeile traegt rechts eine Angabe
   („liegt seit 5 Tagen"), die an den Rand gehoert. Gedeckelt endete sie
   mitten im Bild und die Angabe schwebte in der Mitte. */
.ueb-zeilen { margin-bottom: 1.8rem; border-top: 1px solid var(--linie); }
.ueb-zeile {
    display: flex; align-items: baseline; gap: 1rem;
    padding: 0.7rem 0.4rem 0.7rem 0;
    border-bottom: 1px solid var(--linie-zart);
    font-size: 0.84rem; text-decoration: none; color: inherit;
    transition: var(--transition-fast);
}
.ueb-zeile:hover { background: var(--pill-bg); padding-left: 0.4rem; }
.ueb-zeile__haupt { min-width: 0; }
.ueb-zeile__was {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
    color: var(--titel); font-weight: 600;
}
.ueb-zeile__ref {
    display: block; margin-top: 0.15rem;
    font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ueb-leise);
}
.ueb-zeile__wert { margin-left: auto; color: var(--text-light); white-space: nowrap; }

/* --- Rang 2: hoechstens zwei --------------------------------------- */
.ueb-rang2 {
    /* Zwei feste Spalten. Mit auto-fit zoege eine einzelne Karte ihre
       Trennlinie ueber die ganze Seitenbreite - das sieht aus wie ein
       Fehler, nicht wie eine Meldung. */
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 2rem; margin-top: 1.2rem;
}
.ueb-z2 { border-top: 2px solid var(--primary-color); padding-top: 0.9rem; }
.ueb-z2--signal { border-top-color: var(--fehler); }
.ueb-z2__mk {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ueb-leise);
}
.ueb-z2--signal .ueb-z2__mk { color: var(--fehler); }
.ueb-z2 h2 {
    margin-top: 0.4rem; font-size: 1.25rem; font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.3; color: var(--titel);
}
.ueb-z2__text { margin-top: 0.3rem; font-size: 0.84rem; color: var(--text-light); }
.ueb-z2__ruhig { margin-top: 0.5rem; font-size: 0.84rem; color: var(--text-light); max-width: 40ch; }
.ueb-mehr {
    display: inline-block; margin-top: 0.9rem;
    font-size: 0.82rem; font-weight: 600; color: var(--ueb-link); text-decoration: none;
}
.ueb-mehr:hover { text-decoration: underline; }

/* --- Der Beleg, den dieser Mensch verfolgt (Signal 1b) ------------- */
.ueb-verfolgt {
    display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
    padding: 0.85rem 1.2rem; margin-bottom: 1.4rem;
    background: var(--flaeche); border: 1px solid var(--linie-stark);
    border-left: 3px solid var(--brand-400);
    border-radius: var(--radius-klein);
    text-decoration: none; color: var(--text-color);
    transition: var(--transition-fast);
}
.ueb-verfolgt:hover { border-color: var(--linie-stark); border-left-color: var(--primary-color); }
.ueb-verfolgt__mk {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise); white-space: nowrap;
}
.ueb-verfolgt__titel { font-weight: 600; color: var(--titel); }
.ueb-verfolgt__zustand { font-size: 0.82rem; color: var(--text-light); }
.ueb-verfolgt__pfeil { margin-left: auto; color: var(--ueb-link); font-weight: 600; }

/* --- A1/A2 · Die Geraete bei uns ----------------------------------- */
.ueb-bestand {
    background: var(--flaeche); border: 1px solid var(--linie-stark);
    border-radius: var(--radius); box-shadow: none;
    margin-bottom: 1rem; overflow: hidden;
}
.ueb-bestand__kopf {
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.95rem 1.3rem 0.7rem;
}
.ueb-bestand__z {
    font-size: 1.563rem; font-weight: 600; letter-spacing: -0.02em;
    color: var(--titel); font-variant-numeric: tabular-nums;
}
.ueb-bestand__t { font-size: 0.84rem; font-weight: 400; color: var(--text-light); }
.ueb-bestand__frist { font-size: 0.84rem; color: var(--text-light); }
.ueb-bestand__frist b { color: var(--titel); font-weight: 600; font-variant-numeric: tabular-nums; }
.ueb-reparatur {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 1.3rem; border-top: 1px solid var(--linie-zart);
    font-size: 0.84rem; color: var(--text-light); text-decoration: none;
    transition: var(--transition-fast);
}
.ueb-reparatur:hover { background: var(--pill-bg); }
.ueb-reparatur strong { color: var(--titel); font-variant-numeric: tabular-nums; }
.ueb-reparatur__marke {
    width: 18px; height: 3px; border-radius: 0; flex: none;
    background: var(--gold-lesbar);
}
/* Stillstand ist keine Reparatur - eigene Farbe, damit die beiden
   Zusatzzeilen nicht wie dasselbe aussehen. */
.ueb-reparatur__marke--pause { background: var(--text-faint); }
.ueb-reparatur__pfeil { margin-left: auto; color: var(--ueb-link); font-weight: 600; }
.ueb-bestand__mehr {
    margin-left: auto; font-size: 0.82rem; font-weight: 600;
    color: var(--ueb-link); text-decoration: none;
}
.ueb-bestand__mehr:hover { text-decoration: underline; }

.ueb-strecke { padding: 0 1.3rem 0.8rem; }
.ueb-strecke__bahn {
    display: flex; height: 10px; background: var(--pill-bg);
    border: 1px solid var(--linie); border-radius: 0; overflow: hidden;
}
/* MINDESTENS DREI PIXEL (10.09.2026): Die Breite ist ein Anteil am
   Ganzen. Bei 2000 Messmitteln ist eine Stufe mit einem Geraet 0,05 %
   breit - auf einer 500-Pixel-Bahn ein Viertelpixel, also nichts. Die
   Zahl steht darunter, der Balken zeigte sie nicht. Die Verzerrung ist
   dabei kleiner als das Verschwinden: Drei Pixel sind ein Strich, keine
   Aussage ueber die Menge. */
.ueb-strecke__teil { height: 100%; min-width: 3px; border-right: 1px solid var(--flaeche);
    background: var(--linie-stark); }
.ueb-strecke__teil:last-child { border-right: 0; }
/* Farbe je Prozessstufe, benannt nach dem Quellwert aus `prozess_stufen`
   - NICHT nach der Position. Eine neue Stufe haette sonst saemtliche
   Farben verschoben. Die Grundfarbe oben faengt eine Stufe ab, die hier
   noch keine hat: Sie bekommt dann Grau, nicht die Farbe einer anderen. */
.ueb-strecke__teil--klimatisierung  { background: var(--ueb-s1); }
.ueb-strecke__teil--zugeordnet      { background: var(--ueb-s2); }
.ueb-strecke__teil--in-bearbeitung  { background: var(--ueb-s3); }
.ueb-strecke__teil--versandbereit   { background: var(--ueb-s4); }
.ueb-strecke__teil--warenausgang    { background: var(--ueb-s5); }

.ueb-strecke__skala { position: relative; height: 17px; margin-top: 2px; }
.ueb-strecke__strich {
    position: absolute; top: 0; width: 1px; height: 4px; background: var(--text-faint);
}
.ueb-strecke__strich--grob { height: 8px; background: var(--ueb-leise); }
.ueb-strecke__marke {
    position: absolute; top: 9px; transform: translateX(-50%);
    font-size: 0.68rem; color: var(--ueb-leise); font-variant-numeric: tabular-nums;
}

.ueb-stationen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    border-top: 1px solid var(--linie-zart);
}
.ueb-station {
    padding: 0.6rem 1rem 0.65rem; border-right: 1px solid var(--linie-zart);
    display: flex; flex-direction: column; gap: 0;
}
.ueb-station:last-child { border-right: 0; }
/* Eine Stufe mit Auftraegen ist ein Weg in die gefilterte Liste. Der Link
   erbt die Textfarbe - die Zahl soll eine Zahl bleiben und nicht wie ein
   Link aussehen, bis man darauf zeigt. */
a.ueb-station { text-decoration: none; color: inherit; transition: var(--transition-fast); }
a.ueb-station:hover { background: var(--pill-bg); }
a.ueb-station:hover .ueb-station__b { color: var(--ueb-link); }
a.ueb-station:focus-visible { outline: 2px solid var(--icon); outline-offset: -2px; }
.ueb-station__marke { width: 18px; height: 3px; border-radius: 0; margin-bottom: 0.35rem; }
.ueb-station__marke--klimatisierung  { background: var(--ueb-s1); }
.ueb-station__marke--zugeordnet      { background: var(--ueb-s2); }
.ueb-station__marke--in-bearbeitung  { background: var(--ueb-s3); }
.ueb-station__marke--versandbereit   { background: var(--ueb-s4); }
.ueb-station__marke--warenausgang    { background: var(--ueb-s5); }
.ueb-station__n {
    font-size: 1.563rem; font-weight: 600; letter-spacing: -0.025em;
    line-height: 1.1; color: var(--titel); font-variant-numeric: tabular-nums;
}
.ueb-station__b { font-size: 0.8rem; color: var(--text-color); }
.ueb-station__w { font-size: 0.75rem; color: var(--ueb-leise); min-height: 1.1em; }
.ueb-station--leer .ueb-station__n { color: var(--text-faint); font-weight: 400; }
.ueb-station--leer .ueb-station__b,
.ueb-station--leer .ueb-station__w { color: var(--text-faint); }
.ueb-station--leer .ueb-station__marke { opacity: 0.35; }

/* --- Rang 3: die Liste --------------------------------------------- */
/* Die drei Listen nebeneinander, sobald der Bildschirm es hergibt.
   Mehr Breite hilft nur, wenn sie etwas TRAEGT: einfach breiter werden
   hiesse vier Woerter auf tausend Pixeln. Nebeneinander gestellt spart
   sie dagegen Hoehe - und genau darum geht es. */
/* Breite Spalten statt vieler schmaler: Bei zwei Listen liessen drei
   Spalten die dritte leer stehen. Der Mehrspaltensatz gleicht die Hoehen
   selbst aus, sobald mehr Listen da sind. */
.ueb-spalten { column-width: 36rem; column-gap: 2.4rem; }
.ueb-spalten > .ueb-neben {
    break-inside: avoid; margin-top: 0; margin-bottom: 1.2rem;
}
.ueb-spalten > .ueb-neben:last-child { margin-bottom: 0; }
.ueb-rubrik {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ueb-leise); margin-bottom: 0.55rem;
}
.ueb-n {
    display: flex; align-items: baseline; gap: 0.8rem;
    padding: 0.38rem 0.4rem 0.38rem 0;
    border-bottom: 1px solid var(--linie-zart);
    font-size: 0.84rem; text-decoration: none; color: var(--text-color);
    transition: var(--transition-fast);
}
/* ---- Zeile + Haken ----
   Jede Zeile steckt in einer Huelle, damit der Haken neben ihr stehen
   kann, ohne die Trennlinie zu zerreissen. Deshalb haengt die obere Linie
   an der HUELLE: `.ueb-n:first-of-type` traf sonst jede Zeile, weil jede
   in ihrer Huelle die erste ist. */
.ueb-eintrag { display: flex; align-items: stretch; }
.ueb-eintrag > .ueb-n { flex: 1 1 auto; min-width: 0; }
.ueb-eintrag:first-of-type > .ueb-n,
.ueb-eintrag:first-of-type > .ueb-haken { border-top: 1px solid var(--linie); }

.ueb-haken {
    display: flex; align-items: stretch; flex: none;
    border-bottom: 1px solid var(--linie-zart);
}
/* Immer da, aber leise: Ein Knopf, der erst beim Zeigen erscheint, ist
   auf einem Tastgeraet gar nicht zu finden.
   Er waechst mit der Zeile: Auf dem Telefon laeuft eine Zeile ueber drei
   Reihen, und ein 26 Pixel hoher Knopf daneben waere danebengetippt -
   dann oeffnet sich der Beleg statt den Haken zu setzen. */
.ueb-haken__knopf {
    display: flex; align-items: center; justify-content: center;
    width: 26px; min-height: 26px; padding: 0; margin-left: 0.2rem;
    background: none; border: 0; border-radius: 0; cursor: pointer;
    color: var(--ueb-leise); opacity: 0.45;
    transition: var(--transition-fast);
}
.ueb-haken__knopf svg { width: 13px; height: 13px; }
.ueb-eintrag:hover .ueb-haken__knopf { opacity: 1; }
.ueb-haken__knopf:hover { background: var(--pill-bg); color: var(--haken); opacity: 1; }
.ueb-haken__knopf:focus-visible { outline: 2px solid var(--icon); outline-offset: 1px; opacity: 1; }
.ueb-n:hover { background: var(--pill-bg); padding-left: 0.4rem; }
.ueb-n__pkt {
    width: 5px; height: 5px; flex: none; border-radius: 50%;
    background: var(--ueb-link); transform: translateY(-2px);
}
.ueb-n__pkt--signal { background: var(--fehler); }
.ueb-n__pkt--gut    { background: var(--haken); }
.ueb-n__pkt--wartet { background: var(--gold-lesbar); }
.ueb-n__pkt--lauf   { background: var(--ueb-link); }
.ueb-n strong { color: var(--titel); font-weight: 600; }
.ueb-fuss { margin-top: 0.7rem; font-size: 0.82rem; }
/* Der Rest einer gedeckelten Liste. summary traegt .ueb-fuss und sieht
   damit aus wie der Weg darunter - es ist auch einer, nur ohne Sprung. */
.ueb-mehrliste > summary {
    cursor: pointer; color: var(--ueb-link); font-weight: 600;
    list-style: none; margin-top: 0.7rem; font-size: 0.82rem;
}
.ueb-mehrliste > summary::-webkit-details-marker { display: none; }
.ueb-mehrliste > summary::after { content: ' ›'; }
.ueb-mehrliste[open] > summary::after { content: ' ‹'; }
.ueb-mehrliste > summary:hover { text-decoration: underline; }

/* „Alle zur Kenntnis genommen" - der Sammelhaken eines Blocks.
   Er sieht aus wie der Weg darunter, nicht wie ein Knopf: Er raeumt auf,
   er fuehrt nirgendwohin, und er soll den Blick nicht vor dem Inhalt
   einfangen. Sichtbar wird er erst, wenn man ihn braucht. */
.ueb-alle { margin-top: 0.7rem; }
.ueb-alle__knopf {
    padding: 0; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 0.82rem; color: var(--ueb-leise);
    transition: var(--transition-fast);
}
.ueb-alle__knopf::before { content: '✓ '; }
.ueb-alle__knopf:hover { color: var(--haken); }
.ueb-alle__knopf:focus-visible { outline: 2px solid var(--icon); outline-offset: 2px; }
.ueb-alle__knopf[disabled] { opacity: 0.5; cursor: default; }

/* Aktiver Filter ueber einer Liste */
.filterzeile {
    display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
    margin: 0 0 0.9rem;
}
.filterzeile__text { font-size: 0.84rem; color: var(--text-light); }
.filterzeile__weg {
    margin-left: auto; font-size: 0.82rem; font-weight: 600;
    color: var(--ueb-link); text-decoration: none;
}
.filterzeile__weg:hover { text-decoration: underline; }
.ueb-fuss a { color: var(--ueb-link); text-decoration: none; font-weight: 600; }
.ueb-fuss a:hover { text-decoration: underline; }
.ueb-ruhe {
    margin-bottom: 1rem; padding: 0.8rem 1.2rem;
    background: var(--pill-bg); border-left: 3px solid var(--linie-stark);
    font-size: 0.87rem; color: var(--text-light);
}
.ueb-n__text { min-width: 0; }
.ueb-n__wer { color: var(--ueb-leise); }
/* „neu" seit dem letzten Besuch - klein, ohne Farbsignal: es ist eine
   Auskunft, keine Aufforderung. */
.ueb-neu {
    /* Farbe aus dem Link-Token: `--pill-aktiv-text` kam im dunklen Modus
       nur auf 2,7:1 und war damit unlesbar. */
    display: inline-block; margin-left: 0.3rem; padding: 0 5px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; border-radius: 0;
    border: 1px solid var(--ueb-link); color: var(--ueb-link);
    vertical-align: 0.05em; line-height: 1.5;
}
.ueb-n__zeit {
    margin-left: auto; color: var(--ueb-leise); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- Drei Gewichte statt einem (10.09.2026) ----
   Bis dahin sahen alle Listen gleich aus: beim Scrollen fuenfmal dasselbe
   Muster, und nichts sagte, was davon etwas von einem will. Die Trennung
   folgt derselben Achse wie die Seite selbst - `braucht_sie`:

     fordernd  verlangt eine Entscheidung        (Signalstrich, kraeftiger Titel)
     (ohne)    Planung, weder Forderung noch Rueckblick
     still     ist schon geschehen, fordert nichts

   Bewusst nur Farbe und Gewicht, keine Rahmen oder Flaechen: Die Seite
   lebt von Typografie und Weissraum. */
.ueb-neben--fordernd .ueb-rubrik { color: var(--titel); }
.ueb-neben--fordernd .ueb-rubrik::before {
    content: ''; display: inline-block;
    width: 3px; height: 0.7rem; border-radius: 0;
    margin-right: 0.45rem; vertical-align: -1px;
    background: var(--fehler);
}
/* `--titel` und `--text-color` liegen zwei Prozent auseinander - eine
   Umfaerbung allein war deshalb nicht zu sehen. Was traegt, ist der
   Strichstaerken-Unterschied und der leisere Punkt. */
.ueb-neben--still .ueb-rubrik { opacity: 0.75; }
.ueb-neben--still .ueb-n { font-size: 0.82rem; }
.ueb-neben--still .ueb-n__text   { color: var(--text-light); }
.ueb-neben--still .ueb-n strong  { color: var(--text-color); font-weight: 500; }
.ueb-neben--still .ueb-n__pkt    { opacity: 0.5; }
.ueb-neben--still .ueb-eintrag:first-of-type > .ueb-n,
.ueb-neben--still .ueb-eintrag:first-of-type > .ueb-haken { border-top-color: var(--linie-zart); }

/* 1400 statt 900 (10.09.2026): Die linke Spalte ist mit 30rem fest, und
   von der Fensterbreite gehen Seitenleiste und Rand ab - bei 916 Pixeln
   blieben rechts 64 uebrig, die beiden Fristen standen als
   Buchstabensaeulen da und die Seite lief seitlich ueber. Umbruchpunkte
   muessen sich an dem messen, was UEBRIG bleibt, nicht an der
   Fensterbreite: Zwei Fristen nebeneinander brauchen rund 500 Pixel,
   also 30rem + Abstand + 500 + Seitenleiste. Darunter stehen Lage und
   Fristen untereinander - dort ist Platz genug fuer beide. */
@media (max-width: 1400px) {
    .ueb-band { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
    .ueb-rang2 { grid-template-columns: 1fr; }
    .ueb-lage h1 { font-size: 1.85rem; }
    .ueb-kopf__wo { margin-left: 0; flex-basis: 100%; }
    .ueb-station { border-right: 0; border-bottom: 1px solid var(--linie-zart); }
}
@media print {
    .ueb-knopfzeile, .ueb-mehr, .ueb-bestand__mehr,
    .ueb-alle, .ueb-haken { display: none; }
    .ueb-bestand { box-shadow: none; }
}

/* Die Uebersicht traegt mehr Bloecke als jede andere Seite. Damit sie auf
   einen Bildschirm passt, sitzt sie enger am Rand - die anderen Seiten
   behalten ihre Luft.

   Und sie darf breiter werden. Die 1120 px der uebrigen Seiten sind eine
   LESEREGEL: Fliesstext wird ab etwa 90 Zeichen je Zeile unlesbar. Die
   Uebersicht ist aber kein Fliesstext, sondern Zahlen, kurze Zeilen und
   ein Balken - dort kostet die Grenze nur Platz, den wir in der Hoehe
   wieder aufwenden muessen. Die Textbloecke bleiben trotzdem begrenzt,
   aber dort, wo es hingehoert: an ihnen selbst, in `ch`. */
body:has(.ueb-kopf) .inhalt {
    max-width: none;
    padding-top: 1.2rem; padding-bottom: 1.5rem;
}

/* --- Starthilfe: nur, wenn die Seite sonst kaum etwas traegt ------- */
.ueb-start { margin-top: 1.1rem; }
.ueb-start__reihe {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1rem;
}
.ueb-start__karte {
    display: block; padding: 1rem 1.2rem;
    background: var(--flaeche); border: 1px solid var(--linie-stark);
    border-radius: var(--radius-klein); text-decoration: none;
    transition: var(--transition-fast);
}
.ueb-start__karte:hover { border-color: var(--ueb-link); }
.ueb-start__was {
    display: block; font-weight: 600; color: var(--titel); margin-bottom: 0.25rem;
}
.ueb-start__text { display: block; font-size: 0.84rem; color: var(--text-light); }
.ueb-start__fuss { margin-top: 0.9rem; font-size: 0.84rem; color: var(--text-light); }
.ueb-start__fuss strong { color: var(--titel); }

/* =====================================================================
   ANGEBOTE

   Volle Breite und tabellarisch: Die Liste besteht aus Nummer, Bereich,
   Datum und Betrag - vier Angaben, die untereinander fluchten sollen.
   Als frei fliessende Zeile („Dimensionell · Handmessmittel · Angebot
   vom …") muss das Auge jede Zeile neu absuchen.

   `.seite-breit` hebt die Lesebreite auf. Sie ist eine allgemeine
   Markierung: Jede Seite, die tabellarisch statt textlich ist, kann sie
   setzen.
   ===================================================================== */
/* Breit heisst NICHT unbegrenzt. Ohne Obergrenze zog ein 27-Zoll-Schirm
   jede Karte auf ueber tausend Pixel: vier kurze Zeilen mit einem halben
   Meter Luft dazwischen, eine Positionszeile quer ueber den Tisch
   (Yannick 14.09.2026: „sieht nicht professionell aus"). 1440 px ist die
   Breite, bei der die Listen mit vier Spalten noch fluchten und nichts
   auseinanderfaellt. */
body:has(.seite-breit) .inhalt { max-width: 1440px; }

.listen {
    display: flex; flex-direction: column;
    /* Spaltenbreiten der Liste - jede Seite setzt ihre eigenen ueber einen
       Modifier. Kopfzeile und Zeilen lesen dieselbe Variable, damit sie
       nicht auseinanderlaufen koennen. */
    --listen-spalten: minmax(0, 2.2fr) minmax(0, 1.4fr) 12rem 9rem;
}
/* Auftraege tragen eine Spalte mehr (Fortschritt) und brauchen vorn mehr
   Platz fuer die Abzeichen. */
.listen--auftraege { --listen-spalten: minmax(0, 1.15fr) minmax(0, 1.75fr) minmax(11rem, 0.9fr) 9rem; }
/* Vor-Ort: Der Termin rechts ist ausgeschrieben („13.-22. Juli 2026") und
   braucht mehr Platz als eine Zahl. */
.listen--vorort { --listen-spalten: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(10rem, 0.8fr) 13rem; }
.listen--vorort .listenzeile__summe { white-space: normal; }
/* Reparaturen: Die Nummer steht ungekuerzt (Rep_2026_9900003) und
   braucht vorn mehr Platz als eine Auftragsnummer. */
.listen--reparaturen { --listen-spalten: minmax(0, 1.35fr) minmax(0, 1.6fr) minmax(11rem, 0.9fr) 9rem; }
/* Rechnungen: kein Fortschritt, dafuer zwei Zahlenspalten rechts
   (Faelligkeit, Betrag) - beide fest, damit die Betraege fluchten. */
.listen--rechnungen { --listen-spalten: minmax(0, 1.2fr) minmax(0, 1.4fr) 8rem 10rem; }
/* Botentouren: DREI Spalten - eine Fahrt hat keinen Fortschritt, sondern
   Art, Bezug und Termin. */
.listen--fahrten { --listen-spalten: minmax(0, 1fr) minmax(0, 1.6fr) 11rem; }
/* Botentour mit mehreren Auftraegen an einem Tag: EINE Zeile je Tag, die
   sich aufklappt (Yannick 17.09.2026: "nicht zehn Zeilen fuer einen Tag").
   Ein <details> in der Zeilenhuelle: der Kopf traegt das Zeilenraster, die
   Auftraege stehen darunter, eingerueckt und leiser. Block statt Flex -
   ein <details> als Flex-Container legt seinen Inhalt nicht zuverlaessig. */
details.listenzeile--tour { display: block; }
details.listenzeile--tour:hover { background: none; }
.listenzeile--tour > summary { list-style: none; cursor: pointer; }
.listenzeile--tour > summary::-webkit-details-marker { display: none; }
.listenzeile--tour > summary:hover { background: var(--pill-bg); }
.listenzeile__klapp {
    display: inline-flex; align-self: center; flex: none; color: var(--dark-gray);
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.listenzeile__klapp svg { width: 13px; height: 13px; }
.listenzeile--tour[open] > summary .listenzeile__klapp { transform: rotate(90deg); }
.listenzeile__touren { border-top: 1px solid var(--linie-zart); }
.listenzeile--unter { border-bottom: 1px solid var(--linie-zart); }
.listenzeile--unter:last-child { border-bottom: none; }
.listenzeile--unter > .listenzeile__rumpf { padding: 0.55rem 1rem 0.55rem 2.55rem; }
.listenzeile__wert--leise { font-weight: 500; color: var(--text-light); }
@media (max-width: 900px) {
    .listenzeile--unter > .listenzeile__rumpf { padding-left: 1.6rem; }
}
/* Benutzer: DREI Spalten wie die Botentouren - Name mit Abzeichen, E-Mail
   mit Nebenzeile, rechts die letzte Anmeldung. Keine Knoepfe in der Zeile:
   die Zeile fuehrt zur Seite des Benutzers, dort stehen die Aktionen. */
.listen--zugaenge { --listen-spalten: minmax(0, 1.3fr) minmax(0, 1.5fr) 12rem; }
/* Eine lange E-Mail-Adresse bricht am Zeichen, nicht aus der Spalte. */
.listen--zugaenge .listenzeile__bereich { overflow-wrap: anywhere; }
/* Aktionen im Seitenkopf als Formulare: unsichtbare Huelle, damit die
   Knoepfe wie die Links daneben in der Reihe stehen. */
.seitenkopf__form { display: contents; }

.listen__kopf {
    display: grid; grid-template-columns: var(--listen-spalten);
    gap: 0 1.4rem; padding: 0 1rem 0.5rem;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise);
    border-bottom: 1px solid var(--linie);
}
.listen__kopf-rechts { text-align: right; }

.listenzeile {
    display: flex; align-items: stretch; gap: 0.6rem;
    border-bottom: 1px solid var(--linie-zart);
}
.listenzeile:hover { background: var(--pill-bg); }
.listenzeile__link {
    flex: 1; min-width: 0;
    display: grid; grid-template-columns: var(--listen-spalten);
    gap: 0 1.4rem; align-items: baseline;
    padding: 0.75rem 1rem; text-decoration: none; color: var(--text-color);
}
/* Zeile OHNE eigenes Ziel: Der Fahrdienst hat keine Detailseite - die
   Verweise (Auftrag, Reparatur) stehen in der Zeile, und in der
   Kundensicht auch Formulare. Beides vertraegt kein umschliessendes <a>.
   Gleiches Raster, nur kein Anker - und deshalb auch kein Hover, der ein
   Ziel verspricht. */
.listenzeile__rumpf {
    flex: 1; min-width: 0;
    display: grid; grid-template-columns: var(--listen-spalten);
    gap: 0 1.4rem; align-items: baseline;
    padding: 0.75rem 1rem;
}
.listenzeile--ruhig:hover { background: none; }
/* Kundensicht: Das Anpassen-Formular klappt UNTER der Zeile auf. */
.listenzeile { flex-wrap: wrap; }
.listenzeile__anpassen { flex-basis: 100%; padding: 0 1rem 0.75rem; }

.listenzeile__nr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; min-width: 0; }
.listenzeile__wert { font-weight: 600; color: var(--titel); font-variant-numeric: tabular-nums; }
.listenzeile__marken { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.listenzeile__bereich { font-size: 0.84rem; color: var(--text-light); }
.listenzeile__datum {
    font-size: 0.84rem; color: var(--text-light); font-variant-numeric: tabular-nums;
}
.listenzeile__neben { display: block; font-size: 0.75rem; color: var(--ueb-leise); }
/* Ueberschrittene Frist - dieselbe Farbe wie in der Belegansicht. */
.listenzeile__datum--warnung { color: var(--fehler); font-weight: 600; }
.listenzeile__summe {
    text-align: right; font-variant-numeric: tabular-nums; color: var(--text-light);
}
/* Sichtbar nur dort, wo die Spaltenkoepfe fehlen (Telefon). */
.nur-schmal { display: none; }
/* Gegenstueck dazu: Platzhalter, die es nur in der Tabellenform braucht -
   eine Spalte darf nicht leer bleiben, gestapelt waere der Strich eine
   eigene Zeile ohne Aussage. */
.nur-breit { display: inline; }
@media (max-width: 900px) {
    .nur-schmal { display: inline; }
    .nur-breit { display: none; }
}

/* Fortschritt als eigene Spalte: Balken oben, Stufe darunter. In der
   Zeile steht der Balken damit ueber die ganze Spaltenbreite, statt sich
   wie in der alten Karte mit dem Text eine Zeile zu teilen. */
.listenzeile__fortschritt { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.listenzeile__fortschritt .prozess-mini { max-width: none; width: 100%; }
.listenzeile__fortschritt .prozess-mini__label {
    font-size: 0.78rem; font-weight: 550; white-space: normal;
}
.listenzeile__summe strong { color: var(--titel); }
.listenzeile__aktion {
    display: flex; align-items: center; gap: 0.4rem; padding: 0 1rem 0 0; flex: none;
}

@media (max-width: 900px) {
    .listen__kopf { display: none; }
    .listenzeile { flex-direction: column; align-items: stretch; }
    .listenzeile__link, .listenzeile__rumpf { grid-template-columns: 1fr; gap: 0.25rem; }
    .listenzeile__summe { text-align: left; }
    .listenzeile__aktion { padding: 0 1rem 0.75rem; }
    /* Gestapelt braucht der Balken keine volle Breite mehr - sonst zieht
       er sich ueber das ganze Telefon und wirkt wie ein Trennstrich. */
    .listenzeile__fortschritt { flex-direction: row; align-items: center; gap: 0.7rem; margin-top: 0.3rem; }
    .listenzeile__fortschritt .prozess-mini { max-width: 60%; }
}

/* --- Leerzustand der Angebote --------------------------------------
   Kein Satz in einer leeren Karte: Ueberschrift, ein Satz Erklaerung,
   und Wege zu dem, was es stattdessen gibt. */
/* Seit 14.09.2026 linksbuendig und ruhig (Yannick): dieselbe Flaeche
   wie die Liste, Titel und ein Satz links, die Wege zu den anderen
   Ansichten rechts als schlichte Verweise - kein Banner, keine Kacheln. */
.leerzustand {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem 2.5rem; flex-wrap: wrap;
    background: var(--flaeche); border: 1px solid var(--linie-stark);
    border-radius: var(--radius); box-shadow: none;
    padding: 1.35rem 1.5rem;
}
.leerzustand__haupt { min-width: 0; }
.leerzustand__titel {
    font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--titel);
}
.leerzustand__text { margin: 0.2rem 0 0; font-size: 0.86rem; color: var(--text-light); }
.leerzustand__wege { display: flex; flex-wrap: wrap; gap: 0.35rem 1.4rem; }
.leerzustand__weg {
    font-size: 0.84rem; font-weight: 550; color: var(--ueb-link);
    text-decoration: none; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.leerzustand__weg:hover { text-decoration: underline; }

/* Datei-Auswahl (Liste uebermitteln) im Stil der uebrigen Eingaben. */
.eingabe--datei { padding: 0.45rem 0.6rem; cursor: pointer; }
.eingabe--datei::file-selector-button {
    margin-right: 0.8rem; padding: 0.3rem 0.75rem;
    border: 1px solid var(--linie-stark); border-radius: 0;
    background: var(--flaeche); color: var(--titel);
    font: inherit; font-size: 0.82rem; font-weight: 550; cursor: pointer;
}
.formfeld__zusatz { font-size: 0.76rem; color: var(--ueb-leise); }

/* =====================================================================
   BELEGSEITEN (Angebot, Auftrag) - dieselbe Sprache wie die Listen

   Eine Belegseite bestand aus Karten: Rahmen, Radius, Schatten, jede
   Angabe in ihrem eigenen Kaestchen. Nebeneinandergehalten wirkte die
   Liste aufgeraeumt und der Beleg wie ein Baukasten (Yannick
   14.09.2026: „die Liste sieht professionell aus, die Ansicht von einem
   Angebot nur ok").

   Hier steht deshalb dieselbe Mechanik wie in `.listen`: flache Flaechen,
   duenne Linien, Abschnittsueberschriften in Versalien - und Werte, die
   untereinander fluchten.
   ===================================================================== */
/* Derselbe Abstand nach oben wie vom Seitenkopf: Stehen Hinweise
   dazwischen, faellt deren kleinerer Rand mit diesem zusammen - der
   Beleg beginnt also immer auf derselben Hoehe. */
.beleg { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.9rem; }

/* Abschnittsueberschrift - Zwilling von `.listen__kopf`. */
.beleg__titel {
    display: flex; align-items: baseline; gap: 0.5rem;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise);
    padding-bottom: 0.5rem; margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--linie);
}
.beleg__zaehler {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0;
    color: var(--text-light); font-variant-numeric: tabular-nums;
}

/* Zwei Bloecke nebeneinander (Belegdaten | Referenzen). Ohne Partner
   bleibt der erste schmal, statt sich ueber die Seite zu ziehen. */
.beleg__paar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 2rem 3.5rem;
}
.beleg__paar--eins { grid-template-columns: minmax(0, 32rem); }
@media (max-width: 860px) { .beleg__paar { grid-template-columns: 1fr; } }

/* Eckdaten: Beschriftung klein darueber, Wert gross darunter. Dieselbe
   Rolle wie `.statgruppe`, aber ohne Kasten - der Beleg traegt keine
   Dashboard-Kacheln. */
.eckdaten {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1.2rem 2.5rem;
    padding-bottom: 1.3rem; border-bottom: 1px solid var(--linie);
}
/* Am Telefon zu zweit nebeneinander statt drei- oder viermal
   untereinander - sonst faengt der Beleg erst nach einer Bildschirmhoehe
   an. */
@media (max-width: 560px) {
    .eckdaten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
    .eckdaten__wert { font-size: 1.2rem; }
}
.eckdaten__feld { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.eckdaten__name {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise);
}
.eckdaten__wert {
    font-size: 1.45rem; font-weight: 650; letter-spacing: -0.02em;
    line-height: 1.15; color: var(--titel);
}
.eckdaten__feld--warnung .eckdaten__wert { color: var(--fehler); }
/* Verwaltungs-Uebersicht: „312 von 11.995" - der Bezug klein hinter der Zahl. */
.eckdaten__wert small { font-size: 0.9rem; font-weight: 500; letter-spacing: 0; color: var(--text-light); }
/* Das Portal in Zahlen steht zwischen Band und Spalten - mit Luft nach beiden Seiten. */
/* Arbeitsvorrat der Verwaltung: Bereich | Offen | Aeltester Eingang | Weg. */
.listen--vorrat { --listen-spalten: minmax(0, 1.4fr) 6rem minmax(0, 1fr) 13rem; margin-bottom: 1.6rem; }
.listenzeile__zahl {
    font-size: 1.05rem; font-weight: 650; color: var(--titel); font-variant-numeric: tabular-nums;
}
.listen--vorrat .listenzeile__summe { color: var(--ueb-link); font-weight: 600; }
.ueb-zahlen {
    margin: 1.8rem 0 2rem;
    /* Sechs Zahlen in EINER Reihe ab Schreibtischbreite; am Telefon zu dritt. */
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

/* Datenzeilen: Beschriftung links, Wert rechts daneben, getrennt durch
   dieselbe zarte Linie wie die Listenzeilen.

   Gestylt werden die vorhandenen `.def__zeile`-Kinder - so bleibt
   `zeile()` der EINE Weg, eine Datenzeile zu schreiben, und keine Seite
   braucht einen zweiten Helfer. */
.belegdaten { display: flex; flex-direction: column; }
.belegdaten .def__zeile {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    padding: 0.5rem 0;
}
.belegdaten .def__zeile:last-child { border-bottom: none; padding-bottom: 0.5rem; }
.belegdaten .def__zeile:first-child { padding-top: 0.5rem; }

/* Der Fortschrittsblock einer Belegseite: dieselbe flache Flaeche wie
   die uebrigen Abschnitte, abgeschlossen durch eine Linie. */
.beleg__prozess { padding-bottom: 1.4rem; border-bottom: 1px solid var(--linie); }

/* Bearbeitbare Datenzeilen (Benutzer bearbeiten / einladen): dasselbe
   Raster wie `.belegdaten`, rechts steht ein Feld statt eines Werts. Die
   Felder sind die flachen der Stammdaten - ein Beleg traegt keine
   Kaesten. */
.belegdaten--eingaben .def__zeile { align-items: center; padding: 0.4rem 0; }
.belegdaten--eingaben .def__zeile > label { color: var(--text-light); }
.belegdaten--eingaben .ang__eingabe { max-width: 24rem; }
/* Ein Satz unter der Abschnittsueberschrift, z. B. warum sich die eigenen
   Rechte nicht aendern lassen. */
.beleg__hinweis { font-size: 0.82rem; color: var(--text-light); margin: 0.4rem 0 0.9rem; }
.beleg > section > .kontrollzeile--dunkel { margin-top: 0.8rem; }

/* --- Kopfband der Angebote ------------------------------------------
   Titel, Ansichten und Suche in EINER Zeile. Nur hier - die anderen
   Listen behalten ihren Seitenkopf und ihre Werkzeugleiste. */
.listenband {
    display: grid;
    /* Die Suche haengt rechts und darf breit sein, aber nicht ueber die
       halbe Seite: Ein Eingabefeld von tausend Pixeln sieht nicht mehr
       wie ein Eingabefeld aus. */
    grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    align-items: center; gap: 1rem 2.4rem;
    padding-bottom: 1rem; margin-bottom: 1.2rem;
    border-bottom: 1px solid var(--linie);
}
.listenband__titel h1 {
    font-size: 1.563rem; font-weight: 600; letter-spacing: -0.02em; color: var(--titel);
    line-height: 1.2;
}
/* Eine Zahl unter dem Titel, kein Erklaersatz: die offene Summe ist der
   Grund, aus dem die Rechnungsliste geoeffnet wird. */
.listenband__zusatz {
    margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--text-light);
    font-variant-numeric: tabular-nums;
}
.listenband__tabs { justify-self: start; }
/* `.suche` ist portalweit auf 300 px gedeckelt. Auf einer Seite mit
   hunderten Angeboten ist die Suche das Hauptwerkzeug - hier darf sie
   die Spalte ausfuellen. */
.listenband__suche { justify-self: end; width: 100%; max-width: 34rem; }
.listenband__suche input { font-size: 0.9rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
/* Placeholder ist Kleinschrift auf hellem Grund - das portalweite Grau
   kommt dort nur auf 3,1:1. */
.listenband__suche input::placeholder { color: var(--ueb-leise); }

@media (max-width: 1200px) {
    .listenband {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch; gap: 0.9rem;
    }
    .listenband__tabs, .listenband__suche { justify-self: stretch; }
    /* Vier Reiter sind breiter als ein Telefon: die Leiste scrollt dann
       waagerecht in sich, statt die Seite zu verbreitern. */
    .listenband__tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .listenband__tabs::-webkit-scrollbar { display: none; }
    .listenband__aktion { justify-self: stretch; }
    .listenband__aktion .knopf { width: 100%; }
}

/* --- „Angebot erstellen": Knopf am Bandende ------------------------- */
.listenband__aktion { justify-self: end; }

/* --- Auswahlfenster (natives <dialog>) ------------------------------
   Der Browser bringt Abdunkeln, Escape, Fokusfalle und Mittigkeit mit;
   hier steht nur, wie es aussieht. `::backdrop` erbt keine Variablen vom
   Dokument, deshalb dort feste Werte.

   Eine flache Zeilen-Variante im Muster von `.listenzeile` war am
   11.08.2026 kurz drin und ist wieder raus (Yannick): Die Kacheln
   gefallen ihm besser. */
.dlg {
    /* `margin: auto` MUSS hier stehen: Das globale `* { margin: 0 }` weiter
       oben schlaegt den Browser-Standard fuer <dialog> - ohne diese Zeile
       klebt das Fenster in der linken oberen Ecke. */
    margin: auto;
    width: min(44rem, calc(100vw - 2rem));
    padding: 0; border: 1px solid var(--linie);
    border-radius: var(--radius); background: var(--flaeche);
    color: var(--text-color);
    box-shadow: 0 32px 64px -16px rgba(10, 16, 36, 0.45), var(--lichtkante);
}
.dlg::backdrop { background: rgba(10, 16, 36, 0.55); }
@media (prefers-color-scheme: dark) {
    .dlg::backdrop { background: rgba(0, 0, 0, 0.65); }
}

/* Alles im Fenster teilt EINE linke Kante - Titel, Kacheltitel,
   Beschreibung. Mittig ausgerichtete Fliesstexte in grossen Flaechen
   wirken hingelegt; eine durchgehende Kante gibt dem Ganzen Ruhe. */
.dlg__kopf {
    position: relative;
    padding: 1.5rem 3.5rem 1.1rem 1.9rem;
}
.dlg__titel {
    margin: 0; font-size: 1.125rem; font-weight: 600;
    letter-spacing: -0.015em; color: var(--titel);
}
.dlg__zu {
    position: absolute; top: 1rem; right: 1rem;
    width: 2rem; height: 2rem; display: grid; place-items: center;
    border: 0; background: none; cursor: pointer;
    font-size: 1.4rem; line-height: 1;
    color: var(--dark-gray); border-radius: var(--radius-klein);
    transition: var(--transition-fast);
}
.dlg__zu:hover { color: var(--titel); background: var(--pill-bg); }

/* Fliesstext im Fenster - dort, wo sonst eine Auswahlliste steht.
   Die Knoepfe dazu sitzen im .dlg__fuss, wie in jedem anderen Fenster. */
.dlg__body { padding: 0.2rem 1.9rem 1.25rem; }
.dlg__body .karte__absatz + .karte__absatz { margin-top: 0.6rem; }
.dlg__fuss { gap: 0.6rem; flex-wrap: wrap; }

/* Abgesetzter Fuss des Fensters. */
.dlg__fuss {
    display: flex; padding: 1.15rem 1.9rem 1.4rem;
    border-top: 1px solid var(--linie-zart);
    background: var(--pill-bg); border-radius: 0;
}

@media (max-width: 640px) {
    .dlg__kopf { padding: 1.25rem 3.5rem 0.9rem 1.2rem; }
    .dlg__fuss { padding: 1rem 1.2rem 1.2rem; }
}

/* --- Benachrichtigungen oben rechts ---------------------------------
   Kurze Rueckmeldungen, die einen Seitenwechsel ueberleben: „Ihre Anfrage
   ist bei uns" gehoert auf die Seite, zu der es danach geht, nicht auf
   eine leer geraeumte Liste (Yannick 12.08.2026).

   `position: fixed` und ein hoher Stapelwert - sie sollen ueber allem
   liegen, auch ueber einem offenen Fenster. */
.meldungen {
    position: fixed; top: 1rem; right: 1rem; z-index: 1000;
    display: flex; flex-direction: column; gap: 0.5rem;
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;      /* der Rest der Seite bleibt bedienbar */
}
.meldung {
    pointer-events: auto;
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.75rem 0.85rem 0.75rem 1rem;
    border-radius: var(--radius);
    background: var(--flaeche-hoch);
    border: 1px solid var(--linie);
    box-shadow: 0 10px 30px -12px rgba(16, 24, 48, 0.45);
    font-size: 0.88rem; line-height: 1.5; color: var(--text-color);
    animation: meldung-rein 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Die Art steht als schmaler Streifen links - Farbe, ohne den Text
   einzufaerben. */
.meldung::before {
    content: ''; flex: none; align-self: stretch;
    width: 3px; margin: -0.75rem 0 -0.75rem -1rem;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--erfolg-tief);
}
.meldung--info::before   { background: var(--primary-color); }
.meldung--fehler::before { background: var(--fehler-tief); }

.meldung__text { flex: 1; min-width: 0; padding-left: 0.3rem; }
.meldung__zu {
    flex: none; border: 0; background: none; cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 0 0.15rem;
    color: var(--ueb-leise);
}
.meldung__zu:hover { color: var(--titel); }

/* Ausblenden, wenn die Zeit um ist - die Klasse setzt portal.js. */
.meldung--geht { animation: meldung-raus 0.3s ease-in both; }

@keyframes meldung-rein {
    from { opacity: 0; transform: translateX(1rem); }
    to   { opacity: 1; transform: none; }
}
@keyframes meldung-raus {
    from { opacity: 1; transform: none; max-height: 8rem; }
    to   { opacity: 0; transform: translateX(1rem); max-height: 0; margin-top: -0.5rem; }
}

@media (max-width: 640px) {
    /* Auf dem Telefon ueber die volle Breite - oben rechts waere dort
       ein Streifen von zwei Zentimetern. */
    .meldungen { left: 1rem; right: 1rem; max-width: none; }
}

/* --- Angebot zusammenstellen ----------------------------------------
   Die Positionsliste ist eine flache Zeilenliste wie ueberall im Portal;
   die Artikelauswahl liegt in einem Fenster darueber. */
.zus__liste { display: flex; flex-direction: column; margin: 0 -1.4rem; }

/* DREI SPALTEN, wie die Belegzeilen im Portal: wie viele, was es ist,
   was man damit tun kann. Vorher schoben sich die Teile mit
   `margin-left: auto` gegenseitig zurecht - je nach Zeile anders, und
   nichts stand untereinander (Yannick 12.08.2026). */
.zus__pos {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center; gap: 0 1rem;
    padding: 0.7rem 1.4rem;
    border-top: 1px solid var(--linie-zart);
    transition: var(--transition-fast);
}
.zus__pos:last-child { border-bottom: 1px solid var(--linie-zart); }
/* Dieselbe leise Hervorhebung wie in den Listen - man sieht, in welcher
   Zeile man ist, bevor man auf „Entfernen" drueckt. */
.zus__pos:hover { background: var(--pill-bg); }

.zus__anzahl {
    width: 4.5rem; text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Bei einer Identnummer steht statt des Eingabefeldes eine feste Eins.
   Das „x" dahinter macht aus der nackten Ziffer eine Angabe. */
.zus__anzahl--fest {
    display: flex; align-items: baseline; justify-content: center; gap: 0.1rem;
    color: var(--text-light); font-size: 0.9rem;
}
.zus__mal { color: var(--ueb-leise); font-size: 0.78rem; }

.zus__inhalt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.zus__text { color: var(--titel); font-size: 0.9rem; line-height: 1.4; }
/* Die Nebenzeile traegt Identnummer und Ausfuehrung nebeneinander. */
.zus__zusatz {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    font-size: 0.78rem; color: var(--text-light);
}

.zus__aktionen { display: flex; align-items: center; gap: 0.4rem; }

@media (max-width: 640px) {
    /* Auf dem Telefon untereinander: drei Spalten waeren dort je zwei
       Zentimeter breit. */
    .zus__pos {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: 0.5rem 1rem;
    }
    .zus__aktionen { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Abschliessen ist etwas anderes als Hinzufuegen: Die eine Leiste sitzt
   IN der Karte an der Liste, diese hier darunter, abgesetzt durch Grund
   und Rahmen (Yannick 12.08.2026). */
.zus__abschluss {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 0.9rem; padding: 0.85rem 1.1rem;
    border: 1px solid var(--linie); border-radius: var(--radius);
    background: var(--pill-bg);
}
.zus__abschluss .knopf:last-child { margin-left: auto; }

@media (max-width: 640px) {
    .zus__abschluss { align-items: stretch; }
    .zus__abschluss .knopf:last-child { margin-left: 0; }
}

/* Der Name des Entwurfs - ein Feld in der Knopfleiste, so breit wie
   nötig und nicht breiter. Es steht LINKS bei „Als Entwurf speichern";
   nur „Anfrage senden" rueckt nach rechts (vorher hing das Feld in der
   Mitte der Leiste, Yannick 14.09.2026). */
.zus__name {
    flex: 0 1 14rem; min-width: 8rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--linie); border-radius: var(--radius-klein, 8px);
    background: var(--flaeche-hoch); color: var(--text-color);
    font: inherit; font-size: 0.86rem;
}
.zus__name::placeholder { color: var(--ueb-leise); }
.zus__name:focus {
    outline: none; border-color: rgba(var(--brand-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.14);
}
@media (max-width: 640px) {
    .zus__name { flex: 1 1 100%; }
}

.zus__leiste {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 1.1rem;
}
/* Der unsichtbare Standardknopf fuer die Eingabetaste (siehe Formular). */
.zus__standardknopf { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

/* --- Artikelfenster: eine Frage nach der anderen --------------------
   `display: flex` NUR mit [open]. Ohne das schlaegt die Regel das
   `display: none`, das der Browser einem geschlossenen <dialog> gibt -
   dann steht das Fenster dauerhaft unter der Seite (Yannick 11.08.2026). */
.dlg--wahl[open] { display: flex; flex-direction: column; }
/* Gross genug, um zu arbeiten: Die Antwortlisten koennen bei rund 10.000
   Artikeln lang werden, und die Bezeichnungen sind es ohnehin. */
.dlg--wahl { max-height: 82vh; width: min(46rem, calc(100vw - 2rem)); }

/* Suchzeile: Feld ueber die volle Breite, Knopf daneben.
   `.suche` ist portalweit auf 300 px gedeckelt - hier waere das ein
   Briefmarkenfeld neben viel Leere (Yannick 11.08.2026). */
.dlg__suche {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--linie-zart);
}
.dlg__suche .suche { flex: 1 1 auto; min-width: 0; max-width: none; }
.dlg__suche .knopf { flex: none; }

/* „… steht jetzt in Ihrer Liste" - das Fenster bleibt offen, also muss
   die Rueckmeldung darin stehen. */
.dlg__zugefuegt {
    margin: 0; padding: 0.6rem 1.4rem;
    background: var(--erfolg-hintergrund, var(--pill-aktiv-bg));
    border-bottom: 1px solid var(--linie-zart);
    font-size: 0.84rem; color: var(--text-color);
}
.dlg__zugefuegt strong { color: var(--titel); }

/* Der Weg bis hierher: Gruppe und bisherige Antworten. */
.dlg__pfad {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    margin: 0; padding: 0.7rem 1.4rem;
    border-bottom: 1px solid var(--linie-zart); background: var(--pill-bg);
    font-size: 0.78rem; color: var(--text-light);
}
.dlg__pfad span + span::before { content: "›"; margin-right: 0.4rem; color: var(--ueb-leise); }

.dlg__inhalt { overflow-y: auto; padding: 0.4rem 0 0.6rem; }
.dlg__frage {
    margin: 0; padding: 0.75rem 1.4rem 0.35rem;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise);
}

/* Eine Antwortzeile - flach mit Trennlinie, wie die Listen im Portal. */
.dlg__wahl {
    display: flex; align-items: baseline; gap: 0.55rem; width: 100%;
    padding: 0.5rem 1.4rem; text-align: left;
    border: 0; border-top: 1px solid var(--linie-zart);
    background: none; font: inherit; color: var(--text-color);
    cursor: pointer; transition: var(--transition-fast);
}
.dlg__wahl:hover { background: var(--pill-aktiv-bg); }
.dlg__wahl-inhalt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dlg__wahl-text { font-size: 0.88rem; color: var(--titel); }
/* Die Anzahl gehoert NEBEN den Namen, nicht ans andere Ende der Zeile:
   dort stand eine Ziffer im Nichts, zu der nichts mehr gehoerte. */
.dlg__wahl-zahl {
    flex: none; font-size: 0.76rem; color: var(--ueb-leise);
    font-variant-numeric: tabular-nums;
}
.dlg__wahl-pfeil { margin-left: auto; display: flex; align-self: center; color: var(--ueb-link); }
.dlg__wahl-pfeil svg { width: 15px; height: 15px; transition: var(--transition-fast); }
.dlg__wahl:hover .dlg__wahl-pfeil svg { transform: translateX(2px); }

.dlg__fuss--wahl {
    justify-content: flex-start; gap: 0.5rem;
    padding: 0.9rem 1.4rem; background: var(--pill-bg);
}

@media (max-width: 600px) {
    .dlg__wahl, .dlg__frage, .dlg__pfad, .dlg__fuss--wahl {
        padding-left: 1.1rem; padding-right: 1.1rem;
    }
}

/* Die Antwort auf einen Klick IM Fenster - sonst stünde sie dahinter
   und wäre vom Fenster verdeckt (Yannick 11.08.2026). Sie sitzt oben im
   Inhalt, wo der Blick nach dem Klick ohnehin liegt. */
.dlg__meldung {
    margin: 0; padding: 0.7rem 1.4rem; font-size: 0.88rem; line-height: 1.5;
    border-bottom: 1px solid var(--linie-zart);
}
.dlg__meldung--info    { background: rgba(65, 83, 139, 0.06); color: var(--primary-dark); }
.dlg__meldung--erfolg  { background: #e9f7ef; color: var(--erfolg-tief); }
.dlg__meldung--fehler  { background: var(--fehler-hintergrund); color: var(--fehler-tief); }

@media (max-width: 640px) {
    .dlg__meldung { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* Wie viele Positionen schon dastehen - im Kopf der Karte, nicht als
   eigene Zeile. `.karte__kopf` ist bereits ein Flex-Container. */
.karte__zaehler {
    /* 22px statt 21,6 - ganze Pixel, sonst ist der Kreis keiner. */
    display: inline-grid; place-items: center; min-width: 1.375rem;
    padding: 0 0.4rem; height: 1.375rem; line-height: calc(1.375rem - 1px);
    /* Zaehler = Pille, wie in der Seitenleiste. */
    border-radius: 999px; background: var(--pill-bg); color: var(--ueb-leise);
    font-size: 0.76rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Die Zeitmessung im Auswahlfenster - nur in der Kundensicht sichtbar,
   deshalb bewusst schlicht. */
.dlg__notiz {
    margin: 0; padding: 0.5rem 1.4rem 0.7rem;
    font-size: 0.76rem; line-height: 1.5; color: var(--ueb-leise);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--linie-zart);
}

/* --- Angebot über Identnummern -------------------------------------- */
.ident__zeile { display: flex; align-items: end; gap: 0.7rem; }
.ident__zeile .zus__feld { flex: 1; max-width: 22rem; }
.ident__zeile .knopf { flex: none; }
/* Die Identnummer steht vor der Leistung - sie ist das, was der Kunde
   eingegeben hat, und damit sein Anker in der Liste. */
.ident__nr {
    flex: none; min-width: 7rem;
    font-variant-numeric: tabular-nums; font-weight: 600; color: var(--titel);
}
@media (max-width: 600px) {
    .ident__zeile { flex-direction: column; align-items: stretch; }
    .ident__zeile .zus__feld { max-width: none; }
    .ident__nr { min-width: 0; }
}

/* Die Nummern als Marken nebeneinander: Es sind nur Zahlen, jede
   einzelne braucht keine eigene Zeile. */
.ident__wolke { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ident__marke {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--titel);
    font: inherit; font-size: 0.84rem; font-variant-numeric: tabular-nums;
    cursor: pointer; transition: var(--transition-fast);
}
.ident__marke:hover { border-color: var(--pill-aktiv-border); background: var(--pill-aktiv-bg); }

/* --- Positionstabelle -----------------------------------------------
   Automatisches Layout: Die schmalen Spalten (Menge, Artikel-Nr., Preise)
   bekommen ueber `width: 1%` plus nowrap genau ihre Inhaltsbreite, die
   Bezeichnung den Rest. Feste rem-Breiten mit table-layout: fixed
   drueckten die Bezeichnung in der zweispaltigen Detailansicht auf null
   Pixel (Buchstaben untereinander, gesehen 14.09.2026 bei 1024-1440 px);
   wird es trotzdem eng, scrollt die .tabelle-huelle waagerecht. */
.tabelle--positionen { table-layout: auto; }
.tabelle--positionen th, .tabelle--positionen td { white-space: nowrap; }
.tabelle--positionen .sp-menge, .tabelle--positionen .sp-artikel,
.tabelle--positionen .sp-preis { width: 1%; }
.tabelle--positionen td:nth-child(3), .tabelle--positionen th:nth-child(3),
.tabelle--positionen .tabelle__freitext { white-space: normal; min-width: 14rem; overflow-wrap: anywhere; }
.tabelle--positionen .tnum { font-variant-numeric: tabular-nums; }

/* --- Aktion direkt im Hinweis ---------------------------------------
   .hinweis--info ist bewusst `display: block` (mehrzeilige Fliesstexte).
   Ein Hinweis MIT Aktion braucht aber die Zeile: sonst rutscht der Knopf
   unter den Text und `margin-left: auto` bleibt wirkungslos - im
   gleichfarbigen Kasten uebersieht man ihn dann. */
.hinweis--zeile {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
}
.hinweis--info.hinweis--zeile { display: flex; }
.hinweis__aktion { margin-left: auto; flex: none; }
.hinweis__nachsatz { margin-left: auto; flex: none; color: var(--ueb-leise); font-size: 0.82rem; }

/* Knopf waehrend des Absendens: erkennbar nicht mehr bedienbar. */
.knopf[disabled] { opacity: 0.6; cursor: progress; box-shadow: none; }

/* =====================================================================
   PORTALSUCHE (16.09.2026)

   KEIN Kasten in einer Zeile aus Schrift: Der Kopf der Uebersicht besteht
   aus Kleinkapitael und leisem Text ueber einer Haarlinie. Das Suchfeld
   ist deshalb selbst eine Zeile Text mit Haarlinie darunter - erst der
   Fokus faerbt die Linie in der Hausfarbe.

   Die Vorschlaege sind ein Blatt in der Sprache der Uebersicht:
   Kleinkapitael-Rubrik, Haarlinien zwischen den Zeilen, Bereich als
   Kleinkapitael rechts, Datum in Tabellenziffern - keine abgerundeten
   Kacheln, kein Schatten, der nach Karte aussieht (Yannick 16.09.2026:
   der erste Wurf „sah nach KI-Slop aus").

   Die Ergebnisseite benutzt die Bausteine der Modul-Listen (`.listen`,
   `.listenzeile`, `.tabs`, `.leerzustand`).
   ===================================================================== */
.ueb-kopf__suche { margin-left: auto; flex: 0 1 24rem; min-width: 11rem; max-width: 26rem; }
/* Die Vorschlaege muessen UEBER dem Band darunter liegen. Das Band traegt
   wie der Kopf eine Einblendung (`.anim`), und eine Einblendung mit
   Transform ist ein eigener Stapelkontext - ohne eigene Hoehe malte das
   spaeter kommende Band ueber die Liste. */
.ueb-kopf:has(.ueb-kopf__suche) { position: relative; z-index: 5; }
.ueb-kopf:has(.ueb-kopf__suche) .ueb-kopf__wo { margin-left: 0; }
/* Zwischen 760 und 1380 px passen Datum, Besuch, Feld und Standort nicht
   in eine Zeile. Dann bleibt der Standort am Zeilenende, und das Feld
   rueckt in eine eigene Zeile darunter - rechts, wo es auch oben stand. */
@media (min-width: 761px) and (max-width: 1480px) {
    .ueb-kopf:has(.ueb-kopf__suche) .ueb-kopf__wo { order: 1; margin-left: auto; }
    .ueb-kopf__suche { order: 9; flex: 0 0 24rem; max-width: 24rem; margin-left: auto; }
}
@media (max-width: 760px) {
    /* Zu wenig Platz in der Zeile: eigene Zeile, volle Breite. */
    .ueb-kopf__suche { flex-basis: 100%; max-width: none; order: 9; margin-left: 0; }
}

/* Das Feld: eine Textzeile mit Haarlinie */
.suche--portal input,
.suche--seite input {
    background: none; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--linie); color: var(--text-color);
    transition: border-color 0.15s;
}
.suche--portal input:focus,
.suche--seite input:focus { box-shadow: none; border-bottom-color: var(--icon); }
.suche--portal input::placeholder,
.suche--seite input::placeholder { color: var(--ueb-leise); }
.suche--portal svg,
.suche--seite svg { left: 0; color: var(--ueb-leise); transition: color 0.15s; }
.suche--portal:focus-within svg,
.suche--seite:focus-within svg { color: var(--icon); }

.suche--portal input { padding: 0.15rem 1.4rem 0.3rem 1.35rem; font-size: 0.8rem; }
.suche--portal svg { width: 13px; height: 13px; }

/* Das Blatt mit den Vorschlaegen */
/* Genau so breit wie das Feld - ein Blatt, das links ueber das Feld
   hinausragt, sieht nach Versehen aus (Yannick 16.09.2026). */
.suche__liste {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 0.6rem);
    background: var(--flaeche-hoch, var(--flaeche, #fff));
    border: 1px solid var(--linie-stark);
    box-shadow: 0 18px 36px -26px rgba(16, 24, 48, 0.4);
    text-align: left;
}
.suche__rubrik {
    margin: 0; padding: 0.6rem 0.95rem 0.4rem;
    border-bottom: 1px solid var(--linie);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ueb-leise);
}
.suche__tipp, .suche__leer {
    margin: 0; padding: 0.7rem 0.95rem; font-size: 0.78rem; line-height: 1.5;
    color: var(--text-light);
}
.suche__tipp { color: var(--ueb-leise); }
.suche__treffer {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem;
    align-items: baseline; padding: 0.55rem 0.95rem;
    border-bottom: 1px solid var(--linie-zart);
    text-decoration: none; color: inherit;
}
.suche__treffer:last-child { border-bottom: 0; }
.suche__treffer:hover, .suche__treffer--aktiv { background: var(--pill-bg); }
.suche__titel {
    font-size: 0.84rem; font-weight: 600; color: var(--titel);
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.suche__bereich {
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ueb-leise); white-space: nowrap;
}
.suche__meta {
    grid-column: 1; font-size: 0.76rem; line-height: 1.45;
    color: var(--text-light); overflow-wrap: anywhere;
}
.suche__datum {
    grid-column: 2; font-size: 0.74rem; color: var(--ueb-leise);
    font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.suche__alle {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 0.6rem 0.95rem; border-top: 1px solid var(--linie);
    font-size: 0.78rem; font-weight: 600; color: var(--icon); text-decoration: none;
}
.suche__alle:hover, .suche__alle.suche__treffer--aktiv { background: var(--pill-bg); }
/* Der Suchbegriff im Treffer: leicht getoent, keine Leuchtfarbe. */
.suche__mark { background: var(--tint-gold-bg); color: inherit; border-radius: 0; padding: 0 0.06em; }

/* Ergebnisseite: dasselbe Feld, eine Nummer groesser */
.suche--seite { max-width: 34rem; margin: 0 0 1.3rem; z-index: 5; }
.suche--seite input {
    padding: 0.35rem 1.6rem 0.5rem 1.7rem; font-size: 1.05rem;
    border-bottom-color: var(--linie-stark); color: var(--titel);
}
.suche--seite svg { left: 0.1rem; width: 16px; height: 16px; }
.suche__filter {
    display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: center;
    margin: 0.9rem 0 1.1rem;
}
.suche__filterfeld { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-light); }
.suche__filterfeld select {
    font: inherit; font-size: 0.84rem; padding: 0.35rem 0.6rem;
    border: 1px solid var(--linie-stark); border-radius: 0;
    background: var(--flaeche); color: var(--text-color);
}
.listen--suche { --listen-spalten: minmax(0, 1.35fr) minmax(0, 1.5fr) 11rem 7rem; }
.listen--suche .listenzeile__wert { overflow-wrap: anywhere; }

/* ---------------- Änderungen (Stammdaten-Reiter, Kundenseite der Verwaltung) ----------------
   Dieselbe Liste wie die Module, vier Spalten Wann | Wer | Was | Änderung,
   gegliedert nach Monaten. Folgezeilen eines Vorgangs lassen Wann und Wer
   leer - so liest sich ein Push mit fünf Feldern als EIN Vorgang. */
.listen--aenderungen { --listen-spalten: 7.5rem minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.9fr); }
.listen--aenderungen .listenzeile__rumpf { padding: 0.55rem 1rem; }
.listen__gruppe {
    padding: 1.1rem 1rem 0.4rem; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--titel);
    border-bottom: 1px solid var(--linie);
}
.listenzeile__wer { display: block; min-width: 0; }
.listenzeile__was { min-width: 0; overflow-wrap: anywhere; font-size: 0.86rem; }
.listenzeile__was strong { font-weight: 600; color: var(--titel); }
.listenzeile__wandel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem;
    font-size: 0.86rem; min-width: 0; overflow-wrap: anywhere;
}
.listenzeile--folge { border-top: 0; }
.listenzeile--folge .listenzeile__rumpf { padding-top: 0.15rem; }

/* Filter über der Liste: Urheber als Reiter, Jahre als Knöpfe, Bereiche als Textleiste */
.aend-filter {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 0.6rem 1.2rem; margin: 0 0 0.9rem;
}
.aend-bereiche { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 1rem; font-size: 0.82rem; }
.aend-bereiche a { color: var(--text-light); text-decoration: none; }
.aend-bereiche a:hover { color: var(--titel); }
.aend-bereiche a[aria-current] { color: var(--titel); font-weight: 600; }
.aend-bereiche .tabs__zahl { margin-left: 0.2rem; }
.feld__leer { margin: 0; font-size: 0.86rem; color: var(--dark-gray); }
@media (max-width: 900px) {
    /* Gestapelt zeigt jede Zeile Wann und Wer wieder selbst (nur-schmal). */
    .listenzeile--folge .listenzeile__rumpf { padding-top: 0.55rem; }
}

/* Folgezeilen eines Vorgangs: Zeitpunkt und Name stehen im Markup, damit
   das Skript die erste Zeile neu bestimmen kann - gezeigt werden sie nur
   in der ersten. Gestapelt (Telefon) wieder in jeder. */
.listenzeile--folge .listenzeile__datum, .listenzeile--folge .listenzeile__wer { visibility: hidden; }
@media (max-width: 900px) {
    .listenzeile--folge .listenzeile__datum, .listenzeile--folge .listenzeile__wer { visibility: visible; }
}
/* „Rückgängig" sitzt rechts in der Änderungsspalte. */
.aend-rueck { margin-left: auto; }

/* =====================================================================
   VERWALTUNG: KUNDENLISTE (admin/kunden.php)
   Dieselben Listen-Bausteine wie im Portal. Adressnummer vorn, die
   Knöpfe als letzte SPALTE des Rasters - so stehen Kopf und Zeilen in
   einer Flucht. Die weiteren Standorte eines Kunden klappen unter ihm auf.
   ===================================================================== */
.listen--kunden { --listen-spalten: 9.5rem minmax(0, 2.1fr) minmax(0, 1.1fr) 5rem 13.5rem; }
.listen--kunden .listenzeile__rumpf { align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.listen--kunden .listenzeile__nr { flex-direction: column; align-items: flex-start; gap: 0; }
.listen--kunden .tabelle__aktionen { justify-content: flex-end; }
.listen--kunden .listenzeile--ruhig:hover { background: var(--pill-bg); }
.kunden__null { color: var(--text-faint); }
/* Suchfeld und Zähler in einer Zeile. Tabellenziffern und rechtsbündig: Beim Zählen ändert sich
   die Breite der Zahl - so wackelt weder sie selbst noch irgendetwas daneben. */
.kunden__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 2rem; margin: 0 0 1.3rem; }
.kunden__kopf .suche--seite { flex: 1 1 22rem; margin: 0; }
.kunden__zahl {
    margin: 0 0 0 auto; text-align: right; white-space: nowrap;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ueb-leise);
}
.kunden__zahl strong {
    margin-right: 0.35rem; font-size: 1.55rem; font-weight: 650; letter-spacing: 0; line-height: 1;
    color: var(--titel); font-variant-numeric: tabular-nums;
}
.kunden__ende { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--ueb-leise); }
.nur-vorleser {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.kunden__klapp {
    font-size: 0.74rem; font-weight: 600; color: var(--ueb-link); text-decoration: none; white-space: nowrap;
}
.kunden__klapp:hover { text-decoration: underline; }
.kunden__klapp::after {
    content: ""; display: inline-block; width: 0.32rem; height: 0.32rem; margin-left: 0.4rem; vertical-align: 0.12rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform 0.15s ease;
}
.kunden__klapp[aria-expanded="true"]::after { transform: rotate(-135deg); vertical-align: -0.05rem; }
/* Die aufgeklappten Standorte: ein Strich links hält sie am Kunden fest. Der Einzug des Strichs wird im
   Zeilenrand wieder abgezogen - die Spalten bleiben in der Flucht mit der Zeile darüber. */
.kunden__weitere { margin-left: 0.35rem; border-left: 2px solid var(--linie-stark); }
.kunden__weitere .listenzeile__rumpf { padding-left: calc(1rem - 0.35rem - 2px); }
/* Während die Live-Suche lädt: leicht zurücknehmen - erst nach einem Moment, sonst flackert jede Eingabe. */
[data-livesuche-ziel][aria-busy="true"] { opacity: 0.55; transition: opacity 0.2s 0.15s; }
@media (max-width: 900px) {
    .listen--kunden .listenzeile__summe { text-align: left; }
    .listen--kunden .tabelle__aktionen { justify-content: flex-start; margin-top: 0.3rem; }
}

/* =====================================================================
   VERWALTUNG: EIN STANDORT (admin/kunde.php)
   Zwei Reihen, zwei Spalten: Standort | Benutzer, darunter Support-Zugriffe |
   Änderungen. Links schmal (Angaben, kurze Listen), rechts breit (Listen mit
   mehreren Spalten). Unter 1200 px steht alles untereinander.
   ===================================================================== */
.kd-zurueck { color: inherit; text-decoration: none; }
.kd-zurueck:hover { text-decoration: underline; }
.kd-raster { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: 2.4rem 2.8rem; align-items: start; }
.kd-feld { min-width: 0; }
.kd-feld__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; }
.kd-feld > .def { border-top: 1px solid var(--linie); padding-top: 0.5rem; }
/* In der schmalen Spalte bekäme der Begriff sonst die halbe Breite und die Anschrift bräche dreimal um. */
.kd-feld .def__zeile { grid-template-columns: 7.5rem minmax(0, 1fr); }
.kd-feld .def a { color: var(--ueb-link); text-decoration: none; }
.kd-feld .def a:hover { text-decoration: underline; }
.kd-filter { flex: 0 1 15rem; min-width: 9rem; max-width: 15rem; margin-bottom: 0.45rem; }
.kd-mehr { font-size: 0.74rem; font-weight: 600; color: var(--ueb-link); text-decoration: none; }
.kd-mehr:hover { text-decoration: underline; }
.listen--kdbenutzer { --listen-spalten: minmax(0, 1.7fr) minmax(0, 1.15fr) 10.5rem 1rem; }
.listen--kdbenutzer .listenzeile__rumpf { align-items: center; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.kd-aktionen { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.15rem 1rem 0.9rem; }
.kd-aktionen__knoepfe, .kd-aktionen__passwort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.kd-aktionen__stand { margin-right: 0.5rem; font-size: 0.78rem; color: var(--ueb-leise); }
.kd-aktionen__passwort .eingabe { flex: 1 1 16rem; max-width: 27rem; }
.kd-blaettern { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; margin-top: 0.8rem; }
.kd-blaettern__stand { font-size: 0.78rem; color: var(--ueb-leise); font-variant-numeric: tabular-nums; }
.kd-notiz { display: flex; flex-direction: column; gap: 0.45rem; margin: 1.5rem 0 0; }
.kd-notiz__titel { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ueb-leise); }
.kd-notiz__titel span { margin-left: 0.4rem; font-weight: 500; letter-spacing: 0.03em; text-transform: none; color: var(--text-faint); }
.kd-notiz__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.kd-zugriffe { border-top: 1px solid var(--linie); }
.kd-zugriffe__zeile {
    margin: 0; padding: 0.45rem 0.2rem; font-size: 0.84rem; color: var(--text-color);
    border-bottom: 1px solid var(--linie-zart); overflow-wrap: anywhere;
}
.kd-zwischentitel { margin: 0.9rem 0 0.3rem; font-size: 0.76rem; font-weight: 650; color: var(--titel); }
.kd-fuss { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--ueb-leise); }
/* Änderungen als EINE Zeile je Vorgang (sdp_liste_kompakt): Wann | Wer | Worum es ging | Winkel.
   Aufgeklappt stehen die Werte darunter, eingerückt bis unter "Wer". */
.listen--aendkompakt { --listen-spalten: 7.4rem minmax(0, 0.9fr) minmax(0, 2.1fr) 1rem; }
.listen--aendkompakt .listen__kopf,
.listen--aendkompakt .listenzeile__rumpf { gap: 0 0.9rem; padding-left: 0.3rem; padding-right: 0.3rem; }
.listen--aendkompakt .listenzeile__rumpf { align-items: center; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.aendk { padding: 0 0.3rem 0.7rem calc(7.4rem + 0.9rem + 0.3rem); }
.aendk__zeile {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 0 0.9rem;
    padding: 0.32rem 0; border-top: 1px solid var(--linie-zart); font-size: 0.82rem;
}
@media (max-width: 900px) {
    .aendk { padding-left: 1.2rem; }
    .aendk__zeile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1200px) {
    .kd-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .kd-blaettern { justify-content: flex-start; }
}

/* =====================================================================
   LEITSTAND DER SCHNITTSTELLE (admin/schnittstelle.php)
   Der Verlauf ist Inline-SVG; seine Farben hängen an diesen Klassen,
   damit das dunkle Farbschema mitgeht. Grundsätze:
   - Klein, was nur bestätigt - laut nur, was stört. Eine grüne Lampe ist
     ein Punkt; eine rote pulsiert, und die Gesamtlampe wird zur roten Fläche.
   - Text trägt Textfarbe; farbig sind nur Punkt, Linie und Säule.
   - Haarlinien, keine Schatten, keine Rundungen ausser Punkten.
   ===================================================================== */
/* Bei den Aufrufen stehen die Abschnitte untereinander wie Kapitel - jeder mit derselben Luft davor.
   Der Blick ist dicht gepackt und setzt seine Abstände selbst. */
.leitstand--aufrufe > section { margin-bottom: 2.8rem; }
.leitstand .seitenkopf { margin-bottom: 1.1rem; }
.leitstand .tabs { margin-bottom: 1rem; }
.leitstand .suche { max-width: 30rem; }
.ls-zeit { white-space: nowrap; }
.live-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; }
.live-zeile__takt { color: var(--ueb-leise); }
.live-zeile__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--haken); flex: none; }
.live-zeile--steht .live-zeile__punkt { background: var(--fehler); }
.live-zeile--pause .live-zeile__punkt { background: var(--dark-gray); }
.live-zeile--steht [data-live-takt] { color: var(--fehler); font-weight: 600; }
.live-zeile__knopf {
    font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ueb-link);
    background: none; border: 0; padding: 0 0 0 0.3rem; cursor: pointer;
}
.live-zeile__knopf:hover { text-decoration: underline; }
.ls-notiz { margin: 0 0 0.8rem; max-width: 70ch; font-size: 0.84rem; color: var(--text-light); }
.lage__meldung {
    display: block; margin-top: 0.2rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.72rem; color: var(--ueb-leise); overflow-wrap: anywhere;
}

/* ---------------- Statuslampe ----------------
   Grün = läuft. Gold = ansehen. Rot = Alarm (pulsiert). Hohl = still.
   Gestrichelt = noch nie gekommen / nicht überwacht. Grün mit Ring = von
   einem Menschen überprüft. Das Wort dazu steht immer im aria-label. */
.lampe {
    display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%;
    box-sizing: border-box; background: var(--flaeche); border: 1.5px solid var(--dark-gray);
}
.lampe--ok { background: var(--haken); border-color: var(--haken); }
.lampe--warnung { background: var(--gold-lesbar); border-color: var(--gold-lesbar); }
.lampe--fehler { background: var(--fehler); border-color: var(--fehler); animation: lampe-alarm 1.3s ease-out infinite; }
.lampe--unbekannt, .lampe--aus { border-style: dashed; border-color: var(--text-faint); }
.lampe--geprueft { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3.5px var(--haken); }
@keyframes lampe-alarm {
    0%   { box-shadow: 0 0 0 0 rgba(179, 38, 30, 0.55); }
    100% { box-shadow: 0 0 0 9px rgba(179, 38, 30, 0); }
}

/* ---------------- Gesamtlampe + Kennzahlen ----------------
   Im Normalfall eine ruhige Zeile. Bei Störung die lauteste Fläche der
   ganzen Verwaltung: vollflächig rot - "falls jemals eine Statuslampe rot
   leuchtet: großer Alarm" (Yannick 18.09.2026). Das Rot ist fest, nicht
   `--fehler`: Das helle Rot des dunklen Schemas trüge keine weiße Schrift. */
.ampel {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1.6rem;
    padding: 0.8rem 1.2rem; margin-bottom: 1.4rem;
    background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--haken);
}
.ampel__lampe { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--haken); }
.ampel__text { display: flex; flex-direction: column; flex: 1 1 14rem; min-width: 0; margin: 0; }
.ampel__text strong { font-size: 1.12rem; line-height: 1.25; color: var(--titel); }
.ampel__text span { font-size: 0.82rem; color: var(--text-light); }
.ampel__zahlen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
.ampel__zahlen div { display: flex; flex-direction: column; }
.ampel__zahlen dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ueb-leise); }
.ampel__zahlen dd { margin: 0; font-size: 0.95rem; font-weight: 650; color: var(--titel); font-variant-numeric: tabular-nums; }
.ampel__zahlen small { font-size: 0.72rem; font-weight: 500; color: var(--text-light); }
.ampel--warnung { border-left-color: var(--gold-lesbar); }
.ampel--warnung .ampel__lampe { background: var(--gold-lesbar); }
.ampel--fehler { background: #b3261e; border-color: #b3261e; }
.ampel--fehler .ampel__lampe { background: #fff; animation: ampel-alarm 1.3s ease-out infinite; }
.ampel--fehler .ampel__text strong { font-size: 1.35rem; letter-spacing: 0.02em; }
.ampel--fehler .ampel__text strong, .ampel--fehler .ampel__text span,
.ampel--fehler .ampel__zahlen dt, .ampel--fehler .ampel__zahlen dd, .ampel--fehler .ampel__zahlen small { color: #fff; }
.ampel--fehler .ampel__zahlen dt { opacity: 0.85; }
@keyframes ampel-alarm {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .lampe--fehler, .ampel--fehler .ampel__lampe { animation: none; }
}

/* ---------------- Lampentafel ---------------- */
.tafel {
    display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(3, minmax(0, 1fr));
    gap: 1.2rem 1.6rem; margin-bottom: 1.8rem; align-items: start;
}
.tafel__feld { min-width: 0; }
.tafel__weg { margin-left: 0.4rem; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--text-faint); }
.tafel__lampen { display: grid; gap: 0 1.2rem; border-top: 1px solid var(--linie); }
.tafel__feld--breit .tafel__lampen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg { min-width: 0; border-bottom: 1px solid var(--linie-zart); }
.lg[open] { grid-column: 1 / -1; background: var(--pill-bg); }
.lg__kopf {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.55rem; min-width: 0;
    padding: 0.36rem 0.3rem; font-size: 0.86rem; cursor: pointer; list-style: none;
}
.lg--fest .lg__kopf { cursor: default; }
.lg__kopf::-webkit-details-marker { display: none; }
summary.lg__kopf:hover { background: var(--pill-bg); }
/* Der Winkel hängt am Namen, nicht am Zeilenende - so bleibt er in der ersten Zeile, wenn der Zusatz umbricht. */
summary.lg__kopf .lg__name::after {
    content: ""; display: inline-block; width: 0.34rem; height: 0.34rem; margin-left: 0.5rem; vertical-align: 0.12rem;
    border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint);
    transform: rotate(-45deg); transition: transform 0.15s ease;
}
.lg[open] > summary.lg__kopf .lg__name::after { transform: rotate(45deg); }
.lg__name { white-space: nowrap; color: var(--titel); }
.lg__zusatz { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.lg--fehler .lg__name, .lg--warnung .lg__name { font-weight: 650; }
.lg__wort {
    flex: none; padding: 0.05rem 0.4rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--titel); border: 1px solid var(--linie-stark);
}
.lg--fehler .lg__wort { color: #fff; background: #b3261e; border-color: #b3261e; }
.lg__wort--leise { color: var(--text-light); font-weight: 600; }
.lg__neben { flex: none; font-size: 0.76rem; color: var(--ueb-leise); font-variant-numeric: tabular-nums; }
.lg__rumpf { padding: 0.2rem 0.4rem 0.8rem 1.45rem; font-size: 0.8rem; }
.lg__grund { margin: 0 0 0.5rem; color: var(--text-color); }
.lg__tabelle { width: 100%; border-collapse: collapse; }
.lg__tabelle th {
    padding: 0.2rem 0.5rem 0.25rem 0; text-align: left; font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ueb-leise); border-bottom: 1px solid var(--linie);
}
.lg__tabelle td { padding: 0.28rem 0.5rem 0.28rem 0; vertical-align: top; color: var(--text-light); border-bottom: 1px solid var(--linie-zart); }
.lg__tabelle td:first-child { width: 1.2rem; padding-top: 0.5rem; }
.lg__tabelle .tabelle__rechts { text-align: right; padding-right: 0; }
.lg__tname { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.74rem; color: var(--titel) !important; overflow-wrap: anywhere; }
.lg__meldung { display: block; margin-top: 0.15rem; color: var(--fehler); overflow-wrap: anywhere; }
.lg__angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.4rem 1rem; margin: 0 0 0.5rem; }
.lg__angaben dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ueb-leise); }
.lg__angaben dd { margin: 0; color: var(--titel); }
.lg__fuss { margin: 0.5rem 0 0; color: var(--ueb-leise); }
.lg__fuss a, .ls-mehr, .ls-ruhe a { color: var(--ueb-link); font-weight: 600; text-decoration: none; }
.lg__fuss a:hover, .ls-mehr:hover, .ls-ruhe a:hover { text-decoration: underline; }

/* ---------------- Braucht Aufmerksamkeit | Verlauf + Rückweg ---------------- */
.ls-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4rem 2.2rem; align-items: start; }
.ls-raster__seite { display: grid; gap: 1.3rem; min-width: 0; }
.ls-mehr { margin-left: 0.5rem; letter-spacing: 0.04em; text-transform: none; font-size: 0.74rem; }
.ls-ruhe { margin: 0; padding: 0.45rem 0; font-size: 0.84rem; color: var(--text-light); border-top: 1px solid var(--linie); }
.lsp {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.2rem 0.7rem;
    padding: 0.4rem 0.2rem; border-top: 1px solid var(--linie);
}
.lsp:last-of-type { border-bottom: 1px solid var(--linie); }
.lsp__text { margin: 0; font-size: 0.84rem; color: var(--text-light); }
.lsp__titel { margin-right: 0.3rem; font-weight: 650; color: var(--titel); text-decoration: none; }
.lsp__titel:hover { text-decoration: underline; }
.lsp--fehler .lsp__titel { color: var(--fehler); }
.lsp__wer { display: block; font-size: 0.74rem; color: var(--ueb-leise); }
.lsp__aktionen { display: flex; gap: 0.4rem; align-items: center; }
.lsp__aktionen form { margin: 0; }
.ls-geprueft { margin-top: 0.9rem; }
.ls-geprueft > summary { cursor: pointer; padding: 0.2rem 0; font-size: 0.78rem; font-weight: 600; color: var(--ueb-link); }
.ls-geprueft .lsp { border-top: 1px solid var(--linie-zart); border-bottom: 0; }

/* Rückweg als eine Zeile: Nummer · Kunde · drei Punkte · Stand */
.rwk { border-top: 1px solid var(--linie); }
.rwk__zeile {
    display: grid; grid-template-columns: 8.2rem minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: 0 0.7rem;
    padding: 0.32rem 0.2rem; font-size: 0.8rem; text-decoration: none; color: var(--text-light);
    border-bottom: 1px solid var(--linie-zart);
}
.rwk__zeile:hover { background: var(--pill-bg); }
.rwk__nr { font-weight: 600; color: var(--titel); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rwk__kunde, .rwk__stand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rwk__punkte { display: inline-flex; align-items: center; gap: 0; }
.rwk__punkt {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
    border: 1.5px solid var(--text-faint); background: var(--flaeche);
}
.rwk__punkt + .rwk__punkt { margin-left: 12px; position: relative; }
.rwk__punkt + .rwk__punkt::before {
    content: ""; position: absolute; right: 100%; top: 50%; width: 12px; height: 1.5px; margin-right: 1.5px;
    background: var(--linie-stark); transform: translateY(-50%);
}
.rwk__punkt--da { background: var(--haken); border-color: var(--haken); }
.rwk__punkt--offen { border-color: var(--gold-lesbar); }
.rwk__zeile--haengt .rwk__punkt--offen { border-color: var(--fehler); background: var(--fehler); }
.rwk__zeile--haengt .rwk__stand { color: var(--fehler); font-weight: 600; }

/* Unter 1500 px steht die Datenbank in einer eigenen Zeile über den drei kleinen Feldern -
   nebeneinander würden die Namen der Lampen gequetscht. */
@media (max-width: 1500px) {
    .tafel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tafel__feld--breit { grid-column: 1 / -1; }
    .tafel__feld--breit .tafel__lampen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .tafel, .ls-raster { grid-template-columns: minmax(0, 1fr); }
    .tafel__feld--breit .tafel__lampen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lsp { grid-template-columns: auto minmax(0, 1fr); }
    .lsp__aktionen { grid-column: 2; }
    .rwk__zeile { grid-template-columns: minmax(0, 1fr) auto; }
    .rwk__kunde { grid-column: 1; grid-row: 2; }
    .rwk__stand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .tafel__feld--breit .tafel__lampen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- Verlauf ---------------- */
.graph { margin: 0; }
.graph__legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin: 0 0 0.6rem; font-size: 0.78rem; color: var(--text-light); }
.gr-leg { display: inline-block; width: 10px; height: 10px; margin-right: 0.4rem; }
.gr-leg--fehler { background: var(--fehler); }
.gr-leg--warnung { background: var(--gold-lesbar); }
.gr-leg--alle { background: var(--icon); opacity: 0.55; }
.gr-leg--wochenende { background: var(--pill-bg); border: 1px solid var(--linie-stark); box-sizing: border-box; }
.graph__rahmen { position: relative; overflow-x: auto; }
.graph svg { display: block; width: 100%; min-width: 760px; height: auto; font-family: inherit; }
.gr-titel { font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; fill: var(--ueb-leise); }
.gr-gitter { stroke: var(--linie); stroke-width: 1; }
.gr-gitter--null { stroke: var(--linie-stark); }
.gr-tick { font-size: 10.5px; fill: var(--ueb-leise); font-variant-numeric: tabular-nums; }
.gr-wert { font-size: 11px; font-weight: 650; fill: var(--titel); }
.gr-wochenende { fill: var(--pill-bg); }
.gr-saeule--fehler { fill: var(--fehler); }
.gr-saeule--warnung { fill: var(--gold-lesbar); }
.gr-saeule--alle { fill: var(--icon); opacity: 0.55; }
.gr-treffer { fill: transparent; outline: none; }
.gr-treffer:hover, .gr-treffer:focus { fill: rgba(65, 83, 139, 0.08); }
.graph__tip {
    position: absolute; top: 0.4rem; z-index: 5; min-width: 12rem; padding: 0.5rem 0.7rem;
    background: var(--flaeche-hoch); border: 1px solid var(--linie-stark);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14); font-size: 0.78rem; pointer-events: none;
}
.graph__tip-kopf { display: block; margin-bottom: 0.3rem; color: var(--text-light); }
.graph__tip-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; color: var(--text-light); }
.graph__tip-zeile strong { color: var(--titel); font-variant-numeric: tabular-nums; }
.graph__tip-zeile i { display: inline-block; width: 10px; height: 3px; margin-right: 0.45rem; vertical-align: middle; }
.graph__tabelle { margin-top: 0.7rem; }
/* Die kleine Fassung für den Blick: halbe Breite, keine Mindestbreite, knappe Legende. */
.graph--klein svg { min-width: 0; }
.graph--klein .graph__legende { gap: 0.2rem 0.9rem; margin-bottom: 0.35rem; font-size: 0.72rem; }
.graph--klein .gr-titel { font-size: 9.5px; }
.graph--klein .gr-tick { font-size: 9.5px; }
.graph--klein .gr-wert { font-size: 10px; }
.graph__tabelle summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--ueb-link); }
.graph__tabelle table { margin-top: 0.5rem; }

/* ---------------- Rückweg: drei Schritte je Vorgang ----------------
   Die Klasse heisst .rueckweg und NICHT .schritte - .schritte gehört der
   Zwei-Schritte-Anzeige im Formblatt (formular.php). */
.listen--rueckweg { --listen-spalten: minmax(0, 1fr) minmax(0, 1.2fr) minmax(28rem, 2fr); }
.listen--rueckweg .listenzeile__link { align-items: start; }
.rueckweg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 0.5rem; min-width: 0; }
.rueckweg__schritt {
    display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
    padding-top: 0.4rem; border-top: 2px solid var(--linie-stark);
}
.rueckweg__schritt--da { border-top-color: var(--haken); }
.rueckweg__schritt--offen { border-top-color: var(--gold-lesbar); }
.rueckweg--haengt .rueckweg__schritt--offen { border-top-color: var(--fehler); }
.rueckweg__name { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ueb-leise); }
/* Breit: Die Namen der Schritte stehen im Listenkopf, in der Zeile bleiben sie nur für Vorleser. */
@media (min-width: 901px) {
    .rueckweg__schritt .rueckweg__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .rueckweg__schritt { position: relative; }
}
.rueckweg__zeit { font-size: 0.8rem; color: var(--text-light); font-variant-numeric: tabular-nums; }
.rueckweg__schritt--da .rueckweg__zeit { color: var(--titel); }
.rueckweg--haengt .rueckweg__schritt--offen .rueckweg__zeit { color: var(--fehler); font-weight: 600; }
@media (max-width: 900px) {
    .rueckweg { margin-top: 0.4rem; }
}

/* =====================================================================
   ZAHL IM KREIS - optische Mitte (Yannick 19.09.2026: „nicht mittig")

   Rechnerisch stand die Ziffer schon in der Mitte - gesehen hat man es
   anders, aus drei Gruenden:
     1. Der Kreis war keiner (20 x 19,1 px) und sass auf Bruchteil-Pixeln.
     2. Die Hoehe kam aus der Zeilenhoehe; die Ziffer sass 1,3 px zu hoch
        (der Browser rundet den halben Zeilenabstand ab).
     3. Die „1" von Inter traegt ihre Fahne LINKS. Ihr Strich - das, was das
        Auge als Ziffer liest - liegt 0,07 em rechts von der Mitte ihres
        Platzes. In einem 20-px-Kreis sieht man das.
   1 und 2 sind an den Kreisen selbst behoben (ganze Pixel, Zeilenhoehe =
   Innenhoehe). DIE REGEL DAZU: Der Browser rundet den halben Zeilenabstand
   ab. Bleibt zwischen Zeilenhoehe und Schrifthoehe eine ungerade Zahl, sitzt
   die Ziffer bis zu 1 px zu hoch. Deshalb tragen die Kreise eine
   Zeilenhoehe in ganzen Pixeln, die zur Schrift passt (Innenhoehe oder
   Innenhoehe - 1px) - nachgemessen bei 100 %, Abweichung danach < 0,3 px.
   3 gleicht diese Klasse aus: Zahlen, die NUR aus Einsen
   bestehen („1", „11"), ruecken um 0,05 em nach links - zwischen Strich und
   Schwerpunkt der Ziffer. Alle anderen Ziffern
   liegen unter 0,03 em und bleiben, wo sie sind. Vergeben wird die Klasse
   von zahl_klasse() in lib/seite.php - JEDE Zahl in einem Kreis bekommt sie
   darueber, auch kuenftige.

   Verschoben wird ueber den Innenabstand, nicht ueber transform: Der Kreis
   bleibt stehen, nur die Ziffer wandert. Pillen geben links 0,10 em ab,
   Kreise fester Groesse nehmen rechts 0,10 em dazu - beides schiebt die
   Mitte des Inhalts um die Haelfte davon.
   ===================================================================== */
.sidebar__zahl.zahl-eins  { padding-left: calc(0.3125rem - 0.10em); }
.karte__zaehler.zahl-eins { padding-left: calc(0.4rem - 0.10em); }
.schritte__zahl.zahl-eins,
.wahl__nummer.zahl-eins,
.kalender__tag--heute .kalender__nummer.zahl-eins { padding-right: 0.10em; }

/* =====================================================================
   FEEDBACK (feedback.php, admin/feedback.php - Patch 18)
   .sidebar__unten  der Eintrag „Feedback": fester Block zwischen Navigation und Konto - rollt nicht mit, bleibt also
                auch im niedrigen Fenster sichtbar. Seitlich derselbe Abstand wie .sidebar__nav (aktiver Strich links).
   .fb-wahl     „Fehler melden / Verbesserung vorschlagen": zwei gleich grosse Felder, das gewaehlte traegt
                die Markenfarbe am linken Rand. Ohne :has() bleibt der Punkt des Auswahlknopfs das Zeichen.
   .fb-filter   die beiden Auswahlfelder rechts neben den Reitern der Verwaltung.
   .fb-liste    die Tabelle der Rueckmeldungen (Nummer und Abzeichen ohne Umbruch).
   .fb-eintrag  aufgeklappte Rueckmeldung: links der Text des Kunden, rechts Stand und Notiz.
   ===================================================================== */
.sidebar__unten { flex: none; padding: 0.35rem 0.75rem 0.55rem; }
.sidebar__unten .sidebar__link { font-size: 0.86rem; }

.fb-wahl { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fb-wahl__punkt {
    flex: 1 1 14rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: var(--eingabe-bg);
    border: 1px solid var(--linie-stark);
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition-fast);
}
.fb-wahl__punkt:hover { border-color: var(--icon); }
.fb-wahl__punkt input { flex: none; margin: 0; accent-color: var(--primary-color); }
@supports selector(:has(*)) {
    .fb-wahl__punkt:has(input:checked) { border-color: var(--primary-color); box-shadow: inset 3px 0 0 var(--primary-color); }
    .fb-wahl__punkt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16); }
}

.fb-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.fb-filter .eingabe { width: auto; min-width: 12rem; }

/* Nummer und Abzeichen brechen nicht um: „RM-2026-" / „000049" und „IN" / „ARBEIT" lesen sich sonst wie zwei Angaben. */
.fb-liste .tnum, .fb-liste .abzeichen { white-space: nowrap; }

.fb-eintrag { display: grid; grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr); gap: 1.5rem; padding: 0.4rem 0 0.8rem; }
.fb-eintrag__text .wortlaut__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-eintrag__stand { margin: 0; }
@media (max-width: 900px) { .fb-eintrag { grid-template-columns: 1fr; } }