/* ══ Gesicht 2 — Gestaltungsstufe 2 des Backoffice ([LF - PR19 - ISS078], CEO 26.10.2026) ══
   Liegt über dem Gestaltungssystem in static/index.html (Variablen in :root dort) und fasst
   keine Fachregel an. Zwei Teile:
   1. Bildschirm: Tiefe im Hintergrund, Glas-Kopf, ruhige Tabellen mit Akzent, sanfter Seitenwechsel.
   2. Handy (≤ 860 px): Reiterleiste unten, Blätter von unten (Mehr, Neu, Dialoge), Tabellen als Karten.
   Rot bleibt Signal (Hauptaktion, Alarm, Anklickbares nach R-02). */

:root {
  --glas:rgba(13,14,17,.72); --glas-rand:rgba(255,255,255,.06);
  --haar:rgba(255,255,255,.055); --haar-hell:rgba(255,255,255,.09);
  --glanz-oben:inset 0 1px 0 rgba(255,255,255,.045);
  --reiter:64px;
}

/* ── 1. Raum und Licht ── */
html, body { background-color:var(--schwarz); }
body {
  background:
    radial-gradient(1000px 560px at 62% -18%, rgba(196,30,42,.17), transparent 64%),
    radial-gradient(800px 600px at 108% 10%, rgba(74,134,197,.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(196,30,42,.07), transparent 70%),
    var(--schwarz);
  background-attachment:fixed;
}
/* Feines Korn über allem — nimmt den Flächen das Digital-Glatte (wie Druck auf Mattpapier) */
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:300; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }

/* Laserlinie: die Marke von LASERFLEET unter jedem Seitentitel — ein feiner Strahl, der ausläuft */
#inhalt h1 + .untertitel::after { content:""; display:block; height:1px; margin-top:1.05rem; max-width:560px;
  background:linear-gradient(90deg, var(--rot-hell), rgba(229,72,77,.35) 35%, transparent);
  box-shadow:0 0 10px 0 rgba(229,72,77,.55); }
#seite { background:linear-gradient(180deg, rgba(17,18,22,.86), rgba(11,12,15,.9)); border-right-color:var(--haar);
         backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
#kopf { background:var(--glas); border-bottom-color:var(--haar);
        backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); }
#prozess { background:rgba(11,12,15,.55); border-bottom-color:var(--haar);
           backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.logo { border-bottom-color:var(--haar); }
.seite-fuss { border-top-color:var(--haar); }

/* Seitenleiste: aktive Zeile als Lichtkante, Gruppen mit feiner Linie */
.nav-gruppe { display:flex; align-items:center; gap:.6rem; }
.nav-gruppe::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--haar-hell), transparent); }
.nav-item { transition:background .15s, color .15s, transform .15s; }
.nav-item:hover:not(.bald) { transform:translateX(2px); }
.nav-item.aktiv { background:linear-gradient(90deg, rgba(229,72,77,.2), rgba(229,72,77,.04) 70%, transparent);
                  box-shadow:inset 0 0 0 1px rgba(229,72,77,.2), 0 8px 24px -14px rgba(229,72,77,.6); }
.nav-item.aktiv::before { box-shadow:0 0 12px 1px rgba(229,72,77,.7); }
.logo .marke { box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px -6px rgba(196,30,42,.75); }

/* Seitentitel: helle Verlaufsschrift, Untertitel ruhig */
#inhalt h1 { background:linear-gradient(180deg, #FFFFFF 0%, #D9D6D0 100%); -webkit-background-clip:text; background-clip:text;
             color:transparent; letter-spacing:.035em; font-size:1.95rem; }
#inhalt h1 .badge, #inhalt h1 a, #inhalt h1 button { -webkit-text-fill-color:initial; }

/* Seitenwechsel: neuer Inhalt gleitet herein (nur beim Wechsel der Adresse, nicht beim Neuzeichnen) */
#inhalt.rein > * { animation:seiteRein .34s cubic-bezier(.2,.8,.2,1) both; }
#inhalt.rein > *:nth-child(2) { animation-delay:.03s; }
#inhalt.rein > *:nth-child(3) { animation-delay:.06s; }
#inhalt.rein > *:nth-child(n+4) { animation-delay:.09s; }
@keyframes seiteRein { from { opacity:0; transform:translateY(6px); } }

/* Karten und Kacheln: Glas mit Lichtkante oben */
.karte { background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012)), var(--karte);
         border-color:var(--haar); box-shadow:var(--glanz-oben), 0 18px 40px -28px rgba(0,0,0,.95); }
.kachel { background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), var(--karte); border-color:var(--haar);
          box-shadow:var(--glanz-oben), 0 18px 40px -28px rgba(0,0,0,.95); }
.kachel::after { content:""; position:absolute; left:14px; right:14px; top:0; height:1px; opacity:0; transition:opacity .2s;
                 background:linear-gradient(90deg, transparent, var(--rot-hell), transparent); }
.kachel:hover::after { opacity:1; }
.chip { border-color:var(--haar); background:rgba(255,255,255,.025); }

/* Tabellen: Kopfband, Haarlinien, Akzentkante an der Zeile unter der Maus */
.karte > table th, .karte table th { background:rgba(255,255,255,.022); }
.karte table tr:first-child > th:first-child { border-top-left-radius:10px; }
.karte table tr:first-child > th:last-child { border-top-right-radius:10px; }
td { border-bottom-color:var(--haar); }
tr.klick:hover > td { background:rgba(229,72,77,.045); }
tr.klick:hover > td:first-child { box-shadow:inset 3px 0 0 var(--rot-hell); }

/* Prozess-Leiste: der eigene Schritt leuchtet */
.pz-schritt.hier { box-shadow:inset 0 0 0 1px rgba(229,72,77,.32), 0 10px 26px -16px rgba(229,72,77,.8); }

/* Suche: „Zuletzt geöffnet“ */
#suchtreffer .zl-kopf { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grau-d); padding:.5rem .75rem .3rem; font-weight:600;
                        display:flex; justify-content:space-between; }
#suchtreffer .zl-kopf span { cursor:pointer; letter-spacing:.06em; text-transform:none; }
#suchtreffer .zl-kopf span:hover { color:var(--hell); }

/* Fokus für Tastatur sichtbar, Maus bleibt ruhig */
:focus-visible { outline:2px solid var(--rot-hell); outline-offset:2px; }
.nav-item:focus-visible, .pz-schritt:focus-visible { outline-offset:-2px; }

/* ── 2. Handy ── */
#reiter, #blatt, #blatt-hinter { display:none; }

@media (max-width: 860px) {
  #app, #app.schmal { height:calc(100dvh - 50px); }
  #menue-knopf, .neu-menue { display:none !important; }
  #kopf { padding:0 .75rem; }
  #suchbox { max-width:none; }
  #suche { padding-top:.7rem; padding-bottom:.7rem; font-size:16px; }   /* 16 px: iPhone zoomt sonst beim Tippen */
  #inhalt { padding:1.1rem 1rem calc(var(--reiter) + 2.2rem + env(safe-area-inset-bottom)); }
  #meldung { left:1rem; right:1rem; max-width:none; bottom:calc(var(--reiter) + .9rem + env(safe-area-inset-bottom)); }
  h1 { font-size:1.5rem; }

  /* Prozess-Leiste kompakt: Nummer, Name, Zahl */
  #prozess { padding:.4rem .6rem; }
  .pz-schritt { padding:.3rem .6rem .3rem .35rem; gap:.45rem; }
  .pz-pfeil { min-width:6px; flex:0 0 10px; }
  .pz-pfeil .ico-svg { display:none; }
  .pz-nr { width:22px; height:22px; }

  /* Reiterleiste unten — im Daumenbereich */
  #reiter { display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; left:0; right:0; bottom:0; z-index:70;
            height:calc(var(--reiter) + env(safe-area-inset-bottom)); padding:0 .3rem env(safe-area-inset-bottom);
            background:rgba(10,11,14,.82); border-top:1px solid var(--haar-hell);
            backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%); }
  #reiter button { all:unset; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
                   color:var(--grau-d); font-size:.64rem; font-weight:600; letter-spacing:.02em; cursor:pointer;
                   -webkit-tap-highlight-color:transparent; transition:color .15s; }
  #reiter button .ico-svg { width:23px; height:23px; stroke-width:1.7; transition:transform .2s cubic-bezier(.2,.8,.2,1); }
  #reiter button.aktiv { color:var(--hell); }
  #reiter button.aktiv .ico-svg { color:var(--rot-hell); transform:translateY(-1px); }
  #reiter button.aktiv::before { content:""; position:absolute; top:0; left:28%; right:28%; height:2px; border-radius:0 0 3px 3px;
                                 background:var(--rot-hell); box-shadow:0 0 12px 1px rgba(229,72,77,.8); }
  #reiter button:active .ico-svg { transform:scale(.9); }
  #reiter .r-zahl { position:absolute; top:7px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px; border-radius:99px;
                    font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
                    background:var(--karte-3); color:var(--hell); box-shadow:0 0 0 2px rgba(10,11,14,.9); }
  #reiter .r-zahl:empty { display:none; }
  #reiter .r-zahl.warn { background:#B8952F; color:#141414; }
  #reiter .r-zahl.alarm { background:var(--rot); color:#fff; }
  #reiter .r-zahl.punkt { min-width:9px; width:9px; height:9px; padding:0; top:10px; font-size:0; background:var(--rot-hell); }
  /* „＋“ in der Mitte: die Hauptaktion */
  #reiter .r-neu .r-plus { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; color:#fff; margin-top:-4px;
                           background:radial-gradient(120% 120% at 25% 10%, #EA5257, #9E1822);
                           box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 24px -8px rgba(196,30,42,.9); }
  #reiter .r-neu .r-plus .ico-svg { width:24px; height:24px; stroke-width:2.2; color:#fff; }
  #reiter .r-neu span:last-child { display:none; }

  /* Blatt von unten: „Mehr“ und „Neu“ */
  #blatt-hinter { display:block; position:fixed; inset:0; z-index:80; background:rgba(4,4,6,.55); opacity:0; pointer-events:none;
                  transition:opacity .22s; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  #blatt { display:block; position:fixed; left:0; right:0; bottom:0; z-index:81; max-height:86dvh; overflow-y:auto; overscroll-behavior:contain;
           background:linear-gradient(180deg, #17181D, #101115); border-top:1px solid var(--haar-hell); border-radius:22px 22px 0 0;
           padding:.4rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); box-shadow:0 -24px 60px -20px rgba(0,0,0,.9);
           transform:translateY(105%); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
  #blatt { pointer-events:none; }
  #app.blatt-offen #blatt { transform:none; pointer-events:auto; }
  #app.blatt-offen #blatt-hinter { opacity:1; pointer-events:auto; }
  .blatt-griff { width:40px; height:4px; border-radius:99px; background:#3A3B44; margin:.35rem auto .8rem; }
  .blatt-titel { font-family:Oswald,sans-serif; font-size:1.05rem; letter-spacing:.06em; margin:.2rem .2rem .8rem; display:flex; justify-content:space-between; align-items:center; }
  .blatt-titel small { font-family:Inter,sans-serif; font-size:.72rem; color:var(--grau-d); letter-spacing:0; }
  .blatt-lage { display:flex; align-items:center; gap:.9rem; padding:1rem 1.05rem; border-radius:16px; margin-bottom:1rem; cursor:pointer;
                background:radial-gradient(140% 140% at 0% 0%, rgba(229,72,77,.28), rgba(229,72,77,.05) 55%, transparent), var(--karte);
                border:1px solid rgba(229,72,77,.28); box-shadow:var(--glanz-oben); }
  .blatt-lage .ico-svg { width:26px; height:26px; color:var(--rot-hell); }
  .blatt-lage b { display:block; font-size:.98rem; } .blatt-lage small { color:var(--grau); font-size:.76rem; }
  .blatt-gruppe { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grau-d); font-weight:600; margin:1rem .2rem .5rem; }
  .blatt-raster { display:grid; grid-template-columns:repeat(3, 1fr); gap:.55rem; }
  .blatt-kachel { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; padding:.8rem .75rem; border-radius:14px; cursor:pointer;
                  background:rgba(255,255,255,.03); border:1px solid var(--haar); font-size:.76rem; font-weight:600; line-height:1.2; min-height:78px;
                  -webkit-tap-highlight-color:transparent; }
  .blatt-kachel:active { background:rgba(255,255,255,.07); }
  .blatt-kachel.aktiv { border-color:rgba(229,72,77,.45); background:rgba(229,72,77,.08); }
  .blatt-kachel .ico-svg { width:21px; height:21px; color:var(--grau); }
  .blatt-kachel.aktiv .ico-svg { color:var(--rot-hell); }
  .blatt-kachel .nav-zahl { position:absolute; top:.55rem; right:.55rem; margin:0; }
  .blatt-filter { display:flex; align-items:center; gap:.6rem; margin:.2rem .2rem .9rem; font-size:.74rem; color:var(--grau); }
  .blatt-filter select { flex:1; font-size:16px; }
  .blatt-neu .nl { display:flex; gap:.85rem; align-items:center; padding:.85rem .8rem; border-radius:14px; cursor:pointer; margin-bottom:.35rem;
                   background:rgba(255,255,255,.03); border:1px solid var(--haar); }
  .blatt-neu .nl:active { background:rgba(255,255,255,.07); }
  .blatt-neu .nl > .ico-svg { width:22px; height:22px; color:var(--rot-hell); flex:none; }
  .blatt-neu .nl b { display:block; font-size:.9rem; } .blatt-neu .nl small { display:block; color:var(--grau); font-size:.74rem; margin-top:2px; }
  .blatt-neu .nl-kopf { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grau-d); font-weight:600; margin:.9rem .2rem .5rem; }

  /* Dialoge als Blatt von unten */
  .dialog-hinter { align-items:flex-end; }
  .dialog-hinter > .dialog { width:100% !important; max-width:none !important; border-radius:22px 22px 0 0; max-height:90dvh;
                             padding:1.2rem 1.1rem calc(1.3rem + env(safe-area-inset-bottom)); animation:blattAuf .26s cubic-bezier(.2,.8,.2,1); }
  .dialog-hinter > .dialog::before { content:""; display:block; width:40px; height:4px; border-radius:99px; background:#3A3B44; margin:-.4rem auto .9rem; }
  .dialog input, .dialog select, .dialog textarea { font-size:16px; }
  @keyframes blattAuf { from { transform:translateY(40%); opacity:.4; } }

  /* Knöpfe für den Daumen */
  #inhalt button { min-height:40px; }
  .seg button { min-height:36px; }
}

/* Tabellen werden zu Karten (gesicht.js beschriftet die Zellen mit dem Spaltenkopf) */
@media (max-width: 760px) {
  .karte:has(> table.t-karten), .karte:has(> div > table.t-karten) { background:none; border:0; box-shadow:none; padding:0; overflow:visible; }
  .karte table.t-karten { min-width:0; }
  table.t-karten, table.t-karten > tbody { display:block; width:100%; }
  table.t-karten tr.tk-kopf { display:none; }
  table.t-karten > tbody > tr { display:flex; flex-direction:column; position:relative; margin-bottom:.65rem; padding:.8rem .95rem .7rem;
    border:1px solid var(--haar); border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--karte);
    box-shadow:var(--glanz-oben); }
  table.t-karten > tbody > tr.klick:active { background:rgba(229,72,77,.07); }
  /* Zelle als Block: Inhalt fließt rechtsbündig, der Spaltenkopf steht links davor (mehrteilige Zellen bleiben lesbar) */
  table.t-karten > tbody > tr > td { display:block; padding:.24rem 0; border:0; text-align:right !important; white-space:normal !important;
    min-width:0; overflow-wrap:break-word; background:none !important; box-shadow:none !important; }
  table.t-karten > tbody > tr > td::after { content:""; display:table; clear:both; }
  table.t-karten > tbody > tr > td::before { content:attr(data-l); float:left; max-width:42%; margin-right:1rem; text-align:left; color:var(--grau-d);
    font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding-top:.2rem; -webkit-text-fill-color:var(--grau-d); }
  table.t-karten > tbody > tr > td button { margin:.15rem 0 .15rem .3rem; }
  table.t-karten > tbody > tr > td:not([data-l])::before, table.t-karten > tbody > tr > td[data-l=""]::before { display:none; }
  table.t-karten > tbody > tr > td:first-child { text-align:left !important; font-size:.95rem; padding:0 2.4rem .35rem 0;
    margin-bottom:.25rem; border-bottom:1px solid var(--haar); }
  table.t-karten > tbody > tr > td:first-child::before { display:none; }
  table.t-karten > tbody > tr > td:empty { display:none; }
  table.t-karten > tbody > tr > td.tk-menue { position:absolute; top:.45rem; right:.4rem; padding:0; }
  table.t-karten > tbody > tr > td.tk-menue::before { display:none; }
  table.t-karten > tbody > tr > td.tk-voll { text-align:center !important; border:0; padding:0; font-size:.85rem; }
  table.t-karten > tbody > tr:has(> td.tk-voll:only-child) { background:none; border-style:dashed; box-shadow:none; }
  table.t-karten > tbody > tr > td.tk-form { display:block; text-align:left !important; border:0; padding:0; margin:0; font-size:inherit; }
  table.t-karten > tbody > tr > td.tk-form::before { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  #inhalt.rein > *, #blatt, #blatt-hinter, .dialog-hinter > .dialog, .nav-item, #reiter button .ico-svg { animation:none !important; transition:none !important; }
}

/* ══ 3. Bühne am Bildschirm (CEO 26.10.2026: „so große Veränderungen sehe ich nicht … da habe ich mir mehr erhofft“) ══
   Seitenleiste und Arbeitsfläche schweben als zwei Tafeln über dem dunklen Grund. Die aktive Seite
   ist ein roter Block, die Prozess-Leiste eine Spur aus sieben Feldern, Titel und Zahlen in Oswald. */
:root { --buehne:#0F1015; --tafel:#15161C; --tafel-2:#1A1B22; }
#inhalt h1 { font-size:2.35rem; text-transform:uppercase; letter-spacing:.055em; line-height:1.05; }
.untertitel { font-size:.92rem; }
#inhalt h2 { font-family:Oswald,sans-serif; font-size:.92rem; letter-spacing:.14em; color:var(--hell); border-bottom:0; padding-bottom:0; margin-top:2.2rem; }
.karte { background:linear-gradient(180deg, var(--tafel-2), var(--tafel)); border-color:rgba(255,255,255,.075); border-radius:18px;
         box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 48px -30px rgba(0,0,0,.95); }
.kachel { background:linear-gradient(180deg, var(--tafel-2), var(--tafel)); border-color:rgba(255,255,255,.075); border-radius:18px; }
.kachel .zahl { font-size:2.05rem; font-weight:500; letter-spacing:.02em; }
td { padding-top:.82rem; padding-bottom:.82rem; }
button.neben { background:rgba(255,255,255,.055); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
button, .knopf { border-radius:11px; }

/* Lagebild im neuen Gesicht (Stil aus dashboard.js liegt dahinter, darum die stärkeren Wähler) */
#inhalt #db-wurzel .db-tun { border-radius:16px; padding:.95rem 1.15rem; background:linear-gradient(180deg, var(--tafel-2), var(--tafel)); border-color:rgba(255,255,255,.075); }
#inhalt #db-wurzel .db-tun b { font-family:Oswald,sans-serif; font-size:2.1rem; font-weight:500; line-height:1; }
#inhalt #db-wurzel .db-tun.dringend { background:linear-gradient(135deg, rgba(229,72,77,.26), rgba(229,72,77,.06) 60%), var(--tafel); border-color:rgba(229,72,77,.5); }
#inhalt #db-wurzel .db-hero { border-radius:22px; padding:1.9rem 2.1rem; border-color:rgba(229,72,77,.32);
  background:radial-gradient(70% 160% at 0% 0%, rgba(229,72,77,.34), transparent 62%), radial-gradient(50% 120% at 100% 100%, rgba(74,134,197,.12), transparent 60%), var(--tafel); }
#inhalt #db-wurzel .db-herozahl { font-family:Oswald,sans-serif; font-size:4.4rem; font-weight:500; letter-spacing:.015em; }
#inhalt #db-wurzel .db-herofunke .db-funke { width:300px; height:72px; }
#inhalt #db-wurzel .db-kachel { border-radius:18px; min-height:132px; padding:1.1rem 1.25rem .95rem; background:linear-gradient(180deg, var(--tafel-2), var(--tafel)); border-color:rgba(255,255,255,.075); }
#inhalt #db-wurzel .db-klabel { font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--grau-d); }
#inhalt #db-wurzel .db-hero .db-klabel { color:#E9C7C8; }
#inhalt #db-wurzel .db-kwert { font-family:Oswald,sans-serif; font-size:2.25rem; font-weight:500; letter-spacing:.015em; margin:.35rem 0 .3rem; }
#inhalt #db-wurzel .db-karte { border-radius:18px; padding:1.25rem 1.4rem; }
#inhalt #db-wurzel .db-kopf h3 { font-family:Oswald,sans-serif; font-size:1.02rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; }

@media (min-width: 861px) {
  html, body { background-color:#050506; }
  #app { padding:12px; column-gap:12px; }
  #seite { border:1px solid var(--haar-hell); border-radius:20px; overflow:hidden;
           background:linear-gradient(180deg, #15161B, #0C0D10); box-shadow:0 30px 60px -30px rgba(0,0,0,.95); }
  #kopf { border:1px solid var(--haar-hell); border-bottom-color:var(--haar); border-radius:20px 20px 0 0; background:rgba(16,17,22,.94); }
  #prozess { border-left:1px solid var(--haar-hell); border-right:1px solid var(--haar-hell); background:var(--buehne); }
  #inhalt { border:1px solid var(--haar-hell); border-top:0; border-radius:0 0 20px 20px; padding:2.1rem 2.6rem 4rem;
            background:radial-gradient(1000px 420px at 100% 0%, rgba(196,30,42,.10), transparent 70%),
                       radial-gradient(800px 420px at 0% 0%, rgba(255,255,255,.025), transparent 60%), var(--buehne);
            background-attachment:local; }
  #brotkrumen { font-size:1.22rem; letter-spacing:.06em; }

  /* Seitenleiste: die aktive Seite als roter Block */
  nav { padding:.5rem .8rem 1rem; }
  .nav-item { padding:.56rem .8rem; border-radius:11px; font-size:.87rem; }
  .nav-item.aktiv { color:#fff; background:linear-gradient(135deg, #D8343D, #8E141D);
                    box-shadow:0 12px 26px -12px rgba(196,30,42,.95), inset 0 1px 0 rgba(255,255,255,.2); }
  .nav-item.aktiv::before { display:none; }
  .nav-item.aktiv .ico { color:#fff; }
  .nav-item.aktiv .nav-zahl { background:rgba(255,255,255,.24); color:#fff; box-shadow:none; }
  .logo .marke { width:38px; height:38px; border-radius:12px; }
}

/* Prozess-Leiste als Spur aus sieben gleich breiten Feldern — der eigene Schritt rot gefüllt */
@media (min-width: 1200px) {
  #prozess { padding:.7rem 1.1rem; }
  .pz-band { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:.5rem; min-width:0; }
  .pz-pfeil { display:none; }
  .pz-schritt { position:relative; overflow:hidden; min-width:0; padding:.5rem .75rem .6rem; border-radius:12px;
                background:rgba(255,255,255,.03); border:1px solid var(--haar); }
  .pz-schritt::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--haar-hell); }
  .pz-schritt.arbeit::after { background:#E2BE55; }
  .pz-schritt.brennt::after { background:var(--rot-hell); box-shadow:0 0 10px rgba(229,72,77,.8); }
  .pz-schritt:hover { background:rgba(255,255,255,.06); }
  .pz-txt { min-width:0; }
  .pz-info { overflow:hidden; text-overflow:ellipsis; }
  .pz-schritt.hier { background:linear-gradient(135deg, #D8343D, #8E141D); border-color:transparent;
                     box-shadow:0 12px 26px -12px rgba(196,30,42,.95), inset 0 1px 0 rgba(255,255,255,.2); }
  .pz-schritt.hier::after { display:none; }
  .pz-schritt.hier .pz-name, .pz-schritt.hier .pz-info, .pz-schritt.hier .pz-info b,
  .pz-schritt.hier .pz-info .warn, .pz-schritt.hier .pz-info .alarm { color:#fff; }
  .pz-schritt.hier .pz-nr { background:#fff; border-color:#fff; color:var(--rot); box-shadow:none; }
}
@media (max-width: 860px) {
  #inhalt h1 { font-size:1.75rem; letter-spacing:.045em; }
  #inhalt #db-wurzel .db-herozahl { font-size:2.8rem; }
  #inhalt #db-wurzel .db-herofunke .db-funke { width:220px; height:56px; }
}

/* ══ 4. Vertrieb am Handy ([LF - PR19 - ISS079], static/vertrieb_mobil.js) ══
   Nur unter 861 px: Fotos groß, Schnellkontakt, Sprungmarken und eine feste Leiste über den Reitern. */
.nur-handy { display:none !important; }
#vm-wartet { display:none; }
@media (max-width: 860px) {
  .nur-handy { display:block !important; }
  .vm-kopf { margin:.2rem 0 1.1rem; display:flex !important; flex-direction:column; gap:.8rem; }
  .vm-fotos { display:flex; gap:.6rem; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -1rem; padding:0 1rem .2rem; }
  .vm-fotos img { flex:0 0 86%; height:220px; object-fit:cover; border-radius:16px; scroll-snap-align:center;
                  border:1px solid var(--haar-hell); box-shadow:0 18px 36px -24px rgba(0,0,0,.9); }
  .vm-fotos img:only-child { flex-basis:100%; }
  .vm-kontakte { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:.5rem; }
  #inhalt a.vm-kontakt { display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.7rem .3rem; border-radius:14px;
    background:rgba(255,255,255,.04); border:1px solid var(--haar-hell); color:var(--hell) !important; text-decoration:none !important;
    font-size:.72rem; font-weight:600; -webkit-tap-highlight-color:transparent; }
  #inhalt a.vm-kontakt:active { background:rgba(229,72,77,.12); }
  .vm-kontakt .ico-svg { width:22px; height:22px; color:var(--rot-hell); }
  .vm-nachricht { background:rgba(255,255,255,.03); border:1px solid var(--haar); border-left:3px solid var(--rot-hell);
    border-radius:4px 14px 14px 14px; padding:.75rem .9rem; font-size:.95rem; line-height:1.45; white-space:pre-wrap; }
  .vm-marken { display:flex; gap:.4rem; overflow-x:auto; margin:0 -1rem; padding:0 1rem; }
  .vm-marken button { flex:none; min-height:36px; padding:.35rem .85rem; border-radius:99px; font-size:.78rem; }

  /* Feste Leiste über der Reiterleiste */
  #vm-leiste { display:flex !important; gap:.5rem; position:fixed; left:.6rem; right:.6rem; z-index:65;
    bottom:calc(var(--reiter) + .5rem + env(safe-area-inset-bottom)); padding:.45rem; border-radius:18px;
    background:rgba(20,21,26,.9); border:1px solid var(--haar-hell); box-shadow:0 18px 40px -16px rgba(0,0,0,.95);
    backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); }
  #vm-leiste > button, #vm-leiste > label { flex:1; min-height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; gap:.4rem; font-size:.86rem; }
  #vm-leiste .vm-ablehnen { color:var(--rot-hell); flex:.8; }
  #vm-leiste .vm-haupt { flex:1.3; }
  #vm-leiste.vm-vier > .vm-knopf { flex-direction:column; gap:.15rem; font-size:.68rem; font-weight:600; padding:.35rem .2rem; min-height:54px;
    background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px var(--haar-hell); color:var(--hell); cursor:pointer; }
  #vm-leiste.vm-vier > .vm-knopf.vm-haupt { background:linear-gradient(135deg, #D8343D, #8E141D); box-shadow:0 10px 22px -12px rgba(196,30,42,.95); }
  #vm-leiste .ico-svg { width:20px; height:20px; }
  #inhalt:has(#vm-leiste) { padding-bottom:calc(var(--reiter) + 7.5rem + env(safe-area-inset-bottom)); }
  #meldung { z-index:95; }

  #vm-wartet { display:block; position:fixed; left:50%; transform:translateX(-50%); z-index:66; cursor:pointer;
    top:calc(56px + env(safe-area-inset-top)); padding:.35rem .8rem; border-radius:99px; font-size:.74rem; font-weight:600;
    background:#3A2E12; color:#F0D27A; border:1px solid rgba(226,190,85,.5); box-shadow:0 8px 20px -10px #000; }

  /* Aufmaß-Blatt */
  .vm-flaeche { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) auto minmax(0, 1fr); gap:.4rem; align-items:center; margin-bottom:.45rem; }
  .vm-flaeche span { color:var(--grau-d); }
  .vm-summe { display:flex; justify-content:space-between; align-items:baseline; margin-top:.9rem; padding-top:.7rem; border-top:1px solid var(--haar-hell); color:var(--grau); }
  .vm-summe b { font-family:Oswald,sans-serif; font-size:1.6rem; font-weight:500; color:var(--hell); }

  /* M5: Angebotspositionen am Handy — Bezeichnung oben, Menge · Preis · Summe nebeneinander, Knöpfe darunter */
  #ap-positionen table, #ap-positionen tbody { display:block; width:100%; min-width:0 !important; }
  #ap-positionen tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:.35rem .6rem; align-items:center;
    padding:.75rem .1rem; border-bottom:1px solid var(--haar); }
  #ap-positionen tr > th { display:none; }
  #ap-positionen tr > td { padding:0; border:0; min-width:0; }
  #ap-positionen tr > td:first-child { display:none; }
  #ap-positionen tr > td:nth-child(2) { grid-column:1 / -1; }
  #ap-positionen tr > td:nth-child(3), #ap-positionen tr > td:nth-child(4) { text-align:left !important; display:flex; align-items:center; gap:.35rem; white-space:nowrap; }
  #ap-positionen tr > td:nth-child(3) input, #ap-positionen tr > td:nth-child(4) input { flex:1; min-width:0; width:auto !important; font-size:16px; padding:.5rem .55rem !important; }
  #ap-positionen tr > td:nth-child(6) { grid-column:1 / -1; text-align:left !important; display:flex; gap:.4rem; flex-wrap:wrap; }
  #ap-positionen tr > td[colspan] { grid-column:1 / -1; text-align:right !important; white-space:normal !important; }
  #ap-positionen tr:has(> td[colspan]) { display:flex; justify-content:space-between; gap:1rem; border-bottom:0; padding:.3rem .1rem; }
  #ap-positionen tr:has(> td[colspan]) > td:first-child[colspan] { display:block; }
}

/* ══ 5. Mitteilungen ([LF - PR19 - ISS080], static/mitteilungen.js) ══ */
.mt-stand { display:flex; gap:.7rem; align-items:flex-start; font-size:.95rem; line-height:1.45; }
.mt-punkt { width:11px; height:11px; border-radius:50%; flex:none; margin-top:.35rem; background:var(--grau-d); }
.mt-ok .mt-punkt { background:var(--gruen); box-shadow:0 0 10px rgba(63,164,91,.8); }
.mt-warn .mt-punkt { background:var(--gelb); }
.mt-knoepfe { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.9rem; }
.mt-knoepfe:empty { display:none; }
.mt-anlass { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:0; padding:.8rem 0;
             border-bottom:1px solid var(--haar); cursor:pointer; font-size:.9rem; color:var(--hell); letter-spacing:0; }
.mt-anlass:last-child { border-bottom:0; }
.mt-anlass b { font-weight:600; display:block; }
.mt-anlass small { display:block; color:var(--grau-d); font-size:.74rem; margin-top:.15rem; }
.mt-gesperrt { opacity:.5; cursor:default; }
/* Schalter statt Häkchen */
input.mt-schalter { appearance:none; -webkit-appearance:none; width:46px !important; height:28px; flex:none; border-radius:99px; position:relative;
  background:var(--karte-3); border:1px solid var(--rand-hell); padding:0; margin:0; cursor:pointer; transition:background .15s; }
input.mt-schalter::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#C9C7C2; transition:transform .18s; }
input.mt-schalter:checked { background:linear-gradient(135deg, #D8343D, #8E141D); border-color:transparent; }
input.mt-schalter:checked::after { transform:translateX(18px); background:#fff; }
.mt-keine { display:flex; align-items:center; gap:.4rem; margin-top:1.6rem; font-size:.85rem; color:var(--hell); }
#mt-hinweis { border-color:rgba(229,72,77,.35); background:radial-gradient(120% 140% at 0% 0%, rgba(229,72,77,.16), transparent 60%), var(--karte); }
#mt-hinweis b { font-size:1rem; }

/* ══ 6. Heute, Freigaben, Tagesplan am Handy ([LF - PR19 - ISS081], static/mobil_buero.js) ══ */
.mb-karte { display:flex; flex-direction:column; gap:.35rem; }
.mb-kopfzeile { display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; flex-wrap:wrap; }
.mb-betrag { font-family:Oswald,sans-serif; font-size:1.15rem; letter-spacing:.02em; }
.mb-knoepfe { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.45rem; }
.mb-zitat { border-left:2px solid var(--rand-hell); padding-left:.6rem; white-space:pre-wrap; }
.mb-warn { font-size:.8rem; color:#E8C766; }
.mb-warn::before { content:"⚠ "; }
.mb-einsatz.mb-erledigt, .mb-einsatz.mb-ausgefallen { opacity:.6; }
.mb-einsatz.mb-laeuft { border-color:rgba(74,134,197,.55); }
.mb-frei { padding:.8rem !important; color:var(--grau-d); }
.mb-tagwahl { display:flex; align-items:center; gap:.6rem; margin:0 0 .4rem; }
.mb-tagwahl > button { min-width:44px; font-size:1.2rem; }
.mb-tag { flex:1; display:flex; flex-direction:column; align-items:center; line-height:1.25; }
.mb-tag b { font-family:Oswald,sans-serif; font-size:1.25rem; letter-spacing:.04em; }
#mb-wischtipp { margin:-.6rem 0 1rem; color:var(--grau-d); }
@media (max-width: 860px) {
  /* Wischen auf „Heute“: die Karte zeigt, was beim Loslassen passiert */
  table.t-karten > tbody > tr[data-ag] { transition:transform .2s cubic-bezier(.2,.8,.2,1), background .15s; touch-action:pan-y; }
  table.t-karten > tbody > tr.wisch-rechts { background:linear-gradient(90deg, rgba(63,164,91,.28), transparent 70%), var(--karte) !important; }
  table.t-karten > tbody > tr.wisch-links { background:linear-gradient(270deg, rgba(226,190,85,.25), transparent 70%), var(--karte) !important; }
  /* Lagebild kompakt: Kennzahlen zu zweit, Aufgaben-Kacheln kleiner */
  #inhalt #db-wurzel .db-kacheln { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; }
  #inhalt #db-wurzel .db-kachel { min-height:0; padding:.85rem .9rem .8rem; }
  #inhalt #db-wurzel .db-kwert { font-size:1.6rem; }
  #inhalt #db-wurzel .db-kachel .db-funke { display:none; }
  #inhalt #db-wurzel .db-tunleiste { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; }
  #inhalt #db-wurzel .db-tun { padding:.7rem .8rem; gap:.55rem; }
  #inhalt #db-wurzel .db-tun b { font-size:1.6rem; }
  #inhalt #db-wurzel .db-tun span { font-size:.76rem; }
  .mb-knoepfe button { flex:1 1 30%; white-space:nowrap; }
  /* Filterzeilen über Listen (Anfragen, Angebote, Aufträge, Operations) brechen um statt die Seite zu verbreitern */
  .pt-kopf { flex-wrap:wrap; }
  .pt-kopf .seg { margin-left:0; }
  #inhalt { overflow-x:hidden; }
  /* Zweispaltige Inline-Raster (Stammdaten, Akten) am Handy einspaltig; Einträge über beide Spalten normal */
  #inhalt [style*="grid-template-columns:1fr 1fr"], #inhalt [style*="grid-template-columns:repeat(6,1fr)"] { grid-template-columns:minmax(0, 1fr) !important; }
  #inhalt [style*="grid-column:1/3"], #inhalt [style*="grid-column:1 / 3"] { grid-column:auto !important; }
  #inhalt .karte > div[style*="justify-content:space-between"] { flex-wrap:wrap; }
}