/* Schriften vom eigenen Server statt von Google (Sicherheitskonzept 22.9.2026,
     M2). Vorher lud jeder Aufruf - auch die Anmeldeseite - die Schriften bei
     fonts.googleapis.com; damit ging die IP-Adresse jedes Besuchers an Google
     (LG Muenchen I, 3 O 17493/20). Dieselben Schnitte wie vorher, damit die
     Schriftwahl des Browsers unveraendert bleibt; Dateien und Lizenz (SIL OFL
     1.1) in server/public/fonts/, Quelle: npm-Pakete @fontsource/* 5.3.0.
     Nur latin und latin-ext - fuer andere Schriftsysteme greift die
     Ersatzschrift des Geraets. */
  @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/archivo-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/archivo-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/archivo-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/archivo-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/archivo-latin-ext-800-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  :root{
    /* --- CI, unveraendert verbindlich --- */
    --braun: #693928;
    --gruen: #1FA038;

    /* Braun-Skala: Rahmen und Akzent, nicht mehr Flaeche */
    --braun-tief: #33201A;   /* Seitenleiste */
    --braun-dark: #241813;   /* Ueberschriften */
    --braun-hell: #8B5A44;   /* Kundenname, Rueckwege */
    --braun-mittel: #B99A7E;
    --braun-kuerzel: #6B5548;

    /* Gruen-Skala */
    --gruen-dark: #157C2B;   /* Links, Telefon, Erfolg */
    --gruen-bg: #E4F5E7;
    --gruen-rand: #BFE0C6;

    /* Grundflaechen: Creme raus, warmes Neutral rein */
    --grund: #EAE7E2;        /* Seitenhintergrund */
    --flaeche: #F5F3F0;      /* Arbeitsflaeche hinter den Karten */
    --weiss: #FFFFFF;
    --creme: #F2E9E2;        /* nur noch Text auf Braun */
    --creme-2: #EFEBE6;      /* ruhige Innenflaeche */
    --fuellung: #F7F4F1;
    --fuellung-2: #F0EBE5;
    --neutral-bg: #F1EDE8;
    --hover: #FAF8F6;

    /* Raender */
    --holz-linie: #E4DFD9;   /* Kartenrand */
    --rand-feld: #E2DCD5;    /* Eingaben, Schalter */
    --rand-schale: #DAD4CD;
    --linie: #F2EEEA;        /* Zeilentrenner */

    /* Text */
    --text: #2E251F;
    --text-2: #3A312B;
    --text-3: #4A403A;
    --text-mute: #8A817A;
    --text-mute-2: #7A716A;
    --text-mute-3: #6B625B;
    --text-faint: #9A918A;

    /* Text auf dunklem Grund */
    --auf-dunkel: #FBF7F4;
    --auf-dunkel-2: #E2D6CC;
    --auf-dunkel-3: #B3A297;
    --auf-dunkel-4: #A8917F;

    /* Signalfarben */
    --warn: #B4552B;
    --warn-bg: #F7E4DB;
    --achtung: #C9A227;
    --achtung-bg: #FBEDD7;
    --achtung-fg: #8A5A12;
    --achtung-karte: #FDF8EF;
    --achtung-rand: #EBD9B4;
    --blaugrau: #6B8299;

    /* Form */
    --r-klein: 7px;
    --r: 9px;
    --r-karte: 12px;
    --r-schale: 14px;
    --schatten-karte: 0 1px 2px rgba(45,28,20,.05);
    --schatten-schale: 0 18px 50px rgba(45,28,20,.10);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{-webkit-font-smoothing:antialiased;}
  body{
    font-family:'IBM Plex Sans', sans-serif;
    background:var(--grund);
    color:var(--text);
    min-height:100vh;
    position:relative;
  }
  h1,h2,h3,.brand{font-family:'Archivo', sans-serif;}


  /* ===== Login / Rollenwahl ===== */
  #login{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--braun-tief);
    padding:24px;
  }
  .login-card{
    background:var(--weiss);
    border-radius:var(--r-schale);
    max-width:420px;
    width:100%;
    padding:36px 34px;
    box-shadow:0 28px 70px rgba(20,12,8,.45);
    animation:kartenEin .5s cubic-bezier(.16,.84,.44,1) backwards;
  }
  .login-eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:9.5px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--auf-dunkel-4);
    font-weight:600;
    margin-bottom:12px;
  }
  .login-card h1{
    font-size:24px;
    color:var(--braun-dark);
    margin-bottom:6px;
    font-weight:700;
    letter-spacing:-0.015em;
  }
  .login-card p{color:var(--text-mute-2); font-size:13.5px; margin-bottom:26px;}

  /* ===== Zweiter Faktor (22.9.2026, M6) ===== */
  .zf-text{font-size:13px; color:var(--text-mute-2); line-height:1.5; margin-bottom:14px;}
  .zf-schritt{font-size:13px; color:var(--text); font-weight:600; margin:14px 0 8px;}
  .zf-link{
    all:unset; cursor:pointer; font-size:12.5px; color:var(--gruen-dark);
    text-decoration:underline; text-underline-offset:2px; margin-top:12px; display:inline-block;
  }
  .zf-link:focus-visible{outline:2px solid var(--gruen); outline-offset:2px; border-radius:3px;}
  /* display:inline-block oben schlaegt sonst das hidden-Attribut: Ein
     versteckter Link blieb sichtbar (gefunden am 23.9.2026 beim Passkey). */
  .zf-link[hidden]{display:none;}
  .zf-qr{
    display:block; width:186px; height:186px; margin:0 auto 10px;
    border:1px solid var(--rand-feld); border-radius:var(--r); background:var(--weiss);
  }
  .zf-geheimnis{
    display:block; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.04em;
    background:var(--creme-2); padding:7px 9px; border-radius:var(--r-klein); word-break:break-all; margin:4px 0 6px;
  }
  .zf-codes{
    display:grid; grid-template-columns:repeat(2,1fr); gap:6px 16px;
    font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--text);
    background:var(--creme-2); padding:12px 14px; border-radius:var(--r); margin:8px 0 14px;
  }
  .zf-knoepfe{display:flex; flex-direction:column; gap:9px; margin-top:16px;}
  .zf-knoepfe .stempel-btn{width:100%; justify-content:center;}
  /* Passkeys neben der Code-App (23.9.2026) */
  .zf-liste{display:flex; flex-direction:column; gap:6px; margin:0 0 4px;}
  .zf-eintrag{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:var(--creme-2); border-radius:var(--r); padding:9px 12px;
  }
  .zf-eintrag > div{flex:1 1 170px; min-width:0;}
  .zf-eintrag b{display:block; font-size:13px; color:var(--text); overflow-wrap:anywhere;}
  .zf-eintrag span{font-size:11.5px; color:var(--text-mute-2);}
  .zf-hinweis{
    font-size:12.5px; line-height:1.45; color:var(--gruen-dark); background:var(--gruen-bg);
    border:1px solid var(--gruen-rand); border-radius:var(--r-klein); padding:8px 10px; margin:0 0 12px;
  }
  .zf-wahl{display:flex; flex-direction:column; margin:4px 0 6px;}
  /* border-box: .btn-klein setzt mit all:unset auch box-sizing zurueck, und
     100 % Breite plus Innenabstand ragte sonst rechts aus der Karte. */
  .zf-wahl .stempel-btn, .zf-wahl .btn-klein{width:100%; box-sizing:border-box; justify-content:center; text-align:center;}
  .zf-wahl .btn-klein, .zf-knoepfe .btn-klein{padding:9px 12px; box-sizing:border-box; text-align:center;}
  .zf-wahl small{display:block; font-size:11.5px; color:var(--text-mute-2); line-height:1.4; margin:5px 0 14px;}
  /* Zweiten Faktor eines anderen Konten zuruecksetzen (Verwaltung) */
  .vw-zf{
    grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    font-size:12px; color:var(--text-mute); border-top:1px solid var(--linie); padding-top:11px;
  }
  .vw-zf input{flex:1 1 190px; min-width:0;}
  .rolle-btn{
    width:100%;
    text-align:left;
    background:var(--weiss);
    border:1px solid var(--rand-feld);
    border-radius:var(--r);
    padding:14px 16px;
    margin-bottom:9px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:13px;
    transition:border-color .15s, box-shadow .15s;
    font-family:'IBM Plex Sans', sans-serif;
  }
  .rolle-btn:hover{border-color:var(--gruen); box-shadow:var(--schatten-karte);}
  .rolle-btn:focus-visible{outline:3px solid var(--gruen); outline-offset:2px;}
  .rolle-icon{
    width:36px; height:36px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:var(--braun); color:var(--creme);
    font-weight:700; font-family:'Archivo',sans-serif; font-size:14px;
    flex-shrink:0;
  }
  .rolle-txt strong{display:block; font-size:14.5px; color:var(--text);}
  .rolle-txt span{font-size:12.5px; color:var(--text-mute);}

  /* ===== App-Layout ===== */
  #app{display:none; min-height:100vh; grid-template-columns:252px 1fr;}
  #app.aktiv{display:grid;}

  /* Seitenleiste: flaches Dunkelbraun, keine Verlaeufe mehr. Das Braun
     rahmt die Anwendung, es ist nicht mehr die Flaeche. */
  /* Die Leiste bleibt stehen, auch wenn die Seite lang wird - im Entwurf
     ist sie eine feste Schale, und der Konto-Block gehoert sichtbar ans
     untere Ende, nicht ans Ende des Dokuments. */
  aside{
    background:var(--braun-tief);
    color:var(--auf-dunkel-2);
    padding:22px 16px 18px;
    display:flex; flex-direction:column; gap:26px;
    position:sticky; top:0; height:100vh; overflow-y:auto;
  }
  .marke-block{display:flex; align-items:center; gap:11px; padding:0 6px;}
  .marke-logo{
    width:36px; height:36px; border-radius:9px; flex:none;
    background:var(--braun); color:var(--creme);
    display:flex; align-items:center; justify-content:center;
    font-family:'Archivo',sans-serif; font-weight:700; font-size:14px;
    border:1px solid rgba(255,255,255,.14);
  }
  .brand{font-size:14.5px; font-weight:600; color:var(--auf-dunkel); line-height:1.2; letter-spacing:0;}
  .brand small{display:block; font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:11.5px; color:var(--auf-dunkel-3); margin-top:2px;}

  nav{display:flex; flex-direction:column; gap:20px;}
  .nav-gruppe{display:flex; flex-direction:column; gap:2px;}
  .nav-gruppe > .titel{
    font-family:'JetBrains Mono',monospace; font-size:9.5px;
    letter-spacing:.12em; text-transform:uppercase;
    color:var(--auf-dunkel-4); padding:0 10px 7px;
  }
  nav button{
    all:unset; cursor:pointer;
    padding:9px 10px; border-radius:8px;
    font-size:13.5px; color:var(--auf-dunkel-2); font-weight:500;
    display:flex; align-items:center; gap:10px;
    transition:background .15s, color .15s;
  }
  nav button .dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); flex:none;}
  nav button .label{flex:1;}
  nav button .zahl{
    font-family:'JetBrains Mono',monospace; font-size:10.5px;
    color:var(--auf-dunkel-3); background:rgba(255,255,255,.07);
    padding:1px 6px; border-radius:20px;
  }
  nav button .zahl:empty{background:transparent; padding:0;}
  nav button:hover{background:rgba(255,255,255,.07);}
  nav button:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
  nav button.aktiv{background:var(--gruen); color:var(--weiss); font-weight:600;}
  nav button.aktiv .dot{background:rgba(255,255,255,.55);}
  nav button.aktiv .zahl{background:rgba(255,255,255,.2); color:var(--weiss);}

  /* Konto-Block: Rolle und Abmelden zusammengefasst */
  .rollen-badge{
    margin-top:auto;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:14px;
    display:flex; align-items:center; gap:10px;
  }
  .konto-kuerzel{
    width:32px; height:32px; border-radius:8px; flex:none;
    background:var(--gruen); color:var(--weiss);
    display:flex; align-items:center; justify-content:center;
    font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:600;
  }
  .konto-text{flex:1; min-width:0;}
  .rollen-badge b{display:block; font-size:13px; color:#F5EEE9; font-weight:600;}
  .rollen-badge span{font-size:11px; color:#A89588;}
  .abmelden{
    all:unset; cursor:pointer; flex:none;
    font-size:15px; color:#9A8779; padding:4px 6px; border-radius:6px;
    transition:color .15s, background .15s;
  }
  .abmelden:hover{color:var(--auf-dunkel); background:rgba(255,255,255,.08);}
  .abmelden:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
  /* Handy-Kopfzeile, Schleier und der Schliessknopf der Schublade: nur unter
     800 px (siehe Media Query), am Desktop bleibt die Leiste, wie sie ist. */
  .handy-kopf, .menue-schleier, .menue-zu{display:none;}

  main{padding:26px 32px 32px; overflow-x:hidden; background:var(--flaeche); min-width:0;}
  .top-row{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:14px;}
  .top-row h2{font-size:27px; font-weight:700; color:var(--braun-dark); letter-spacing:-0.015em;}
  .top-row .sub{font-size:13.5px; color:var(--text-mute-2); margin-top:4px;}
  .heute{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-mute); background:var(--weiss); border:1px solid var(--rand-feld); padding:8px 12px; border-radius:var(--r);}
  #refresh-btn{display:inline-flex; align-items:center; gap:6px; transition:box-shadow .15s, border-color .15s;}
  #refresh-btn .ic{display:inline-block; transition:transform .5s ease;}
  #refresh-btn.laedt .ic{animation:drehen .6s linear infinite;}
  @keyframes drehen{to{transform:rotate(360deg);}}
  @keyframes kartenEin{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
  /* Einblenden nur beim ersten Öffnen (4.11.2026): Ab dem zweiten Zeichnen
     setzt zeigeSeite() #app.ruhig – sonst schweben Kennzahlen, Durchlauf und
     Karten bei jedem Seitenwechsel in drei Wellen herein („blinkt"). */
  #app.ruhig .karte, #app.ruhig .kennzahl, #app.ruhig .stufe{animation:none;}
  @media (prefers-reduced-motion: reduce){
    .karte, .kennzahl, .stufe, .login-card{animation:none;}
  }

  /* ===== Auftragsdurchlauf =====
     Bis zum Redesign ein "Massband" aus sechs Kreisen. Jetzt ein echter
     Fortschrittsbalken: die Breite eines Abschnitts sagt, wie viele
     Auftraege dort stehen - die Kreise waren alle gleich gross und
     transportierten die Verteilung nicht. */
  .pipeline{
    background:var(--weiss);
    border:1px solid var(--holz-linie);
    border-radius:var(--r-karte);
    padding:18px 20px 16px;
    margin-bottom:20px;
    box-shadow:var(--schatten-karte);
  }
  .pipeline-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px;}
  .pipeline-kopf h3{font-family:'Archivo',sans-serif; font-size:14.5px; font-weight:600; color:var(--braun-dark);}
  .pipeline-label{font-size:11.5px; color:var(--text-mute); text-align:right;}
  .massband{
    display:flex; gap:3px; height:10px;
    border-radius:6px; overflow:hidden;
    background:var(--creme-2);
    margin-bottom:14px;
  }
  .massband .balken{min-width:2px; transition:flex-grow .4s cubic-bezier(.16,.84,.44,1);}
  .stufen-legende{display:grid; grid-template-columns:repeat(7,1fr); gap:10px;}
  .stufe{display:flex; flex-direction:column; gap:3px; animation:kartenEin .4s cubic-bezier(.16,.84,.44,1) backwards;}
  .stufe .kopf{display:flex; align-items:center; gap:7px;}
  .stufe .punkt{width:7px; height:7px; border-radius:2px; flex:none;}
  .stufe .name{font-size:12px; font-weight:600; color:var(--text-2);}
  .stufe .anzahl{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-mute); padding-left:14px;}
  .stufe:nth-child(1){animation-delay:.02s;} .stufe:nth-child(2){animation-delay:.06s;}
  .stufe:nth-child(3){animation-delay:.10s;} .stufe:nth-child(4){animation-delay:.14s;}
  .stufe:nth-child(5){animation-delay:.18s;} .stufe:nth-child(6){animation-delay:.22s;}


  /* Uebersicht: Arbeit links, Tagesinfos rechts - eines der vier
     Prinzipien des Entwurfs. Die Aufgabenliste ist das, woran gearbeitet
     wird; Termine, Rechnungen und Rueckrufe sind Tagesinfos und stehen
     daneben statt darunter. */
  .uebersicht-split{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start;}
  .uebersicht-split > div{display:flex; flex-direction:column; gap:16px; min-width:0;}

  /* ===== Kennzahlen =====
     Vier Zahlen ueber allem anderen. Der Entwurf stellt sie voran, damit
     nicht elf gleich schwere Kacheln nebeneinander stehen. Jede Kachel
     zeigt nur, was die Person auch sehen darf. */
  .kennzahlen{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px;}
  .kennzahl{
    background:var(--weiss);
    border:1px solid var(--holz-linie);
    border-radius:var(--r-karte);
    padding:16px 18px;
    display:flex; flex-direction:column; gap:10px;
    box-shadow:var(--schatten-karte);
    animation:kartenEin .4s cubic-bezier(.16,.84,.44,1) backwards;
  }
  .kennzahl:nth-child(1){animation-delay:.02s;} .kennzahl:nth-child(2){animation-delay:.06s;}
  .kennzahl:nth-child(3){animation-delay:.10s;} .kennzahl:nth-child(4){animation-delay:.14s;}
  .kennzahl .kopf{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .kennzahl .label{font-size:12.5px; font-weight:600; color:var(--text-mute-3);}
  .kennzahl .punkt{width:8px; height:8px; border-radius:50%; flex:none;}
  .kennzahl .wert{
    font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:600;
    color:var(--braun-dark); line-height:1;
    font-variant-numeric:tabular-nums; letter-spacing:-0.02em;
  }
  .kennzahl .kz-hinweis{font-size:11.5px; color:var(--text-mute);}
  .kennzahl .kz-hinweis.warn{color:var(--warn);}
  /* ===== Karten / Grid ===== */
  .grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; align-items:start;}
  .karte{
    background:var(--weiss);
    border:1px solid var(--holz-linie);
    border-radius:var(--r-karte);
    padding:18px 20px;
    box-shadow:var(--schatten-karte);
    transition:box-shadow .18s ease, border-color .18s ease;
    animation:kartenEin .45s cubic-bezier(.16,.84,.44,1) backwards;
  }
  .karte:hover{box-shadow:0 4px 14px rgba(45,28,20,.07); border-color:var(--rand-feld);}
  .grid > *:nth-child(1){animation-delay:.04s;} .grid > *:nth-child(2){animation-delay:.09s;}
  .grid > *:nth-child(3){animation-delay:.14s;} .grid > *:nth-child(4){animation-delay:.19s;}
  .grid > *:nth-child(5){animation-delay:.24s;} .grid > *:nth-child(6){animation-delay:.29s;}
  .karte h3{font-family:'Archivo',sans-serif; font-size:14.5px; font-weight:600; color:var(--braun-dark); margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .karte h3 .quelle{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:500; color:var(--text-faint); background:transparent; padding:0; border-radius:0; letter-spacing:.04em;}
  .eintrag{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--linie); font-size:13px;}
  .eintrag:last-child{border-bottom:none;}
  .eintrag .zeit{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-mute); min-width:60px;}
  /* Summenzeile der Rechnungs-Kachel: die Kachel zeigt nur die aeltesten
     Posten, die Gesamtzahlen kommen aus statistik{} des Lexware-Adapters. */
  .rg-summe{
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    padding:12px 14px; margin-bottom:12px;
    background:var(--fuellung); border-radius:var(--r); align-items:flex-end;
  }
  .rg-summe .betrag{
    display:block; font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:600;
    color:var(--braun-dark); font-variant-numeric:tabular-nums; line-height:1.15;
  }
  .rg-summe .label{
    display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:500;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute); margin-top:3px;
  }
  .rg-summe .zaehler{font-size:11.5px; color:var(--text-mute); text-align:right; line-height:1.45; white-space:nowrap;}
  .rg-summe .zaehler b{display:block; color:var(--warn); font-weight:600; font-size:12.5px;}
  /* Privater Modus der Rechnungen (23.9.2026) */
  .rg-kopf-rechts{display:inline-flex; align-items:center; gap:10px;}
  .rg-privat-knopf{font-family:'IBM Plex Sans',sans-serif; font-size:11px; font-weight:500; color:var(--text-mute);
    background:transparent; border:1px solid var(--rand-eingabe, #E2DCD5); border-radius:20px; padding:2px 9px; cursor:pointer; white-space:nowrap;}
  .rg-privat-knopf:hover{color:var(--braun-dark); border-color:#D8C9B4;}
  .rg-privat-knopf.an{background:#EFEBE6; color:var(--braun-dark);}
  .rg-privat-hinweis{padding:14px; background:var(--fuellung); border-radius:var(--r); font-size:12.5px; color:var(--text-mute); text-align:center;}
  .akte-block h4 .rg-privat-knopf{margin-left:auto;}
  .tag{font-size:10px; padding:2px 7px; border-radius:10px; font-weight:600; white-space:nowrap;}
  .tag.gruen{background:#E4F5E7; color:var(--gruen-dark);}
  .tag.braun{background:#F0E5DC; color:var(--braun-dark);}
  .tag.warn{background:#FBE9E0; color:var(--warn);}
  /* Zwei weitere Kalenderfarben. Das CI kennt nur Braun und Grün; für vier
     Kalender braucht es zwei Abstufungen mehr, die sich davon absetzen, ohne
     die CI-Farben zu verändern. */
  .tag.sand{background:#F5EBD5; color:#8A6A22;}
  .tag.grau{background:#ECE8E3; color:var(--text-mute);}
  /* Lexware-Belege in der Akte (2.10.2026) */
  .bl-zeile{cursor:pointer;}
  .bl-zeile:hover, .bl-zeile.offen{background:var(--hover);}
  .bl-zeile:focus-visible{outline:2px solid var(--gruen); outline-offset:-2px;}
  .bl-sub{font-size:11px; color:var(--text-mute);}
  .bl-detail{border:1px solid var(--holz-linie); border-radius:var(--r); background:var(--creme-2); padding:12px 14px; margin:2px 0 10px; font-size:12.5px;}
  .bl-tab-rahmen{overflow-x:auto;}
  .bl-tab{width:100%; border-collapse:collapse; margin:8px 0;}
  .bl-tab td{padding:6px 6px; border-bottom:1px solid var(--holz-linie); vertical-align:top;}
  .bl-tab td:first-child{padding-left:0;}
  .bl-tab td.r{text-align:right; white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:11.5px; padding-right:0;}
  .bl-tab tr.opt td{color:var(--text-mute);}
  .bl-tab tr.summe td{border-bottom:none; font-weight:600;}
  .bl-beschr{font-size:11.5px; color:var(--text-mute); white-space:pre-line; font-weight:400; margin-top:2px; overflow-wrap:anywhere;}
  .bl-meta{color:var(--text-mute); font-size:11.5px; line-height:1.6; font-weight:400;}
  .bl-knoepfe{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center;}
  .bl-knoepfe a.btn-klein{cursor:pointer; text-decoration:none;}
  .bl-ok{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .bl-ok a{color:var(--gruen-dark); font-weight:600;}
  .bl-form{margin-top:12px; margin-bottom:0;}
  .bl-form-kopf{gap:2px;}
  .bl-pos{grid-column:1/-1; display:grid; gap:8px 10px; align-items:end; border-top:1px solid var(--holz-linie); padding-top:10px;
    grid-template-columns:minmax(0,1fr) 74px 86px 104px 78px 78px 26px;}
  .bl-pos.text{grid-template-columns:minmax(0,1fr) 26px;}
  .bl-pos .breit{grid-column:1/-1;}
  .bl-pos .feld input, .bl-pos .feld select{padding:8px 9px;}
  .bl-weg{margin:0 0 9px; font-size:13px; justify-self:end;}
  .bl-artikel{color:var(--gruen-dark); text-transform:none; letter-spacing:0; font-family:'IBM Plex Sans',sans-serif; margin-left:6px;}
  .bl-opt{font-size:12px; color:var(--text-3); display:flex; gap:7px; align-items:center;}
  .bl-summe{grid-column:1/-1; text-align:right; font-size:13px; line-height:1.5;}
  /* Geräte aus dem Katalog im Belegformular (29.10.2026) */
  .bl-kat{grid-column:1/-1; display:grid; gap:8px; padding:10px 12px; border:1px solid var(--holz-linie); border-radius:9px; background:var(--fuellung);}
  .bl-kat .feld input{background:var(--weiss);}
  .bl-kat-liste{display:grid; gap:6px;}
  .bl-kat-zeile{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px 12px; align-items:center;
    background:var(--weiss); border:1px solid var(--holz-linie); border-radius:7px; padding:7px 10px; font-size:13px;}
  .bl-kat-zeile.alt{opacity:.75;}
  .bl-kat-name{min-width:0; overflow-wrap:anywhere;}
  .bl-kat-name small, .bl-kat-preis small{display:block; font-size:11px; color:var(--text-mute);}
  .bl-kat-preis{text-align:right; white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:12px;}
  .bl-kat-zeile .btn-klein{margin:0;}
  .bl-kat-ok{font-size:12px; color:var(--gruen-dark); background:var(--gruen-bg); border-radius:7px; padding:5px 9px;}
  @media (max-width:600px){
    .bl-kat-zeile{grid-template-columns:minmax(0,1fr) auto;}
    .bl-kat-zeile .btn-klein{grid-column:1/-1; box-sizing:border-box; text-align:center;}
  }
  @media (max-width:1100px){
    /* Handy und schmale Fenster: Bezeichnung über die ganze Breite, darunter
       drei Felder je Zeile. Das ✕ sitzt oben rechts neben der Beschriftung.
       Die Grenze liegt bewusst hoch: Neben der Seitenleiste bleiben der Akte
       unter 1100 px keine sieben Spalten. */
    .bl-pos{grid-template-columns:repeat(3, minmax(0,1fr));}
    .bl-pos .name{grid-column:1/-1; grid-row:1;}
    .bl-pos .name label{min-height:22px; padding-right:34px; display:flex; align-items:center; flex-wrap:wrap;}
    .bl-pos .bl-weg{grid-column:3; grid-row:1; align-self:start; margin:0; z-index:1;}
    .bl-pos.text .name{grid-column:1;}
    .bl-pos.text .name label{padding-right:0;}
    .bl-pos.text .bl-weg{grid-column:2; align-self:end; margin:0 0 9px;}
    .bl-summe{text-align:left;}
  }
  .tag.blaugrau{background:#E3E9EE; color:#465A6B;}

  /* ---------- Terminplan ---------- */
  .term-leiste{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--creme-2);}
  .term-luecke{flex:1}
  .kal-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--holz-linie); background:var(--weiss);
    border-radius:14px; padding:4px 11px; font-size:11.5px; font-weight:600; color:var(--text-mute); cursor:pointer;}
  .kal-chip:hover{border-color:var(--braun);}
  .kal-chip.an{background:var(--creme-2); color:var(--text); border-color:var(--braun);}
  /* Plantafel (3.10.2026) */
  .plan-rahmen{overflow-x:auto; border:1px solid var(--linie); border-radius:9px;}
  .plan{border-collapse:collapse; width:100%; min-width:820px; table-layout:fixed; font-size:12px;}
  .plan.zwei{min-width:1500px;}
  .plan th, .plan td{border-bottom:1px solid var(--linie); border-right:1px solid var(--linie); padding:5px; vertical-align:top;}
  .plan tr:last-child th, .plan tr:last-child td{border-bottom:none;}
  .plan thead th{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); text-align:left; background:var(--creme-2);}
  .plan thead th.heute{color:var(--gruen-dark);}
  .plan th[scope=row], .plan thead th:first-child{position:sticky; left:0; z-index:1; width:112px; background:var(--weiss); text-align:left; font-weight:600; font-size:12.5px;}
  .plan thead th:first-child{background:var(--creme-2);}
  .plan td{height:54px;}
  /* Abschlagsplan (Lexware Stufe 2) und offene Posten */
  .az-zeile{display:grid; grid-template-columns:minmax(120px,1.3fr) 128px 96px minmax(150px,1.6fr) minmax(110px,auto) auto; gap:6px; align-items:center;
    padding:6px 0; border-bottom:1px solid var(--linie);}
  .az-zeile.offen{box-shadow:inset 3px 0 0 var(--warn); padding-left:8px;}
  .az-zeile input, .az-zeile select{width:100%; min-width:0; font-size:12.5px; padding:5px 7px;}
  .az-zeile .az-betrag{text-align:right; font-family:'JetBrains Mono',monospace;}
  .az-stand{font-size:12px; overflow-wrap:anywhere;}
  @media (max-width:800px){
    .az-zeile{grid-template-columns:1fr 1fr;}
    .az-zeile .az-name, .az-zeile .az-rechnung{grid-column:1/-1;}
  }
  /* Anfrage-Eingang (3.10.2026) */
  /* Telefonleitfaden und Ampel im Anfrage-Eingang (12.10.2026). Die Ampel ist
     eine Empfehlung fürs Büro – ein Punkt vor dem Namen, ein Kasten über dem
     Leitfaden. Gerechnet wird sie am Server. */
  .ampel{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:7px; vertical-align:middle; background:#B9B2AA; flex:0 0 auto;}
  .ampel-gruen{background:var(--gruen);}
  .ampel-gelb{background:#C9A227;}
  .ampel-rot{background:var(--warn);}
  .ampel-grau{background:#B9B2AA;}
  .anf-ampel{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:8px 12px; border-radius:var(--r); background:var(--creme-2); margin:0 0 10px; font-size:13.5px;}
  .anf-ampel.gruen{background:#E4F5E7;}
  .anf-ampel.gelb{background:#FBEDD7;}
  .anf-ampel.rot{background:#F7E4DB;}
  .anf-ampel ul{margin:2px 0 0; padding-left:20px; flex:1 1 100%; font-size:13px; color:var(--text-mute);}
  .anf-ampel ul li{margin:2px 0;}
  .anf-frage .neu-zeile input[type=month], .anf-frage .neu-zeile input[type=date]{flex:1 1 150px;}
  .anf-frage .neu-zeile select{flex:1 1 140px;}
  .anf-frage .hilfe{font-size:12px; color:var(--text-mute); margin-top:3px; text-transform:none; letter-spacing:0;}
  .anf-leitfaden-lesen .rek-angabe span:first-child{min-width:170px;}
  /* Bewerber (19.10.2026): Unterpunkt in der Navigation, Anforderungen mit
     drei Knöpfen je Zeile, Katalog je Stelle. */
  nav button.unter{padding-left:26px; font-size:13px;}
  nav button.unter .dot{width:5px; height:5px;}
  .bw-ueber{color:var(--warn); font-weight:600;}
  .bw-anf{display:grid; gap:6px;}
  .bw-anf-zeile{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; padding:6px 0; border-bottom:1px solid var(--creme-2);}
  .bw-anf-zeile:last-child{border-bottom:none;}
  .bw-anf-text{font-size:13.5px; flex:1 1 260px;}
  .bw-anf-zeile .filter{margin:0;}
  .bw-katalog{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; font-size:13.5px;}
  .bw-katalog ul{margin:6px 0 0; padding-left:18px;}
  .bw-katalog li{margin:3px 0;}
  /* Empfehlungen – Kunden werben Kunden (24.10.2026) */
  .emp-pfeil{color:var(--text-mute); margin:0 4px;}
  .emp-text{font-style:italic;}
  .emp-trichter{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:10px; margin:4px 0 10px;}
  .emp-stufe{background:var(--creme-2); border-radius:var(--r); padding:10px 12px;}
  .emp-stufe .zahl{font-family:var(--mono-font, 'JetBrains Mono', monospace); font-size:22px; font-weight:600; color:var(--braun);}
  .emp-stufe .name{font-size:12.5px; color:var(--text-mute);}
  .emp-unten{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px;}
  .emp-unten select{max-width:120px;}
  .emp-top{margin-top:10px; font-size:13.5px;}
  .emp-top ul{margin:4px 0 0; padding-left:18px;}
  .emp-kette{display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; margin:0 0 12px; font-size:12.5px;}
  .emp-station{padding:3px 9px; border-radius:20px; background:var(--creme-2); color:var(--text-mute);}
  .emp-station.war{background:#E4F5E7; color:#157C2B;}
  .emp-station.jetzt{background:var(--gruen); color:#fff; font-weight:600;}
  .emp-station.aus{background:#F2EEEA; color:var(--text-mute); text-decoration:line-through;}
  .emp-angaben{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px 18px; margin:0 0 12px;}
  .emp-angabe{font-size:13.5px; overflow-wrap:anywhere;}
  .emp-angabe .lbl{font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px;}
  .emp-abschnitt{margin:8px 0 10px;}
  .emp-abschnitt > b{display:block; font-size:12px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;}
  .emp-code-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
  .emp-code{font-family:var(--mono-font, 'JetBrains Mono', monospace); font-size:20px; font-weight:600; letter-spacing:.08em; color:var(--braun); background:var(--creme-2); padding:4px 12px; border-radius:var(--r);}
  .emp-teilen-text{margin:8px 0 4px; padding:8px 12px; background:var(--creme-2); border-radius:var(--r); font-size:13px; user-select:all;}
  .emp-von{font-size:13.5px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;}
  .vl-sym{display:inline-block; width:22px;}
  /* Stufe 2: Vorschau der Bestätigung an den Kunden – reiner Text, wie er
     hinausgeht. */
  .anf-best{margin-top:8px;}
  .anf-best pre{white-space:pre-wrap; font:inherit; font-size:13.5px; line-height:1.45; background:var(--creme-2); padding:10px 12px; border-radius:var(--r); max-height:340px; overflow:auto; margin:0 0 8px;}
  .anf-best .anf-knoepfe{align-items:center;}
  .anf-knoepfe{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0;}
  .anf-knoepfe .btn-klein{white-space:normal; text-align:left;}
  .feld .anf-haken{display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:13.5px; font-family:inherit; color:inherit; cursor:pointer;}
  .feld .anf-haken input{all:revert; width:17px; height:17px; margin:0;}
  .anf-mail{align-items:flex-start; padding-left:10px;}
  .anf-mail.ungelesen{box-shadow:inset 3px 0 0 var(--gruen);}
  .anf-mail.ungelesen .rek-titel{font-weight:700;}
  @media (max-width:600px){ .anf-mail{flex-wrap:wrap;} }
  /* Reklamationen (3.10.2026) */
  .rek-zeile{cursor:pointer; align-items:flex-start; padding-left:10px; padding-right:6px; border-radius:var(--r);}
  .rek-zeile:hover, .rek-zeile:focus-visible{background:var(--creme-2); outline:none;}
  .rek-zeile.ueber{box-shadow:inset 3px 0 0 var(--warn);}
  .rek-zeile.offen{background:var(--creme-2);}
  .rek-links{min-width:0;}
  .rek-titel{font-weight:600; overflow-wrap:anywhere;}
  .rek-unter{font-size:12px; color:var(--text-mute); margin-top:2px; overflow-wrap:anywhere;}
  .rek-rechts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; flex:0 0 auto; max-width:55%;}
  .rek-kopf-rechts{display:inline-flex; gap:6px; flex-wrap:wrap; margin-left:8px; vertical-align:middle;}
  .tag.rek-st{background:#E6ECF1; color:#3F566B;}
  .rek-warn{color:var(--warn);}
  .rek-status{margin:2px 0 6px;}
  .rek-fest{font-size:13.5px; padding:7px 0; overflow-wrap:anywhere;}
  .rek-angaben{display:grid; gap:8px; margin:10px 0;}
  .rek-angabe{font-size:13.5px; overflow-wrap:anywhere;}
  .rek-angabe span{display:block; font-size:11px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em;}
  .rek-verlauf .eintrag{align-items:flex-start;}
  .rek-verlauf .eintrag .zeit{text-align:right; flex:0 0 auto;}
  .rek-mail{margin-left:0; border:1px solid var(--linie); border-radius:var(--r); padding:12px; background:var(--creme-2);}
  .rek-fotowahl-reihe{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
  .feld .rek-fotowahl{position:relative; display:block; cursor:pointer; margin:0;}
  .rek-fotowahl img{width:84px; height:84px; object-fit:cover; border-radius:var(--r); display:block; border:1px solid var(--linie);}
  .feld .rek-fotowahl input{all:revert; position:absolute; top:5px; left:5px; width:18px; height:18px; margin:0;}
  /* Sammelmail und Fotos aus dem Protokoll (4.11.2026) */
  .rek-mit-liste{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
  .rek-mit-liste .plan-haken, .aufg-form .feld .rek-mit-liste label.plan-haken{align-items:flex-start; line-height:1.35;}
  .rek-mit-liste .plan-haken input[type=checkbox], .aufg-form .feld .rek-mit-liste .plan-haken input[type=checkbox]{margin-top:2px;}
  .rek-mit-unter{display:block; font-size:12px; color:var(--text-mute);}
  .rek-fotogruppe + .rek-fotogruppe{margin-top:10px;}
  .rek-fotogruppe-titel{font-size:12.5px; color:var(--text-3); margin-top:6px; overflow-wrap:anywhere;}
  .rek-pfotos{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;}
  .rek-pfoto{width:96px; display:flex; flex-direction:column; gap:5px;}
  .rek-pfoto .cl-foto{width:96px; height:88px;}
  .rek-pfoto-stelle{font-size:11.5px; line-height:1.3; color:var(--text-mute-2); overflow-wrap:anywhere;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
  .rek-pfoto .btn-klein{box-sizing:border-box; width:100%; max-width:100%; text-align:center; white-space:normal; justify-content:center;}
  .rek-pfoto-da{font-size:11.5px; color:var(--gruen-dark); font-weight:600;}
  .rek-pfoto.da .cl-foto{opacity:.55;}
  @media (max-width:600px){ .rek-zeile{flex-wrap:wrap;} .rek-rechts{max-width:100%; justify-content:flex-start;} }
  .op-tabelle tr.op-ueber td:first-child{box-shadow:inset 3px 0 0 var(--warn);}
  /* „Meine Woche" */
  .mw-einsatz{border:1px solid var(--linie); border-left:4px solid var(--braun); border-radius:9px; padding:10px 12px; margin:0 0 10px; background:var(--weiss);}
  .mw-einsatz.gruen{border-left-color:var(--gruen);} .mw-einsatz.sand{border-left-color:#C9A227;} .mw-einsatz.blaugrau{border-left-color:#6B8299;}
  .mw-kopf{display:flex; justify-content:space-between; align-items:center; gap:8px;}
  .mw-zeit{font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-mute);}
  .mw-titel{font-family:'Archivo',sans-serif; font-weight:600; font-size:15px; margin:3px 0 6px; overflow-wrap:anywhere;}
  .mw-zeile{display:grid; grid-template-columns:70px minmax(0,1fr); gap:8px; font-size:13px; padding:3px 0; overflow-wrap:anywhere;}
  .plan td.neu{cursor:cell;}
  .plan td.neu:hover{box-shadow:inset 0 0 0 1px var(--holz-linie);}
  .plan td.ziel{box-shadow:inset 0 0 0 2px var(--gruen);}
  .plan-chip.zieht{opacity:.45;}
  .plan td.we{background:rgba(0,0,0,.025);}
  .plan td.heute{background:var(--gruen-bg);}
  .plan td.abwesend{background:repeating-linear-gradient(135deg, var(--warn-bg), var(--warn-bg) 6px, transparent 6px, transparent 12px);}
  .plan td.beantragt{background:repeating-linear-gradient(135deg, var(--achtung-bg), var(--achtung-bg) 6px, transparent 6px, transparent 12px);}
  .plan tr.plan-offen th{color:var(--text-mute); font-weight:500;}
  .plan-abw{font-size:10.5px; font-weight:600; color:var(--warn); margin-bottom:3px;}
  .plan td.beantragt .plan-abw{color:var(--achtung-fg);}
  .plan-chip{all:unset; box-sizing:border-box; display:block; width:100%; cursor:pointer; margin:0 0 3px; padding:3px 6px; border-radius:7px;
    border-left:3px solid var(--braun); background:var(--weiss); box-shadow:0 0 0 1px var(--linie); font-size:11.5px; line-height:1.3;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .plan-chip.gruen{border-left-color:var(--gruen);} .plan-chip.sand{border-left-color:#C9A227;} .plan-chip.blaugrau{border-left-color:#6B8299;}
  .plan-chip.vorschlag{box-shadow:none; outline:1px dashed var(--holz-linie); outline-offset:-1px; color:var(--text-mute);}
  .plan-chip.warn{background:var(--warn-bg);}
  .plan-chip.offen{box-shadow:0 0 0 2px var(--braun);}
  .plan-chip:hover{filter:brightness(.97);}
  .plan-chip:focus-visible{outline:2px solid var(--gruen); outline-offset:1px;}
  .plan-zeit{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-mute); margin-right:4px;}
  .plan-achtung{color:var(--warn); font-weight:700; margin-right:3px;}
  .plan-frage{font-weight:700;}
  .plan-hakenliste{display:flex; flex-wrap:wrap; gap:6px 16px;}
  /* Die Häkchen stehen in einem .feld – dessen Beschriftungsstil (Kleinversal) soll sie nicht treffen. */
  .plan-haken, .aufg-form .feld label.plan-haken{display:inline-flex; align-items:center; gap:6px; margin:0; cursor:pointer;
    font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--text);}
  .plan-haken input[type=checkbox], .aufg-form .feld .plan-haken input[type=checkbox]{all:revert; width:16px; height:16px; margin:0; flex:none; accent-color:var(--gruen);}
  .kal-punkt{width:9px; height:9px; border-radius:50%; flex:none; background:var(--text-mute);}
  .kal-punkt.gruen{background:var(--gruen);}
  .kal-punkt.braun{background:var(--braun);}
  .kal-punkt.sand{background:#C9A227;}
  .kal-punkt.blaugrau{background:#6B8299;}
  .term-tagkopf{display:flex; align-items:baseline; gap:9px; margin:16px 0 2px; padding-top:10px; border-top:1px solid var(--creme-2);
    font-family:'Archivo',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--braun);}
  .term-tagkopf:first-of-type{border-top:none; padding-top:0; margin-top:0;}
  .term-tagkopf .heute{font-family:'JetBrains Mono',monospace; font-size:9.5px; text-transform:none; letter-spacing:0;
    background:var(--gruen); color:#fff; padding:1px 6px; border-radius:2px; font-weight:600;}
  .term-zeile{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
    padding:9px 0; border-bottom:1px solid var(--creme-2); font-size:13px;}
  .term-zeile:last-child{border-bottom:none;}
  .term-zeile.klickbar{cursor:pointer;}
  .term-zeile.klickbar:hover{background:var(--hover);}
  .term-zeit{display:flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-mute); white-space:nowrap;}
  /* overflow-wrap: Ein einzelnes langes Wort („Betriebsversammlung") schob
     sich auf dem Handy sonst unter das Kalender-Etikett. */
  .term-titel{min-width:0; overflow-wrap:anywhere;}
  .term-ort{display:block; font-size:11.5px; color:var(--text-mute); overflow-wrap:anywhere;}
  .term-ort a{color:var(--braun);}
  .leer{color:var(--text-mute); font-size:13px; font-style:italic; padding:8px 0;}

  /* ===== Aufgaben (loest das Trello-Board ab) ===== */
  .karte.breit{grid-column:1/-1;}
  /* Verwaltung: Karten zu- und aufklappbar (7.10.2026). Zugeklappt bleibt nur
     die Kopfzeile mit einer Statuszeile stehen; der Zustand liegt je Browser
     in localStorage (vwKlapp). Die Kopfzeile ist das Bedienelement – nicht
     nur der Pfeil, damit auf dem Handy etwas zum Treffen da ist. */
  .karte h3.vw-kopf{cursor:pointer; justify-content:flex-start; user-select:none;}
  .karte h3.vw-kopf:hover{color:var(--braun);}
  .karte h3.vw-kopf:focus-visible{outline:2px solid var(--gruen); outline-offset:4px; border-radius:var(--r-klein);}
  .karte h3.vw-kopf .quelle{margin-left:auto; text-align:right;}
  .karte h3.vw-kopf .vw-pfeil{display:inline-block; width:12px; font-size:11px; color:var(--text-mute); flex:none;}
  .karte.vw-zu{padding-top:13px; padding-bottom:13px;}
  .karte.vw-zu h3.vw-kopf{margin-bottom:0;}
  .vw-sprung{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
  .vw-sprung .vw-alle{margin-left:auto; font-size:11.5px; color:var(--text-mute); background:none; border:none; cursor:pointer; padding:4px 2px;}
  .vw-sprung .vw-alle:hover{color:var(--braun); text-decoration:underline;}
  /* Auf dem Handy nahmen die zehn Sprungmarken vier Zeilen (160 px) ein –
     dort sind die zugeklappten Kopfzeilen selbst die Übersicht, es bleibt
     nur „Alle zuklappen“. */
  @media (max-width:600px){ .vw-sprung .btn-klein{display:none;} }
  .aufg-kopf{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin-bottom:14px;}
  .filter{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
  /* Filter als ruhige Reiter: kein Rahmen, keine Grossbuchstaben. Der
     aktive traegt das dunkle Braun der Seitenleiste. */
  .filter button{
    all:unset; cursor:pointer;
    font-size:11.5px; font-weight:600;
    padding:5px 11px; border-radius:var(--r-klein);
    color:var(--text-mute-2); background:transparent;
    transition:background .15s, color .15s;
  }
  .filter button:hover{background:var(--creme-2); color:var(--text-2);}
  .filter button:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
  .filter button.aktiv{background:var(--braun-tief); color:#F5EEE9;}
  .filter-auswahl{font:inherit; font-size:12px; max-width:100%; padding:5px 8px; border:1px solid var(--holz-linie); border-radius:7px; background:var(--weiss); color:var(--text-2);}
  .filter .trenner{width:1px; height:18px; background:#E7E2DC; margin:0 4px;}
  .btn-klein{
    all:unset; cursor:pointer;
    font-size:12px; font-weight:600; color:var(--weiss);
    background:var(--gruen); padding:6px 12px; border-radius:var(--r-klein);
    transition:background .15s;
  }
  .btn-klein:hover{background:var(--gruen-dark);}
  .btn-klein:focus-visible{outline:2px solid var(--braun); outline-offset:2px;}
  .btn-klein.grau{color:var(--text-3); background:var(--weiss); border:1px solid var(--rand-feld);}
  .btn-klein.grau:hover{background:var(--creme-2); color:var(--text);}
  /* Schalter, der an bleibt (z. B. "Abgeschlossene zeigen") - sonst waere
     nicht zu sehen, ob die Liste darunter gerade aufgeklappt ist. */
  .btn-klein.grau.aktiv{background:var(--fuellung-2); color:var(--braun); border-color:var(--braun-mittel);}

  .aufgabe{
    display:grid; grid-template-columns:20px 1fr auto; gap:0 12px;
    padding:12px 10px; margin:0 -10px;
    border-radius:var(--r); border-bottom:1px solid #F0ECE7;
    align-items:center;
    /* Anklickbar: die Zeile klappt das Bearbeiten-Formular auf. Ohne Zeiger
       und Hover sieht sie aus wie Text, und niemand probiert es. */
    cursor:pointer; transition:background .12s;
  }
  .aufgabe:hover{background:var(--hover);}
  .aufgabe:focus-visible{outline:2px solid var(--gruen); outline-offset:-2px;}
  .aufgabe:last-child{border-bottom:none;}
  /* Zugewiesen, aber noch nie geoeffnet: soll auffallen, ohne zu schreien.
     Der Streifen ist schmaler als frueher - die Marke "NEU" traegt das
     Signal, die Zeile muss es nicht wiederholen. */
  .aufgabe.neu{background:rgba(31,160,56,0.045); box-shadow:inset 2px 0 0 var(--gruen);}

  /* ===== Push-Nachrichten (24.9.2026): Schalter ueber den Aufgaben ===== */
  .push-leiste{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;}
  .push-text{flex:1 1 260px; min-width:0; font-size:13px; line-height:1.45; color:var(--text-2);}
  .push-text small{display:block; font-size:11.5px; color:var(--text-mute-2); margin-top:2px;}
  .push-knoepfe{display:flex; flex-wrap:wrap; gap:6px;}
  .push-unten{flex-basis:100%; font-size:12px; color:var(--text-mute-3); display:flex; flex-direction:column; gap:4px;}
  .push-unten .push-geraet{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center;}
  .push-unten .push-geraet span{overflow-wrap:anywhere;}
  .push-meldung{flex-basis:100%; font-size:12.5px; color:var(--gruen-dark); background:var(--gruen-bg);
    border:1px solid var(--gruen-rand); border-radius:var(--r-klein); padding:7px 10px;}
  .push-fehler{flex-basis:100%; font-size:12.5px; color:var(--warn); font-weight:600;}
  /* Aufgeklappt: die Zeile bleibt stehen und zeigt, was gerade bearbeitet
     wird - sonst weiss man beim dritten Formular nicht mehr, wozu es gehoert. */
  .aufgabe.offen{background:var(--creme-2); box-shadow:inset 2px 0 0 var(--braun); border-bottom:none;}
  .aufgabe.offen:hover{background:var(--creme-2);}
  .haken{
    all:unset; cursor:pointer; width:19px; height:19px;
    border:2px solid #D8CFC6; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:transparent; transition:border-color .15s, background .15s, color .15s;
  }
  .haken:hover{border-color:var(--gruen); color:#D8CFC6;}
  .haken:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
  .haken.ab{background:var(--gruen); border-color:var(--gruen); color:var(--weiss);}
  .aufg-titel{font-size:13.5px; font-weight:600; color:var(--text); line-height:1.4;}
  .aufgabe.ist-erledigt .aufg-titel{text-decoration:line-through; color:var(--text-faint); font-weight:500;}
  .aufg-meta{
    font-size:11.5px; color:var(--text-mute); margin-top:3px;
    display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline;
  }
  .aufg-meta .kunde{color:var(--braun-hell); font-weight:600;}
  .aufg-notiz{font-size:12px; color:var(--text-mute); margin-top:6px; padding-left:11px; border-left:2px solid var(--linie); white-space:pre-wrap;}
  .aufg-rechts{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
  .frist{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
    padding:3px 9px; border-radius:20px; white-space:nowrap;
    background:var(--neutral-bg); color:var(--text-mute-3);
  }
  .frist.faellig{background:var(--achtung-bg); color:var(--achtung-fg);}
  .frist.spaet{background:var(--warn-bg); color:var(--warn);}
  .mahn-marke{display:inline-block; background:var(--warn); color:#fff; font-size:11px; font-weight:600; padding:1px 8px; border-radius:20px; white-space:nowrap;}
  .aufgabe.ist-erledigt .frist{background:var(--gruen-bg); color:var(--gruen-dark);}
  .wer{
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
    background:var(--fuellung-2); color:var(--braun-kuerzel);
    width:26px; height:26px; border-radius:var(--r-klein);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .neu-marke{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.08em; color:var(--gruen-dark); background:var(--gruen-bg);
    padding:1px 6px; border-radius:20px;
  }

  /* Formular zum Anlegen */
  .aufg-form{
    background:var(--creme-2); border:1px solid var(--holz-linie); border-radius:3px;
    padding:15px 16px; margin-bottom:16px;
    display:grid; gap:11px 14px; grid-template-columns:repeat(auto-fit, minmax(165px,1fr));
  }
  .aufg-form .weit{grid-column:1/-1;}
  /* Dasselbe Formular, nur direkt unter der Zeile, zu der es gehoert.
     Der Einzug nach links muss derselbe sein wie bei `.aufgabe.offen` -
     sonst stehen die beiden braunen Balken elf Pixel versetzt. */
  .aufg-form.bearbeiten{
    margin:0 0 16px -11px; border-top:none; border-radius:0 0 3px 3px;
    box-shadow:inset 3px 0 0 var(--braun);
  }
  .feld{display:flex; flex-direction:column; gap:4px; min-width:0;}
  .feld label{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute);
  }
  .feld input, .feld select, .feld textarea{
    font-family:'IBM Plex Sans',sans-serif; font-size:13px;
    border:1px solid var(--rand-feld); border-radius:var(--r);
    padding:9px 12px; background:var(--weiss); color:var(--text); width:100%;
  }
  .feld textarea{resize:vertical; min-height:56px;}
  .feld input:focus, .feld select:focus, .feld textarea:focus{outline:2px solid var(--gruen); outline-offset:1px; border-color:var(--gruen);}
  .form-knoepfe{grid-column:1/-1; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .form-fehler{grid-column:1/-1; font-size:12.5px; color:var(--warn); font-weight:600;}
  /* Gegenstück in Grün: „Link ist unterwegs", „Passwort gesetzt" (19.10.2026). */
  .form-ok{grid-column:1/-1; font-size:12.5px; color:var(--gruen-dark); font-weight:600; line-height:1.45;}

  /* Aufgaben, Termine und Protokolle eines Auftrags im Auftragsformular.
     Bewusst eigene, schmale Zeilen: die grosse `.aufgabe` bringt Haken,
     Frist und Kuerzel mit und waere hier ein zweites Bedienfeld neben dem
     ersten. Derselbe Block traegt unten die abgeschlossenen Auftraege. */
  .auftrag-block{grid-column:1/-1; border-top:1px solid var(--holz-linie); padding-top:11px;}
  .auftrag-block > .kopf{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute); margin-bottom:7px;
  }
  .auftrag-block .zeile{
    display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    padding:6px 8px; margin:0 -8px; border-radius:var(--r);
    font-size:12.5px; transition:background .12s;
  }
  /* Nur was wirklich irgendwohin fuehrt, sieht auch anklickbar aus. */
  .auftrag-block .zeile.klick{cursor:pointer;}
  .auftrag-block .zeile.klick:hover{background:var(--hover);}
  .auftrag-block .zeile.klick:focus-visible{outline:2px solid var(--gruen); outline-offset:-2px;}
  .auftrag-block .zeile.ist-erledigt span:first-child{text-decoration:line-through; color:var(--text-faint);}
  .auftrag-block .zeile span:first-child{flex:1; min-width:0;}
  .auftrag-block .zeile .datum{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-mute-3);
    white-space:nowrap;
  }
  .auftrag-block .leise{color:var(--text-faint); font-size:11px;}

  /* Abgeschlossene Auftraege: eigener Kasten unter dem Board, damit die
     Spaltenzaehler weiter das zaehlen, was auf dem Board liegt. */
  .abgeschlossen-block{margin-top:16px; border-top:1px solid var(--holz-linie); padding-top:13px;}

  /* Ziehen und Ablegen. Die Knoepfe ‹ › bleiben - auf dem Handy gibt es kein
     HTML5-Drag, und ohne sie waere das Board dort nicht mehr zu bedienen. */
  .auftrag-karte.zieht{opacity:.35;}
  .spalte.ziel{background:var(--gruen-bg); outline:2px dashed var(--gruen); outline-offset:-2px;}

  /* ===== Kundenakte ===== */
  .suchzeile{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:14px;}
  .suchzeile input{
    flex:1; min-width:180px;
    font-family:'IBM Plex Sans',sans-serif; font-size:13.5px;
    border:1px solid var(--holz-linie); border-radius:3px; padding:8px 11px;
    background:var(--weiss); color:var(--text);
  }
  .suchzeile input:focus{outline:2px solid var(--gruen); outline-offset:1px; border-color:var(--gruen);}
  .kunde-zeile{
    display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center;
    padding:10px 0; border-bottom:1px solid var(--creme-2); cursor:pointer;
    transition:background .12s;
  }
  .kunde-zeile:last-child{border-bottom:none;}
  .kunde-zeile:hover{background:var(--creme-2);}
  .kunde-zeile:focus-visible{outline:2px solid var(--gruen); outline-offset:-2px;}
  .kunde-zeile b{font-size:13.5px; font-weight:600;}
  .kunde-zeile .anschrift{font-size:11.5px; color:var(--text-mute); grid-column:1;}
  /* Ohne die feste Spalte landet .rechts wegen grid-row in Spalte 1 und
     schiebt den Namen nach ganz rechts - faellt erst auf, seit hier
     regelmaessig Kennzeichen stehen. */
  .kunde-zeile .rechts{grid-column:2; grid-row:1/3; display:flex; align-items:center; gap:8px;}

  /* Klick zum Waehlen. Der Hoerer macht sichtbar, dass hier etwas passiert -
     eine blosse Nummer in Gruen sieht nach Text aus. */
  .tel, .mail{color:var(--gruen-dark); text-decoration:none;}
  .tel{white-space:nowrap;}
  /* Nummern bleiben zusammen, lange Adressen duerfen umbrechen - sonst
     schieben sie auf dem Handy die Karte auf. */
  .mail{overflow-wrap:anywhere;}
  .tel:hover, .mail:hover{text-decoration:underline;}
  .tel::before{content:"\260E\FE0E"; margin-right:4px; opacity:.75;}
  /* Beschriftung hinter einer Rufnummer ("Mobil Anna"), seit 28.9.2026. */
  .tel-info{font-size:11px; color:var(--text-mute); white-space:nowrap;}
  .mail::before{content:"\2709\FE0E"; margin-right:4px; opacity:.75;}
  /* WhatsApp-Knopf hinter einer Handynummer, seit 11.10.2026. */
  .wa{display:inline-block; margin-left:4px; padding:1px 8px; border:1px solid var(--gruen-rand); border-radius:20px;
      background:var(--gruen-bg); color:var(--gruen-dark); font-size:11px; font-weight:600; line-height:1.5;
      text-decoration:none; white-space:nowrap; vertical-align:baseline;}
  .wa:hover{border-color:var(--gruen); text-decoration:none;}
  .wa:focus-visible{outline:2px solid var(--gruen); outline-offset:1px;}

  .zurueck{
    all:unset; cursor:pointer; font-size:12.5px; color:var(--braun);
    font-weight:600; margin-bottom:12px; display:inline-block;
  }
  .zurueck:hover{text-decoration:underline;}
  .zurueck:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}

  .akte-adressen{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:4px 0 18px;}
  .adresse{
    background:var(--creme-2); border-radius:3px; padding:12px 14px;
    border-left:3px solid var(--holz-linie);
  }
  .adresse.liefer{border-left-color:var(--gruen);}
  .adresse .art{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute);
    display:block; margin-bottom:5px;
  }
  .adresse .zeilen{font-size:13px; line-height:1.5;}
  .adresse .leer-hinweis{font-size:12px; color:var(--text-mute); font-style:italic;}

  /* Kopf der Akte: Name links, "Stammdaten ändern" rechts daneben. */
  .akte-kopf{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:12px; margin-bottom:14px; flex-wrap:wrap;
  }

  /* Kein Fehler, aber auch keine Nebensache: "Änderung nicht nach Lexware
     übertragen" muss man sehen, ohne dass es nach Absturz aussieht. */
  .akte-hinweis{
    background:var(--achtung-bg); border:1px solid #E8D3A8; border-radius:var(--r);
    padding:10px 13px; margin-bottom:14px; font-size:12.5px; color:var(--achtung-fg);
  }

  /* Häkchen "Lieferadresse weicht ab" - in beiden Kundenformularen. */
  .liefer-haken{
    display:flex; align-items:center; gap:9px; cursor:pointer;
    font-size:12.5px; color:var(--text-2); padding:2px 0;
  }
  .liefer-haken input{width:16px; height:16px; accent-color:var(--gruen); cursor:pointer; flex:none;}

  /* Unterlagen am Kunden */
  .datei-zeile{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:9px 0; border-bottom:1px solid var(--linie);
  }
  .datei-zeile:last-of-type{border-bottom:none;}
  .datei-name{
    display:flex; align-items:center; gap:8px; font-size:13px;
    color:var(--gruen-dark); text-decoration:none; font-weight:600;
    flex:1; min-width:180px; overflow-wrap:anywhere;
  }
  .datei-name:hover{text-decoration:underline;}
  .datei-name:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
  .datei-art{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.06em; color:var(--text-mute-3); background:var(--creme-2);
    border:1px solid var(--rand-feld); border-radius:var(--r-klein);
    padding:2px 6px; flex:none;
  }
  .datei-zeile .wer-wann{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-mute);
    flex:1; min-width:140px;
  }
  .datei-neu{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center;}
  .datei-neu input[type=text]{flex:1; min-width:150px;}
  .datei-neu input, .datei-neu select{
    font-family:'IBM Plex Sans',sans-serif; font-size:13px;
    border:1px solid var(--rand-feld); border-radius:var(--r-klein); padding:7px 9px;
    background:var(--weiss); color:var(--text);
  }
  .datei-neu input:focus, .datei-neu select:focus{outline:2px solid var(--gruen); outline-offset:1px;}
  .datei-fuss{font-size:11.5px; color:var(--text-mute); margin-top:7px;}

  .umzug-hinweis{
    background:#FBF6EC; border:1px dashed #D9BE8A; border-radius:3px;
    padding:12px 14px; margin-bottom:16px; font-size:12.5px; color:#7A5A1E;
  }
  .umzug-hinweis b{display:block; margin-bottom:4px; color:var(--braun-dark); font-size:13px;}

  /* Arbeitszeit je Auftrag (24.9.2026) */
  .az-zeile{display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap;
    margin-top:12px; padding:9px 12px; background:var(--creme-2); border-radius:var(--r); font-size:13px; text-align:left; overflow-wrap:anywhere;}
  .az-knoepfe{display:flex; gap:6px; flex-wrap:wrap;}
  .az-weitere{display:flex; gap:6px; flex-wrap:wrap; width:100%;}
  .az-weitere select{flex:1; min-width:0; font-family:'IBM Plex Sans',sans-serif; font-size:13px;
    border:1px solid var(--rand-feld); border-radius:var(--r-klein); padding:7px 9px; background:var(--weiss); color:var(--text);}
  .az-nachkalk{display:flex; gap:10px 22px; flex-wrap:wrap; margin-bottom:8px;}
  .az-nachkalk > div{display:flex; flex-direction:column;}
  .az-plan{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; font-size:12.5px; color:var(--text-3);}
  .az-plan input{width:110px; font-family:'IBM Plex Sans',sans-serif; font-size:13px;
    border:1px solid var(--rand-feld); border-radius:var(--r-klein); padding:6px 9px; background:var(--weiss); color:var(--text);}

  /* Abschaltprüfung TimeRecording (23.9.2026) */
  .zt-ampel{border-radius:var(--r); padding:11px 14px; margin:0 0 14px; font-size:12.5px; line-height:1.5;
    border-left:4px solid; overflow-wrap:anywhere;}
  .zt-ampel > b{display:block; font-size:13.5px; margin-bottom:3px;}
  .zt-ampel.gruen{background:#E4F5E7; border-color:#1FA038; color:#157C2B;}
  .zt-ampel.gelb{background:#FBEDD7; border-color:#C9A227; color:#7A5A1E;}
  .zt-ampel.rot{background:#F7E4DB; border-color:#B4552B; color:#8A3E1D;}
  .zt-ampel-liste, .zt-ampel-schritte{margin:6px 0 6px 18px; padding:0;}
  .zt-ampel-liste li, .zt-ampel-schritte li{margin:2px 0;}

  /* Personalakten (23.9.2026) */
  .pa-eintrag{padding:11px 10px; margin:0 -10px; border-bottom:1px solid var(--linie); border-radius:var(--r);}
  .pa-eintrag:last-child{border-bottom:none;}
  .pa-eintrag.neu{background:rgba(31,160,56,0.045); box-shadow:inset 2px 0 0 var(--gruen);}
  .pa-eintrag.offen{background:var(--creme-2);}
  /* Boni (22.10.2026): stornierte durchgestrichen, Monatssumme in Mono */
  .bo-eintrag.storniert{opacity:.7;}
  .bo-weg{text-decoration:line-through;}
  .bo-monat h4 .zahl{font-family:'JetBrains Mono',monospace;}
  .pa-kopf{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
  .pa-titel{font-weight:600; font-size:13.5px; color:var(--text); overflow-wrap:anywhere; min-width:0;}
  .pa-datum{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-mute); white-space:nowrap;}
  /* Gesprächsnotizen haben Absätze – die sollen stehen bleiben. */
  .pa-text{white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; color:var(--text-2); margin-top:6px; line-height:1.5;}
  .pa-eintrag .datei-zeile{padding:6px 0 0; border-bottom:none;}
  .pa-fuss{display:flex; justify-content:space-between; align-items:center; gap:8px 12px; flex-wrap:wrap; margin-top:6px;}
  .pa-fuss .wer-wann{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-mute);}
  .pa-knoepfe{display:flex; gap:6px;}
  .pa-datei{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--text-3);}

  /* Unternehmen (3.10.2026) – Einträge nutzen die .pa-…-Regeln oben */
  .fu-schloss{max-width:440px; margin:6px 0 4px;}
  .fu-schloss p{font-size:13px; color:var(--text-2); line-height:1.5; margin:0 0 12px;}
  .fu-schloss .feld{margin-bottom:12px;}
  .fu-zahlen{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px;}
  .fu-zahl{flex:1 1 150px; background:var(--creme-2); border-radius:var(--r); padding:9px 12px; min-width:0;}
  .fu-zahl b{display:block; font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--text); overflow-wrap:anywhere;}
  .fu-zahl span{font-size:11.5px; color:var(--text-mute);}
  .fu-sub{font-size:12.5px; color:var(--text-3); margin-top:3px; overflow-wrap:anywhere;}
  .fu-sub .rot{color:var(--warn); font-weight:600;}
  .fu-kopf{display:flex; gap:8px 12px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:12px;}
  .fu-kopf input[type=search]{flex:1 1 180px; min-width:0; max-width:320px;}
  .fu-log{display:grid; grid-template-columns:auto auto 1fr; gap:4px 12px; font-size:12.5px; color:var(--text-2);}
  .fu-log > span:nth-child(3n+1){font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-mute); white-space:nowrap;}
  .fu-log > span{overflow-wrap:anywhere; min-width:0;}
  @media (max-width:600px){ .fu-log{grid-template-columns:1fr; gap:0;} .fu-log > span:nth-child(3n){margin-bottom:8px;} }
  .pa-datei-info{flex:1; min-width:160px; overflow-wrap:anywhere;}

  /* Reiter der Kundenakte (28.10.2026). Die Leiste scrollt auf dem Handy in
     sich, die Seite nicht. */
  .akte-reiter{
    display:flex; gap:2px; overflow-x:auto; scrollbar-width:thin;
    border-bottom:1px solid var(--holz-linie); margin:4px 0 6px;
  }
  .akte-reiter-knopf{
    all:unset; box-sizing:border-box; cursor:pointer; white-space:nowrap; flex:0 0 auto;
    padding:9px 13px 8px; font-size:13px; font-weight:500; color:var(--text-mute-3);
    border-bottom:2px solid transparent; margin-bottom:-1px;
    display:inline-flex; align-items:center; gap:6px;
  }
  .akte-reiter-knopf:hover{color:var(--braun-dark); background:var(--hover);}
  .akte-reiter-knopf.aktiv{color:var(--braun-dark); font-weight:600; border-bottom-color:var(--braun);}
  .akte-reiter-knopf:focus-visible{outline:2px solid var(--gruen); outline-offset:-2px; border-radius:6px;}
  .akte-reiter-n{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600;
    background:var(--neutral-bg); color:var(--text-mute-3); border-radius:20px; padding:1px 7px;
  }
  .akte-reiter-knopf.aktiv .akte-reiter-n{background:var(--creme-2); color:var(--braun);}
  .akte-reiter-n.warn, .akte-reiter-knopf.aktiv .akte-reiter-n.warn{background:var(--warn-bg); color:var(--warn);}
  .akte-reiterinhalt[hidden]{display:none;}
  .akte-reiterinhalt > .akte-block:first-child{margin-top:14px;}
  .akte-reiterinhalt > .akte-adressen:first-child, .akte-reiterinhalt > .umzug-hinweis:first-child{margin-top:14px;}
  @media (max-width:600px){ .akte-reiter-knopf{padding:9px 10px 8px; font-size:12.5px;} }

  /* Vorhaben beim Kunden (28.10.2026): „Alle · Küche · HWR" über den Reitern. */
  .akte-vorhaben{
    background:var(--creme-2); border-radius:var(--r, 9px); padding:9px 12px 10px;
    margin:2px 0 10px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  }
  .akte-vorhaben-label{
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
  }
  .akte-vorhaben .filter{margin:0; flex-wrap:wrap;}
  .akte-vorhaben .vh-jahr{font-family:'JetBrains Mono',monospace; font-size:10.5px; opacity:.75;}
  .akte-vorhaben .vh-fertig{color:var(--gruen-dark);}
  .akte-vorhaben-hinweis{flex-basis:100%; font-size:12px; color:var(--text-mute-3);}
  @media (max-width:600px){ .akte-vorhaben-hinweis{display:none;} .akte-vorhaben{padding:8px 10px;} }
  .eintrag.folgeauftrag{padding-left:18px;}
  .vh-pfeil{color:var(--text-mute);}
  .auftrag-vorhaben{font-size:11.5px; color:var(--braun-hell); margin-top:2px;}
  .bl-zuordnung{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:10px 0 2px; font-size:12.5px;}
  .bl-zuordnung label{font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);}
  .bl-zuordnung select{max-width:100%; min-width:0;}
  .vh-trenner{
    margin:14px 0 4px; padding-top:8px; border-top:1px dashed var(--holz-linie);
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
  }

  .akte-block{margin-top:20px;}
  .akte-block > h4{
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--text-mute);
    padding-bottom:6px; border-bottom:1px solid var(--holz-linie); margin-bottom:10px;
    display:flex; justify-content:space-between; align-items:center; gap:8px;
  }
  .verlauf-eintrag{padding:9px 0; border-bottom:1px solid var(--creme-2); font-size:13px;}
  .verlauf-eintrag:last-child{border-bottom:none;}
  .verlauf-eintrag .wer-wann{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-mute);
    display:block; margin-top:3px;
  }
  .verlauf-eintrag.faellig{box-shadow:inset 3px 0 0 var(--warn); padding-left:10px;}
  .wv-zeile{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .neu-zeile{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center;}
  .neu-zeile input[type=text]{flex:1; min-width:150px;}
  .neu-zeile input, .neu-zeile textarea{
    font-family:'IBM Plex Sans',sans-serif; font-size:13px;
    border:1px solid var(--holz-linie); border-radius:3px; padding:7px 9px;
    background:var(--weiss); color:var(--text);
  }
  .neu-zeile input:focus, .neu-zeile textarea:focus{outline:2px solid var(--gruen); outline-offset:1px;}

  /* ===== Verwaltung ===== */
  .ma-zeile{
    display:grid; grid-template-columns:auto 1fr auto; gap:2px 12px; align-items:center;
    padding:11px 0; border-bottom:1px solid var(--creme-2); cursor:pointer;
  }
  .ma-zeile:last-of-type{border-bottom:none;}
  .ma-zeile:hover{background:var(--creme-2);}
  .ma-zeile.offen{background:var(--creme-2);}
  .ma-kuerzel{
    font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
    background:var(--braun); color:var(--creme);
    width:34px; height:26px; border-radius:3px;
    display:flex; align-items:center; justify-content:center;
  }
  .ma-zeile.inaktiv .ma-kuerzel{background:var(--holz-linie); color:var(--text-mute);}
  /* Umbrechend, weil hinter dem Namen mehrere Kennzeichen stehen können
     („Startpasswort offen", „nie angemeldet") – auf dem Handy schoben sie
     die Zeile sonst über den Rand. */
  .ma-name{
    font-size:13.5px; font-weight:600;
    display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0;
  }
  .ma-unten{grid-column:2; font-size:11.5px; color:var(--text-mute);}
  .ma-marke{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    padding:1px 6px; border-radius:2px; white-space:nowrap;
  }
  .ma-marke.warn{background:#F7E4DB; color:var(--warn);}
  .ma-marke.grau{background:var(--creme-2); color:var(--text-mute);}

  /* Auswertung der Herkunft (Verwaltung). Vier Spalten, die schmale hinten. */
  .hk-kopf, .hk-zeile{
    display:grid; grid-template-columns:minmax(0,1fr) 58px 58px 58px; gap:6px;
    align-items:baseline; padding:6px 0; border-bottom:1px solid var(--creme-2); font-size:13px;
  }
  .hk-kopf{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-mute); text-transform:uppercase; letter-spacing:.03em;}
  .hk-kopf span:not(:first-child), .hk-zeile span:not(.hk-name){text-align:right; font-family:'JetBrains Mono',monospace;}
  .hk-zeile .hk-name{overflow-wrap:anywhere;}
  .hk-zeile.gruppe{font-weight:700; background:var(--creme-2); padding-left:6px; padding-right:6px;}
  .hk-zeile.eintrag .hk-name{padding-left:16px;}
  .hk-zeile.ohne{color:var(--text-mute);}
  .hk-zeile.summe{font-weight:700; border-top:2px solid var(--holz-linie); border-bottom:none;}

  .rechte-gitter{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:6px 16px; margin-top:4px;
  }
  .rechte-gitter label{
    display:flex; align-items:center; gap:9px; font-size:12.5px; cursor:pointer;
    padding:4px 0;
  }
  /* Schalter statt Haekchen (so im Entwurf). Rein ueber CSS: das Element
     bleibt eine echte Checkbox, damit Tastatur, Formularlogik und die
     bestehende Auswertung ueber data-fuer/value unveraendert weiterlaufen. */
  .rechte-gitter input{
    appearance:none; -webkit-appearance:none;
    position:relative; flex-shrink:0;
    width:34px; height:20px; border-radius:20px;
    background:#DCD6CF; cursor:pointer; margin:0;
    transition:background .15s;
  }
  .rechte-gitter input::after{
    content:''; position:absolute; top:2px; left:2px;
    width:16px; height:16px; border-radius:50%;
    background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
    transition:left .15s;
  }
  .rechte-gitter input:checked{background:var(--gruen);}
  .rechte-gitter input:checked::after{left:16px;}
  .rechte-gitter input:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
  .rechte-gitter input:disabled{opacity:.45; cursor:default;}
  /* Ausgeschaltet tritt die Beschriftung zurueck - man sieht auf einen Blick,
     was freigeschaltet ist. */
  .rechte-gitter input + span{color:var(--text-faint);}
  .rechte-gitter input:checked + span{color:var(--text);}
  .rechte-titel{
    grid-column:1/-1;
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute);
    margin-top:10px;
  }
  .zettel{
    background:#E4F5E7; border:1px solid var(--gruen); border-radius:3px;
    padding:13px 15px; margin:12px 0; font-size:13px;
  }
  .zettel b{display:block; margin-bottom:6px; color:var(--gruen-dark);}
  .zettel .pw{
    font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:600;
    color:var(--braun-dark); user-select:all; display:inline-block; margin:4px 0;
  }

  /* Kanban – sechs Stufen des Auftragsdurchlaufs.
     Der Entwurf setzt die Spalte selbst auf eine ruhige Flaeche und die
     Karten weiss darauf: so ist die Spalte als Behaelter erkennbar, auch
     wenn sie leer ist. */
  .kanban-scroll{overflow-x:auto; padding-bottom:6px;}
  .kanban{display:grid; grid-template-columns:repeat(7,minmax(140px,1fr)); gap:10px; min-width:1040px; align-items:start;}
  .spalte{background:var(--creme-2); border-radius:var(--r-karte); padding:12px 11px; min-height:220px;}
  .spalte h4{
    font-size:12px; font-weight:700; text-transform:none; letter-spacing:0;
    color:var(--text-2); margin-bottom:9px;
    display:flex; justify-content:space-between; align-items:center; gap:6px;
    padding:2px 4px 8px; border-bottom:1px solid #E1DAD2;
  }
  .spalte h4 .zahl{
    font-family:'JetBrains Mono',monospace; font-weight:600;
    background:var(--weiss); color:var(--text-mute-3);
    border-radius:20px; padding:1px 7px; font-size:10.5px;
  }
  .karte-mini{
    background:var(--weiss); border:1px solid #E7E1DA; border-radius:var(--r);
    padding:11px 12px; margin-bottom:9px; font-size:12.5px;
    box-shadow:var(--schatten-karte);
    transition:box-shadow .15s ease, border-color .15s ease;
  }
  .karte-mini:hover{box-shadow:0 4px 12px rgba(45,28,20,.09); border-color:var(--rand-feld);}
  .karte-mini b{display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:3px;}
  .karte-mini span{font-size:11px; color:var(--text-mute);}
  .auftrag-karte b{line-height:1.35;}
  /* Die Karte ist selbst ein Knopf: ein Klick klappt das Bearbeiten-Formular
     ueber dem Board auf. Ohne Zeiger und Hover sieht sie aus wie Text. */
  .auftrag-karte{cursor:pointer;}
  .auftrag-karte:focus-visible{outline:2px solid var(--gruen); outline-offset:1px;}
  .auftrag-karte.offen{border-color:var(--braun); box-shadow:inset 3px 0 0 var(--braun);}
  .auftrag-kunde{display:block; font-size:11px; color:var(--braun-hell); font-weight:600; margin-bottom:4px;}
  /* Als Link bleibt der Name in der Zeile stehen - `display:block` wuerde die
     gepunktete Linie ueber die ganze Kartenbreite ziehen. */
  a.auftrag-kunde{display:inline-block;}
  .auftrag-fuss{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:8px;}
  .auftrag-aufg{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint);}
  /* Ware bestellt (2.10.2026): gruen = abgehakt (mit Datum und Kuerzel),
     gelb = in "Termin" noch zu bestellen, rot = schon in der Montage und
     immer noch nicht bestellt. Die offenen sind Knoepfe zum Abhaken. */
  .auftrag-ware{
    display:block; width:100%; box-sizing:border-box; margin-top:7px;
    font:inherit; font-size:11px; line-height:1.35; text-align:left;
    border:0; border-radius:7px; padding:4px 8px;
  }
  .auftrag-ware.ok{background:var(--gruen-bg); color:var(--gruen-dark);}
  button.auftrag-ware{cursor:pointer; background:var(--achtung-bg); color:var(--achtung-fg); font-weight:600;}
  button.auftrag-ware.spaet{background:var(--warn-bg); color:var(--warn);}
  .auftrag-ware.warn{background:var(--warn-bg); color:var(--warn); font-weight:600;}
  /* Protokoll läuft (7.10.2026): ruhige Innenfläche, keine Aufforderung. */
  .auftrag-ware.laeuft{background:var(--fuellung); color:var(--text-mute);}
  /* Automatik (11.10.2026): Hinweis, dass das Dashboard die Karte verschoben hat */
  .auftrag-auto{font-size:11px; color:var(--text-mute); margin-top:5px; line-height:1.35;}
  .auftrag-ware.ok .btn-klein{margin-left:6px;}
  /* Kundendienst-Rechnung (28.10.2026): Zeile mit Knopf „Rechnung erstellen" */
  .auftrag-ware.kd-zeile{display:flex; align-items:center; justify-content:space-between; gap:6px 8px; flex-wrap:wrap;}
  .auftrag-ware.kd-zeile > span{min-width:0;}
  /* 29.10.2026: in der schmalen Board-Spalte ragte der Knopf über die Karte
     (nowrap + all:unset ohne border-box). Jetzt volle Zeile, darf umbrechen. */
  .auftrag-ware.kd-zeile .btn-klein{margin:0; flex:1 1 100%; box-sizing:border-box; max-width:100%;
    text-align:center; white-space:normal; line-height:1.3; padding:6px 8px;}
  .auto-regel{grid-column:1/-1; border:1px solid var(--holz-linie); border-radius:9px; padding:10px 12px; background:var(--weiss);}
  .auto-regel.aus{background:var(--fuellung);}
  .auto-regel > label{display:flex; align-items:flex-start; gap:9px; font-weight:600; font-size:13.5px; cursor:pointer; text-transform:none; letter-spacing:0; font-family:inherit; color:var(--text);}
  .auto-regel > label input{all:revert; margin-top:3px; flex:none;}
  .auto-regel .auto-text{font-size:12.5px; color:var(--text-mute); margin:4px 0 0 26px; line-height:1.45;}
  .auto-regel .auto-mehr{margin:8px 0 0 26px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; font-size:12.5px;}
  .auto-regel .auto-mehr select, .auto-regel .auto-mehr input[type=number]{width:auto; min-width:0; padding:5px 8px; font-size:13px;}
  .auto-regel .auto-mehr input[type=number]{width:74px;}
  .auto-verlauf{grid-column:1/-1; margin-top:4px;}
  .auto-verlauf .zeile{display:flex; gap:10px; padding:5px 0; border-top:1px solid var(--linie); font-size:12.5px;}
  .auto-verlauf .zeile time{flex:none; width:86px; color:var(--text-mute); font-family:'JetBrains Mono', monospace; font-size:11.5px;}
  .auto-probe{grid-column:1/-1; background:var(--fuellung); border-radius:9px; padding:10px 12px; font-size:12.5px; line-height:1.5;}
  /* Arbeitsliste am Auftrag (7.10.2026): Punkte mit Haken, Gruppen, Eingabe. */
  .al-stand{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-mute); margin-bottom:6px;}
  .al-gruppe{margin-bottom:6px;}
  .al-gruppe-name{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--braun-mittel); margin:8px 0 3px;}
  .al-punkt{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:6px 9px; align-items:start; padding:5px 0; border-bottom:1px solid var(--linie); font-size:13px;}
  .al-punkt:last-child{border-bottom:none;}
  .al-punkt input[type=checkbox]{all:revert; width:18px; height:18px; margin:1px 0 0; accent-color:var(--gruen); cursor:pointer;}
  .al-punkt label{cursor:pointer; line-height:1.35; overflow-wrap:anywhere;}
  .al-punkt.fertig label{color:var(--text-mute); text-decoration:line-through;}
  .al-wer{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); margin-left:6px; text-decoration:none; display:inline-block;}
  .al-knoepfe{display:flex; gap:4px;}
  .al-mini{all:unset; cursor:pointer; font-size:12px; line-height:1; color:var(--text-mute); padding:2px 6px; border-radius:var(--r-klein); border:1px solid var(--rand-feld);}
  .al-mini:hover{color:var(--braun); background:var(--creme-2);}
  .al-bem{grid-column:2 / -1; font-size:12px; color:var(--text-3); white-space:pre-wrap; margin-top:-2px;}
  .al-eingabe{margin-top:10px; display:flex; flex-direction:column; gap:8px;}
  .al-zeile{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .al-eingabe .al-vorlage{font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--rand-feld); border-radius:var(--r-klein); background:var(--weiss); min-width:200px;}
  /* Prozessschritte am Auftrag (5.11.2026) */
  .ps-stufe{margin-bottom:8px; padding-left:8px; border-left:2px solid var(--linie);}
  .ps-stufe.aktuell{border-left-color:var(--gruen);}
  .ps-stufe-name{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--braun-mittel); margin:8px 0 3px;}
  .ps-jetzt{color:var(--gruen-dark); background:var(--gruen-bg); border-radius:20px; padding:1px 7px; letter-spacing:.04em; margin-left:4px;}
  .ps-schritt.entfaellt label{color:var(--text-faint); text-decoration:line-through;}
  .ps-entfaellt-marke, .ps-fertig{font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.04em;}
  .ps-entfaellt-marke{color:var(--text-faint); margin-left:6px;}
  .ps-fertig{color:var(--gruen-dark);}
  .ps-auto{color:var(--text-faint); margin-left:5px; font-size:11px; cursor:help;}
  .ps-selbst{color:var(--gruen-dark);}
  .ps-mehr summary{cursor:pointer; font-size:12.5px; color:var(--text-mute);}
  .ps-mehr[open] summary{margin-bottom:8px;}
  .ps-mehr textarea{width:100%; box-sizing:border-box;}
  .ps-legende{font-size:12px; color:var(--text-3); display:flex; flex-direction:column; gap:3px; margin-bottom:8px;}
  .ps-legende code{font-family:'JetBrains Mono',monospace; font-size:11px; background:var(--creme-2); padding:1px 5px; border-radius:var(--r-klein);}
  .ps-zeile{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .ps-zeile .ps-zaehler{font-family:'JetBrains Mono',monospace; font-size:10px; flex:none; opacity:.8;}
  .ps-gruppe{border-bottom:1px solid var(--linie);}
  .ps-gruppe:last-child{border-bottom:none;}
  .ps-gruppe-kopf{display:flex; align-items:center; gap:8px; padding:7px 0; cursor:pointer; font-size:13px;}
  .ps-gruppe-kopf:hover .ps-gruppe-text{color:var(--braun);}
  .ps-pfeil{color:var(--text-faint); width:12px; flex:none; font-size:11px;}
  .ps-gruppe-text{flex:1; min-width:0; overflow-wrap:anywhere;}
  .ps-gruppe-liste{padding:0 0 6px 20px;}
  .ps-auftrag{display:flex; justify-content:space-between; gap:8px; padding:4px 0; font-size:12.5px; cursor:pointer; flex-wrap:wrap;}
  .ps-auftrag:hover b{color:var(--braun);}
  /* Bestellverfolgung am Auftrag (6.11.2026) */
  .bs-tabelle{display:flex; flex-direction:column; gap:6px;}
  .bs-zeile{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) auto; gap:6px; align-items:center; padding:5px 6px 6px; border-radius:var(--r-klein); border-left:3px solid var(--linie); background:var(--weiss);}
  .bs-details{grid-column:1 / -1; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px;}
  .bs-f{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .bs-f > span{font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-mute);}
  @media (max-width:900px){ .bs-details{grid-template-columns:repeat(3, minmax(0,1fr));} }
  @media (max-width:600px){ .bs-zeile{grid-template-columns:minmax(0,1fr) auto;} .bs-zeile > span:nth-child(2){grid-column:1 / -1;} .bs-details{grid-template-columns:repeat(2, minmax(0,1fr));} }
  .bs-zeile.warn{border-left-color:var(--warn);}
  .bs-zeile.laeuft{border-left-color:var(--blaugrau);}
  .bs-zeile.ok{border-left-color:var(--gruen);}
  .bs-feld{width:100%; box-sizing:border-box; font:inherit; font-size:12.5px; padding:5px 6px; border:1px solid var(--rand-feld); border-radius:var(--r-klein); background:var(--weiss); min-width:0;}
  .bs-feld:disabled{background:var(--creme-2); color:var(--text-3);}
  .bs-knoepfe{display:flex; align-items:center; gap:6px; justify-content:flex-end;}
  .bs-status{font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-mute); white-space:nowrap;}
  .bs-status.ok{color:var(--gruen-dark);} .bs-status.warn{color:var(--warn);} .bs-status.laeuft{color:var(--blaugrau);}
  .bs-warn{color:var(--warn); font-weight:600;}
  .bs-neu{display:flex; flex-direction:column; gap:8px; margin-top:6px;}
  .bs-neu input, .bs-neu select{font:inherit; font-size:13px; padding:6px 8px; border:1px solid var(--rand-feld); border-radius:var(--r-klein); background:var(--weiss); max-width:100%; box-sizing:border-box;}
  .bs-neu .bs-neu-lieferant{min-width:220px;}
  .bs-neu-label{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-3);}
  .bs-neu-offen summary{cursor:pointer; font-size:12.5px; color:var(--text-mute);}
  .bs-vorschlag{border:1px dashed var(--rand-feld); border-radius:var(--r-klein); padding:8px 10px; display:flex; flex-direction:column; gap:6px; background:var(--creme-2);}
  .bs-vs-zeile{display:grid; grid-template-columns:auto minmax(140px,1fr) minmax(200px,1.2fr); gap:8px; align-items:center; font-size:13px;}
  .bs-vs-zeile.vorhanden .bs-vs-inhalt{color:var(--text-faint);}
  .bs-vs-zeile .leise{grid-column:2 / -1;}
  @media (max-width:600px){ .bs-vs-zeile{grid-template-columns:auto 1fr;} .bs-vs-zeile select{grid-column:1 / -1;} .bs-neu .al-zeile{flex-direction:column; align-items:stretch;} .bs-neu .bs-neu-lieferant{min-width:0;} }
  .al-eingabe .al-neu{width:100%; box-sizing:border-box; font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--rand-feld); border-radius:var(--r-klein); background:var(--weiss);}
  .mw-arbeit{margin-top:8px; padding-top:8px; border-top:1px dashed var(--linie);}
  .al-cl h4{margin-bottom:6px;}
  /* Neue Protokolle auf der Übersicht (7.10.2026) */
  .prot-zeile{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid var(--linie); font-size:13px;}
  .prot-zeile:last-of-type{border-bottom:none;}
  .prot-text{min-width:0; flex:1;}
  .prot-text .leise{font-size:11.5px; color:var(--text-mute); margin-top:2px;}
  .prot-kunde{color:var(--braun-mittel); font-weight:600;}
  .prot-warn{color:var(--warn); font-weight:600;}
  .prot-knoepfe{display:flex; flex-direction:column; gap:6px; flex:none;}
  @media (max-width:600px){
    .prot-zeile{flex-wrap:wrap;}
    .prot-knoepfe{flex-direction:row; width:100%; justify-content:flex-end;}
  }
  .auftrag-warnplatz:empty{display:none;}
  button.auftrag-ware:hover{filter:brightness(.97);}
  button.auftrag-ware:focus-visible{outline:2px solid var(--gruen); outline-offset:1px;}
  .ware-stand{font-size:12.5px; line-height:1.5; color:var(--text-2);}
  .ware-stand b{color:var(--gruen-dark);}
  /* Die Notiz stand bisher nur in der Datenbank. Zwei Zeilen reichen, um zu
     sehen, dass etwas dransteht - der Rest steht im Formular. */
  .auftrag-notiz{
    font-size:11px; color:var(--text-mute); margin-top:6px;
    padding-left:8px; border-left:2px solid var(--linie);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* Ein Kundenname fuehrt ueberall dorthin, wo mehr zum Kunden steht: in die
     Akte. Erkennbar als Link, aber ohne volle Unterstreichung - in einer
     Liste waere die zu laut. */
  .kunde-link{
    color:var(--braun-hell); font-weight:600; text-decoration:none; cursor:pointer;
    border-bottom:1px dotted currentColor;
  }
  .kunde-link:hover{color:var(--braun); border-bottom-style:solid;}
  .kunde-link:focus-visible{outline:2px solid var(--gruen); outline-offset:2px; border-radius:2px;}
  .schieben{display:flex; gap:3px;}
  .schieben button{
    all:unset; cursor:pointer;
    width:20px; height:20px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; color:var(--text-mute); background:var(--weiss);
    border:1px solid var(--rand-feld);
    transition:background .15s, color .15s, border-color .15s;
  }
  .schieben button:hover:not(:disabled){background:var(--gruen); border-color:var(--gruen); color:var(--weiss);}
  .schieben button:focus-visible{outline:2px solid var(--braun); outline-offset:1px;}
  .schieben button:disabled{opacity:.3; cursor:default;}

  /* Stempeluhr */
  .stempel{text-align:center; padding:10px 0;}
  .stempel .uhrzeit{font-family:'JetBrains Mono',monospace; font-size:32px; font-weight:600; color:var(--braun-dark); margin-bottom:12px;}
  .stempel-btn{
    background:var(--gruen); color:white; border:none; padding:12px 22px;
    border-radius:var(--r); font-weight:600; font-size:13.5px; cursor:pointer; font-family:'IBM Plex Sans',sans-serif;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .stempel-btn:hover{transform:translateY(-1px); box-shadow:0 6px 14px rgba(31,160,56,0.25);}
  .stempel-btn:focus-visible{outline:3px solid var(--braun); outline-offset:2px;}
  .stempel-btn.aus{background:var(--warn);}
  .stempel-btn.aus:hover{box-shadow:0 6px 14px rgba(180,85,43,0.3);}
  .stempel-status{font-size:12px; color:var(--text-mute); margin-top:10px;}

  /* Zeiterfassung (22.9.2026) */
  .zt-stempel{min-width:220px; justify-content:center; font-size:16px; padding:14px 22px;}
  .zt-stempel:disabled{opacity:.6; cursor:wait; transform:none;}
  .zt-auswahl{display:flex; flex-direction:column; gap:7px; align-items:stretch; max-width:420px; margin:12px auto 0; text-align:left;}
  .zt-auswahl .btn-klein{text-align:left; white-space:normal; line-height:1.35; padding:9px 12px;}
  .zt-auswahl-frage{font-size:13px; font-weight:600; color:var(--text);}
  .zt-heute{display:flex; justify-content:space-around; gap:10px; border-top:1px solid var(--linie); padding-top:12px; margin-top:6px; text-align:center;}
  .zt-heute > div{display:flex; flex-direction:column; gap:2px;}
  .zt-label{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute);}
  .zt-wert{font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:600; color:var(--text);}
  .zt-klein{font-size:11.5px; color:var(--text-mute);}
  .saldo{font-family:'JetBrains Mono',monospace; font-weight:600; white-space:nowrap;}
  .saldo.gruen{color:var(--gruen-dark);}
  .saldo.warn{color:var(--warn);}
  .saldo.braun{color:var(--text-3);}
  .zt-tabelle-rahmen{overflow-x:auto; margin-top:14px;}
  .zt-tabelle{width:100%; border-collapse:collapse; font-size:12.5px;}
  .zt-tabelle th{font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute); text-align:left; padding:6px 8px; border-bottom:1px solid var(--linie);}
  .zt-tabelle td{padding:7px 8px; border-bottom:1px solid var(--linie); vertical-align:top;}
  .zt-tabelle td .tag{margin-top:3px; display:inline-block;}
  .zt-tabelle .zahl{text-align:right; font-family:'JetBrains Mono',monospace; white-space:nowrap;}
  .zt-tabelle tr.heute td{background:var(--gruen-bg);}
  .zt-tabelle tr.zukunft td, .zt-tabelle tr.frei td{color:var(--text-mute);}
  .zt-tabelle tfoot td{font-weight:600; border-bottom:none;}
  .zt-klickbar{cursor:pointer;}
  .zt-klickbar:hover, .zt-klickbar.aktiv{background:var(--creme-2);}
  .zt-freigaben{margin-top:16px; border-top:1px solid var(--linie); padding-top:10px;}
  .zt-unterkopf{display:flex; align-items:center; gap:10px; justify-content:space-between; font-family:'Archivo',sans-serif; font-weight:600; font-size:13.5px; color:var(--text); margin-bottom:6px;}
  .zt-soll{display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px;}
  .zt-soll-tag{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--text-mute); text-align:center;}
  .zt-soll-tag input{text-align:center; padding:8px 4px;}
  /* Modell- und Vorlagenzeilen: Soll, Pause, Urlaub und Knöpfe dürfen umbrechen,
     sonst schneidet das Handy sie rechts ab (23.9.2026). */
  .eintrag.zt-modell{flex-wrap:wrap; row-gap:4px;}
  .eintrag.zt-modell .tag{white-space:normal;}
  .zt-tabelle tr.zt-klickbar{cursor:pointer;}
  /* ===== Lager (23.9.2026) ===== */
  .lg-zeile{
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 12px; align-items:center;
    padding:10px 6px; border-bottom:1px solid var(--creme-2); cursor:pointer; border-radius:var(--r);
  }
  .lg-zeile:last-child{border-bottom:none;}
  .lg-zeile:hover, .lg-zeile.offen{background:var(--creme-2);}
  .lg-zeile.alt{opacity:.6;}
  .lg-nr{
    font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; white-space:nowrap;
    background:var(--gruen-dark); color:#fff; padding:4px 7px; border-radius:6px;
  }
  .lg-zeile.alt .lg-nr{background:var(--text-mute);}
  .lg-name{font-size:13.5px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-width:0;}
  .lg-unten{grid-column:2; font-size:11.5px; color:var(--text-mute); overflow-wrap:anywhere;}
  .lg-bestand{grid-row:1 / span 2; grid-column:3; text-align:right; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; white-space:nowrap;}
  .lg-bestand.null{color:var(--warn);}
  .lg-kopf{display:flex; align-items:flex-start; gap:12px; justify-content:space-between; margin-bottom:10px;}
  .lg-kopf .lg-nr{font-size:15px; padding:6px 10px;}
  .lg-kopf h3{margin:0;}
  .lg-titel{font-family:'Archivo',sans-serif; font-size:17px; font-weight:700; color:var(--braun-dark); letter-spacing:-.015em; margin:2px 0 4px;}
  .lg-fakten{font-size:12.5px; color:var(--text-3); line-height:1.6;}
  .lg-gross{font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:600; color:var(--text);}
  .lg-gross.null{color:var(--warn);}
  .lg-stand{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:12px 0;}
  .lg-aktionen{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px;}
  .lg-buchen{margin-bottom:12px;}
  .lg-buchen .stempel-btn{min-width:170px;}
  .lg-ok{font-size:12.5px; font-weight:600; color:var(--gruen-dark); background:#E4F5E7; border:1px solid #BFE0C6; border-radius:var(--r); padding:8px 12px; margin-bottom:12px;}
  .lg-achtung{font-size:12.5px; color:var(--achtung-fg); background:var(--achtung-bg); border:1px solid var(--achtung-rand); border-radius:var(--r); padding:9px 12px; margin-bottom:12px; grid-column:1/-1;}
  .lg-hinweis{grid-column:1/-1; font-size:11.5px; color:var(--text-mute);}
  .lg-bew{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:8px 0; border-bottom:1px solid var(--creme-2); font-size:12.5px;}
  .lg-bew:last-child{border-bottom:none;}
  .lg-bew .lg-menge{font-family:'JetBrains Mono',monospace; font-weight:600; text-align:right; white-space:nowrap;}
  .lg-bew .lg-menge.minus{color:var(--warn);}
  .lg-bew .lg-menge.plus{color:var(--gruen-dark);}
  .lg-bew .lg-klein{grid-column:1/-1; font-size:11.5px; color:var(--text-mute); overflow-wrap:anywhere;}
  .lg-bew.storniert .lg-art, .lg-bew.storniert .lg-menge{text-decoration:line-through; opacity:.55;}
  .lg-foto{float:right; width:112px; height:112px; object-fit:cover; border-radius:9px; margin:0 0 8px 12px; border:1px solid var(--rand-feld); background:var(--creme-2);}
  .lg-klick{cursor:pointer;}
  .lg-klick:hover{background:var(--creme-2);}
  .lg-leiste{display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color:var(--text-mute); margin-bottom:10px;}
  .lg-leiste b{color:var(--text); font-family:'JetBrains Mono',monospace;}
  @media (max-width:600px){
    .lg-bestand{grid-row:auto; grid-column:2; text-align:left;}
    .lg-kopf{flex-wrap:wrap;}
    .lg-buchen .stempel-btn{width:100%;}
  }
  /* ===== Gerätekatalog (3.10.2026) – die Zeilen nutzen .lg-zeile mit ===== */
  .kt-preis{grid-row:1 / span 2; grid-column:3; text-align:right; white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600;}
  .kt-preis small{display:block; font-size:11px; font-weight:500; color:var(--text-mute);}
  .kt-link{color:var(--gruen-dark); font-weight:600; text-decoration:none;}
  .kt-link:hover{text-decoration:underline;}
  .kt-preise{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:flex-end; margin:12px 0;}
  .kt-p span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute);}
  .kt-p b{font-family:'JetBrains Mono',monospace; font-size:15px; white-space:nowrap;}
  .kt-p.gross b{font-size:21px;}
  .kt-text{font-size:12.5px; color:var(--text-3); line-height:1.55; margin:8px 0; overflow-wrap:anywhere;}
  .kt-merkmale{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:4px 18px; margin:10px 0; font-size:12.5px;}
  .kt-merkmale div{border-bottom:1px solid var(--creme-2); padding:5px 0; overflow-wrap:anywhere;}
  .kt-merkmale span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-mute);}
  .kt-zahlen{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12.5px;}
  .kt-zahlen b{font-family:'JetBrains Mono',monospace;}
  .kt-probe{font-size:12px; color:var(--text-3); line-height:1.6; margin:4px 0; overflow-wrap:anywhere;}
  @media (max-width:600px){
    .kt-preis{grid-row:auto; grid-column:2; text-align:left;}
    .kt-preis small{display:inline; margin-left:8px;}
  }
  /* Inventur (Lager Stufe 4) */
  .inv-fortschritt{height:8px; background:var(--creme-2); border-radius:4px; overflow:hidden; margin:6px 0 12px;}
  .inv-fortschritt span{display:block; height:100%; background:var(--gruen);}
  .inv-zeile{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center;
    padding:10px 4px; border-bottom:1px solid var(--creme-2);}
  .inv-zeile:last-child{border-bottom:none;}
  .inv-zeile.gezaehlt .inv-name{color:var(--text-mute);}
  .inv-name{font-size:13.5px; font-weight:600; min-width:0; overflow-wrap:anywhere;}
  .inv-name small{display:block; font-weight:400; font-size:11.5px; color:var(--text-mute);}
  .inv-eingabe{display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
  .inv-eingabe input{width:84px; font-family:'JetBrains Mono',monospace; font-size:14px; padding:8px 10px;
    border:1px solid var(--rand-feld); border-radius:var(--r); text-align:right;}
  .inv-eingabe input:focus{outline:2px solid var(--gruen); outline-offset:1px;}
  .inv-ergebnis{grid-column:1/-1; font-size:12px; color:var(--text-3);}
  .inv-diff{font-family:'JetBrains Mono',monospace; font-weight:600;}
  .inv-diff.minus{color:var(--warn);}
  .inv-diff.plus{color:var(--gruen-dark);}
  .inv-tabelle{width:100%; border-collapse:collapse; font-size:12.5px;}
  .inv-tabelle th{text-align:left; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-mute); padding:6px; border-bottom:1px solid var(--rand-feld);}
  .inv-tabelle td{padding:6px; border-bottom:1px solid var(--creme-2);}
  .inv-tabelle td.z{text-align:right; font-family:'JetBrains Mono',monospace; white-space:nowrap;}
  .inv-tabelle tr.summe td{font-weight:700; border-top:2px solid var(--text); border-bottom:none;}
  .inv-tabelle-rahmen{overflow-x:auto;}
  #druck-inventur{display:none;}
  @media print{
    body.inventurmodus > *:not(#druck-inventur){display:none !important;}
    body.inventurmodus{background:#fff !important;}
    body.inventurmodus #druck-inventur{display:block; color:#000; font-family:'IBM Plex Sans',Arial,sans-serif;}
    #druck-inventur .inv-tabelle{font-size:10.5px;}
    #druck-inventur .inv-tabelle th, #druck-inventur .inv-tabelle td{padding:3px 5px; color:#000;}
    #druck-inventur tr{break-inside:avoid;}
  }
  @media (max-width:600px){
    .inv-zeile{grid-template-columns:minmax(0,1fr);}
    .inv-eingabe{justify-content:flex-start;}
  }
  /* Lageretiketten (Lager Stufe 2): Brother TD-4210D, 4 x 6 Zoll (102 x 152 mm),
     Thermodirekt – nur Schwarz. Deshalb ein schwarzer Balken statt CI-Grün:
     Grün käme als graues Raster heraus. Das Etikett ist 1,5 mm niedriger als
     das Papier, damit nie eine zweite, leere Seite entsteht. */
  #druck-etiketten{display:none;}
  @page etikett{size:4in 6in; margin:0;}
  .etikett{
    page:etikett; width:101.6mm; height:150.5mm; box-sizing:border-box; padding:4mm 5mm;
    display:flex; flex-direction:column; align-items:center; overflow:hidden;
    break-after:page; page-break-after:always; color:#000; background:#fff;
    font-family:'IBM Plex Sans',Arial,sans-serif;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .etikett:last-child{break-after:auto; page-break-after:auto;}
  .et-balken{width:100%; background:#000; color:#fff; text-align:center; padding:2.5mm 0 2mm; border-radius:2mm;}
  .et-balken b{display:block; font-family:'Archivo',Arial,sans-serif; font-size:30pt; font-weight:800; letter-spacing:.12em; line-height:1;}
  .et-balken span{display:block; font-size:13pt; font-weight:600; margin-top:1mm; letter-spacing:.02em;}
  .et-nr{font-family:'JetBrains Mono',monospace; font-size:30pt; font-weight:600; margin:2.5mm 0 1mm; line-height:1;}
  .et-qr{width:62mm; height:62mm; image-rendering:pixelated;}
  .et-scan{font-size:9pt; margin:1mm 0 2.5mm;}
  .et-bez{font-family:'Archivo',Arial,sans-serif; font-size:14pt; font-weight:700; text-align:center; line-height:1.15;
    max-height:2.4em; overflow:hidden; width:100%;}
  .et-fakten{font-size:9.5pt; text-align:center; margin-top:1.5mm; width:100%; overflow-wrap:anywhere;}
  .et-platz{font-size:12pt; font-weight:700; margin-top:2mm; border:0.4mm solid #000; border-radius:1.5mm; padding:1mm 3mm;}
  .et-fuss{margin-top:auto; width:100%; border-top:0.3mm solid #000; padding-top:1.5mm; font-size:8.5pt; display:flex; justify-content:space-between; gap:3mm;}
  @media print{
    body.etikettmodus > *:not(#druck-etiketten){display:none !important;}
    body.etikettmodus{background:#fff !important; margin:0 !important; padding:0 !important;}
    body.etikettmodus #druck-etiketten{display:block;}
  }
  /* Nachweis drucken: nur dieser Bereich (Stufe 4) */
  #druck-nachweis{display:none;}
  #druck-nachweis .dn-kopf{display:flex; justify-content:space-between; gap:20px; font-size:12px; border-bottom:2px solid var(--braun); padding-bottom:8px; margin-bottom:10px;}
  #druck-nachweis h2{font-family:'Archivo',sans-serif; font-size:18px; margin:6px 0 8px;}
  #druck-nachweis .dn-summen{margin:10px 0; font-size:12.5px; line-height:1.6;}
  #druck-nachweis .dn-unterschriften{display:flex; gap:40px; margin-top:50px;}
  #druck-nachweis .dn-unterschriften div{flex:1; border-top:1px solid #333; padding-top:4px; font-size:11px;}
  @media print{
    body.druckmodus > *:not(#druck-nachweis){display:none !important;}
    body.druckmodus{background:#fff !important;}
    body.druckmodus #druck-nachweis{display:block; color:#000;}
    body.druckmodus #druck-nachweis .zt-tabelle{font-size:10.5px;}
    body.druckmodus #druck-nachweis .zt-tabelle td, body.druckmodus #druck-nachweis .zt-tabelle th{padding:3px 5px;}
    body.druckmodus #druck-nachweis .zt-tabelle-rahmen{overflow:visible;}
  }
  .zt-abgleich-person{border-top:1px solid var(--linie); padding:12px 0;}
  .zt-abgleich-raster{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr); gap:6px 10px; align-items:center; margin:8px 0; font-size:13px;}
  .zt-abgleich-raster .zahl{font-family:'JetBrains Mono',monospace; text-align:right;}
  .zt-abgleich-raster input{min-width:0; width:100%; font:inherit; font-size:12.5px; border:1px solid var(--rand-feld); border-radius:var(--r); padding:6px 8px; text-align:right;}
  .zt-konto{margin-top:14px; border-top:1px solid var(--linie); padding-top:10px;}
  .zt-konto-zeile{display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:13px;}
  .zt-konto-zeile .zahl{font-family:'JetBrains Mono',monospace; white-space:nowrap;}
  .zt-hinweis{background:var(--achtung-bg); border:1px solid var(--achtung-rand); border-radius:var(--r); padding:10px 13px; margin:10px 0; font-size:13px; color:var(--achtung-fg);}
  .zt-tabelle tr.zt-klickbar:hover td, .zt-tabelle tr.aktiv td{background:var(--creme-2);}
  .zt-korr-panel{border:1px solid var(--linie); border-left:3px solid var(--braun); border-radius:var(--r); padding:12px 14px; margin-top:10px; background:var(--weiss);}
  .zt-korr-panel .eintrag .btn-klein{margin-left:4px;}
  .zt-korr{padding:9px 0; border-bottom:1px solid var(--linie); font-size:13px;}
  .zt-korr-kopf{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
  .zt-korr-entscheid{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
  .zt-korr-entscheid input{flex:1 1 180px; min-width:0; font:inherit; font-size:12.5px; border:1px solid var(--rand-feld); border-radius:var(--r); padding:6px 9px;}
  @media (max-width:600px){
    /* Handy: Die Saldo-Spalte muss ohne Wischen sichtbar sein. */
    .zt-tabelle{font-size:11.5px;}
    .zt-tabelle th, .zt-tabelle td{padding:6px 3px;}
    .zt-tabelle th{letter-spacing:.02em;}
    .zt-tabelle td .tag{font-size:9px; padding:1px 5px;}
    .zt-stempel{min-width:0; width:100%;}
    .zt-wert{font-size:16px;}
    /* Anwesenheitstafel: Name in eine eigene Zeile, Zeit, Saldo, Konto und
       Status darunter mit Umbruch – sonst ragen sie rechts aus der Karte
       und werden abgeschnitten (23.9.2026). */
    .eintrag.zt-tafel{flex-wrap:wrap; row-gap:4px; justify-content:flex-start;}
    .eintrag.zt-tafel > span:first-child{flex:1 1 100%;}
    .eintrag.zt-tafel .tag{white-space:normal;}
  }

  ul.check{list-style:none;}
  ul.check li{display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--creme-2);}
  ul.check li:last-child{border-bottom:none;}
  ul.check input{accent-color:var(--gruen); width:16px; height:16px;}

  /* ===== Vor-Ort-Checkliste =====
     Gebaut fuer das Handy in einer Kueche: grosse Ziele zum Antippen,
     nichts, was man zielgenau treffen muss. */
  .cl-zeile{
    display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center;
    padding:11px 12px; border:1px solid var(--holz-linie); border-radius:4px;
    margin-bottom:8px; cursor:pointer; background:var(--weiss);
  }
  .cl-zeile:hover{border-color:var(--gruen);}
  .cl-zeile .cl-wer{font-size:11.5px; color:var(--text-mute); grid-column:1;}
  .cl-zeile b{font-size:13.5px;}
  .cl-stand{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-mute); white-space:nowrap;}
  /* Ergebnis einer Weiche (9.10.2026): Text statt Zahl, darf umbrechen */
  .cl-ergebnis{white-space:normal; font-family:'IBM Plex Sans',sans-serif; font-size:11.5px; display:inline-block; max-width:220px;}
  .cl-zeile .cl-ergebnis{text-align:right;}
  .cl-kopf{
    display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline;
    padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--creme-2);
  }
  .cl-gruppe{margin-top:18px;}
  .cl-gruppe h4{
    font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.09em;
    text-transform:uppercase; color:var(--text-mute); margin-bottom:6px;
  }
  .cl-punkt{padding:10px 0; border-bottom:1px solid var(--creme-2);}
  .cl-punkt:last-child{border-bottom:none;}
  .cl-zeile1{display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start;}
  .cl-punkt input[type=checkbox]{accent-color:var(--gruen); width:22px; height:22px; margin-top:1px;}
  .cl-punkt label{font-size:13.5px; line-height:1.45; cursor:pointer;}
  .cl-nr{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-mute); margin-right:6px;}
  .cl-punkt.fertig label{color:var(--text-mute);}
  .cl-marke{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600;
    padding:1px 6px; border-radius:2px; margin-left:6px; white-space:nowrap;
    background:#F7E4DB; color:var(--warn);
  }
  .cl-unten{margin:8px 0 0 32px;}
  .cl-unten textarea{
    width:100%; min-height:52px; padding:8px 10px; font:inherit; font-size:13px;
    border:1px solid var(--holz-linie); border-radius:3px; background:var(--weiss); resize:vertical;
  }
  .cl-fotos{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
  .cl-foto{position:relative; width:88px; height:88px; border-radius:3px; overflow:hidden; border:1px solid var(--holz-linie);}
  .cl-foto img{width:100%; height:100%; object-fit:cover; display:block;}
  .cl-foto button{
    position:absolute; top:2px; right:2px; width:22px; height:22px; line-height:1;
    border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer;
  }
  .cl-fotoknopf{
    width:88px; height:88px; border:1px dashed var(--holz-linie); border-radius:3px;
    background:var(--creme-2); color:var(--text-mute); font-size:11.5px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .cl-fotoknopf:hover{border-color:var(--gruen); color:var(--gruen);}
  .cl-fotoknopf:disabled{opacity:.6; cursor:wait;}
  /* Fotos an der Aufgabe: dieselben Kacheln wie in der Checkliste. */
  .aufg-fotos .cl-fotos{margin-top:0;}
  .aufg-fotos .cl-foto a{display:block; width:100%; height:100%;}
  .aufg-fotos-info{font-size:11.5px; color:var(--text-mute); margin-top:6px;}
  .cl-abschluss{margin-top:22px; padding-top:16px; border-top:2px solid var(--holz-linie);}
  .cl-sig{
    border:1px solid var(--holz-linie); border-radius:3px; background:var(--weiss);
    touch-action:none; width:100%; max-width:420px; height:170px; display:block; cursor:crosshair;
  }
  .cl-abnahme{font-size:12px; color:var(--text-mute); line-height:1.5; margin:10px 0; max-width:520px;}
  .cl-fertig{
    background:#EAF6EC; border:1px solid #BFE0C6; border-radius:4px;
    padding:10px 14px; font-size:12.5px; color:#1F6B32; margin-bottom:12px;
  }
  /* Offline-Checklisten (24.9.2026): Stand der Übertragung. Grün = alles beim
     Server, Ocker = liegt noch auf dem Handy, Rostrot = abgelehnt. */
  .cl-status{font-size:12.5px; margin:-4px 0 12px;}
  .cl-st{white-space:normal;}
  .cl-st.ok{color:var(--gruen-dark);}
  .cl-st.wartet{color:var(--achtung-fg); font-weight:500;}
  .cl-st.warn{color:var(--warn); font-weight:500;}
  .cl-wer .cl-st{display:inline-block; font-size:11.5px; margin-left:4px;}
  /* Foto, das nur auf dem Handy liegt: gestrichelter Rahmen. */
  .cl-foto.lokal{border:2px dashed var(--achtung);}
  .cl-foto a.cl-foto-auf{display:block; width:100%; height:100%; cursor:zoom-in;}
  /* Grossbild (9.10.2026): Foto aus dem Protokoll in der Seite selbst, nicht
     in einem neuen Tab - laeuft auch als App am Handy und mit den noch
     nicht uebertragenen Fotos (blob:). Antippen oder Esc schliesst. */
  .bild-gross{position:fixed; inset:0; z-index:1200; background:rgba(20,12,8,.88); display:flex;
    align-items:center; justify-content:center; padding:16px; cursor:zoom-out;}
  .bild-gross img{max-width:100%; max-height:100%; object-fit:contain; border-radius:4px;
    box-shadow:0 8px 40px rgba(0,0,0,.5); background:#fff;}
  .bild-gross .bild-gross-zu{position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:50%;
    border:0; background:rgba(255,255,255,.92); color:var(--text); font-size:22px; line-height:40px; cursor:pointer;}
  .netz-hinweis{
    background:var(--achtung-bg); border:1px solid var(--achtung-rand); border-radius:var(--r);
    padding:10px 13px; margin-bottom:14px; font-size:12.5px; color:var(--achtung-fg); line-height:1.5;
  }
  .netz-hinweis .btn-klein{margin-left:6px;}
  /* Vorschau der Mail an den Kunden: genau der Text, der hinausgeht. */
  .cl-mailtext{
    white-space:pre-wrap; font-family:'IBM Plex Sans',sans-serif; font-size:12.5px;
    line-height:1.55; background:var(--weiss); border:1px solid var(--holz-linie);
    border-radius:3px; padding:12px 14px; margin:10px 0; max-width:620px;
    max-height:340px; overflow-y:auto;
  }
  .hinweis{
    grid-column:1/-1; background:#FBF6EC; border:1px dashed #D9BE8A; border-radius:4px;
    padding:12px 16px; font-size:12.5px; color:#7A5A1E;
  }
  @media (max-width:800px){
    /* minmax(0,1fr) statt 1fr: eine 1fr-Spalte waechst sonst bis zur
       Mindestbreite ihres Inhalts, und die waagerechte Navigationsreihe
       schob damit die ganze Seite ueber den Bildschirmrand hinaus. */
    /* Zwei Zeilen, Kopfzeile und Inhalt: ohne feste Zeilen verteilt das Grid
       die Mindesthoehe von 100vh auf beide Zeilen gleich, und auf einer kurzen
       Seite stand unter der Kopfzeile eine leere Flaeche. Die Schublade ist
       fest positioniert und belegt keine Zeile. */
    #app.aktiv{grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr;}
    /* Die Leiste wird zur Schublade (Peter Hertel, 28.9.2026): oben links
       ein Menueknopf in einer schmalen, angehefteten Kopfzeile, das Menue faehrt
       von links herein und zeigt die drei Gruppen samt Titeln und Zaehlern wie
       am Desktop, unten der Konto-Block mit Abmelden. Vorher standen alle
       Punkte als waagerecht scrollbare Reihe im Kopf - ohne Gruppentitel, und
       wer "Lager" suchte, musste erst nach rechts wischen. */
    .handy-kopf{
      display:flex; align-items:center; gap:10px;
      position:sticky; top:0; z-index:900;
      background:var(--braun-tief); color:var(--auf-dunkel-2);
      height:52px; padding:0 12px 0 6px;
    }
    .handy-kopf .brand{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .handy-kopf .brand small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .menue-knopf{
      all:unset; cursor:pointer; position:relative; flex:none;
      width:40px; height:40px; border-radius:9px;
      display:flex; align-items:center; justify-content:center; color:#F5EEE9;
    }
    .menue-knopf:hover{background:rgba(255,255,255,.08);}
    .menue-knopf:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
    .menue-knopf svg{width:22px; height:22px;}
    /* Gruener Punkt am Knopf: irgendein Zaehler im Menue steht ueber null
       (neue Aufgaben, offene Freigaben ...), ohne dass man es oeffnen muss. */
    .menue-punkt{
      position:absolute; top:6px; right:6px; width:10px; height:10px;
      border-radius:50%; background:var(--gruen); border:2px solid var(--braun-tief);
    }
    .menue-schleier{
      all:unset; position:fixed; inset:0; z-index:990;
      background:rgba(36,24,19,.45); display:none;
    }
    body.menue-offen .menue-schleier{display:block;}
    body.menue-offen{overflow:hidden;}   /* die Seite dahinter scrollt nicht mit */
    /* visibility haelt die zugeklappte Schublade aus der Tab-Reihenfolge und
       vor dem Vorlesen; die Verzoegerung laesst sie erst nach der Fahrt
       verschwinden. */
    aside{
      position:fixed; top:0; left:0; bottom:0; z-index:1000;
      width:min(300px, 84vw); height:auto;
      padding:12px 14px 14px; gap:18px;
      transform:translateX(-100%); visibility:hidden;
      transition:transform .22s ease, visibility 0s linear .22s;
    }
    body.menue-offen aside{transform:none; visibility:visible; transition:transform .22s ease, visibility 0s;}
    .marke-block .menue-zu{
      all:unset; cursor:pointer; margin-left:auto; flex:none;
      width:36px; height:36px; border-radius:8px; font-size:18px;
      display:flex; align-items:center; justify-content:center; color:#9A8779;
    }
    .marke-block .menue-zu:hover{color:var(--auf-dunkel); background:rgba(255,255,255,.08);}
    .marke-block .menue-zu:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
    /* Etwas enger als am Desktop (Gruppenabstand), damit die 14 Punkte des
       Chefs samt Konto-Block auf ein 812 px hohes Handy passen; auf kleineren
       scrollt die Schublade (overflow-y aus der Desktop-Regel). */
    nav{gap:16px;}
    @media (prefers-reduced-motion: reduce){ aside, body.menue-offen aside{transition:none;} }
    .kanban{grid-template-columns:repeat(2,1fr); min-width:0;}
    /* Auf dem Handy nur die Anfangszeit: „08:00–16:00" frisst ein Drittel
       der Zeile, und wann ein Termin endet, steht im Kalender selbst. */
    .term-bis{display:none;}
    /* Der Auftragsdurchlauf fällt auf dem Handy ganz weg (Entscheidung Peter
       Hertel, 9.9.2026). Sechs Stufen nebeneinander sind hier nicht lesbar,
       und nur das Massband auszublenden ließ einen leeren Kasten mit
       Überschrift stehen. */
    .pipeline{display:none;}
    /* Die Kennzahlen brechen auf zwei Spalten um, statt vier Zahlen auf
       375 px zu quetschen. */
    .uebersicht-split{grid-template-columns:1fr;}
    .kennzahlen{grid-template-columns:1fr 1fr !important; gap:10px;}
    .kennzahl .wert{font-size:26px;}
    main{padding:18px 16px 24px;}
    .top-row h2{font-size:22px;}
    /* Auf dem Handy braucht der Aufgabentitel die volle Breite - Frist,
       Status und Kuerzel wandern darunter, statt ihn zusammenzuquetschen. */
    .aufgabe{grid-template-columns:20px 1fr; align-items:start;}
    .aufg-rechts{grid-column:2; justify-content:flex-start; margin-top:7px;}
    .aufg-form{grid-template-columns:1fr;}
  }

  /* ---------- Spracheingabe (28.9.2026) ----------
     Ein einziger Knopf für alle Textfelder: Er erscheint rechts im Feld, das
     gerade den Fokus hat – so muss keine der vielen Vorlagen einen eigenen
     Knopf mitbringen. position:absolute in Seitenkoordinaten, NICHT fixed:
     Am Handy verschiebt die eingeblendete Tastatur den sichtbaren Ausschnitt,
     und ein fester Knopf stand dann irgendwo statt am Feld (Peter Hertel,
     28.9.2026). Auf der Seite verankert scrollt er mit dem Feld mit. */
  .diktat-knopf{position:absolute; z-index:950; width:30px; height:30px; padding:0;
    border-radius:50%; border:1px solid var(--rand-feld); background:var(--weiss);
    color:var(--braun); display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 1px 3px rgba(45,28,20,.12); box-sizing:border-box;}
  .diktat-knopf[hidden], .diktat-info[hidden]{display:none;}
  .diktat-knopf:hover{border-color:var(--braun-mittel); color:var(--braun-dark);}
  .diktat-knopf:focus-visible{outline:2px solid var(--gruen); outline-offset:1px;}
  .diktat-knopf svg{width:15px; height:15px; display:block;}
  .diktat-knopf.nimmt-auf{background:var(--warn); border-color:var(--warn); color:#fff;
    animation:diktatPuls 1.4s ease-in-out infinite;}
  .diktat-knopf.rechnet{color:var(--text-mute); cursor:progress;}
  .diktat-knopf.rechnet svg{animation:drehen 1s linear infinite;}
  @keyframes diktatPuls{0%,100%{box-shadow:0 0 0 0 rgba(180,85,43,.45);} 50%{box-shadow:0 0 0 7px rgba(180,85,43,0);}}
  @media (prefers-reduced-motion: reduce){ .diktat-knopf.nimmt-auf, .diktat-knopf.rechnet svg{animation:none;} }
  .diktat-info{position:absolute; z-index:951; max-width:min(320px, calc(100vw - 24px));
    background:var(--braun-tief); color:var(--auf-dunkel); font-size:12.5px; line-height:1.35;
    padding:6px 11px; border-radius:12px; box-shadow:0 4px 14px rgba(45,28,20,.18); pointer-events:none;}
  .diktat-info.fehler{background:var(--warn); color:#fff;}
  .diktat-info .zahl{font-family:'JetBrains Mono', monospace; font-weight:600;}
  /* Platz für den Knopf, solange das Feld ihn trägt – sonst läge er über dem
     Zeilenende. */
  .diktat-feld{padding-right:40px !important;}
  @media (pointer: coarse){
    .diktat-knopf{width:36px; height:36px;}
    .diktat-knopf svg{width:17px; height:17px;}
    .diktat-feld{padding-right:46px !important;}
  }
  /* ===== Mitwachsende Textbereiche (28.9.2026) =====
     Jeder Textbereich im Dashboard wächst mit seinem Inhalt (textfeldWachsen);
     von Hand ziehen entfällt deshalb. Am Handy scrollte ein einzeiliges Feld
     sonst waagerecht, und ein fester Textbereich zeigte nur einen Ausschnitt.
     .einzeilig: startet mit einer Zeile (Vermerke, Gründe, Bemerkungen), auch in
     .feld, wo Textbereiche sonst 56 px hoch beginnen. */
  #app textarea{resize:none; overflow-y:hidden; line-height:1.4;}
  #app textarea.einzeilig{min-height:0;}
  #app textarea.voll{overflow-y:auto;}
  .zt-korr-entscheid textarea{flex:1 1 180px; min-width:0; font:inherit; font-size:12.5px; border:1px solid var(--rand-feld); border-radius:var(--r); padding:6px 9px; background:var(--weiss); color:var(--text); line-height:1.4;}
  .zt-korr-entscheid textarea:focus{outline:2px solid var(--gruen); outline-offset:1px; border-color:var(--gruen);}
  .neu-zeile textarea.einzeilig{flex:1; min-width:150px;}
  /* Handy: Das Notizfeld bekommt die ganze Zeile, der Knopf rückt darunter –
     neben dem Knopf blieben nur rund 200 px, und um die geht es hier. */
  @media (max-width:600px){ .neu-zeile textarea.einzeilig{flex-basis:100%;} }

  /* ===== Verlauf in der Kundenakte (28.9.2026): Notizen, Anrufe, E-Mails ===== */
  .vl-filter{margin-bottom:8px;}
  .vl-stand{font-size:11.5px; color:var(--text-mute); margin:2px 0 6px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center;}
  .vl-stand.fehler{color:var(--warn);}
  .verlauf-eintrag .vl-art{display:inline-block; width:18px; text-align:center; margin-right:4px; font-style:normal;}
  .verlauf-eintrag .vl-richtung{
    font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:var(--text-mute); margin-right:6px;
  }
  .verlauf-eintrag .vl-betreff{font-weight:600; color:var(--text); overflow-wrap:anywhere;}
  .verlauf-eintrag a.vl-betreff{color:var(--gruen-dark); text-decoration:none;}
  .verlauf-eintrag a.vl-betreff:hover{text-decoration:underline;}
  .verlauf-eintrag .vl-vorschau{font-size:12.5px; color:var(--text-3); margin-top:3px; overflow-wrap:anywhere;}
  .verlauf-eintrag .vl-text{overflow-wrap:anywhere;}
  .verlauf-eintrag .tag{margin-left:6px; vertical-align:middle;}
  .neu-zeile select.vl-art-wahl{
    font-family:'IBM Plex Sans',sans-serif; font-size:13px; border:1px solid var(--holz-linie);
    border-radius:3px; padding:7px 9px; background:var(--weiss); color:var(--text);
  }
  .neu-zeile select.vl-art-wahl:focus{outline:2px solid var(--gruen); outline-offset:1px;}

  /* ===== Doppelte Kundenakten (28.9.2026) ===== */
  .dub-gruppe{border:1px solid var(--rand-karte); border-radius:var(--r); padding:8px 10px 4px; margin-bottom:10px; background:var(--weiss);}
  .dub-gruppe .dub-grund{font-size:11px; color:var(--text-mute); margin-bottom:4px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
  .dub-gruppe .kunde-zeile{border-bottom:1px solid var(--linie);}
  .dub-gruppe .kunde-zeile:last-child{border-bottom:none;}
  .dub-vorschau{background:var(--innen); border-radius:var(--r); padding:10px 12px; margin-top:10px; font-size:13px;}
  .dub-vorschau ul{margin:4px 0 8px 18px; padding:0;}
  .dub-vorschau li{margin:2px 0;}
  .dub-vorschau label{display:block; margin:4px 0; cursor:pointer;}
  .dub-vorschau .warn-text{color:var(--warn);}
  .dub-treffer .kunde-zeile{cursor:pointer;}
  .dub-knoepfe{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center;}
  .btn-rot{all:unset; cursor:pointer; font-size:12px; font-weight:600; padding:6px 11px; border-radius:var(--r-klein); color:var(--warn); border:1px solid var(--warn); box-sizing:border-box;}
  .btn-rot:hover{background:#FBE9E0;}
  .btn-rot:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}

  /* ---------- Eingangsrechnungen (26.10.2026) ---------- */
  .er-kenn{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:12px;}
  .er-kenn > div{background:var(--fuellung); border-radius:9px; padding:10px 12px; display:flex; flex-direction:column; gap:2px;}
  .er-kenn .wert{font-family:'JetBrains Mono', monospace; font-weight:600; font-size:17px; color:var(--text);}
  .er-kenn .label{font-size:11.5px; color:var(--text-mute);}
  .er-kenn > div.warn .wert{color:var(--warn);}
  .er-kenn > div.bald .wert{color:#C9A227;}
  .er-tabelle td.er-faellig{white-space:nowrap;}
  .er-post .er-zeile{display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 12px; padding:9px 10px; border-bottom:1px solid var(--linie); align-items:start;}
  .er-post .er-zeile:last-child{border-bottom:none;}
  .er-post .er-zeile.nicht-gefunden{box-shadow:inset 3px 0 0 var(--warn);}
  .er-zeile .er-kopf{font-weight:600; overflow-wrap:anywhere;}
  .er-zeile .er-unter{font-size:12px; color:var(--text-mute); margin-top:2px; overflow-wrap:anywhere;}
  .er-zeile .er-unter.warn{color:var(--warn);}
  .er-zeile .er-vorschau{font-size:12.5px; margin-top:3px; overflow-wrap:anywhere;}
  .er-zeile .er-rechts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; flex:0 0 auto; max-width:45%;}
  .er-knoepfe{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:7px;}
  .er-knoepfe select{width:auto; min-width:0; max-width:100%; padding:4px 6px; font-size:12px;}
  .er-vorschau .btn-klein{margin-left:6px;}
  @media (max-width:600px){ .er-post .er-zeile{grid-template-columns:1fr;} .er-zeile .er-rechts{max-width:100%; justify-content:flex-start;} }

  /* Angebotsmodus (31.10.2026): Bearbeiten einer Angebotsseite */
  .ang-pruefung{display:grid; gap:4px; background:var(--creme-2); border:1px solid var(--holz-linie); border-radius:var(--r); padding:10px 12px; margin-bottom:12px; font-size:13px;}
  .ang-fehlt{color:var(--warn); font-weight:600;}
  .ang-achtung{color:#8A6A12;}
  .ang-hinweis{color:var(--text-mute);}
  .ang-leiste{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0;}
  .ang-ungespeichert{font-size:12px; font-weight:600; color:#8A6A12; background:#FBEDD7; border-radius:20px; padding:3px 10px;}
  .ang-link{display:flex; gap:8px; align-items:center; margin:4px 0 6px;}
  .ang-link input{flex:1; min-width:0; font-family:'IBM Plex Sans',sans-serif; font-size:13px; border:1px solid var(--rand-feld); border-radius:var(--r); padding:8px 10px; background:var(--weiss); color:var(--text);}
  .ang-bilder{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px,1fr)); gap:10px;}
  .ang-bild{border:1px solid var(--holz-linie); border-radius:var(--r); overflow:hidden; background:var(--weiss); display:flex; flex-direction:column;}
  .ang-bild img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--creme-2);}
  .ang-bild-unter{display:flex; justify-content:space-between; align-items:center; gap:6px; padding:6px 8px; font-size:12px; color:var(--text-mute);}
  .ang-bild-unter span:first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .ang-bild-unter .btn-klein{padding:3px 8px; margin-left:4px;}
  .ang-bild-neu{all:unset; box-sizing:border-box; border:1.5px dashed var(--holz-linie); border-radius:var(--r); min-height:120px; display:grid; place-items:center; text-align:center; padding:12px; font-size:13px; font-weight:600; color:var(--gruen-dark); cursor:pointer;}
  .ang-bild-neu:hover{background:var(--creme-2);}
  .ang-bild-neu:focus-visible{outline:2px solid var(--gruen); outline-offset:2px;}
  .ang-bild-neu[disabled]{color:var(--text-mute); cursor:default;}
  .aufg-form.ang-teil{margin:0 0 10px;}
  .ang-bild-unter input.av-bildtitel{flex:1 1 auto; min-width:0; font:inherit; font-size:12px; padding:4px 6px; border:1px solid var(--holz-linie); border-radius:6px; background:var(--weiss);}
  .ang-rate{display:grid; grid-template-columns:110px 1fr auto auto; gap:10px; align-items:end; margin:8px 0;}
  .ang-rate-betrag{font-family:'JetBrains Mono',monospace; font-size:13px; padding-bottom:10px; white-space:nowrap;}
  .ang-rate .btn-klein{margin-bottom:6px;}
  .ang-weg{margin-left:auto;}
  @media (max-width:600px){
    .ang-rate{grid-template-columns:80px 1fr; }
    .ang-rate-betrag{grid-column:2; padding:0;}
    .ang-rate .btn-klein{grid-column:2; justify-self:start;}
    .ang-link{flex-wrap:wrap;}
    .ang-link input{flex:1 1 100%;}
    .ang-weg{margin-left:0;}
  }

  /* Lieferanten (4.11.2026) */
  /* Zwei Reiter über die ganze Breite; ohne overflow, sonst zeigt die
     Leiste wegen des -1px-Rands der Knöpfe einen Scrollbalken. */
  .kontakte-reiter{grid-column:1/-1; overflow:visible; margin:-4px 0 4px;}
  .lf-zwischen{font-size:11.5px; font-weight:600; color:var(--text-mute); text-transform:uppercase; letter-spacing:.04em; border-top:1px solid var(--holz-linie); padding-top:10px; margin-top:2px;}
  .lf-stamm{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:10px 18px; margin:0 0 12px; font-size:13px;}
  .lf-stamm .lf-breit{grid-column:1/-1;}
  .lf-l{display:block; font-size:11px; color:var(--text-mute); margin-bottom:2px;}
  .lf-notiz{white-space:pre-line; overflow-wrap:anywhere;}
  .lf-ap{padding:8px 0; border-bottom:1px solid var(--linie);}
  .lf-ap:last-of-type{border-bottom:none;}
  .lf-ap-kopf{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .lf-ap-knoepfe{margin-left:auto; display:inline-flex; gap:6px;}
  .lf-rot{color:var(--warn); font-weight:600;}
  #lf-akte a:not(.tel):not(.mail):not(.wa){color:var(--gruen-dark); text-decoration:none; overflow-wrap:anywhere;}
  #lf-akte a:not(.tel):not(.mail):not(.wa):hover{text-decoration:underline;}
  .lf-lex-zeile{display:flex; gap:8px; align-items:flex-start; padding:5px 0; font-size:13px; cursor:pointer;}
  .lf-lex-zeile input[type=checkbox]{all:revert; width:16px; height:16px; margin:2px 0 0; flex:none; accent-color:var(--gruen);}
  .lf-lex-zeile span{min-width:0; overflow-wrap:anywhere;}