/* Werkstattbuch – App (Brand Set Meisterseite: Anthrazit, Kalk, Akzent je Betrieb) */

:root {
  --wb-russ: #0E0E0E;
  --wb-schwarz: #000;
  --wb-kalk: #F4F1EA;
  --wb-grau: #8F8B84;
  --wb-linie: #2A2826;
  --wb-akzent: #E2601F;
  --wb-display: 'Archivo', 'Arial Narrow', sans-serif;
  --wb-text: 'Work Sans', system-ui, sans-serif;
  --wb-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wb-rand: 20px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* nichts darf die Seite breiter machen als den Bildschirm (sonst wandert die Leiste unten mit) */
html, body.wb { max-width: 100%; overflow-x: clip; }
/* „hidden“ gilt immer – auch wenn eine Klasse display setzt */
[hidden] { display: none !important; }

body.wb {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--wb-russ);
  color: var(--wb-kalk);
  font: 17px/1.5 var(--wb-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}
.wb a { color: inherit; }
.wb :focus-visible { outline: 3px solid var(--wb-akzent); outline-offset: 3px; }

/* ---------- Kopf */
.wb-kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top) + 12px) var(--wb-rand) 12px;
  background: var(--wb-schwarz); border-bottom: 1px solid var(--wb-linie);
}
.wb-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.wb-marke__zeichen {
  font: 900 28px/1 var(--wb-display); font-stretch: 125%; text-transform: uppercase;
}
.wb-kopf__ab {
  font: 500 12px/1 var(--wb-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--wb-grau); background: none; border: 0; padding: 12px 0 12px 12px; cursor: pointer;
}

.wb-punkt { color: var(--wb-akzent); }
.wb-label {
  font: 500 12px/1.3 var(--wb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wb-grau);
}
.wb-schlagzeile {
  margin: 0;
  font: 900 clamp(32px, 9vw, 48px)/1 var(--wb-display); font-stretch: 125%;
  text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.wb-klein { font-size: 14px; color: var(--wb-grau); }

/* ---------- Inhalt */
/* overflow-x: clip auch hier – am html allein hält iOS Safari es nicht ein, dann wandert die Leiste unten mit */
.wb-inhalt { padding: 24px var(--wb-rand) 120px; max-width: 720px; margin: 0 auto; overflow-x: clip; }
.wb-blatt { display: grid; gap: 16px; }
.wb-blatt p { margin: 0; }
.wb-blatt--mitte { min-height: 60vh; align-content: center; }

.wb-kopfzeile { display: grid; gap: 6px; margin-bottom: 20px; }

/* ---------- Knöpfe: groß, auch mit Handschuhen */
.wb-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 24px;
  font: 700 17px/1 var(--wb-text); text-decoration: none; text-align: center;
  border: 2px solid transparent; border-radius: 0; cursor: pointer;
}
.wb-knopf--gross { min-height: 64px; font-size: 19px; width: 100%; }
.wb-knopf--akzent { background: var(--wb-akzent); color: var(--wb-russ); }
.wb-knopf--rahmen { background: transparent; color: var(--wb-kalk); border-color: var(--wb-kalk); }
/* Links erben sonst „.wb a { color: inherit }“ – hell auf hell */
.wb a.wb-knopf--akzent, .wb a.wb-knopf--kalk { color: var(--wb-russ); }
.wb-knopf:disabled { opacity: .6; cursor: progress; }
.wb-knopf--laeuft { animation: wb-puls 1s ease-in-out infinite alternate; }
@keyframes wb-puls { to { opacity: .45; } }
.wb-knopf-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 8px; }
.wb-knopf-reihe .wb-knopf--gross { grid-column: 1 / -1; }
.wb-icon { flex: none; }

.wb-feld { display: grid; gap: 6px; }
.wb-feld input {
  min-height: 56px; padding: 0 16px; font: 17px var(--wb-text);
  color: var(--wb-kalk); background: var(--wb-schwarz); border: 1px solid var(--wb-linie); border-radius: 0;
}

.wb-meldung { padding: 14px 16px; border-left: 4px solid var(--wb-akzent); background: var(--wb-schwarz); }

/* ---------- Anfragen-Liste */
.wb-liste { list-style: none; margin: 0 calc(var(--wb-rand) * -1); padding: 0; border-top: 1px solid var(--wb-linie); }
.wb-zeile { display: flex; align-items: stretch; border-bottom: 1px solid var(--wb-linie); }
.wb-zeile__haupt {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 16px var(--wb-rand); text-decoration: none;
}
.wb-zeile__haupt .wb-marker { grid-column: 1; justify-self: start; margin-bottom: 4px; }
.wb-zeile__zeit { grid-column: 2; grid-row: 1; font: 500 12px var(--wb-mono); color: var(--wb-grau); }
.wb-zeile__name { grid-column: 1 / -1; font-size: 19px; }
.wb-zeile__ort, .wb-zeile__text { grid-column: 1 / -1; color: var(--wb-grau); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-zeile__ort { color: var(--wb-kalk); font-size: 15px; }
.wb-anruf {
  flex: none; display: grid; place-items: center; width: 72px;
  background: var(--wb-akzent); color: var(--wb-russ);
}
.wb-zeile--erledigt .wb-zeile__haupt, .wb-zeile--abgesagt .wb-zeile__haupt { opacity: .55; }

.wb-marker {
  display: inline-block; padding: 4px 8px;
  font: 500 11px/1 var(--wb-mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid currentColor; color: var(--wb-grau);
}
.wb-zeile--neu .wb-marker, .wb-marker--neu { color: var(--wb-russ); background: var(--wb-akzent); border-color: var(--wb-akzent); }
.wb-zeile--termin .wb-marker, .wb-marker--termin { color: var(--wb-kalk); }

.wb-leer { color: var(--wb-grau); }

/* ---------- Eine Anfrage */
.wb-zurueck { display: inline-block; padding: 8px 0 20px; font: 500 12px var(--wb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wb-grau); text-decoration: none; }
.wb-anfrage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wb-anfrage .wb-marker { justify-self: start; }
.wb-anfrage p { margin: 0; }
.wb-anfrage__text { font-size: 19px; margin: 8px 0 !important; }
.wb-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; margin: 8px 0 0; }
.wb-daten dt { padding-top: 4px; }
.wb-daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---------- Installieren */
.wb-installieren {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 14px var(--wb-rand) calc(env(safe-area-inset-bottom) + 14px);
  background: var(--wb-schwarz); border-top: 2px solid var(--wb-akzent);
}
.wb-installieren[hidden] { display: none; }
.wb-installieren__text { flex: 1; margin: 0; font-size: 15px; }
.wb-installieren .wb-knopf { min-height: 48px; }
.wb-installieren__zu { background: none; border: 0; color: var(--wb-grau); font-size: 28px; line-height: 1; padding: 8px; cursor: pointer; }

/* ---------- Anleitung Home-Bildschirm (iOS) */
.wb-anleitung {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end;
  background: rgba(0, 0, 0, .7);
}
.wb-anleitung[hidden] { display: none; }
.wb-anleitung__blatt {
  width: 100%; max-width: 720px; margin: 0 auto;
  display: grid; gap: 20px;
  padding: 28px var(--wb-rand) calc(env(safe-area-inset-bottom) + 20px);
  background: var(--wb-russ); border-top: 2px solid var(--wb-akzent);
}
.wb-schlagzeile--klein { font-size: clamp(24px, 7vw, 32px); }
.wb-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.wb-schritte li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.wb-schritte__nr {
  display: grid; place-items: center; width: 36px; height: 36px;
  font: 900 18px/1 var(--wb-display); background: var(--wb-akzent); color: var(--wb-russ);
}
.wb-icon--inline { vertical-align: -5px; color: var(--wb-akzent); }
.wb-schritte[hidden] { display: none; }
.wb-anleitung__blatt p { margin: 0; }
.wb-textknopf { font: inherit; color: var(--wb-kalk); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; }
.wb-anleitung__blatt { max-height: 100dvh; overflow-y: auto; }
/* über dem Scanner (60) */
.wb-anleitung--erlaubnis { z-index: 70; }

/* ---------- Reiter Anfragen / Aufträge */
.wb-reiter {
  position: sticky; top: calc(env(safe-area-inset-top) + 59px); z-index: 9;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--wb-schwarz); border-bottom: 1px solid var(--wb-linie);
}
.wb-reiter a {
  padding: 14px 0; text-align: center; text-decoration: none;
  font: 500 13px/1 var(--wb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wb-grau);
  border-bottom: 3px solid transparent;
}
.wb-reiter a[aria-current="page"] { color: var(--wb-kalk); border-bottom-color: var(--wb-akzent); }

.wb-schlagzeile--mittel { font-size: clamp(26px, 7vw, 40px); }
.wb-knopf--kalk { background: var(--wb-kalk); color: var(--wb-russ); }

/* ---------- Status */
.wb-status { display: grid; gap: 8px; margin-top: 8px; }
.wb-status__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-status__knopf {
  min-height: 48px; padding: 0 16px; cursor: pointer;
  font: 600 15px/1 var(--wb-text); color: var(--wb-kalk);
  background: transparent; border: 1px solid var(--wb-linie);
}
.wb-status__knopf[aria-pressed="true"] { background: var(--wb-akzent); border-color: var(--wb-akzent); color: var(--wb-russ); }

.wb-marker--arbeit { color: var(--wb-kalk); }
.wb-marker--offen { color: var(--wb-russ); background: var(--wb-akzent); border-color: var(--wb-akzent); }
.wb-zeile--fertig .wb-zeile__haupt { opacity: .55; }

/* ---------- Abschnitte, Termine, Formulare */
.wb-abschnitt { display: grid; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--wb-linie); }
.wb-abschnitt h2 { margin: 0; }
.wb-termine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wb-termin {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--wb-schwarz); border-left: 4px solid var(--wb-akzent);
}
.wb-termin div { display: grid; gap: 2px; flex: 1; min-width: 0; overflow-wrap: break-word; }
.wb-termin--vorbei { opacity: .5; border-left-color: var(--wb-linie); }
.wb-termin__weg { flex: none; width: 44px; height: 44px; font-size: 26px; line-height: 1; color: var(--wb-grau); background: none; border: 0; cursor: pointer; }

.wb-neu summary { list-style: none; width: 100%; }
.wb-neu summary::-webkit-details-marker { display: none; }
.wb-neu[open] summary { display: none; }
.wb-formular { display: grid; gap: 12px; }
.wb-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wb-feld select,
.wb-formular textarea {
  width: 100%; min-height: 56px; padding: 12px 16px; font: 17px/1.4 var(--wb-text);
  color: var(--wb-kalk); background: var(--wb-schwarz); border: 1px solid var(--wb-linie); border-radius: 0;
}
.wb-feld input { width: 100%; }
.wb-formular textarea { min-height: 140px; resize: vertical; }
.wb-unten { margin-top: 28px; }

.wb-textknopf { justify-self: start; }

/* ---------- Stunden */
.wb-abschnitt__kopf { display: flex; justify-content: space-between; align-items: baseline; }
.wb-summe { font: 900 22px/1 var(--wb-display); color: var(--wb-kalk); letter-spacing: 0; text-transform: none; }
.wb-stoppuhr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--wb-schwarz); }
.wb-stoppuhr__zeit { font: 500 34px/1 var(--wb-mono); letter-spacing: .02em; }
.wb-stoppuhr--laeuft .wb-stoppuhr__zeit { color: var(--wb-akzent); }
.wb-stoppuhr--laeuft { border-left: 4px solid var(--wb-akzent); }
.wb-dauer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wb-dauer__wert { min-width: 76px; font: 900 28px/1 var(--wb-display); }
.wb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.wb-chips legend { margin-bottom: 8px; padding: 0; }
.wb-chip {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; cursor: pointer;
  font: 600 15px/1 var(--wb-text); color: var(--wb-kalk); background: transparent; border: 1px solid var(--wb-linie);
}
.wb-chip--leise { color: var(--wb-grau); }
.wb-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wb-chip:has(input:checked) { background: var(--wb-akzent); border-color: var(--wb-akzent); color: var(--wb-russ); }
.wb-chip:has(input:focus-visible) { outline: 3px solid var(--wb-akzent); outline-offset: 2px; }
.wb-eintraege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.wb-eintraege:empty { display: none; }
.wb-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--wb-schwarz); }
.wb-eintrag div { display: grid; gap: 2px; min-width: 0; overflow-wrap: break-word; }
.wb-eintrag button, .wb-eintrag .wb-knopf { white-space: nowrap; }
.wb-eintrag--wartet { border-left: 4px dashed var(--wb-akzent); }

/* ---------- Fotos */
.wb-versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.wb-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wb-fotos:empty { display: none; }
.wb-foto { position: relative; margin: 0; background: var(--wb-schwarz); }
.wb-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.wb-foto figcaption { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 4px; }
.wb-foto__web { min-height: 40px; padding: 0 10px; font: 500 11px/1 var(--wb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wb-grau); background: none; border: 1px solid var(--wb-linie); cursor: pointer; }
.wb-foto__web--an { color: var(--wb-russ); background: var(--wb-akzent); border-color: var(--wb-akzent); }
.wb-foto__weg { width: 40px; height: 40px; font-size: 24px; color: var(--wb-grau); background: none; border: 0; cursor: pointer; }
.wb-foto--wartet { outline: 2px dashed var(--wb-akzent); outline-offset: -2px; }
.wb-foto--wartet img { opacity: .6; }

/* ---------- Leisten: Stoppuhr läuft woanders, Wartendes */
.wb-laufend, .wb-warte {
  display: block; margin: 0; padding: 10px var(--wb-rand);
  font: 500 12px/1.3 var(--wb-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
}
.wb-laufend { background: var(--wb-akzent); color: var(--wb-russ); }
.wb-warte { background: var(--wb-schwarz); color: var(--wb-kalk); border-bottom: 1px dashed var(--wb-akzent); }
.wb-laufend[hidden], .wb-warte[hidden] { display: none; }
.wb-unten-eng { margin-top: 12px; }

/* ---------- Push */
.wb-push { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 16px; padding: 10px 14px; background: var(--wb-schwarz); }
.wb-push[hidden] { display: none; }
.wb-push__text { font-size: 15px; }
.wb-push .wb-knopf { min-height: 44px; padding: 0 14px; font-size: 15px; }
.wb-push--an { border-left: 4px solid var(--wb-akzent); }

/* ---------- Auftrag anlegen / bearbeiten */
.wb-oben { margin-top: 20px; }
.wb-abstand-unten { margin-bottom: 20px; }
.wb-zwei--plz { grid-template-columns: 1fr 2fr; }
.wb-formular .wb-meldung[hidden] { display: none; }
a.wb-textknopf { color: var(--wb-grau); font-size: 15px; }

/* ---------- Material: mehrere Positionen, volle Breite */
.wb-material { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wb-material legend { margin-bottom: 6px; padding: 0; }
.wb-material__zeile { display: flex; gap: 8px; }
.wb-material__zeile input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 16px; font: 17px var(--wb-text);
  color: var(--wb-kalk); background: var(--wb-schwarz); border: 1px solid var(--wb-linie); border-radius: 0;
}
.wb-material__weg { flex: none; width: 56px; font-size: 26px; color: var(--wb-grau); background: none; border: 1px solid var(--wb-linie); cursor: pointer; }
.wb-material .wb-knopf { justify-self: start; min-height: 48px; }

/* ---------- Material sichtbar machen */
.wb-positionen { margin: 6px 0 0; padding: 0 0 0 16px; font-size: 15px; }
.wb-positionen li { margin: 2px 0; }
.wb-materialliste { display: grid; gap: 8px; margin-top: 8px; padding: 12px 14px; background: var(--wb-schwarz); border-left: 4px solid var(--wb-kalk); }
.wb-materialliste h3 { margin: 0; }
.wb-materialliste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wb-materialliste li { display: grid; gap: 1px; }
.wb-materialliste--uebergeben span:first-child { color: var(--wb-grau); }

/* =====================================================================
   App-Aufbau nach Vorbild Tellerrand-Portal (mobil): Leiste unten, Übersicht,
   Karten, Filter, einklappbare Abschnitte – im Meisterseite-Look.
   ===================================================================== */
:root { --wb-flaeche: #171716; --wb-flaeche-2: #1F1E1D; --wb-rund: 14px; --wb-rund-klein: 10px; --wb-leiste-h: 64px; }

/* Kopf: kompakt, Marke + Firmenname */
.wb-kopf { padding: calc(env(safe-area-inset-top) + 10px) var(--wb-rand) 10px; }
.wb-marke__text { display: grid; gap: 1px; line-height: 1.1; }
.wb-marke__firma { font-size: 14px; font-weight: 600; color: var(--wb-kalk); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-marke__zeichen { font-size: 26px; }

/* Platz für die Leiste unten */
.wb--angemeldet .wb-inhalt { padding-bottom: calc(var(--wb-leiste-h) + 40px + env(safe-area-inset-bottom)); }
.wb--angemeldet .wb-installieren { bottom: calc(var(--wb-leiste-h) + env(safe-area-inset-bottom)); padding-bottom: 14px; }

/* ---------- Leiste unten */
.wb-leiste {
  position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--wb-schwarz); border-top: 1px solid var(--wb-linie);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}
.wb-leiste__tab {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px;
  min-height: 54px; padding: 6px 0 4px; border-radius: var(--wb-rund-klein);
  color: rgba(244, 241, 234, .6); text-decoration: none;
  font: 600 11px/1.1 var(--wb-text); letter-spacing: -.01em;
}
.wb a.wb-leiste__tab { color: rgba(244, 241, 234, .6); }
.wb a.wb-leiste__tab[aria-current="page"] { color: var(--wb-kalk); background: rgba(244, 241, 234, .08); }
.wb-leiste__tab[aria-current="page"] .wb-icon { color: var(--wb-akzent); }
.wb-leiste__tab .wb-icon { width: 23px; height: 23px; }
.wb-leiste__tab:active { transform: translateY(1px); }
.wb-leiste__zahl {
  position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px;
  border-radius: 999px; background: #D92D20; color: #fff; font: 700 11px/18px var(--wb-text); text-align: center;
}

/* ---------- Seitenkopf */
.wb-seitenkopf { display: grid; gap: 6px; margin-bottom: 18px; }
.wb-seitenkopf .wb-schlagzeile { font-size: clamp(30px, 8.5vw, 44px); }
.wb-seitenkopf__text { margin: 0; color: var(--wb-grau); font-size: 15px; }

/* ---------- Filter (Segmente) */
.wb-filter {
  display: flex; gap: 4px; margin: 0 0 16px; padding: 4px; overflow-x: auto;
  background: var(--wb-schwarz); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund);
  scrollbar-width: none;
}
.wb-filter__tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: var(--wb-rund-klein);
  font: 650 14px/1 var(--wb-text); text-decoration: none; white-space: nowrap;
}
.wb a.wb-filter__tab { color: var(--wb-grau); }
.wb a.wb-filter__tab[aria-current="page"] { color: var(--wb-russ); background: var(--wb-kalk); }
.wb-filter__zahl { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(244, 241, 234, .12); font-size: 12px; text-align: center; }
.wb-filter__tab[aria-current="page"] .wb-filter__zahl { background: var(--wb-akzent); color: var(--wb-russ); }

/* ---------- Karten (Anfragen, Aufträge) */
.wb-karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wb-karte {
  display: flex; align-items: stretch; overflow: hidden;
  background: var(--wb-flaeche); border: 1px solid var(--wb-linie); border-left: 4px solid var(--wb-linie);
  border-radius: var(--wb-rund);
}
.wb-karte--neu, .wb-karte--offen { border-left-color: var(--wb-akzent); }
.wb-karte--angerufen, .wb-karte--arbeit { border-left-color: #F2B705; }
.wb-karte--termin { border-left-color: #4FAE76; }
.wb-karte--erledigt, .wb-karte--abgesagt, .wb-karte--fertig { opacity: .6; }
.wb-karte__haupt { flex: 1; min-width: 0; display: grid; gap: 4px; padding: 14px 16px; text-decoration: none; }
.wb-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.wb-karte__zeit { display: inline-flex; align-items: center; gap: 4px; font: 500 12px var(--wb-mono); color: var(--wb-grau); }
.wb-karte__titel { font-size: 18px; line-height: 1.25; }
.wb-karte__text { color: var(--wb-grau); font-size: 15px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wb-karte__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--wb-kalk); }
.wb-karte .wb-anruf { width: 64px; }
.wb-marker { border-radius: 999px; padding: 4px 9px; }
.wb-marker--angerufen, .wb-marker--arbeit { color: #F2B705; }
.wb-marker--termin { color: #4FAE76; }
.wb-icon--klein { width: 15px; height: 15px; flex: none; }
.wb-icon--leise { color: var(--wb-grau); margin-left: auto; }

/* ---------- Übersicht */
.wb-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.wb-kachel {
  display: grid; gap: 4px; padding: 16px; text-decoration: none;
  background: var(--wb-flaeche); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund);
}
.wb a.wb-kachel { color: var(--wb-kalk); }
.wb-kachel:active { transform: translateY(1px); }
.wb-kachel__titel { font: 600 12px/1.2 var(--wb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wb-grau); }
.wb-kachel__zahl { font: 900 38px/1.05 var(--wb-display); letter-spacing: -.02em; }
.wb-kachel__zahl--text { font-size: 28px; padding: 5px 0 4px; }
.wb-kachel small { font-size: 13px; color: var(--wb-grau); }
.wb-kachel--alarm { border-color: var(--wb-akzent); background: color-mix(in srgb, var(--wb-akzent) 12%, var(--wb-flaeche)); }
.wb-kachel--alarm .wb-kachel__zahl { color: var(--wb-akzent); }
.wb-block { margin-bottom: 28px; }
.wb-block__titel { margin: 0 0 10px; }
.wb-leerbox { margin: 0; padding: 22px 18px; text-align: center; color: var(--wb-grau); border: 1px dashed var(--wb-linie); border-radius: var(--wb-rund); }
.wb-mehrlink { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--wb-grau); font-size: 15px; text-decoration: none; }
.wb-mehrlink .wb-icon { width: 18px; height: 18px; }
.wb-karte-stoppuhr {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 14px 16px; text-decoration: none;
  background: var(--wb-akzent); border-radius: var(--wb-rund);
}
.wb a.wb-karte-stoppuhr { color: var(--wb-russ); }
.wb-karte-stoppuhr > span { display: grid; flex: 1; }
.wb-karte-stoppuhr .wb-klein { color: var(--wb-russ); font: 500 20px var(--wb-mono); }
.wb-karte-stoppuhr .wb-icon--leise { color: var(--wb-russ); }

/* ---------- Agenda (Termine nach Tag) */
.wb-agenda { display: grid; gap: 18px; }
.wb-agenda__tag h3 { margin: 0 0 8px; }
.wb-agenda__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wb-agenda__zeile {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; text-decoration: none;
  background: var(--wb-flaeche); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund);
}
.wb a.wb-agenda__zeile { color: var(--wb-kalk); }
.wb-agenda__zeit { display: grid; gap: 2px; font: 600 16px/1.15 var(--wb-mono); font-variant-numeric: tabular-nums; }
.wb-agenda__zeit small { font-size: 13px; font-weight: 500; color: var(--wb-grau); }
.wb-agenda__dauer { font: 500 13px var(--wb-text); color: var(--wb-kalk); }
.wb-agenda__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.wb-agenda__text .wb-klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-chip-klein { padding: 4px 9px; border-radius: 999px; background: rgba(244, 241, 234, .1); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- Mehr (gruppierte Liste wie iOS-Einstellungen) */
.wb-gruppe__titel { margin: 18px 0 8px; }
.wb-gruppe { overflow: hidden; background: var(--wb-flaeche); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund); }
.wb-gruppe--abstand { margin-top: 26px; }
.wb-gruppe__zeile {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
  background: none; border: 0; border-bottom: 1px solid var(--wb-linie); text-align: left; text-decoration: none;
  font: inherit; color: var(--wb-kalk); cursor: pointer;
}
.wb a.wb-gruppe__zeile { color: var(--wb-kalk); }
.wb-gruppe__zeile:last-child { border-bottom: 0; }
.wb-gruppe__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(244, 241, 234, .08); }
.wb-gruppe__icon .wb-icon { width: 20px; height: 20px; }
.wb-gruppe__text { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; overflow-wrap: anywhere; }
.wb-gruppe__zeile--gefahr { color: #F97066; }
.wb-gruppe__zeile--gefahr .wb-gruppe__icon { background: rgba(249, 112, 102, .12); }
.wb-knopf--klein { min-height: 40px; padding: 0 14px; font-size: 14px; }
.wb-mitte { text-align: center; margin-top: 20px; }

/* ---------- Auftrag: Kopfkarte, Aktionen, einklappbare Abschnitte */
.wb-auftrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.wb-kopfkarte {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px;
  background: var(--wb-flaeche); border: 1px solid var(--wb-linie); border-left: 4px solid var(--wb-linie); border-radius: var(--wb-rund);
}
.wb-kopfkarte .wb-marker { justify-self: start; }
.wb-kopfkarte .wb-daten { margin: 0; }
.wb-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); gap: 8px; }
.wb-aktion {
  display: grid; justify-items: center; gap: 4px; padding: 10px 0; min-width: 0; text-decoration: none;
  background: rgba(244, 241, 234, .06); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund-klein);
  font: 600 12px/1.1 var(--wb-text);
}
.wb a.wb-aktion { color: var(--wb-kalk); }
.wb a.wb-aktion--haupt { background: var(--wb-akzent); border-color: var(--wb-akzent); color: var(--wb-russ); }
.wb-aktion .wb-icon { width: 22px; height: 22px; }
.wb-aktion__wa { display: grid; place-items: center; width: 22px; height: 22px; font: 800 11px var(--wb-text); border: 1.8px solid currentColor; border-radius: 50%; }
.wb-status { margin-top: 0; }

.wb-klapp { background: var(--wb-flaeche); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund); }
.wb-klapp__kopf {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 16px;
  list-style: none; cursor: pointer;
}
.wb-klapp__kopf::-webkit-details-marker { display: none; }
.wb-klapp__kopf::after {
  content: ''; flex: none; width: 9px; height: 9px; margin-left: 4px;
  border-right: 2px solid var(--wb-grau); border-bottom: 2px solid var(--wb-grau);
  transform: rotate(-45deg); transition: transform .15s;
}
.wb-klapp[open] > .wb-klapp__kopf::after { transform: rotate(45deg); }
.wb-klapp__titel { font: 800 17px/1.2 var(--wb-text); }
.wb-klapp__info { flex: 1; text-align: right; color: var(--wb-grau); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-klapp__info strong { color: var(--wb-kalk); }
.wb-klapp__inhalt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 16px 16px; }
.wb-klapp .wb-materialliste { margin-top: 0; border-left: 0; padding: 0; background: none; }
.wb-klapp .wb-eintrag, .wb-klapp .wb-termin, .wb-klapp .wb-stoppuhr { border-radius: var(--wb-rund-klein); background: var(--wb-schwarz); }

/* Eingaben etwas runder */
.wb-feld input, .wb-feld select, .wb-formular textarea, .wb-material__zeile input { border-radius: var(--wb-rund-klein); }
.wb-knopf { border-radius: 999px; }
.wb-chip, .wb-status__knopf { border-radius: 999px; }

/* ---------- Material mit Menge und Katalogsuche */
.wb-material__zeile { align-items: flex-start; }
.wb-material__feld { flex: 1; min-width: 0; display: grid; gap: 4px; }
.wb-material__feld input { width: 100%; }
.wb-material__info { font-size: 13px; color: var(--wb-akzent); }
.wb-material__info:empty { display: none; }
.wb-material__zeile .wb-material__menge { flex: 0 0 74px; width: 74px; text-align: center; }
.wb-treffer {
  position: absolute; z-index: 30; left: 0; right: 0; max-height: 320px; overflow-y: auto;
  background: var(--wb-schwarz); border: 1px solid var(--wb-akzent); border-radius: var(--wb-rund-klein);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.wb-treffer button {
  display: grid; gap: 2px; width: 100%; padding: 10px 14px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--wb-linie); color: var(--wb-kalk); font: inherit;
}
.wb-treffer button:last-child { border-bottom: 0; }
.wb-treffer button:focus-visible, .wb-treffer button:hover { background: rgba(244, 241, 234, .06); }
.wb-treffer small { color: var(--wb-grau); font-size: 13px; }
.wb-treffer__leer { padding: 12px 14px; color: var(--wb-grau); font-size: 14px; }

/* ---------- iPhone: Datums-/Zeitfelder haben eine feste Mindestbreite und ragen sonst heraus */
.wb input[type="date"], .wb input[type="time"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%;
  min-height: 56px; line-height: 56px; padding-top: 0; padding-bottom: 0; text-align: left;
}
.wb input::-webkit-date-and-time-value { text-align: left; }
.wb-feld, .wb-zwei > *, .wb-formular > * { min-width: 0; }
.wb-zwei--zeit { grid-template-columns: 1fr; }
.wb-dauer__hilfe { margin: -4px 0 0; }
.wb-klapp__info--offen { color: var(--wb-akzent); font-weight: 600; }
.wb-klapp__info--fertig { color: #4FAE76; font-weight: 600; }
.wb-eintrag--uebergeben strong { color: var(--wb-grau); }
.wb--suche .wb-inhalt { padding-bottom: 75vh; }

/* Material: Menge nachträglich ändern */
.wb-eintrag__haupt { flex: 1; }
.wb-menge__auf { list-style: none; cursor: pointer; font: 500 12px/1.3 var(--wb-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wb-akzent); padding: 6px 0 2px; }
.wb-menge__auf::-webkit-details-marker { display: none; }
.wb-menge[open] .wb-menge__auf { color: var(--wb-grau); }
.wb-menge__form { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.wb-menge__form input { width: 6.5em; min-width: 0; font: inherit; font-size: 17px; padding: 8px 10px; background: var(--wb-russ); color: var(--wb-kalk); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund-klein); -webkit-appearance: none; appearance: none; }
.wb-menge__einheit { color: var(--wb-grau); }

/* Seite aus dem Speicher des Geräts (kein oder langsames Netz) */
.wb-stand { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--wb-rand); background: #3A2E12; color: #F7E7B0; font-size: 15px; border-bottom: 1px solid #6B5419; }
.wb-stand[hidden] { display: none; }
.wb-stand button { font: inherit; font-weight: 700; color: inherit; background: none; border: 1px solid currentColor; padding: 6px 12px; cursor: pointer; }

/* ---------- Demo */
.wb-demo { margin: 0; padding: 8px var(--wb-rand); background: var(--wb-akzent); color: var(--wb-russ); font-size: 14px; line-height: 1.35; }

/* ---------- Unterschrift Kunde */
.wb-unterschrift__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wb-linie); }
.wb-unterschrift__liste li { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--wb-linie); font-size: 15px; }
.wb-unterschrift__liste small { color: var(--wb-grau); }
.wb-unterschrift__summe { margin: 4px 0 0; font-size: 16px; }
.wb-unterschrift__feld { position: relative; background: var(--wb-kalk); border-radius: var(--wb-rund-klein, 10px); }
.wb-unterschrift__feld canvas { display: block; width: 100%; height: 220px; touch-action: none; cursor: crosshair; }
.wb-unterschrift__feld::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 44px; border-bottom: 1px dashed #8F8B84; pointer-events: none; }
.wb-unterschrift__hinweis { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #66625B; font-size: 14px; pointer-events: none; }
.wb-unterschrift-stand { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--wb-kalk); color: var(--wb-russ); border-radius: var(--wb-rund-klein, 10px); }
.wb-unterschrift-stand img { height: 56px; max-width: 45%; }
.wb-unterschrift-stand small { color: #66625B; }

/* ---------- Mitarbeiter: Handy einrichten (QR-Code im Vollbild, weißer Grund zum Scannen) */
.wb-einrichten { padding: 16px; background: var(--wb-flaeche, #171716); border: 1px solid var(--wb-linie); border-radius: var(--wb-rund, 14px); margin-bottom: 20px; }
.wb-qr-voll {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 24px var(--wb-rand) calc(24px + env(safe-area-inset-bottom)); background: #fff; color: #0E0E0E; text-align: center;
}
.wb-qr-voll[hidden] { display: none; }
.wb-qr-voll__titel { margin: 0; font: 800 22px/1.2 var(--wb-text); }
.wb-qr-voll__code { width: min(86vw, 420px); }
.wb-qr-voll__code svg { display: block; width: 100%; height: auto; }
.wb-qr-voll__text { margin: 0; color: #4A4743; font-size: 15px; }
.wb-qr-voll .wb-knopf { width: min(86vw, 420px); }
.wb-qr-voll .wb-knopf--rahmen { color: #0E0E0E; border-color: #0E0E0E; }
body.wb--qr { overflow: hidden; }
.wb-gruppe__zeile--inaktiv { opacity: .55; }

/* Einspaltige Raster dürfen nie breiter werden als der Bildschirm – sonst wandert auf dem
   iPhone die Leiste unten mit (Spalte „auto“ wächst mit dem längsten Inhalt) */
.wb :is(.wb-blatt, .wb-kopfzeile, .wb-feld, .wb-formular, .wb-abschnitt, .wb-status, .wb-schritte, .wb-material,
  .wb-materialliste, .wb-materialliste ul, .wb-seitenkopf, .wb-karten, .wb-agenda, .wb-agenda__liste) { grid-template-columns: minmax(0, 1fr); }
.wb-menge__form input { min-width: 0; width: 5.5em; flex: 0 1 auto; }
.wb-menge__einheit { white-space: nowrap; }

/* ---------- Merkzettel per Sprache */
.wb-diktat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.wb-diktat[hidden] { display: none; }
.wb-diktat .wb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.wb-knopf--aufnahme { background: #C0392B !important; border-color: #C0392B !important; color: #fff !important; animation: wb-puls 1.4s ease-in-out infinite; }
@keyframes wb-puls { 50% { box-shadow: 0 0 0 10px rgba(192, 57, 43, .18); } }
@media (prefers-reduced-motion: reduce) { .wb-knopf--aufnahme { animation: none; } }

/* ---------- Strich- und QR-Codes scannen (Kamera im Vollbild) */
.wb-material .wb-scan-knopf { justify-self: stretch; }
.wb-material .wb-scan-knopf[hidden] { display: none; }
.wb-scanner { position: fixed; inset: 0; z-index: 60; background: #000; color: #F4F1EA; }
.wb-scanner[hidden] { display: none; }
.wb-scanner__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wb-scanner__rahmen {
  position: absolute; left: 50%; top: 38%; width: min(78vw, 360px); height: min(48vw, 220px); transform: translate(-50%, -50%);
  border: 3px solid var(--wb-akzent); border-radius: var(--wb-rund, 14px); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); pointer-events: none;
}
.wb-scanner__unten {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  max-height: 55vh; overflow-y: auto; padding: 16px var(--wb-rand) calc(16px + env(safe-area-inset-bottom)); background: rgba(14, 14, 14, .92);
}
.wb-scanner__status { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.wb-scanner__wahl { display: grid; gap: 0; border: 1px solid var(--wb-linie); border-radius: var(--wb-rund-klein, 10px); overflow: hidden; }
.wb-scanner__wahl[hidden] { display: none; }
.wb-scanner__wahl button {
  display: grid; gap: 2px; min-height: 52px; padding: 10px 14px; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--wb-linie); cursor: pointer;
}
.wb-scanner__wahl button:last-child { border-bottom: 0; }
.wb-scanner__wahl small { color: var(--wb-grau); font-size: 13px; overflow-wrap: anywhere; }
.wb-scanner__knoepfe { display: flex; gap: 10px; }
.wb-scanner__knoepfe .wb-knopf { flex: 1; min-height: 52px; }
.wb-scanner__knoepfe .wb-knopf[hidden] { display: none; }

/* ---------- Lexware: ersetzter Entwurf noch in Lexware */
.wb-hinweis { margin: 0 0 12px; padding: 12px 14px; border-left: 4px solid var(--wb-akzent); background: rgba(244, 241, 234, .06); font-size: 15px; }
.wb-hinweis a { color: inherit; font-weight: 700; }
.wb-hinweis--warnung { border-left-color: #C0392B; background: rgba(192, 57, 43, .14); }

/* ---------- Unterschrift: Kunde und Gegenzeichnung Monteur */
.wb-unterschrift__block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wb-unterschrift__block legend { margin-bottom: 6px; padding: 0; }
.wb-unterschrift__block .wb-knopf { justify-self: start; min-height: 44px; }
.wb-unterschrift-stand + .wb-unterschrift-stand { margin-top: 8px; }