/* ==========================================================================
   Amperon - Oberflaeche
   Ein Stylesheet, keine Aufbaukette. Die Firmenfarben kommen aus den
   Stammdaten und werden im Layout als Variablen gesetzt - dadurch passt sich
   die Anwendung beim Kopieren zu einer anderen Firma von allein an.
   ========================================================================== */

:root {
    --farbe-primaer: #1d4ed8;
    --farbe-akzent: #0f766e;

    --grund: #f4f6f9;
    --flaeche: #ffffff;
    --flaeche-2: #f8fafc;
    --rand: #e2e8f0;
    --rand-stark: #cbd5e1;

    /* Bildlaufleisten: gedeckt statt Systemgrau, Rinne immer durchsichtig */
    --laufleiste: rgba(15, 23, 42, .20);
    --laufleiste-stark: rgba(15, 23, 42, .34);
    --laufleiste-hell: rgba(255, 255, 255, .26);

    --text: #0f172a;
    --text-leise: #64748b;
    --text-invers: #ffffff;

    --gruen: #15803d;
    --gruen-hell: #dcfce7;
    --gelb: #a16207;
    --gelb-hell: #fef3c7;
    --rot: #b91c1c;
    --rot-hell: #fee2e2;
    --blau: #1e40af;
    --blau-hell: #dbeafe;

    --radius: 10px;
    --radius-klein: 6px;
    --schatten: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
    --schatten-stark: 0 8px 30px rgba(15, 23, 42, .12);

    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

    --kopf-hoehe: 56px;
    --menue-breite: 240px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

[hidden] { display: none !important; }

[dir="rtl"] body { direction: rtl; }

h1, h2, h3, h4 { margin: 0 0 .6em; line-height: 1.25; font-weight: 600; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

p { margin: 0 0 1em; }
a { color: var(--farbe-primaer); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, pre { font-family: var(--schrift-mono); font-size: .92em; }

/* --- Grundgeruest --------------------------------------------------------- */

.app {
    display: grid;
    grid-template-columns: var(--menue-breite) 1fr;
    grid-template-rows: var(--kopf-hoehe) 1fr;
    grid-template-areas: "marke kopf" "menue inhalt";
    min-height: 100vh;
}

.marke {
    grid-area: marke;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--text);
    color: var(--text-invers);
    font-weight: 600;
    letter-spacing: .01em;
    overflow: hidden;
}
.marke img { max-height: 30px; max-width: 120px; object-fit: contain; }
.marke .marke-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.kopf {
    grid-area: kopf;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 20px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}
.kopf-titel { font-weight: 600; font-size: 16px; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------------------
   Bildlaufleisten

   Die Voreinstellung von Windows setzt einen breiten, hellgrauen Balken mit
   weisser Rinne. In der dunklen Seitenleiste sticht der als heller Streifen
   heraus und zerschneidet sie optisch.

   Deshalb: ueberall schmal und farblich passend, und in der Seitenleiste
   erscheint der Balken erst beim Zeigen darauf. Die Rinne bleibt immer
   durchsichtig - sie ist es, die den harten weissen Kontrast erzeugt hat.

   Die -webkit-Regeln stehen bewusst in einem @supports-Zweig fuer aeltere
   Browser: Kennt ein Browser scrollbar-width, ignoriert er sie ohnehin, und
   beides gleichzeitig zu setzen fuehrt dort zu widerspruechlichem Verhalten.
   -------------------------------------------------------------------------- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--laufleiste) transparent;
}

.menue {
    /* In der Seitenleiste erst beim Zeigen - so bleibt die Flaeche ruhig. */
    scrollbar-color: transparent transparent;
}
.menue:hover,
.menue:focus-within { scrollbar-color: var(--laufleiste-hell) transparent; }

@supports not (scrollbar-width: thin) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb {
        /* Der durchsichtige Rand mit background-clip laesst den Balken
           schweben, statt die volle Breite auszufuellen. */
        background: var(--laufleiste);
        background-clip: padding-box;
        border: 3px solid transparent;
        border-radius: 99px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--laufleiste-stark); background-clip: padding-box; }

    .menue::-webkit-scrollbar-thumb { background: transparent; }
    .menue:hover::-webkit-scrollbar-thumb {
        background: var(--laufleiste-hell);
        background-clip: padding-box;
    }
}

.menue {
    grid-area: menue;
    background: #111827;
    color: #cbd5e1;
    padding: 12px 0 24px;
    overflow-y: auto;
}
.menue-gruppe { padding: 14px 16px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #64748b; }
.menue a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; color: #cbd5e1; text-decoration: none;
    border-left: 3px solid transparent; font-size: 14px;
}
.menue a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.menue a.aktiv { background: rgba(255,255,255,.1); color: #fff; border-left-color: var(--farbe-primaer); font-weight: 500; }
.menue svg { width: 18px; height: 18px; flex: none; opacity: .85; }

.inhalt { grid-area: inhalt; padding: 22px 24px 60px; max-width: 1500px; }

@media (max-width: 900px) {
    .app { grid-template-columns: 1fr; grid-template-areas: "marke" "kopf" "inhalt"; }
    .menue { position: fixed; inset: var(--kopf-hoehe) auto 0 0; width: 260px; z-index: 60;
             transform: translateX(-100%); transition: transform .2s; box-shadow: var(--schatten-stark); }
    .menue.offen { transform: none; }
    [dir="rtl"] .menue { inset: var(--kopf-hoehe) 0 0 auto; transform: translateX(100%); }
    [dir="rtl"] .menue.offen { transform: none; }
    .inhalt { padding: 16px 14px 48px; }
    .menue-schalter { display: inline-flex !important; }
}

.knopf.menue-schalter { display: none; }

/* --- Flaechen ------------------------------------------------------------- */

.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    margin-bottom: 18px;
    overflow: hidden;
}
.karte-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border-bottom: 1px solid var(--rand); background: var(--flaeche-2);
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte-inhalt { padding: 18px; }
.karte-fuss { padding: 12px 18px; border-top: 1px solid var(--rand); background: var(--flaeche-2); }

.raster { display: grid; gap: 18px; }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.raster-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

@media (max-width: 480px) {
    .raster-2, .raster-3, .raster-4 { grid-template-columns: minmax(0, 1fr); }
    .raster > * { min-width: 0; }
}

/* --- Bedienelemente ------------------------------------------------------- */

.knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 15px; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--text); font: inherit; font-size: 14px; font-weight: 500;
    cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s;
}
.knopf:hover:not(:disabled) { background: var(--flaeche-2); border-color: var(--text-leise); text-decoration: none; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf svg { width: 16px; height: 16px; }

.knopf-primaer { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: #fff; }
.knopf-primaer:hover:not(:disabled) { filter: brightness(1.08); background: var(--farbe-primaer); border-color: var(--farbe-primaer); }

.knopf-gefahr { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf-gefahr:hover:not(:disabled) { filter: brightness(1.08); background: var(--rot); }

.knopf-still { border-color: transparent; background: transparent; color: var(--text-leise); }
.knopf-still:hover:not(:disabled) { background: var(--flaeche-2); color: var(--text); }

.knopf-klein { padding: 5px 10px; font-size: 13px; }
.knopf-gross { padding: 12px 22px; font-size: 16px; }

/* Grosse Kacheln fuer Monteure auf Handy und Tablet */
.kachel-knopf {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 26px 24px; min-height: 132px;
    background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
    box-shadow: var(--schatten); color: var(--text); text-decoration: none;
    font-size: 19px; font-weight: 600; transition: transform .12s, box-shadow .12s;
}
.kachel-knopf:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--schatten-stark); }
.kachel-knopf svg { width: 30px; height: 30px; color: var(--farbe-primaer); }
.kachel-knopf small { font-size: 14px; font-weight: 400; color: var(--text-leise); }

/* --- Formulare ------------------------------------------------------------ */

.feld { margin-bottom: 14px; }
.feld label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--text-leise); }
.feld .hinweis { margin-top: 4px; font-size: 12.5px; color: var(--text-leise); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], input[type=search], input[type=url], input[type=tel], select, textarea {
    width: 100%; padding: 8px 11px; font: inherit; font-size: 14.5px; color: var(--text);
    background: var(--flaeche); border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
    transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--farbe-primaer);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--farbe-primaer) 18%, transparent);
}
textarea { min-height: 84px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: var(--flaeche-2); color: var(--text-leise); }

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

/* Der digitale Auftrag ist fuer eine Hand am Smartphone gebaut. Die leichten
   Farbkanten trennen die Arbeitsschritte, ohne ein neues Designsystem
   einzufuehren. */
.digital-abschnitt { border-inline-start-width: 4px; }
.digital-auftrag { border-inline-start-color: color-mix(in srgb, var(--farbe-primaer) 65%, var(--rand)); }
.digital-material { border-inline-start-color: color-mix(in srgb, var(--farbe-akzent) 65%, var(--rand)); }
.digital-fotos { border-inline-start-color: color-mix(in srgb, var(--blau) 55%, var(--rand)); }
.digital-unterschriften { border-inline-start-color: color-mix(in srgb, var(--gelb) 55%, var(--rand)); }
.freitext-bereich { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rand); }
.digital-speicherstatus { position: static; box-shadow: none; }

.signatur-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.signatur-block {
    min-width: 0; padding: 13px;
    border: 1px solid var(--rand); border-radius: var(--radius);
    background: var(--flaeche-2);
}
.signatur-pad { margin-top: 10px; }
.signatur-pad canvas, .signatur-vorschau {
    display: block; width: 100%; height: 150px;
    border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
    background: #fff;
}
/* object-fit gehoert nur an die Vorschau.

   Am Zeichenfeld war es ein Fehler: Es passt die Zeichenflaeche mittig in den
   Rahmen ein, statt sie zu fuellen. Die Strichberechnung ging aber von der
   vollen Rahmenflaeche aus, und deshalb erschien der Strich versetzt zum
   Zeiger. Das Feld hat jetzt ohnehin genau die angezeigte Groesse. */
.signatur-vorschau { object-fit: contain; }
.signatur-pad canvas { touch-action: none; cursor: crosshair; }
.signatur-pad > span { display: block; margin-top: 4px; }
.signatur-aktionen { margin-top: 9px; }

@media (max-width: 640px) {
    .signatur-raster { grid-template-columns: 1fr; }
    .signatur-pad canvas, .signatur-vorschau { height: 130px; }
    .digital-abschnitt .karte-kopf { align-items: stretch; flex-direction: column; }
    .digital-abschnitt .karte-kopf .reihe { width: 100%; }
    .digital-abschnitt .karte-kopf .knopf { min-height: 42px; flex: 1; }
}

.schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.schalter input { width: auto; margin: 0; }

/* Eine Zeile je Zugangsschluessel: Zustand, Maske, Feld und Knopf beieinander.
   Zuvor lagen Eingabe und Speicherknopf weit auseinander - der haeufigste
   Bedienfehler ueberhaupt. */
.schluessel-zeile {
    padding: 14px 16px; margin-bottom: 12px;
    border: 1px solid var(--rand); border-radius: var(--radius);
    background: var(--flaeche-2);
}
.schluessel-zeile:last-child { margin-bottom: 0; }
.schluessel-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.schluessel-maske {
    font-size: 12.5px; color: var(--text-leise); margin-bottom: 8px;
}
.schluessel-maske code {
    background: var(--flaeche); padding: 2px 7px; border-radius: 4px;
    border: 1px solid var(--rand); color: var(--text);
}
.schluessel-zeile .meldung { margin-top: 10px; margin-bottom: 0; }

/* --- Tabellen ------------------------------------------------------------- */

.tabelle-rahmen { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabelle th, table.tabelle td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
[dir="rtl"] table.tabelle th, [dir="rtl"] table.tabelle td { text-align: right; }
table.tabelle th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); font-weight: 600; background: var(--flaeche-2); white-space: nowrap; }
table.tabelle tbody tr:hover { background: var(--flaeche-2); }
table.tabelle td.zahl, table.tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabellen mit dieser Klasse werden am schmalen Handy zu lesbaren Karten.
   Die normale Tabellenansicht auf Tablet und Desktop bleibt unveraendert. */
@media (max-width: 640px) {
    table.mobile-karten thead { display: none; }
    table.mobile-karten, table.mobile-karten tbody, table.mobile-karten tr,
    table.mobile-karten td { display: block; width: 100%; }
    table.mobile-karten tr { padding: 9px 12px; border-bottom: 1px solid var(--rand); }
    table.mobile-karten td {
        display: grid; grid-template-columns: minmax(78px, .36fr) minmax(0, 1fr);
        gap: 10px; align-items: start; padding: 6px 0; border: none;
        overflow-wrap: anywhere;
    }
    table.mobile-karten td::before {
        content: attr(data-label); color: var(--text-leise);
        font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    }
    table.mobile-karten td[colspan]::before { display: none; }
}

/* --- Marken und Meldungen ------------------------------------------------- */

.marke-punkt { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 500; }
.marke-gruen { background: var(--gruen-hell); color: var(--gruen); }
.marke-gelb { background: var(--gelb-hell); color: var(--gelb); }
.marke-rot { background: var(--rot-hell); color: var(--rot); }
.marke-grau { background: var(--rand); color: var(--text-leise); }
.marke-blau { background: #dbeafe; color: #1e40af; }

.meldung { padding: 11px 15px; border-radius: var(--radius-klein); margin-bottom: 14px; font-size: 14px; border: 1px solid; }
.meldung-erfolg { background: var(--gruen-hell); border-color: #bbf7d0; color: #14532d; }
.meldung-warnung { background: var(--gelb-hell); border-color: #fde68a; color: #713f12; }
.meldung-fehler { background: var(--rot-hell); border-color: #fecaca; color: #7f1d1d; }
.meldung-info { background: #dbeafe; border-color: #bfdbfe; color: #1e3a8a; }

.leise { color: var(--text-leise); }
.klein { font-size: 13px; }
.mono { font-family: var(--schrift-mono); }
.zahl { font-variant-numeric: tabular-nums; }

.kennzahl { padding: 16px 18px; }
.kennzahl .wert { font-size: 27px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kennzahl .titel { font-size: 12.5px; color: var(--text-leise); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }

/* --- Fortschritt ---------------------------------------------------------- */

.balken { height: 8px; background: var(--rand); border-radius: 99px; overflow: hidden; }
.balken > span { display: block; height: 100%; background: var(--farbe-primaer); transition: width .3s ease; }

/* --- Suchendes Auswahlfeld ------------------------------------------------ */
/* Ein natives select kann weder durchsichtig sein noch beim Tippen filtern.
   Deshalb hier ein Eingabefeld mit eigener Trefferliste. */

.combo { position: relative; }
.combo-eingabe { width: 100%; }
.combo-liste {
    /* Die Liste haengt beim Oeffnen am Seitenkoerper, nicht im Eingabefeld:
       Sonst schneidet die Karte sie ab (overflow: hidden). Absolut in
       Seitenkoordinaten - NICHT fest, denn die Karten haben backdrop-filter,
       und das macht sie zum Bezugsrahmen fuer fest positionierte Nachkommen.
       Lage und Breite setzt die Combobox beim Oeffnen. */
    position: absolute; z-index: 400;
    max-height: 320px; overflow-y: auto;
    background: var(--flaeche); border: 1px solid var(--rand-stark);
    border-radius: var(--radius-klein); box-shadow: var(--schatten-stark);
    display: none;
}
.combo-liste.offen { display: block; }
/* Der Hinweis auf einen leeren Bestand ist keine Fehlermeldung, sondern
   eine Handlungsanweisung - er darf deshalb auffallen. */
.combo-hinweis { padding: 12px; line-height: 1.5; }
.combo-hinweis strong { display: block; color: var(--text); margin-bottom: 3px; }
.combo-hinweis .klein { color: var(--text-leise); }

.combo-treffer { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--rand); }
.combo-treffer:last-child { border-bottom: none; }
.combo-treffer:hover, .combo-treffer.aktiv { background: color-mix(in srgb, var(--farbe-primaer) 10%, transparent); }
.combo-treffer .titel { font-weight: 500; font-size: 14px; }
.combo-treffer .zusatz { font-size: 12.5px; color: var(--text-leise); margin-top: 1px; }
.combo-leer { padding: 12px; color: var(--text-leise); font-size: 13.5px; text-align: center; }

/* --- Zettelansicht mit Overlay -------------------------------------------- */

.zettel { margin-bottom: 26px; }
.karte.zettel {
    /* Anders als overflow:hidden erzeugt clip keinen Scrollcontainer und
       erlaubt der Bildspalte, innerhalb der Karte sticky zu bleiben. */
    overflow: clip;
}

.zettel-buehne {
    position: relative; display: inline-block; max-width: 100%;
    background: #fff; border: 1px solid var(--rand); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--schatten);
}
/* Hoehe bleibt bewusst automatisch: Das Bild selbst bestimmt sie, damit die
   Buehne IMMER exakt so gross ist wie das Blatt. Nur so sitzen die Overlays,
   die in Prozent der Buehne gesetzt sind, genau auf den Zeilen. Ein
   object-fit mit fester Hoehe wuerde bei kleinsten Abweichungen Raender
   erzeugen und alle Felder verschieben.

   Die Buehne traegt zusaetzlich das Seitenverhaeltnis aus der Datenbank als
   Stil. Das wirkt nur, solange das Bild noch nicht geladen ist, und gibt ihr
   in dieser Zeit eine Hoehe - sonst waere sie null Pixel hoch, das Bild kaeme
   nie in den Sichtbereich und wuerde deshalb nie geladen. Genau diese Falle
   hatte den Zettel unsichtbar gemacht. */
.zettel-buehne img { display: block; width: 100%; height: auto; }

/* Das Feld liegt buendig ueber der Materialspalte und ist durchsichtig,
   damit die Handschrift dahinter lesbar bleibt. */
.overlay-feld {
    position: absolute;
    /* Eine Tabellenzeile ist im Bild nur rund zwei Prozent hoch. Ohne
       Mindesthoehe waere das Feld auf dem Handy kaum zu treffen. */
    min-height: 18px;
    display: flex; align-items: center;
    padding: 0; margin: 0;
    border: 2px solid; border-radius: 4px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: background .12s, box-shadow .12s;
    backdrop-filter: saturate(1.1);
}
.overlay-feld:hover { background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 3px rgba(15, 23, 42, .12); }
.overlay-feld.gruen { border-color: #16a34a; background: rgba(220, 252, 231, .34); }
.overlay-feld.gelb { border-color: #d97706; background: rgba(254, 243, 199, .40); }
.overlay-feld.rot { border-color: #dc2626; background: rgba(254, 226, 226, .40); }
/* Blau: aus dem Lexikon. Ein Mensch hat diesen Begriff schon einmal
   zugeordnet - die staerkste Aussage, die es hier gibt. */
.overlay-feld.blau { border-color: #2563eb; background: rgba(219, 234, 254, .38); }
.overlay-feld.ignoriert { border-style: dashed; opacity: .45; }
.overlay-feld.gewaehlt { box-shadow: 0 0 0 3px var(--farbe-primaer); z-index: 5; }

.overlay-text {
    font-size: 11px; font-weight: 600; line-height: 1.1;
    padding: 1px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: #0f172a; text-shadow: 0 1px 0 rgba(255,255,255,.9);
}

.overlay-nummer {
    position: absolute; inset-inline-start: -22px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--text-leise); font-variant-numeric: tabular-nums;
}

/* --- Lupe, Durchsehen, freie Plaetze -------------------------------------- */

/* Fensterrahmen um das Blatt. Wird hineingezoomt, waechst die Buehne darin
   ueber den Rahmen hinaus und laesst sich schieben. Die Overlay-Felder sind
   in Prozent gesetzt und wachsen deshalb von allein mit. */
.zettel-lupe {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - var(--kopf-hoehe) - 32px);
    max-height: calc(100dvh - var(--kopf-hoehe) - 32px);
    background: var(--flaeche-tief, #f1f5f9);
    border: 1px solid var(--rand); border-radius: var(--radius);
    overscroll-behavior: contain;
}
.zettel-lupe .zettel-buehne {
    display: block;
    margin-inline: auto;
    max-width: none;
    border: none; border-radius: 0; box-shadow: none;
}
.zettel-lupe.schiebt { cursor: grabbing; }
.zettel-lupe.schiebbar { cursor: grab; }

/* Durchsehen: solange die Taste haelt, treten die Felder stark zurueck.
   Nicht ganz weg - man soll sehen, wo sie liegen, aber die Handschrift
   darunter wieder lesen koennen. */
.zettel-arbeitsflaeche.durchsichtig .overlay-feld {
    opacity: .12;
    background: transparent;
    box-shadow: none;
    transition: opacity .08s;
}
.zettel-arbeitsflaeche.durchsichtig .overlay-feld .overlay-text { opacity: 0; }
.zettel-arbeitsflaeche.durchsichtig .overlay-leer { opacity: 0; }

/* Freier Rasterplatz: die Bilderkennung hat hier nichts gefunden. Sehr
   zurueckhaltend, damit die Zettel nicht wie ein Formular aussehen - aber
   auffindbar, sobald die Maus in die Naehe kommt. */
.overlay-leer {
    position: absolute;
    min-height: 16px;
    border: 1px dashed rgba(100, 116, 139, .45);
    border-radius: 4px;
    background: transparent;
    opacity: .35;
    cursor: copy;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .12s, background .12s;
}
.overlay-leer::after {
    content: '+ Position';
    font-size: 10.5px; font-weight: 600; color: #334155;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .95);
    opacity: 0; transition: opacity .12s;
}
.overlay-leer:hover { opacity: 1; background: rgba(255, 255, 255, .55); border-color: var(--farbe-primaer); }
.overlay-leer:hover::after { opacity: 1; }

/* Von Hand gesetzte Zeile - erkennbar, damit klar ist, was vom Zettel kommt
   und was jemand ergaenzt hat. */
.overlay-feld.manuell { border-style: dashed; }

/* Anfasser zum Verschieben und zum Aendern der Hoehe. Erscheinen erst, wenn
   das Feld gewaehlt ist, damit sie beim normalen Zuordnen nicht stoeren. */
.overlay-griff {
    position: absolute; display: none;
    width: 11px; height: 11px;
    background: var(--farbe-primaer); border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .4);
}
.overlay-feld.gewaehlt .overlay-griff { display: block; }
.overlay-griff.unten { inset-inline-end: -6px; bottom: -6px; cursor: nwse-resize; }

.overlay-feld.gewaehlt { cursor: move; }

/* Werkzeugleiste ueber dem Blatt */
.zettel-werkzeuge {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 7px 9px; margin-bottom: 8px;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
}
.zettel-werkzeuge .trenner { width: 1px; height: 20px; background: var(--rand); margin: 0 3px; }
.zettel-werkzeuge .zoom-wert {
    font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-leise);
    min-width: 44px; text-align: center;
}
.zettel-werkzeuge .knopf.aktiv { background: var(--farbe-primaer); color: #fff; border-color: var(--farbe-primaer); }

/* Tastenhinweis */
kbd {
    display: inline-block; padding: 1px 5px; font-size: 11px; font-family: inherit;
    border: 1px solid var(--rand-stark); border-bottom-width: 2px; border-radius: 4px;
    background: var(--flaeche); color: var(--text); white-space: nowrap;
}

/* --- Arbeitsliste neben dem Bild ------------------------------------------ */

.zeilen-liste { display: flex; flex-direction: column; gap: 6px; }

.zeile {
    display: grid; gap: 10px; align-items: start;
    grid-template-columns: 34px 96px 1fr;
    padding: 8px 10px; border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: var(--flaeche);
}
.zeile.gruen { border-inline-start: 4px solid #16a34a; }
.zeile.gelb { border-inline-start: 4px solid #d97706; }
.zeile.rot { border-inline-start: 4px solid #dc2626; }
.zeile.blau { border-inline-start: 4px solid #2563eb; }
.zeile.ignoriert { opacity: .5; }
.zeile.gewaehlt { box-shadow: 0 0 0 2px var(--farbe-primaer); }
.zeile .zeile-nr { font-size: 12px; color: var(--text-leise); padding-top: 9px; font-variant-numeric: tabular-nums; }
.zeile .zeile-roh { font-size: 12.5px; color: var(--text-leise); margin-top: 3px; }

@media (max-width: 720px) {
    .zeile { grid-template-columns: 28px 1fr; }
    .zeile .zeile-artikel { grid-column: 1 / -1; }
}


/* --------------------------------------------------------------------------
   Laufende Arbeit an einem Zettel

   Auswerten dauert je nach Modell und Blatt einige Sekunden bis eine gute
   Minute. Vorher war davon nichts zu sehen: Der Knopf wurde stillgelegt und
   umbeschriftet, und sobald die Seite aus einem anderen Grund neu gezeichnet
   wurde, war auch das wieder weg. Der Bediener druckte noch einmal und bekam
   die Meldung, der Zettel werde gerade ausgewertet - ohne zu wissen, dass er
   das selbst ausgeloest hatte.
   -------------------------------------------------------------------------- */

.zettel-arbeit {
    border-bottom: 1px solid var(--rand);
    background: color-mix(in srgb, var(--farbe-primaer) 6%, var(--flaeche));
}
.zettel-arbeit .reihe { align-items: center; gap: 12px; }

.arbeit-kreisel {
    width: 20px; height: 20px; flex: none;
    border: 2.5px solid color-mix(in srgb, var(--farbe-primaer) 25%, transparent);
    border-top-color: var(--farbe-primaer);
    border-radius: 50%;
    animation: arbeit-dreht .9s linear infinite;
}

@keyframes arbeit-dreht { to { transform: rotate(360deg); } }

/* Ein Balken ohne Prozentzahl: Wie lange ein Sprachmodell braucht, steht
   vorher nicht fest. Eine erfundene Zahl waere schlechter als keine. */
.arbeit-balken {
    height: 4px; margin-top: 10px; border-radius: 2px;
    background: color-mix(in srgb, var(--farbe-primaer) 15%, transparent);
    overflow: hidden;
}
.arbeit-balken > i {
    display: block; height: 100%; width: 34%;
    background: var(--farbe-primaer); border-radius: 2px;
    animation: arbeit-laeuft 1.4s ease-in-out infinite;
}

@keyframes arbeit-laeuft {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

/* Wer Bewegung im Bild nicht vertraegt, bekommt einen ruhigen Hinweis. */
@media (prefers-reduced-motion: reduce) {
    .arbeit-kreisel { animation: none; border-top-color: var(--farbe-primaer); }
    .arbeit-balken > i { animation: none; width: 100%; opacity: .5; }
}

/* --------------------------------------------------------------------------
   Drehung um eine eingegebene Gradzahl

   Zahlenfeld, Gradzeichen, Uebernehmen, Original - in dieser Reihenfolge
   gelesen ergibt es einen Satz. Vorher standen hier Minus und Plus mit einer
   Schrittweite; wer sich vertippt hatte, musste sich zurueckklicken. Jetzt
   steht im Feld der Winkel gegenueber dem Original, und "Uebernehmen" stellt
   genau den her.
   -------------------------------------------------------------------------- */

.dreh-gruppe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dreh-feld {
    width: 76px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--farbe-primaer);
    padding-inline-end: 4px;
}

/* Die kleinen Pfeilchen des Zahlenfeldes stoeren hier: Sie sind winzig,
   treffen schlecht und tun etwas anderes als "Uebernehmen". */
.dreh-feld::-webkit-outer-spin-button,
.dreh-feld::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dreh-feld { -moz-appearance: textfield; appearance: textfield; }

.dreh-einheit {
    color: var(--text-leise);
    font-weight: 600;
    margin-inline-start: -4px;
}

.dreh-gruppe .ikone { width: 14px; height: 14px; opacity: .75; }

/* --------------------------------------------------------------------------
   Kopfzeile eines digitalen Kundendienstauftrags
   -------------------------------------------------------------------------- */

.dkopf {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px;
}
.dkopf > .ikone { align-self: center; opacity: .6; }
.dfeld { display: inline-flex; align-items: baseline; gap: 6px; }

.ansicht-wahl { display: inline-flex; border: 1px solid var(--rand-stark); border-radius: var(--radius-klein); overflow: hidden; }
.ansicht-wahl button { border: none; background: var(--flaeche); padding: 6px 13px; font: inherit; font-size: 13.5px; cursor: pointer; }
.ansicht-wahl button.aktiv { background: var(--farbe-primaer); color: #fff; }

.zettel-arbeitsflaeche { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .85fr); align-items: start; }
.zettel-buehne { width: 100%; }
@media (min-width: 1101px) {
    .zettel-arbeitsflaeche[data-flaeche] > .zettel-bildspalte {
        position: sticky;
        top: 68px;
    }
}
@media (max-width: 1100px) {
    .zettel-arbeitsflaeche { grid-template-columns: 1fr; }
}

/* Auswahlleiste ueber den Zetteln eines Vorgangs. Zeigt den Stand aller
   Zettel auf einen Blick; gearbeitet wird immer an einem. */
.zettel-leiste {
    display: flex; flex-wrap: wrap; gap: 7px;
    padding: 12px 16px; margin-bottom: 14px;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--radius); box-shadow: var(--schatten);
    position: sticky; top: 0; z-index: 20;
}
.zettel-wahl {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; font: inherit; font-size: 13.5px;
    border: 1px solid var(--rand-stark); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--text); cursor: pointer;
}
.zettel-wahl:hover { background: var(--flaeche-2); }
.zettel-wahl.aktiv { background: var(--farbe-primaer); border-color: var(--farbe-primaer); color: #fff; }
.zettel-wahl.aktiv .marke-punkt { background: rgba(255,255,255,.22); color: #fff; }

.zettel-monteur {
    width: auto; max-width: 220px; min-height: 34px;
    padding-block: 5px; font-size: 13px;
}

/* Kleine, mitlaufende Vorgangsinformation. Sie ersetzt keine der ausfuehrlichen
   Karten; sie bleibt nur beim langen Scrollen erreichbar. */
.vorgang-status {
    position: fixed; inset-inline-end: 16px; bottom: 14px; z-index: 45;
    display: flex; align-items: center; gap: 8px;
}
.vorgang-kosten-sticky, .speicherstatus {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 34px; padding: 6px 11px;
    border: 1px solid var(--rand-stark); border-radius: 999px;
    background: color-mix(in srgb, var(--flaeche) 92%, transparent);
    color: var(--text-leise); box-shadow: var(--schatten);
    backdrop-filter: blur(8px); font-size: 12px; text-decoration: none;
}
.vorgang-kosten-sticky:hover { color: var(--text); text-decoration: none; }
.vorgang-kosten-sticky strong { color: var(--text); font-variant-numeric: tabular-nums; }
.speicherstatus[data-zustand="ok"] { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 35%, var(--rand)); }
.speicherstatus[data-zustand="fehler"] { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 35%, var(--rand)); }

@media (max-width: 720px) {
    .vorgang-status { inset-inline: 10px; bottom: 8px; justify-content: flex-end; }
    .vorgang-kosten-sticky span { display: none; }
    .zettel-monteur { width: 100%; max-width: none; }
    .karte.zettel > .karte-kopf { align-items: stretch; }
    .karte.zettel > .karte-kopf > .reihe { width: 100%; }
    #aufnahme-karte > .karte-kopf { align-items: stretch; flex-direction: column; }
    #aufnahme-karte > .karte-kopf > .reihe { width: 100%; flex-wrap: wrap; }
    #aufnahme-karte > .karte-kopf > .reihe .knopf {
        flex: 1 1 132px; min-width: 0; justify-content: center; white-space: normal;
    }
}

/* --- Ablegeflaeche fuer Dateien ------------------------------------------- */

.ablage {
    border: 2px dashed var(--rand-stark); border-radius: var(--radius);
    padding: 30px 20px; text-align: center; color: var(--text-leise);
    background: var(--flaeche); transition: border-color .12s, background .12s;
}
.ablage.bereit { border-color: var(--farbe-primaer); background: color-mix(in srgb, var(--farbe-primaer) 6%, var(--flaeche)); color: var(--text); }
.ablage h3 { margin-bottom: 4px; color: var(--text); }

/* --- Hinweisfenster ------------------------------------------------------- */

.fenster-grund {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
    display: none; align-items: center; justify-content: center; padding: 20px; z-index: 200;
}
.fenster-grund.offen { display: flex; }
.fenster {
    background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten-stark);
    width: 100%; max-width: 560px; max-height: 88vh; overflow: auto;
}
.fenster-kopf { padding: 15px 20px; border-bottom: 1px solid var(--rand); display: flex; justify-content: space-between; align-items: center; }
.fenster-inhalt { padding: 20px; }
.fenster-fuss { padding: 14px 20px; border-top: 1px solid var(--rand); display: flex; justify-content: flex-end; gap: 10px; background: var(--flaeche-2); }

/* --- Kurzmeldungen -------------------------------------------------------- */

.toast-bereich { position: fixed; top: 14px; inset-inline-end: 14px; z-index: 300; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast {
    padding: 11px 15px; border-radius: var(--radius-klein); background: var(--text); color: #fff;
    font-size: 14px; box-shadow: var(--schatten-stark); animation: toast-ein .2s ease;
}
.toast.erfolg { background: #166534; }
.toast.fehler { background: #991b1b; }
.toast.warnung { background: #92400e; }
@keyframes toast-ein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- Anmeldeseite --------------------------------------------------------- */

.anmelde-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--grund); }
.anmelde-kasten { width: 100%; max-width: 420px; }
.anmelde-kopf { text-align: center; margin-bottom: 22px; }
.anmelde-kopf img { max-height: 56px; max-width: 220px; object-fit: contain; margin-bottom: 12px; }
.anmelde-kopf h1 { font-size: 21px; margin-bottom: 3px; }

/* --- Druckvordruck -------------------------------------------------------- */

.vordruck-werkzeuge { padding: 14px 20px; background: var(--flaeche); border-bottom: 1px solid var(--rand); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.vordruck {
    width: 210mm; min-height: 297mm; padding: 12mm 10mm;
    margin: 16px auto; background: #fff; color: #000;
    box-shadow: var(--schatten-stark);
    font-family: Arial, Helvetica, sans-serif; font-size: 9.5pt;
    page-break-after: always; position: relative;
}
.vordruck * { box-sizing: border-box; }

.vd-kopf { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6mm; }
.vd-logo img { max-height: 18mm; max-width: 60mm; object-fit: contain; }
.vd-logo .vd-firma { font-size: 16pt; font-weight: bold; letter-spacing: .02em; }
.vd-logo .vd-zusatz { font-size: 7.5pt; letter-spacing: .18em; text-transform: uppercase; }
.vd-titel { font-size: 15pt; font-weight: bold; }

.vd-zeile { display: flex; align-items: flex-end; gap: 2mm; margin-bottom: 3.2mm; }
.vd-zeile .vd-label { flex: none; font-size: 9pt; }
.vd-zeile .vd-linie { flex: 1; border-bottom: .4pt solid #000; height: 5.4mm; }

.vd-tabelle { width: 100%; border-collapse: collapse; }
.vd-tabelle th, .vd-tabelle td { border: .4pt solid #000; padding: 0; height: 5.6mm; }
.vd-tabelle th { font-size: 8pt; font-weight: normal; text-align: left; padding: .6mm 1.2mm; height: auto; }
.vd-tabelle td { padding: .5mm 1.2mm; }

.vd-stunden { display: flex; gap: 4mm; margin-bottom: 5mm; }
.vd-stunden .vd-block { flex: 1; }
.vd-stunden .vd-block.schmal { flex: 0 0 46mm; }

.vd-material { display: flex; gap: 4mm; margin-bottom: 5mm; }
.vd-material .vd-block { flex: 1; }

.vd-unterschriften { display: flex; gap: 6mm; margin-top: 4mm; }
.vd-unterschriften .vd-block { flex: 1; }

.vd-fuss {
    position: absolute; inset-inline: 10mm; bottom: 8mm;
    display: flex; gap: 4mm; font-size: 7pt; line-height: 1.35;
    border-top: .4pt solid #000; padding-top: 2mm;
}
.vd-fuss .vd-spalte { flex: 1; }
.vd-fuss strong { font-weight: bold; }

/* Passmarken in den Blattecken - machen das spaetere Entzerren eines
   abfotografierten Zettels exakt statt geschaetzt. */
.vd-marke {
    position: absolute;
    width: 5mm; height: 5mm;
    background: #000;
}
.vd-marke-ol { top: 5mm; left: 5mm; }
.vd-marke-or { top: 5mm; right: 5mm; }
.vd-marke-ul { bottom: 5mm; left: 5mm; }
.vd-marke-ur { bottom: 5mm; right: 5mm; }

@media print {
    .vordruck-werkzeuge, .kopf, .menue, .marke { display: none !important; }
    body { background: #fff; }
    .vordruck { margin: 0; box-shadow: none; width: auto; min-height: auto; padding: 10mm 8mm; }
    @page { size: A4 portrait; margin: 0; }
}

/* --- Hilfsklassen --------------------------------------------------------- */

.reihe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reihe-zwischen { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.abstand-oben { margin-top: 16px; }
.abstand-unten { margin-bottom: 16px; }
.kein-abstand { margin: 0; }
.voll { width: 100%; }
.mitte { text-align: center; }
.verstecken { display: none !important; }
.wachsen { flex: 1; min-width: 0; }
.umbruch { word-break: break-word; }

/* Gefahrenzone: deutlich abgesetzt, damit niemand sie mit den uebrigen
   Einstellungen verwechselt. Rot am Rand, nicht auf der ganzen Flaeche -
   ein rotes Feld wuerde die Seite dominieren, obwohl man hier fast nie
   etwas zu suchen hat. */
.karte.gefahrenzone {
    border-color: color-mix(in srgb, var(--rot) 45%, var(--rand));
    border-inline-start-width: 4px;
    border-inline-start-color: var(--rot);
}
.karte.gefahrenzone .karte-kopf { background: color-mix(in srgb, var(--rot) 6%, transparent); }

/* ==========================================================================
   Sanfter Farbverlauf
   
   Ein sehr weicher, grossflaechiger Verlauf aus den Firmenfarben hinter der
   Anwendung. Er soll spuerbar, aber nicht sichtbar sein: Wer ihn bemerkt, ist
   er zu stark. Die Karten stehen unveraendert weiss darauf, damit Tabellen und
   Handschriftbilder ihre Ruhe behalten.

   Umgesetzt ueber zwei weit auseinanderliegende, stark weichgezeichnete
   Farbfelder statt ueber einen linearen Verlauf - das wirkt lebendiger und
   bleibt bei jeder Fenstergroesse gleichmaessig.
   ========================================================================== */

body {
    position: relative;
    background:
        radial-gradient(58rem 40rem at 12% -8%,
            color-mix(in srgb, var(--farbe-primaer) 11%, transparent) 0%, transparent 62%),
        radial-gradient(52rem 38rem at 104% 8%,
            color-mix(in srgb, var(--farbe-akzent) 10%, transparent) 0%, transparent 60%),
        radial-gradient(46rem 34rem at 78% 106%,
            color-mix(in srgb, var(--farbe-primaer) 7%, transparent) 0%, transparent 58%),
        var(--grund);
    background-attachment: fixed;
}

/* Der Kopf schwebt dadurch etwas: leicht durchscheinend, mit Unschaerfe
   dahinter. Das ist der Trick, der den Verlauf wirken laesst, ohne dass die
   Bedienelemente an Deutlichkeit verlieren. */
.kopf {
    background: color-mix(in srgb, var(--flaeche) 82%, transparent);
    backdrop-filter: blur(10px) saturate(1.15);
}

.marke {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--text) 96%, var(--farbe-primaer)) 0%,
        var(--text) 100%);
}

/* Das Menue bekommt denselben, nur kraeftigeren Verlauf - sonst steht die
   dunkle Flaeche wie ein Fremdkoerper neben dem hellen Inhalt. */
.menue {
    background:
        radial-gradient(30rem 24rem at 0% 0%,
            color-mix(in srgb, var(--farbe-primaer) 22%, transparent) 0%, transparent 65%),
        #111827;
}

/* Karten heben sich weicher ab als mit einer harten Linie. */
.karte {
    background: color-mix(in srgb, var(--flaeche) 96%, transparent);
    backdrop-filter: blur(6px);
}
.karte-kopf { background: color-mix(in srgb, var(--flaeche-2) 80%, transparent); }

/* Auf der Anmeldeseite darf der Verlauf etwas deutlicher sein - dort gibt es
   nichts, was er stoeren koennte. */
.anmelde-seite {
    background:
        radial-gradient(46rem 34rem at 18% 6%,
            color-mix(in srgb, var(--farbe-primaer) 16%, transparent) 0%, transparent 60%),
        radial-gradient(42rem 32rem at 88% 92%,
            color-mix(in srgb, var(--farbe-akzent) 15%, transparent) 0%, transparent 58%),
        var(--grund);
}

.anmelde-kopf .firmenlogo { max-height: 56px; max-width: 220px; object-fit: contain; margin-bottom: 12px; }

.anmelde-fuss {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    margin-top: 26px; opacity: .72;
}
.anmelde-fuss img { display: block; height: 30px; width: auto; color: var(--text-leise); }

/* Programmzeichen im Kopf, neben dem Seitentitel. Klein und ruhig - es sagt
   nur, womit gearbeitet wird. */
.kopf-zeichen { height: 22px; width: auto; opacity: .8; flex: none; }

@media (max-width: 620px) { .kopf-zeichen { display: none; } }

/* Wer Bewegung und Effekte reduziert haben moechte, bekommt eine ruhige,
   flache Oberflaeche - ohne Unschaerfe, ohne Verlauf. */
@media (prefers-reduced-transparency: reduce) {
    body { background: var(--grund); }
    .kopf, .karte { backdrop-filter: none; background: var(--flaeche); }
}

/* --- Abgleich im Kopf ------------------------------------------------------
   Ein Knopf, der im Ruhezustand fast nichts sagt und waehrend der Arbeit
   genau so viel, wie man wissen will: was gerade laeuft und wie weit. Der
   Fortschrittsbalken sitzt IM Knopf, damit die Seite nicht springt. */

.abgleich-knopf {
    position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; min-width: 118px;
    border: 1px solid var(--rand-stark); border-radius: 999px;
    background: var(--flaeche); color: var(--text);
    font: inherit; font-size: 13px; cursor: pointer;
    overflow: hidden;
    transition: border-color .12s, background .12s;
}
.abgleich-knopf:hover:not(:disabled) { border-color: var(--text-leise); background: var(--flaeche-2); }
.abgleich-knopf:disabled { cursor: default; opacity: 1; }

.abgleich-punkt {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--rand-stark);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rand-stark) 30%, transparent);
}
.abgleich-punkt.frisch { background: var(--gruen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gruen) 22%, transparent); }
.abgleich-punkt.alt    { background: var(--gelb);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gelb) 22%, transparent); }
.abgleich-punkt.leer   { background: var(--rot);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 22%, transparent); }

/* Waehrend des Laufs pulsiert der Punkt leise. */
.abgleich-knopf.laeuft .abgleich-punkt {
    background: var(--farbe-primaer);
    animation: abgleich-puls 1.1s ease-in-out infinite;
}
@keyframes abgleich-puls {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--farbe-primaer) 30%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--farbe-primaer) 8%, transparent); }
}

.abgleich-balken {
    position: absolute; inset-inline: 0; bottom: 0; height: 3px;
    background: color-mix(in srgb, var(--farbe-primaer) 14%, transparent);
}
.abgleich-balken i {
    display: block; height: 100%; width: 0;
    background: var(--farbe-primaer);
    transition: width .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .abgleich-knopf.laeuft .abgleich-punkt { animation: none; }
    .abgleich-balken i { transition: none; }
}

@media (max-width: 700px) {
    .abgleich-knopf { min-width: 0; padding: 6px 10px; }
    .abgleich-knopf [data-abgleich-text] { display: none; }
    .abgleich-knopf.laeuft [data-abgleich-text] { display: inline; }
}

/* --- Symbole ---------------------------------------------------------------
   Alle Zeichen kommen aus einem einzigen versteckten SVG am Seitenanfang und
   erben die Textfarbe. Dadurch passen sie sich Knoepfen, Zustandsfarben und
   dem dunklen Menue von allein an. */

.ikone {
    width: 1.05em; height: 1.05em;
    flex: none;
    vertical-align: -0.16em;
    color: inherit;
}
.ikone-gross { width: 1.35em; height: 1.35em; }
.knopf .ikone { margin-inline-end: 1px; }
.knopf-klein .ikone { width: 15px; height: 15px; }

/* ==========================================================================
   Eingangskorb

   Der Korb ist ein Auswahlwerkzeug, keine Datentabelle. Deshalb Zeilen statt
   Spalten: Jeder Eintrag zeigt, was man zum Entscheiden braucht - Name,
   Herkunft, Zeitpunkt, und einen Knopf zum Hineinsehen. Alles Weitere steht
   im Verwaltungsarchiv.
   ========================================================================== */

.quellen-leiste {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px dashed var(--rand);
}

/* Abrufleiste im Kopf des Eingangskorbs.

   Sie sass frueher auf der Vorgangsseite (.quellen-leiste, weiter oben). Dort
   gehoerte sie nicht hin: Ein Abruf holt in den KORB, nicht in den Vorgang. */
/* --------------------------------------------------------------------------
   Digitale Kundendienstauftraege im Vorgang
   -------------------------------------------------------------------------- */

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

.dfotos {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}
.dfotos img {
    width: 96px; height: 96px; object-fit: cover;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
}

.dunterschriften { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.dunterschrift { margin: 0; }
.dunterschrift img {
    max-width: 220px; height: auto;
    border-bottom: 1px solid var(--rand-stark);
    /* Unterschriften sind schwarz auf weiss gespeichert. Auf der hellen Karte
       reicht das; ein Rahmen ringsum wuerde wie ein Bild wirken statt wie
       eine Unterschrift auf einer Linie. */
}

.korb-abruf {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 18px;
    background: var(--flaeche-2);
    border-bottom: 1px solid var(--rand);
}
.korb-abruf .reihe { flex-wrap: wrap; gap: 6px; }

#korb-abruf-fortschritt { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--rand); }

.korb-zahl {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--farbe-primaer); color: #fff;
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Fortschritt des Abrufs. Bewusst im Aufnahmebereich und nicht als Fenster:
   Der Bediener soll weiterarbeiten koennen, waehrend geholt wird. */
.abruf-fortschritt { margin-top: 14px; }
.abruf-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.abruf-balken { height: 6px; border-radius: 3px; background: var(--flaeche-2); overflow: hidden; }
.abruf-balken i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--farbe-primaer), var(--farbe-akzent));
    transition: width .3s ease-out;
}

/* --- Fenster --------------------------------------------------------------- */

.korb-schicht, .korb-vorschau {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(3px);
}
.korb-vorschau { z-index: 210; }

body.kein-blaettern { overflow: hidden; }

.korb-fenster, .vorschau-fenster {
    display: flex; flex-direction: column;
    width: min(920px, 100%); max-height: min(88vh, 900px);
    background: var(--flaeche);
    border-radius: var(--radius);
    box-shadow: var(--schatten-stark);
    overflow: hidden;
}
.vorschau-fenster { width: min(1100px, 100%); }

.korb-kopf, .vorschau-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--rand);
    background: var(--flaeche-2);
}

.korb-filter {
    display: flex; gap: 10px; padding: 12px 18px;
    border-bottom: 1px solid var(--rand);
}
.korb-filter input[type="search"] { flex: 1; min-width: 0; }
.korb-filter select { width: auto; min-width: 150px; }

.korb-liste { flex: 1; overflow-y: auto; padding: 8px; }

.korb-zeile {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 11px 12px; margin-bottom: 6px;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: var(--flaeche);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.korb-zeile:hover { border-color: var(--rand-stark); background: var(--flaeche-2); }
.korb-zeile.gewaehlt {
    border-color: var(--farbe-primaer);
    background: color-mix(in srgb, var(--farbe-primaer) 6%, var(--flaeche));
}
/* Frisch geholt - hebt sich kurz ab, damit man sieht, was gerade dazukam. */
.korb-zeile.frisch { border-inline-start: 3px solid var(--farbe-primaer); }

.korb-haken input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.korb-typ { color: var(--text-leise); display: flex; align-items: flex-start; }

/* Miniaturvorschau eines Eingangsdokuments.

   Fest im Seitenverhaeltnis 4:3 und zugeschnitten statt verzerrt: Die Zeilen
   sollen gleich hoch bleiben, egal ob ein Blatt hochkant oder quer
   fotografiert wurde. */
.korb-mini {
    width: 64px; height: 48px; object-fit: cover;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: var(--flaeche-2);
}
@media (max-width: 640px) {
    .korb-mini { width: 48px; height: 36px; }
}
.korb-text { min-width: 0; }
.korb-name {
    font-weight: 600; font-size: 14.5px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    overflow-wrap: anywhere;
}
.korb-zusatz {
    display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px;
    overflow-wrap: anywhere;
}
.korb-quelle { display: inline-flex; align-items: center; gap: 4px; }

.korb-leer { padding: 46px 20px; text-align: center; color: var(--text-leise); }
.korb-leer .ikone { opacity: .4; margin-bottom: 10px; }

.korb-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border-top: 1px solid var(--rand);
    background: var(--flaeche-2);
}

/* --- Vorschau -------------------------------------------------------------- */

.vorschau-buehne {
    flex: 1; overflow: auto; padding: 14px;
    background: var(--flaeche-2);
    display: flex; align-items: flex-start; justify-content: center;
}
.vorschau-buehne img, .vorschau-buehne canvas {
    max-width: 100%; height: auto; display: block;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: #fff;
}
.vorschau-fuss { padding: 12px 18px; border-top: 1px solid var(--rand); }

/* --- Handy ----------------------------------------------------------------- */

@media (max-width: 720px) {
    .korb-schicht, .korb-vorschau { padding: 0; }
    .korb-fenster, .vorschau-fenster { max-height: 100vh; height: 100vh; border-radius: 0; }

    .korb-filter { flex-wrap: wrap; }
    .korb-filter select { width: 100%; }

    /* Der Ansehen-Knopf rutscht unter den Text, damit der Name nicht
       zusammengequetscht wird. */
    .korb-zeile { grid-template-columns: auto auto minmax(0, 1fr); }
    .korb-zeile > .knopf { grid-column: 2 / -1; justify-self: start; }

    .korb-fuss { flex-direction: column; align-items: stretch; }
    .korb-fuss .reihe { flex-direction: column-reverse; }
    .korb-fuss .knopf { width: 100%; }
}

/* --- Quellen in den Einstellungen ------------------------------------------ */

.quelle-zeile {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 14px;
    padding: 12px 14px; margin-bottom: 8px;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: var(--flaeche);
}
.quelle-symbol { color: var(--text-leise); display: flex; }
.quelle-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.quelle-leer {
    padding: 20px; text-align: center;
    border: 1px dashed var(--rand-stark); border-radius: var(--radius-klein);
}

@media (max-width: 720px) {
    .quelle-zeile { grid-template-columns: auto minmax(0, 1fr); }
    .quelle-zeile > .reihe { grid-column: 1 / -1; flex-wrap: wrap; }
}

/* --- Systemvoraussetzungen -------------------------------------------------
   Was geht, steht ruhig da. Was nicht geht, faellt auf und sagt warum. */

.voraussetzung {
    padding: 11px 13px;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    border-inline-start-width: 3px;
    background: var(--flaeche);
}
.voraussetzung-kopf { display: flex; align-items: center; gap: 8px; }
.voraussetzung.ja { border-inline-start-color: var(--gruen); }
.voraussetzung.ja .ikone { color: var(--gruen); }
.voraussetzung.nein { border-inline-start-color: var(--gelb); background: color-mix(in srgb, var(--gelb) 4%, var(--flaeche)); }
.voraussetzung.nein .ikone { color: var(--gelb); }
.voraussetzung.kritisch { border-inline-start-color: var(--rot); background: color-mix(in srgb, var(--rot) 5%, var(--flaeche)); }
.voraussetzung.kritisch .ikone { color: var(--rot); }

/* ==========================================================================
   Seitenleiste und Kopf - Neuaufbau

   Bisher rollte die ganze Seite als ein Block, und die Navigation verschwand
   dabei nach oben. Jetzt bleibt die Seitenleiste stehen und nur der Inhalt
   rollt. Der Kopf bleibt ebenfalls sichtbar.

   Umgesetzt mit sticky statt fixed: Damit bleibt der normale Seitenfluss
   erhalten, und auf dem Handy kippt das Ganze ohne Sonderregeln in die
   einspaltige Form.
   ========================================================================== */

:root {
    --menue-breite-schmal: 66px;
}

.app {
    display: grid;
    grid-template-columns: var(--menue-breite) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "seite kopf" "seite inhalt";
    min-height: 100vh;
    align-items: start;
}

/* Eingeklappt: nur noch Symbole. Der Zustand haengt am .app-Element, damit
   Seitenleiste UND Inhalt gleichzeitig davon wissen. */
.app[data-menue-zustand="schmal"] { --menue-breite: var(--menue-breite-schmal); }

.seitenleiste {
    grid-area: seite;
    position: sticky; top: 0;
    display: flex; flex-direction: column;
    height: 100vh;
    background:
        radial-gradient(30rem 24rem at 0% 0%,
            color-mix(in srgb, var(--farbe-primaer) 22%, transparent) 0%, transparent 65%),
        #111827;
    color: #cbd5e1;
    overflow: hidden;
}

/* --- Marke: Logo oben, Firmenname darunter --------------------------------- */

.marke {
    display: flex; align-items: flex-start; gap: 6px;
    padding: 14px 12px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: none;
    flex: none;
}
.marke-inhalt {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
    color: var(--text-invers); text-decoration: none;
}
.marke-inhalt:hover { text-decoration: none; }
.marke img { max-height: 42px; max-width: 100%; object-fit: contain; }
.marke .ikone-gross { color: var(--farbe-primaer); width: 30px; height: 30px; }

/* Der Firmenname wird UMGEBROCHEN, nicht abgeschnitten. Ein Betrieb heisst,
   wie er heisst - drei Punkte statt des Namens sind keine Loesung. */
.marke-name {
    font-weight: 600; font-size: 13.5px; line-height: 1.3;
    text-align: center; overflow-wrap: anywhere;
    max-width: 100%;
}

.menue-klappen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: none;
    border: none; border-radius: var(--radius-klein);
    background: transparent; color: #94a3b8; cursor: pointer;
}
.menue-klappen:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* --- Navigation ------------------------------------------------------------ */

.menue {
    flex: 1; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 0 14px;
    background: none;
}
.menue-gruppe {
    padding: 14px 16px 5px; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; color: #64748b;
}
.menue a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 16px; color: #cbd5e1; text-decoration: none;
    border-inline-start: 3px solid transparent; font-size: 14px;
}
.menue a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.menue a.aktiv {
    background: rgba(255, 255, 255, .1); color: #fff;
    border-inline-start-color: var(--farbe-primaer); font-weight: 500;
}
.menue .ikone { width: 19px; height: 19px; opacity: .9; }

/* --- Offene KI-Kosten, dauerhaft unten ------------------------------------- */

.ki-kasten {
    flex: none;
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
    margin: 0 10px 12px; padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-klein);
    background: rgba(255, 255, 255, .05);
    color: #cbd5e1; text-decoration: none;
}
.ki-kasten:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.ki-kasten-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.ki-kasten-wert { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Eingeklappter Zustand ------------------------------------------------- */

.app[data-menue-zustand="schmal"] .marke-name,
.app[data-menue-zustand="schmal"] .menue-text,
.app[data-menue-zustand="schmal"] .menue-gruppe,
.app[data-menue-zustand="schmal"] .ki-kasten-titel { display: none; }

.app[data-menue-zustand="schmal"] .marke { flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; }
.app[data-menue-zustand="schmal"] .marke img { max-height: 30px; }
.app[data-menue-zustand="schmal"] .menue a { justify-content: center; padding: 11px 0; gap: 0; }
.app[data-menue-zustand="schmal"] .ki-kasten { justify-content: center; margin-inline: 6px; padding: 8px 4px; }
.app[data-menue-zustand="schmal"] .ki-kasten-wert { font-size: 11.5px; }

/* --- Kopf ------------------------------------------------------------------ */

.kopf {
    grid-area: kopf;
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    /* Kompakter als zuvor - auf dem Handy zaehlt jede Zeile. */
    min-height: 52px; padding: 7px 18px;
    background: color-mix(in srgb, var(--flaeche) 84%, transparent);
    backdrop-filter: blur(10px) saturate(1.15);
    border-bottom: 1px solid var(--rand);
}
.kopf-titel { font-weight: 600; font-size: 16px; }
.kopf-rechts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.inhalt { grid-area: inhalt; padding: 20px 22px 60px; max-width: 1500px; width: 100%; }

/* --- Handy und Tablet ------------------------------------------------------ */

@media (max-width: 900px) {
    .app {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "kopf" "inhalt";
    }

    .seitenleiste {
        position: fixed; inset: 0 auto 0 0; z-index: 80;
        width: 264px; height: 100vh;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        box-shadow: var(--schatten-stark);
    }
    .seitenleiste.offen { transform: none; }

    [dir="rtl"] .seitenleiste { inset: 0 0 0 auto; transform: translateX(100%); }
    [dir="rtl"] .seitenleiste.offen { transform: none; }

    /* Der Klappknopf ist auf dem Handy sinnlos - dort gibt es den Hamburger. */
    .menue-klappen { display: none; }

    .knopf.menue-schalter { display: inline-flex !important; }

    .kopf { padding: 6px 12px; min-height: 48px; }
    .kopf-titel { font-size: 15px; }
    .inhalt { padding: 14px 12px 48px; }
}

.knopf.menue-schalter { display: none; }

@media (prefers-reduced-motion: reduce) {
    .seitenleiste { transition: none; }
}

/* --- Profil im Kopf -------------------------------------------------------- */

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; flex: none;
    border-radius: 50%; overflow: hidden;
    background: var(--farbe-primaer); color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-gross { width: 116px; height: 116px; font-size: 38px; }

.profil-bereich { position: relative; }

.profil-knopf {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent; border-radius: 999px;
    background: transparent; color: var(--text); font: inherit; font-size: 13.5px;
    cursor: pointer;
}
.profil-knopf:hover { background: var(--flaeche-2); border-color: var(--rand); }
.profil-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.profil-menue {
    position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 90;
    min-width: 214px; padding: 6px;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--radius); box-shadow: var(--schatten-stark);
}
.profil-kopf {
    display: flex; flex-direction: column; gap: 1px;
    padding: 8px 10px 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--rand);
}
.profil-menue a, .profil-menue button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border: none; border-radius: var(--radius-klein);
    background: transparent; color: var(--text); font: inherit; font-size: 14px;
    text-align: start; text-decoration: none; cursor: pointer;
}
.profil-menue a:hover, .profil-menue button:hover { background: var(--flaeche-2); text-decoration: none; }
.profil-menue .ikone { color: var(--text-leise); }

@media (max-width: 700px) {
    /* Auf dem Handy nur das Bild - der Name frisst sonst die halbe Kopfzeile. */
    .profil-name { display: none; }
    .profil-knopf { padding: 4px; }
}

/* --- Sprachauswahl mit Flaggen --------------------------------------------- */

.flagge {
    width: 20px; height: 15px; flex: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .14);
}

.sprach-bereich { position: relative; }

.sprach-knopf {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--rand); border-radius: var(--radius-klein);
    background: var(--flaeche); color: var(--text); font: inherit; font-size: 13px;
    cursor: pointer;
}
.sprach-knopf:hover { background: var(--flaeche-2); border-color: var(--rand-stark); }

.sprach-menue {
    position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 90;
    min-width: 176px; padding: 5px;
    background: var(--flaeche); border: 1px solid var(--rand);
    border-radius: var(--radius); box-shadow: var(--schatten-stark);
}
.sprach-menue button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 9px; border: none; border-radius: var(--radius-klein);
    background: transparent; color: var(--text); font: inherit; font-size: 14px;
    text-align: start; cursor: pointer;
}
.sprach-menue button:hover { background: var(--flaeche-2); }
.sprach-menue button.aktiv { background: color-mix(in srgb, var(--farbe-primaer) 10%, transparent); font-weight: 600; }

@media (max-width: 700px) {
    /* Auf dem Handy nur die Flagge - der Sprachname frisst sonst die Kopfzeile. */
    .sprach-name { display: none; }
    .sprach-knopf { padding: 5px 7px; }
}