@font-face {
            font-family: "Figtree";
            font-style: normal;
            font-weight: 300 900;
            font-display: swap;
            src: url("fonts/Figtree-Variable.ttf") format("truetype");
        }
        @font-face {
            font-family: "Open Sans";
            font-style: normal;
            font-weight: 300 800;
            font-display: swap;
            src: url("fonts/OpenSans-Variable.woff2") format("woff2");
        }
        /* Gestaltungs-Variablen: Farben, Glasflächen, Radien. Neue Regeln sollen
           diese Werte nutzen statt fester Farbcodes. */
        :root {
            --text: #0b0b0b;
            --text-2: #52514e;
            --text-meta: #898781;
            --akzent: #3f6b61;          /* Knöpfe/Links – dunkles Salbei, lesbar mit weißer Schrift */
            --akzent-hover: #2c5a4f;
            --akzent-hell: #84a59d;     /* Logo-Salbei für Hervorhebungen */
            --akzent-zart: rgba(63, 107, 97, 0.10);
            --rot: #d93c3b;
            --rot-text: #b3302f;
            --gelb-text: #b06d00;
            --gelb: #e08a00;            /* Dringlichkeits-Balken "zeitnah" */
            --gelb-zart: rgba(255, 247, 230, 0.85);
            --rot-zart: #fdecec;
            --gruen-text: #0e7a55;
            --gruen-zart: rgba(27, 175, 122, 0.12);
            --blau-text: #1f63b5;
            --violett-text: #4a3aa7;
            --orange-text: #b84a1c;
            --cyan-text: #0b6f89;
            --weiss: #fff;
            --grau: #cfcdc6;            /* leere Balken, Trenner, gesperrte Knöpfe */
            --deckend: #fcfcfb;         /* Aufklapplisten und Popups: nie durchscheinend */
            --kontakt-verlauf: linear-gradient(135deg, #dce6e2, #b9ccc6);
            --linie: rgba(0, 0, 0, 0.06);
            --feldrand: rgba(0, 0, 0, 0.10);
            --segment: rgba(118, 118, 128, 0.12);
            --hintergrund: #eef1ee;
            --hintergrund-verlauf:
                radial-gradient(900px 620px at 6% -4%, rgba(132, 165, 157, 0.42), transparent 62%),
                radial-gradient(760px 520px at 100% 6%, rgba(42, 120, 214, 0.13), transparent 60%),
                radial-gradient(820px 600px at 62% 112%, rgba(235, 104, 52, 0.10), transparent 60%);
            --flaeche: rgba(255, 255, 255, 0.72);      /* Inhaltskarten: fast deckend */
            --glas: rgba(255, 255, 255, 0.55);         /* Bedienebene: Navigation, Seitenspalten */
            --glas-rand: rgba(255, 255, 255, 0.85);
            --glas-filter: blur(28px) saturate(170%);
            --schatten-karte: inset 0 1px 0 #fff, 0 8px 28px rgba(38, 52, 47, 0.07);
            --schatten-glas: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 40px rgba(38, 52, 47, 0.10);
            --schatten-schwebend: 0 12px 36px rgba(38, 52, 47, 0.16);
            --radius-karte: 24px;
            --radius-feld: 12px;
        }
        /* "Glas reduzieren" (Profilmenü) bzw. Systemeinstellung: deckende Flächen
           ohne Weichzeichner – schont schwache Rechner und TeamViewer-Verbindungen. */
        html.glas-reduziert {
            --flaeche: #fcfcfb;
            --glas: #fcfcfb;
            --glas-rand: rgba(0, 0, 0, 0.04);
            --glas-filter: none;
            --hintergrund-verlauf: none;
            --hintergrund: #f4f5f2;
        }
        @media (prefers-reduced-transparency: reduce) {
            :root {
                --flaeche: #fcfcfb;
                --glas: #fcfcfb;
                --glas-rand: rgba(0, 0, 0, 0.04);
                --glas-filter: none;
                --hintergrund-verlauf: none;
                --hintergrund: #f4f5f2;
            }
        }
        * { box-sizing: border-box; }
        body {
            background-color: var(--hintergrund);
            background-image: var(--hintergrund-verlauf);
            background-attachment: fixed;
            color: var(--text);
            font-family: "Figtree", "Open Sans", -apple-system, "Segoe UI", Arial, sans-serif;
            font-variant-numeric: tabular-nums;
            -webkit-font-smoothing: antialiased;
            margin: 0;
            min-height: 100vh;
        }
        /* Wiederverwendbare Flächen */
        .glas {
            background: var(--glas);
            backdrop-filter: var(--glas-filter);
            -webkit-backdrop-filter: var(--glas-filter);
            border: 1px solid var(--glas-rand);
            box-shadow: var(--schatten-glas);
        }

        /* App-Rahmen: schwebende Seitenleiste links, Inhalt rechts */
        .app { display: flex; gap: 1.75rem; padding: 1rem 2rem 1rem 1rem; }
        .seitenleiste {
            position: sticky;
            top: 1rem;
            flex: none;
            width: 14.5rem;
            height: calc(100vh - 2rem);
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            padding: 1.25rem 0.85rem 0.85rem;
            border-radius: 26px;
            z-index: 20;
        }
        .seitenleiste .marke { display: block; height: 1.7rem; width: auto; margin: 0.2rem 0.7rem 1.4rem; }
        .seitenleiste-gruppe {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--text-meta);
            padding: 0.9rem 0.75rem 0.35rem;
        }
        .seitenleiste-gruppe:first-of-type { padding-top: 0.2rem; }
        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.62rem 0.75rem;
            border-radius: 13px;
            color: var(--text-2);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .nav-link svg { flex: none; }
        .nav-link-text { flex: 1; }
        .nav-link:hover { background: rgba(255, 255, 255, 0.5); color: var(--text); }
        .nav-link.aktiv {
            background: rgba(255, 255, 255, 0.9);
            color: var(--akzent);
            font-weight: 600;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 var(--weiss);
        }
        .seitenleiste .fuellen { flex: 1; }
        .nav-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.25rem;
            height: 1.25rem;
            padding: 0 0.4rem;
            border-radius: 999px;
            background: var(--rot);
            color: var(--weiss);
            font-size: 0.7rem;
            font-weight: 700;
        }
        .avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: none;
            width: 1.65rem;
            height: 1.65rem;
            border-radius: 50%;
            color: var(--weiss);
            font-size: 0.75rem;
            font-weight: 700;
        }
        .avatar.gross { width: 2.1rem; height: 2.1rem; font-size: 0.9rem; }
        .profilmenue { position: relative; }
        .profilmenue-knopf {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            width: 100%;
            padding: 0.6rem;
            border: 1px solid var(--glas-rand);
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.55);
            color: var(--text);
            font-family: inherit;
            text-align: left;
            cursor: pointer;
        }
        .profilmenue-knopf:hover { background: rgba(255, 255, 255, 0.85); }
        .profilmenue-name { display: flex; flex-direction: column; flex: 1; font-weight: 600; font-size: 0.9rem; }
        .profilmenue-name small { font-weight: 400; font-size: 0.75rem; color: var(--text-meta); }
        .profilmenue-liste {
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(100% + 0.5rem);
            background: var(--deckend);
            border-radius: 16px;
            box-shadow: var(--schatten-schwebend);
            padding: 0.35rem;
            z-index: 30;
        }
        .profilmenue-liste.offen { display: block; }
        .profilmenue-liste form { margin: 0; }
        .profilmenue-eintrag {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.6rem 0.75rem;
            color: var(--text-2);
            text-decoration: none;
            background: none;
            border: none;
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
        }
        .profilmenue-eintrag:hover { background: var(--segment); color: var(--text); }
        .login-seite {
            min-height: calc(100vh - 5rem);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        main { flex: 1; min-width: 0; padding: 1.5rem 0 2.5rem; }
        main.ohne-leiste { padding: 2.5rem 2rem; }
        .inhalt {
            max-width: 84rem;
            margin: 0 auto;
        }
        .karte {
            background: var(--flaeche);
            backdrop-filter: var(--glas-filter);
            -webkit-backdrop-filter: var(--glas-filter);
            border: 1px solid var(--glas-rand);
            border-radius: var(--radius-karte);
            box-shadow: var(--schatten-karte);
            padding: 1.6rem 1.9rem;
            margin-bottom: 1.25rem;
        }
        h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; margin-top: 0; }
        h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
        .meta { color: var(--text-meta); font-size: 0.9rem; }
        a { color: var(--akzent); }
        a:hover { color: var(--akzent-hover); }
        label { font-size: 0.88rem; font-weight: 500; color: var(--text-2); }
        /* Generelle Absicherung: eigene display-Regeln (z. B. auf input/.badge)
           dürfen das hidden-Attribut nie aushebeln – sonst blitzt Verstecktes auf. */
        [hidden] { display: none !important; }
        input, select, textarea {
            display: block;
            margin: 0.35rem 0 1rem;
            padding: 0.6rem 0.8rem;
            border-radius: var(--radius-feld);
            border: 1px solid var(--feldrand);
            background: rgba(255, 255, 255, 0.85);
            color: var(--text);
            width: 100%;
            max-width: 24rem;
            font-family: inherit;
            font-size: 1rem;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--akzent-hell);
            box-shadow: 0 0 0 3px rgba(132, 165, 157, 0.3);
        }
        /* Einzelne Radios/Checkboxen sollen nicht die volle Blockbreite der
           obigen input-Regel erben (siehe REVIEW.md). */
        input[type="radio"], input[type="checkbox"] {
            display: inline-block;
            width: auto;
            max-width: none;
            margin: 0 0.4rem 0 0;
            accent-color: var(--akzent);
        }
        button, .knopf {
            background: var(--akzent);
            color: var(--weiss);
            border: none;
            border-radius: 999px;
            padding: 0.6rem 1.4rem;
            font-family: inherit;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
            transition: background 0.15s ease, transform 0.1s ease;
        }
        button:hover, .knopf:hover { background: var(--akzent-hover); color: var(--weiss); }
        button:active, .knopf:active { transform: scale(0.98); }
        button:focus-visible, .knopf:focus-visible, a:focus-visible {
            outline: 3px solid rgba(132, 165, 157, 0.55);
            outline-offset: 2px;
        }
        /* Zweitrangige Aktion: hell, ohne Farbfläche */
        .knopf.neutral, button.neutral {
            background: var(--segment);
            color: var(--text);
            box-shadow: none;
        }
        .knopf.neutral:hover, button.neutral:hover { background: rgba(118, 118, 128, 0.2); color: var(--text); }
        .nachtragen-zeile { display: flex; align-items: center; gap: 0.6rem; }
        .nachtragen-zeile input { margin: 0.3rem 0; max-width: 14rem; }
        .fehlerbox {
            background: var(--rot-zart);
            border-radius: var(--radius-feld);
            padding: 0.9rem 1.1rem;
            margin-bottom: 1.25rem;
            color: var(--rot-text);
            font-size: 0.92rem;
        }
        .fehlerbox ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
        .fehlerbox p { margin: 0; }
        /* Seitenkopf: Titel links, Hauptaktion rechts */
        .seitenkopf { display: flex; align-items: flex-end; gap: 1rem; margin: 0.4rem 0 1.4rem; }
        .seitenkopf-titel { flex: 1; min-width: 0; }
        .seitenkopf-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .seitenkopf h1 { font-size: 2rem; margin: 0; }
        .seitenkopf-vorzeile { font-size: 0.9rem; font-weight: 500; color: var(--text-2); margin-bottom: 0.2rem; }
        .knopf-mit-symbol { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.3rem 0.7rem 1.05rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(63, 107, 97, 0.3); }
        .nur-vorleser {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
        }

        /* Kennzahl-Kacheln der Übersicht */
        .kennzahlen { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.3fr; gap: 1rem; margin-bottom: 1.25rem; }
        .kachel {
            display: flex; flex-direction: column; gap: 0.35rem;
            padding: 1.15rem 1.35rem;
            border-radius: var(--radius-karte);
            background: var(--glas);
            backdrop-filter: var(--glas-filter);
            -webkit-backdrop-filter: var(--glas-filter);
            border: 1px solid var(--glas-rand);
            box-shadow: var(--schatten-glas);
            color: var(--text);
            text-decoration: none;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        a.kachel:hover { color: var(--text); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--weiss), 0 14px 40px rgba(38, 52, 47, 0.13); }
        .kachel-haupt { background: var(--flaeche); }
        .kachel-haupt.aktiv { box-shadow: 0 0 0 2px var(--akzent-hell), var(--schatten-glas); }
        .kachel-titel { font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
        .kachel-wert { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
        .kachel-unter { font-size: 0.82rem; color: var(--text-meta); }
        .kachel-zeile { display: flex; align-items: baseline; gap: 0.8rem; }
        .kachel-link { font-size: 0.82rem; font-weight: 600; color: var(--akzent); }
        .kachel-warnung { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 600; color: var(--rot-text); }
        .punkt { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--rot); }
        .grosse-zahl { font-size: 3.5rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--akzent); }
        .termin { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.2rem; }
        .kalenderblatt {
            display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
            width: 3.2rem; height: 3.4rem; border-radius: 14px;
            background: rgba(255, 255, 255, 0.9); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
        }
        .kalenderblatt span { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--rot-text); }
        .kalenderblatt strong { font-size: 1.35rem; line-height: 1; }

        /* Liste als eine Karte mit Werkzeugleiste und durchgehenden Zeilen */
        .liste-karte { padding: 0; overflow: hidden; }
        .werkzeugleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 1.05rem 1.35rem 0.9rem; }
        .werkzeugleiste h2 { margin: 0 0.4rem 0 0; font-size: 1.2rem; }
        .werkzeugleiste .fuellen { flex: 1; }
        .werkzeugleiste input, .werkzeugleiste select { margin: 0; }
        .segmente { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--segment); }
        .segment {
            padding: 0.38rem 0.9rem; border-radius: 999px;
            font-size: 0.85rem; font-weight: 500; color: var(--text-2); text-decoration: none;
        }
        .segment:hover { color: var(--text); }
        .segment.aktiv { background: var(--weiss); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
        .segment-zahl { color: var(--text-meta); font-weight: 500; margin-left: 0.15rem; }
        select.kompakt, input.kompakt {
            width: auto; height: 2.2rem; padding: 0 0.8rem;
            border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--text-2);
            background-color: rgba(255, 255, 255, 0.75);
        }
        select.kompakt { padding-right: 0.5rem; }
        input.kompakt[type="date"] { width: 8.2rem; padding: 0 0.6rem; }
        .zeitraum { display: inline-flex; align-items: center; gap: 0.35rem; }
        .suchpille {
            display: inline-flex; align-items: center; gap: 0.45rem;
            height: 2.2rem; padding: 0 0.85rem; border-radius: 999px;
            border: 1px solid var(--feldrand); background: rgba(255, 255, 255, 0.75); color: var(--text-meta);
        }
        .suchpille:focus-within { border-color: var(--akzent-hell); box-shadow: 0 0 0 3px rgba(132, 165, 157, 0.3); }
        .suchpille input { border: none; background: transparent; padding: 0; width: 10.5rem; font-size: 0.88rem; box-shadow: none; }
        .suchpille input:focus { box-shadow: none; }
        .rund-knopf {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 2.2rem; height: 2.2rem; border-radius: 999px;
            border: 1px solid var(--feldrand); background: rgba(255, 255, 255, 0.75); color: var(--text-2);
        }
        .rund-knopf:hover { background: var(--weiss); color: var(--text); }
        .filter-chip {
            display: inline-flex; align-items: center; height: 2.2rem; padding: 0 0.85rem; border-radius: 999px;
            background: var(--akzent-zart); color: var(--akzent); font-size: 0.85rem; font-weight: 600; text-decoration: none;
        }
        .liste-leer { padding: 1rem 1.35rem 1.4rem; margin: 0; }

        .vorgang-grid {
            display: grid;
            grid-template-columns: 1.7fr 2.3fr 1.15fr 1.25fr 1fr 1.1fr 0.75fr;
            gap: 1rem;
            align-items: center;
        }
        .vorgang-kopf {
            padding: 0.5rem 1.5rem;
            margin-bottom: 0.6rem;
            color: var(--text-meta);
            font-size: 0.78rem;
            font-weight: 600;
        }
        .liste-karte .vorgang-kopf {
            margin: 0;
            border-top: 1px solid var(--linie);
            border-bottom: 1px solid var(--linie);
            background: rgba(246, 246, 243, 0.6);
            padding: 0.5rem 1.35rem;
        }
        .vorgang-zeile {
            background: var(--flaeche);
            border-radius: 16px;
            box-shadow: var(--schatten-karte);
            padding: 1rem 1.5rem;
            margin-bottom: 0.65rem;
            cursor: pointer;
            color: var(--text);
            text-decoration: none;
            transition: background 0.12s ease;
        }
        .liste-karte .vorgang-zeile {
            background: transparent;
            border-radius: 0;
            box-shadow: none;
            margin: 0;
            padding: 0.8rem 1.35rem;
            border-bottom: 1px solid var(--linie);
        }
        .liste-karte .vorgang-zeile:last-of-type { border-bottom: none; }
        .vorgang-zeile:hover { background: rgba(255, 255, 255, 0.85); color: var(--text); }
        .vorgang-zeile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--akzent-hell); }
        .vorgang-zeile .lg-nummer { color: var(--akzent); font-weight: 700; font-size: 0.85rem; }
        .vorgang-zeile .lg-nummer.interessent { color: var(--gelb-text); }
        .zelle-stapel { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
        .zelle-haupt { font-weight: 600; }
        .zelle-unter { font-size: 0.84rem; color: var(--text-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .mini-zeile > .zelle-unter { white-space: normal; overflow-wrap: anywhere; }   /* Protokolltexte ganz zeigen */
        .zelle-hinweis { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
        .zelle-kontakt { display: flex; align-items: flex-start; gap: 0.65rem; min-width: 0; }
        .typ-symbol {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 1.75rem; height: 1.75rem; border-radius: 9px; margin-top: 0.05rem;
            background: var(--segment); color: var(--text-2);
        }
        .person { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; min-width: 0; }

        /* Status als Farbpille – Text steht immer dabei, Farbe ist nur Zusatz */
        .status-pill {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.22rem 0.65rem; border-radius: 999px;
            font-size: 0.8rem; font-weight: 600; white-space: nowrap;
            background: var(--segment); color: var(--text-2);
        }
        .status-pill::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
        .status-offen { background: rgba(42, 120, 214, 0.12); color: var(--blau-text); }
        .status-in_bearbeitung { background: rgba(99, 102, 241, 0.13); color: var(--violett-text); }
        .status-angebot_erstellt { background: rgba(27, 175, 122, 0.14); color: var(--gruen-text); }
        .status-rueckruf { background: rgba(235, 104, 52, 0.14); color: var(--orange-text); }
        .status-mail_erwartet { background: rgba(8, 145, 178, 0.13); color: var(--cyan-text); }
        .status-abgeschlossen { background: var(--segment); color: var(--text-2); }

        /* Dringlichkeit als drei Balken plus Text */
        .dringlichkeit { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-2); }
        .balken { display: inline-flex; align-items: flex-end; gap: 2px; }
        .balken i { display: block; width: 4px; border-radius: 2px; background: var(--grau); }
        .balken i:nth-child(1) { height: 7px; }
        .balken i:nth-child(2) { height: 10px; }
        .balken i:nth-child(3) { height: 13px; }
        .d-sehr_dringend .balken i { background: var(--rot); }
        .d-sehr_dringend { color: var(--rot-text); font-weight: 600; }
        .d-zeitnah .balken i:nth-child(-n+2) { background: var(--gelb); }
        .d-mittlere_prioritaet .balken i:nth-child(1) { background: var(--text-meta); }
        .pflicht-stern { color: var(--rot); }
        .liegenschaft-suchfeld-wrapper { position: relative; }
        .liegenschaft-suchfeld-wrapper input { margin-bottom: 0.3rem; }
        .liegenschaft-vorschlaege {
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            background: var(--deckend);
            border: 1px solid var(--feldrand);
            border-radius: var(--radius-feld);
            box-shadow: var(--schatten-schwebend);
            max-height: 18rem;
            overflow-y: auto;
            z-index: 10;
        }
        .liegenschaft-vorschlag {
            display: block;
            width: 100%;
            text-align: left;
            background: none;
            color: var(--text);
            border: none;
            border-radius: 0;
            padding: 0.6rem 0.9rem;
            font-size: 0.92rem;
            font-weight: 400;
        }
        .liegenschaft-vorschlag:hover { background: var(--segment); color: var(--text); }
        button:disabled, .knopf:disabled {
            background: var(--grau);
            cursor: not-allowed;
        }
        .wiedervorlage-ueberfaellig { color: var(--rot-text); font-weight: 600; }
        .wiedervorlage-heute { color: var(--gelb-text); font-weight: 600; }
        .liste-karte .seiten-navigation { margin: 0; padding: 0.85rem 1.35rem; border-top: 1px solid var(--linie); }
        .archiv-details .liste-karte { margin-top: 0.5rem; }
        .seiten-navigation {
            display: flex;
            gap: 1rem;
            align-items: center;
            margin: 1rem 0 1.5rem;
            color: var(--text-2);
            font-size: 0.9rem;
        }
        .archiv-details { margin-top: 1.5rem; }
        .archiv-details summary {
            cursor: pointer;
            color: var(--text-meta);
            font-size: 0.9rem;
            font-weight: 500;
            padding: 0.6rem 0.2rem;
            list-style: none;
        }
        .archiv-details summary::-webkit-details-marker { display: none; }
        .archiv-details summary::before { content: "▸ "; }
        .archiv-details[open] summary::before { content: "▾ "; }
        .archiv-details .vorgang-kopf { margin-top: 0.5rem; }
        .checkliste { margin: 0.5rem 0 1rem; padding: 0; list-style: none; }
        .checkliste-punkt {
            display: flex;
            align-items: center;
            gap: 0.7rem;
            padding: 0.4rem 0;
        }
        .checkliste-punkt form { margin: 0; }
        .checkliste-punkt input[type="checkbox"] { width: auto; margin: 0; }
        .checkliste-punkt-text { flex: 1; }
        .checkliste-punkt.erledigt .checkliste-punkt-text { color: var(--text-meta); text-decoration: line-through; }
        .checkliste-hinzufuegen { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.5rem; }
        .checkliste-hinzufuegen input, .checkliste-hinzufuegen select { margin: 0; max-width: 20rem; width: auto; }
        .checkliste-hinzufuegen button { flex: none; }

        /* ---------- Vorgang-Detail: zwei Spalten ---------- */
        .pfad { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--text-meta); margin-bottom: 0.35rem; }
        .pfad a { color: var(--text-2); text-decoration: none; font-weight: 500; }
        .titelzeile { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
        .titelzeile h1 { font-size: 1.75rem; }
        .lg-marke {
            padding: 0.25rem 0.65rem; border-radius: 9px;
            background: var(--akzent-zart); color: var(--akzent);
            font-size: 0.9rem; font-weight: 700; text-decoration: none;
        }
        .lg-marke.interessent { background: rgba(237, 161, 0, 0.14); color: var(--gelb-text); }
        .seitenkopf-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.45rem 0 0; font-size: 0.9rem; color: var(--text-2); }
        .seitenkopf-meta a { font-weight: 600; text-decoration: none; }
        .trenner { color: var(--grau); }
        .knopf-glas {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.6rem 1.05rem; border-radius: 999px;
            background: var(--glas); color: var(--text);
            backdrop-filter: var(--glas-filter); -webkit-backdrop-filter: var(--glas-filter);
            border: 1px solid var(--glas-rand); box-shadow: inset 0 1px 0 var(--weiss), 0 4px 14px rgba(38, 52, 47, 0.06);
            font-size: 0.9rem;
        }
        .knopf-glas:hover { background: rgba(255, 255, 255, 0.85); color: var(--text); }
        .knopf-glas.gefahr { color: var(--rot-text); }
        .knopf-glas.gefahr:hover { background: var(--rot-zart); color: var(--rot-text); }

        .detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1.25rem; align-items: start; }
        .detail-seite { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }

        .kontaktkarte { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 1rem 1.25rem; }
        .kontakt-avatar {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 2.9rem; height: 2.9rem; border-radius: 50%;
            background: var(--kontakt-verlauf); color: var(--akzent-hover); font-weight: 700;
        }
        .kontakt-avatar.leer { background: var(--segment); color: var(--text-meta); }
        .kontakt-name { flex: 1; min-width: 10rem; }
        .kontakt-aktionen { display: flex; gap: 0.2rem; margin: 0.1rem 0 0 -0.5rem; }
        .kontakt-aktionen .text-knopf { padding: 0.15rem 0.5rem; font-size: 0.82rem; }
        .kontakt-name .zelle-haupt { font-size: 1.05rem; }
        .kontakt-chip {
            display: inline-flex; align-items: center; gap: 0.45rem;
            height: 2.3rem; padding: 0 0.9rem; border-radius: 999px;
            background: var(--segment); color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 500;
        }
        .kontakt-chip.akzent { background: var(--akzent-zart); color: var(--akzent-hover); font-weight: 600; }
        .kontakt-chip:hover { filter: brightness(0.96); color: inherit; }
        .text-knopf, .text-knopf:hover {
            background: none; box-shadow: none; padding: 0.4rem 0.5rem;
            color: var(--akzent); font-size: 0.9rem; font-weight: 600;
        }
        .text-knopf:hover { color: var(--akzent-hover); text-decoration: underline; }
        .karte-titel { margin-top: 0; }
        .formular-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 1rem; }
        .formular-raster input, .formular-raster select { max-width: none; }

        .karte-kopf { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.8rem; }
        .karte-kopf h2 { margin: 0; flex: 1; }
        .verlauf { padding: 1.3rem 1.4rem 0.6rem; }
        .notiz-eingabe {
            background: var(--weiss); border: 1px solid var(--feldrand); border-radius: 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); margin-bottom: 1.3rem;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .notiz-eingabe:focus-within { border-color: var(--akzent-hell); box-shadow: 0 0 0 3px rgba(132, 165, 157, 0.3); }
        .notiz-eingabe textarea {
            border: none; background: transparent; box-shadow: none; margin: 0;
            max-width: none; resize: vertical; padding: 0.85rem 1rem 0.4rem; font-size: 0.98rem;
        }
        .notiz-eingabe textarea:focus { box-shadow: none; }
        .notiz-eingabe-leiste { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.3rem 0.6rem 0.6rem 1rem; }
        .notiz-eingabe-leiste button { padding: 0.45rem 1.1rem; font-size: 0.88rem; }
        .zeitleiste { list-style: none; margin: 0; padding: 0; }
        .zeitleiste-eintrag { display: flex; gap: 0.85rem; position: relative; padding-bottom: 1.1rem; }
        .zeitleiste-eintrag::before {
            content: ""; position: absolute; left: calc(0.95rem - 1px); top: 2.1rem; bottom: 0.2rem;
            width: 2px; background: var(--linie);
        }
        .zeitleiste-eintrag:last-child::before { display: none; }
        .zeitleiste-punkt { width: 1.9rem; height: 1.9rem; font-size: 0.78rem; }
        .protokoll .zeitleiste-punkt {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            border-radius: 50%; background: var(--segment); color: var(--text-meta); font-weight: 700;
        }
        .zeitleiste-inhalt { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; padding-top: 0.15rem; }
        .zeitleiste-inhalt .meta { font-size: 0.82rem; }
        .zeitleiste-inhalt .meta strong { color: var(--text-2); font-weight: 600; }
        .notiz-blase {
            align-self: flex-start; max-width: 100%;
            background: rgba(246, 246, 243, 0.95); border-radius: 4px 14px 14px 14px;
            padding: 0.6rem 0.9rem; line-height: 1.5; overflow-wrap: anywhere;
        }
        .protokoll-text { font-size: 0.9rem; color: var(--text-2); }

        .inspektor { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem; border-radius: var(--radius-karte); }
        .inspektor-feld { display: flex; flex-direction: column; gap: 0.4rem; }
        .inspektor-feld input, .inspektor-feld select { margin: 0; max-width: none; }
        .feld-titel { font-size: 0.72rem; font-weight: 600; color: var(--text-meta); text-transform: uppercase; letter-spacing: 0.05em; }
        .datumsfeld.wiedervorlage-ueberfaellig input { border-color: rgba(217, 60, 59, 0.45); background: rgba(253, 236, 236, 0.85); color: var(--rot-text); font-weight: 600; }
        .datumsfeld.wiedervorlage-heute input { border-color: rgba(237, 161, 0, 0.5); background: rgba(255, 247, 230, 0.9); color: var(--gelb-text); font-weight: 600; }
        .schnellwahl { display: flex; flex-wrap: wrap; gap: 0.35rem; }
        .chip, .chip:hover {
            padding: 0.28rem 0.7rem; border-radius: 999px; box-shadow: none;
            border: 1px solid var(--feldrand); background: rgba(255, 255, 255, 0.8);
            color: var(--text-2); font-size: 0.8rem; font-weight: 500;
        }
        .chip:hover { background: var(--weiss); color: var(--text); }
        .inspektor-speichern { padding: 0.75rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px rgba(63, 107, 97, 0.3); }
        .inspektor .karte-kopf { margin-bottom: 0; }
        .inspektor .karte-kopf h2 { font-size: 1.05rem; }

        .datei-zeile { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem; border-radius: 14px; background: rgba(255, 255, 255, 0.75); }
        .datei-zeile .zelle-stapel { flex: 1; }
        .datei-zeile form { margin: 0; }
        .datei-name { font-weight: 600; font-size: 0.9rem; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .datei-name:hover { text-decoration: underline; }
        .datei-kachel {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 2.3rem; height: 2.3rem; border-radius: 10px;
            background: var(--segment); color: var(--text-2); font-size: 0.66rem; font-weight: 800;
        }
        .endung-pdf { background: rgba(217, 60, 59, 0.12); color: var(--rot-text); }
        .endung-doc, .endung-docx { background: rgba(42, 120, 214, 0.12); color: var(--blau-text); }
        .endung-jpg, .endung-jpeg, .endung-png, .endung-heic, .endung-gif { background: rgba(27, 175, 122, 0.14); color: var(--gruen-text); }
        .entfernen-knopf, .entfernen-knopf:hover {
            width: 1.8rem; height: 1.8rem; padding: 0; border-radius: 50%; box-shadow: none;
            background: transparent; color: var(--text-meta); font-size: 1.15rem; line-height: 1;
        }
        .entfernen-knopf:hover { background: var(--rot-zart); color: var(--rot-text); }
        .ablage {
            position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
            padding: 1rem; border-radius: 14px; text-align: center; cursor: pointer;
            border: 1.5px dashed rgba(63, 107, 97, 0.35); background: rgba(255, 255, 255, 0.35);
        }
        .ablage:hover, .ablage:focus-within { background: rgba(255, 255, 255, 0.7); border-color: var(--akzent); }
        .ablage input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; max-width: none; height: 100%; }
        .ablage-text { font-weight: 600; font-size: 0.9rem; color: var(--akzent); }
        .ablage .meta { font-size: 0.78rem; }
        @media (max-width: 70rem) {
            .detail-layout { grid-template-columns: minmax(0, 1fr); }
            .detail-seite { position: static; }
            .kennzahlen { grid-template-columns: 1fr 1fr; }
        }

        /* ---------- Chat: Unterhaltungen links (Glas), Verlauf rechts (Karte) ---------- */
        .chat-layout {
            display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem;
            height: calc(100vh - 11.5rem); min-height: 30rem;
        }
        .chat-liste {
            display: flex; flex-direction: column; gap: 0.15rem;
            padding: 0.75rem; border-radius: var(--radius-karte); overflow-y: auto;
        }
        .chat-liste-trenner {
            font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
            color: var(--text-meta); padding: 0.9rem 0.6rem 0.35rem;
        }
        .chat-kanal {
            display: flex; align-items: center; gap: 0.7rem; flex: none;
            padding: 0.5rem 0.6rem; border-radius: 14px;
            color: var(--text-2); text-decoration: none; font-size: 0.92rem; font-weight: 500;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .chat-kanal:hover { background: rgba(255, 255, 255, 0.55); color: var(--text); }
        .chat-kanal.aktiv {
            background: rgba(255, 255, 255, 0.9); color: var(--text); font-weight: 600;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 var(--weiss);
        }
        .chat-kanal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chat-kanal .avatar { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }
        .chat-team-symbol {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 1.9rem; height: 1.9rem; border-radius: 50%;
            background: var(--akzent-zart); color: var(--akzent);
        }
        .chat-team-symbol.gross { width: 2.1rem; height: 2.1rem; }

        .chat-verlauf { display: flex; flex-direction: column; min-height: 0; padding: 0; margin: 0; overflow: hidden; }
        .chat-kopf {
            display: flex; align-items: center; gap: 0.75rem; flex: none;
            padding: 0.9rem 1.4rem; border-bottom: 1px solid var(--linie);
        }
        .chat-kopf h2 { margin: 0; font-size: 1.05rem; }
        .chat-kopf .meta { font-size: 0.8rem; }
        .chat-nachrichten {
            flex: 1; min-height: 0; overflow-y: auto;
            display: flex; flex-direction: column; gap: 0.2rem;
            padding: 1rem 1.4rem 1.25rem;
        }
        .chat-aeltere { align-self: center; margin-bottom: 0.5rem; }
        .chat-leer { margin: auto; }
        .chat-tag-trenner { display: flex; justify-content: center; margin: 1rem 0 0.6rem; }
        .chat-tag-trenner span {
            padding: 0.2rem 0.75rem; border-radius: 999px; background: var(--segment);
            color: var(--text-2); font-size: 0.75rem; font-weight: 600;
        }

        .chat-blase { position: relative; display: flex; align-items: flex-end; gap: 0.55rem; max-width: min(34rem, 78%); margin-top: 0.55rem; }
        .chat-blase.folge { margin-top: 0; }
        .chat-blase > .avatar { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; margin-bottom: 1.35rem; }
        .chat-blase.folge > .avatar { visibility: hidden; }
        .chat-blase.eigene { align-self: flex-end; }
        .chat-blase-inhalt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; min-width: 0; }
        .chat-blase.eigene .chat-blase-inhalt { align-items: flex-end; }
        /* Kopf mit Name und Zeit unter der Blase, damit der Text vorne steht */
        .chat-blase-kopf { order: 1; display: flex; align-items: baseline; gap: 0.4rem; padding: 0 0.35rem; font-size: 0.75rem; }
        .chat-blase-name { font-weight: 600; color: var(--text-2); }
        .chat-blase-zeit { color: var(--text-meta); }
        .chat-blase.eigene .chat-blase-name,
        .chat-blase.folge .chat-blase-name {
            position: absolute; width: 1px; height: 1px; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
        }
        .chat-blase-text {
            padding: 0.55rem 0.95rem; border-radius: 18px 18px 18px 6px;
            background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 2px rgba(38, 52, 47, 0.08);
            line-height: 1.45; overflow-wrap: anywhere;
        }
        .chat-blase.eigene .chat-blase-text {
            border-radius: 18px 18px 6px 18px;
            background: var(--akzent); color: var(--weiss); box-shadow: 0 2px 8px rgba(63, 107, 97, 0.22);
        }
        .chat-anhang-bild-link { display: block; line-height: 0; }
        .chat-anhang-bild {
            max-width: min(18rem, 100%); max-height: 16rem; border-radius: 16px;
            box-shadow: 0 2px 10px rgba(38, 52, 47, 0.12);
        }
        .chat-anhang-dokument, .chat-verweis-karte {
            display: flex; align-items: center; gap: 0.7rem; max-width: 100%;
            padding: 0.55rem 0.9rem 0.55rem 0.55rem; border-radius: 16px;
            background: rgba(255, 255, 255, 0.95); border: 1px solid var(--linie);
            box-shadow: 0 1px 2px rgba(38, 52, 47, 0.08);
            color: var(--text); text-decoration: none; font-size: 0.88rem;
            transition: border-color 0.15s ease;
        }
        .chat-anhang-dokument:hover, .chat-verweis-karte:hover { border-color: var(--akzent-hell); color: var(--text); }
        .chat-anhang-text { display: flex; flex-direction: column; min-width: 0; }
        .chat-anhang-text .meta { font-size: 0.78rem; }
        .chat-anhang-geloescht { margin: 0; padding: 0.3rem 0.35rem; font-size: 0.82rem; font-style: italic; color: var(--text-meta); }
        .chat-verweis-karte { justify-content: space-between; padding-left: 0.9rem; }
        .chat-verweis-titel { font-weight: 600; }

        .chat-eingabe { flex: none; padding: 0 1rem 0.7rem; }
        .chat-eingabe .fehlerbox { margin: 0 0 0.6rem; }
        .chat-form {
            display: flex; align-items: flex-end; gap: 0.5rem; margin: 0;
            padding: 0.4rem; border-radius: 24px; box-shadow: var(--schatten-schwebend);
            transition: box-shadow 0.15s ease;
        }
        .chat-form:focus-within { box-shadow: 0 0 0 3px rgba(132, 165, 157, 0.3), var(--schatten-schwebend); }
        .chat-form textarea {
            flex: 1; margin: 0; max-width: none; resize: none;
            min-height: 2.4rem; max-height: 9rem; field-sizing: content;
            padding: 0.55rem 0.4rem; border: none; background: transparent; box-shadow: none; line-height: 1.4;
        }
        .chat-form textarea:focus { outline: none; box-shadow: none; }
        .chat-anhang-knopf { width: 2.4rem; height: 2.4rem; margin: 0; cursor: pointer; }
        .chat-senden { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; }
        .chat-anhang-vorschau {
            display: flex; align-items: center; gap: 0.5rem; width: fit-content; max-width: 100%;
            margin: 0 0 0.5rem 0.4rem; padding: 0.3rem 0.3rem 0.3rem 0.8rem; border-radius: 999px;
            background: var(--akzent-zart); color: var(--akzent-hover); font-size: 0.85rem; font-weight: 600;
        }
        .chat-anhang-vorschau #chat-anhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chat-hinweis { margin: 0.5rem 0 0; text-align: center; font-size: 0.75rem; color: var(--text-meta); }
        @media (max-width: 75rem) {
            .chat-layout { grid-template-columns: 14.5rem minmax(0, 1fr); }
        }
        @media (max-width: 60rem) {
            .chat-layout { grid-template-columns: 1fr; height: auto; }
            .chat-liste { max-height: 14rem; }
            .chat-verlauf { height: 75vh; }
        }

        /* ---------- Neuer Vorgang: nummerierte Abschnitte, Aktionsleiste unten ---------- */
        .abschnitt-kopf { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.1rem; }
        .abschnitt-kopf h2 { margin: 0.1rem 0 0; font-size: 1.1rem; }
        .abschnitt-kopf .meta { margin: 0.2rem 0 0; font-size: 0.85rem; }
        .abschnitt-nr {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 1.75rem; height: 1.75rem; border-radius: 50%;
            background: var(--akzent-zart); color: var(--akzent); font-size: 0.82rem; font-weight: 700;
        }
        .inspektor .abschnitt-kopf { align-items: center; margin-bottom: 0; }
        .inspektor .abschnitt-kopf h2 { flex: 1; margin: 0; font-size: 1.05rem; }
        .liegenschaft-abschnitt { display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.3rem; }
        .liegenschaft-abschnitt .zelle-stapel { flex: 1; gap: 0.3rem; }
        .liegenschaft-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 1.05rem; }
        .vorgang-neu .notiz-eingabe { position: relative; margin: 1.1rem 0 0; }
        .vorgang-neu .notiz-eingabe textarea { min-height: 9rem; padding-bottom: 0.85rem; }
        .kontakt-gewaehlt {
            display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem;
            padding: 0.45rem 0.5rem 0.45rem 0.6rem; border-radius: 14px;
            background: var(--akzent-zart); color: var(--akzent-hover); font-size: 0.9rem;
        }
        .kontakt-gewaehlt .text-knopf { margin-left: auto; }
        .kontakt-gewaehlt-haken {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--akzent); color: var(--weiss); font-size: 0.75rem;
        }
        .dubletten-hinweis {
            display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.1rem;
            padding: 0.85rem 0.9rem; border-radius: 16px;
            background: rgba(255, 247, 230, 0.9); border: 1px solid rgba(237, 161, 0, 0.3);
        }
        .dubletten-hinweis p { margin: 0 0 0.15rem; font-size: 0.9rem; color: var(--text-2); }
        .dubletten-hinweis p strong { color: var(--gelb-text); }
        .dubletten-hinweis > .text-knopf { align-self: flex-start; }
        .dublette { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: 12px; background: rgba(255, 255, 255, 0.85); }
        .dublette .zelle-stapel { flex: 1; }
        .dublette .knopf { padding: 0.4rem 1rem; font-size: 0.85rem; }
        .kontakt-avatar.klein { width: 2.2rem; height: 2.2rem; font-size: 0.8rem; }
        .feld-fehler input, .feld-fehler select { border-color: rgba(217, 60, 59, 0.5); background: rgba(253, 236, 236, 0.6); }
        .feld-fehler .feld-titel, .feld-fehler label { color: var(--rot-text); }
        .feld-fehlertext { margin: -0.7rem 0 0.9rem; font-size: 0.82rem; color: var(--rot-text); }

        /* Radios als Segmente bzw. Personen-Chips: Eingabe bleibt fokussierbar, der
           Rahmen um die Beschriftung zeigt Auswahl und Tastaturfokus. */
        .segmente.auswahl { display: flex; width: fit-content; max-width: 100%; }
        .segmente.auswahl div, .personen-wahl div { display: contents; }
        .segmente.auswahl .segment, .personen-wahl label {
            position: relative; display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer;
        }
        .segmente.auswahl input, .personen-wahl input {
            position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
        }
        .segmente.auswahl .segment:has(input:checked) { background: var(--weiss); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
        .segmente.auswahl .segment:has(input:focus-visible),
        .personen-wahl label:has(input:focus-visible) { outline: 3px solid rgba(132, 165, 157, 0.55); outline-offset: 1px; }
        .segmente.auswahl.raster { display: grid; grid-template-columns: 1fr 1fr; width: auto; border-radius: 16px; }
        .segmente.auswahl.raster .segment { border-radius: 13px; padding: 0.45rem 0.6rem; }
        .personen-wahl { display: flex; flex-wrap: wrap; gap: 0.35rem; }
        .personen-wahl label {
            padding: 0.2rem 0.7rem 0.2rem 0.22rem; border-radius: 999px;
            border: 1px solid var(--feldrand); background: rgba(255, 255, 255, 0.8);
            color: var(--text-2); font-size: 0.84rem; transition: border-color 0.15s ease, background 0.15s ease;
        }
        .personen-wahl label:hover { border-color: var(--akzent-hell); }
        .personen-wahl label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-zart); color: var(--text); font-weight: 600; }
        .personen-wahl .avatar { width: 1.4rem; height: 1.4rem; font-size: 0.68rem; }
        .wiedervorlage-vorschlag { margin: 0; font-size: 0.8rem; }
        .ablage svg { color: var(--akzent); margin-bottom: 0.2rem; }
        .ablage-auswahl { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
        .aktionsleiste {
            grid-column: 1 / -1; position: sticky; bottom: 1rem; z-index: 5;
            display: flex; align-items: center; gap: 0.75rem;
            padding: 0.55rem 0.55rem 0.55rem 1.4rem; border-radius: 999px; box-shadow: var(--schatten-schwebend);
        }
        .aktionsleiste .meta { flex: 1; font-size: 0.84rem; }
        .aktionsleiste .abbrechen { color: var(--text-2); }

        /* ---------- Liegenschaft-Suche: große Suchpille, feste Trefferliste ---------- */
        .such-karte { padding: 1.4rem; }
        .suchpille.gross {
            position: relative; display: flex; height: 3.4rem; padding: 0 1.25rem; gap: 0.75rem;
            background: rgba(255, 255, 255, 0.92); cursor: text;
        }
        .suchpille.gross input { flex: 1; width: auto; max-width: none; margin: 0; font-size: 1.05rem; }
        .treffer-bereich { margin-top: 1rem; }
        .treffer-liste {
            display: flex; flex-direction: column; overflow: hidden;
            border-radius: 16px; border: 1px solid var(--linie); background: rgba(255, 255, 255, 0.55);
        }
        .treffer-zeile, .treffer-zeile:hover {
            display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
            width: 100%; padding: 0.8rem 1.1rem; border-radius: 0; box-shadow: none; transform: none;
            border-bottom: 1px solid var(--linie); background: transparent;
            color: var(--text); font-weight: 500; text-align: left;
        }
        .treffer-zeile:last-child { border-bottom: none; }
        .treffer-zeile:hover { background: rgba(255, 255, 255, 0.9); }
        .treffer-zeile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--akzent-hell); }
        .treffer-zeile[aria-pressed="true"] { background: var(--akzent-zart); }
        .treffer-zeile .lg-marke { justify-self: start; }
        .treffer-adresse { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .treffer-haken {
            display: inline-flex; align-items: center; justify-content: center;
            width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.8rem; opacity: 0;
            background: var(--akzent); color: var(--weiss);
        }
        .treffer-zeile[aria-pressed="true"] .treffer-haken { opacity: 1; }
        .leerzustand { padding: 2rem 1rem 1.6rem; text-align: center; }
        .leerzustand-symbol {
            display: inline-flex; align-items: center; justify-content: center;
            width: 3rem; height: 3rem; border-radius: 50%;
            background: var(--segment); color: var(--text-meta); font-size: 1.2rem; font-weight: 700;
        }
        .leerzustand-titel { margin: 0.7rem 0 0.2rem; font-weight: 600; }
        .leerzustand .meta { margin: 0 auto; max-width: 30rem; }
        .such-fuss {
            display: flex; align-items: center; gap: 1rem;
            margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie);
        }
        .such-auswahl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .interessent-karte { scroll-margin-top: 1rem; }
        a.knopf-glas { text-decoration: none; }
        .interessent-raster { grid-template-columns: minmax(0, 2fr) minmax(6rem, 0.7fr) minmax(0, 1.5fr); }
        @media (max-width: 70rem) {
            .vorgang-neu .segmente.auswahl.raster { grid-template-columns: repeat(4, auto); width: fit-content; }
            .vorgang-neu .datumsfeld input { max-width: 16rem; }
        }

        /* ---------- Kontakte, Hausverwaltungen, Liegenschaft-Detail ---------- */
        .register-reiter { margin: -0.4rem 0 1rem; }
        .register-reiter .segment { padding: 0.42rem 1.1rem; }
        .register-leiste { gap: 0.75rem; padding: 1.1rem 1.35rem 1rem; }
        .register-leiste .suchpille.gross { flex: 1; min-width: 16rem; height: 3rem; }
        .register-leiste label.meta { margin-left: 0.4rem; white-space: nowrap; }
        .register-leiste { position: relative; }
        .register-trefferzeile { display: flex; align-items: center; gap: 0.3rem; margin: -0.3rem 0 0.6rem; padding: 0 1.35rem; font-size: 0.85rem; }
        .kontakt-grid {
            display: grid;
            grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 1.1fr) 4.5rem;
            gap: 1rem;
            align-items: center;
        }
        .hausverwaltung-grid {
            display: grid;
            grid-template-columns: minmax(0, 2.4fr) minmax(0, 2fr) 4.5rem;
            gap: 1rem;
            align-items: center;
        }
        .liegenschaft-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(0, 3.2fr) 4.5rem;
            gap: 1rem;
            align-items: center;
        }
        .liegenschaft-grid.mit-aktion { grid-template-columns: minmax(0, 1.2fr) minmax(0, 3.2fr) 4.5rem 5.5rem; }
        .zahl-spalte { text-align: right; }
        /* Lager */
        .lager-grid {
            display: grid;
            grid-template-columns: 5.5rem minmax(0, 1fr) 4.5rem 6.5rem 17rem 2rem;
            gap: 1rem;
            align-items: center;
        }
        .lager-artikelnummer { font-variant-numeric: tabular-nums; font-weight: 600; }
        .lager-name { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
        .lager-name .meta { font-size: 0.8rem; }
        .lager-wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
        .lager-bestand { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.02rem; }
        .lager-schnell { display: flex; align-items: center; gap: 0.35rem; }
        .lager-schnell input.kompakt { width: 4.6rem; height: 2rem; padding: 0 0.6rem; margin: 0; }
        .lager-grid .register-name { white-space: normal; }
        .lager-grid.register-zeile { padding-top: 0.55rem; padding-bottom: 0.55rem; }
        .register-zeile.lager-rot { background: #fcefee; }
        .register-zeile.lager-blau { background: #edf3fc; }
        .register-zeile.lager-orange { background: #fdf1ea; }
        .register-zeile.lager-gelb { background: #fdf7e3; }
        .register-zeile.lager-gruen { background: #ebf6eb; }
        .register-zeile.lager-grau { background: #f0f0ee; }
        .lager-rot:hover, .lager-blau:hover, .lager-orange:hover, .lager-gelb:hover, .lager-gruen:hover, .lager-grau:hover { filter: brightness(0.98); }
        .lager-schnell button { padding: 0.35rem 0.75rem; font-size: 0.82rem; white-space: nowrap; }
        .lager-stift { width: 2rem; height: 2rem; padding: 0; margin: 0; cursor: pointer; }
        .lager-dialog-hinweis { margin-top: 0.4rem !important; font-size: 0.82rem; }
        .lager-stammdaten { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.55rem 1rem; margin: 0; }
        .lager-stammdaten dt { color: var(--text-meta); font-size: 0.88rem; }
        .lager-stammdaten dd { margin: 0; }
        .abschnitt-kopf .knopf-glas { margin-left: auto; align-self: flex-start; }
        .lager-verlauf-grid {
            display: grid;
            grid-template-columns: 8.5rem 8.5rem 4rem 7rem minmax(0, 1fr);
            gap: 0.9rem;
            align-items: center;
        }
        .lager-wertkacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
        .lager-wertkachel { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; border-radius: var(--radius-karte); background: var(--hintergrund); }
        .lager-wertkachel strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
        .lager-unterkopf { margin: 1.2rem 0 0.4rem; font-size: 0.95rem; }
        .lager-preis-grid {
            display: grid;
            grid-template-columns: 6.5rem 6.5rem 6.5rem 7rem minmax(0, 1fr);
            gap: 0.9rem;
            align-items: center;
        }
        .lager-preis { font-variant-numeric: tabular-nums; font-weight: 600; }
        .lager-menge { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gruen-text); }
        .lager-menge.negativ { color: var(--rot-text); }
        .lager-buchen-form { display: flex; flex-direction: column; gap: 0.5rem; }
        .lager-buchen-form .segmente.auswahl { width: 100%; }
        .lager-buchen-form .segment { flex: 1; text-align: center; }
        .lager-buchen-form button[type="submit"] { align-self: flex-start; margin-top: 0.3rem; }
        .register-zeile { padding: 0.75rem 1.35rem; border-bottom: 1px solid var(--linie); transition: background 0.12s ease; }
        .register-zeile:last-of-type { border-bottom: none; }
        .register-zeile:hover { background: rgba(255, 255, 255, 0.7); }
        .zelle-person { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
        .register-name { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .register-name:hover { color: var(--akzent); text-decoration: underline; }
        .kontakt-avatar.eckig { border-radius: 11px; }
        .kontakt-wege { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; min-width: 0; }
        .kontakt-weg {
            display: inline-flex; align-items: center; gap: 0.45rem; max-width: 100%;
            font-size: 0.88rem; font-weight: 500; color: var(--text-2); text-decoration: none;
        }
        .kontakt-weg svg { flex: none; color: var(--text-meta); }
        .kontakt-weg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .kontakt-weg:hover { color: var(--akzent); }
        .kontakt-weg:hover svg { color: var(--akzent); }
        .zelle-liegenschaft { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
        .zelle-liegenschaft .lg-marke { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .zelle-liegenschaft .lg-marke:hover { background: rgba(63, 107, 97, 0.18); }

        /* Formulare für Kontakt/Hausverwaltung: Karten-Abschnitte wie "Neuer Vorgang" */
        .formular-schmal { max-width: 52rem; }
        .formular-spalte { display: flex; flex-direction: column; min-width: 0; }
        .formular-spalte .karte { margin-bottom: 1rem; }
        .formular-spalte .aktionsleiste { margin-top: 0.25rem; }
        .formular-spalte .segmente.auswahl { flex-wrap: wrap; }
        .formular-spalte .formular-raster { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
        .formular-spalte .formular-raster.zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .raster-breit { grid-column: 1 / -1; }
        .formular-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; margin-top: 0.4rem; }
        .formular-fuss .abbrechen { color: var(--text-2); }
        .dublette > a.knopf { flex: none; padding: 0.4rem 1rem; font-size: 0.85rem; }

        /* Kurze Listen in Seitenspalten und Karten */
        .mini-liste { display: flex; flex-direction: column; gap: 0.35rem; }
        .mini-zeile {
            display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
            padding: 0.6rem 0.75rem; border-radius: 14px;
            background: rgba(255, 255, 255, 0.7); color: var(--text); text-decoration: none;
            transition: background 0.12s ease;
        }
        a.mini-zeile:hover { background: var(--weiss); color: var(--text); }
        a.mini-zeile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--akzent-hell); }
        .mini-zeile-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
        .mini-zeile-kopf .meta { font-size: 0.8rem; white-space: nowrap; }
        .mini-zeile-text { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; font-size: 0.9rem; font-weight: 500; }
        .mini-zeile .lg-nummer { flex: none; color: var(--akzent); font-weight: 700; font-size: 0.82rem; }
        .mini-zeile .lg-nummer.interessent { color: var(--gelb-text); }
        .mini-zeile.mini-person { flex-direction: row; align-items: center; gap: 0.65rem; }
        .mini-leer { margin: 0; }
        .karte .mini-zeile { background: rgba(246, 246, 243, 0.7); }
        .karte a.mini-zeile:hover { background: rgba(236, 236, 232, 0.9); }

        /* Gefahrenzone: Löschen abgesetzt unter der Seitenspalte */
        .gefahrenzone { padding: 0.9rem 1.1rem; border-radius: 18px; border: 1px dashed rgba(217, 60, 59, 0.28); }
        .gefahrenzone form { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0; }
        .gefahrenzone .meta { flex: 1; min-width: 10rem; margin: 0; font-size: 0.82rem; }
        .gefahrenzone .knopf-glas { font-size: 0.85rem; padding: 0.45rem 0.9rem; }
        .duplizierzone { border-color: rgba(82, 81, 78, 0.22); margin-bottom: 0.75rem; }

        /* Liegenschaft-Detail */
        .kontakt-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem; }
        .kontakt-kachel {
            display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
            padding: 0.8rem 0.9rem; border-radius: 16px; background: rgba(246, 246, 243, 0.7);
        }
        .kontakt-kachel .kontakt-wege { padding-left: calc(2.2rem + 0.75rem); }
        /* Vorgangszeilen ohne die Liegenschafts-Spalte – steht schon im Seitenkopf */
        .ohne-liegenschaft .vorgang-grid { grid-template-columns: 2.4fr 1.2fr 1.25fr 1fr 1.1fr 0.75fr; }
        .ohne-liegenschaft .vorgang-zeile > :first-child { display: none; }
        .zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 1.25rem; align-items: start; }
        .karte-kopf .meta { font-size: 0.85rem; }
        @media (max-width: 75rem) {
            .kontakt-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1.8fr) minmax(0, 1fr) 3.8rem; gap: 0.8rem; }
        }

        /* ---------- Montage: Board, neue Karte, Karten-Detail ---------- */
        /* Kalender-Widget links (heute + 2 Tage), Board rechts – schmalere
           Sidebar analog .chat-layout, damit der Bereich nicht leer wirkt. */
        .montage-seite { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
        .montage-haupt { min-width: 0; }
        .montage-kalender {
            display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1.3rem; position: sticky; top: 1rem;
            border-radius: var(--radius-karte);
        }
        .montage-kalender-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
        .montage-kalender-kopf h2 { margin: 0; font-size: 1.05rem; }
        .montage-kalender-tag { display: flex; flex-direction: column; gap: 0.5rem; }
        .montage-kalender-tag + .montage-kalender-tag { padding-top: 0.9rem; border-top: 1px solid var(--linie); }
        .montage-kalender-tagtitel {
            display: flex; align-items: baseline; gap: 0.4rem; margin: 0;
            font-size: 0.8rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em;
        }
        .montage-kalender-tagtitel .meta { font-size: 0.78rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
        .montage-kalender-liste { display: flex; flex-direction: column; gap: 0.35rem; }
        .montage-kalender-eintrag {
            display: flex; align-items: center; gap: 0.5rem; width: 100%;
            padding: 0.45rem 0.55rem; border-radius: 14px; border: none; cursor: pointer;
            background: rgba(255, 255, 255, 0.55); color: var(--text); text-align: left; font-family: inherit;
            transition: background 0.15s ease;
        }
        .montage-kalender-eintrag:hover { background: rgba(255, 255, 255, 0.92); }
        .montage-kalender-eintrag .avatar { width: 1.5rem; height: 1.5rem; font-size: 0.68rem; flex: none; }
        .montage-kalender-zeit { flex: none; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.8rem; color: var(--akzent); min-width: 2.8rem; }
        .montage-kalender-adresse { flex: 1; min-width: 0; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .montage-kalender-leer { margin: 0; font-size: 0.84rem; }
        .montage-kalender-material { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--linie); }
        details.montage-kalender-material { display: block; }
        details.montage-kalender-material > :not(summary) { margin-top: 0.5rem; }
        .montage-kalender-material > summary { cursor: pointer; list-style: none; }
        .montage-kalender-material > summary::-webkit-details-marker { display: none; }
        .montage-kalender-material > summary::before { content: "▸"; }
        .montage-kalender-material[open] > summary::before { content: "▾"; }
        .montage-fehlend-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.84rem; }
        .montage-fehlend-liste a { display: flex; align-items: baseline; gap: 0.4rem; color: var(--text); text-decoration: none; padding: 0.1rem 0; }
        .montage-fehlend-liste a:hover .montage-fehlend-adresse { text-decoration: underline; }
        .montage-fehlend-adresse { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .montage-fehlend-liste .meta { flex: none; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
        .montage-material-uebersicht-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.86rem; }
        .montage-material-uebersicht-anzahl { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--akzent); margin-right: 0.3rem; }
        .montage-detail-dialog { width: min(30rem, calc(100vw - 2rem)); }
        .montage-detail-dialog h3 { margin: 1rem 0 0.4rem; font-size: 0.92rem; }
        .montage-detail-dialog p { margin: 0 0 0.3rem; }
        /* Kalender-Popups: Hinweise/Material als abgesetzte Kästen (Disposition gelb, Techniker Salbei, Material neutral). */
        .popup-bereich { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--linie); }
        .popup-bereich-intern { background: var(--gelb-zart); box-shadow: none; }
        .popup-bereich-techniker { background: rgba(132, 165, 157, 0.2); box-shadow: none; }
        .montage-detail-dialog .popup-bereich h3 {
            display: flex; align-items: center; gap: 0.3rem; margin: 0 0 0.35rem;
            font-size: 0.72rem; font-weight: 600; color: var(--text-meta); text-transform: uppercase; letter-spacing: 0.05em;
        }
        .popup-bereich-zusatz {
            padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.64rem;
            background: rgba(224, 138, 0, 0.16); color: var(--gelb-text);
        }
        .montage-detail-dialog .popup-bereich > :last-child { margin-bottom: 0; }
        .popup-bereich.leer { display: flex; align-items: baseline; gap: 0.6rem; padding-block: 0.4rem; }
        .montage-detail-dialog .popup-bereich.leer h3 { margin: 0; white-space: nowrap; }
        .popup-bereich.leer p { margin: 0; font-size: 0.8rem; white-space: nowrap; }
        .termin-bestaetigt-wahl { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.85rem; cursor: pointer; }
        .popup-bereich.leer .termin-bestaetigt-wahl { margin: 0 0 0 auto; white-space: nowrap; }
        .termin-bestaetigt-wahl .meta { font-size: 0.75rem; }
        .material-vorschau-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.9rem; }
        @media (max-width: 65rem) {
            .montage-seite { grid-template-columns: 1fr; }
            .montage-kalender { position: static; }
        }


        /* Knöpfe als Segmente (Spalten-Reiter, Sortierung): ohne Akzentfläche */
        .segmente button.segment {
            background: none; box-shadow: none; transform: none;
            font-family: inherit; line-height: inherit; white-space: nowrap; cursor: pointer;
        }
        .segmente button.segment:hover { background: none; color: var(--text); }
        .segmente button.segment.aktiv { background: var(--weiss); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
        /* Reiterleiste scrollt bei schmalem Fenster in sich, nie die Seite */
        .montage-reiter-leiste { max-width: 100%; overflow-x: auto; margin: -0.4rem 0 1.2rem; padding: 2px; scrollbar-width: thin; }
        .montage-reiter { flex-wrap: nowrap; }
        .montage-reiter .segment { padding: 0.45rem 1rem; }
        .montage-sortierung { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
        .montage-sortierung > .meta { font-size: 0.85rem; }

        .montage-karten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
        .montage-karte {
            display: flex; flex-direction: column; gap: 0.45rem; min-width: 0;
            padding: 1rem 1.1rem 1.05rem; border-radius: 20px;
            background: var(--flaeche);
            backdrop-filter: var(--glas-filter);
            -webkit-backdrop-filter: var(--glas-filter);
            border: 1px solid var(--glas-rand);
            box-shadow: var(--schatten-karte);
            color: var(--text); text-decoration: none;
            position: relative; overflow: hidden;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .montage-karte:hover { color: var(--text); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--weiss), 0 14px 40px rgba(38, 52, 47, 0.13); }
        .montage-karte:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(132, 165, 157, 0.55), var(--schatten-karte); }
        .montage-karte-kopf { display: flex; align-items: center; justify-content: flex-start; gap: 0.6rem; }
        .montage-karte .lg-marke { font-size: 0.82rem; }
        .montage-termin { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
        .montage-termin svg { color: var(--text-meta); }
        .montage-termin.offen { color: var(--gelb-text); }
        .montage-karte-adresse { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; padding-right: 3.5rem; }
        .montage-leer { grid-column: 1 / -1; margin: 0; }

        /* Gemeinsame Basis für den Montageart-Flor, auf der Karte wie im
           Kalendereintrag (.wochenkalender-eintrag-flor). Alles Positions-/
           Winkel-Spezifische steht in der :not()-Regel darunter, damit Änderungen
           an der Karten-Variante den Kalendereintrag nicht mitverändern. */
        .montage-karte-flor {
            position: absolute; text-align: center;
            background: var(--flor-farbe, var(--text-2)); color: #fff;
            font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
        }
        /* Auf der Montage-Karte: Eck-Flor wie im Kalendereintrag – kommt schräg aus
           der Oberkante (10rem vor der rechten Kante, also etwa Kartenmitte) und läuft
           über die rechte Kante hinaus. Beide Enden schneidet overflow:hidden der
           Karte ab. Rechts verankert, damit der Text auf jeder Kartenbreite gleich
           im sichtbaren Teil liegt. Drehpunkt ist die untere linke Ecke auf der
           Oberkante. */
        .montage-karte-flor:not(.wochenkalender-eintrag-flor) {
            top: -1.1rem; left: auto; right: -3rem; width: 13rem; height: 1.1rem; box-sizing: border-box;
            padding: 0 2.6rem 0 3.8rem; line-height: calc(1.1rem - 2px); text-align: center;
            font-size: 0.6rem;
            transform: rotate(12deg); transform-origin: left bottom;
            border-top: 1px solid rgba(255, 255, 255, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.55);
            white-space: nowrap; overflow: hidden;
        }

        /* Checklisten-Fortschritt als schmaler Balken */
        .montage-fortschritt { display: flex; align-items: center; gap: 0.6rem; }
        .montage-fortschritt .meta { font-size: 0.78rem; white-space: nowrap; }
        .montage-fortschritt progress {
            flex: 1; height: 0.4rem; margin: 0; border: none; border-radius: 999px; overflow: hidden;
            background: var(--segment); -webkit-appearance: none; appearance: none;
        }
        .montage-fortschritt progress::-webkit-progress-bar { background: var(--segment); border-radius: 999px; }
        .montage-fortschritt progress::-webkit-progress-value { background: var(--akzent-hell); border-radius: 999px; }
        .montage-fortschritt progress::-moz-progress-bar { background: var(--akzent-hell); border-radius: 999px; }

        /* Zeile unter dem Fortschritt: Labels links, Arbeitszeit rechts */
        .montage-karte-unten { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.1rem; }
        .montage-karte-dauer { white-space: nowrap; }

        /* Labels: Farbpunkt wie in Trello, Text steht immer dabei */
        .montage-labels { display: flex; flex-wrap: wrap; gap: 0.3rem; }
        .montage-label {
            display: inline-flex; align-items: center; gap: 0.35rem;
            padding: 0.15rem 0.55rem; border-radius: 999px;
            background: var(--label-flaeche); color: var(--label-text); font-size: 0.74rem; font-weight: 600;
        }
        .montage-label::before, .montage-label-wahl label::before {
            content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--label-farbe);
        }
        .label-planung_freigegeben { --label-farbe: #1baf7a; --label-flaeche: rgba(27, 175, 122, 0.14); --label-text: var(--gruen-text); }
        .label-material_gerichtet { --label-farbe: #eda100; --label-flaeche: rgba(237, 161, 0, 0.16); --label-text: #8a5700; }
        .label-material_unvollstaendig { --label-farbe: #eb6834; --label-flaeche: rgba(235, 104, 52, 0.14); --label-text: var(--orange-text); }
        .label-geplant_angekuendigt { --label-farbe: #6366f1; --label-flaeche: rgba(99, 102, 241, 0.13); --label-text: var(--violett-text); }

        /* Neue Karte */
        .montage-termin-hinweis {
            display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; margin: 0.35rem 0 0;
            padding: 0.35rem 0.8rem; border-radius: 999px;
            background: var(--akzent-zart); color: var(--akzent-hover); font-size: 0.88rem;
        }
        .montage-zusatz-feld select { max-width: none; margin: 0; }
        .montage-dialog {
            width: min(26rem, calc(100vw - 2rem)); padding: 1.4rem 1.5rem 1.2rem;
            border: 1px solid var(--glas-rand); border-radius: var(--radius-karte);
            background: var(--deckend); color: var(--text); box-shadow: var(--schatten-schwebend);
        }
        .montage-dialog::backdrop { background: rgba(11, 11, 11, 0.32); backdrop-filter: blur(3px); }
        html.glas-reduziert .montage-dialog::backdrop { backdrop-filter: none; }
        .montage-dialog h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
        .montage-dialog p { margin: 0; color: var(--text-2); }
        .montage-dialog input, .montage-dialog select { max-width: none; margin-bottom: 0; }
        .termin-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.8rem; margin-top: 0.4rem; }
        .montage-dialog:has(.termin-raster) { width: min(30rem, calc(100vw - 2rem)); }
        .termin-raster label { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; margin: 0; font-weight: 600; font-size: 0.88rem; }
        .termin-raster input, .termin-raster select { width: 100%; min-width: 0; box-sizing: border-box; }
        .termin-raster .raster-breit { grid-column: 1 / -1; }
        .montage-dialog .termin-hinweis { margin-top: 0.7rem; font-size: 0.82rem; }
        .montage-karte-techniker { font-size: 0.85rem; }
        .montage-karte-techniker .avatar { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
        .montage-dialog-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-top: 1.2rem; }
        .montage-dialog-fuss.getrennt { justify-content: space-between; flex-wrap: wrap; }
        /* Vier Aktionen im Termin-Popup des Wochenkalenders – etwas breiter, damit sie in eine Zeile passen. */
        #montage-kalender-eintrag-dialog { width: min(38rem, calc(100vw - 2rem)); }
        .montage-dialog-fuss-rechts { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
        .montage-dialog .abbrechen, .such-fuss .abbrechen { color: var(--text-2); }
        .knopf.gefahr { background: var(--rot); }
        .knopf.gefahr:hover { background: var(--rot-text); }
        .text-knopf.gefahr, .text-knopf.gefahr:hover { color: var(--rot-text); }

        /* Angebot erstellen (Popup am Vorgang) – ID-Selektor, da
           ".montage-dialog:has(.termin-raster)" (Fragenkatalog-Raster) sonst
           mit höherer Spezifität die schmalere Standardbreite erzwingt. */
        #angebot-dialog { width: min(42rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); overflow-y: auto; }
        .angebot-dialog .fehlerbox { margin-top: 0.6rem; }
        .angebot-uvi-wahl { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
        .angebot-block { margin-top: 1.1rem; }
        .angebot-block h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
        .angebot-positionen { display: flex; flex-direction: column; gap: 0.4rem; }
        .angebot-position-zeile {
            display: grid; grid-template-columns: 1fr 4.5rem 6rem 6rem 1.8rem; gap: 0.5rem; align-items: center;
        }
        .angebot-position-zeile input {
            width: 100%; min-width: 0; box-sizing: border-box; margin: 0; font-size: 0.88rem;
        }
        .angebot-gesamt { text-align: right; font-size: 0.88rem; color: var(--text-2); }
        .angebot-position-hinzufuegen { margin-top: 0.5rem; }
        .angebot-block-summe { margin-top: 0.4rem; text-align: right; }
        .angebot-gesamtsumme { margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--glas-rand); text-align: right; font-weight: 600; }

        /* Karten-Detail */
        .montage-detail .karte-kopf form { margin: 0; }
        .montage-detail .karte-kopf .text-knopf { padding: 0.2rem 0.4rem; font-size: 0.84rem; }
        .montage-detail input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0; }
        .montage-notiz-werkzeuge { display: flex; gap: 0.25rem; }
        .montage-notiz-werkzeug {
            display: inline-flex; align-items: center; justify-content: center;
            width: 2rem; height: 2rem; padding: 0; border-radius: 10px;
            background: var(--segment); color: var(--text-2); font-size: 0.9rem;
        }
        .montage-notiz-werkzeug:hover { background: var(--akzent-zart); color: var(--akzent-hover); }
        .montage-notiz-werkzeug.aktiv { background: var(--akzent-zart); color: var(--akzent-hover); }
        .montage-notiz-eingabe {
            background: var(--weiss); border: 1px solid var(--feldrand); border-radius: 16px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); margin: 0;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .montage-notiz-eingabe:focus-within { border-color: var(--akzent-hell); box-shadow: 0 0 0 3px rgba(132, 165, 157, 0.3); }
        .montage-notiz-editor {
            min-height: 5rem; padding: 0.85rem 1rem 0.4rem; font-size: 0.98rem; line-height: 1.5;
        }
        .montage-notiz-editor:focus { outline: none; }
        .montage-notiz-editor:empty:before { content: attr(data-placeholder); color: var(--text-meta); }
        .montage-notiz-editor ul { margin: 0.3rem 0; padding-left: 1.4rem; }
        .montage-notiz-anzeige ul { margin: 0.3rem 0; padding-left: 1.4rem; }
        .montage-detail .notiz-eingabe { margin: 0; }
        .montage-detail .inspektor-feld > .knopf { align-self: flex-start; padding: 0.45rem 1.1rem; font-size: 0.88rem; }
        .zeilen-aktionen { display: inline-flex; align-items: center; gap: 0.1rem; flex: none; opacity: 0.6; transition: opacity 0.12s ease; }
        .zeilen-aktionen form { margin: 0; }
        .zeilen-aktionen .text-knopf { padding: 0.2rem 0.45rem; font-size: 0.84rem; }
        li:hover > .zeilen-aktionen, .register-zeile:hover .zeilen-aktionen, .zeilen-aktionen:focus-within { opacity: 1; }

        .montage-checkliste { margin: 0 0 0.5rem; }
        .montage-checkliste .checkliste-punkt { flex-wrap: wrap; margin: 0 -0.6rem; padding: 0.4rem 0.6rem; border-radius: 12px; }
        .montage-checkliste .checkliste-punkt:hover { background: rgba(246, 246, 243, 0.8); }
        .montage-punkt-bearbeiten { flex-basis: 100%; margin: 0.2rem 0 0.2rem calc(1.05rem + 0.7rem); }
        .montage-hinzufuegen input { flex: 1; max-width: none; }
        .montage-hinzufuegen .knopf, .montage-punkt-bearbeiten .knopf { flex: none; padding: 0.5rem 1.1rem; font-size: 0.88rem; }
        .montage-neue-checkliste {
            background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
            border: 1.5px dashed rgba(63, 107, 97, 0.3);
        }
        .montage-neue-checkliste .karte-kopf { margin-bottom: 0.5rem; }
        .montage-neue-checkliste .feld-fehlertext { margin: 0 0 0.5rem; }
        .montage-neue-checkliste.feld-fehler input { border-color: rgba(217, 60, 59, 0.5); }

        /* Material-Stückliste: eine Rasterzeile je Position, Eingabe im selben Raster */
        /* Schmales Fenster: Spalten werden enger, Bezeichnung behält eine Mindestbreite;
           waagerechtes Scrollen nur als Notnagel, falls doch etwas nicht passt. */
        .material-tabelle { container-type: inline-size; overflow-x: auto; }
        .material-liste { list-style: none; margin: 0 0 0.5rem; padding: 0; }
        .material-grid {
            display: grid; grid-template-columns: 1.05rem 3.4rem 5.8rem 4.4rem minmax(8rem, 1fr) 10.2rem 4.4rem 6.8rem;
            gap: 0.4rem 0.75rem; align-items: center;
        }
        @container (max-width: 56rem) {
            .material-grid {
                grid-template-columns: 1.05rem 3.2rem 5rem 4.6rem minmax(7rem, 1fr) 8.4rem 3.6rem 6.8rem;
                gap: 0.4rem 0.5rem;
            }
        }
        /* Sehr schmal (z. B. Fenster halb so breit wie der Bildschirm): je Position zwei Zeilen,
           oben Anzahl/Art.-Nr./Bezeichnung, darunter Typ/Liefertermin/Gerichtet.
           In den Eingabe-Formularen steht vorn das versteckte CSRF-Feld, daher dort +1. */
        @container (max-width: 45rem) {
            .material-spaltenkopf { display: none; }
            .material-grid {
                grid-template-columns: 1.05rem 3.4rem 4.6rem minmax(0, 1fr) 6.4rem;
                grid-template-areas: "chk anz art bez akt" ". typ typ lief ger";
                gap: 0.4rem 0.5rem;
            }
            .material-eingabe .knopf { padding: 0.45rem 0.7rem; }
            .material-zeile > :nth-child(1), .material-eingabe > :nth-child(2) { grid-area: chk; }
            .material-zeile > :nth-child(2), .material-eingabe > :nth-child(3) { grid-area: anz; }
            .material-zeile > :nth-child(3), .material-eingabe > :nth-child(4) { grid-area: typ; }
            .material-zeile > :nth-child(4), .material-eingabe > :nth-child(5) { grid-area: art; }
            .material-zeile > :nth-child(5), .material-eingabe > :nth-child(6) { grid-area: bez; }
            .material-zeile > :nth-child(6), .material-eingabe > :nth-child(7) { grid-area: lief; }
            .material-zeile > :nth-child(7), .material-eingabe > :nth-child(8) { grid-area: ger; }
            .material-zeile > :nth-child(8), .material-eingabe > :nth-child(9) { grid-area: akt; }
        }
        .material-spaltenkopf {
            padding: 0 0.6rem 0.4rem; border-bottom: 1px solid var(--linie);
            font-size: 0.72rem; font-weight: 600; color: var(--text-meta); text-transform: uppercase; letter-spacing: 0.05em;
        }
        .material-zeile { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linie); }
        .material-zeile:hover { background: rgba(246, 246, 243, 0.8); }
        .material-zeile form { margin: 0; }
        .material-zeile > .material-eingabe { grid-column: 1 / -1; }
        .material-anzahl { font-weight: 600; }
        .material-typ {
            display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px;
            background: var(--segment); color: var(--text-2); font-size: 0.78rem; font-weight: 600;
        }
        .material-bezeichnung { overflow-wrap: anywhere; }
        .material-liefertermin { font-size: 0.88rem; color: var(--text-2); }
        .material-liefertermin.konflikt, .termin-material-hinweis.konflikt, .montage-karte-material.konflikt { color: #c03a39; font-weight: 600; }
        .material-konflikt { margin: 0 0 0.75rem; }
        .material-gerichtet-kopf { display: inline-flex; color: var(--text-meta); }
        .material-gerichtet { font-size: 0.88rem; white-space: nowrap; }
        .material-zeile.teilgerichtet > span, .material-zeile.teilgerichtet .material-typ { color: #c03a39; }
        .material-aktionen { display: inline-flex; gap: 0.35rem; justify-self: end; }
        .material-aktionen form { margin: 0; }
        .symbol-knopf {
            width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 10px;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .symbol-knopf.gefahr { background: var(--rot); }
        .symbol-knopf.gefahr:hover { background: var(--rot-text); }
        .material-datum { display: flex; align-items: center; gap: 0.2rem; min-width: 0; }
        .material-datum input { flex: 1; min-width: 0; }
        .termin-material-hinweis { margin: 0.5rem 0 0; }
        .montage-karte-material { font-size: 0.8rem; color: var(--text-2); }
        .material-zeile.erledigt .material-anzahl,
        .material-zeile.erledigt .material-bezeichnung { color: var(--text-meta); text-decoration: line-through; }
        .material-leer { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--linie); }
        .material-eingabe > span { min-width: 0; }
        .material-eingabe input, .material-eingabe select {
            width: 100%; max-width: none; min-width: 0; margin: 0; padding: 0.45rem 0.6rem; font-size: 0.92rem;
        }
        .material-eingabe .knopf { padding: 0.45rem 1rem; font-size: 0.88rem; }
        .material-neu { margin-top: 0.5rem; padding: 0.5rem 0.6rem; border-radius: 14px; background: rgba(246, 246, 243, 0.7); }
        .material-neu-symbol { display: inline-flex; color: var(--akzent); }

        .montage-termin-zeile {
            display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            padding: 0.4rem 0.4rem 0.4rem 0.8rem; border-radius: var(--radius-feld);
            border: 1px solid var(--feldrand); background: rgba(255, 255, 255, 0.75);
        }
        .montage-termin-wert { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
        .montage-termin-wert svg { color: var(--akzent); }

        /* Techniker-Bereich "Meine Termine" – auch auf dem Tablet gut bedienbar */
        .abschnitt-titel { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.8rem; }
        .techniker-liste { display: flex; flex-direction: column; gap: 0.8rem; }
        .techniker-termin {
            display: flex; align-items: center; gap: 1.2rem; margin: 0; padding: 1rem 1.3rem;
            color: var(--text); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .techniker-termin:hover { color: var(--text); transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--weiss), 0 14px 40px rgba(38, 52, 47, 0.13); }
        .techniker-termin.heute { box-shadow: 0 0 0 2px var(--akzent), var(--schatten-karte); }
        .techniker-datum {
            display: flex; flex-direction: column; align-items: center; flex: none; width: 4rem; padding: 0.45rem 0;
            border-radius: 16px; background: var(--akzent-zart); color: var(--akzent-hover); line-height: 1.1;
        }
        .techniker-datum-tag, .techniker-datum-monat { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
        .techniker-datum-zahl { font-size: 1.6rem; font-weight: 700; }
        .techniker-termin-text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
        .techniker-termin-zeit { font-size: 0.92rem; color: var(--text-2); }
        .techniker-termin-adresse { font-size: 1.08rem; font-weight: 700; overflow-wrap: anywhere; }
        .techniker-zeitraum { display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; }
        .techniker-zeitraum svg { color: var(--akzent); }
        .techniker-detail { max-width: 52rem; }
        .techniker-material { width: 100%; border-collapse: collapse; }
        .techniker-material th { text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-meta); padding: 0 0.6rem 0.5rem 0; }
        .techniker-material td { padding: 0.6rem 0.6rem 0.6rem 0; border-top: 1px solid var(--feldrand); vertical-align: top; }
        .techniker-notizen { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
        .kalender-link { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
        .kalender-link .knopf { margin-bottom: 0.6rem; }
        .kalender-link input { max-width: none; width: 100%; font-size: 0.85rem; color: var(--text-2); }

        /* ---------- News: Liste, anstehende Termine, Popup, Formular ---------- */
        /* Einspaltig (unter 70rem) darf ein langer Titel die Spalte nicht aufweiten */
        .news-layout > * { min-width: 0; }
        .news-liste { list-style: none; margin: 0; padding: 0; }
        .liste-karte .news-liste li { border-top: 1px solid var(--linie); }
        .news-eintrag, .news-eintrag:hover {
            display: flex; align-items: center; gap: 0.85rem; width: 100%;
            padding: 0.85rem 1.35rem; border-radius: 0; box-shadow: none; transform: none;
            background: transparent; color: var(--text); text-align: left; font-size: 0.95rem; font-weight: 400;
        }
        .news-eintrag:hover { background: rgba(255, 255, 255, 0.85); }
        .news-eintrag:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--akzent-hell); }
        .news-eintrag .zelle-stapel { flex: 1; }
        .news-titel { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .news-eintrag.ungelesen .news-titel { font-weight: 700; }
        .news-symbol {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 2.2rem; height: 2.2rem; border-radius: 11px;
            background: var(--akzent-zart); color: var(--akzent);
        }
        .news-symbol.termin { background: var(--segment); color: var(--text-2); }
        /* Ungelesen: Punkt plus Wort – die Farbe ist nie alleiniges Merkmal */
        .news-ungelesen-marke {
            display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
            padding: 0.2rem 0.65rem; border-radius: 999px;
            background: rgba(217, 60, 59, 0.1); color: var(--rot-text); font-size: 0.78rem; font-weight: 600; white-space: nowrap;
        }
        .news-ungelesen-marke::before { content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--rot); }
        .inspektor .news-eintrag, .inspektor .news-eintrag:hover {
            gap: 0.75rem; padding: 0.55rem 0.65rem; border-radius: 14px; background: rgba(255, 255, 255, 0.7);
        }
        .inspektor .news-eintrag:hover { background: var(--weiss); }
        .news-termin .kalenderblatt { width: 2.8rem; height: 3rem; border-radius: 12px; }
        .news-termin .news-titel { white-space: normal; overflow-wrap: anywhere; }
        @media (max-width: 70rem) {
            .news-layout .detail-seite { order: -1; }
        }

        /* Popup: Karte füllt das <dialog> aus, ein Klick daneben trifft das Dialog-Element */
        .news-dialog { width: min(38rem, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
        .news-dialog-karte {
            display: flex; flex-direction: column; gap: 0.45rem;
            max-height: min(85vh, 48rem); overflow-y: auto; padding: 1.3rem 1.5rem 1.2rem;
        }
        .news-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
        .news-dialog h2 { margin: 0.2rem 0 0; font-size: 1.35rem; overflow-wrap: anywhere; }
        .news-dialog p.meta { color: var(--text-meta); font-size: 0.85rem; }
        .news-dialog-text { margin: 0.5rem 0 0.3rem; white-space: pre-line; line-height: 1.55; overflow-wrap: anywhere; }
        .news-dialog p.news-dialog-text { color: var(--text); }
        .news-dialog .feld-titel { margin-top: 0.5rem; }
        .news-dialog-anhaenge { display: flex; flex-direction: column; gap: 0.35rem; }
        .news-dialog-anhaenge .datei-zeile { background: rgba(246, 246, 243, 0.9); }
        .news-dialog-fuss {
            display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
            margin-top: 0.8rem; padding-top: 0.9rem; border-top: 1px solid var(--linie);
        }
        .news-teilen { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
        .news-teilen label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
        .news-teilen select { margin: 0; max-width: 12rem; }
        .news-dialog-aktionen { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
        .news-dialog-aktionen form { margin: 0; }
        .news-dialog-aktionen .knopf { padding: 0.45rem 1.1rem; font-size: 0.88rem; }
        .dialog-schliessen, .dialog-schliessen:hover {
            flex: none; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; box-shadow: none;
            background: var(--segment); color: var(--text-2); font-size: 1.2rem; line-height: 1;
        }
        .dialog-schliessen:hover { background: rgba(118, 118, 128, 0.2); color: var(--text); }

        /* Formular */
        .news-formular .inspektor-feld { margin-bottom: 1.1rem; }
        .news-formular .notiz-eingabe { margin: 0.2rem 0 0; }
        .news-formular .notiz-eingabe textarea { min-height: 8rem; padding-bottom: 0.85rem; }
        .news-formular .ablage-auswahl { margin-top: 0.6rem; }

        /* ---------- Aufgaben: Liste, neue Aufgabe, Detail ---------- */
        .aufgabe-grid {
            display: grid;
            grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.9fr) 8.4rem minmax(0, 1.25fr) 6.5rem;
            gap: 1rem;
            align-items: center;
        }
        .aufgabe-titel { overflow-wrap: anywhere; }
        /* Glasflächen bilden eigene Ebenen – Karten mit einer Vorschlagsliste
           (Liegenschaft, Kontakt) müssen über den folgenden liegen */
        .aufgabe-lg-bereich, .vorschlag-bereich { position: relative; z-index: 2; }

        /* Neue Aufgabe */
        .aufgabe-lg-suche { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
        .aufgabe-lg-suche .liegenschaft-suchfeld-wrapper { flex: 1; min-width: 0; }
        .aufgabe-lg-suche .suchpille.gross { height: 2.75rem; padding: 0 1rem; gap: 0.6rem; }
        .aufgabe-lg-suche .suchpille.gross input { font-size: 1rem; }
        .aufgabe-lg-suche .text-knopf { flex: none; }
        .aufgabe-raster > div { margin-bottom: 0.35rem; }
        .aufgabe-neu .notiz-eingabe { margin: 0; }
        .aufgabe-neu .notiz-eingabe textarea { min-height: 7rem; padding-bottom: 0.85rem; }
        .aufgabe-neu .checkliste-punkt::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--akzent-hell); }
        @media (max-width: 70rem) {
            .aufgabe-neu .segmente.auswahl.raster { grid-template-columns: repeat(4, auto); width: fit-content; }
            .aufgabe-neu .datumsfeld input { max-width: 16rem; }
        }

        /* Checkliste (neu und Detail) */
        .aufgabe-checkliste { margin: 0 0 0.6rem; }
        .aufgabe-checkliste .checkliste-punkt { margin: 0 -0.6rem; padding: 0.35rem 0.6rem; border-radius: 12px; }
        .aufgabe-checkliste .checkliste-punkt:hover { background: rgba(246, 246, 243, 0.8); }
        .aufgabe-checkliste input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0; }
        .aufgabe-checkliste-leer { padding: 0.3rem 0; }
        .aufgabe-hinzufuegen input { flex: 1; max-width: none; }
        .aufgabe-hinzufuegen .knopf { flex: none; padding: 0.5rem 1.1rem; font-size: 0.88rem; }
        .aufgabe-punkt-fehler { margin: 0 0 0.4rem; }

        /* Detail */
        .aufgabe-ueberschrift { overflow-wrap: anywhere; }
        .aufgabe-feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
        .aufgabe-feld-kopf .text-knopf { padding: 0 0.2rem; font-size: 0.8rem; }
        .aufgabe-autor { background: var(--akzent-hell); }

        /* ---------- Einstellungen, Login und Abschluss ---------- */
        /* Mitarbeiterfarbe kommt als Variable aus dem Template (style="--farbe: …") */
        .farbig { background: var(--farbe, var(--akzent-hell)); }

        /* Rückmeldungen: Symbol plus Text, die Farbe ist nur Zusatz */
        .erfolgsmeldung, .fehlerbox.mit-symbol { display: flex; align-items: flex-start; gap: 0.65rem; }
        .erfolgsmeldung {
            padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--radius-feld);
            background: var(--gruen-zart); color: var(--gruen-text); font-size: 0.92rem; font-weight: 600;
        }
        .erfolgsmeldung svg, .fehlerbox.mit-symbol svg { flex: none; margin-top: 0.05rem; }
        .fehlerbox.mit-symbol ul { margin: 0; }

        /* Neutrale Pille für Spalte, Status oder Typ, wenn kein Status-Code vorliegt */
        .abzeichen {
            display: inline-flex; align-items: center; flex: none;
            padding: 0.18rem 0.6rem; border-radius: 999px;
            background: var(--segment); color: var(--text-2);
            font-size: 0.76rem; font-weight: 600; white-space: nowrap;
        }

        /* Leisten über dem Vorgang: Teilen, Löschen, LG-Nummer nachtragen */
        .leisten-karte { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin: 0 0 1.25rem; padding: 0.8rem 1.3rem; }
        .leisten-karte label { margin: 0; font-weight: 600; color: var(--text); }
        .leisten-karte select { margin: 0; width: auto; }
        .leisten-symbol {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 2rem; height: 2rem; border-radius: 50%; background: var(--akzent-zart); color: var(--akzent);
        }
        form.gefahrenzone { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
        .gefahrenzone-leiste { background: var(--rot-zart); }
        .gefahrenzone-leiste .meta { color: var(--rot-text); }
        .karte.nachtragen { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.3rem; background: var(--gelb-zart); }
        .karte.nachtragen .feld-titel { color: var(--gelb-text); }
        .karte.nachtragen .nachtragen-zeile input { margin: 0; }
        .karte.nachtragen .meta { font-size: 0.82rem; }

        /* Radios als Segmente in Kontaktformularen am Vorgang */
        .kontakt-rolle-feld { margin-bottom: 1rem; }
        .kontakt-rolle-feld .segmente.auswahl, .kontakt-rolle-wahl { flex-wrap: wrap; }
        .kontakt-rolle-wahl { margin-top: 0.4rem; }

        /* Montage-Labels als Chips: Haken plus fette Schrift zeigen die Auswahl */
        .montage-label-wahl label { padding: 0.28rem 0.7rem; }
        .wahl-haken { display: none; color: var(--akzent); }
        .personen-wahl label:has(input:checked) .wahl-haken { display: inline-flex; }

        /* Einstellungen */
        .einstellungen .karte-kopf { margin-bottom: 0.3rem; }
        .einstellungen-hinweis { margin: 0 0 1rem; font-size: 0.85rem; }
        .inspektor .einstellungen-hinweis { margin: -0.4rem 0 0; }
        .einstellungen-vertretung { display: flex; flex-direction: column; gap: 1rem; }
        .farben-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
        .farben-wahl label {
            position: relative; display: flex; align-items: center; gap: 0.6rem; min-width: 0;
            padding: 0.45rem 0.7rem 0.45rem 0.45rem; border-radius: 14px; cursor: pointer;
            border: 1px solid var(--feldrand); background: rgba(255, 255, 255, 0.8);
            color: var(--text-2); font-size: 0.88rem; font-weight: 500;
            transition: border-color 0.15s ease, background 0.15s ease;
        }
        .farben-wahl label:hover { border-color: var(--akzent-hell); }
        .farben-wahl input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
        .farbmuster {
            display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--weiss);
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
        }
        .farbmuster svg { visibility: hidden; stroke-width: 3; }
        .farbe-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .farbe-gewaehlt { display: none; font-size: 0.72rem; font-weight: 600; color: var(--akzent); }
        .farben-wahl label:has(input:checked) {
            border-color: var(--akzent); background: var(--akzent-zart); color: var(--text); font-weight: 700;
            box-shadow: 0 0 0 1px var(--akzent);
        }
        .farben-wahl label:has(input:checked) .farbmuster svg { visibility: visible; }
        .farben-wahl label:has(input:checked) .farbe-gewaehlt { display: inline; }
        .farben-wahl label:has(input:focus-visible) { outline: 3px solid rgba(132, 165, 157, 0.55); outline-offset: 1px; }
        .seitenkopf-meta .avatar { width: 1.4rem; height: 1.4rem; font-size: 0.68rem; }

        /* Login: Glaskarte mittig mit Orbit-Marke */
        .login-karte {
            display: flex; flex-direction: column; width: 100%; max-width: 25rem;
            padding: 2.2rem 2.2rem 2rem; border-radius: var(--radius-karte);
        }
        .login-logo { display: block; height: 2.3rem; width: auto; margin: 0 auto 1.6rem; }
        .login-titel { margin: 0; font-size: 1.45rem; text-align: center; }
        .login-unter { margin: 0.3rem 0 1.4rem; text-align: center; font-size: 0.85rem; }
        .login-karte form { display: flex; flex-direction: column; gap: 1rem; }
        .login-karte .inspektor-feld input { max-width: none; }
        .login-karte button[type="submit"] { justify-content: center; width: 100%; margin-top: 0.3rem; padding: 0.8rem 1.3rem; }

        /* Wochenkalender-Popup (siehe montage-kalender-woche.js) */
        .montage-kalender-oeffnen { width: 100%; justify-content: center; }
        .montage-kalender-woche-dialog {
            width: min(94rem, calc(100vw - 2rem)); height: calc(100vh - 4rem);
            padding: 1.4rem 1.5rem; overflow: hidden;
        }
        /* Nur im offenen Zustand auf flex umschalten – sonst überschreibt das
           die native display:none-Regel für geschlossene <dialog>-Elemente. */
        .montage-kalender-woche-dialog[open] { display: flex; flex-direction: column; }
        .montage-kalender-woche-dialog .montage-dialog-fuss { flex: none; }
        /* Inhalt füllt die feste Popup-Höhe, damit unter dem Raster keine Lücke bleibt. */
        #montage-kalender-woche-inhalt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
        /* Kalender links (Kopf/Raster/Zoom untereinander), "Noch zu planen" rechts über die volle Höhe. */
        .wochenkalender {
            display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
            grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.9rem 1.2rem; flex: 1; min-height: 0;
        }
        .wochenkalender > :not(.wochenkalender-zuplanen) { grid-column: 1; }
        .wochenkalender-zuplanen { grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column; min-height: 0; }
        .wochenkalender-zuplanen h3 { margin: 0 0 0.2rem; font-size: 1rem; }
        .wochenkalender-zuplanen-hinweis { margin: 0 0 0.6rem; font-size: 0.8rem; }
        .wochenkalender-zuplanen-liste {
            flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem;
            padding: 0.2rem 0.3rem 0.6rem 0.1rem;
        }
        .wochenkalender-zuplanen-liste > .meta { margin: 0; }
        .wochenkalender-zuplanen-liste .wochenkalender-nacharbeiten-titel { margin: 0.8rem 0 0; flex: none; }
        .wochenkalender-zuplanen-karte { flex: none; padding: 0.8rem 0.9rem 0.85rem; border-radius: 16px; cursor: grab; }
        .wochenkalender-zuplanen-karte.wochenkalender-ziehend { opacity: 0.4; cursor: grabbing; }
        .wochenkalender-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem 1.2rem; flex: none; flex-wrap: wrap; }
        .wochenkalender-kopf h2 { margin: 0; font-size: 1.1rem; }
        .wochenkalender-nav .segment { padding: 0.3rem 0.75rem; font-weight: 700; }
        .wochenkalender-aushang { display: flex; align-items: center; gap: 1rem; margin-left: auto; font-size: 0.86rem; position: relative; }
        .wochenkalender-aushang-tag-wahl { position: relative; }
        .wochenkalender-aushang-tage {
            position: absolute; top: 100%; right: 0; margin-top: 0.3rem; z-index: 5;
            display: flex; flex-direction: column; gap: 2px; min-width: 11rem;
            background: var(--deckend); border: 1px solid var(--linie); border-radius: var(--radius-feld);
            padding: 0.4rem; box-shadow: var(--schatten-schwebend);
        }
        .wochenkalender-aushang-tage .segment {
            display: block; width: 100%; text-align: left; padding: 0.42rem 0.7rem;
            border-radius: 8px; font-size: 0.86rem;
        }
        .wochenkalender-aushang-tage .segment:hover { background: var(--segment); color: var(--text); }
        /* Kopf/Ganztag/Zeitraster sind drei eigene Grid-Zeilen (je 8 Elemente:
           Zeitspalte + 7 Tage) statt je Tag verschachtelt - so setzt CSS Grid
           die Höhe jeder Zeile automatisch anhand des höchsten Elements der
           ganzen Woche, und ein ganztägiger Eintrag/Feiertag an einem Tag kann
           das Zeitraster nicht mehr gegenüber der Stunden-Spalte verschieben. */
        .wochenkalender-raster {
            display: grid; grid-template-columns: 3.4rem repeat(7, minmax(7.5rem, 1fr));
            grid-template-rows: auto auto 1fr;
            overflow: auto; border: 1px solid var(--linie); border-radius: var(--radius-feld);
            flex: 1; min-height: 0;
        }
        .wochenkalender-ecke, .wochenkalender-ganztag-platz { position: sticky; left: 0; background: var(--deckend); z-index: 3; }
        .wochenkalender-ecke { position: sticky; top: 0; z-index: 4; }
        .wochenkalender-zeitspalte { display: flex; flex-direction: column; border-right: 1px solid var(--linie); }
        .wochenkalender-stunde {
            height: auto; flex: 1 0 calc(var(--wochenkalender-zell-hoehe, 1.7rem) * 2); font-size: 0.82rem;
            color: var(--text-meta); text-align: right; padding-right: 0.4rem; transform: translateY(-0.5em);
        }
        .wochenkalender-tagkopf, .wochenkalender-ganztag, .wochenkalender-spalte {
            border-right: 1px solid var(--linie); min-width: 0;
        }
        .wochenkalender-tagkopf:nth-child(8n), .wochenkalender-ganztag:nth-child(8n), .wochenkalender-spalte:nth-child(8n) {
            border-right: none;
        }
        .wochenkalender-tagkopf.heute, .wochenkalender-ganztag.heute, .wochenkalender-spalte.heute { background: var(--akzent-zart); }
        .wochenkalender-tagkopf.feiertag, .wochenkalender-ganztag.feiertag, .wochenkalender-spalte.feiertag {
            background: repeating-linear-gradient(135deg, var(--hintergrund) 0 10px, var(--flaeche) 10px 20px);
        }
        .wochenkalender-tagkopf.feiertag { color: var(--text-meta); }
        .feiertag-marke {
            font-size: 0.76rem; font-weight: 700; padding: 0.2rem 0.5rem; text-align: center;
            border-radius: 8px; background: var(--text-meta); color: var(--weiss);
        }
        .wochenkalender-spalte.feiertag .wochenkalender-zelle { cursor: not-allowed; }
        .wochenkalender-spalte.feiertag .wochenkalender-zelle:hover { background: none; }
        .wochenkalender-tagkopf {
            height: 3.2rem; position: sticky; top: 0; background: var(--deckend); z-index: 2;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            font-weight: 600; font-size: 0.86rem; border-bottom: 1px solid var(--linie); gap: 0.1rem;
        }
        /* Klebt beim Scrollen oben – Tönung deshalb auf deckendem Grund. */
        .wochenkalender-tagkopf.heute { background: linear-gradient(var(--akzent-zart), var(--akzent-zart)), var(--deckend); }
        .wochenkalender-tagkopf.feiertag { background: repeating-linear-gradient(135deg, var(--hintergrund) 0 10px, var(--flaeche) 10px 20px), var(--deckend); }
        .wochenkalender-ganztag { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.3rem; border-bottom: 1px solid var(--linie); }
        .wochenkalender-ganztag .wochenkalender-eintrag {
            display: flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; padding: 0.2rem 0.5rem;
            border-radius: 8px; border: none; text-align: left; cursor: pointer;
            position: relative; overflow: hidden;
        }
        .wochenkalender-ganztag .wochenkalender-eintrag:not(.feiertag-marke) {
            background: var(--farbe, var(--akzent-hell)); color: var(--weiss);
        }
        .wochenkalender-ganztag .lg-marke { font-size: 0.68rem; padding: 0.05rem 0.4rem; }
        .wochenkalender-spalte { position: relative; display: flex; flex-direction: column; }
        /* Volle Stunde optisch stärker als die halbe - Blick soll auf der vollen Stunde landen. */
        .wochenkalender-zelle {
            flex: 1 0 var(--wochenkalender-zell-hoehe, 1.7rem);
            border-bottom-style: dotted; border-bottom-color: var(--linie); border-bottom-width: 1px; cursor: pointer;
        }
        .wochenkalender-zelle:hover { background: var(--akzent-zart); }
        .wochenkalender-zelle.halb { border-bottom-style: solid; border-bottom-color: var(--linie); }
        .wochenkalender-zelle.wochenkalender-drop-ziel { background: var(--akzent-hell); }
        /* Wiederkehrende Zeiten ohne Monteur (MONTAGE_KALENDER_SPERRZEITEN) - nur Hinweis, Klicks/Drop gehen durch. */
        .wochenkalender-sperrzeit {
            position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0;
            background: repeating-linear-gradient(135deg, var(--linie) 0 2px, transparent 2px 8px);
        }
        .wochenkalender-spalte > .wochenkalender-eintrag {
            position: absolute; left: 2px; right: 2px; border-radius: 8px; border: none;
            display: flex; flex-direction: column; justify-content: flex-start; /* Text oben statt Button-Mitte */
            background: var(--farbe, var(--akzent-hell)); color: var(--weiss); text-align: left;
            padding: 0.15rem 0.4rem; font-size: 0.78rem; line-height: 1.25; overflow: hidden;
            cursor: grab; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); z-index: 1;
        }
        .wochenkalender-spalte > .wochenkalender-eintrag.wochenkalender-ziehend { opacity: 0.4; cursor: grabbing; }
        /* Schmale Einträge (mehrere Termine gleichzeitig, siehe spurenSetzen): weißer Trennrand statt Überlappung, Text kleiner. */
        .wochenkalender-spalte > .wochenkalender-eintrag.schmal { right: auto; padding-inline: 0.3rem; font-size: 0.72rem; box-shadow: 0 0 0 1px var(--deckend), 0 1px 4px rgba(0, 0, 0, 0.18); }
        .wochenkalender-spalte > .wochenkalender-eintrag.schmal .wochenkalender-eintrag-zeit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .wochenkalender-spalte > .wochenkalender-eintrag.schmal .wochenkalender-eintrag-adresse-zeile:not(:first-child) { display: none; }
        .wochenkalender-eintrag-techniker { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .wochenkalender-ganztag .wochenkalender-eintrag-techniker { display: inline; flex: none; }
        .wochenkalender-techniker-filter { flex-basis: 100%; flex-wrap: wrap; width: fit-content; max-width: 100%; border-radius: 1.1rem; }
        .wochenkalender-techniker-filter .segment { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; font-size: 0.84rem; }
        .wochenkalender-techniker-punkt { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--farbe); flex: none; }
        .wochenkalender-eintrag-zeit { display: block; font-weight: 700; }
        /* Platz für den Montageart-Flor, sonst verdeckt er Uhrzeit bzw. LG-Nummer. */
        .wochenkalender-spalte > .wochenkalender-eintrag:has(.wochenkalender-eintrag-flor) { padding-top: 1.2rem; }
        .wochenkalender-ganztag .wochenkalender-eintrag:has(.wochenkalender-eintrag-flor) { padding-top: 1.15rem; }
        .wochenkalender-eintrag-adresse { display: flex; flex-direction: column; }
        .wochenkalender-eintrag-adresse-zeile { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

        /* Hover-Popup für zu kleine Kalendereinträge (siehe montage-kalender-woche.js) -
           position: fixed statt absolut, sonst schneidet das overflow:auto/hidden von
           Raster bzw. Dialog das Popup an schmalen/kurzen Terminen ab. */
        .wochenkalender-eintrag-vorschau {
            position: fixed; z-index: 20; max-width: 16rem; padding: 0.5rem 0.7rem;
            border-radius: var(--radius-feld); background: var(--akzent); color: var(--weiss);
            font-size: 0.82rem; line-height: 1.35; box-shadow: var(--schatten-schwebend);
            pointer-events: none;
        }
        .wochenkalender-eintrag-vorschau .wochenkalender-eintrag-zeit { font-weight: 700; }
        .wochenkalender-vorschau-label { display: flex; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-size: 0.76rem; }
        .wochenkalender-vorschau-label .wochenkalender-eintrag-label { flex: none; }

        /* Zoom fürs Zeitraster: unten links, unter dem Raster - bleibt fix stehen,
           während im gezoomten Raster selbst gescrollt wird. */
        .wochenkalender-fuss { display: flex; align-items: center; gap: 1rem; flex: none; }
        .wochenkalender-zoom { display: flex; gap: 0.4rem; flex: none; margin-top: 0.2rem; }

        /* "Export Kalender" mit "i"-Anleitung (Wochenkalender-Fuß und Termin-Popup). */
        .kalender-export { position: relative; display: inline-flex; align-items: center; gap: 0.2rem; }
        .export-haken { color: var(--gruen-text); font-weight: 700; }
        .export-haken[hidden] { display: none; }
        .info-knopf {
            width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid var(--linie);
            background: var(--deckend); color: var(--text-2); padding: 0;
            font: italic 700 0.78rem/1 Georgia, serif; cursor: pointer; box-shadow: none;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .info-knopf:hover, .info-knopf[aria-expanded="true"] { background: var(--akzent-zart); }
        .info-box {
            position: absolute; left: 0; bottom: calc(100% + 0.4rem); z-index: 30;
            width: min(26rem, 80vw); padding: 0.7rem 0.9rem; border-radius: var(--radius-feld);
            background: var(--deckend); color: var(--text); box-shadow: var(--schatten-schwebend);
            font-size: 0.84rem; line-height: 1.45; text-align: left;
        }
        .info-box[hidden] { display: none; }
        .info-box ol { margin: 0; padding-left: 1.2rem; }
        .info-box li + li { margin-top: 0.25rem; }
        .info-box p { margin: 0.5rem 0 0; color: var(--text-2); }
        .montage-dialog-fuss-links { display: inline-flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
        .wochenkalender-zoom-knopf {
            width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--linie);
            background: var(--deckend); color: var(--text); font-size: 1rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center; line-height: 1;
            cursor: pointer; padding: 0;
        }
        .wochenkalender-zoom-knopf:hover { background: var(--akzent-zart); }

        /* Gleicher Eck-Flor-Stil wie bei den Montage-Karten, aber viel flacher
           gedreht statt 45 Grad: bei den schmalen Kalendereinträgen schneidet ein
           steiler Flor den Text ab, ein flacher Winkel braucht kaum Zusatzhöhe und
           bleibt über die volle Eintragsbreite lesbar. */
        .wochenkalender-eintrag-flor {
            top: 0.3rem; right: -0.55rem; left: -0.55rem; width: auto;
            padding: 0.05rem 0.9rem; font-size: 0.56rem; letter-spacing: 0.01em;
            transform: rotate(5deg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
            border-top: 1px solid rgba(255, 255, 255, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.55);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .wochenkalender-ganztag .wochenkalender-eintrag-flor { top: 0.35rem; }
        .wochenkalender-eintrag-punkte {
            position: absolute; right: 0.3rem; bottom: 0.25rem; display: flex; gap: 0.2rem;
        }
        .wochenkalender-eintrag-label {
            width: 0.5rem; height: 0.5rem;
            border-radius: 50%; background: var(--label-farbe, #6366f1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.65);
        }
        /* Angekündigt, aber noch nicht bestätigt: Punkt mit rotem X durchgestrichen. */
        .wochenkalender-eintrag-label.nicht-bestaetigt { position: relative; }
        .wochenkalender-eintrag-label.nicht-bestaetigt::before,
        .wochenkalender-eintrag-label.nicht-bestaetigt::after {
            content: ''; position: absolute; left: 50%; top: 50%;
            width: 0.8rem; height: 2px; margin: -1px 0 0 -0.4rem;
            background: #e34948; border-radius: 1px; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.8);
            transform: rotate(45deg);
        }
        .wochenkalender-eintrag-label.nicht-bestaetigt::after { transform: rotate(-45deg); }
        .montage-termin-neu-wahl { display: flex; gap: 0.7rem; margin-top: 0.6rem; }
        .montage-termin-neu-wahl button { flex: 1; }
        .kalender-suche-vorschlaege {
            display: flex; flex-direction: column; gap: 0.2rem; margin: 0.4rem 0 0; padding: 0;
            list-style: none; max-height: 11rem; overflow: auto;
        }
        .kalender-suche-vorschlaege button {
            width: 100%; text-align: left; background: var(--flaeche); border: 1px solid var(--glas-rand);
            border-radius: var(--radius-feld); padding: 0.45rem 0.6rem; font-size: 0.86rem; color: var(--text);
        }
        .kalender-suche-vorschlaege button:hover { background: var(--akzent-zart); }
        .kalender-suche-gewaehlt { font-size: 0.86rem; padding: 0.5rem 0; }

        /* ---------- Smartphone (v. a. Lager per WLAN): Kopfleiste statt Seitenleiste ---------- */
        .menue-knopf { display: none; }
        .nur-mobil { display: none; }
        @media (max-width: 48rem) {
            .app { flex-direction: column; gap: 0.75rem; padding: 0.5rem 0.75rem; }
            .seitenleiste {
                position: relative; top: 0; width: auto; height: auto;
                flex-direction: row; flex-wrap: wrap; align-items: center;
                padding: 0.45rem 0.5rem 0.45rem 0.9rem; border-radius: 20px;
            }
            .seitenleiste .marke { height: 1.45rem; margin: 0; }
            .seitenleiste .fuellen { display: none; }
            .menue-knopf, .menue-knopf:hover {
                display: inline-flex; align-items: center; justify-content: center;
                margin-left: auto; width: 2.75rem; height: 2.75rem; padding: 0;
                border-radius: 14px; background: rgba(255, 255, 255, 0.55); color: var(--text); box-shadow: none;
            }
            .menue-striche, .menue-striche::before, .menue-striche::after {
                content: ""; display: block; position: relative; width: 1.2rem; height: 2px; border-radius: 2px; background: currentColor;
            }
            .menue-striche::before { position: absolute; top: -6px; }
            .menue-striche::after { position: absolute; top: 6px; }
            .seitenleiste.offen .menue-striche { background: transparent; }
            .seitenleiste.offen .menue-striche::before { top: 0; transform: rotate(45deg); }
            .seitenleiste.offen .menue-striche::after { top: 0; transform: rotate(-45deg); }
            .seitenleiste > nav, .seitenleiste .profilmenue { display: none; width: 100%; }
            .seitenleiste.offen > nav { display: block; margin-top: 0.4rem; }
            .seitenleiste.offen .profilmenue { display: block; margin: 0.4rem 0 0.2rem; }
            .nav-link { padding: 0.8rem 0.75rem; }
            .profilmenue-liste { bottom: auto; top: calc(100% + 0.5rem); }

            main { padding: 0.25rem 0 2rem; }
            main.ohne-leiste { padding: 1.5rem 0.75rem; }
            .seitenkopf { flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
            .seitenkopf h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
            .karte { padding: 1.1rem 1rem; }
            .liste-karte { padding: 0; }
            .kennzahlen { grid-template-columns: 1fr; }
            /* iOS vergrößert die Seite beim Antippen von Feldern unter 16px */
            input, select, textarea, select.kompakt, input.kompakt, .suchpille input { font-size: 1rem; }

            /* Artikelseite: Zählen ganz oben, Verläufe zweizeilig */
            .lager-zaehlen.nur-mobil { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
            .lager-zaehlen label { font-weight: 600; }
            .lager-zaehlen-zeile { display: flex; gap: 0.5rem; }
            .lager-zaehlen-zeile input { flex: 1; min-width: 0; max-width: none; height: 2.9rem; margin: 0; }
            .lager-zaehlen-zeile button { flex: none; min-height: 2.9rem; }
            .lager-detail .vorgang-kopf { display: none; }
            .lager-stammdaten { grid-template-columns: 7rem minmax(0, 1fr); }
            .lager-verlauf-grid, .lager-preis-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.75rem; }
            .lager-verlauf-grid { grid-template-areas: "art menge" "datum ma" "notiz notiz"; }
            .lager-verlauf-grid > :nth-child(1) { grid-area: datum; }
            .lager-verlauf-grid > :nth-child(2) { grid-area: art; font-weight: 600; }
            .lager-verlauf-grid > :nth-child(3) { grid-area: menge; }
            .lager-verlauf-grid > :nth-child(4) { grid-area: ma; text-align: right; }
            .lager-verlauf-grid > :nth-child(5) { grid-area: notiz; }
            .lager-preis-grid { grid-template-areas: "datum preis" "ma aenderung" "notiz notiz"; }
            .lager-preis-grid > :nth-child(1) { grid-area: datum; }
            .lager-preis-grid > :nth-child(2) { grid-area: preis; }
            .lager-preis-grid > :nth-child(3) { grid-area: aenderung; }
            .lager-preis-grid > :nth-child(4) { grid-area: ma; }
            .lager-preis-grid > :nth-child(5) { grid-area: notiz; }
        }
        /* Lagerliste: Karten statt Tabelle (auch schmale Desktop-Fenster), Suche bleibt beim Scrollen oben */
        @media (max-width: 75rem) {
            .lager-karte { overflow: visible; }
            .lager-karte .werkzeugleiste {
                position: sticky; top: 0; z-index: 10; padding: 0.75rem 1rem;
                background: var(--deckend); border-radius: var(--radius-karte) var(--radius-karte) 0 0;
            }
            .lager-karte .suchpille.gross { flex: 1 1 100%; min-width: 0; }
            .lager-karte .werkzeugleiste select { flex: 1; min-width: 0; max-width: 20rem; margin: 0; }
            .lager-karte .vorgang-kopf.lager-grid { display: none; }
            .lager-grid.register-zeile {
                grid-template-columns: minmax(0, 1fr) auto 2.75rem;
                grid-template-areas: "nr bestand stift" "name name name" "schnell schnell schnell";
                gap: 0.3rem 0.75rem; padding: 0.85rem 1rem;
            }
            .lager-grid .lager-artikelnummer { grid-area: nr; }
            .lager-grid .lager-bestand { grid-area: bestand; font-size: 1.35rem; }
            .lager-grid .lager-bestand::before { content: "Bestand "; font-size: 0.75rem; font-weight: 500; color: var(--text-meta); }
            .lager-grid .lager-stift { grid-area: stift; width: 2.75rem; height: 2.75rem; }
            .lager-grid .lager-name { grid-area: name; }
            .lager-grid .lager-wert { display: none; }
            .lager-grid .lager-schnell { grid-area: schnell; margin-top: 0.3rem; max-width: 30rem; }
            .lager-schnell input.kompakt { flex: none; width: 5rem; height: 2.75rem; }
            .lager-schnell button { flex: 1; min-height: 2.75rem; font-size: 0.95rem; }
        }

        /* Lager › Bestellungen */
        .symbol-knopf.blau { background: var(--blau-text); }
        .symbol-knopf.blau:hover { background: #174d8e; }
        .bestell-karte { margin-bottom: 1.25rem; }
        .bestell-ablage { margin-bottom: 1.25rem; padding: 0.5rem; }
        .bestell-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.35rem; }
        .bestell-kopf h2 { margin: 0; }
        .bestell-kopf form { margin: 0; }
        .bestell-aktionen { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
        .bestell-grid {
            display: grid; grid-template-columns: 4.5rem 10rem minmax(0, 1fr) 4.5rem;
            gap: 0.9rem; align-items: start;
        }
        .bestell-archiv-grid {
            display: grid; grid-template-columns: 9rem 14rem 6rem minmax(0, 1fr);
            gap: 0.9rem; align-items: center; color: inherit; text-decoration: none;
        }
        .bestell-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
        .bestell-montagen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
        .bestell-montagen li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--text-2); flex-wrap: wrap; }
        .bestell-menge-form { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
        .bestell-menge-form input { width: 4.5rem; }
        .bestell-hinweis { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--orange-text); font-size: 0.85rem; }
        .bestell-leer { padding: 0 1.35rem 1rem; margin: 0; }
        .bestell-neu { padding: 0.75rem 1.35rem 1rem; border-top: 1px solid var(--linie); }
        .bestell-neu summary { cursor: pointer; color: var(--text-2); font-size: 0.9rem; }
        .bestell-neu-form {
            display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) 5.5rem auto;
            gap: 0.75rem; align-items: end; margin-top: 0.75rem;
        }
        .bestell-neu-form label { display: block; font-size: 0.85rem; color: var(--text-2); margin-bottom: 0.25rem; }
        .bestell-neu-form select, .bestell-neu-form input { width: 100%; }
        .bestell-neu-form input:disabled { opacity: 0.5; }
        @media (max-width: 48rem) {
            .bestell-grid { grid-template-columns: 4rem minmax(0, 1fr) 3.5rem; }
            .bestell-grid > :nth-child(2) { grid-column: 2; grid-row: 2; }
            .bestell-archiv-grid { grid-template-columns: minmax(0, 1fr) auto; }
            .bestell-neu-form { grid-template-columns: minmax(0, 1fr); }
        }

        /* ---------- UVI-Ergänzungen (Rest unverändert aus Orbit übernommen) ---------- */
        .marke-text {
            display: block; margin: 0.2rem 0.7rem 1.4rem;
            font-family: "Figtree", sans-serif; font-size: 1.35rem; font-weight: 800;
            color: var(--text); text-decoration: none; letter-spacing: -0.01em;
        }
        .marke-text span { color: var(--akzent); }
        .glas-schalter { align-self: flex-start; margin: 0 0.7rem; font-size: 0.8rem; }
        .abmelden { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; margin: 0 0.7rem 0.8rem; font-size: 0.82rem; }
        .abmelden .text-knopf { font-size: 0.85rem; }
        .login-marke { margin: 0 0 1.4rem; text-align: center; font-size: 1.6rem; }
        .verwalter-grid {
            display: grid;
            grid-template-columns: 4.5rem minmax(0, 2.4fr) minmax(0, 2fr) 5.5rem;
            gap: 1rem;
            align-items: center;
        }
        .infomeldung {
            padding: 0.85rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--radius-feld);
            background: var(--segment); color: var(--text-2); font-size: 0.92rem; font-weight: 600;
        }
        .lg-liste-grid { display: grid; grid-template-columns: 7.5rem minmax(0, 2.6fr) minmax(0, 2fr) 6rem 3rem; gap: 1rem; align-items: center; }
        .ne-grid { display: grid; grid-template-columns: 3.5rem minmax(0, 1.6fr) minmax(0, 2.6fr) 5rem; gap: 1rem; align-items: start; }
        .abschnitt-liste .abschnitt-kopf { padding: 1.3rem 1.3rem 0.4rem; }
        .abschnitt-leer { padding: 0 1.3rem 1.3rem; }
        .abschnitt-kopf .pruef-monat { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
        .pruef-monat input { width: auto; padding: 0.35rem 0.6rem; font-size: 0.85rem; }
        .abschnitt-fuss { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.75rem; margin-top: 1.1rem; }
        .liste-karte > .abschnitt-fuss { margin: 0; padding: 0.9rem 1.3rem 1.1rem; }
        .befund-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
        .befund { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.9rem; line-height: 1.45; }
        .befund .status-pill { flex: none; min-width: 5.6rem; }
        .befund-fehler .status-pill { background: var(--rot-zart); color: var(--rot-text); }
        .befund-warnung .status-pill { background: rgba(235, 104, 52, 0.14); color: var(--orange-text); }
        .geraete-stapel { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
        .geraet-zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-size: 0.88rem; }
        .geraet-typ { flex: none; min-width: 2.4rem; font-size: 0.75rem; font-weight: 700; color: var(--akzent); }
        .geraet-zeile .meta { font-size: 0.8rem; }
        .verbrauch-grid { display: grid; grid-template-columns: 9rem repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 1rem; align-items: center; font-variant-numeric: tabular-nums; }
        .mieter-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) minmax(0, 1.6fr) 6.5rem; gap: 1rem; align-items: center; }
        .geraete-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) 7rem 7.5rem; gap: 1rem; align-items: center; font-variant-numeric: tabular-nums; }
        .such-mieter-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.5fr) minmax(0, 1.8fr) 9rem; gap: 1rem; align-items: center; }
        .such-mieter-grid .status-pill { align-self: flex-start; }
        .zeile-alt { color: var(--text-2); }
        .zeile-alt .geraet-typ { color: var(--text-2); }
        .pill-gruen { background: var(--gruen-zart); color: var(--gruen-text); }
        .pill-rot { background: var(--rot-zart); color: var(--rot-text); }
        .zelle-fehler { color: var(--rot-text); }
        .protokoll-grid { display: grid; grid-template-columns: 7.5rem 8.5rem 7.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
        .protokoll-grid .status-pill { justify-self: start; }
        .protokoll-text { overflow-wrap: anywhere; font-size: 0.9rem; }
        .register-leiste .art-feld, .register-leiste .monat-feld { width: auto; height: 3rem; }
        .blaettern { justify-content: space-between; }
        .pruef-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.4fr) 7rem; gap: 1rem; align-items: start; }
        .befund-liste.kompakt { margin: 0; gap: 0.4rem; }
        .lauf-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) 7rem 10rem; gap: 1rem; align-items: center; }
        .lauf-aktion { display: flex; justify-content: flex-end; }
        .versand-grid { display: grid; grid-template-columns: 3.5rem minmax(0, 2.6fr) 4.5rem 6.5rem; gap: 1rem; align-items: center; }
        .lauf-formular { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; }
        .lauf-formular textarea, .lauf-formular input { width: 100%; }
        .befund-liste.kompakt .befund { font-size: 0.85rem; }
        .pruef-zahlen { display: flex; justify-content: flex-end; gap: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
        .wert-rot { color: var(--rot-text); }
        .wert-orange { color: var(--orange-text); }
        .wert-gruen { color: var(--gruen-text); }
        .ne-link { color: inherit; text-decoration: none; }
        .ne-link:hover { color: var(--akzent); }
        @media (max-width: 48rem) {
            .marke-text { margin: 0; font-size: 1.15rem; }
            .glas-schalter { display: none; }
            .seitenleiste:not(.offen) .abmelden { display: none; }
            .abmelden { flex-basis: 100%; flex-direction: row; align-items: center; justify-content: space-between; margin: 0.6rem 0 0; }
            .verwalter-grid { grid-template-columns: minmax(0, 1fr) 4.5rem; }
            .verwalter-grid > :nth-child(1), .verwalter-grid > :nth-child(3) { display: none; }
            .lg-liste-grid { grid-template-columns: minmax(0, 1fr) 2.5rem; }
            .lg-liste-grid > :nth-child(1), .lg-liste-grid > :nth-child(3), .lg-liste-grid > :nth-child(4) { display: none; }
            .ne-grid { grid-template-columns: 3rem minmax(0, 1fr); }
            .ne-grid > :nth-child(3) { grid-column: 2; }
            .ne-grid > :nth-child(4) { display: none; }
            .verbrauch-grid { grid-template-columns: 5.5rem repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 0.6rem; font-size: 0.85rem; }
            .such-mieter-grid { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
            .such-mieter-grid > :nth-child(2):has(> .meta) { display: none; }
            .vorgang-kopf.such-mieter-grid { display: none; }
            .register-leiste .suchpille.gross { min-width: 0; flex-basis: 100%; }
            .protokoll-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.8rem; }
            .protokoll-grid > :nth-child(3):has(> .meta) { display: none; }
            .protokoll-grid > :nth-child(4) { grid-column: 1 / -1; }
            .vorgang-kopf.protokoll-grid, .vorgang-kopf.pruef-grid { display: none; }
            .vorgang-kopf.lauf-grid, .vorgang-kopf.versand-grid { display: none; }
            .lauf-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
            .lauf-grid > :nth-child(3) { display: none; }
            .versand-grid { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.6rem; }
            .versand-grid > :nth-child(3) { display: none; }
            .pruef-grid { grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
            .pruef-grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
            .befund-liste.kompakt .befund { flex-direction: column; gap: 0.2rem; }
            .pruef-kennzahlen { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
            .pruef-kennzahlen .kachel { padding: 0.9rem 1rem; }
            .pruef-kennzahlen .kachel-wert { font-size: 1.7rem; }
            .pruef-kennzahlen .kachel-unter { display: none; }
            .mieter-grid { grid-template-columns: minmax(0, 1fr) auto; }
            .mieter-grid > :nth-child(2) { grid-column: 1; grid-row: 2; font-size: 0.85rem; }
            .mieter-grid > :nth-child(3) { display: none; }
            .geraete-grid { grid-template-columns: minmax(0, 1fr) auto; }
            .geraete-grid > :nth-child(2) { grid-column: 1; font-size: 0.85rem; }
            .geraete-grid > :nth-child(3) { display: none; }
            .abschnitt-kopf { flex-wrap: wrap; }
            .abschnitt-kopf > div { flex: 1 1 0; min-width: 0; }
            .abschnitt-kopf .pruef-monat { flex-basis: 100%; margin-left: 0; }
            .vorgang-kopf.mieter-grid, .vorgang-kopf.geraete-grid { display: none; }
        }