/* =========================================================================
   OX Service – Techniker-PWA · mobil-first, Material „Liquid Glass"

   Die Marke bleibt dieselbe wie im ERP-Prototyp (prototype/assets/style.css):
   gleiche Akzente, gleiche Statusfarben. Geaendert hat sich das MATERIAL —
   Flaechen sind geschichtetes Glas ueber einer farbigen Lichtquelle statt
   flacher Kaesten, Bedienelemente schweben ueber dem Inhalt.

   Alles laeuft ueber die Token unten: wer eine Flaeche will, nimmt
   `--surface`, und die Unschaerfe kommt aus der Sammelregel weiter unten
   (`.card, .tour-item, …`). Neue Bauteile also mit denselben Token bauen,
   dann sehen sie von allein richtig aus.

   Das Glas ist bewusst DICHT (Blur 22px, kraeftige Innenkante): die App wird
   draussen in der Sonne bedient, da zaehlt Kontrast mehr als Durchsicht.
   ========================================================================= */
:root {
  --bg:            #0c0e13;
  /* Durchscheinende Flaechen statt Vollton. Wirken erst mit der
     backdrop-filter-Regel weiter unten wie Glas. */
  --surface:       rgba(255,255,255,.075);
  --surface-2:     rgba(255,255,255,.11);
  --border:        rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --text:          #e8eaf1;
  /* Heller als im flachen Theme: auf Glas verliert Text an Kontrast, und
     in der Sonne sowieso. */
  --muted:         rgba(232,234,241,.72);
  --faint:         rgba(232,234,241,.58);
  --accent:        #6c6cf5;
  --accent-2:      #8a6cff;
  --accent-soft:   rgba(108, 108, 245, .22);
  --success:       #38d39f;
  --warning:       #f7b955;
  --danger:        #f46a6a;
  --info:          #45b6f5;
  --radius:   24px;
  --radius-m: 20px;
  --radius-s: 14px;
  /* Die Innenkante oben macht die Lichtbrechung; ohne sie sieht Glas
     wie eine graue Folie aus. */
  --glas-kante: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.05);
  --shadow:   var(--glas-kante), 0 10px 34px rgba(0,0,0,.45);
  --blur:     blur(22px) saturate(165%);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  /* Die Lichtquelle, die das Glas bricht. Fest am Viewport, damit sie beim
     Scrollen stehen bleibt und der Inhalt darueber hinweggleitet. */
  background: var(--bg);
  background-image:
    radial-gradient(620px 420px at 12% -6%, rgba(108,108,245,.42), transparent 62%),
    radial-gradient(520px 380px at 104% 16%, rgba(69,182,245,.22), transparent 60%),
    radial-gradient(700px 520px at 46% 108%, rgba(138,108,255,.26), transparent 66%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}
a { color: inherit; text-decoration: none; }

/* ---- App-Schale ------------------------------------------------------- */
.app {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  max-width: 560px; margin: 0 auto;
}

/* Kopfleiste (sticky) */
/* Schwebt als eigenes Stueck Glas, statt als Balken am Rand zu kleben.
   Der Inhalt gleitet sichtbar darunter hindurch – das ist der Effekt. */
.topbar {
  position: sticky; z-index: 10;
  top: calc(8px + env(safe-area-inset-top));
  margin: calc(8px + env(safe-area-inset-top)) 14px 6px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.topbar .back {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 20px; cursor: pointer;
}
.topbar .back:active { background: var(--surface-2); }
.topbar .ttl { font-weight: 750; font-size: 17px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .ttl .sub { display: block; color: var(--faint); font-size: 12px; font-weight: 500; }
.logo {
  width: 36px; height: 36px; border-radius: 11px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 6px 16px rgba(108,108,245,.4);
}
.topver[hidden] { display: none; }
.topver { font-size: 10px; color: var(--muted); opacity: .7; margin-left: 6px; align-self: flex-end; margin-bottom: 4px; }
.app-ver { display: inline-block; margin-top: 6px; color: var(--muted); opacity: .65; font-size: 11px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
}
.icon-btn:active { background: var(--surface-2); color: var(--text); }

/* Inhalt */
.content { flex: 1; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }

/* ---- Untere Tab-Leiste ----------------------------------------------- */
/* Pille statt Randleiste: links/rechts eingerueckt, ueber dem Inhalt. */
.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 528px; z-index: 30; display: none;
  padding: 8px 7px;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
body.tabbar-on .tabbar { display: flex; }
.tabbar { justify-content: space-around; }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px;
  min-height: 54px; border-radius: 21px;
  background: none; border: 1px solid transparent; cursor: pointer; padding: 8px 4px;
  color: var(--faint); font-size: 10px; font-weight: 600; font-family: inherit;
  transition: color .12s, background .12s;
}
.tab svg { width: 21px; height: 21px; }
/* Der aktive Tab ist eine eigene getoente Kachel – auf Glas reicht Farbe
   allein nicht, um ihn zu finden. */
.tab.active {
  color: #fff; font-weight: 750;
  background: linear-gradient(160deg, rgba(108,108,245,.42), rgba(138,108,255,.24));
  border-color: rgba(138,108,255,.45);
  box-shadow: 0 6px 20px rgba(88,72,220,.45);
}
.tab:active { opacity: .65; }
/* Platz für die Leiste schaffen + Chat-Button darüber heben */
body.tabbar-on .content { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
body.tabbar-on .ox-fab  { bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
body.tabbar-on .ox-chat { bottom: calc(150px + env(safe-area-inset-bottom)) !important; }

/* ---- Zeiterfassung (Stempeln) ---------------------------------------- */
.zeit-card { text-align: center; padding: 32px 22px 26px; }
.zeit-state {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; background: var(--surface-2); color: var(--muted);
}
.zeit-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.zeit-state.on { background: rgba(56,211,159,.14); color: var(--success); }
.zeit-counter {
  font-size: 46px; font-weight: 800; letter-spacing: 1px; margin: 20px 0 6px;
  font-variant-numeric: tabular-nums; font-family: "SF Mono", "Roboto Mono", ui-monospace, monospace;
}
.zeit-heute-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--faint); margin: -2px 0 8px;
}
.zeit-since { color: var(--muted); font-size: 13px; margin-bottom: 22px; }

/* Tagesliste: wann ein-, wann ausgestempelt, was dazwischen Pause war. */
.zt-zeile {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
/* Tasse/Schraubenschluessel als Spalte ganz links - der Tag laesst sich so
   ueberfliegen, ohne die Zeilen zu lesen. */
.zt-zeile > i { font-size: 15px; opacity: .75; }
.zt-pause > i { color: var(--warning); opacity: .9; }
.zt-zeile:last-of-type { border-bottom: none; }
.zt-uhr {
  flex: none; min-width: 46px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace;
}
.zt-txt { flex: 1; min-width: 0; color: var(--muted); font-size: 13px; }
.zt-dauer { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Pausen sind zurueckgenommen - sie sind der Zwischenraum, nicht die Arbeit. */
.zt-pause .zt-uhr, .zt-pause .zt-dauer { font-weight: 600; color: var(--faint); }
.zt-pause .zt-txt { color: var(--faint); font-style: italic; }
.zeit-btn { width: 100%; min-height: 56px; font-size: 16px; }
.zeit-out {
  background: rgba(244,106,106,.12); border: 1px solid rgba(244,106,106,.5); color: var(--danger);
}

/* ---- Zeiterfassung: Wochenbilanz + Abwesenheiten --------------------- */
.wo-balken { display: flex; align-items: flex-end; gap: 9px; height: 96px; }
.wo-tag { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wo-tag span { font-size: 11px; font-weight: 600; color: var(--muted); }
.wo-saeule {
  width: 100%; border-radius: 10px;
  background: rgba(138,108,255,.34); border: 1px solid rgba(138,108,255,.4);
}
/* Heute hervorgehoben: die Frage lautet fast immer "wie stehe ich gerade da". */
.wo-tag.heute .wo-saeule {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: transparent; box-shadow: 0 0 16px rgba(138,108,255,.6);
}
.wo-tag.heute span { color: #c4b9ff; font-weight: 750; }

.abw-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border); }
.abw-zeile:last-of-type { border-bottom: none; }
.abw-art {
  flex: none; width: 38px; height: 38px; border-radius: 13px;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: var(--accent-soft); color: var(--accent-2);
}
.abw-txt { flex: 1; min-width: 0; }
.abw-txt b { display: block; font-size: 14px; font-weight: 700; }
.abw-txt span { font-size: 12.5px; color: var(--muted); }
.abw-status { flex: none; font-size: 11.5px; font-weight: 700; }
.abw-status.abw-beantragt { color: var(--warning); }
.abw-status.abw-genehmigt { color: var(--success); }
.abw-status.abw-abgelehnt { color: var(--danger); }
.abw-art.abw-genehmigt { background: rgba(56,211,159,.16); color: var(--success); }
.abw-art.abw-abgelehnt { background: rgba(244,106,106,.16); color: var(--danger); }

/* Bildschirme umschalten */
.screen { display: none; }
.screen.active { display: block; animation: fade .18s ease; }

/* Chat-Tab: Iframe füllt den Bildschirm (Design 1:1 wie die Standalone-App) */
body.chat-on .content { display: flex; padding: 0; overflow: hidden; }
#chatScreen { flex: 1; min-height: 0; }
#chatScreen.active { display: flex; }
#chatFrame { flex: 1; width: 100%; border: 0; display: block; background: var(--bg); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Das Glas ---------------------------------------------------------
   Eine Regel fuer alles, was eine Flaeche traegt. Die Farben kommen aus den
   Token, hier kommt nur die Unschaerfe dazu – ohne sie waere es getoentes
   Grau statt Glas. Neue Bauteile hier eintragen. */
.card, .tour-item, .zeit-card, .fehler-box, .login-card,
.wz-doc, .ttl-box, .foto-box, .sheet, .rcpt, .topbar .back, .icon-btn {
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}

/* ---- Karten ----------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.card h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; }

.section-title {
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin: 22px 2px 10px; text-transform: uppercase; letter-spacing: .6px;
}

/* ---- Tour-Liste ------------------------------------------------------- */
.tour-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); margin-bottom: 12px; overflow: hidden;
  transition: border-color .12s;
}
.tour-row {
  display: flex; align-items: stretch; gap: 14px; padding: 14px;
  cursor: pointer; transition: transform .08s;
}
.tour-row:active { transform: scale(.99); }
.tour-item:active { border-color: var(--accent); }

/* Tages-Fortschritt über der Tour */
.tour-progress { margin: 2px 2px 14px; }
.tour-progress .tp-row {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.tour-progress .tp-bar {
  height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden;
}
.tour-progress .tp-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .3s;
}

/* Direkt-Aktionen je Auftrag (Anrufen / Navigieren) */
.tour-actions {
  display: flex; gap: 8px; padding: 0 14px 12px; border-top: 1px solid var(--border);
  padding-top: 12px; margin-top: 2px;
}
.ta-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 10px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 650; font-family: inherit; cursor: pointer;
}
.ta-btn svg { width: 16px; height: 16px; color: var(--accent); }
.ta-btn:active { transform: scale(.97); background: var(--accent-soft); }
/* Laufende Nummer der Tour (1, 2, 3 …) bzw. Haken bei erledigt */
.tour-no {
  align-self: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px rgba(108,108,245,.4);
}
.tour-item.done { border-color: rgba(56,211,159,.45); }
.tour-item.done .tour-no {
  background: linear-gradient(135deg, #3fd9a4, #1fa97f);
  box-shadow: 0 4px 12px rgba(56,211,159,.4);
}
.tour-item.done .tour-time .hh { color: var(--success); }
.tour-time {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: none; min-width: 58px; padding-right: 14px;
  border-right: 1px solid var(--border);
}
.tour-time .hh { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.tour-time .dur { font-size: 11px; color: var(--faint); margin-top: 2px; }
.tour-main { flex: 1; min-width: 0; }
.tour-main .kd { font-weight: 700; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-main .geraet { color: var(--muted); font-size: 13px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-main .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tour-chev { align-self: center; color: var(--faint); font-size: 20px; flex: none; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--surface-2); color: var(--muted);
}
/* Auftragsart-Symbol in der Tour (wie Web-Ansicht) */
.tour-type { width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; }
.tour-type svg { width: 16px; height: 16px; }
.badge.done { background: rgba(56,211,159,.15); color: var(--success); }
.badge.vnr  { background: var(--accent-soft); color: var(--accent); }

/* Datums-Navigation */
.date-nav {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.date-nav .lbl { flex: 1; text-align: center; font-weight: 700; font-size: 15px; }
.date-nav .lbl span { display: block; color: var(--faint); font-size: 12px; font-weight: 500; }

/* ---- Detail: Infozeilen ---------------------------------------------- */
.info-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-row .lbl { color: var(--muted); font-size: 13px; flex: none; }
.info-row .val { font-weight: 600; text-align: right; word-break: break-word; }
.fehler-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 12px 14px; margin-top: 4px;
  font-size: 14px; line-height: 1.5;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 18px; min-height: 52px;
  border-radius: var(--radius-m); border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text);
  font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.btn:active { transform: scale(.99); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #fff; box-shadow: 0 8px 20px rgba(108,108,245,.35);
}
.btn-success {
  background: linear-gradient(135deg, #3fd9a4, #1fa97f);
  border: none; color: #06210f; box-shadow: 0 8px 20px rgba(56,211,159,.3);
}
.btn-ghost { background: var(--surface); }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.btn-sm { width: auto; min-height: 44px; padding: 11px 16px; font-size: 14px; }

/* ---- Formularfelder --------------------------------------------------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted);
  margin-bottom: 7px; font-weight: 600; }
.field input, .field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 14px; color: var(--text);
  font-size: 16px; outline: none; font-family: inherit;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field textarea { min-height: 80px; resize: vertical; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- Ersatzteil-Liste ------------------------------------------------- */
.part-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.part-row:last-child { border-bottom: none; }
.part-row .pq {
  flex: none; min-width: 44px; text-align: center; font-weight: 800; font-size: 15px;
  color: var(--accent);
}
.part-row .pn { flex: 1; min-width: 0; }
.part-row .pn .nm { font-weight: 600; }
.part-row .pn .an { color: var(--faint); font-size: 12px; }
.part-row .pp { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.part-empty { color: var(--faint); text-align: center; padding: 18px; font-size: 14px; }

/* Bestellt, aber noch nicht geliefert – reine Information, nicht abhakbar. */
.wz-part.unterwegs { color: var(--muted); opacity: .85; }
.wz-part.unterwegs .an { color: var(--faint); font-size: 12px; }

/* Trefferliste der Katalogsuche im Teile-Schritt */
.pt-treffer { margin-top: 4px; }
.pt-hit {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--border);
}
.pt-hit:last-child { border-bottom: none; }
.pt-hit .pn { flex: 1; min-width: 0; }
.pt-hit .pn .nm { font-weight: 600; }
.pt-hit .pn .an { color: var(--faint); font-size: 12px; }
.pt-hit button { flex: none; }

/* ---- Unterschrift ----------------------------------------------------- */
.sig-wrap {
  position: relative; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-m); background: #f7f8fc; overflow: hidden;
}
.sig-wrap canvas { display: block; width: 100%; height: 200px; touch-action: none; }
.sig-hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #aab; font-size: 14px; pointer-events: none;
}
.sig-wrap.signed .sig-hint { display: none; }

/* ---- Login ------------------------------------------------------------ */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; }
.login-brand { display: flex; align-items: center; gap: 12px; justify-content: center;
  margin-bottom: 24px; font-weight: 800; font-size: 22px; }
.login-brand .accent { color: var(--accent); }
.err {
  color: var(--danger); font-size: 13px; margin-top: 12px;
  background: rgba(244,106,106,.1); border: 1px solid rgba(244,106,106,.4);
  border-radius: var(--radius-s); padding: 11px 13px; display: none;
}
.err.show { display: block; }
.hint { color: var(--faint); font-size: 12px; margin-top: 16px; text-align: center; line-height: 1.6; }

/* ---- Zustände (leer / laden) ----------------------------------------- */
.state { text-align: center; padding: 48px 20px; color: var(--faint); }
.state .ico { font-size: 40px; margin-bottom: 12px; }
.state .big { color: var(--text); font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.spinner {
  width: 30px; height: 30px; margin: 0 auto 14px;
  border: 3px solid var(--surface-2); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Toast & Banner --------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
  padding: 13px 20px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s; z-index: 100; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--danger); }

.offline-banner {
  display: none; align-items: center; gap: 8px; justify-content: center;
  background: var(--warning); color: #2a1d00; font-weight: 700; font-size: 13px;
  padding: 8px 14px;
}
.offline-banner.show { display: flex; }

.locked-banner {
  display: flex; align-items: center; gap: 10px;
  background: rgba(56,211,159,.12); border: 1px solid rgba(56,211,159,.4);
  color: var(--success); border-radius: var(--radius-m);
  padding: 13px 15px; font-weight: 600; font-size: 14px; margin-bottom: 14px;
}
.locked-banner.queued {
  background: rgba(247,185,85,.12); border-color: rgba(247,185,85,.45); color: var(--warning);
}

/* Sync-Pille: zeigt ausstehende Offline-Übertragungen */
.sync-pill {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tabbar-h, 64px) + 14px); z-index: 1200;
  display: none; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 12.5px; font-weight: 650;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .2s, transform .2s; cursor: pointer;
}
.sync-pill.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.sync-pill .sp-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--warning);
  animation: sp-pulse 1.3s ease-in-out infinite;
}
@keyframes sp-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* Offline-Hinweis: zwischengespeicherter Stand (Tour/Detail) */
.cache-banner {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-2));
  border: 1px solid var(--warning); color: var(--text);
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
  padding: 9px 12px; border-radius: 10px; margin: 0 0 12px;
}

/* Foto-Thumbnail noch nicht hochgeladen (in Offline-Warteschlange) */
.wz-thumb-wrap { position: relative; display: inline-block; line-height: 0; }
.wz-thumb.queued { border-color: var(--warning); opacity: .85; }
.wz-thumb-q {
  position: absolute; right: -4px; bottom: -4px; font-size: 11px; line-height: 1;
  background: var(--warning); color: #2a1d00; border-radius: 50%; padding: 2px;
}

.install-btn { display: none; }
.install-btn.show { display: grid; }

/* ---- Reparatur-Wizard -------------------------------------------------- */
/* ---- Abschluss-Wizard: Kopf, Pflichtfotos, Fussleiste ----------------
   Vorher: duenner Fortschrittsbalken, eine Zeile "Schritt 3 von 5 · Titel",
   darunter jeder Foto-Slot als Ueberschrift ueber einer leeren Bilderreihe.
   Bei fuenf Pflichtfotos musste man sich aus fuenf leeren Kaesten
   zusammenreimen, woran man ist. Jetzt sagt es die Zeile selbst. */
.wz-kopf { padding: 14px 15px 15px; }
.wz-kopf-z { display: flex; align-items: center; gap: 10px; }
.wz-kopf-t { flex: 1; min-width: 0; }
.wz-kopf-t b { display: block; font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.wz-kopf-t span { display: block; margin-top: 2px; font-size: 12px; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-kopf-n { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.wz-prog { display: flex; gap: 6px; margin: 13px 0 0; }
.wz-dot { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-2); transition: background .2s; }
.wz-dot.done { background: var(--success); }
.wz-dot.on { background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px rgba(138,108,255,.7); }
.wz-q { font-size: 16px; font-weight: 650; margin: 2px 0 14px; }

/* Abschnittsbalken "Pflicht ———— 2 von 3" */
.fo-kopf { display: flex; align-items: center; gap: 9px; margin: 16px 4px 10px; }
.fo-kopf span { font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--faint); }
.fo-kopf i { flex: 1; height: 1px; background: var(--border); }
.fo-kopf b { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.fo-kopf b.voll { color: var(--success); }

.fo-zeile {
  display: flex; align-items: center; gap: 13px;
  padding: 13px; margin-bottom: 10px; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
/* Erledigt faerbt die ganze Zeile - im Augenwinkel erkennbar, ohne zu lesen. */
.fo-zeile.fertig {
  background: linear-gradient(165deg, rgba(56,211,159,.15), rgba(56,211,159,.045));
  border-color: rgba(56,211,159,.34);
}
.fo-bild {
  position: relative; width: 56px; height: 56px; border-radius: 16px; flex: none;
  display: grid; place-items: center; overflow: visible; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.24);
  color: var(--faint); font-size: 21px;
}
.fo-zeile.fertig .fo-bild { border-style: solid; border-color: rgba(255,255,255,.16);
  background: #171d29; overflow: hidden; }
.fo-bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.fo-haken {
  position: absolute; right: -6px; bottom: -6px; width: 22px; height: 22px;
  border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  background: var(--success); color: #0c0e13;
  box-shadow: 0 3px 10px rgba(56,211,159,.55);
}
.fo-zeile.fertig .fo-bild { overflow: visible; }
.fo-zeile.fertig .fo-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fo-mehr {
  position: absolute; left: -5px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 750; color: #fff;
  background: var(--accent); box-shadow: 0 2px 8px rgba(108,108,245,.6);
}
.fo-txt { flex: 1; min-width: 0; }
.fo-txt b { display: block; font-size: 15px; font-weight: 720; }
.fo-pflicht {
  display: inline-block; margin-top: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 750; letter-spacing: .3px; text-transform: uppercase;
  color: var(--warning); background: rgba(247,185,85,.14); border: 1px solid rgba(247,185,85,.32);
}
.fo-ok { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.fo-plus {
  flex: none; width: 44px; height: 44px; border-radius: 15px; cursor: pointer;
  display: grid; place-items: center; font-size: 19px;
  background: rgba(108,108,245,.22); border: 1px solid rgba(138,108,255,.42); color: #c4b9ff;
}
.fo-plus:active { background: rgba(108,108,245,.36); }
.fo-zeile.fertig .fo-plus { background: var(--surface-2); border-color: var(--border); color: var(--muted); }

/* Fussleiste: klebt unten, damit "Weiter" nicht ans Seitenende rutscht. */
/* Knopfleiste und Hinweis kleben als EIN Stueck unten. Einzeln gesetzt
   ueberlappten sie sich - der Hinweis lag halb unter dem Knopf. */
.wz-fuss {
  position: sticky; bottom: calc(10px + env(safe-area-inset-bottom));
  margin-top: 20px; padding-top: 26px; z-index: 6;
}
.wz-fuss::before {
  content: ""; position: absolute; z-index: -1;
  left: -16px; right: -16px; top: 0; bottom: calc(-16px - env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(12,14,19,0), rgba(12,14,19,.72) 42%, rgba(12,14,19,.94));
  pointer-events: none;
}
.wz-nav { display: flex; gap: 10px; }
.wz-nav .btn { flex: 1; min-height: 58px; font-size: 16.5px; }
.wz-nav .wz-abbr { flex: 0 0 38%; font-size: 15px; }
.wz-zurueck {
  flex: none; width: 58px; height: 58px; border-radius: 20px; cursor: pointer;
  display: grid; place-items: center; font-size: 20px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.wz-zurueck:active { background: var(--surface-2); }
/* Der Pfeilsatz kennt nur nach rechts. */
.wz-zurueck i { transform: scaleX(-1); }
.wz-hinweis { text-align: center; font-size: 11.5px; color: var(--muted); padding: 9px 0 0; }

.wz-radio, .wz-check {
  display: flex; align-items: center; gap: 11px; padding: 12px 4px;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 15px;
}
.wz-radio:last-of-type { border-bottom: none; }
.wz-radio input, .wz-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.wz-check { border: none; padding: 10px 0; }

.wz-part { padding: 12px 0; border-bottom: 1px solid var(--border); }
.wz-part:last-child { border-bottom: none; }
.wz-part .an { color: var(--faint); font-size: 12px; font-weight: 500; }
.wz-part-photo {
  margin: 10px 0 2px 31px; padding: 12px; border-radius: var(--radius-s);
  background: var(--surface-2); border: 1px solid var(--border);
}
.wz-badge-cam {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--warning); margin-bottom: 8px;
}
.wz-part-photo .field { margin-bottom: 10px; }
.field select {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-s); padding: 13px; color: var(--text); font-size: 16px;
  outline: none; font-family: inherit;
}
.field select:focus { border-color: var(--accent); }

.wz-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.wz-chip {
  padding: 11px 15px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 600;
  cursor: pointer; user-select: none;
}
.wz-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* Eine Zeile je Slot: Kachel links, Beschriftung daneben. Das Markup bleibt
   (Ueberschrift, dann Bilderreihe) - row-reverse dreht nur die Anzeige, so
   muss keine Render-Funktion angefasst werden. */
.wz-doc {
  padding: 11px 0; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: row-reverse; justify-content: flex-end;
  align-items: center; gap: 13px;
}
.wz-doc-h { margin: 0; flex: 1; min-width: 0; }
/* Freiwillige Bilder: eine Zeile statt eines eigenen Blocks. Es muss nichts
   ausgefuellt werden, also braucht es auch keine Ueberschrift, keine Marke
   und keinen eigenen Kasten - nur einen Platz zum Antippen. */
.wz-add {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 52px; margin-top: 12px; padding: 0 16px;
  border-radius: var(--radius-s);
  background: rgba(255,255,255,.05); border: 1px dashed var(--border-strong);
  color: var(--muted); font-size: 14.5px; font-weight: 650;
  font-family: inherit; cursor: pointer;
}
.wz-add svg { width: 19px; height: 19px; }
.wz-add:active { transform: scale(.99); background: var(--surface-2); color: var(--text); }
.wz-doc:last-of-type { border-bottom: none; }
.wz-doc-h { font-weight: 650; margin-bottom: 10px; }
.wz-doc-h .req { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px; vertical-align: 1px;
  color: #e30613; background: rgba(227,6,19,.12); }
.wz-thumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 4px; }
/* Aufnehmen ist eine Kachel in der Reihe, nicht ein Textknopf darunter:
   aufgenommen und noch-aufzunehmen liegen damit nebeneinander und der
   Schritt wird kuerzer. Gleiche Groesse wie ein Vorschaubild (56). */
.wz-tile {
  width: 56px; height: 56px; flex: none; padding: 0;
  border-radius: var(--radius-s); display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px dashed var(--border-strong);
  color: var(--muted); cursor: pointer; font-family: inherit;
}
.wz-tile svg { width: 22px; height: 22px; }
.wz-tile:active { transform: scale(.96); background: var(--surface-2); color: var(--text); }
.wz-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border-strong); }
.wz-thumb.ok { display: grid; place-items: center; background: rgba(56,211,159,.15); color: var(--success); font-weight: 800; }
.wz-thumb-empty { color: var(--faint); font-size: 13px; }

.sum-sig { margin-top: 12px; }
.sum-sig:first-child { margin-top: 0; }
.sum-sig-lbl { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.sum-sig img { width: 100%; max-height: 120px; object-fit: contain; background: #f7f8fc; border-radius: 10px; }

/* ---- Kartendienst-Auswahl (Bottom-Sheet) ----------------------------- */
/* ====================================================================
   Auftrag-Detail
   Vorher stand hier alles als Etikett-Wert-Raster untereinander - Name,
   Adresse, Geraet, Fehler, alles gleich laut. Der Techniker sucht im Auto
   aber nach drei Dingen: wohin, welches Geraet, was ist kaputt. Also
   traegt jetzt die Schriftgroesse die Rangfolge, und Etikett-Wert bleibt
   den Nebensachen (Rep.-Nr., Garantie).
   ==================================================================== */
.k-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--faint);
}
/* Als Karten-Ueberschrift traegt sie den Abstand, den vorher das h3 hatte. */
.card > .k-lbl { margin-bottom: 10px; }

.d-kopf { display: flex; align-items: center; gap: 10px; }
.d-meta { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }
/* Der Stand als Pille - die einzige farbige Stelle der Karte. */
.d-stand {
  flex: none; padding: 6px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 750; color: var(--warning);
  background: rgba(247,185,85,.13); border: 1px solid rgba(247,185,85,.30);
}
.d-name { margin: 9px 0 3px; font-size: 21px; font-weight: 780; letter-spacing: -.3px; }
.d-adr { font-size: 14.5px; color: var(--muted); line-height: 1.45; }
.d-knr { margin-top: 6px; font-size: 12px; color: var(--faint); }

/* Anrufen und Navigieren nebeneinander: die zwei Dinge, die vor der Tuer
   passieren. Navigation als Symbolknopf, weil das Ziel schon darueber steht. */
.d-aktionen { display: flex; gap: 9px; margin-top: 15px; }
.d-tel {
  flex: 1; min-width: 0; height: 50px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 15px; font-weight: 680; text-decoration: none;
}
.d-tel:active { background: var(--surface); }
.d-tel.leer { color: var(--faint); font-weight: 600; }
.d-nav {
  flex: none; width: 50px; height: 50px; border-radius: 16px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(69,182,245,.15); border: 1px solid rgba(69,182,245,.34);
  color: #45b6f5; font-size: 19px;
}
.d-nav:active { background: rgba(69,182,245,.26); }
.d-karte { margin-top: 10px; font-size: 11.5px; color: var(--faint); text-align: center; }
.d-karte .chg { color: var(--accent); cursor: pointer; font-weight: 600; }

.d-geraet { font-size: 16px; font-weight: 720; }
.d-typ { margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.d-trenn { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--border); }
.mono { font-family: ui-monospace, monospace; letter-spacing: .3px; }
.d-fehler { font-size: 14.5px; line-height: 1.5; color: var(--text); opacity: .9; }

/* Ersatzteile: Haken links, Stand rechts - auf einen Blick, ob das Teil da
   und ob es schon verbaut ist. */
.et-zeile { display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--border); }
.et-zeile:last-child { border-bottom: none; }
.et-mark {
  width: 30px; height: 30px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 15px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--faint);
}
.et-mark.an { background: rgba(56,211,159,.15); border-color: rgba(56,211,159,.38); color: var(--success); }
.et-txt { flex: 1; min-width: 0; }
.et-txt b { display: block; font-size: 14px; font-weight: 680; }
.et-txt span { font-size: 12px; color: var(--muted); }
.et-stand { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.et-stand.an { color: var(--success); }

/* Der Abschluss-Knopf klebt unten am Bild, statt ans Ende der Seite zu
   rutschen - beim Kunden ist er die einzige Handlung, die zaehlt. */
.d-leiste {
  position: sticky; bottom: calc(10px + env(safe-area-inset-bottom));
  margin-top: 18px; padding-top: 26px; z-index: 6;
}
/* Der Inhalt soll unter dem Knopf verschwinden, nicht an ihm abgeschnitten
   werden - sonst sieht es aus wie ein Fehler statt wie eine Schicht. */
.d-leiste::before {
  content: ""; position: absolute; z-index: -1;
  left: -16px; right: -16px; top: 0; bottom: calc(-16px - env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(12,14,19,0), rgba(12,14,19,.72) 42%, rgba(12,14,19,.94));
  pointer-events: none;
}
.d-leiste .btn { min-height: 58px; font-size: 16.5px; }

.nav-pref { font-size: 12px; color: var(--faint); text-align: center; margin: 10px 0 0; }
.nav-pref b { color: var(--muted); }
.nav-pref .chg { color: var(--accent); cursor: pointer; font-weight: 600; }

.sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet {
  width: 100%; max-width: 560px;
  background: var(--surface); border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .24s ease;
  display: flex; flex-direction: column; gap: 10px;
}
.sheet-overlay.open .sheet { transform: none; }
.sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 2px auto 6px; }
.sheet-title { font-weight: 750; font-size: 16px; text-align: center; }
.sheet-sub { font-size: 12px; color: var(--faint); text-align: center; margin: -4px 0 6px; word-break: break-word; }
.sheet .btn { justify-content: center; }
.sheet-remember { display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--muted); font-size: 13px; padding: 4px 0; cursor: pointer; user-select: none; }
.sheet-remember input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---- Foto-Titel (Weitere Bilder / Beschädigungen mit Beschriftung) ---- */
.wz-thumb-wrap { position: relative; display: inline-flex; flex-direction: column;
  align-items: center; gap: 3px; vertical-align: top; line-height: 1; }
.wz-thumb-cap { font-size: 10px; line-height: 1.2; color: var(--muted);
  max-width: 60px; text-align: center; word-break: break-word; }
.wz-opt { font-size: 11px; font-weight: 500; color: var(--faint); }

/* Titel-Dialog beim Hinzufügen eines Bildes */
.ttl-ov { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid;
  place-items: center; z-index: 1000; padding: 20px; }
.ttl-box { width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  padding: 18px; box-shadow: var(--shadow); }
.ttl-h { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.ttl-inp { width: 100%; box-sizing: border-box; background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-s);
  color: var(--text); padding: 12px 14px; font: inherit; font-size: 15px; outline: none; }
.ttl-inp:focus { border-color: var(--accent); }
.ttl-acts { display: flex; gap: 10px; margin-top: 16px; }
.ttl-acts .btn { flex: 1; }

/* Foto-Vorschau (ansehen / löschen / neu aufnehmen) */
.wz-thumb-wrap.fx-open { cursor: pointer; }
.foto-ov { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: grid;
  place-items: center; z-index: 1100; padding: 18px; }
.foto-box { width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  padding: 14px; box-shadow: var(--shadow); }
.foto-img { border-radius: var(--radius-s); overflow: hidden; background: #000;
  display: grid; place-items: center; min-height: 180px; max-height: 60vh; }
.foto-img img { max-width: 100%; max-height: 60vh; display: block; object-fit: contain; }
.foto-none { color: var(--faint); font-size: 14px; padding: 40px 0; }
.foto-title { font-size: 14px; font-weight: 650; margin: 12px 2px 4px; }
.foto-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.foto-del { background: rgba(244,106,106,.14); color: var(--danger); border-color: transparent; }

/* Fahrzeit-Verbinder zwischen zwei Tour-Stopps (aus der geplanten Lücke) */
.tour-fahrt {
  display: flex; justify-content: center; margin: -4px 0 6px;
}
.tour-fahrt span {
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 12px;
}

/* ===== Diktat im Abschluss ===== */
.dik { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dik .btn.rec { border-color: var(--danger); color: var(--danger); }
.dik-hint { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 160px; }
.dik-text {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5; margin-bottom: 12px;
}
.dik-info {
  margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--muted);
  background: var(--surface-2); border-radius: 10px; padding: 10px 12px;
}

/* Einsatz-Uhr: gestoppte Zeit vor Ort (Grundlage der gelernten Einsatzdauer) */
.einsatz-uhr .info-row { border-bottom: none; padding-bottom: 4px; }
.einsatz-uhr .btn { width: 100%; margin-top: 4px; }

/* ---- Icons statt Emojis ---------------------------------------------------
   Emojis sehen je Betriebssystem anders aus, lassen sich nicht einfaerben und
   springen in der Zeilenhoehe. Diese Icons sind Masken: `currentColor` faerbt
   sie wie den umgebenden Text, und `1em` haelt sie in der Schriftgroesse.

   Eingesetzt werden sie als <i class=ic-name></i> — ohne Anfuehrungszeichen im
   Attribut. Das ist Absicht: die Emojis standen in Zeichenketten aller Art
   (einfach, doppelt, Backticks), und ein Markup mit eigenen Anfuehrungszeichen
   haette die umgebende Zeichenkette zerrissen.
   -------------------------------------------------------------------------- */
[class^="ic-"], [class*=" ic-"] {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em;
  background-color: currentColor; flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.ic-auge{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207-10-7-10-7z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012s4-7%2010-7%2010%207%2010%207-4%207-10%207-10-7-10-7z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E'); }
.ic-ausweis{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M14%2010h5M14%2014h3%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M14%2010h5M14%2014h3%22%2F%3E%3C%2Fsvg%3E'); }
.ic-auto{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013l2-6h14l2%206v5h-3M6%2018H3v-5M6%2018a2%202%200%201%200%204%200M14%2018a2%202%200%201%200%204%200M3%2013h18%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2013l2-6h14l2%206v5h-3M6%2018H3v-5M6%2018a2%202%200%201%200%204%200M14%2018a2%202%200%201%200%204%200M3%2013h18%22%2F%3E%3C%2Fsvg%3E'); }
.ic-bau{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020h20M6%2020V10l6-4%206%204v10%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020h20M6%2020V10l6-4%206%204v10%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%2F%3E%3C%2Fsvg%3E'); }
.ic-beleg{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h14v18l-3-2-2%202-2-2-2%202-3-2z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h4%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h14v18l-3-2-2%202-2-2-2%202-3-2z%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h4%22%2F%3E%3C%2Fsvg%3E'); }
.ic-bild{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m5%2018%205-5%204%204%203-3%203%203%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m5%2018%205-5%204%204%203-3%203%203%22%2F%3E%3C%2Fsvg%3E'); }
.ic-blitz{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%204%2014h6l-1%208%209-12h-6z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13%202%204%2014h6l-1%208%209-12h-6z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-buch{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7a2%202%200%200%201%202%202v14H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M20%204h-7v16h5a2%202%200%200%200%202-2z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h7a2%202%200%200%201%202%202v14H6a2%202%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22M20%204h-7v16h5a2%202%200%200%200%202-2z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-datei{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h9l5%205v15H6z%22%2F%3E%3Cpath%20d%3D%22M15%202v5h5%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h9l5%205v15H6z%22%2F%3E%3Cpath%20d%3D%22M15%202v5h5%22%2F%3E%3C%2Fsvg%3E'); }
.ic-daumen{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2011v9H4v-9zM7%2011l4-8a2%202%200%200%201%203%202v6h4a2%202%200%200%201%202%202.4l-1.3%206A2%202%200%200%201%2016.7%2020H7%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2011v9H4v-9zM7%2011l4-8a2%202%200%200%201%203%202v6h4a2%202%200%200%201%202%202.4l-1.3%206A2%202%200%200%201%2016.7%2020H7%22%2F%3E%3C%2Fsvg%3E'); }
.ic-diagramm{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22m7%2015%203-3%203%202%204-5%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22%2F%3E%3Cpath%20d%3D%22m7%2015%203-3%203%202%204-5%22%2F%3E%3C%2Fsvg%3E'); }
.ic-drucken{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%208V3h10v5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2016h10v5H7z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%208V3h10v5%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%228%22%20width%3D%2216%22%20height%3D%228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2016h10v5H7z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-fahne{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4h9l-1%203h6l-1%204%201%204H5%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4h9l-1%203h6l-1%204%201%204H5%22%2F%3E%3C%2Fsvg%3E'); }
.ic-firma{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V6l8-3v18M12%2021h8V10l-8-4%22%2F%3E%3Cpath%20d%3D%22M8%209h1M8%2013h1M8%2017h1M16%2012h1M16%2016h1%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2021V6l8-3v18M12%2021h8V10l-8-4%22%2F%3E%3Cpath%20d%3D%22M8%209h1M8%2013h1M8%2017h1M16%2012h1M16%2016h1%22%2F%3E%3C%2Fsvg%3E'); }
.ic-glueh{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%201%203%2011v3H9v-3a6%206%200%200%201%203-11z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6M10%2021h4%22%2F%3E%3Cpath%20d%3D%22M12%203a6%206%200%200%201%203%2011v3H9v-3a6%206%200%200%201%203-11z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-gruppe{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2%2020c0-3.5%203-5.5%207-5.5s7%202%207%205.5%22%2F%3E%3Cpath%20d%3D%22M17%208.5a3%203%200%201%200%200%205M22%2020c0-2.5-1.8-4-4.5-4.3%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228%22%20r%3D%223.5%22%2F%3E%3Cpath%20d%3D%22M2%2020c0-3.5%203-5.5%207-5.5s7%202%207%205.5%22%2F%3E%3Cpath%20d%3D%22M17%208.5a3%203%200%201%200%200%205M22%2020c0-2.5-1.8-4-4.5-4.3%22%2F%3E%3C%2Fsvg%3E'); }
.ic-haken{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2013%204%204L19%207%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2013%204%204L19%207%22%2F%3E%3C%2Fsvg%3E'); }
.ic-haus{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011%2012%203l9%208%22%2F%3E%3Cpath%20d%3D%22M5%2010v11h14V10%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011%2012%203l9%208%22%2F%3E%3Cpath%20d%3D%22M5%2010v11h14V10%22%2F%3E%3C%2Fsvg%3E'); }
.ic-kaffee{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010h1a3%203%200%200%201%200%206h-1%22%2F%3E%3Cpath%20d%3D%22M3%2010h14v7a4%204%200%200%201-4%204H7a4%204%200%200%201-4-4z%22%2F%3E%3Cpath%20d%3D%22M7%203v3M11%202v4M15%203v3%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17%2010h1a3%203%200%200%201%200%206h-1%22%2F%3E%3Cpath%20d%3D%22M3%2010h14v7a4%204%200%200%201-4%204H7a4%204%200%200%201-4-4z%22%2F%3E%3Cpath%20d%3D%22M7%203v3M11%202v4M15%203v3%22%2F%3E%3C%2Fsvg%3E'); }
.ic-kalender{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4M16%203v4M3%2011h18%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4M16%203v4M3%2011h18%22%2F%3E%3C%2Fsvg%3E'); }
.ic-karte{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202%202%205v17l7-3%206%203%207-3V2l-7%203z%22%2F%3E%3Cpath%20d%3D%22M9%202v17M15%205v17%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202%202%205v17l7-3%206%203%207-3V2l-7%203z%22%2F%3E%3Cpath%20d%3D%22M9%202v17M15%205v17%22%2F%3E%3C%2Fsvg%3E'); }
.ic-klammer{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012.3%2012.6%2020.7a5%205%200%200%201-7-7l8.5-8.5a3.5%203.5%200%201%201%205%205l-8.5%208.4a2%202%200%201%201-3-3l7.8-7.7%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012.3%2012.6%2020.7a5%205%200%200%201-7-7l8.5-8.5a3.5%203.5%200%201%201%205%205l-8.5%208.4a2%202%200%201%201-3-3l7.8-7.7%22%2F%3E%3C%2Fsvg%3E'); }
.ic-kreuz{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%206l12%2012M18%206%206%2018%22%2F%3E%3C%2Fsvg%3E'); }
.ic-liste{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13M3%206h.01M3%2012h.01M3%2018h.01%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13M3%206h.01M3%2012h.01M3%2018h.01%22%2F%3E%3C%2Fsvg%3E'); }
.ic-lupe{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m21%2021-4-4%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cpath%20d%3D%22m21%2021-4-4%22%2F%3E%3C%2Fsvg%3E'); }
.ic-mail{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m2%207%2010%206%2010-6%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m2%207%2010%206%2010-6%22%2F%3E%3C%2Fsvg%3E'); }
.ic-marker{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s7-7.6%207-12a7%207%200%201%200-14%200c0%204.4%207%2012%207%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s7-7.6%207-12a7%207%200%201%200-14%200c0%204.4%207%2012%207%2012z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E'); }
.ic-mikrofon{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2014%200M12%2018v3%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%226%22%20height%3D%2211%22%20rx%3D%223%22%2F%3E%3Cpath%20d%3D%22M5%2011a7%207%200%200%200%2014%200M12%2018v3%22%2F%3E%3C%2Fsvg%3E'); }
.ic-mond{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2013a8%208%200%201%201-10-10%207%207%200%200%200%2010%2010z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2013a8%208%200%201%201-10-10%207%207%200%200%200%2010%2010z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-muell{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4h8v2M6%206l1%2014h10l1-14%22%2F%3E%3Cpath%20d%3D%22M10%2011v5M14%2011v5%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4h8v2M6%206l1%2014h10l1-14%22%2F%3E%3Cpath%20d%3D%22M10%2011v5M14%2011v5%22%2F%3E%3C%2Fsvg%3E'); }
.ic-notiz{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22%2F%3E%3Cpath%20d%3D%22M8%209h8M8%2013h6%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22%2F%3E%3Cpath%20d%3D%22M8%209h8M8%2013h6%22%2F%3E%3C%2Fsvg%3E'); }
.ic-ordner{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h6l2%202h10v10H3z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h6l2%202h10v10H3z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-paket{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h18v13H3zM3%207l3-4h12l3%204M9%2011h6%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207h18v13H3zM3%207l3-4h12l3%204M9%2011h6%22%2F%3E%3C%2Fsvg%3E'); }
.ic-palme{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M12%2021V9%22%2F%3E%3Cpath%20d%3D%22M12%209c0-3%203-5%206-4-2-2-6-2-8%201%22%2F%3E%3Cpath%20d%3D%22M12%209c0-3-3-5-6-4%202-2%206-2%208%201%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021h18M12%2021V9%22%2F%3E%3Cpath%20d%3D%22M12%209c0-3%203-5%206-4-2-2-6-2-8%201%22%2F%3E%3Cpath%20d%3D%22M12%209c0-3-3-5-6-4%202-2%206-2%208%201%22%2F%3E%3C%2Fsvg%3E'); }
.ic-person{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-6%208-6s8%202%208%206%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4%203.6-6%208-6s8%202%208%206%22%2F%3E%3C%2Fsvg%3E'); }
.ic-pfeil{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E'); }
.ic-plus{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E'); }
.ic-probe{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6M10%202v7l-4%208a3%203%200%200%200%203%204h6a3%203%200%200%200%203-4l-4-8V2%22%2F%3E%3Cpath%20d%3D%22M7%2015h10%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6M10%202v7l-4%208a3%203%200%200%200%203%204h6a3%203%200%200%200%203-4l-4-8V2%22%2F%3E%3Cpath%20d%3D%22M7%2015h10%22%2F%3E%3C%2Fsvg%3E'); }
.ic-sand{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h12M6%2022h12%22%2F%3E%3Cpath%20d%3D%22M8%202v4l4%204%204-4V2M8%2022v-4l4-4%204%204v4%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202h12M6%2022h12%22%2F%3E%3Cpath%20d%3D%22M8%202v4l4%204%204-4V2M8%2022v-4l4-4%204%204v4%22%2F%3E%3C%2Fsvg%3E'); }
.ic-schild{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%204%206v6c0%205%203.5%208%208%209%204.5-1%208-4%208-9V6z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%204%206v6c0%205%203.5%208%208%209%204.5-1%208-4%208-9V6z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-schloss{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%2216%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%2216%22%20height%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3%22%2F%3E%3C%2Fsvg%3E'); }
.ic-schraube{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200%205%205l-9.4%209.4a2.1%202.1%200%200%201-3-3l9.4-9.4a4%204%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22m14.7%206.3%203.3-3.3%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a4%204%200%200%200%205%205l-9.4%209.4a2.1%202.1%200%200%201-3-3l9.4-9.4a4%204%200%200%201-2-2z%22%2F%3E%3Cpath%20d%3D%22m14.7%206.3%203.3-3.3%22%2F%3E%3C%2Fsvg%3E'); }
.ic-senden{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%2016-8-7%2016-2-6z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m4%2012%2016-8-7%2016-2-6z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-sonne{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M2%2012h2M20%2012h2M5%205l1.5%201.5M17.5%2017.5%2019%2019M19%205l-1.5%201.5M6.5%2017.5%205%2019%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2M12%2020v2M2%2012h2M20%2012h2M5%205l1.5%201.5M17.5%2017.5%2019%2019M19%205l-1.5%201.5M6.5%2017.5%205%2019%22%2F%3E%3C%2Fsvg%3E'); }
.ic-sprech{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%205h16v11H9l-5%204z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-stern{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.8%205.7%206.2.9-4.5%204.4%201%206.2-5.5-2.9L6.5%2020l1-6.2L3%209.4l6.2-.9z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.8%205.7%206.2.9-4.5%204.4%201%206.2-5.5-2.9L6.5%2020l1-6.2L3%209.4l6.2-.9z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-stift{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-telefon{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2012l5%202v4a2%202%200%200%201-2.3%202A17%2017%200%200%201%203%205.3%202%202%200%200%201%205%203z%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%203h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2012l5%202v4a2%202%200%200%201-2.3%202A17%2017%200%200%201%203%205.3%202%202%200%200%201%205%203z%22%2F%3E%3C%2Fsvg%3E'); }
.ic-uhr{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3.5%202%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3.5%202%22%2F%3E%3C%2Fsvg%3E'); }
.ic-warnung{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%202%2020h20z%22%2F%3E%3Cpath%20d%3D%22M12%209v5M12%2017h.01%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203%202%2020h20z%22%2F%3E%3Cpath%20d%3D%22M12%209v5M12%2017h.01%22%2F%3E%3C%2Fsvg%3E'); }
.ic-wuerfel{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2215.5%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%223%22%2F%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2215.5%22%20cy%3D%2215.5%22%20r%3D%221.2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%221.2%22%2F%3E%3C%2Fsvg%3E'); }
.ic-zahnrad{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M5%205l2%202M17%2017l2%202M19%205l-2%202M7%2017l-2%202%22%2F%3E%3C%2Fsvg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M12%202v3M12%2019v3M2%2012h3M19%2012h3M5%205l2%202M17%2017l2%202M19%205l-2%202M7%2017l-2%202%22%2F%3E%3C%2Fsvg%3E'); }

.ttl-s { font-size: 12.5px; color: var(--faint); margin: -8px 0 12px; }
.ttl-err { font-size: 12.5px; color: var(--danger); margin-top: 7px; display: none; }
.ttl-err.on { display: block; }

/* ---- Bildquelle wählen: Kamera oder Galerie --------------------------
   Nutzt die Sheet-Hülle der Navi-Auswahl (.sheet-overlay/.sheet); hier
   stehen nur die Zeilen mit Symbol + Erklärtext. */
.src-opt { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius-m); padding: 14px;
  color: var(--text); font: inherit; cursor: pointer; }
.src-opt:active { border-color: var(--accent); background: var(--accent-soft); }
.src-ic { width: 42px; height: 42px; border-radius: 12px; display: grid;
  place-items: center; flex: none; }
.src-ic svg { width: 21px; height: 21px; }
.src-ic.kamera { background: var(--accent-soft); color: var(--accent-2); }
.src-ic.galerie { background: rgba(69,182,245,.15); color: var(--info); }
.src-tx { min-width: 0; }
.src-t { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.src-d { display: block; font-size: 12px; color: var(--faint); }

/* ---- Mail-Empfänger im Abschluss (Bericht per E-Mail) ----------------- */
.mail-lead { font-size: 12.5px; color: var(--muted); margin: -4px 0 12px; }
.rcpt { display: flex; align-items: center; gap: 11px; background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m);
  padding: 11px 12px; margin-bottom: 9px; }
.rcpt.fix { border-color: rgba(56,211,159,.35); background: rgba(56,211,159,.07); }
.rcpt.miss { border-color: rgba(247,185,85,.35); background: rgba(247,185,85,.07); }
.r-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  flex: none; font-size: 14px; background: var(--surface); color: var(--muted); }
.rcpt.fix .r-ic { background: rgba(56,211,159,.16); color: var(--success); }
.rcpt.miss .r-ic { background: rgba(247,185,85,.16); color: var(--warning); }
.r-txt { flex: 1; min-width: 0; }
.r-mail { display: block; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-lbl { display: block; font-size: 11px; color: var(--faint); }
.r-del { width: 36px; height: 36px; border-radius: 9px; flex: none; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--muted); font-size: 17px; line-height: 1; }
.r-del:active { color: var(--danger); border-color: var(--danger); }
.add-mail { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: transparent; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-m); padding: 12px; cursor: pointer;
  color: var(--accent-2); font: inherit; font-weight: 600; font-size: 13.5px; }
.add-mail:active { border-color: var(--accent); background: var(--accent-soft); }
.add-plus { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft);
  display: grid; place-items: center; font-size: 15px; line-height: 1; }

/* Empfängerliste in der Abschluss-Zusammenfassung */
.sent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px;
  color: var(--muted); padding: 9px 0; border-top: 1px solid var(--border); }
.sent:first-of-type { border-top: 0; padding-top: 0; }
.sent b { color: var(--text); font-weight: 600; word-break: break-all; }
.sent .sm { color: var(--faint); font-size: 11.5px; }

/* ---- Update-Hinweis / Update-Bestaetigung ---------------------------------
   Liegt ueber der Sync-Pille, damit sich beide nicht ueberdecken. */
.upd-pill {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tabbar-h, 64px) + 60px); z-index: 1201;
  display: none; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  background: var(--surface-2); border: 1px solid var(--accent);
  color: var(--text); font-size: 12.5px; font-weight: 650;
  padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .2s, transform .2s; cursor: pointer;
}
.upd-pill.show { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
.upd-pill .upd-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent);
  animation: sp-pulse 1.3s ease-in-out infinite;
}
.upd-pill.ok { border-color: var(--success); }
.upd-pill .upd-check { color: var(--success); font-weight: 700; flex: none; }