/* ============================================================
   4unet Tech-App
   Bedienregeln: grosse Trefferflächen, kein Symbol ohne Wort,
   wichtigster Knopf unten. Hell und dunkel.
   ============================================================ */

:root{
  --grund:#f2f2f7; --flaeche:#ffffff; --flaeche2:#e9e9ec;
  --schrift:#000000; --schrift2:#8a8a8e; --linie:#e3e3e7;
  --marke:#4a8b1c; --marke-hell:#5f9c22;
  --balken:rgba(249,249,251,.94); --balken-linie:#d6d6da;
  --schatten:0 1px 3px rgba(0,0,0,.10);

  --st-offen-bg:#e4eefb; --st-offen:#0060cc;
  --st-arbeit-bg:#fdeade; --st-arbeit:#c25f06;
  --st-wartet-bg:#fdf1d6; --st-wartet:#9a6b00;
  --st-fertig-bg:#e2f4e4; --st-fertig:#237a2c;
  --st-nein-bg:#fbe4e4;   --st-nein:#b91c1c;
}
@media (prefers-color-scheme: dark){
  :root{
    --grund:#000000; --flaeche:#1c1c1e; --flaeche2:#2c2c2e;
    --schrift:#ffffff; --schrift2:#8e8e93; --linie:#38383a;
    --marke:#8fd83f; --marke-hell:#78be31;
    --balken:rgba(30,30,32,.97); --balken-linie:#3a3a3c;
    --schatten:none;
    --st-offen-bg:#10305c; --st-offen:#6cb6ff;
    --st-arbeit-bg:#4a2c08; --st-arbeit:#ffab4a;
    --st-wartet-bg:#42360c; --st-wartet:#e8c24d;
    --st-fertig-bg:#13381a; --st-fertig:#5fd06e;
    --st-nein-bg:#3d1414;   --st-nein:#ff6961;
  }
}

/* ── Handschaltung ──────────────────────────────────────────────
   Ohne Zutun folgt die App der Systemeinstellung (die @media-Regeln oben).
   Wählt der Techniker im Menü etwas aus, gewinnt data-thema am <html>.
   Die Werte stehen hier bewusst noch einmal, statt jede einzelne Regel
   im Stylesheet umzubauen — das bleibt übersichtlich und ist leicht
   nachzuvollziehen. */
:root[data-thema="dunkel"]{
  --grund:#000000; --flaeche:#1c1c1e; --flaeche2:#2c2c2e;
  --schrift:#ffffff; --schrift2:#8e8e93; --linie:#38383a;
  --marke:#8fd83f; --marke-hell:#78be31;
  --balken:rgba(30,30,32,.97); --balken-linie:#3a3a3c;
  --schatten:none;
  --st-offen-bg:#10305c; --st-offen:#6cb6ff;
  --st-arbeit-bg:#4a2c08; --st-arbeit:#ffab4a;
  --st-wartet-bg:#42360c; --st-wartet:#e8c24d;
  --st-fertig-bg:#13381a; --st-fertig:#5fd06e;
  --st-nein-bg:#3d1414;   --st-nein:#ff6961;
}
:root[data-thema="hell"]{
  --grund:#f2f2f7; --flaeche:#ffffff; --flaeche2:#e9e9ec;
  --schrift:#000000; --schrift2:#8a8a8e; --linie:#e3e3e7;
  --marke:#4a8b1c; --marke-hell:#5f9c22;
  --balken:rgba(249,249,251,.94); --balken-linie:#d6d6da;
  --schatten:0 1px 3px rgba(0,0,0,.10);
  --st-offen-bg:#e4eefb; --st-offen:#0060cc;
  --st-arbeit-bg:#fdeade; --st-arbeit:#c25f06;
  --st-wartet-bg:#fdf1d6; --st-wartet:#9a6b00;
  --st-fertig-bg:#e2f4e4; --st-fertig:#237a2c;
  --st-nein-bg:#fbe4e4;   --st-nein:#b91c1c;
}
/* Ein paar Stellen mit fest gesetzten Farben nachziehen */
:root[data-thema="dunkel"] .verlauf{background:#0b1410;
  background-image:radial-gradient(circle at 12px 12px,rgba(255,255,255,.03) 1.7px,transparent 1.8px)}
:root[data-thema="dunkel"] .blase.sie{background:#232d28;color:#e9ece8}
:root[data-thema="dunkel"] .blase.ich{background:#1e4b2c;color:#e9ece8}
:root[data-thema="dunkel"] .tagtrenner{background:rgba(255,255,255,.12);color:#c9cdd0}
:root[data-thema="dunkel"] .entwurf{background:#2b2413;border-color:#4a3d1a}
:root[data-thema="dunkel"] .entwurf b{color:#e8c24d}
:root[data-thema="dunkel"] img[data-marke="1"],
:root[data-thema="dunkel"] img[data-marke="9"]{filter:invert(1)}
:root[data-thema="dunkel"] img[data-marke="7"]{filter:brightness(1.9) saturate(1.15)}

:root[data-thema="hell"] .verlauf{background:#ece5dd;
  background-image:radial-gradient(circle at 12px 12px,rgba(0,0,0,.028) 1.7px,transparent 1.8px)}
:root[data-thema="hell"] .blase.sie{background:#fff;color:#000}
:root[data-thema="hell"] .blase.ich{background:#dcf7c8;color:#000}
:root[data-thema="hell"] .tagtrenner{background:rgba(255,255,255,.85);color:#5b6166}
:root[data-thema="hell"] .entwurf{background:#fff8e6;border-color:#f0dfae}
:root[data-thema="hell"] .entwurf b{color:#7a5500}
:root[data-thema="hell"] img[data-marke]{filter:none}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,
body{width:100%;max-width:100%}
html{min-height:100%;height:auto;overscroll-behavior:none;overflow-x:clip;
     overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
/* Weniger Gummiband-Effekt beim Überscrollen (das "springt wieder nach oben")
   UND seitliches Verschieben komplett sperren: overflow-x:clip macht die Seite
   genau bildschirmbreit — verhindert, dass sich die Seite nach links/rechts
   ziehen lässt und dass fixe Balken (Reiter, Sende-Leiste) mit ihrem right:0
   aus dem Bild rutschen. clip bricht weder das vertikale Scrollen noch den
   klebenden Kopf (getestet). */
body{
  font-family:-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  background:var(--grund); color:var(--schrift); font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  overscroll-behavior-x:none;
  overflow-x:clip;          /* nichts lässt sich seitlich verschieben */
  /* Gesten-Sperre: nur senkrecht wischen. Sperrt links/rechts-Ziehen UND das
     Auseinanderziehen (Pinch-Zoom) hart auf Touch-Ebene — unabhängig davon, ob
     doch mal etwas eine Idee zu breit ist. Senkrecht scrollen bleibt normal. */
  touch-action:pan-y;
  /* Body waechst mit dem Inhalt (NICHT auf Fensterhoehe fixieren) — sonst
     "frisst" ein fixer height:100% das padding-bottom und der letzte Inhalt
     (z.B. die unterste Kalenderwoche) verschwindet hinter der Reiterleiste.
     min-height fuellt kurze Seiten bis zum Rand. */
  min-height:100vh; min-height:100dvh;
  /* Notch wird NICHT mehr am Body abgefangen, sondern vom klebenden Kopf
     (der deckt die Notch beim Scrollen mit ab). Unten Platz fuer die Leiste
     PLUS etwas Luft, damit die letzte Zeile frei ueber der Leiste steht. */
  padding-bottom:0;
  position:relative;
  width:100%;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* iOS zoomt beim Fokus in JEDES Eingabefeld unter 16px rein — dadurch verschiebt
   sich die ganze Seite seitlich und Knöpfe rutschen raus. 16px = kein Auto-Zoom.
   Grundregel für alles ohne eigene Grösse; einzelne Felder setzen 16–17px selbst. */
input,select,textarea{font-size:16px}

/* ---------- Kopf ----------
   Klebt oben fest (bleibt beim Scrollen stehen) und deckt mit seinem
   Hintergrund die Notch ab — dadurch bewegt sich "Hallo Christian" nicht mehr. */
.kopf{position:sticky;top:0;z-index:20;background:var(--grund);
      padding:calc(12px + env(safe-area-inset-top)) 18px 8px}
.kopf h1{font-size:28px;font-weight:730;letter-spacing:-.8px;line-height:1.15}
.kopf .unter{font-size:13px;color:var(--schrift2);margin-top:2px}
.rolle{display:inline-block;background:#e8dff8;color:#6b2fb5;font-size:10px;font-weight:700;
       padding:2px 8px;border-radius:99px;margin-left:7px;vertical-align:5px;letter-spacing:.3px}
@media (prefers-color-scheme:dark){ .rolle{background:#2d1f45;color:#c9a6f5} }

/* ---------- Abschnitte ---------- */
.titel{display:flex;justify-content:space-between;align-items:baseline;
       padding:16px 18px 6px;font-size:12px;letter-spacing:.4px;text-transform:uppercase;
       font-weight:650;color:var(--schrift)}
.titel a{color:var(--marke);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;
         text-decoration:none}
.gruppe{margin:0 14px;background:var(--flaeche);border-radius:13px;overflow:hidden;
        box-shadow:var(--schatten)}

/* iOS-safe: komplette App bleibt auf 100% der Viewport-Breite */
.schirm,
.reiter,
.abdunkeln,
.blatt,
.verlauf,
.kopf,
.gruppe,
.planwahl,
.kalgitter,
.todo,
.chatzeile{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* Speziell für den Chat-Flow mit festem Container */
#s-verlauf.an{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* ---------- Auftragszeile ---------- */
.auftrag{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
         padding:11px 13px 11px 0;border-left:4px solid var(--linie);position:relative}
.auftrag+.auftrag{border-top:1px solid var(--linie)}
.auftrag:active{background:var(--flaeche2)}
/* Logo steht frei — kein Kästchen, kein Rahmen */
.auftrag .logo{width:40px;height:36px;margin-left:11px;flex:none;
               display:flex;align-items:center;justify-content:center}
.auftrag .logo img{max-height:34px;max-width:40px;width:auto;object-fit:contain}
/* Ersatz für Marken, die wir (noch) nicht kennen — lieber unauffällig
   als kaputt. In PANEL tauchen laufend neue auf. */
.ersatzlogo{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
            color:#fff;font-size:12px;font-weight:700;letter-spacing:-.3px}

/* Drei Logos sind so dunkel, dass sie im Dunkelmodus verschwinden:
   Salt (schwarzes S) und KIKO (schwarzes K) sind einfarbig — die kehren wir um.
   Firehouse ist ein dunkelrotes Wappen — das wird nur aufgehellt, Umkehren
   würde die Farbe zerstören. */
@media (prefers-color-scheme:dark){
  img[data-marke="1"], img[data-marke="9"]{ filter:invert(1); }
  img[data-marke="7"]{ filter:brightness(1.9) saturate(1.15); }
}
.auftrag .text{flex:1;min-width:0}
.auftrag h3{font-size:16px;font-weight:620;letter-spacing:-.3px;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auftrag .meta{font-size:12.5px;color:var(--schrift2);margin-top:1px;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
               display:flex;align-items:center;gap:6px}
.auftrags-punkt{width:7px;height:7px;border-radius:50%;flex:none;
                box-shadow:0 0 0 3px color-mix(in srgb,currentColor 9%,transparent)}
.auftrag .rechts{text-align:right;flex:none}
.auftrag .zeit{font-size:15px;font-weight:700;letter-spacing:-.3px}
.auftrag .dauer{font-size:11px;color:var(--schrift2);font-weight:600}

/* Grundfarbe für unbekannte Zustände — in PANEL steht auch mal etwas,
   das keiner unserer Fälle ist. Dann lieber neutral als gar nichts. */
.plakette{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;
          background:var(--flaeche2);color:var(--schrift2)}
.st-quote{background:#efe6fb;color:#6b2fb5}
@media (prefers-color-scheme:dark){ .st-quote{background:#2d1f45;color:#c9a6f5} }
:root[data-thema="dunkel"] .st-quote{background:#2d1f45;color:#c9a6f5}
.st-open{background:var(--st-offen-bg);color:var(--st-offen)}
.st-in_progress{background:var(--st-arbeit-bg);color:var(--st-arbeit)}
.st-pending{background:var(--st-wartet-bg);color:var(--st-wartet)}
.st-closed{background:var(--st-fertig-bg);color:var(--st-fertig)}
.st-rejected,.st-cancelled{background:var(--st-nein-bg);color:var(--st-nein)}

/* ---------- Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px}
.kachel{background:var(--flaeche);border-radius:13px;padding:12px 13px;text-align:left;
        position:relative;min-height:82px;display:flex;flex-direction:column;
        justify-content:space-between;box-shadow:var(--schatten)}
.kachel:active{background:var(--flaeche2)}
.kachel .ico{font-size:21px;line-height:1;color:var(--marke)}

/* Stitch-Farbführung für den echten Schnellzugriff auf der Startseite. */
#s-start .kacheln .kachel{min-height:104px;padding:16px;border:1px solid var(--linie);
                         border-radius:16px;overflow:hidden;isolation:isolate}
#s-start .kacheln .kachel::after{content:"";position:absolute;right:-28px;top:-34px;width:94px;height:94px;
                                border-radius:0 0 0 100%;z-index:-1;background:var(--schnell-akzent)}
#s-start .kacheln .kachel:nth-child(1){--schnell-akzent:rgba(255,255,255,.13);
  background:var(--marke);border-color:var(--marke);color:#fff}
#s-start .kacheln .kachel:nth-child(1) .ico,
#s-start .kacheln .kachel:nth-child(1) .un{color:rgba(255,255,255,.82)}
#s-start .kacheln .kachel:nth-child(n+2){--schnell-akzent:rgba(0,88,188,.08);
  background:var(--flaeche);border-color:color-mix(in srgb,var(--marke) 25%,var(--linie));
  color:var(--marke)}
#s-start .kacheln .kachel:nth-child(n+2) .ico{color:var(--marke)}
#s-start .kacheln .kachel:nth-child(n+2) .un{color:var(--schrift2)}
#s-start .kacheln .kachel .nm{font-size:16px;line-height:21px;font-weight:700}
#s-start .kacheln .kachel .un{font-size:12px;line-height:16px;color:var(--schrift2)}
.kachel .nm{font-size:14px;font-weight:650;letter-spacing:-.2px}
.kachel .un{font-size:12px;color:var(--schrift2);margin-top:1px}
.zaehler{position:absolute;top:10px;right:11px;background:var(--marke);color:#fff;
         font-size:11px;font-weight:700;min-width:21px;height:21px;border-radius:99px;
         display:grid;place-items:center;padding:0 6px}
.zaehler.still{background:var(--schrift2)}
@media (prefers-color-scheme:dark){ .zaehler{color:#0b1405} }

/* Auf kleinen Handys bleibt der Tagesblock kompakt; alle bestehenden
   Auftragsdetails sind weiterhin sichtbar und antippbar. */
.start-heute .auftrag{min-height:62px}
.start-heute .auftrag h3{font-size:15px}
.transfer-warnung{display:block;margin-top:6px;color:var(--st-nein);font-weight:700}
.transferstatus{display:block;margin-top:6px;color:var(--schrift2);font-weight:650}
.transferstatus.fertig{color:var(--st-fertig)}
.transferstatus.fehler{color:var(--st-nein)}

/* ============================================================
   iOS Polish 2026-08-27
   Rein visuell: bestehende Klassen, Icons und Funktionswege bleiben gleich.
   ============================================================ */
:root{
  --grund:#f4f4f8;
  --flaeche2:#ededf2;
  --linie:rgba(60,60,67,.16);
  --schatten:0 1px 2px rgba(0,0,0,.04),0 7px 22px rgba(0,0,0,.055);
  --schatten-oben:0 -1px 0 rgba(60,60,67,.12),0 -8px 28px rgba(0,0,0,.045);
}
@media (prefers-color-scheme:dark){
  :root{--grund:#050506;--flaeche:#1c1c1e;--flaeche2:#29292c;
        --linie:rgba(255,255,255,.13);--schatten:0 1px 0 rgba(255,255,255,.035)}
}
:root[data-thema="hell"]{--grund:#f4f4f8;--flaeche2:#ededf2;
  --linie:rgba(60,60,67,.16);--schatten:0 1px 2px rgba(0,0,0,.04),0 7px 22px rgba(0,0,0,.055)}
:root[data-thema="dunkel"]{--grund:#050506;--flaeche:#1c1c1e;--flaeche2:#29292c;
  --linie:rgba(255,255,255,.13);--schatten:0 1px 0 rgba(255,255,255,.035)}

body{font-size:15.5px;line-height:1.42;letter-spacing:-.08px}

/* Ruhiger Large-Title-Kopf mit systemnaher, leicht transparenter Toolbar. */
.kopf{padding:calc(15px + env(safe-area-inset-top)) 20px 11px;
      background:color-mix(in srgb,var(--grund) 91%,transparent);
      border-bottom:1px solid transparent;
      -webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.kopf h1{font-size:29px;font-weight:740;letter-spacing:-1px;line-height:1.12}
.kopf .unter{font-size:13px;line-height:1.35;margin-top:4px}
.zurueck{min-height:44px;padding:8px 16px;font-weight:610;letter-spacing:-.2px}

/* Gruppierte Inhalte: mehr Luft, weichere Ecken, dezente Tiefenwirkung. */
.titel{padding:21px 20px 7px;font-size:11.5px;font-weight:670;letter-spacing:.48px}
.titel a{min-height:36px;display:inline-flex;align-items:center;margin:-8px -8px -8px 0;padding:8px;
         font-size:13.5px;font-weight:620}
.gruppe,.treffer{margin-left:14px;margin-right:14px;border-radius:17px;box-shadow:var(--schatten)}
.zeile{min-height:50px;padding:13px 15px}
.auftrag{min-height:68px;padding-top:13px;padding-bottom:13px;transition:transform .16s ease,filter .16s ease}
.auftrag h3{font-size:16px;font-weight:640}
.auftrag .meta{font-size:12.5px;line-height:1.35;margin-top:3px}
.matzeile,.pickzeile,.tuwas,.treffer button{min-height:52px;padding-top:12px;padding-bottom:12px}

/* Schnellzugriff wirkt wie ein Satz ruhiger iOS-Widgets. */
.kacheln{gap:11px;padding:0 14px}
.kachel{min-height:92px;border-radius:17px;padding:14px 15px;box-shadow:var(--schatten);
        transition:transform .17s cubic-bezier(.2,.8,.2,1),filter .17s ease}
.kachel .ico{font-size:22px}
.kachel .nm{font-size:14.5px;font-weight:670}
.kachel .un{font-size:12px;line-height:1.3;margin-top:3px}
.zaehler{top:12px;right:12px;min-width:22px;height:22px}

/* Einheitliche, mindestens 48px hohe Aktionen und Formfelder. */
.aktionen{padding:18px 14px 9px;gap:10px}
.knopf{min-height:50px;padding:14px 16px;border-radius:15px;font-size:16px;font-weight:680;
       box-shadow:var(--schatten);transition:transform .16s ease,filter .16s ease,opacity .16s ease}
.knopf.haupt{box-shadow:0 5px 16px color-mix(in srgb,var(--marke) 27%,transparent)}
.knopf:disabled,.senden:disabled{opacity:.48;cursor:default}
.textfeld,.zeitfeld,.zeitwahl,.suchfeld,.notizfeld,
.schreiben input{min-height:44px;border-radius:12px;border:1px solid var(--linie);
                 background:var(--flaeche);color:var(--schrift);outline:none;
                 transition:border-color .16s ease,box-shadow .16s ease}
.textfeld:focus,.zeitfeld:focus,.zeitwahl:focus,.suchfeld:focus,.notizfeld:focus,
.schreiben input:focus{border-color:color-mix(in srgb,var(--marke) 72%,transparent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--marke) 14%,transparent)}

/* Bottom-Bar und Sheets erhalten die typische schwebende Materialwirkung. */
.reiter{min-height:58px;padding-top:7px;
        background:color-mix(in srgb,var(--balken) 88%,transparent);
        border-top-color:var(--linie);box-shadow:var(--schatten-oben);
        -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
.reiter button{min-height:47px;font-size:10.5px;transition:color .16s ease,transform .16s ease}
.reiter .ic{font-size:19px;margin-bottom:2px}
.blatt{border-radius:24px 24px 0 0;box-shadow:0 -12px 42px rgba(0,0,0,.16)}
.blatt .griff{width:36px;height:5px;margin-top:9px;background:color-mix(in srgb,var(--schrift2) 45%,transparent)}
.blatt .blattkopf{padding-left:18px;padding-right:18px}
.abdunkeln{background:rgba(0,0,0,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.fab{width:56px;height:56px;right:16px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.22)}

/* Haptisch wirkende, aber zurückhaltende Zustände. */
@media (hover:hover){
  .kachel:hover,.knopf:hover,.auftrag:hover{filter:brightness(.985)}
}
.kachel:active,.knopf:active,.auftrag:active,.reiter button:active{transform:scale(.975)}
.schirm{animation:rein .2s cubic-bezier(.22,.75,.25,1)}

/* Sehr schmale Geräte: keine gequetschten Texte oder horizontale Überläufe. */
@media (max-width:359px){
  .kopf{padding-left:16px;padding-right:16px}.kopf h1{font-size:27px}
  .titel{padding-left:17px;padding-right:17px}
  .kacheln{gap:8px;padding-left:10px;padding-right:10px}
  .kachel{min-height:88px;padding:12px}.kachel .nm{font-size:13.5px}
  .gruppe,.treffer{margin-left:10px;margin-right:10px}
  .reiter button{font-size:9.5px}
}

@media (prefers-reduced-motion:reduce){
  .schirm,.kachel,.knopf,.auftrag,.reiter button{animation:none!important;transition:none!important}
}

/* ---------- Entwurf-Hinweis ---------- */
.entwurf{display:flex;align-items:center;gap:11px;margin:10px 14px 0;padding:11px 13px;
         background:#fff8e6;border:1px solid #f0dfae;border-radius:13px;width:calc(100% - 28px);
         text-align:left}
@media (prefers-color-scheme:dark){ .entwurf{background:#2b2413;border-color:#4a3d1a} }
.entwurf .ic{font-size:17px}
.entwurf .tx{flex:1;min-width:0}
.entwurf b{display:block;font-size:14px;font-weight:640;color:#7a5500}
.entwurf span{font-size:12px;color:#a08341}
@media (prefers-color-scheme:dark){ .entwurf b{color:#e8c24d} .entwurf span{color:#a3915c} }

/* ---------- Wochenstreifen ---------- */
/* Acht Tage auf schmalen Geräten: Abstände knapp halten, damit jeder Tag
   noch breit genug für einen Finger bleibt. */
.woche{display:flex;gap:4px;padding:0 10px}
.woche button{flex:1;background:var(--flaeche);border-radius:11px;padding:8px 0 7px;
              text-align:center;box-shadow:var(--schatten)}
.woche .heute{background:var(--marke);color:#fff}
@media (prefers-color-scheme:dark){ .woche .heute{color:#0b1405} }
.woche .wt{font-size:10px;font-weight:700;color:var(--schrift2);text-transform:uppercase}
.woche .heute .wt{color:rgba(255,255,255,.8)}
@media (prefers-color-scheme:dark){ .woche .heute .wt{color:rgba(0,0,0,.55)} }
.woche .nr{font-size:17px;font-weight:700;letter-spacing:-.5px;margin-top:1px}
.woche .punkte{display:flex;gap:3px;justify-content:center;margin-top:4px;height:5px}
.woche .punkte i{width:5px;height:5px;border-radius:99px;display:block}

.woche .zahl{font-size:10px;font-weight:700;color:var(--schrift2);margin-top:2px}
.woche .heute .zahl{color:rgba(255,255,255,.85)}
@media (prefers-color-scheme:dark){ .woche .heute .zahl{color:rgba(0,0,0,.6)} }
.woche button.leerTag{opacity:.45}
.woche .meins{box-shadow:inset 0 0 0 2px var(--marke), var(--schatten)}

/* ---------- Tages-Popup ---------- */
.abdunkeln{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:40;
           display:none;align-items:flex-end;animation:einblenden .18s ease}
.abdunkeln.an{display:flex}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.blatt{width:100%;max-height:82vh;background:var(--grund);border-radius:18px 18px 0 0;
       overflow-y:auto;padding-bottom:calc(16px + env(safe-area-inset-bottom));
       animation:hoch .24s cubic-bezier(.32,.72,0,1)}
@keyframes hoch{from{transform:translateY(100%)}to{transform:none}}
.blatt .griff{width:38px;height:5px;border-radius:99px;background:var(--linie);
              margin:9px auto 4px}
.blatt .blattkopf{display:flex;align-items:baseline;justify-content:space-between;
                  padding:6px 18px 10px}
.blatt .blattkopf h2{font-size:20px;font-weight:720;letter-spacing:-.5px}
.blatt .blattkopf span{font-size:13px;color:var(--schrift2)}
.blatt .zu{position:sticky;bottom:0;padding:12px 14px 0}
.blatt .zu button{width:100%;padding:14px;border-radius:13px;background:var(--flaeche);
                  font-size:16px;font-weight:650;color:var(--marke);box-shadow:var(--schatten)}
.tech{font-size:12.5px;color:var(--schrift2)}
.tech.offen{color:#8944d4;font-weight:650}
@media (prefers-color-scheme:dark){ .tech.offen{color:#c08cf7} }

/* ---------- Chat-Vorschau ---------- */
.chatzeile{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 13px}
.chatzeile+.chatzeile{border-top:1px solid var(--linie)}
.chatzeile:active{background:var(--flaeche2)}
.avatar{width:44px;height:44px;border-radius:99px;flex:none;display:grid;place-items:center;
        color:#fff;font-size:14px;font-weight:700;overflow:hidden}
/* Marken-Kanäle zeigen das Logo frei, ohne Kreis darunter */
.avatar.marke{background:none !important;border-radius:0}
.avatar.marke img{width:100%;height:100%;object-fit:contain}
.chatzeile .tx{flex:1;min-width:0}
.chatzeile h3{font-size:15px;font-weight:620;letter-spacing:-.25px;
              white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatzeile p{font-size:13px;color:var(--schrift2);white-space:nowrap;overflow:hidden;
             text-overflow:ellipsis;margin-top:1px}
.chatzeile .re{text-align:right;flex:none}
.chatzeile .zt{font-size:11.5px;color:var(--schrift2)}

/* ---------- Reiterleiste ----------
   Die Hoehe MUSS den Sicherheitsabstand am unteren Rand mitrechnen.
   Bei festen 58px liegt der Streifen unterhalb der Leiste frei und der
   Seitenhintergrund scheint durch — auf dem iPhone ein schwarzer Balken
   unter dem Menue. */
.reiter{position:fixed;left:0;right:0;bottom:0;display:flex;
        height:calc(58px + env(safe-area-inset-bottom));
        padding-top:6px;padding-bottom:env(safe-area-inset-bottom);
        align-items:flex-start;
        background:var(--balken);backdrop-filter:blur(14px);
        border-top:1px solid var(--balken-linie);
        box-shadow:0 -1px 10px rgba(0,0,0,.16);z-index:20}
.reiter button{flex:1;text-align:center;font-size:10px;font-weight:600;color:var(--schrift2)}
.reiter button.aktiv{color:var(--marke)}
.reiter .ic{display:block;font-size:18px;margin-bottom:1px;font-style:normal}

/* ---------- Zustände ---------- */
.laedt,.leer{padding:34px 20px;text-align:center;color:var(--schrift2);font-size:14px}
.fehler{margin:14px;padding:13px 15px;border-radius:12px;background:var(--st-nein-bg);
        color:var(--st-nein);font-size:14px}
.fehler b{display:block;margin-bottom:3px}

/* ---------- Bildschirm-Wechsel ---------- */
.schirm{display:none;animation:rein .22s ease}
.schirm.an{display:block}
@keyframes rein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Detail ---------- */
.zurueck{display:inline-flex;align-items:center;gap:4px;color:var(--marke);font-size:16px;
         font-weight:600;padding:calc(10px + env(safe-area-inset-top)) 18px 0}
.zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px}
.zeile+.zeile{border-top:1px solid var(--linie)}
.zeile span{color:var(--schrift2);font-size:14px;flex:none}
.zeile b{font-size:15px;font-weight:620;letter-spacing:-.2px;text-align:right}
.zeile a{color:var(--marke);text-decoration:none;font-weight:620}
/* ---------- Eingabefelder im Sign-off ---------- */
.zeitfeld{font-size:17px;font-weight:640;letter-spacing:-.3px;color:var(--schrift);
          background:none;border:0;text-align:right;outline:none;padding:2px 0;
          font-family:inherit;min-width:96px}
.zeit-eingabe{position:relative;display:inline-flex;align-items:center;justify-content:center;
              min-width:104px;min-height:44px;flex:none;border-radius:12px}
.zeit-eingabe .zeitfeld{width:100%;min-width:104px;min-height:44px;padding:7px 10px;
                       box-sizing:border-box;text-align:center;background:var(--flaeche2);
                       border:1px solid var(--linie);border-radius:12px}
.zeit-eingabe .zeit-leer{position:absolute;inset:0;display:none;place-items:center;
                        pointer-events:none;color:var(--schrift);font-size:17px;
                        font-weight:640;letter-spacing:-.3px}
.zeit-eingabe.ist-leer .zeit-leer{display:grid}
.zeit-eingabe.ist-leer .zeitfeld{opacity:0}
.zeit-eingabe:focus-within{box-shadow:inset 0 0 0 2px var(--marke)}
.zeitfeld.schmal{min-width:58px;text-align:right}
/* Viertelstunden zum Antippen statt Dezimalzahlen zum Vertippen */
.zeitwahl{font-size:17px;font-weight:640;letter-spacing:-.3px;color:var(--schrift);
          background:var(--flaeche2);border:0;outline:none;font-family:inherit;
          padding:7px 10px;border-radius:9px;min-width:104px;text-align:center;
          text-align-last:center;appearance:none;-webkit-appearance:none}
.zeitwahl:focus{box-shadow:inset 0 0 0 2px var(--marke);color:var(--marke)}
.zeitfeld:focus{color:var(--marke)}
.einheit{font-size:13px;color:var(--schrift2);flex:none;margin-left:5px}
.textfeld{flex:1;font-size:16px;color:var(--schrift);background:none;border:0;outline:none;
          text-align:right;font-family:inherit;min-width:0}
.textfeld::placeholder{color:var(--schrift2);opacity:.7}
.textfeld:focus{color:var(--marke)}
.zeile.ergebnis b{font-size:20px;font-weight:730;color:var(--marke);letter-spacing:-.5px}
.notizfeld{width:calc(100% - 28px);margin:0 14px;padding:12px 13px;border-radius:13px;
           background:var(--flaeche);border:0;outline:none;resize:vertical;
           font-family:inherit;font-size:16px;color:var(--schrift);box-shadow:var(--schatten)}
.notizfeld:focus{box-shadow:inset 0 0 0 2px var(--marke)}

/* ---------- Unterschriftsfeld ----------
   Bleibt auch im Dunkelmodus weiss — eine Unterschrift gehört auf Papier,
   und der Kunde soll sehen, was er unterschreibt. */
.unterschriftsfeld{position:relative;margin:0 14px;height:190px;background:#fff;
                   border-radius:13px;overflow:hidden;box-shadow:var(--schatten);
                   touch-action:none}
.unterschriftsfeld canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.unterschriftsfeld .linie{position:absolute;left:22px;right:22px;bottom:38px;height:1px;
                          background:#d6d6da;pointer-events:none}
.unterschriftsfeld .hinweis{position:absolute;left:0;right:0;bottom:14px;text-align:center;
                            font-size:12.5px;color:#a8a8ad;pointer-events:none}
.unterschriftsfeld.beschrieben .hinweis{display:none}

.hinweisbox{margin:12px 14px 0;padding:13px 15px;border-radius:12px;font-size:14.5px;
            background:var(--st-fertig-bg);color:var(--st-fertig)}
.hinweisbox b{display:block;margin-bottom:3px}

/* ---------- Admin: Handlungsbedarf ---------- */
.todo{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin:0 14px 9px;
      padding:12px 13px;background:var(--flaeche);border-radius:13px;
      border-left:4px solid var(--st-arbeit);box-shadow:var(--schatten);
      width:calc(100% - 28px)}
.todo.gruen{border-left-color:var(--marke)}
.todo.rot{border-left-color:var(--st-nein)}
.todo.blau{border-left-color:var(--st-offen)}
.todo:active{background:var(--flaeche2)}
.todo .ic{font-size:19px;flex:none}
.todo .tx{flex:1;min-width:0}
.todo b{display:block;font-size:15px;font-weight:640;letter-spacing:-.25px}
.todo span{font-size:12.5px;color:var(--schrift2)}
.todo .pf{font-size:17px;color:var(--linie);flex:none}

/* ---------- Personenplanung ---------- */
.planwahl{display:flex;align-items:center;justify-content:space-between;gap:10px;
          margin:0 14px 10px;padding:8px 12px;background:var(--flaeche);border-radius:12px;
          box-shadow:var(--schatten)}
.planwahl button{font-size:22px;font-weight:600;color:var(--marke);padding:2px 12px;line-height:1}
.planwahl span{font-size:15px;font-weight:640;letter-spacing:-.2px}
/* Bei sechs Reitern wird es eng — Schrift etwas kleiner statt umbrechen */
.reiter button{min-width:0;padding:0 2px}
.reiter:has(button:nth-child(6)) button{font-size:9px}

.person{padding:12px 13px}
.person+.person{border-top:1px solid var(--linie)}
.person .kopfzeile{display:flex;align-items:center;gap:11px}
.person .avatar{width:38px;height:38px;font-size:13px}
.person .nm{flex:1;min-width:0}
.person h4{font-size:15.5px;font-weight:640;letter-spacing:-.3px}
.person .rg{font-size:12px;color:var(--schrift2)}
.person .last{text-align:right;flex:none}
.person .last b{font-size:15px;font-weight:700;letter-spacing:-.3px}
.person .last em{display:block;font-style:normal;font-size:11px;color:var(--schrift2);font-weight:600}
.person .jobs{margin-top:9px;display:flex;flex-direction:column;gap:5px}
.person .job{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;
             border-left:3px solid var(--linie);font-size:13px}
.person .job .zt{font-weight:700;flex:none;font-size:12.5px}
.person .job .tt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person.frei{opacity:1}
.person.weg{opacity:.55}
.abwesend{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;
          background:var(--st-wartet-bg);color:var(--st-wartet);margin-top:4px}
.freiraum{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;
          background:var(--st-fertig-bg);color:var(--st-fertig);margin-top:4px}

/* ---------- Kalender ---------- */
.kalgitter{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0 12px}
.kalwt{text-align:center;font-size:11px;font-weight:700;color:var(--schrift2);padding:2px 0}
.kalzelle{position:relative;aspect-ratio:1;min-height:44px;border-radius:11px;
          background:var(--flaeche);box-shadow:var(--schatten);display:flex;
          flex-direction:column;align-items:center;justify-content:flex-start;
          padding:5px 2px 2px;overflow:hidden}
.kalzelle.leer{background:transparent;box-shadow:none}
.kalzelle.hatPlan{background:var(--flaeche)}
.kalzelle.heute{outline:2px solid var(--marke)}
.kalnr{font-size:13px;font-weight:640;color:var(--schrift)}
.kalzelle.heute .kalnr{color:var(--marke)}
.kalpunkte{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;margin-top:3px}
.kalpunkt{width:7px;height:7px;border-radius:99px;display:inline-block}
.kalabw{color:var(--st-wartet);font-size:12px;line-height:.6}
.kalzahl{position:absolute;top:3px;right:5px;font-size:10px;font-weight:700;
         color:var(--schrift2)}

/* Tag-Planen-Sheet */
.planzeile{display:flex;align-items:center;gap:8px;padding:9px 11px;
           border-left:3px solid var(--linie);font-size:13.5px}
.planzeile+.planzeile{border-top:1px solid var(--linie)}
.pz-tech{font-weight:700;flex:none}
.pz-job{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        color:var(--schrift2)}
.pz-umfang{font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;
           background:var(--st-offen-bg);color:var(--st-offen);flex:none}
.pz-offen{font-weight:700;color:var(--st-wartet);flex:none;font-size:12.5px}
.pz-zuteil{flex:none;max-width:46%;font-size:12.5px;font-weight:650;padding:5px 8px;
           border-radius:8px;border:1.5px solid var(--marke);background:var(--flaeche);
           color:var(--schrift)}

/* Antippbare 3-Stunden-Blöcke (mehrere pro Tag möglich) + Schnellwahl */
.zeitzeile{align-items:flex-start}
.zeitbloecke{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex:1}
.zeitbloecke button{font-size:12.5px;font-weight:650;padding:6px 10px;border-radius:9px;
                    border:1.5px solid var(--linie);color:var(--schrift2);background:var(--flaeche)}
.zeitbloecke button.aktiv{border-color:var(--marke);background:var(--marke);color:#fff}
.umfangpresets{display:flex;gap:8px;padding:8px 14px 2px;flex-wrap:wrap}
.umfangpresets button{font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:99px;
                      background:var(--flaeche2);color:var(--schrift)}
.umfangpresets button:active{background:var(--marke);color:#fff}
.pz-weg{color:var(--st-nein);font-size:15px;font-weight:700;padding:0 4px;flex:none}
.planabw{margin:8px 14px 0;font-size:12px;color:var(--st-wartet);font-weight:600}
.leer.klein{padding:14px;text-align:center;color:var(--schrift2);font-size:13px}

/* ---------- Prozeduren ---------- */
.markenraster{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:4px 14px 20px}
.markenkachel{background:var(--flaeche);border-radius:15px;box-shadow:var(--schatten);
              border:2px solid var(--linie);
              padding:16px 12px 13px;display:flex;flex-direction:column;align-items:center;
              gap:7px;text-align:center}
.markenkachel:active{transform:scale(.97)}
.markenkachel .mk-logo{height:46px;display:flex;align-items:center;justify-content:center}
.markenkachel .mk-logo img{max-height:44px;max-width:80px;width:auto;object-fit:contain}
.markenkachel .mk-name{font-size:14.5px;font-weight:640;letter-spacing:-.2px;color:var(--schrift)}
.markenkachel .mk-zahl{font-size:11.5px;font-weight:600;color:var(--schrift2)}

/* Jeder Bereich ist ein in der Markenfarbe umrahmter Kasten */
.bereich{margin:12px 14px;border:2px solid var(--linie);border-radius:14px;
         background:var(--flaeche);box-shadow:var(--schatten);overflow:hidden}
.bereichkopf{display:flex;justify-content:space-between;align-items:baseline;
             padding:11px 14px 8px;font-size:14px;font-weight:750;letter-spacing:-.2px}
.bereichkopf a{font-size:12px;font-weight:600;color:var(--schrift2);text-decoration:none}

.prozzeile{display:flex;align-items:center;border-top:1px solid var(--linie)}
.prozoeffnen{flex:1;display:flex;align-items:center;gap:11px;padding:11px 13px;text-align:left}
.prozoeffnen:active{background:var(--flaeche2)}
.prozoeffnen .pz-ic{font-size:20px;flex:none}
.prozoeffnen .pz-tx{min-width:0}
.prozoeffnen .pz-tx b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.2px;
                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prozoeffnen .pz-tx em{font-style:normal;font-size:11.5px;color:var(--schrift2)}
.prozzeile .pz-weg{color:var(--st-nein);font-size:16px;font-weight:700;padding:0 14px;flex:none}
.bereich .leer.klein{border-top:1px solid var(--linie)}
.prozplus{width:100%;padding:10px;border:none;border-top:1px solid var(--linie);
          font-weight:600;font-size:13.5px;background:transparent;text-align:center}

/* ---------- Schritte mit Fortschrittsring ---------- */
.fortschritt{display:flex;align-items:center;gap:16px;padding:14px 15px}
.ring{width:76px;height:76px;flex:none;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .bahn{fill:none;stroke:var(--flaeche2);stroke-width:8}
.ring .weg{fill:none;stroke:var(--marke);stroke-width:8;stroke-linecap:round;
           transition:stroke-dasharray .5s cubic-bezier(.4,0,.2,1)}
.ring .zahl{position:absolute;inset:0;display:grid;place-items:center;
            font-size:19px;font-weight:730;letter-spacing:-.8px}
.fortschritt .tx{flex:1;min-width:0}
.fortschritt h4{font-size:16px;font-weight:640;letter-spacing:-.3px}
.fortschritt p{font-size:13px;color:var(--schrift2);margin-top:2px}

.schritt{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:11px 13px}
.schritt+.schritt{border-top:1px solid var(--linie)}
.schritt:active{background:var(--flaeche2)}
.schritt .haken{width:26px;height:26px;border-radius:99px;flex:none;margin-top:1px;
                box-shadow:inset 0 0 0 2px var(--linie);display:grid;place-items:center;
                font-size:15px;color:transparent}
.schritt.fertig .haken{background:var(--marke);box-shadow:none;color:#fff}
@media (prefers-color-scheme:dark){ .schritt.fertig .haken{color:#0b1405} }
:root[data-thema="dunkel"] .schritt.fertig .haken{color:#0b1405}
.schritt .tx{flex:1;min-width:0}
.schritt h5{font-size:15px;font-weight:600;letter-spacing:-.2px}
.schritt.fertig h5{color:var(--schrift2);text-decoration:line-through;
                   text-decoration-color:var(--linie)}
.schritt .sub{font-size:12.5px;color:var(--schrift2);margin-top:1px}
.wartemarke{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;
            background:var(--st-wartet-bg);color:var(--st-wartet);margin-left:6px;vertical-align:1px}

/* ---------- Anmeldung ----------
   Grosse Kacheln statt Namensliste, PIN-Pad mit fetten Tasten. Beides
   muss mit Handschuhen und einer Hand bedienbar sein. */
.anmeldung{max-width:460px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top)) 16px 40px}
.marke4u{display:flex;justify-content:center;margin:14px 0 24px}
.marke4u img{height:38px;width:auto}
.anmeldung h2{font-size:23px;font-weight:730;letter-spacing:-.6px;text-align:center;
              margin-bottom:16px}

.leutegitter{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.leutegitter button{background:var(--flaeche);border-radius:15px;padding:16px 12px;
                    display:flex;flex-direction:column;align-items:center;gap:9px;
                    box-shadow:var(--schatten)}
.leutegitter button:active{transform:scale(.97)}
.leutegitter .avatar{width:54px;height:54px;font-size:19px}
.leutegitter .nm{font-size:14.5px;font-weight:640;letter-spacing:-.25px;text-align:center;
                 line-height:1.25}
.leutegitter .rl{font-size:11px;color:var(--schrift2);font-weight:600}

.pinkopf{display:flex;flex-direction:column;align-items:center;gap:8px;margin:10px 0 20px}
.pinkopf h2{margin:0}
.pinkopf p{font-size:14px;color:var(--schrift2)}
.avatar.gross{width:66px;height:66px;font-size:23px}

.pinpunkte{display:flex;justify-content:center;gap:16px;margin-bottom:10px}
.pinpunkte i{width:15px;height:15px;border-radius:99px;background:var(--flaeche2);
             box-shadow:inset 0 0 0 1.5px var(--linie);transition:background .12s}
.pinpunkte i.voll{background:var(--marke);box-shadow:none}
.pinfehler{min-height:22px;text-align:center;font-size:14px;color:var(--st-nein);
           font-weight:600;margin-bottom:6px}

.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:300px;margin:0 auto}
.pinpad button{height:68px;border-radius:18px;background:var(--flaeche);font-size:27px;
               font-weight:600;letter-spacing:-.5px;box-shadow:var(--schatten)}
.pinpad button:active{background:var(--marke);color:#fff;transform:scale(.96)}
.pinpad button.leise{background:none;box-shadow:none;font-size:22px;color:var(--schrift2)}
.pinpad button.leise:active{background:none;color:var(--marke);transform:none}

/* ---------- Fotos ---------- */
.fotogitter{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px}
.fotogitter figure{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;
                   background:var(--flaeche2)}
.fotogitter img{width:100%;height:100%;object-fit:cover;display:block}
.fotogitter .weg{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:99px;
                 background:rgba(0,0,0,.62);color:#fff;font-size:16px;line-height:26px;
                 text-align:center;padding:0}
.fotogitter figcaption{position:absolute;left:0;right:0;bottom:0;padding:3px 6px;
                       background:linear-gradient(transparent,rgba(0,0,0,.6));
                       color:#fff;font-size:10px;font-weight:600}
.fotoladen{padding:10px 14px 0;font-size:13.5px;color:var(--schrift2)}

/* ---------- Material ---------- */
.matzeile{display:flex;align-items:center;gap:11px;padding:10px 13px}
.matzeile+.matzeile{border-top:1px solid var(--linie)}
.matzeile .tx{flex:1;min-width:0}
.matzeile h4{font-size:15px;font-weight:620;letter-spacing:-.25px}
.matzeile .sub{font-size:12.5px;color:var(--schrift2);margin-top:1px}
.matzeile .weg{font-size:20px;color:var(--schrift2);padding:0 4px;line-height:1}
.lagermarke{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:99px;
            background:var(--st-fertig-bg);color:var(--st-fertig);margin-left:6px;vertical-align:1px}
.freimarke{background:var(--flaeche2);color:var(--schrift2)}

.treffer{margin:0 14px;background:var(--flaeche);border-radius:13px;overflow:hidden;
         box-shadow:var(--schatten)}
.treffer button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 13px}
.treffer button+button{border-top:1px solid var(--linie)}
.treffer button:active{background:var(--flaeche2)}
.treffer .tx{flex:1;min-width:0}
.treffer h4{font-size:14.5px;font-weight:620;letter-spacing:-.25px}
.treffer .sub{font-size:12px;color:var(--schrift2);
              font-family:ui-monospace,Consolas,monospace;margin-top:1px}
.bestand{font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;flex:none;
         background:var(--st-fertig-bg);color:var(--st-fertig)}
.bestand.knapp{background:var(--st-arbeit-bg);color:var(--st-arbeit)}
.bestand.leer{background:var(--st-nein-bg);color:var(--st-nein)}
.suchhinweis{padding:14px 20px;color:var(--schrift2);font-size:13.5px;text-align:center}

/* Anrufen / Navigation — sollen sofort als antippbar erkennbar sein */
.tuwas{display:flex;align-items:center;gap:12px;padding:13px 13px;text-decoration:none;
       color:var(--schrift)}
.tuwas+.tuwas{border-top:1px solid var(--linie)}
.tuwas:active{background:var(--flaeche2)}
.tuwas .ic{font-size:20px;line-height:1;flex:none}
.tuwas .tx{flex:1;min-width:0}
.tuwas b{display:block;font-size:16px;font-weight:640;letter-spacing:-.25px;color:var(--marke)}
.tuwas .tx span{display:block;font-size:13px;color:var(--schrift2);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tuwas .pf{color:var(--linie);font-size:18px;font-weight:600;flex:none}

.aktionen{padding:16px 14px 8px;display:flex;flex-direction:column;gap:9px}
.knopf{display:block;width:100%;padding:15px;text-align:center;font-size:16px;font-weight:670;
       border-radius:13px;background:var(--flaeche);color:var(--marke);box-shadow:var(--schatten)}
.knopf.haupt{background:var(--marke);color:#fff}
@media (prefers-color-scheme:dark){ .knopf.haupt{color:#0b1405} }
.knopf.lila{color:#8944d4}
.knopf:active{transform:scale(.985)}
.zweier{display:flex;gap:9px}
.zweier .knopf{flex:1}

/* ---------- Chat-Verlauf ----------
   Im Chat ist die Reiterleiste ausgeblendet. Ohne diese zwei Regeln bliebe
   unten ihr Platzhalter stehen und der Seitenhintergrund schiene als dunkler
   Balken durch. */
html.imChat{height:100%;overflow:hidden;overscroll-behavior:none}
body.imChat{position:fixed;inset:0;width:100%;height:100%;padding-top:0;padding-bottom:0;overflow:hidden}
/* Feste Bildschirmhöhe: Kopf oben bleibt stehen, NUR der Verlauf scrollt —
   und zwar nur senkrecht. Die eigene Notch-Absicherung sorgt dafür, dass der
   "‹ Chat"-Zurück-Knopf immer UNTER dem Status-Balken sitzt und erreichbar ist. */
/* Chat-Fläche liegt FIX über dem ganzen Schirm und wird per JS an die sichtbare
   Höhe (visualViewport) gekoppelt: kommt die Tastatur, schrumpft der Container auf
   den sichtbaren Bereich, und die Eingabeleiste (normales Flex-Kind unten) sitzt
   automatisch über der Tastatur — ohne Verschiebe-Tricks. Ohne JS bleibt 100dvh als
   Fallback (Eingabe unten, ganz normal). */
#s-verlauf.an{position:fixed;left:0;right:0;top:0;bottom:0;height:auto;height:100dvh;
              min-height:0;animation:none;
              display:flex;flex-direction:column;overflow:hidden;
              padding-top:env(safe-area-inset-top);padding-bottom:0;
              transform-origin:top left;z-index:30;background:var(--grund);box-sizing:border-box}
/* Die allgemeine .schirm-Mindesthöhe 100dvh darf die von visualViewport gesetzte
   Höhe nicht überstimmen. Die translateY-Einblendung würde auch den festen Chat
   samt Eingabeleiste kurz nach unten verschieben und einen Streifen freilegen. */
/* Der Container rechnet die Notch schon ab — der "‹ Chat"-Knopf darf sie NICHT
   nochmal draufrechnen, sonst wird der Kopf-Balken doppelt so dick (Chris' Wort). */
#s-verlauf .zurueck{padding-top:6px}
.chat-toolbar{flex:none}
/* #s-verlauf reserviert die Safe Area bereits selbst. Die allgemeine Stitch-
   Toolbar darf sie im Chat nicht ein zweites Mal einrechnen, sonst verliert der
   Nachrichtenbereich auf iPhones oben und unten Platz. */
#s-verlauf .chat-toolbar{height:56px;min-height:56px;padding:0 12px}
.chat-identitaet{min-width:0;display:flex;align-items:center;justify-content:center;gap:8px}
.chat-identitaet strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                        text-align:left;font-size:17px;line-height:22px}
.chat-mini-logo{width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:50%;
                background:#fff;color:#0a0a0a;border:1px solid var(--linie);font-size:16px;font-weight:800}
.chat-mini-logo img{width:24px;height:24px;object-fit:contain}
.verlauf{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
         padding:12px 10px;display:flex;flex-direction:column;gap:6px;
         overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
         background:#ece5dd;
         background-image:radial-gradient(circle at 12px 12px,rgba(0,0,0,.028) 1.7px,transparent 1.8px);
         background-size:26px 26px}
@media (prefers-color-scheme:dark){
  .verlauf{background:#0b1410;
    background-image:radial-gradient(circle at 12px 12px,rgba(255,255,255,.03) 1.7px,transparent 1.8px)}
}
.tagtrenner{align-self:center;background:rgba(255,255,255,.85);color:#5b6166;font-size:11px;
            font-weight:600;padding:4px 12px;border-radius:99px;margin:4px 0}
@media (prefers-color-scheme:dark){ .tagtrenner{background:rgba(255,255,255,.12);color:#c9cdd0} }
.blase{max-width:82%;padding:6px 10px 5px;border-radius:10px;font-size:14.5px;line-height:1.36;
       box-shadow:0 1px 1px rgba(0,0,0,.09);color:#000;
       overflow-wrap:anywhere;word-break:break-word}
.blase.sie{align-self:flex-start;background:#fff;border-top-left-radius:3px}
.blase.ich{align-self:flex-end;background:#dcf7c8;border-top-right-radius:3px}
.chat-nachricht{display:flex;align-items:flex-end;gap:8px;width:100%}
.chat-nachricht.ich{justify-content:flex-end}
.chat-nachricht.sie{justify-content:flex-start}
.chat-absender{width:24px;height:24px;display:grid;place-items:center;flex:none;border-radius:50%;
               color:#fff;font-size:10px;font-weight:750}
.chat-nachricht .blase{align-self:auto}
@media (prefers-color-scheme:dark){
  .blase.sie{background:#232d28;color:#e9ece8}
  .blase.ich{background:#1e4b2c;color:#e9ece8}
}
.blase .von{font-size:12px;font-weight:700;margin-bottom:1px}
.blase .uhr{font-size:10.5px;color:#8a8a8e;float:right;margin:6px 0 -2px 8px}
.chat-haken{display:inline-block;margin-left:4px;font-size:11px;font-weight:800;letter-spacing:-2px}
.chat-haken.zugestellt{color:#0a84ff}
.chat-haken.gelesen{color:#34c759}
.chat-haken.wartet{color:#8a8a8e;letter-spacing:0}
.chat-transfer{display:block;clear:both;margin-top:7px;font-size:11px;font-weight:650;line-height:1.25}
.chat-transfer.wartet{color:#6b7280}
.chat-transfer.pausiert,.chat-transfer.wiederholung{color:#9a6b00}
.chat-transfer.gestoppt{color:#b91c1c}
.chat-transfer.unklar{color:inherit;font-size:12px;font-weight:400;opacity:.8}
.chat-retry{display:block;margin-top:7px;padding:7px 11px;border:1px solid currentColor;
            border-radius:9px;background:transparent;color:#b91c1c;font-size:12px;font-weight:750}
.chat-retry:disabled{opacity:.55}
.blase .zitat{border-left:3px solid var(--marke);background:rgba(0,0,0,.05);border-radius:5px;
              padding:4px 7px;margin-bottom:4px;font-size:12.5px}
.blase .zitat b{display:block;color:var(--marke);font-size:11.5px}
.blase .zitat span{color:#6b7075}
@media (prefers-color-scheme:dark){ .blase .zitat{background:rgba(255,255,255,.07)} .blase .zitat span{color:#a8b0b4} }
.blase .sprache{display:flex;align-items:center;gap:9px;min-width:170px}
.blase .sprache .wellen{flex:1;height:18px;display:flex;align-items:center;gap:2px}
.blase .sprache .wellen i{flex:1;background:#a9b3a0;border-radius:99px;display:block}

/* Eingabeleiste: normales Flex-Kind am unteren Rand des Chat-Containers (NICHT mehr
   fixed). Da der Container an die sichtbare Höhe gekoppelt ist, sitzt sie immer über
   der Tastatur. Der Safe-Area-Abstand gehört ins Padding, sonst schwarzer Streifen. */
.schreiben{flex:none;display:flex;align-items:center;gap:9px;
           padding:8px 10px calc(8px + env(safe-area-inset-bottom));
           background:var(--balken);border-top:1px solid var(--balken-linie);
           position:relative;z-index:2}
body.tastaturOffen .schreiben{padding-bottom:8px}
/* Sicherheitsnetz nur AUSSERHALB des Chats — im Chat deckt die Eingabeleiste den
   unteren Rand schon ab, der fixe Streifen würde dort nur als Balken durchscheinen. */
body::after{content:'';position:fixed;left:0;right:0;bottom:0;z-index:19;
            height:env(safe-area-inset-bottom);background:var(--balken);pointer-events:none}
body.imChat::after{display:none}
.schreiben input{flex:1 1 auto;min-width:0;background:var(--flaeche);border:1px solid var(--linie);
                 border-radius:99px;padding:10px 15px;font-size:16px;color:var(--schrift);outline:none}
.schreiben input:focus{border-color:var(--marke)}
.schreiben .senden{width:40px;height:40px;border-radius:99px;background:var(--marke);color:#fff;
                   display:grid;place-items:center;font-size:17px;flex:none}
@media (prefers-color-scheme:dark){ .schreiben .senden{color:#0b1405} }

/* ---------- Neue Nachricht: schwebender Knopf + Personen-Auswahl ---------- */
.fab{position:fixed;right:18px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:22;
     width:52px;height:52px;border-radius:50%;background:var(--marke);color:#fff;
     font-size:22px;line-height:1;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.fab:active{transform:scale(.94)}
.pickzeile{display:flex;align-items:center;gap:12px;padding:11px 13px;width:100%;text-align:left;background:none}
.pickzeile+.pickzeile{border-top:1px solid var(--linie)}
.pickzeile.gewaehlt{background:var(--flaeche2)}
.pickzeile .avatar{width:36px;height:36px;border-radius:50%;color:#fff;display:grid;place-items:center;
                   font-size:13px;font-weight:700;flex:none}
.pickzeile .pn{flex:1;min-width:0;font-size:15px;font-weight:600;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pickzeile .phaken{color:var(--marke);font-size:18px;font-weight:700;flex:none}

/* ---------- Zusatzzeiten (Warte-/Zusatz-/Verzögerungsarbeiten) ---------- */
.zusatzsumme{margin:0 14px 8px;font-size:12.5px;font-weight:600;color:var(--schrift2)}
.zusatzkarte{margin:0 14px 9px;padding:11px 12px;background:var(--flaeche);border-radius:13px;
             border-left:4px solid var(--st-wartet);box-shadow:var(--schatten)}
.zusatzarten{display:flex;gap:7px;margin-bottom:9px}
.zusatzarten .zusatzart{flex:1;padding:8px 4px;border:1px solid var(--linie);border-radius:9px;
                        background:var(--flaeche2);color:var(--schrift);font-size:12.5px;font-weight:600}
.zusatzarten .zusatzart.aktiv{border-color:var(--marke);background:var(--marke);color:#fff}
@media (prefers-color-scheme:dark){ .zusatzarten .zusatzart.aktiv{color:#0b1405} }
.zusatzzeile{display:flex;align-items:center;gap:8px}
.zusatzzeile .zusatzdauer{flex:0 0 96px}
.zusatzzeile .zusatzgrund{flex:1;min-width:0}
.zusatzweg{flex:none;width:32px;height:32px;border-radius:99px;background:var(--flaeche2);
           color:var(--schrift2);font-size:13px;line-height:1}

/* Hinweis im Plan-Fenster, wenn ein Datumsbereich (mehrere Tage) gewählt ist */
.ganztaghinweis{margin:0 14px 10px;font-size:12.5px;color:var(--schrift2)}

/* ---------- Aufträge-Kartei (Admin: nach Kunde, mit Suche) ---------- */
.suchzeile{padding:10px 14px 4px}
.suchfeld{width:100%;padding:11px 14px;border:1px solid var(--linie);border-radius:12px;
          background:var(--flaeche);color:var(--schrift);font-size:16px;outline:none}
.suchfeld:focus{border-color:var(--marke)}
.titel-zahl{font-size:12px;font-weight:700;color:var(--schrift2)}
.kundenauftrag{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px}
.kundenauftrag .ka-text{flex:1;min-width:0}
.kundenauftrag .ka-text b{display:block;font-size:14.5px;font-weight:650}
.kundenauftrag .ka-text span{display:block;font-size:12.5px;color:var(--schrift2);
                             white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kartei-zurueck{display:block;padding:10px 14px 2px;font-size:15px;font-weight:600;text-align:left;background:none}

/* Neuer-Auftrag: Art-Chips + gewählte Filiale hervorheben */
.natypen{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 8px}
.natypen button{flex:1 1 40%;padding:9px 4px;border:1px solid var(--linie);border-radius:9px;
                background:var(--flaeche2);color:var(--schrift);font-size:13px;font-weight:600}
.natypen button.aktiv{border-color:var(--marke);background:var(--marke);color:#fff}
@media (prefers-color-scheme:dark){ .natypen button.aktiv{color:#0b1405} }
#na-filialen .kundenauftrag.aktiv{background:var(--flaeche2);border-radius:10px}
.ausklapp{display:block;width:calc(100% - 28px);margin:14px 14px 6px;padding:11px;text-align:center;
          background:var(--flaeche2);border-radius:12px;color:var(--schrift2);font-size:13.5px;font-weight:600}

/* ============================================================
   Precision Field System · Stitch-Übernahme 2026-08-28
   Rein visuell: Die bestehende DOM-Struktur, IDs, Ereignisse und
   Funktionswege bleiben die alleinige Quelle der Wahrheit.
   ============================================================ */
:root{
  --grund:#f4f3f8;
  --flaeche:#ffffff;
  --flaeche2:#eeedf3;
  --schrift:#1a1b1f;
  --schrift2:#555c6b;
  --linie:#dfe2ea;
  --marke:#0058bc;
  --marke-hell:#0070eb;
  --balken:rgba(255,255,255,.92);
  --balken-linie:rgba(113,119,134,.26);
  --schatten:0 1px 2px rgba(20,25,35,.05),0 6px 18px rgba(20,25,35,.045);
  --schatten-oben:0 -1px 0 rgba(113,119,134,.18),0 -8px 24px rgba(20,25,35,.04);
}
@media (prefers-color-scheme:dark){
  :root{
    --grund:#1a1b1f;--flaeche:#2f3034;--flaeche2:#25262a;
    --schrift:#f1f0f5;--schrift2:#c1c6d7;--linie:#464951;
    --marke:#0a84ff;--marke-hell:#409cff;
    --balken:rgba(47,48,52,.94);--balken-linie:rgba(193,198,215,.18);
    --schatten:0 1px 0 rgba(255,255,255,.035);
  }
}
:root[data-thema="hell"]{
  --grund:#f4f3f8;--flaeche:#fff;--flaeche2:#eeedf3;
  --schrift:#1a1b1f;--schrift2:#555c6b;--linie:#dfe2ea;
  --marke:#0058bc;--marke-hell:#0070eb;
  --balken:rgba(255,255,255,.92);--balken-linie:rgba(113,119,134,.26);
  --schatten:0 1px 2px rgba(20,25,35,.05),0 6px 18px rgba(20,25,35,.045)
}
:root[data-thema="dunkel"]{
  --grund:#1a1b1f;--flaeche:#2f3034;--flaeche2:#25262a;
  --schrift:#f1f0f5;--schrift2:#c1c6d7;--linie:#464951;
  --marke:#0a84ff;--marke-hell:#409cff;
  --balken:rgba(47,48,52,.94);--balken-linie:rgba(193,198,215,.18);
  --schatten:0 1px 0 rgba(255,255,255,.035)
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  font-size:16px;line-height:1.42;letter-spacing:-.12px;
  background:var(--grund);
}

/* iPhone-Breite, ausschließlich vertikales Scrollen und sichere Ränder. */
.schirm{min-height:100vh;min-height:100dvh;overflow-x:clip;
        padding-bottom:calc(96px + env(safe-area-inset-bottom))}
#s-login,#s-verlauf{padding-bottom:0}
.kopf{padding:calc(15px + env(safe-area-inset-top)) 16px 12px;
      background:color-mix(in srgb,var(--grund) 90%,transparent);
      border-bottom-color:color-mix(in srgb,var(--linie) 65%,transparent)}
.kopf h1{font-size:32px;font-weight:760;line-height:1.08;letter-spacing:-1.15px}
.kopf .unter{font-size:14px;color:var(--schrift2)}
.titel{padding:24px 16px 8px;font-size:12px;letter-spacing:.35px;color:var(--schrift2)}

/* Die Stitch-Kartenform auf alle vorhandenen Funktionsgruppen anwenden. */
.gruppe,.kachel,.todo,.bereich,.treffer,.markenkachel,.zusatzkarte,
.entwurf,.planwahl,.unterschriftsfeld,.notizfeld{
  border:1px solid var(--linie);
  border-radius:20px;
  box-shadow:var(--schatten);
}
.gruppe,.treffer{width:calc(100% - 32px);margin-left:16px;margin-right:16px}
.kacheln,.aktionen{padding-left:16px;padding-right:16px}
.gruppe{overflow:hidden}
.zeile{min-height:56px;padding:14px 16px}
.zeile+.zeile,.auftrag+.auftrag,.chatzeile+.chatzeile,.matzeile+.matzeile,
.schritt+.schritt,.pickzeile+.pickzeile{border-top-color:var(--linie)}

/* Auftrags- und Chatlisten bleiben dynamisch, bekommen aber die neue Dichte. */
.auftrag{min-height:76px;padding:14px 16px 14px 0;border-left-width:4px!important;
         border-left-style:solid;gap:14px}
.auftrag .logo{width:48px;height:48px;margin-left:16px;padding:5px;border-radius:12px;
               background:#fff;border:1px solid rgba(113,119,134,.22)}
.auftrag .logo img{max-width:38px;max-height:38px}
.auftrag h3{font-size:17px;font-weight:690;letter-spacing:-.35px}
.auftrag .meta{font-size:13px;color:var(--schrift2)}
.chatzeile{min-height:72px;padding:12px 16px;gap:13px}
.avatar{width:48px;height:48px}
.avatar.marke{padding:5px;border-radius:12px;background:#fff!important;
              border:1px solid rgba(113,119,134,.22)}
.avatar.marke img{object-fit:contain}
.chatzeile h3{font-size:16px;font-weight:680}
.chatzeile p{font-size:13px}

/* Kompakte iOS-Aktionen, ohne Button- oder Ereignisänderungen. */
.knopf{min-height:54px;padding:15px 17px;border-radius:16px;border:1px solid var(--marke);
       background:var(--flaeche);color:var(--marke);box-shadow:none}
.knopf.haupt{background:var(--marke);color:#fff;border-color:var(--marke);
             box-shadow:0 6px 16px color-mix(in srgb,var(--marke) 22%,transparent)}
.knopf.lila{color:#7d45b6;border-color:#7d45b6}
.aktionen{gap:12px;padding-top:24px}
.tuwas{min-height:64px;padding:14px 16px}
.tuwas b{color:var(--marke);font-weight:680}
.tuwas .pf{color:var(--schrift2)}

.stitch-toolbar{position:sticky;top:0;z-index:24;height:calc(56px + env(safe-area-inset-top));
                padding:env(safe-area-inset-top) 12px 0;display:grid;grid-template-columns:44px 1fr 44px;
                align-items:center;background:color-mix(in srgb,var(--flaeche) 92%,transparent);
                border-bottom:1px solid var(--linie);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.stitch-toolbar .zurueck{min-height:44px;padding:0;font-size:34px;line-height:1;text-align:left}
.stitch-toolbar strong{text-align:center;font-size:17px;line-height:22px;font-weight:700}
.toolbar-status,.appbar-sync,.verbindungsstatus{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  color:var(--schrift2);
  font-size:12px;
}
.toolbar-status,.appbar-sync{color:var(--schrift2)}
.verbindungsstatus.online{color:#0a8754}
.verbindungsstatus.offline{color:#d32d2f}
.verbindungsstatus{line-height:1}
.stitch-appbar{position:sticky;top:0;z-index:25;height:calc(56px + env(safe-area-inset-top));
               padding:env(safe-area-inset-top) 16px 0;display:flex;align-items:center;justify-content:space-between;
               background:color-mix(in srgb,var(--flaeche) 92%,transparent);border-bottom:1px solid var(--linie);
               -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.appbar-marke{display:flex;align-items:center;gap:10px;font-size:17px;line-height:22px}
.appbar-marke img{width:32px;height:32px;border-radius:50%;object-fit:cover}
#s-admin>.kopf,#s-kalender>.kopf{top:calc(56px + env(safe-area-inset-top));padding-top:20px}
#s-prozeduren>.kopf{top:calc(56px + env(safe-area-inset-top));padding-top:12px}
.schirm>.stitch-appbar+.kopf{top:calc(56px + env(safe-area-inset-top));padding-top:20px}

/* Alle zusätzlichen Funktionsansichten verwenden dieselben Stitch-Komponenten. */
#s-start .kopf h1,#s-auftraege .kopf h1,#s-planung .kopf h1,#s-chat .kopf h1,
#s-abschluss .kopf h1,#s-prozedur-marke .kopf h1{font-size:34px;line-height:41px;letter-spacing:-.4px}
#s-abschluss .gruppe,#s-planung .gruppe,#s-chat .gruppe,#s-prozedur-marke .gruppe{
  border:1px solid var(--linie);border-radius:20px;box-shadow:var(--schatten)
}
.abdunkeln .blatt{border-radius:24px 24px 0 0;background:var(--grund);
                   box-shadow:0 -10px 30px rgba(0,0,0,.14)}
.blatt .griff{width:36px;height:5px;border-radius:999px;background:var(--linie)}
.blattkopf{padding:8px 20px 16px}.blattkopf h2{font-size:22px;line-height:28px;letter-spacing:-.3px}
.blatt .aktionen{padding-left:16px;padding-right:16px}
.detail-hero{padding:32px 20px 18px}
.detail-status{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--schrift2);font-size:14px}
.detail-hero h1{font-size:34px;line-height:41px;letter-spacing:-.4px;font-weight:700}
.detail-hero p{margin-top:8px;color:var(--schrift2);font-size:17px;line-height:22px}

/* Standort-Aktionen im Detail entsprechen den zwei grossen Stitch-Kacheln. */
#s-detail .gruppe:has(> .tuwas + .tuwas){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                                        gap:12px;background:transparent;border:0;box-shadow:none;
                                        overflow:visible}
#s-detail .gruppe:has(> .tuwas + .tuwas) .tuwas{min-width:0;min-height:112px;padding:12px;
                                               flex-direction:column;justify-content:center;text-align:center;
                                               background:var(--flaeche);border:1px solid var(--linie);
                                               border-radius:18px;box-shadow:var(--schatten)}
#s-detail .gruppe:has(> .tuwas + .tuwas) .tuwas+.tuwas{border-top:1px solid var(--linie)}
#s-detail .gruppe:has(> .tuwas + .tuwas) .tuwas .tx span{max-width:100%;white-space:normal;
                                                        overflow:visible;text-overflow:clip;
                                                        overflow-wrap:anywhere;line-height:1.3;margin-top:3px}
#s-detail .gruppe:has(> .tuwas + .tuwas) .tuwas .pf{display:none}

/* Stitch-Anmeldung mit dem vorhandenen schwarzen 4unet-App-Logo. */
#s-login{background:var(--grund)}
.login-systemleiste{min-height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0;
                     display:flex;align-items:center;justify-content:space-between;background:var(--flaeche);
                     border-bottom:1px solid var(--linie);color:var(--schrift2);font-size:12px;font-weight:650}
.login-systemzustand{display:flex;align-items:center;gap:8px}
.login-systemzustand i{display:block;width:9px;height:9px;border-radius:50%;background:var(--schrift2)}
.login-systemzustand i.online{background:#34c759;box-shadow:0 0 0 4px rgba(52,199,89,.12)}
.login-systemzustand i.offline{background:#ff3b30;box-shadow:0 0 0 4px rgba(255,59,48,.12)}
.login-version{font-variant-numeric:tabular-nums}
.anmeldung{max-width:460px;padding:24px 16px 44px}
.marke4u{margin:48px 0 40px;flex-direction:column;align-items:center;gap:24px}
.marke4u img{width:64px;height:64px;border-radius:16px;object-fit:cover;
             box-shadow:0 8px 24px rgba(0,0,0,.18)}
.marke4u strong{font-size:34px;font-weight:700;line-height:41px;letter-spacing:-.4px}
.anmeldung h2{font-size:17px;font-weight:400;line-height:22px;color:var(--schrift2);margin-bottom:40px}
.leutegitter{grid-template-columns:1fr;gap:12px}
.leutegitter button{min-height:72px;padding:12px 16px;flex-direction:row;text-align:left;
                    border:1px solid var(--linie);border-radius:20px;box-shadow:var(--schatten)}
.leutegitter .avatar{width:48px;height:48px;font-size:17px}
.login-person{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.leutegitter .nm{font-size:18px;text-align:left;line-height:1.2}
.leutegitter .rl{font-size:13px;color:var(--schrift2);text-transform:none;letter-spacing:0}
.login-pfeil{font-size:31px;line-height:1;color:var(--schrift2);font-weight:300;padding-left:8px}
.pinpad button{width:72px;height:72px;justify-self:center;border-radius:50%;
               background:var(--flaeche2);box-shadow:none}
.pinpunkte i{width:16px;height:16px;border-color:var(--marke)}

/* PIN ist eine vollständige Handyansicht. Die Namensliste darf weiter scrollen;
   hier stehen Logo und Person kompakt, mit weiterhin mindestens 48px-Tasten. */
#s-login.pin-aktiv.an{display:flex;flex-direction:column;min-height:100svh}
#s-login.pin-aktiv .login-systemleiste{min-height:calc(46px + env(safe-area-inset-top));flex:none}
#s-login.pin-aktiv .anmeldung{width:100%;flex:1;padding:12px 16px max(12px,env(safe-area-inset-bottom));
                            display:flex;flex-direction:column;justify-content:center}
#s-login.pin-aktiv .marke4u{flex-direction:row;gap:10px;margin:0 0 8px}
#s-login.pin-aktiv .marke4u img{width:36px;height:36px;border-radius:9px}
#s-login.pin-aktiv .marke4u strong{font-size:22px;line-height:28px}
#s-login.pin-aktiv .zurueck{min-height:44px;padding:6px 0}
#s-login.pin-aktiv .pinkopf{display:grid;grid-template-columns:44px auto;gap:2px 10px;
                          justify-content:center;align-items:center;margin:8px 0}
#s-login.pin-aktiv .pinkopf .avatar{grid-row:1 / 3;width:44px;height:44px;font-size:17px}
#s-login.pin-aktiv .pinkopf h2{font-size:18px;line-height:22px;margin:0;text-align:left;
                             color:var(--schrift);font-weight:650;overflow-wrap:anywhere}
#s-login.pin-aktiv .pinkopf p{line-height:20px}
#s-login.pin-aktiv .pinpunkte{margin-bottom:8px}
#s-login.pin-aktiv .pinpad{gap:8px;max-width:280px;width:100%}
#s-login.pin-aktiv .pinpad button{width:clamp(48px,calc((100svh - 360px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/4),68px);
                                height:clamp(48px,calc((100svh - 360px - env(safe-area-inset-top) - env(safe-area-inset-bottom))/4),68px)}

/* Vorhandenen Tagesbericht im Auftrag nachvollziehbar ergänzen. */
.tag-bericht{white-space:pre-wrap;padding:12px 14px;overflow-wrap:anywhere}
.tag-grund-label{display:block;padding:12px 14px 0}
.tag-bearbeiten-link{margin-top:8px;padding:8px 12px;font-size:14px}
.tag-extra{margin-bottom:12px}
.einsatztag{width:100%;text-align:left;color:var(--schrift);background:var(--flaeche);cursor:pointer}
.einsatztag .tag-bearbeiten-link{display:block;color:var(--marke);padding:8px 0 0}

/* Eingaben und Berichtsbereiche aus dem Stitch-Tagesbericht. */
.zeitwahl{min-height:44px;background:var(--flaeche2);border:1px solid var(--linie);border-radius:12px}
.zeitfeld,.textfeld{min-height:44px}
.notizfeld{width:calc(100% - 32px);margin-left:16px;margin-right:16px;padding:15px 16px;
           background:var(--flaeche)}
.fotogitter{gap:10px;padding-left:16px;padding-right:16px}
.fotogitter figure{border-radius:14px;border:1px solid var(--linie)}
.unterschriftsfeld{margin-left:16px;margin-right:16px;height:210px}
.report-kopf{position:relative;padding:24px 20px 18px}
.report-kopf .unter{order:-1;margin-bottom:8px;font-size:15px}
.report-kopf h1{font-size:34px;line-height:41px;letter-spacing:-.4px}
.report-card{margin:0 16px 24px;padding:4px 0 16px;background:var(--flaeche);
             border:1px solid var(--linie);border-radius:20px;box-shadow:var(--schatten);overflow:hidden}
.report-card>.titel{padding:16px 20px 10px;font-size:17px;line-height:22px;font-weight:700;
                    letter-spacing:0;text-transform:none}
.report-card>.titel a{font-size:15px}
.report-card>.gruppe,.report-card .gruppe{width:auto;margin:0 20px;border:0;border-radius:12px;
                                          background:var(--flaeche2);box-shadow:none}
.report-card .report-gruppe{margin:0 20px}
.report-card .zeile{padding-left:16px;padding-right:16px}
.report-card .notizfeld{width:calc(100% - 40px);margin:0 20px;background:var(--flaeche2)}
.report-card .fotogitter{padding-left:20px;padding-right:20px}
.report-aktion{padding:8px 20px 0}
.report-aktion .knopf{width:100%}
.uhr-meldung{margin:0 16px 18px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.uhr-meldung:empty{display:none}
.uhr-zustand{padding:4px 20px 12px;font-size:20px;font-weight:700}
.uhr-text{display:block;padding:8px 20px;line-height:1.5;overflow-wrap:anywhere}
.uhr-aktionen{display:flex;flex-direction:column;gap:10px}
.uhr-ausstehend,.uhr-ereignis{padding:12px 20px;border-top:1px solid var(--linie);overflow-wrap:anywhere}
.uhr-ausstehend p,.uhr-ereignis p{margin-top:5px;font-size:14px;line-height:1.5;white-space:pre-wrap}
.uhr-ereignis .knopf{margin-top:10px}
.uhr-dialog[hidden],.uhr-dialog [hidden]{display:none!important}
.uhr-dialog.an{z-index:90;padding-top:env(safe-area-inset-top)}
.uhr-dialog .blatt{max-height:calc(100dvh - env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.uhr-dialog .zeitfeld{max-width:65%}
.uhr-form-fehler{padding:0 20px;color:var(--rot,#b42318);line-height:1.5}
.uhr-gefahr{color:var(--rot,#b42318)}
.sp-text,.sp-formfeld{padding:10px 20px;line-height:1.5;overflow-wrap:anywhere}
.sp-text p{margin:6px 0 12px}
.sp-text h3,.sp-zwischen{font-size:17px;line-height:1.4;margin:14px 0 8px}
.sp-zwischen{padding:0 20px}
.sp-text select,.sp-formfeld select,.sp-formfeld textarea{display:block;width:100%;padding:10px 12px;border:1px solid var(--linie);border-radius:10px;color:var(--schrift);background:var(--flaeche2);font:inherit;box-sizing:border-box}
.sp-formfeld label{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.sp-schalter{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-schalter input{width:24px;height:24px;flex:none}
.sp-notizen,.sp-meldung{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5}
.sp-meldung{margin:16px}
.sp-signatur-gesperrt .unterschriftsfeld{pointer-events:none;opacity:.55}
#s-abschluss [hidden]{display:none!important}

/* Kalender, Prozeduren und Admin-Karten teilen dieselbe Designsprache. */
.kalgitter{width:calc(100% - 32px);gap:7px;margin-left:16px;margin-right:16px}
.kalzelle{min-height:46px;border:1px solid var(--linie);border-radius:12px;box-shadow:none}
.kalzelle.heute{background:var(--marke);outline:0}
.kalzelle.heute .kalnr{color:#fff}
.planwahl{width:calc(100% - 32px);min-height:58px;margin-left:16px;margin-right:16px;padding:7px 10px}
.markenraster{gap:12px;padding:4px 16px 24px}
.markenkachel{min-height:132px;padding:18px 12px;border-width:1px!important}
.markenkachel .mk-logo{height:52px}
.markenkachel .mk-logo img{max-height:48px;max-width:92px}
.bereich{margin:14px 16px;border-width:1px!important}
.todo{margin-left:16px;margin-right:16px;width:calc(100% - 32px);border-left-width:4px}

/* Prozeduren: PDF-Zeilen als eigenständige Stitch-Dokumentkarten; echte Markenwahl bleibt davor. */
#s-prozedur-marke .bereich{background:transparent;border:0!important;box-shadow:none;overflow:visible}
#s-prozedur-marke .bereichkopf{padding:10px 2px 8px}
#s-prozedur-marke .prozzeile{margin-bottom:12px;background:var(--flaeche);border:1px solid var(--linie);
                            border-radius:16px;box-shadow:var(--schatten);overflow:hidden}
#s-prozedur-marke .prozzeile+.prozzeile{border-top:1px solid var(--linie)}
#s-prozedur-marke .prozoeffnen{min-height:84px;padding:14px 16px;gap:14px}
#s-prozedur-marke .prozoeffnen .pz-ic{display:grid;place-items:center;width:44px;height:44px;
                                     border-radius:12px;background:rgba(255,59,48,.14);color:#c1121f!important}
#s-prozedur-marke .prozoeffnen .pz-tx b{font-size:17px;line-height:22px}
#s-prozedur-marke .prozoeffnen .pz-tx em{font-size:13px;line-height:18px}
#s-prozedur-marke .prozplus{margin-top:-4px;border:1px dashed var(--linie);border-radius:14px;background:var(--flaeche)}

/* Systemnahe Toolbar und untere Navigation; deutsche Ziele und Rollen bleiben. */
.zurueck{min-height:56px;padding:calc(8px + env(safe-area-inset-top)) 16px 4px;
         color:var(--marke);font-size:17px}
.reiter{height:calc(66px + env(safe-area-inset-bottom));padding-top:7px;
        background:color-mix(in srgb,var(--balken) 92%,transparent);
        border-top-color:var(--balken-linie);box-shadow:var(--schatten-oben);
        -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
.reiter button{min-height:50px;font-size:11px;color:var(--schrift2)}
.reiter button.aktiv{color:var(--marke)}
.reiter .ic{font-size:21px;margin-bottom:2px}
.fab{width:56px;height:56px;bottom:calc(82px + env(safe-area-inset-bottom));
     background:var(--marke);border-radius:18px}

/* Der Chat behält Versand, Zitate, Audio und Tastaturbehandlung vollständig bei. */
.verlauf{background:var(--grund);background-image:none;padding:14px 16px 24px;gap:12px}
.blase{max-width:82%;padding:10px 13px 7px;border-radius:20px;box-shadow:none}
.blase.sie{background:var(--flaeche2);border-bottom-left-radius:6px}
.blase.ich{background:var(--marke);color:#fff;border-bottom-right-radius:6px}
:root[data-thema="hell"] .verlauf,
:root[data-thema="dunkel"] .verlauf{background:var(--grund);background-image:none}
:root[data-thema="hell"] .blase.sie,
:root[data-thema="dunkel"] .blase.sie{background:var(--flaeche2);color:var(--schrift)}
:root[data-thema="hell"] .blase.ich,
:root[data-thema="dunkel"] .blase.ich{background:var(--marke);color:#fff}
.schreiben{padding:9px 12px calc(9px + env(safe-area-inset-bottom));
           background:var(--balken);border-top-color:var(--balken-linie)}
.schreiben input{min-height:44px;border-radius:22px;background:var(--flaeche)}
.schreiben .senden{width:44px;height:44px;background:var(--marke);color:#fff}

/* Unten nur EIN Abstand: die Home-Safe-Area ersetzt die normalen 9px.
   Ein deckender Hintergrund verbindet Leiste und unteren Rand ohne Farbnaht.
   Bei geöffneter Tastatur bleiben die bewährten 8px unverändert. */
body.imChat{background:var(--flaeche)}
#s-verlauf .schreiben{padding-bottom:max(9px, env(safe-area-inset-bottom));background:var(--flaeche)}
body.tastaturOffen #s-verlauf .schreiben{padding-bottom:8px}

@media (max-width:359px){
  .marke4u{margin-top:20px}.marke4u img{width:68px;height:68px}
  .marke4u strong{font-size:36px}.anmeldung h2{font-size:18px;margin-bottom:20px}
  .leutegitter button{min-height:74px}.leutegitter .nm{font-size:16px}
  .gruppe,.treffer{margin-left:12px;margin-right:12px}
  .gruppe,.treffer,.planwahl,.kalgitter{width:calc(100% - 24px)}
  .kacheln,.aktionen{padding-left:12px;padding-right:12px}
}

/* Mitarbeiter-Auswahl: klare Aktion statt unsichtbarer Klickfläche. */
.wahl{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 16px;
      text-align:left;background:var(--flaeche);border-bottom:1px solid var(--linie)}
.wahl:last-child{border-bottom:0}
.wahl .tx{flex:1;min-width:0}
.wahl .tx h4{font-size:16px;font-weight:680}
.wahl .tx p{font-size:13px;color:var(--schrift2)}
.wahlaktion{min-height:36px;display:inline-flex;align-items:center;padding:0 12px;border-radius:12px;
            border:1px solid var(--marke);color:var(--marke);font-size:12px;font-weight:700;white-space:nowrap}
.wahl .hak{width:24px;height:24px;border:2px solid var(--linie);border-radius:50%;display:grid;
           place-items:center;color:#fff;font-size:13px;font-weight:800;flex:none}
.wahl.aus{background:color-mix(in srgb,var(--marke) 8%,var(--flaeche))}
.wahl.aus .wahlaktion{background:var(--marke);color:#fff}
.wahl .hak.on{background:var(--marke);border-color:var(--marke)}
.mit-zeiten-aktion{padding-top:14px;padding-bottom:0}
.mit-zeiten-aktion[hidden]{display:none!important}
#mit-zeiten-felder{opacity:.62;transition:opacity .18s ease,box-shadow .18s ease}
#mit-zeiten-felder.bereit{opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--marke) 22%,transparent),var(--schatten)}

/* Admin-Dashboard: die drei belegbaren Kennzahlen aus dem Stitch-Bento-Raster. */
.admin-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
.admin-kpi{position:relative;min-height:110px;overflow:hidden;display:flex;flex-direction:column;
           justify-content:flex-end;padding:16px;border-radius:16px;background:var(--flaeche);
           border:1px solid var(--linie);box-shadow:var(--schatten)}
.admin-kpi::after{content:"";position:absolute;right:-30px;top:-38px;width:112px;height:112px;
                  border-radius:0 0 0 100%;background:color-mix(in srgb,var(--kpi) 7%,transparent)}
.admin-kpi-offen{grid-column:1/-1;--kpi:var(--marke)}
.admin-kpi-dringend{--kpi:#ff3b30}.admin-kpi-team{--kpi:#34c759}
.admin-kpi .kpi-symbol{position:absolute;left:16px;top:14px;z-index:1;color:var(--kpi);
                       font-size:22px;font-weight:800;line-height:1}
.admin-kpi .kpi-chip{position:absolute;right:14px;top:12px;z-index:1;padding:3px 9px;
                     border-radius:999px;background:color-mix(in srgb,var(--kpi) 15%,var(--flaeche));
                     color:var(--kpi);font-size:12px;font-weight:700}
.admin-kpi b{position:relative;z-index:1;font-size:34px;line-height:40px;letter-spacing:-.5px}
.admin-kpi small{position:relative;z-index:1;color:var(--schrift2);font-size:13px}

/* Chat-Anhänge: lokale Auswahl und gemeinsame Nachrichten. */
.chat-anhaengen{flex:none;width:36px;height:44px;color:var(--marke);background:transparent;font-size:29px}
.chat-vorschau{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--flaeche);border-top:1px solid var(--linie)}
.chat-vorschau[hidden]{display:none}
.chat-vorschau img{width:52px;height:52px;object-fit:cover;border-radius:8px}
.chat-dateiname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.chat-vorschau button{width:40px;height:40px;font-size:25px;background:transparent;color:var(--schrift)}
.chat-anhang{display:block;color:inherit;text-decoration:none;margin-bottom:6px;overflow-wrap:anywhere}
.chat-anhang img{display:block;max-width:100%;width:240px;height:180px;object-fit:cover;border-radius:10px}
.chat-anhang small{display:block;font-size:11px;opacity:.8;margin-top:4px}
.chat-bild-oeffnen{max-width:100%;padding:0;text-align:left;background:transparent}
.chat-bild-dialog.an{display:flex;flex-direction:column;align-items:stretch;z-index:100;height:100dvh;
                    padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
                    background:#111;color:#fff;animation:none}
.chat-bild-dialog[hidden]{display:none}
.chat-bild-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.chat-bild-kopf h2{font-size:16px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-bild-kopf button{min-height:44px;min-width:110px;padding:8px 12px;border:1px solid #777;border-radius:10px;flex:none;color:#fff}
.chat-bild-kopf button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.chat-bild-flaeche{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;padding:12px 0;overflow:hidden}
.chat-bild-flaeche img{max-width:100%;max-height:100%;object-fit:contain}
#chat-bild-meldung{flex:none;text-align:center;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.chat-versand{margin:12px 0;padding:10px 12px;border:1px solid var(--linie);border-radius:10px;color:var(--schrift);background:var(--flaeche);font-size:12px}
.chat-versand summary{cursor:pointer;font-weight:500}
.chat-versand p{line-height:1.5;margin:10px 0}
.chat-versand-eintrag{padding:8px 0;border-top:1px solid var(--linie);overflow-wrap:anywhere}
.chat-versand-eintrag small{display:block;opacity:.7;margin-bottom:5px}
.chat-hinweis-ausblenden{min-height:44px;margin-top:6px;padding:8px 10px;border:1px solid var(--linie);
                       border-radius:8px;font-size:12px;color:var(--schrift2)}
.chat-hinweis-ablage{align-self:stretch;margin:4px 0 8px;color:var(--schrift2);font-size:12px}
.chat-hinweis-ablage button{display:block;min-height:44px;padding:8px 0;color:var(--marke);font-size:12px;text-align:left}
.chat-hinweis-ablage small{display:block;font-size:11px;line-height:1.4}