/* modulex.Mobil – Grundgestaltung. Eine Akzentfarbe je Mandant (--haupt), alles andere ruhig.
   Schmal (Handy): Reiter unten. Breit (Tablet quer, Web): Leiste links. */

:root {
    --haupt: #C4122F;
    --akzent: #C4122F;
    --auf-haupt: #FFFFFF;
    --grund: #F5F5F4;
    --flaeche: #FFFFFF;
    --text: #1C1917;
    --leise: #6B6560;
    --linie: #E7E5E4;
    --gefahr: #B42318;
    --radius: 14px;
    --tippen: 48px;
    --reiter-hoehe: 68px;
    --leiste-breite: 220px;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light dark;
}

/* Dunkel: nach dem Gerät (Automatisch) oder fest gewählt unter Mehr → Darstellung (data-farbmodus = hell | dunkel). */
@media (prefers-color-scheme: dark) {
    :root:not([data-farbmodus="hell"]) {
        --grund: #161514;
        --flaeche: #232120;
        --text: #F5F5F4;
        --leise: #A8A29E;
        --linie: #38342F;
    }
}
:root[data-farbmodus="dunkel"] {
    --grund: #161514;
    --flaeche: #232120;
    --text: #F5F5F4;
    --leise: #A8A29E;
    --linie: #38342F;
    color-scheme: dark;
}
:root[data-farbmodus="hell"] { color-scheme: light; }

/* Mandantenfarbe als Schrift auf heller bzw. dunkler Fläche; im Dunkelmodus aufgehellt, damit sie lesbar bleibt.
   Bewusst auf .mobil, wo --haupt je Mandant gesetzt wird (auf :root würde sie die Standardfarbe festhalten). */
.mobil { --haupt-text: var(--haupt); }
@media (prefers-color-scheme: dark) {
    :root:not([data-farbmodus="hell"]) .mobil { --haupt-text: color-mix(in srgb, var(--haupt) 60%, white); }
}
:root[data-farbmodus="dunkel"] .mobil { --haupt-text: color-mix(in srgb, var(--haupt) 60%, white); }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grund); color: var(--text); font-size: 16px; line-height: 1.45; }
a { color: inherit; }

.mobil { min-height: 100vh; }

/* Kopfzeile */
.kopf {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 16px;
    background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.marke { font-weight: 600; color: var(--haupt-text); }
.offline { font-size: .8rem; font-weight: 600; color: var(--gefahr); }
.kopf-rechts { color: var(--leise); display: inline-flex; }

/* Inhalt */
.inhalt { padding: 16px 16px calc(var(--reiter-hoehe) + 24px); max-width: 860px; margin: 0 auto; }
.inhalt.ohne-menue { padding-bottom: 24px; }
.titel { font-size: 1.6rem; margin: 8px 0 4px; }
/* Der Fokus springt beim Seitenwechsel für Screenreader auf die Überschrift; sichtbar ist er nicht nötig. */
h1:focus { outline: none; }
.abschnitt { font-size: 1.05rem; margin: 24px 0 8px; }
.leise { color: var(--leise); }
.klein { font-size: .875rem; }

/* Reiter unten (schmal) */
.reiter {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
    height: var(--reiter-hoehe); padding-bottom: env(safe-area-inset-bottom);
    background: var(--flaeche); border-top: 1px solid var(--linie);
}
.reiter-eintrag {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: var(--tippen); text-decoration: none; color: var(--leise); font-size: .75rem;
}
.reiter-eintrag.active { color: var(--haupt-text); font-weight: 600; }
.plus-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--haupt); color: var(--auf-haupt);
}
.reiter-plus.active .plus-knopf { outline: 3px solid color-mix(in srgb, var(--haupt) 30%, transparent); }
.nur-breit { display: none; }

/* Leiste links (breit) */
@media (min-width: 900px) {
    .reiter {
        top: 56px; right: auto; bottom: 0; width: var(--leiste-breite); height: auto;
        display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 12px;
        border-top: 0; border-right: 1px solid var(--linie);
    }
    .reiter-eintrag { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; border-radius: 10px; font-size: .95rem; }
    .reiter-eintrag.active { background: color-mix(in srgb, var(--haupt) 10%, transparent); }
    .reiter-plus { order: -1; margin-bottom: 8px; }
    .plus-knopf { width: 32px; height: 32px; }
    .nur-breit { display: inline; }
    /* Breiter Bildschirm (Windows, Browser): Inhalt neben der Leiste, aber nicht über die ganze Breite gezogen. */
    .inhalt { margin-left: var(--leiste-breite); padding: 24px 32px; max-width: 1240px; }
    .inhalt.ohne-menue { margin: 0 auto; }
}

/* Karten und Listen */
.liste { display: grid; gap: 10px; }
@media (min-width: 900px) { .liste { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.karte {
    display: block; padding: 14px 16px; border-radius: var(--radius);
    background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; color: inherit;
}
.karte-knopf { width: 100%; text-align: left; font: inherit; cursor: pointer; min-height: var(--tippen); }
.projekt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.projekt-nummer { font-size: .85rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.projekt-titel { font-weight: 600; margin: 2px 0; }
.projekt-adresse { display: flex; align-items: center; gap: 4px; }
.etikett {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem;
    background: color-mix(in srgb, var(--haupt) 12%, transparent); color: var(--haupt-text);
}
.etiketten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* Antippbare Etiketten (Vorschläge): groß genug für den Finger. */
button.etikett { min-height: 36px; padding: 6px 14px; font: inherit; font-size: .85rem; border: 0; cursor: pointer; }

/* Kennzahlen und Schnellaktionen */
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.kennzahl { display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); }
.zahl { font-size: 1.5rem; font-weight: 600; }
.schnell { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
@media (min-width: 900px) {
    .kennzahlen { grid-template-columns: repeat(3, minmax(0, 240px)); }
    .schnell { grid-template-columns: repeat(auto-fill, minmax(220px, 280px)); }
}
.schnell-eintrag { min-height: 64px; display: flex; align-items: center; font-weight: 600; border-left: 4px solid var(--haupt); }

/* Suche und Formulare */
.suche {
    display: flex; align-items: center; gap: 8px; margin: 12px 0;
    padding: 0 12px; min-height: var(--tippen); border-radius: 12px;
    background: var(--flaeche); border: 1px solid var(--linie); color: var(--leise);
}
.suche:focus-within { outline: 2px solid var(--haupt); outline-offset: 1px; }
.suche input, .karte .suche input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text); min-height: 44px; }

.anmeldung { max-width: 380px; margin: 8vh auto 0; }
.anmeldung-kopf { text-align: center; margin-bottom: 24px; }
.anmeldung-kopf h1 { margin: 12px 0 4px; font-size: 1.5rem; }
.logo-zeichen {
    width: 56px; height: 56px; margin: 0 auto; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--haupt); color: var(--auf-haupt); font-size: 1.8rem; font-weight: 700;
}
.formular { display: grid; gap: 14px; }
.formular label { display: grid; gap: 6px; font-size: .9rem; color: var(--leise); }
.formular input {
    min-height: var(--tippen); padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit;
}
.formular input:focus { outline: 2px solid var(--haupt); outline-offset: 1px; }
.haupt-knopf, .zweit-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tippen); padding: 0 20px; border-radius: 12px; font: inherit; font-weight: 600; cursor: pointer;
}
.haupt-knopf { border: 0; background: var(--haupt); color: var(--auf-haupt); }
.haupt-knopf:disabled { opacity: .6; cursor: default; }
.zweit-knopf { margin-top: 16px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); }
.fehler { margin: 0; color: var(--gefahr); }

.symbol { flex: none; }

/* Datenstand und Hinweise (App am Gerät) */
.datenstand { margin: 4px 0 0; }
a.kennzahl { text-decoration: none; color: inherit; }
.hinweis { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--gefahr); background: color-mix(in srgb, var(--gefahr) 8%, var(--flaeche)); }
.hinweis p { margin: 0 0 6px; }

/* Schalter in Einstellungen */
.schalter { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.schalter input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--haupt); flex: none; }
.schalter > span { display: grid; gap: 4px; }

/* Erfassung: Schritte, Felder, Auswahl, Fotos */
.schritte { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 12px; scrollbar-width: none; }
.schritt { flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--leise); font: inherit; font-size: .85rem; cursor: pointer; }
.schritt.aktiv { background: var(--haupt); color: var(--auf-haupt); border-color: var(--haupt); font-weight: 600; }
.schrittinhalt { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
.feld { display: grid; gap: 6px; font-size: .9rem; color: var(--leise); border: 0; padding: 0; margin: 0; }
.feld > span, .feld > legend { color: var(--leise); padding: 0; }
/* Kästchen und Optionsfelder ausgenommen: sie wurden sonst so breit wie die Karte (GS 07.11.2026). */
.feld input:not([type=checkbox]):not([type=radio]), .feld select, .feld textarea,
.karte input:not([type=checkbox]):not([type=radio]), .karte textarea {
    min-height: var(--tippen); padding: 8px 12px; border-radius: 10px; width: 100%;
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit;
}
.feld textarea, .karte textarea { min-height: 72px; resize: vertical; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.karte.zwei, .karte.drei { align-items: end; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; }
.chip.an { background: color-mix(in srgb, var(--haupt) 14%, var(--flaeche)); border-color: var(--haupt); color: var(--haupt-text); font-weight: 600; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.segment button { min-height: var(--tippen); border: 0; border-right: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; }
.segment button:last-child { border-right: 0; }
.segment button.an { background: var(--haupt); color: var(--auf-haupt); font-weight: 600; }
.knopfzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.knopfzeile .zweit-knopf { margin-top: 0; }
/* Schritte: „Zurück“ immer links unten, „Weiter“ immer rechts unten – fest über den Reitern, auch bei kurzen Schritten. */
.weiterzeile {
    position: fixed; left: 0; right: 0; bottom: var(--reiter-hoehe); z-index: 9;
    justify-content: space-between; flex-wrap: nowrap; margin: 0; padding: 10px 16px;
    background: var(--grund); border-top: 1px solid var(--linie);
}
.weiterzeile .zurueck { margin-right: auto; }
.weiterzeile .weiter { margin-left: auto; }
.inhalt:has(.weiterzeile) { padding-bottom: calc(var(--reiter-hoehe) + 96px); }
@media (min-width: 900px) {
    .weiterzeile { left: var(--leiste-breite); bottom: 0; padding: 10px 32px; }
    .inhalt:has(.weiterzeile) { padding-bottom: 96px; }
}
.haupt-knopf.breit { width: 100%; margin-top: 12px; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.foto { display: grid; gap: 8px; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--linie); }
.foto.ausgeblendet img { opacity: .4; }
/* Foto antippen = Einzeichnen; der Stift rechts unten zeigt, dass es geht. */
.foto-bild { position: relative; display: block; }
.foto-bild img { display: block; }
.foto-nummer {
    position: absolute; left: 8px; top: 8px; min-width: 32px; height: 32px; padding: 0 9px; display: grid; place-items: center;
    border-radius: 999px; background: var(--haupt); color: #FFFFFF; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.foto-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
.foto-reihe { display: inline-flex; gap: 8px; flex: none; }
.symbol-knopf.leise-knopf { color: var(--text); }
.symbol-knopf:disabled { opacity: .35; cursor: default; }
.foto-stift {
    position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 48px; height: 48px;
    border-radius: 50%; background: rgba(0, 0, 0, .65); color: #FFFFFF; box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
/* Fotos hinzufügen: vier Knöpfe in einer Zeile, Symbol mit kurzer Beschriftung. */
.aufnahme-leiste { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.aufnahme-knopf {
    display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 72px; padding: 8px 4px;
    border: 1px solid var(--linie); border-radius: 14px; background: var(--flaeche); color: var(--text);
    font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.aufnahme-knopf.haupt { background: var(--haupt); border-color: var(--haupt); color: #FFFFFF; }
.aufnahme-knopf:disabled { opacity: .5; cursor: default; }
.unterschrift canvas { width: 100%; max-width: 600px; aspect-ratio: 600 / 220; border: 1px dashed var(--leise); border-radius: 10px; background: #fff; display: block; }
.unterschrift .knopfzeile { margin-top: 8px; }
.pruefliste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pruefliste li::before { content: "● "; }
.pruefliste li.ok::before { color: #15803D; }
.pruefliste li.offen::before { color: #B45309; }
.hinweis-info { padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--haupt) 8%, var(--flaeche)); border: 1px solid var(--linie); }
a.karte.projekt { display: block; }

/* Erfassungsmasken auch auf breiten Bildschirmen lesbar halten */
.schrittinhalt { max-width: 760px; }

/* Firmendaten */
.logo-vorschau { max-width: 260px; max-height: 100px; object-fit: contain; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 6px; }

/* Einzeichnen */
a.chip { display: inline-flex; align-items: center; text-decoration: none; }

/* Fehlerseite (FehlerGrenze) und Fehlerprotokoll */
.fehlerseite { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.protokoll-eintrag { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.4; max-height: 260px; overflow: auto; }

/* Hänger-Wächter (index.html): die App reagiert gerade nicht */
#haenger { display: none; position: fixed; left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 1001; padding: 12px 16px; border-radius: var(--radius); background: #FEF3C7; color: #1C1917; box-shadow: 0 4px 16px rgb(0 0 0 / .25); }

/* Textbausteine unter Textfeldern */
.bausteine { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 8px; }
.baustein { border: 1px dashed var(--linie); background: transparent; color: inherit; border-radius: 999px; padding: 6px 12px; font-size: 13px; text-align: left; }

/* Gefährliche Bestätigung (z. B. Partei entfernen) */
.zweit-knopf.gefahr { color: var(--gefahr); border-color: var(--gefahr); }

/* Warnung zum Projekt (Notizen) */
.karte.warnung { border-color: var(--gefahr); }

/* Kostenvoranschlag */
.belegreiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.position-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.position.gruppe { border-left: 4px solid var(--haupt); }
.position.summe { background: color-mix(in srgb, var(--haupt) 6%, var(--flaeche)); }
.artikel.gewaehlt { border-color: var(--haupt); }
.karte.summen { margin-top: 12px; }

/* Berichte am Gerät: Seiten als Bilder, „Größer“ zum Lesen kleiner Schrift (waagrecht scrollen). */
.berichtseiten { display: grid; gap: 12px; margin-top: 12px; overflow-x: auto; }
.berichtseite { width: 100%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.berichtseiten { --zoom: 1; }
.berichtseiten .berichtseite { width: calc(100% * var(--zoom)); max-width: none; }

/* Abschnitte mit „Neu“ oben rechts (Beteiligte, Parteien); kurze Karten, eingeklappt ab fünf Einträgen. */
.abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 8px; }
.abschnitt-kopf .abschnitt { margin: 0; }
.anzahl { color: var(--leise); font-weight: 400; margin-left: 4px; }
.neu-knopf {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
    background: var(--haupt); color: var(--auf-haupt); text-decoration: none;
}
.karte.kurz { display: grid; gap: 2px; padding: 12px 16px; }
.karte-name { font-weight: 600; text-decoration: none; color: inherit; }
.rollen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.rolle {
    font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; text-decoration: none;
    background: color-mix(in srgb, var(--haupt) 12%, var(--flaeche)); color: var(--haupt-text);
}
.anruf {
    justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 6px; padding: 0 14px;
    border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; font-size: .9rem;
}
.mehr-zeigen {
    margin-top: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--haupt-text);
    font: inherit; font-weight: 600; cursor: pointer;
}
.liste + .knopfzeile { margin-top: 20px; }
.feld[role="radiogroup"] { margin-bottom: 12px; }

/* Symbol der Erfassungsart (Besichtigung, Leckortung) in Kacheln und Listen. */
.art-symbol {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
    background: color-mix(in srgb, var(--haupt) 12%, var(--flaeche)); color: var(--haupt-text);
}
.schnell-eintrag { gap: 12px; }
.karte.mit-symbol { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.karte.mit-symbol > .art-symbol { grid-row: span 2; }

/* Unterschrift: Mülleimer zum Löschen, „übernehmen“ rechts; in der Berichtsansicht als Blatt über der unteren Leiste. */
.symbol-knopf {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--gefahr); cursor: pointer;
}
.unterschrift .knopfzeile .rechts { margin-left: auto; }
.unterschrift-blatt {
    position: fixed; left: 0; right: 0; bottom: var(--reiter-hoehe); z-index: 11;
    display: grid; gap: 10px; padding: 16px; background: var(--flaeche); border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); border-radius: 18px 18px 0 0;
}
@media (min-width: 900px) { .unterschrift-blatt { left: var(--leiste-breite); bottom: 0; } }
a.haupt-knopf, a.zweit-knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Einzeichnen: Vollbild-Editor über allem (auch über den Reitern), immer dunkel wie in Foto-Apps. */
.bildeditor {
    position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column;
    background: #111111; color: #F5F5F4; padding-top: env(safe-area-inset-top);
}
.editor-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 12px; }
.editor-titel { font-weight: 600; flex: 1; text-align: center; }
.editor-drehen { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #FFFFFF; cursor: pointer; }
.editor-drehen:disabled { opacity: .4; }
.editor-link { color: #F5F5F4; text-decoration: none; padding: 10px 6px; border: 0; background: none; font: inherit; cursor: pointer; }
.editor-fertig { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--haupt); color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.editor-fertig:disabled { opacity: .5; }
.editor-fehler { margin: 0 12px 8px; }
.editor-flaeche { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.editor-bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.editor-lupe {
    position: absolute; top: 12px; left: 12px; width: 130px; height: 130px; display: none; pointer-events: none;
    border-radius: 50%; border: 3px solid #FFFFFF; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); background: #111111;
}
.editor-lupe.an { display: block; }
.editor-lupe.rechts { left: auto; right: 12px; }
.editor-ueberlagerung { position: absolute; inset: 0; pointer-events: none; }
.editor-ueberlagerung > * { pointer-events: auto; }
.editor-laden { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #A8A29E; }
.editor-ganz {
    position: absolute; right: 12px; bottom: 12px; z-index: 2; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
    background: rgba(0, 0, 0, .65); color: #FFFFFF; font: inherit; font-size: .85rem; cursor: pointer;
}
.editor-text {
    position: absolute; width: min(70%, 320px); border: 0; border-radius: 8px; padding: 8px 12px;
    outline: 2px solid #FFFFFF; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); font: 700 18px/1.2 "Segoe UI", Roboto, Arial, sans-serif;
}
.editor-text::placeholder { color: inherit; opacity: .6; }
.editor-plus {
    position: absolute; transform: translate(-50%, -50%); min-height: 40px; padding: 0 16px; border: 2px solid #FFFFFF; border-radius: 999px;
    background: rgba(0, 0, 0, .7); color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer;
}
.editor-ueberlagerung > .editor-hinweis {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #FFFFFF; font-size: .85rem;
}
.editor-farben { display: flex; justify-content: center; gap: 16px; padding: 8px; background: #1C1B1A; border-bottom: 1px solid #2E2C2A; }
.editor-leiste {
    display: flex; align-items: center; justify-content: space-between; gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #1C1B1A;
}
.editor-werkzeug {
    flex: 1 1 0; min-width: 0; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 58px; padding: 6px 2px;
    border: 0; border-radius: 12px; background: none; color: #D6D3D1; font: inherit; font-size: .72rem; cursor: pointer;
}
.editor-werkzeug.schmal { flex: 0 0 40px; }
.editor-werkzeug.an { background: color-mix(in srgb, var(--haupt) 40%, transparent); color: #FFFFFF; font-weight: 600; }
.editor-werkzeug:disabled { opacity: .3; }
.editor-farbe { flex: none; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.editor-farbe.an { outline: 2px solid #FFFFFF; outline-offset: -2px; }
.editor-punkt { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--punkt); border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.editor-punkt.klein { width: 24px; height: 24px; }
/* Grundriss: Geschoss im Kopf, Blätter über der Werkzeugleiste (Raum anlegen, Symbole, ausgewählter Raum). */
.editor-geschoss { min-height: 40px; padding: 0 10px; border: 1px solid #44403C; border-radius: 10px; background: #1C1B1A; color: #F5F5F4; font: inherit; }
.editor-blatt { display: grid; gap: 10px; padding: 12px; background: #1C1B1A; border-top: 1px solid #2E2C2A; color: #F5F5F4; max-height: 55vh; overflow-y: auto; }
.editor-blatt .zeile { display: flex; gap: 8px; align-items: end; }
.editor-blatt label { display: grid; gap: 4px; font-size: .78rem; color: #A8A29E; flex: 1; min-width: 0; }
.editor-blatt label.mass { flex: 0 0 84px; }
.editor-blatt input { min-height: 44px; padding: 0 10px; border: 1px solid #44403C; border-radius: 10px; background: #111111; color: #F5F5F4; font: inherit; width: 100%; box-sizing: border-box; }
.editor-blatt .info { font-size: .85rem; color: #D6D3D1; }
.editor-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.editor-chip { min-height: 36px; padding: 0 12px; border: 1px solid #44403C; border-radius: 999px; background: #262422; color: #F5F5F4; font: inherit; font-size: .85rem; cursor: pointer; }
.editor-chip.an { border-color: var(--haupt); background: color-mix(in srgb, var(--haupt) 35%, transparent); }
.editor-chip.ecke { min-width: 44px; font-size: 1.3rem; line-height: 1; }
/* Stand eines Messpunkts (wie die Farben im Grundriss, auf dunklem Grund heller) */
.editor-stufe { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-weight: 600; white-space: nowrap; }
.editor-stufe::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.stufe-trocken { color: #4ADE80; } .stufe-trocknet { color: #FBBF24; } .stufe-nass { color: #F87171; } .stufe-gemessen { color: #D6D3D1; } .stufe-referenz { color: #60A5FA; }
/* Foto verorten: Auswahl der Fotos im Bericht mit ihrer Nummer */
.editor-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 34vh; overflow-y: auto; }
.editor-fotos button { position: relative; aspect-ratio: 1; padding: 0; border: 1px solid #44403C; border-radius: 10px; overflow: hidden; background: #111111; cursor: pointer; }
.editor-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editor-fotos span { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 999px; background: #334155; color: #FFFFFF; font-size: .75rem; font-weight: 700; }
.editor-fotovorschau { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.editor-wandkopf { display: flex; align-items: center; gap: 10px; padding: 6px 12px 10px; color: #F5F5F4; }
.editor-wandkopf .wandtitel { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-wandkopf label { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: #A8A29E; }
.editor-wandkopf input { width: 72px; min-height: 40px; padding: 0 8px; border: 1px solid #44403C; border-radius: 10px; background: #111111; color: #F5F5F4; font: inherit; }
.editor-raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.editor-gross { min-height: 48px; border: 0; border-radius: 12px; background: var(--haupt); color: #FFFFFF; font: inherit; font-weight: 600; cursor: pointer; }
.editor-gross.zweit { background: #2E2C2A; }

/* Geräteumbuchung (GS 07.11.2026) */
.scan-eingabe { display: flex; gap: 8px; align-items: stretch; margin-top: 12px; }
.scan-eingabe input, .suchfeld {
    flex: 1; min-width: 0; min-height: var(--tippen); padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit;
}
/* Herkunft der gescannten Geräte: Zählung, kein Hinweis (darum nicht in der Hauptfarbe) */
.herkunft .etikett { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.scan-eingabe .zweit-knopf { margin-top: 0; }
.scan-meldung { margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
.scan-meldung.gut { background: color-mix(in srgb, #15803D 12%, var(--flaeche)); color: #15803D; }
.scan-meldung.schlecht { background: color-mix(in srgb, var(--gefahr) 10%, var(--flaeche)); color: var(--gefahr); }
.geraet-zeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.geraet-zeile.unbekannt { border-color: var(--gefahr); }
.text-warnung, .geraet-zeile .warnung, .karte .warnung { color: #B45309; }
.suchfeld { width: 100%; margin: 8px 0; flex: none; }
.auswahl-liste { max-height: 50vh; overflow-y: auto; padding: 0 16px; }
.auswahl-liste .schalter { padding: 12px 0; align-items: center; border-bottom: 1px solid var(--linie); }
.auswahl-liste .schalter:last-child { border-bottom: 0; }
.auswahl-liste .schalter input { margin-top: 0; }
.karte > .schalter + .schalter { margin-top: 14px; }

/* Menü aus ganzen Zeilen (Einstellungen, Mehr): gleich breit, gut zu treffen, Pfeil rechts. */
.menue { display: grid; margin-top: 16px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); overflow: hidden; }
.menue a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tippen);
    padding: 12px 16px; color: var(--text); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--linie);
}
.menue a:last-child { border-bottom: 0; }
.menue a::after { content: "›"; font-size: 1.4rem; line-height: 1; color: var(--leise); }
.menue .leise { display: block; font-weight: 400; font-size: .85rem; }

/* Weitergaben: am Handy untereinander, ab Tablet nebeneinander. */
.weitergabe { display: grid; gap: 10px; }
.weitergabe .zeile-ende { display: flex; justify-content: flex-end; }
.weitergabe .zeile-ende .zweit-knopf { margin-top: 0; }
@media (min-width: 600px) { .weitergabe { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }
details.karte > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
details.karte > summary::-webkit-details-marker { display: none; }
.geraete-liste { margin: 8px 0 0; padding-left: 18px; }

/* Berichte im Kundenweb: Einstellungen je Bericht untereinander, Reihenfolge schmal. */
.bericht-einstellungen { display: grid; gap: 12px; margin: 12px 0 4px; }
.bericht-einstellungen .schalter { align-items: center; }
.bericht-einstellungen .schalter input { margin-top: 0; }
.reihenfolge { display: flex; align-items: center; gap: 12px; }
.karte .reihenfolge input[type=number] { width: 6em; }

/* Abstände (GS 07.11.2026): Knöpfe nicht direkt am Feld darüber, Karten untereinander nicht aneinander.
   In Rasterlisten (.liste) sorgt der Spaltenabstand dafür. */
.karte > .feld + .knopfzeile, .karte > .feld + .haupt-knopf, .karte > .feld + .zweit-knopf { margin-top: 14px; }
.karte + .karte { margin-top: 12px; }
.liste > .karte + .karte, .liste > * + .karte { margin-top: 0; }