/* TAGWERK — Stylesheet (aus app.html ausgelagert, v0.38.0) */
/* ===== Werkbank 2.0 Komponenten (wb-*) — für das Redesign ===== */
/* ============================================================
   TAGWERK — CD/CI „WERKBANK" · Version 2.0 · September 2026
   Ein Import, alle Bausteine. Nachfolger von werkbank.css 1.0.
   Neu in 2.0: Aktions-Hierarchie (Primär/Flach/Text), Navigation,
   Listenzeile, Sektionskopf, Menü, KI-Notiz. Regeln unten.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Farben — komplette Palette. Keine weiteren Farben erfinden. */
  --wb-creme:  #f4efe3;   /* Grundfläche */
  --wb-tinte:  #191510;   /* Text, Rahmen, neutrale Füllung */
  --wb-orange: #d94f16;   /* EINZIGE Akzentfarbe: Handlung & Achtung */
  --wb-weiss:  #ffffff;   /* Panels, Leseflächen */
  --wb-grau:   #4f463a;   /* Sekundärtext */
  --wb-raster: #efe8d8;   /* zweiter Streifen der Automatik-Schraffur */
  --wb-linie:  rgba(var(--wb-ink-rgb), .14);  /* Haarlinie in Listen (NEU 2.0) */
  --wb-hover:  rgba(var(--wb-ink-rgb), .05);  /* Zeilen-/Item-Hover (NEU 2.0) */
  --wb-mark:   rgba(217, 79, 22, .10); /* aktive Auswahl in Listen (NEU 2.0) */
  --wb-orange-tief: #a53a0f;           /* Orange für Text in Lesegröße (Kontrast 4.5:1) */

  /* Schrift */
  --wb-font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --wb-font-text:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* Typo-Stufen (NEU 2.0 — verbindlich) */
  --wb-t-display: 58px;  /* Zero-State, Poster-Aussage */
  --wb-t-h1:      30px;  /* Seitentitel */
  --wb-t-h2:      19px;  /* Sektionstitel */
  --wb-t-h3:      15px;  /* Zeilentitel, Werte */
  --wb-t-text:    14px;  /* Lesetext, Listen */
  --wb-t-small:   12.5px;/* Meta, Hilfstext */
  --wb-t-label:   11px;  /* Label, Versalien */

  /* Linien & Schatten — Radius ist IMMER 0 */
  --wb-border:        2px solid var(--wb-tinte);
  --wb-shadow-panel:  5px 5px 0 var(--wb-tinte);
  --wb-shadow-btn:    3px 3px 0 var(--wb-tinte);
  --wb-shadow-hero:   6px 6px 0 var(--wb-tinte);

  /* Abstände (4er-Raster) */
  --wb-s1: 4px;  --wb-s2: 8px;  --wb-s3: 12px;
  --wb-s4: 16px; --wb-s5: 20px; --wb-s6: 28px;

  --wb-touch-min: 44px;   /* Mindesthöhe für alles Antippbare */
  --wb-page-max: 1180px;  /* Inhaltsbreite; Fokus-Screen 1060px */
}

/* ---------- 1b. DUNKELMODUS (v0.38.0, CR-036c) — Tokens getauscht, Layout unverändert ---------- */
:root[data-theme="dark"] { color-scheme: dark;
  --wb-creme: #1c1915; --wb-tinte: #f1ebdd; --wb-weiss: #27221c; --wb-grau: #bdb2a0; --wb-raster: #231f1a;
  --wb-linie: rgba(241,235,221,.16); --wb-hover: rgba(241,235,221,.07); --wb-mark: rgba(217,79,22,.22); --wb-orange-tief: #ff7a3d;
  --wb-ink-rgb: 241,235,221; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark;
  --wb-creme: #1c1915; --wb-tinte: #f1ebdd; --wb-weiss: #27221c; --wb-grau: #bdb2a0; --wb-raster: #231f1a;
  --wb-linie: rgba(241,235,221,.16); --wb-hover: rgba(241,235,221,.07); --wb-mark: rgba(217,79,22,.22); --wb-orange-tief: #ff7a3d;
  --wb-ink-rgb: 241,235,221; } }
:root { --wb-ink-rgb: 25,21,16; }
html, body { background: var(--wb-creme); color: var(--wb-tinte); }
input, textarea, select { color-scheme: inherit; }

/* ---------- 2. BASIS ---------- */
.wb-page {
  background: var(--wb-creme);
  color: var(--wb-tinte);
  font-family: var(--wb-font-text);
  font-weight: 500;
  margin: 0;
}
.wb-display    { font-family: var(--wb-font-display); font-size: var(--wb-t-display); line-height: 1.02; }
.wb-h1         { font-family: var(--wb-font-display); font-size: var(--wb-t-h1); line-height: 1.06; }
.wb-h2         { font-family: var(--wb-font-display); font-size: var(--wb-t-h2); line-height: 1.15; }
.wb-h3         { font-family: var(--wb-font-display); font-size: var(--wb-t-h3); line-height: 1.2; }
.wb-text       { font-size: var(--wb-t-text); font-weight: 500; line-height: 1.55; }
.wb-text-muted { color: var(--wb-grau); }
.wb-small      { font-size: var(--wb-t-small); color: var(--wb-grau); line-height: 1.5; }
.wb-label      { font-size: var(--wb-t-label); font-weight: 700; letter-spacing: .08em; color: var(--wb-grau); text-transform: uppercase; }
.wb-read       { background: var(--wb-weiss); border: var(--wb-border); padding: 18px 20px; white-space: pre-line; font-size: 14.5px; line-height: 1.65; } /* Entwurfs-Lesefläche (NEU 2.0) */

/* ---------- 3. FLÄCHEN ---------- */
.wb-panel           { background: var(--wb-weiss); border: var(--wb-border); box-shadow: var(--wb-shadow-panel); }
.wb-panel--flat     { box-shadow: none; }                  /* Standard für alles Sekundäre */
.wb-panel--hero     { box-shadow: var(--wb-shadow-hero); } /* NUR das Fokus-Panel des Screens */
.wb-panel--inset    { background: var(--wb-creme); border: var(--wb-border); box-shadow: none; }
.wb-stripes         { background: repeating-linear-gradient(-45deg, var(--wb-weiss) 0 8px, var(--wb-raster) 8px 16px); border: var(--wb-border); }

/* KI-Notiz: Begründung, Bericht, Empfehlung (NEU 2.0) */
.wb-note { border-left: 6px solid var(--wb-orange); padding: 2px 0 2px 18px; }
.wb-note--panel { background: var(--wb-weiss); border: var(--wb-border); border-left: 6px solid var(--wb-orange); padding: 18px 20px; box-shadow: none; }

/* ---------- 4. AKTIONEN — die Hierarchie ist Pflicht (NEU 2.0) ----------
   Stufe 1  .wb-btn--primary  orange, Stempelschatten  → genau EINE pro Zone
   Stufe 2  .wb-btn--flat     Rahmen, kein Schatten    → 1–2 pro Zone
   Stufe 3  .wb-action        unterstrichener Text     → beliebig, leise
   Stufe 4  .wb-menu          alles Seltene/Gefährliche im „···"-Menü
------------------------------------------------------------ */
.wb-btn {
  font-family: var(--wb-font-display); font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  min-height: 48px; padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: var(--wb-border); box-shadow: var(--wb-shadow-btn);
  background: var(--wb-weiss); color: var(--wb-tinte); cursor: pointer; user-select: none;
}
.wb-btn--primary { background: var(--wb-orange); color: var(--wb-weiss); }
.wb-btn--dark    { background: var(--wb-tinte);  color: var(--wb-creme); }
.wb-btn--flat    { box-shadow: none; }
.wb-btn--small   { min-height: var(--wb-touch-min); font-size: 12.5px; padding: 0 14px; }
.wb-btn:hover    { filter: brightness(.96); }
.wb-btn:active   { transform: translate(3px, 3px); box-shadow: none; }
.wb-btn[disabled]{ opacity: .45; cursor: not-allowed; }

.wb-action {
  font-size: var(--wb-t-small); font-weight: 700;
  color: var(--wb-grau); background: none; border: none; padding: 0 0 1px;
  border-bottom: 2px solid var(--wb-tinte); cursor: pointer;
}
.wb-action:hover  { color: var(--wb-tinte); }
.wb-action--danger{ color: var(--wb-orange); border-bottom-color: var(--wb-orange); }

/* Überlauf-Menü */
.wb-menu { position: absolute; right: 0; top: 52px; z-index: 20; min-width: 240px; display: flex; flex-direction: column;
           background: var(--wb-weiss); border: var(--wb-border); box-shadow: var(--wb-shadow-panel); }
.wb-menu__item { text-align: left; padding: 11px 14px; background: none; border: none; border-bottom: 1px solid var(--wb-linie);
                 font-size: var(--wb-t-text); font-weight: 500; cursor: pointer; }
.wb-menu__item:hover { background: var(--wb-creme); }
.wb-menu__item--danger { color: #a53a0f; font-weight: 700; } /* tiefere Stufe des Orange: 4.5:1 auf Weiß */

/* Fokus immer sichtbar */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--wb-orange); outline-offset: 2px;
}

/* ---------- 5. NAVIGATION (NEU 2.0) ---------- */
.wb-nav { display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 0 24px;
          border-bottom: var(--wb-border); background: var(--wb-creme); position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; }
.wb-nav__items { display: flex; gap: 2px; flex: none; }
.wb-nav__item  { border: none; background: transparent; color: var(--wb-tinte);
                 font-size: var(--wb-t-small); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
                 padding: 8px 13px; cursor: pointer; white-space: nowrap; }
.wb-nav__item:hover      { background: rgba(var(--wb-ink-rgb),.07); }
.wb-nav__item.is-active  { background: var(--wb-tinte); color: var(--wb-creme); }
.wb-logo   { background: var(--wb-tinte); color: var(--wb-creme); font-family: var(--wb-font-display); font-size: 14px; padding: 6px 10px; letter-spacing: .04em; display: inline-block; flex: none; }
.wb-avatar { width: 34px; height: 32px; border: var(--wb-border); background: var(--wb-orange); color: var(--wb-weiss);
             display: inline-flex; align-items: center; justify-content: center; font-family: var(--wb-font-display); font-size: 11px; flex: none; }

/* Tab-/Segment-Gruppe (Filter, Zeiträume, Stufen) */
.wb-tabs { display: flex; flex-wrap: wrap; }
.wb-tab  { border: var(--wb-border); background: var(--wb-weiss); color: var(--wb-tinte);
           font-size: var(--wb-t-small); font-weight: 700; padding: 7px 14px; cursor: pointer; text-transform: uppercase; }
.wb-tab + .wb-tab { border-left: none; }
.wb-tab:hover     { background: var(--wb-creme); }
.wb-tab.is-active { background: var(--wb-tinte); color: var(--wb-creme); }

/* ---------- 6. LISTEN & SEKTIONEN (NEU 2.0) ----------
   Listen sind Zeilen mit Haarlinie — keine Karten, keine Rahmen je Zeile.
   Die ganze Zeile ist der Klick; max. 1 flacher Button + 2 Textaktionen rechts.
------------------------------------------------------------ */
.wb-list       { border-top: var(--wb-border); }
.wb-list__head { display: grid; gap: 12px; padding: 9px 4px; border-bottom: var(--wb-border); }
.wb-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 4px; background: none; border: none; border-bottom: 1px solid var(--wb-linie);
  cursor: pointer; text-align: left; font-size: var(--wb-t-text); color: var(--wb-tinte);
}
.wb-row:hover       { background: var(--wb-hover); }
.wb-row.is-active   { background: var(--wb-mark); }
.wb-row__title      { font-weight: 700; }
.wb-row__grow       { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wb-section       { border-top: var(--wb-border); }
.wb-section__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px;
                    background: none; border: none; cursor: pointer; text-align: left; }
.wb-section__head:hover { background: var(--wb-hover); }
.wb-section__body { padding: 0 4px 20px; }

/* ---------- 7. TAGS (Stempel) ---------- */
.wb-tag {
  font-family: var(--wb-font-display); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 8px; display: inline-block; white-space: nowrap;
  background: var(--wb-tinte); color: var(--wb-creme);
}
.wb-tag--accent  { background: var(--wb-orange); color: var(--wb-weiss); }  /* DRINGEND, OFFEN, RISIKO */
.wb-tag--outline { background: var(--wb-weiss); color: var(--wb-tinte); border: var(--wb-border); padding: 2px 8px; } /* PRÜFEN, ENTWURF */

/* ---------- 8. ZAHLEN ---------- */
/* Leitzahl: die 2–4 wichtigsten Zahlen eines Screens, ohne Kasten (NEU 2.0) */
.wb-figure        { background: none; border: none; padding: 0; text-align: left; cursor: pointer; min-width: 150px; }
.wb-figure:hover  { opacity: .62; }
.wb-figure__value { font-family: var(--wb-font-display); font-size: 40px; line-height: 1; }
.wb-figure__label { font-size: var(--wb-t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wb-grau); margin-top: 4px; }
.wb-figure__note  { font-size: 12px; color: var(--wb-grau); margin-top: 2px; }

/* Kachel: nur für Nebenzahlen, max. 4 pro Reihe, immer umflossen */
.wb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(174px, 1fr)); gap: 12px; }
.wb-tile  { background: var(--wb-weiss); border: var(--wb-border); padding: 10px 12px; }
.wb-tile--accent { background: var(--wb-orange); color: var(--wb-weiss); }
.wb-tile__row    { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wb-tile__value  { font-family: var(--wb-font-display); font-size: 18px; }
.wb-tile__delta  { font-size: 10.5px; font-weight: 700; }
.wb-tile__delta--warn { color: var(--wb-orange); }                 /* nur auf hellen Kacheln */
.wb-tile__label  { font-size: 10.5px; font-weight: 700; color: var(--wb-grau); margin-top: 2px; text-transform: uppercase; }
.wb-tile--accent .wb-tile__label,
.wb-tile--accent .wb-tile__delta { color: var(--wb-weiss); }        /* nie Orange auf Orange */

/* Balken */
.wb-bar        { height: 18px; border: var(--wb-border); background: var(--wb-creme); position: relative; }
.wb-bar__fill  { position: absolute; inset: 0; right: auto; background: var(--wb-orange); }
.wb-bar__fill--ink { background: var(--wb-tinte); }
.wb-bar__mark  { position: absolute; top: -3px; bottom: -3px; border-left: 3px dashed var(--wb-tinte); }
/* Fortschritt im Kopf: dünn, ohne Zahlenlast */
.wb-progress   { height: 6px; border: var(--wb-border); background: var(--wb-raster); }
.wb-progress__fill { height: 100%; background: var(--wb-orange); }

/* ---------- 9. FORMULARE ---------- */
.wb-input, .wb-select, .wb-textarea {
  border: var(--wb-border); background: var(--wb-weiss); color: var(--wb-tinte);
  font-family: var(--wb-font-text); font-size: var(--wb-t-text); line-height: 1.55; padding: 11px 12px; width: 100%;
}
.wb-select { min-height: 40px; font-weight: 600; padding: 8px 10px; width: auto; }
.wb-textarea { resize: vertical; }

/* ---------- 10. LAYOUT-HELFER ---------- */
.wb-shell   { max-width: var(--wb-page-max); margin: 0 auto; padding: 30px 24px 0; }
.wb-shell--focus { max-width: 1060px; }
.wb-row-flex{ display: flex; gap: 12px; align-items: center; }
.wb-stack   { display: flex; flex-direction: column; gap: 12px; }
.wb-split   { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 40px; align-items: start; }

/* ============================================================
   REGELN (nicht verhandelbar)
   1.  Orange = Handlung oder Achtung. Nie Dekoration.
   2.  Genau EINE .wb-btn--primary pro Bildschirmzone.
   3.  Stufe absteigend: primary → flat → .wb-action → „···"-Menü.
       Löschen, Sperren, Export, Zusammenführen liegen IMMER im Menü.
   4.  Stempelschatten nur auf dem einen Fokus-Panel; alles andere flach.
   5.  Radius immer 0. Rahmen immer 2px Tinte. Haarlinie nur in Listen.
   6.  Versalien nur für Headlines, .wb-label, .wb-tag und Buttons.
       Listen, Meta und Lesetext laufen gemischt geschrieben.
   7.  Antippbares mindestens 44px hoch.
   8.  Schraffur (.wb-stripes) NUR für Automatisches.
   9.  Zahlen: 2–4 .wb-figure pro Screen, jede klickbar (Zahl = Tür).
       Kacheln nur für Nebenzahlen, immer per .wb-tiles umflossen.
   10. Keine weiteren Farben, keine Verläufe, keine Emojis, keine Icons
       außer dem Telefonhörer und Pfeilen (→ ← ↵ ···).
   ============================================================ */

/* ===== App-spezifische Klassen (Bestand) ===== */
/* ===== Werkbank CD/CI 2.0 — Tokens (aus TAGWERK CD-CI Blatt) ===== */
:root{
  --wb-creme:#f4efe3; --wb-tinte:#191510; --wb-orange:#d94f16; --wb-weiss:#ffffff;
  --wb-grau:#4f463a; --wb-raster:#efe8d8;
  --wb-linie:rgba(var(--wb-ink-rgb),.14);   /* Haarlinie in Listen */
  --wb-hover:rgba(var(--wb-ink-rgb),.05);   /* Zeilen-/Item-Hover */
  --wb-mark:rgba(217,79,22,.10);   /* aktive Auswahl */
  --wb-orange-tief:#a53a0f;        /* Orange für Text in Lesegröße (4.5:1) */
  --wb-border:2px solid var(--wb-tinte);
  --wb-shadow-panel:5px 5px 0 var(--wb-tinte);
  --wb-shadow-btn:3px 3px 0 var(--wb-tinte);
  --wb-shadow-hero:6px 6px 0 var(--wb-tinte);
  --wb-font-display:'Archivo Black','Arial Black',sans-serif;
  --wb-font-text:'Archivo','Helvetica Neue',Arial,sans-serif;
  /* Typo-Stufen (verbindlich) */
  --wb-t-display:58px; --wb-t-h1:30px; --wb-t-h2:19px; --wb-t-h3:15px;
  --wb-t-text:14px; --wb-t-small:12.5px; --wb-t-label:11px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--wb-creme);color:var(--wb-tinte);font-family:var(--wb-font-text);font-weight:500;font-size:var(--wb-t-text)}
a{color:var(--wb-orange-tief)}
.display{font-family:var(--wb-font-display);text-transform:uppercase;line-height:1.06}
.muted{color:var(--wb-grau)}
.label{font-size:var(--wb-t-label);font-weight:700;letter-spacing:.08em;color:var(--wb-grau);text-transform:uppercase}
.panel{background:var(--wb-weiss);border:var(--wb-border);box-shadow:var(--wb-shadow-panel)}
.panel-flat{background:var(--wb-weiss);border:var(--wb-border)}
.panel-hero{box-shadow:var(--wb-shadow-hero)}
.inset{background:var(--wb-creme);border:var(--wb-border)}
.stripes{background:repeating-linear-gradient(-45deg,var(--wb-weiss) 0 8px,var(--wb-raster) 8px 16px);border:var(--wb-border)}
/* KI-Notiz: Begründung, Empfehlung, Vorschlag (CI 2.0) */
.note{border-left:6px solid var(--wb-orange);padding:2px 0 2px 18px}
.note-panel{background:var(--wb-weiss);border:var(--wb-border);border-left:6px solid var(--wb-orange);padding:16px 18px}
.btn{font-family:var(--wb-font-display);font-size:14px;letter-spacing:.04em;text-transform:uppercase;min-height:48px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--wb-border);box-shadow:var(--wb-shadow-btn);background:var(--wb-weiss);color:var(--wb-tinte);cursor:pointer;user-select:none}
.btn.primary{background:var(--wb-orange);color:#fff}
.btn.dark{background:var(--wb-tinte);color:var(--wb-creme)}
.btn.flat{box-shadow:none}
.btn.small{min-height:44px;font-size:12.5px;padding:0 14px}
.btn:hover{filter:brightness(.96)}
.btn:active{transform:translate(3px,3px);box-shadow:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.action{font-size:var(--wb-t-small);font-weight:700;text-transform:uppercase;color:var(--wb-grau);border-bottom:2px solid var(--wb-tinte);cursor:pointer;padding-bottom:1px;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--wb-font-text)}
.action:hover{color:var(--wb-tinte)}
.action.danger{color:var(--wb-orange-tief);border-bottom-color:var(--wb-orange-tief)}
.tag{font-family:var(--wb-font-display);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;display:inline-block;background:var(--wb-tinte);color:var(--wb-creme)}
.tag.accent{background:var(--wb-orange);color:#fff}
.tag.outline{background:var(--wb-weiss);color:var(--wb-tinte);border:var(--wb-border);padding:2px 8px}
.tag.warn{background:var(--wb-orange);color:#fff}   /* CI 2.0: Achtung = Orange, kein Rot */
.tile{background:var(--wb-weiss);border:var(--wb-border);padding:10px 12px}
.tile .v{font-family:var(--wb-font-display);font-size:18px}
.tile .l{font-size:10.5px;font-weight:700;color:var(--wb-grau);margin-top:2px;text-transform:uppercase}
.tile.accent{background:var(--wb-orange);color:#fff}
.tile.accent .l{color:#fff}
/* Leitzahl: die 2–4 wichtigsten Zahlen, ohne Kasten, klickbar (Zahl = Tür) — CI 2.0 */
.figures{display:flex;flex-wrap:wrap;gap:30px}
.figure{background:none;border:none;padding:0;text-align:left;cursor:pointer;min-width:140px;font-family:var(--wb-font-text)}
.figure:hover{opacity:.62}
.figure .fv{font-family:var(--wb-font-display);font-size:40px;line-height:1}
.figure .fl{font-size:var(--wb-t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wb-grau);margin-top:4px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(174px,1fr));gap:12px}
.bar{height:18px;border:var(--wb-border);background:var(--wb-creme);position:relative}
.bar .fill{position:absolute;inset:0;background:var(--wb-orange)}
.logo{background:var(--wb-tinte);color:var(--wb-creme);font-family:var(--wb-font-display);font-size:15px;padding:7px 11px;letter-spacing:.04em;display:inline-block}
.tabs{display:flex;flex-wrap:wrap}
.tab{border:var(--wb-border);background:var(--wb-weiss);color:var(--wb-tinte);font-size:var(--wb-t-small);font-weight:700;padding:8px 14px;cursor:pointer;text-transform:uppercase;font-family:inherit;touch-action:manipulation}
.tab+.tab{border-left:none}
.tab:hover{background:var(--wb-creme)}
.tab.active{background:var(--wb-tinte);color:var(--wb-creme)}
.stamp{border:var(--wb-border);background:var(--wb-weiss);font-size:12px;font-weight:700;padding:6px 10px;text-transform:uppercase;display:inline-block}
.avatar{width:38px;height:36px;border:var(--wb-border);background:var(--wb-orange);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--wb-font-display);font-size:12px;cursor:pointer}
input,textarea,select{font-family:var(--wb-font-text);font-size:var(--wb-t-text);font-weight:500;color:var(--wb-tinte);background:var(--wb-weiss);border:var(--wb-border);padding:11px 12px;width:100%;outline:none}
textarea{resize:vertical;line-height:1.55}
input:focus,textarea:focus{box-shadow:3px 3px 0 var(--wb-orange)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--wb-orange);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px 80px}
/* Klebende Navigation (CI 2.0) */
.appbar{position:sticky;top:0;z-index:30;background:var(--wb-creme);border-bottom:var(--wb-border);margin:0 -24px;padding:11px 24px;display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;min-height:60px}
/* CR-033 (33.13): Die Navigation bricht um statt seitlich wegzurutschen — nichts liegt
   außerhalb des Bildes, es muss nirgends gewischt oder gescrollt werden. */
.appbar .tabs{flex-wrap:wrap;overflow:visible;gap:2px;align-items:center}
.appbar #openbadge{margin-left:10px;order:99}
.stamp.firmawahl{width:auto;min-height:0;padding:6px 26px 6px 10px;cursor:pointer;appearance:auto;font-family:inherit;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu button.mi{display:block;width:100%;text-align:left;background:none;font-family:inherit;color:inherit}
@media(hover:none){.appbar .tab:hover{background:transparent}.appbar .tab.active:hover{background:var(--wb-tinte)}}
/* Auf mittleren Bildschirmen etwas kompakter, damit die Kopfzeile einzeilig bleibt */
@media(min-width:761px) and (max-width:1439px){
  .appbar{gap:6px 8px;padding:9px 18px}
  .appbar .tab{padding:8px 7px;font-size:11.5px}
  .appbar .stamp{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 8px;font-size:11px}
  .appbar .langtoggle button{padding:5px 6px}
  .appbar .avatar{width:34px;height:32px}
}
/* Am Handy braucht „Einstellungen" eine Kurzform, damit nichts abgeschnitten wird */
@media(max-width:760px){
  .appbar .tab[data-short]{font-size:0}
  .appbar .tab[data-short]::after{content:attr(data-short);font-size:10px;letter-spacing:0}
}
.appbar .tab{border:none;background:transparent;letter-spacing:.04em;padding:8px 13px;white-space:nowrap}
.appbar .tab:hover{background:rgba(var(--wb-ink-rgb),.07)}
.appbar .tab.active{background:var(--wb-tinte);color:var(--wb-creme)}
@media print{.appbar{position:static}}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:720px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--wb-tinte);color:var(--wb-creme);font-weight:700;font-size:var(--wb-t-text);padding:12px 18px;border:2px solid var(--wb-tinte);box-shadow:4px 4px 0 var(--wb-orange);z-index:99;display:none;max-width:90vw}
/* v0.37.0: „Senden rückgängig"-Leiste */
.undobar{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);background:var(--wb-tinte);color:var(--wb-creme);padding:10px 12px 10px 16px;border:2px solid var(--wb-tinte);box-shadow:4px 4px 0 var(--wb-orange);z-index:98;display:flex;gap:12px;align-items:center;max-width:92vw;min-width:min(520px,92vw)}
.undobar .wb-text{color:var(--wb-creme)}
.wb-tag--prio-mid{background:transparent;color:var(--wb-orange-tief);border-color:var(--wb-orange)}
/* v0.37.0: Fußzeile */
.footer{margin-top:60px;border-top:2px solid var(--wb-tinte);padding:16px 0 8px;display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--wb-grau)}
.footer a,.footer button{color:var(--wb-tinte);font-weight:700;text-decoration:none;background:none;border:none;padding:0;cursor:pointer;font-size:12.5px;font-family:inherit}
.footer a:hover,.footer button:hover{color:var(--wb-orange)}
/* v0.37.0: Kopf der Heute-Karte — Tag und „Kundenakte öffnen" überdecken sich am Handy nicht mehr */
@media(max-width:760px){.mr-row .mr-title{flex:1 1 100%;white-space:normal!important;order:9}.mr-row .mr-firma{max-width:none!important}.nk-namen{grid-template-columns:1fr 1fr!important}.h-head{flex-direction:column;align-items:stretch!important}.h-head .h-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}}
.hidden{display:none!important}
/* Avatar-Menü */
.menu{position:absolute;right:0;top:44px;background:var(--wb-weiss);border:var(--wb-border);box-shadow:var(--wb-shadow-panel);min-width:220px;z-index:50}
.menu .mi{padding:11px 14px;font-size:var(--wb-t-text);font-weight:700;cursor:pointer;border-bottom:1px solid var(--wb-linie)}
.menu .mi:hover{background:var(--wb-creme)}
.menu .mi.head{cursor:default;background:var(--wb-creme)}
.menu .mi.head:hover{background:var(--wb-creme)}
/* Tabelle — Haarlinien pro Zeile (CI 2.0) */
.tbl{width:100%;border-collapse:collapse;background:var(--wb-weiss);border:var(--wb-border)}
.tbl th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wb-grau);padding:9px 12px;border-bottom:var(--wb-border);cursor:pointer;white-space:nowrap;user-select:none}
.tbl th:hover{color:var(--wb-tinte)}
.tbl td{padding:9px 12px;font-size:var(--wb-t-small);border-bottom:1px solid var(--wb-linie);vertical-align:middle}
.tbl tr:hover td{background:var(--wb-hover)}
.tbl .cw{cursor:pointer}
/* Settings-Sektionen */
.sect{border:var(--wb-border);background:var(--wb-weiss);margin-top:10px}
.sect>.sh{padding:12px 15px;font-family:var(--wb-font-display);font-size:14px;cursor:pointer;display:flex;align-items:center;gap:10px;text-transform:uppercase}
.sect>.sb{padding:0 15px 15px;display:none}
.sect.open>.sb{display:block}
/* Anruf-Modal / Overlay */
.ovl{position:fixed;inset:0;background:rgba(var(--wb-ink-rgb),.45);z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px}
.ovl .box{background:var(--wb-weiss);border:var(--wb-border);box-shadow:var(--wb-shadow-panel);max-width:520px;width:100%;padding:18px}
.callnum{color:var(--wb-orange);cursor:pointer;font-weight:700;white-space:nowrap}
.callnum:hover{text-decoration:underline}
@media(max-width:760px){.tbl-wrap{display:none}}
@media(min-width:761px){.cards-wrap{display:none}}
@media print{.no-print{display:none!important}body{background:#fff}}
/* Einstellungen Master-Detail: rechtes Panel bleibt sichtbar (sticky), egal wie weit unten man links klickt */
.es-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px;align-items:start}
.es-detail{position:sticky;top:14px;align-self:start}
.langtoggle{display:inline-flex;border:var(--wb-border);overflow:hidden}
.langtoggle button{background:var(--wb-weiss);color:var(--wb-tinte);border:none;font-family:var(--wb-font-display);font-size:12px;padding:5px 9px;cursor:pointer;letter-spacing:.04em}
.langtoggle button.on{background:var(--wb-tinte);color:var(--wb-creme)}
@media(max-width:820px){.es-grid{grid-template-columns:1fr;gap:16px}.es-detail{position:static}}
/* ---------- Mobil (v0.33): nichts verschwindet, alles erreichbar ---------- */
html,body{overflow-x:hidden;max-width:100%}
@media(max-width:760px){
  .wrap{padding:0 14px 80px}
  /* Kopfzeile umbricht: Navigation als festes Raster in einer eigenen Zeile — alles
     sichtbar, nichts zum Wischen (CR-033). */
  .appbar{flex-wrap:wrap;gap:10px 10px;margin:0 -14px;padding:10px 14px;min-height:0}
  .appbar .tabs{order:10;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;overflow:visible;padding-bottom:0}
  .appbar .tab{padding:9px 2px;text-align:center;font-size:10px;letter-spacing:0;border:2px solid var(--wb-tinte);background:var(--wb-weiss);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .appbar .tab.active{background:var(--wb-tinte);color:var(--wb-creme)}
  .appbar .stamp{display:none}            /* Firmenname spart Platz — steht im Menü */
  .appbar #openbadge{display:inline-block;margin-left:0;grid-column:1/-1;text-align:center}
  .wb-display{font-size:26px;line-height:1.1}
  h1,.wb-h1{font-size:22px}
  .grid2{grid-template-columns:1fr}       /* Formulare einspaltig */
  .es-detail{position:static}
  /* Button-Reihen dürfen umbrechen statt abgeschnitten zu werden */
  .row{flex-wrap:wrap}
}