/* Aufbau der Intern-App: Seitenhuelle, Panel, Startseite. Gestaltung kommt von Tabler 1.0.0.
   Fabian, 08.11.2026: Bis zum Stichtag gilt das Standard-Design von Tabler (Testversion); die --app-*-Token
   zeigen hier auf Tabler-Variablen und folgen damit auch dem Dunkelmodus von Tabler. design-vo.css setzt sie
   unter <html data-design="vo"> auf die VO-Werte (Snippet 22). Bausteine verwenden nur --app-*, nie Farben direkt. */

@font-face{font-family:'Inter Var';src:url('vendor/inter/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --app-flaeche:var(--tblr-body-bg); --app-karte:var(--tblr-bg-surface); --app-flaeche-2:var(--tblr-bg-surface-secondary);
  --app-hover:rgba(var(--tblr-primary-rgb),.04);
  --app-text:var(--tblr-body-color); --app-text-2:var(--tblr-secondary); --app-text-3:var(--tblr-tertiary-color, var(--tblr-secondary));
  --app-rahmen:var(--tblr-border-color); --app-rahmen-feld:var(--tblr-border-color); --app-rahmen-stark:var(--tblr-border-color-dark, var(--tblr-border-color)); --app-linie-fein:var(--tblr-border-color-translucent, var(--tblr-border-color));
  --app-blau:var(--tblr-primary); --app-blau-rgb:var(--tblr-primary-rgb); --app-blau-hell:var(--tblr-primary-lt);
  --app-aktion:var(--tblr-primary); --app-auf-aktion:#fff;
  --app-ok:var(--tblr-success); --app-ok-hell:var(--tblr-success-lt);
  --app-warnung:var(--tblr-warning); --app-warnung-hell:var(--tblr-warning-lt);
  --app-alarm:var(--tblr-danger); --app-alarm-hell:var(--tblr-danger-lt);
  --app-extern:var(--tblr-purple); --app-extern-hell:var(--tblr-purple-lt);
  --app-schatten:0 8px 16px rgba(24,36,51,.08);
  --app-logo-filter:none;
  --app-knopf-radius:var(--tblr-border-radius);
  --app-dauer-kurz:150ms; --app-dauer-mittel:220ms; --app-kurve:cubic-bezier(.16,1,.3,1);
  --app-tipp:44px;
  /* Fabian, 08.11.2026: Signalfarbe fuer Handlungsbedarf (Stylesheet-Beschluss 2); im VO-Design #FF4D06. */
  --app-signal:var(--tblr-orange); --app-signal-text:var(--tblr-orange); --app-signal-hell:var(--tblr-orange-lt);
  --app-blau-hover:var(--tblr-primary); --app-fokus:rgba(var(--tblr-primary-rgb),.22);
  --app-ebene-1:none; --app-ebene-2:none; --app-ebene-menue:0 12px 32px rgba(24,36,51,.14); --app-ebene-modal:0 24px 48px rgba(24,36,51,.18);
  --schrift:var(--tblr-font-sans-serif);
}
:root[data-bs-theme="dark"]{--app-logo-filter:brightness(0) invert(1); --app-schatten:0 8px 16px rgba(0,0,0,.28)}

body{background:var(--app-flaeche); color:var(--app-text); margin:0}
h1,h2,h3{text-wrap:balance; color:var(--app-text)}
:focus-visible{outline:2px solid var(--app-blau); outline-offset:2px}
[hidden]{display:none!important}
.btn{gap:8px}
.btn svg{width:16px; height:16px}
.card-header{gap:16px; flex-wrap:wrap}
.testversion{white-space:nowrap}


/* ---------- Statuspillen: Farbe = bei wem der Ball liegt (Statusfarben-Snippet, 07.10.2026) ---------- */
.st{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; line-height:1; padding:6px 10px; border-radius:100px; white-space:nowrap; border:1px solid transparent}
.st::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.st-ruhig{background:var(--app-flaeche-2); color:var(--app-text-2)}
.st-blau{background:var(--app-blau-hell); color:var(--app-blau)}
.st-extern{background:var(--app-extern-hell); color:var(--app-extern)}
.st-warnung{background:var(--app-warnung-hell); color:var(--app-warnung)}
.st-ok{background:var(--app-ok-hell); color:var(--app-ok)}
.st-alarm{background:var(--app-alarm-hell); color:var(--app-alarm)}
.st-beendet{background:transparent; color:var(--app-text-3); border-color:var(--app-rahmen-feld)}

/* ---------- Huelle: Seitenleiste links, Kopf oben, Inhalt ---------- */
.schale{display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh}
.leiste{background:var(--app-karte); border-right:1px solid var(--app-rahmen); display:flex; flex-direction:column; gap:24px;
  padding:24px 16px 16px; position:sticky; top:0; height:100vh; overflow:hidden}
.leiste .logo{display:block; padding:0 8px}
.leiste .logo img{width:112px; height:38px; display:block; filter:var(--app-logo-filter)}  /* 13.11.2026: Wortmarke VO Intern, 1192 x 406 */
.leiste nav{display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; scrollbar-width:none; overscroll-behavior:contain}
.leiste nav::-webkit-scrollbar{display:none}
.leiste .gruppe{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:none; border:0; font:inherit; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--app-text-3); padding:16px 8px 4px; min-height:44px; white-space:nowrap; cursor:pointer; text-align:left}
.leiste .gruppe:hover{color:var(--app-text)}
.leiste .gruppe svg{width:16px; height:16px; flex:none; transition:transform var(--app-dauer-kurz) var(--app-kurve)}
.leiste .gruppe[aria-expanded="false"] svg{transform:rotate(-90deg)}
.leiste .sektion-punkte{display:flex; flex-direction:column; gap:4px}
.leiste .sektion-punkte[hidden]{display:none}
.kopf .titel .krume{color:var(--app-text-3); font-weight:400}
.kopf .titel .krume-trenn{color:var(--app-text-3); margin:0 8px}
@media (max-width:640px){.kopf .titel .krume,.kopf .titel .krume-trenn{display:none}}
.leiste .punkt{display:flex; align-items:center; gap:12px; padding:8px; border-radius:6px; color:var(--app-text-2); text-decoration:none; min-height:40px}
.leiste a.punkt:hover{background:var(--app-flaeche); color:var(--app-text)}
.leiste .punkt.aktiv{background:var(--app-blau-hell); color:var(--app-blau); font-weight:600}
.leiste .punkt.folgt{color:var(--app-text-3); cursor:default}
.leiste .punkt svg{width:18px; height:18px; flex:none}
.leiste .punkt .hinweis{margin-left:auto; font-size:12px; color:var(--app-text-3)}
/* Benutzermenue unten in der Seitenleiste (Fabian, 10.11.2026: alles, was die Person betrifft, nach unten; der Kopf bleibt leer) */
.nutzer-wrap{position:relative; flex:none; border-top:1px solid var(--app-rahmen); padding-top:12px; margin:0 -16px; padding-left:16px; padding-right:16px}
.nutzer-knopf{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:12px; width:100%; padding:8px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--app-text-2); min-width:0}
.nutzer-knopf:hover,.nutzer-knopf[aria-expanded="true"]{background:var(--app-flaeche); color:var(--app-text)}
.nutzer-knopf:focus-visible{outline:2px solid var(--app-blau); outline-offset:2px}
.nutzer-knopf .wer{flex:1; min-width:0; text-align:left}
.nutzer-knopf .wer b{display:block; color:var(--app-text); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nutzer-knopf .wer span{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nutzer-knopf>svg{width:16px; height:16px; flex:none; color:var(--app-text-3)}
.nutzer-menue{position:absolute; left:8px; right:8px; bottom:calc(100% - 4px); z-index:30; padding:6px; box-shadow:var(--app-schatten); max-height:calc(100vh - 120px); overflow:auto}
.nutzer-menue[hidden]{display:none}
.nutzer-kopf{padding:8px 10px 10px; border-bottom:1px solid var(--app-linie-fein); margin-bottom:4px; min-width:0}
.nutzer-kopf b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nutzer-kopf small{display:block; color:var(--app-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nutzer-eintrag{all:unset; box-sizing:border-box; display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border-radius:6px; cursor:pointer; color:var(--app-text); font-size:14px; min-height:36px}
.nutzer-eintrag:hover,.nutzer-eintrag:focus-visible{background:var(--app-flaeche)}
.nutzer-eintrag:focus-visible{outline:2px solid var(--app-blau); outline-offset:-2px}
.nutzer-eintrag svg{width:16px; height:16px; flex:none; color:var(--app-text-2)}
.nutzer-zeile{padding:8px 10px}
.nutzer-titel{display:block; font-size:12px; color:var(--app-text-3); margin-bottom:6px}
.nutzer-trenner{height:1px; background:var(--app-linie-fein); margin:4px 0}
.wahl-gruppe{display:flex; border:1px solid var(--app-rahmen-feld); border-radius:6px; overflow:hidden; background:var(--app-karte)}
.wahl-gruppe button{all:unset; box-sizing:border-box; flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; padding:0 8px; cursor:pointer; font-size:13px; color:var(--app-text-2); border-left:1px solid var(--app-rahmen-feld)}
.wahl-gruppe button:first-child{border-left:0}
.wahl-gruppe button:hover{background:var(--app-flaeche)}
.wahl-gruppe button:focus-visible{outline:2px solid var(--app-blau); outline-offset:-2px}
.wahl-gruppe button[aria-pressed="true"]{background:var(--app-blau-hell); color:var(--app-blau); font-weight:600}
.wahl-gruppe svg{width:15px; height:15px; flex:none}
.nutzer-menue .wahl-gruppe button span{display:none}  /* im engen Menue nur Symbole, der Name steht im Tooltip */
.mein-profil{display:flex; flex-direction:column; gap:16px}
.mein-profil .datagrid{--tblr-datagrid-padding:16px; --tblr-datagrid-item-width:11rem}
.mein-titel{font-size:14px; font-weight:600; margin:8px 0 0}
.mein-profil .wahl-gruppe{align-self:flex-start; min-width:min(100%,360px)}

.haupt{min-width:0; display:flex; flex-direction:column}
.kopf{position:sticky; top:0; z-index:5; background:var(--app-karte); border-bottom:1px solid var(--app-rahmen);
  display:flex; align-items:center; gap:16px; min-height:64px; padding:0 24px}
.kopf .titel{font-weight:600; font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kopf .rechts{margin-left:auto; display:flex; gap:8px; align-items:center}
.kopf .hilfe-knopf{order:-1; text-decoration:none}  /* Hilfe zur Seite (11.11.2026): stiller runder Knopf, fuehrt zum Abschnitt der Seite in /hilfe */
.rund{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100px; border:1px solid var(--app-rahmen);
  background:var(--app-karte); color:var(--app-text-2); cursor:pointer; padding:0}
.rund:hover,.rund[aria-expanded="true"]{color:var(--app-text); border-color:var(--app-rahmen-feld)}
.rund svg{width:18px; height:18px}
.nur-handy{display:none!important}

.inhalt{padding:32px 24px 64px; display:flex; flex-direction:column; gap:24px; max-width:1400px; width:100%; container-type:inline-size}
.seitenkopf{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px}
.seitenkopf .vor{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--app-text-3); margin-bottom:4px}
.seitenkopf h1{font-size:31px; line-height:1.15; margin:0}
.seitenkopf p{margin:8px 0 0; color:var(--app-text-2); max-width:62ch}
.seitenkopf .aktionen{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}

.raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}
.stapel{display:flex; flex-direction:column; gap:16px}
.karte-innen{display:flex; flex-direction:column; gap:16px; padding:24px}
.karte-innen h2{font-size:20px; margin:0}
.erkl{margin:0; color:var(--app-text-2); font-size:14px; max-width:62ch}
.klein{font-size:13px; color:var(--app-text-3)}
.liste-bereiche{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.liste-bereiche li{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--app-linie-fein)}
.liste-bereiche li:first-child{border-top:0}
.liste-bereiche li .st{margin-left:auto}
.liste-bereiche svg{width:18px; height:18px; color:var(--app-text-3); flex:none}
.pruefung{display:grid; grid-template-columns:auto 1fr; gap:8px 16px; align-items:center; font-size:14px}
.ladepunkt{display:inline-block; width:16px; height:16px; border:2px solid var(--app-rahmen-feld); border-top-color:var(--app-blau); border-radius:50%; animation:drehen .8s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
.meldung{border-radius:8px; padding:12px 16px; font-size:14px}
.meldung.alarm{background:var(--app-alarm-hell); color:var(--app-alarm)}
.meldung.ok{background:var(--app-ok-hell); color:var(--app-ok)}

.schleier{position:fixed; inset:0; background:rgba(15,20,27,.32); opacity:0; pointer-events:none; transition:opacity var(--app-dauer-mittel); z-index:25}

/* ---------- Anmeldeseite ---------- */
.anmelden{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.anmelden .card{width:min(420px,100%)}
.anmelden .karte-innen{padding:32px; gap:24px}
.anmelden img{width:164px; height:56px; filter:var(--app-logo-filter)}  /* 13.11.2026: Wortmarke VO Intern */
.anmelden h1{font-size:25px; margin:0}
.btn-google{width:100%; justify-content:center; min-height:48px; font-size:16px}
.btn-google .g{width:20px; height:20px}

/* ---------- iPad und Handy (Snippet 22, 07.11.2026: oefter am Handy bzw. iPad) ---------- */
@media (max-width:900px){
  .schale{grid-template-columns:minmax(0,1fr)}
  .leiste{position:fixed; inset:0 auto 0 0; width:280px; z-index:40; transform:translateX(-100%); transition:transform var(--app-dauer-mittel) var(--app-kurve); box-shadow:var(--app-schatten)}
  body.leiste-offen .leiste{transform:none}
  body.leiste-offen .schleier{opacity:1; pointer-events:auto}
  .nur-handy{display:inline-flex!important}
  .raster{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .kopf{padding:0 16px}
  .inhalt{padding:24px 16px 48px}
  .seitenkopf h1{font-size:25px}
  .seitenkopf .aktionen{margin-left:0}
}
@media (pointer:coarse){
  .form-control,.form-select{font-size:16px}
  .btn{min-height:var(--app-tipp)}
  .rund{width:var(--app-tipp); height:var(--app-tipp)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}}

/* ---------- Detail-Panel (rechts) und Hinweis unten, fuer alle Bereiche (aus Snippet 33) ---------- */
.panel{position:fixed; inset:0 0 0 auto; width:min(520px,100%); z-index:30; background:var(--app-karte); border-left:1px solid var(--app-rahmen);
  box-shadow:var(--app-schatten); display:flex; flex-direction:column; transform:translateX(100%); visibility:hidden;
  transition:transform var(--app-dauer-mittel) var(--app-kurve), visibility 0s linear var(--app-dauer-mittel)}
body.panel-offen .panel{transform:none; visibility:visible; transition:transform var(--app-dauer-mittel) var(--app-kurve)}
body.panel-offen .schleier{opacity:1; pointer-events:auto}
.panel-griff{display:none}
@media (min-width:1024px){
  .panel-griff{display:block; position:absolute; left:-4px; top:0; bottom:0; width:9px; cursor:col-resize; z-index:2; touch-action:none}
  .panel-griff::after{content:""; position:absolute; left:4px; top:0; bottom:0; width:2px; background:transparent; transition:background var(--app-dauer-kurz, 120ms)}
  .panel-griff:hover::after,.panel-griff:focus-visible::after,body.panel-zieht .panel-griff::after{background:var(--app-blau)}
  .panel-griff:focus-visible{outline:none}
  body.panel-zieht{cursor:col-resize; user-select:none}
  body.panel-zieht .panel, body.panel-zieht .haupt{transition:none}
}
.panel-kopf{display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--app-rahmen)}
.panel-titel{min-width:0; flex:1}
.panel-titel b{display:block; font-weight:600; font-size:18px; line-height:1.3}
.panel-titel small{display:block; color:var(--app-text-3); font-size:13px}
.panel-rumpf{overflow:auto; padding:24px; display:flex; flex-direction:column; gap:24px}
.abschnitt-titel{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--app-text-3); font-weight:600; margin:0 0 8px}
.schritt{background:var(--app-flaeche); border:1px solid var(--app-rahmen); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:12px}
.schritt b{font-weight:600; font-size:16px}
.knopfreihe{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.btn-gefahr{--tblr-btn-color:var(--app-alarm); --tblr-btn-border-color:var(--app-alarm); --tblr-btn-hover-color:var(--app-alarm); --tblr-btn-hover-bg:var(--app-alarm-hell); --tblr-btn-bg:transparent}
.btn-gefahr.voll{--tblr-btn-bg:var(--app-alarm); --tblr-btn-color:#fff; --tblr-btn-hover-bg:var(--app-alarm); --tblr-btn-hover-color:#fff}
.fehlerzeile{margin:0; color:var(--app-alarm); font-size:14px}
.infozeile{margin:0; color:var(--app-text-2); font-size:14px}
.infozeile a{color:var(--app-blau)}
.daten{display:grid; grid-template-columns:minmax(96px,auto) minmax(0,1fr); gap:8px 16px; margin:0; font-size:15px}
.daten dt{color:var(--app-text-3); font-weight:400; font-size:13px; padding-top:2px}
.daten dd{margin:0; white-space:pre-wrap; overflow-wrap:anywhere}
.daten .zweit{color:var(--app-text-3)}
.verlauf{list-style:none; margin:0; padding:0}
.verlauf li{display:grid; grid-template-columns:16px minmax(0,1fr); gap:12px; position:relative; padding-bottom:12px; color:var(--app-text-3); font-size:14px}
.verlauf li:not(:last-child)::after{content:""; position:absolute; left:7px; top:18px; bottom:0; width:2px; background:var(--app-linie-fein)}
.verlauf .punkt{width:16px; height:16px; border-radius:50%; border:2px solid var(--app-rahmen-feld); background:var(--app-karte); margin-top:3px}
.verlauf li.fertig{color:var(--app-text-2)}
.verlauf li.fertig .punkt{background:var(--app-blau); border-color:var(--app-blau)}
.verlauf li.jetzt{color:var(--app-text); font-weight:600}
.verlauf li.jetzt .punkt{border-color:var(--app-blau); box-shadow:0 0 0 4px rgba(var(--app-blau-rgb),.18)}
.verlauf li.laeuft .punkt{animation:pulsieren 1.6s var(--app-kurve) infinite}
.verlauf small{display:block; font-weight:400; color:var(--app-text-3)}
.verlauf small.gesperrt{color:var(--app-alarm)}
@keyframes pulsieren{50%{box-shadow:0 0 0 8px rgba(var(--app-blau-rgb),0)}}
.formular{display:flex; flex-direction:column; gap:12px; margin-top:12px}
details.klappe{border:1px solid var(--app-rahmen); border-radius:8px; padding:12px 16px}
details.klappe summary{cursor:pointer; font-weight:600}
.konto .summe{font-size:25px; line-height:1.2; font-variant-numeric:tabular-nums; font-weight:600}
.konto .summe.offen{color:var(--app-alarm)}
.konto .summe.guthaben{color:var(--app-ok)}
.konto table{width:100%; font-size:14px; font-variant-numeric:tabular-nums; margin-top:8px}
.konto td{padding:6px 0; border-top:1px solid var(--app-linie-fein); vertical-align:top}
.konto td.betrag{text-align:right; white-space:nowrap; padding-left:16px}
.konto summary{cursor:pointer; color:var(--app-text-2); font-size:14px; margin-top:8px}
.hinweis-unten{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:50; background:var(--app-text); color:var(--app-karte);
  border-radius:8px; padding:12px 16px; display:flex; gap:16px; align-items:center; box-shadow:var(--app-schatten); max-width:calc(100% - 32px); font-size:15px}
.hinweis-unten button{background:none; border:0; color:inherit; font:inherit; font-weight:600; text-decoration:underline; cursor:pointer; padding:0}

/* ---------- Startseite: Heute und Vorgaenge (aus Snippet 17 und 33) ---------- */
.heute{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px}
.schwer{display:flex; flex-direction:column; gap:12px; padding:24px}
.schwer h2{font-size:25px; line-height:1.2; margin:0}
.schwer p{margin:0; color:var(--app-text-2); max-width:62ch}
.schwer .kopfzeile{display:flex; gap:12px; align-items:center; color:var(--app-text-3); font-size:13px}
.neben{display:flex; flex-direction:column; gap:16px}
.klein-karte{all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:16px; padding:16px; background:var(--app-karte);
  border:1px solid var(--app-rahmen); border-radius:8px}
.klein-karte:hover{border-color:var(--app-rahmen-feld)}
.klein-karte:focus-visible{outline:2px solid var(--app-blau); outline-offset:2px}
.klein-karte .zahl{width:48px; height:48px; flex:none; border-radius:8px; display:grid; place-items:center; font-size:20px; font-weight:600; font-variant-numeric:tabular-nums; background:var(--app-warnung-hell); color:var(--app-warnung)}
.klein-karte .zahl.alarm{background:var(--app-alarm-hell); color:var(--app-alarm)}
.klein-karte .zahl.blau{background:var(--app-blau-hell); color:var(--app-blau)}
.klein-karte .text{min-width:0; flex:1}
.klein-karte .text b{display:block; font-weight:600}
.klein-karte .text small{display:block; color:var(--app-text-3); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.klein-karte svg{width:18px; height:18px; color:var(--app-text-3)}
.ruhig-karte{padding:24px; color:var(--app-text-2)}
.hinweisliste{list-style:none; margin:0; padding:0}
.hinweisliste li{display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-top:1px solid var(--app-linie-fein); cursor:pointer}
.hinweisliste li:hover{background:var(--app-hover)}
.hinweisliste li b{font-weight:600}
.hinweisliste li span{color:var(--app-text-2); font-size:14px}
/* Fabian, 11.11.2026 (Vereinheitlichung): Reiter mit Unterstrich in der Akzentfarbe statt grauer Flaeche, kein Umbruch im Wort. */
.reiter{display:flex; gap:2px; flex-wrap:wrap}
.reiter button{all:unset; cursor:pointer; padding:8px 12px; border-bottom:2px solid transparent; margin-bottom:-1px; font-size:15px; color:var(--app-text-2); white-space:nowrap}
.reiter button:hover{color:var(--app-text)}
.reiter button[aria-selected="true"]{color:var(--app-blau); border-bottom-color:var(--app-blau); font-weight:600}
.reiter button:focus-visible{outline:2px solid var(--app-blau)}
.reiter .n{font-variant-numeric:tabular-nums; color:var(--app-text-3); margin-left:6px}
.leiter{display:flex; gap:8px; overflow-x:auto; padding:16px; border-bottom:1px solid var(--app-rahmen)}
.stufe{all:unset; box-sizing:border-box; cursor:pointer; flex:1 0 112px; padding:12px; border-radius:8px; background:var(--app-flaeche); border:1px solid transparent; display:flex; flex-direction:column; gap:4px}
.stufe:hover{border-color:var(--app-rahmen-feld)}
.stufe:focus-visible{outline:2px solid var(--app-blau)}
.stufe .n{font-size:25px; line-height:1; font-weight:600; font-variant-numeric:tabular-nums}
.stufe .l{font-size:13px; line-height:1.25; color:var(--app-text-2)}
.stufe[aria-pressed="true"]{background:var(--app-blau-hell); border-color:var(--app-blau)}
.stufe[aria-pressed="true"] .n{color:var(--app-blau)}
.stufe.leer{opacity:.55}
.vorgaenge{list-style:none; margin:0; padding:0}
.vorgang{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 16px;
  border-top:1px solid var(--app-linie-fein); cursor:pointer; transition:background var(--app-dauer-kurz)}
.vorgang:first-child{border-top:0}
.vorgang:hover{background:var(--app-hover)}
.vorgang:focus-visible{outline:2px solid var(--app-blau); outline-offset:-2px}
.vorgang.alarm{box-shadow:inset 3px 0 0 var(--app-alarm)}
.vorgang.laeuft .titel::after{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--app-blau); margin-left:8px; vertical-align:middle; animation:pulsieren 1.6s infinite}
.vorgang .titel{font-weight:600; overflow-wrap:anywhere}
.vorgang .unter, .vorgang .hinweis{display:block; font-size:13px; color:var(--app-text-3); margin-top:2px}
.vorgang .meta{font-size:13px; color:var(--app-text-2); display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums}
.vorgang .meta .warn{color:var(--app-alarm); font-weight:600}
.ampel{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:var(--app-text-3)}
.ampel.gruen{background:var(--app-ok)} .ampel.gelb{background:var(--app-warnung)} .ampel.rot{background:var(--app-alarm)}
.leerzeile{padding:32px 16px; color:var(--app-text-3); text-align:center}
.skelett{display:block; height:12px; border-radius:6px; background:var(--app-flaeche-2); animation:schimmern 1.4s ease-in-out infinite}
.skelett.breit{width:70%} .skelett.mittel{width:45%} .skelett.hoch{height:24px}
@keyframes schimmern{50%{opacity:.5}}
.stand{font-size:13px; color:var(--app-text-3); font-variant-numeric:tabular-nums}
.fussnote{font-size:13px; color:var(--app-text-3); margin:0}
/* Breite der Inhaltsspalte statt des Fensters: Ist das Detail angedockt, wird die Spalte schmaler. */
@container (max-width:1000px){ .heute{grid-template-columns:minmax(0,1fr)} }
@container (max-width:760px){
  .vorgang{grid-template-columns:minmax(0,1fr) auto; gap:8px 16px}
  .vorgang .stufetext{grid-column:1/-1; grid-row:2}
  .vorgang .meta{grid-column:1/-1; grid-row:3; flex-direction:row; flex-wrap:wrap; gap:4px 12px}
}
@media (max-width:760px){ .panel-rumpf, .panel-kopf{padding-left:16px; padding-right:16px} }
.vorgang.gewaehlt{background:var(--app-blau-hell); box-shadow:inset 3px 0 0 var(--app-blau)}

/* Designstrategie /intern/ (Fabian, 07.11.2026, PR 72): Liste und Detail nebeneinander ab 1024 px. Das Detail dockt
   rechts an, die Liste bleibt bedienbar und schmaler; darunter (Handy, iPad hoch) bleibt es ein Blatt mit Schleier. */
@media (min-width:1024px){
  :root{--panel-breite:clamp(440px, 38vw, 760px)}  /* Fabian, 11.11.2026: breiter (vorher bis 520 px); per Ziehen aenderbar */
  .panel{width:var(--panel-breite); box-shadow:none}
  body.panel-offen .haupt{padding-right:var(--panel-breite)}
  body.panel-offen:not(.befehl-offen) .schleier{opacity:0; pointer-events:none}
}

/* ---------- Befehlsmenue (Strg+K) und Neu anlegen (aus Snippet 33) ---------- */
.kopf-suche{flex:1; display:flex; justify-content:center; min-width:0}
/* Fabian, 12.11.2026 ("Suchfeld oben nicht sauber formatiert"): sieht aus wie ein Suchfeld nach den Formularregeln vom 11.11.2026
   (input[type=search].form-control): 40 px hoch wie die runden Knoepfe daneben, weisse Feldflaeche, Feldrand, 15 px, Lupe 12 px vom Rand,
   Fokusring statt Umriss. Bleibt ein Knopf (oeffnet das Befehlsmenue), deshalb eigene Regel statt .form-control. */
.suchknopf{all:unset; box-sizing:border-box; cursor:text; display:flex; align-items:center; gap:8px; width:min(420px,100%); min-height:40px; padding:0 8px 0 12px;
  border:1px solid var(--app-rahmen-feld); border-radius:6px; background:var(--app-karte); color:var(--app-text-3); font-size:15px; line-height:1.4}
.suchknopf:hover{border-color:var(--app-rahmen-stark)}
.suchknopf:focus-visible{border-color:var(--app-blau); box-shadow:0 0 0 3px var(--app-fokus); outline:0}
/* Touch: 44 px wie die runden Knoepfe. Muss nach der Grundregel stehen, die mit all:unset alles zuruecksetzt (Bugbot PR 128). */
@media (pointer:coarse){ .suchknopf{min-height:var(--app-tipp); font-size:16px} }
.suchknopf svg{width:16px; height:16px; flex:none}
.suchknopf span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.taste{display:inline-block; font:inherit; font-size:12px; line-height:1; padding:3px 6px; border:1px solid var(--app-rahmen); border-radius:4px; background:var(--app-karte); color:var(--app-text-3); white-space:nowrap}
.neu-wrap{position:relative}
.neu-menue{position:absolute; right:0; top:calc(100% + 8px); width:min(340px,calc(100vw - 32px)); z-index:20; padding:8px; box-shadow:var(--app-schatten)}
.neu-menue .titelzeile{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--app-text-3); padding:4px 8px 8px}
.neu-eintrag{display:flex; align-items:center; gap:12px; padding:8px; border-radius:6px; color:var(--app-text); text-decoration:none}
.neu-eintrag:hover,.neu-eintrag:focus-visible{background:var(--app-flaeche); outline:none}
.neu-eintrag .sym{width:36px; height:36px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--app-blau-hell); color:var(--app-blau)}
.neu-eintrag .sym svg{width:18px; height:18px}
.neu-eintrag .text{flex:1; min-width:0}
.neu-eintrag b{display:block; font-weight:600}
.neu-eintrag small{display:block; color:var(--app-text-3); font-size:13px}
.befehl{position:fixed; left:50%; top:max(64px, 10vh); transform:translateX(-50%); width:min(640px,calc(100% - 32px)); z-index:45;
  max-height:calc(100vh - 128px); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--app-schatten)}
body.befehl-offen .schleier{opacity:1; pointer-events:auto; z-index:44}
.befehl-feld{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--app-rahmen)}
.befehl-feld svg{width:18px; height:18px; color:var(--app-text-3); flex:none}
.befehl-feld input{all:unset; flex:1; min-width:0; font-size:16px; color:var(--app-text)}
.befehl-liste{overflow:auto; padding:8px; overscroll-behavior:contain}
.befehl-gruppe{display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--app-text-3); padding:12px 8px 4px; font-weight:600}
.befehl-gruppe .zahl{font-variant-numeric:tabular-nums; letter-spacing:0; background:var(--app-flaeche-2); border-radius:100px; padding:1px 6px}
.befehl-gruppe.hinweis{text-transform:none; letter-spacing:0; font-weight:400}
.treffer{display:flex; align-items:center; gap:12px; padding:8px; border-radius:6px; cursor:pointer; min-height:40px}
.treffer svg{width:16px; height:16px; color:var(--app-text-3); flex:none}
.treffer .haupt-text{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.treffer .haupt-text small{color:var(--app-text-3); margin-left:8px}
.treffer .rechts-text{color:var(--app-text-3); font-size:13px; white-space:nowrap}
.treffer[aria-selected="true"]{background:var(--app-blau-hell)}
.treffer[aria-selected="true"] svg{color:var(--app-blau)}
.treffer mark{background:none; color:var(--app-blau); font-weight:600; padding:0}
.treffer.mehr{color:var(--app-blau); font-size:14px}
.befehl-leer{padding:24px 8px; color:var(--app-text-3); text-align:center}
.befehl-fuss{display:flex; flex-wrap:wrap; gap:16px; padding:8px 16px; border-top:1px solid var(--app-rahmen); color:var(--app-text-3); font-size:12px}
.eintraege{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.eintrag{border:1px solid var(--app-rahmen); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:4px}
.eintrag .kopfzeile{display:flex; align-items:center; gap:8px; justify-content:space-between}
.eintrag .kopfzeile b{font-weight:600}
.eintrag .zeile{color:var(--app-text-2); font-size:14px}
.eintrag .hinweis{color:var(--app-text-3); font-size:13px}
.eintrag .knopfreihe{margin-top:8px}
@media (max-width:760px){ .suchknopf .taste{display:none} .neu-text{display:none} }
/* Fabian, 13.11.2026 (Nachtrundgang): Am Handy steht der Seitentitel im Kopf, die Suche ist ein Lupen-Knopf. Vorher fuellte das Suchfeld den
   Kopf und keine Seite sagte, wo man ist. Die Hauptaktion steht am Handy auf der Seite selbst (Leiste unten bzw. Plus in der Listenleiste),
   ihr Stellvertreter im Kopf entfaellt dort; vorher gab es denselben Knopf zweimal. Zurueck: diesen Block entfernen und .kopf .titel{display:none}
   in die Zeile darueber zuruecksetzen. */
@media (max-width:760px){
  .kopf .titel{flex:1 1 0; font-size:17px}
  .kopf .kopf-suche{flex:0 0 auto}
  .kopf .suchknopf{width:var(--app-tipp); min-width:var(--app-tipp); height:var(--app-tipp); min-height:var(--app-tipp); padding:0; justify-content:center; border-radius:100px; cursor:pointer}
  .kopf .suchknopf span{display:none}
  .kopf .suchknopf svg{width:18px; height:18px}
  .kopf .rechts{margin-left:0}
}
@media (max-width:640px){ body .kopf .hauptaktion.hauptaktion{display:none} }

/* ---------- Inbox (aus Snippet 79, Arbeitsansicht 07.11.2026, PR 71/72) ---------- */
.leiste .punkt .zahl-marke{margin-left:auto; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; border-radius:100px; padding:1px 8px; background:var(--app-warnung-hell); color:var(--app-warnung)}
.leiste .punkt .zahl-marke.ruhig{background:var(--app-blau-hell); color:var(--app-blau)}
/* Aufgaben (Snippet 49, vo_ag_heute_css, 08.11.2026): Neu-Punkt am Menuepunkt und Karte auf der Startseite */
.leiste .punkt .neu-punkt{width:8px; height:8px; border-radius:100px; background:var(--app-blau); margin-left:auto; flex:none; animation:neuPuls 1.6s ease-in-out infinite}
.leiste .punkt .neu-punkt:not([hidden]) + .zahl-marke{margin-left:6px}
@keyframes neuPuls{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.leiste .punkt .neu-punkt{animation:none}}
.aufgaben-karte .liste small{color:var(--app-text-3)}
.aufgaben-karte .liste small.ist-ueber{color:var(--app-alarm)}
.ib-kopf{font-size:14px; color:var(--app-text-2)}
.ib-kopf a{color:inherit; text-decoration:none}
.ib-kopf a:hover{color:var(--app-blau)}
.ib-kopf strong{color:var(--app-text); font-weight:600}
.ib{display:grid; grid-template-columns:minmax(260px,360px) minmax(0,1fr); min-height:640px; overflow:hidden}
.ib-liste{border-right:1px solid var(--app-rahmen); display:flex; flex-direction:column; min-width:0}
.ib-reiter{padding:4px 12px 0; border-bottom:1px solid var(--app-rahmen); flex-wrap:wrap}  /* fuenf Reiter (Rechnungen) brechen in die zweite Zeile */
.ib-sonder{padding:8px 16px; font-size:13px; color:var(--app-text-2); background:var(--app-flaeche); border-bottom:1px solid var(--app-rahmen)}
.linkknopf{all:unset; cursor:pointer; color:var(--app-blau); text-decoration:underline}
.ib-eintraege{list-style:none; margin:0; padding:0; overflow:auto}
.ib-eintraege a{display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-bottom:1px solid var(--app-linie-fein); color:var(--app-text); text-decoration:none}
.ib-eintraege a:hover{background:var(--app-hover)}
.ib-eintraege a[aria-current="true"]{background:var(--app-blau-hell); box-shadow:inset 3px 0 0 var(--app-blau)}
.ib-eintraege .z1{display:flex; gap:8px; align-items:baseline; font-size:13px; color:var(--app-text-2); min-width:0}
.ib-eintraege .z1 b{color:var(--app-blau); font-weight:600; font-variant-numeric:tabular-nums}
.ib-eintraege .z1 span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ib-eintraege .z1 time{color:var(--app-text-3); font-variant-numeric:tabular-nums}
.ib-eintraege .z2{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ib-eintraege .z3{font-size:13px; color:var(--app-text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.h-faellig{color:var(--app-warnung); font-weight:600} .h-vorschlag{color:var(--app-blau); font-weight:600} .h-erledigt{color:var(--app-ok)} .h-portal{color:var(--app-extern)}
.ib-mehr{padding:12px 16px; margin:0}
.ib-detail{min-width:0; overflow:auto}
.ib-vorgang{display:flex; flex-direction:column; gap:16px; padding:24px}
.ib-zurueck{display:none; align-self:flex-start}
.ib-oben{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between}
.ib-titel{min-width:0; flex:1 1 280px}
.ib-titel small{color:var(--app-text-3); font-size:13px; font-variant-numeric:tabular-nums}
.ib-titel h2{font-size:20px; margin:4px 0 0; overflow-wrap:anywhere}
.ib-fakten{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px 24px; margin:16px 0 0}
.ib-fakten dt{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--app-text-3); font-weight:600}
.ib-fakten dd{margin:2px 0 0; overflow-wrap:anywhere}
.ib-menue{position:relative}
.ib-menue summary{list-style:none}
.ib-menue summary::-webkit-details-marker{display:none}
.ib-menue-innen{position:absolute; right:0; top:calc(100% + 8px); z-index:15; width:min(300px,calc(100vw - 32px)); padding:12px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--app-schatten)}
.ib-vorschlag{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:12px 16px; border-radius:8px; background:var(--app-blau-hell)}
.ib-vorschlag-text{flex:1 1 320px; min-width:0; font-size:14px}
.ib-vorschlag-text small{display:block; color:var(--app-text-2); margin-top:4px}
.ib-verlauf{display:flex; flex-direction:column; gap:12px}
.ib-nachricht{border:1px solid var(--app-rahmen); border-radius:8px; padding:12px 16px; max-width:820px}
.ib-nachricht.ausgang{margin-left:auto; background:var(--app-flaeche)}
.ib-nachricht.notiz{background:var(--app-warnung-hell); border-color:transparent}
.ib-nkopf{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:13px; color:var(--app-text-3)}
.ib-nkopf strong{color:var(--app-text); font-weight:600; font-size:14px}
.marke{font-size:12px; border-radius:100px; padding:1px 8px; background:var(--app-flaeche-2); color:var(--app-text-2)}
.marke.intern{background:var(--app-warnung-hell); color:var(--app-warnung)}
.ib-betreff{margin:8px 0 0; font-weight:600}
.ib-text{margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:14px; color:var(--app-text); background:none; padding:0; border:0}
.ib-anhaenge{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; font-size:13px}
.ib-anhang{display:inline-flex; align-items:center; gap:4px}
.ib-anhang svg, .ib-anhangstand svg, .ib-wahl svg{width:14px; height:14px}
.ib-anhangstand{list-style:none; margin:8px 0 0; padding:0; font-size:13px}
.ib-anhangstand .ok{color:var(--app-ok)} .ib-anhangstand .fehler{color:var(--app-alarm)} .ib-anhangstand .offen{color:var(--app-text-3)}
.ib-antwort{border:1px solid var(--app-rahmen); border-radius:8px; overflow:hidden}
.ib-antwort .reiter{padding:8px; border-bottom:1px solid var(--app-rahmen); background:var(--app-flaeche)}
.ib-innen{padding:12px; display:flex; flex-direction:column; gap:12px}
.ib-leiste{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between}
.ib-leiste .klein{flex:1 1 200px}
.ib-wahl{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:4px}
.ib-wahl legend{font-size:13px; font-weight:600; margin-bottom:4px}
.ib-ki{font-size:14px; padding:12px; border-radius:8px; background:var(--app-extern-hell)}
.ib-ki ul{margin:4px 0 0; padding-left:20px}
/* Einspaltig, wenn die Inhaltsspalte schmal ist (Inbox-Regel PR 72: zwei Spalten ab 600 px Inbox-Breite, nicht
   unter 600 px Fensterhoehe). Dann zeigt die Seite entweder die Liste oder den Vorgang mit "Zur Liste". */
@container (max-width:760px){
  .ib{grid-template-columns:minmax(0,1fr); min-height:0}
  .ib .ib-liste{border-right:0}
  .ib.ib--detail .ib-liste{display:none}
  .ib:not(.ib--detail) .ib-detail{display:none}
  .ib-zurueck{display:inline-flex}
  .ib-vorgang{padding:16px}
}
@media (max-height:599px){
  .ib{grid-template-columns:minmax(0,1fr); min-height:0}
  .ib.ib--detail .ib-liste{display:none}
  .ib:not(.ib--detail) .ib-detail{display:none}
  .ib-zurueck{display:inline-flex}
}
.inbox-karte .ib-kopfzeile{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.inbox-karte h2{font-size:18px; margin:0}
.inbox-karte .zahlen{display:flex; flex-wrap:wrap; gap:8px}
.inbox-karte .zahlen a{font-size:14px; border-radius:8px; padding:8px 12px; text-decoration:none; color:var(--app-blau); background:var(--app-blau-hell)}
.inbox-karte .zahlen a.warnung{color:var(--app-warnung); background:var(--app-warnung-hell)}
.inbox-karte .liste a{display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--app-linie-fein); color:var(--app-text); text-decoration:none; font-size:14px}
.inbox-karte .liste a span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.team-arbeit{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px 24px}
.team-arbeit li{min-width:0}
.team-arbeit li > b{font-weight:600}
.team-arbeit .zaehler{margin-left:8px; font-size:13px; color:var(--app-text-3)}
.team-arbeit .liste{margin-top:4px}
.team-arbeit .liste small.mehr{display:block; padding:8px 0; color:var(--app-text-3); border-top:1px solid var(--app-linie-fein)}
.inbox-karte .liste small{color:var(--app-warnung); white-space:nowrap}

/* ---------- Seitentyp "Arbeitsliste" (Klassen al-*), Fabian, 08.11.2026 ----------
   Gemeinsam fuer Tickets, Inbox und Aufgaben (Vorschlag "Intern-Portal Ansichten"): Kopf mit Auswahlfeldern,
   Verlauf in der Mitte, Kontext rechts ab 720 px Breite der Detailflaeche (Element mit .al-flaeche), schmaler
   als aufklappbarer Bereich ueber dem Verlauf. Zuerst fuer Tickets gebaut, hierher gezogen am selben Tag. */
.al-flaeche{container-type:inline-size}
.al-det{display:flex;flex-direction:column;gap:0;border:1px solid var(--app-rahmen);border-radius:12px;background:var(--app-karte);overflow:clip}
.al-kopf{display:flex;flex-direction:column;gap:12px;padding:16px 20px;border-bottom:1px solid var(--app-rahmen)}
.al-z1{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px}
.al-titel{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 280px}
.al-vor{margin:0;font-size:12.5px;color:var(--app-text-3);font-variant-numeric:tabular-nums}
.al-vor b{color:var(--app-blau);font-weight:600}
.al-kopf h2{margin:0;font-size:20px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.al-kopfform{display:flex;flex-direction:column;gap:8px}
.al-kf-reihe{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px}
.al-kf{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:11.5px;color:var(--app-text-3)}
.al-kf select,.al-kf input[type="text"],.al-kf input[type="date"],.al-kf input[type="url"]{height:32px;max-width:240px;padding:0 8px;border:1px solid var(--app-rahmen-feld, var(--app-rahmen));border-radius:6px;background:var(--app-karte);color:var(--app-text);font:inherit;font-size:13.5px}
.al-kf--haken{flex-direction:row;align-items:center;gap:6px;height:32px;font-size:13.5px;color:var(--app-text);cursor:pointer}
.al-kf-fuss{display:flex;justify-content:flex-end}
.al-hinweise{display:flex;flex-direction:column;gap:8px;padding:12px 20px 0}
.al-rumpf{display:flex;flex-direction:column;min-width:0}
.al-mitte{display:flex;flex-direction:column;min-width:0;background:var(--app-flaeche)}
.al-kontext{border-bottom:1px solid var(--app-rahmen);background:var(--app-karte);min-width:0}
.al-kontext>summary{display:flex;align-items:center;gap:8px;padding:10px 20px;font-size:13px;font-weight:500;color:var(--app-text-2);cursor:pointer;list-style:none}
.al-kontext>summary::-webkit-details-marker{display:none}
.al-kontext>summary svg,.al-kx-auf>summary svg{width:14px;height:14px;transition:transform .15s}
.al-kontext[open]>summary svg,.al-kx-auf[open]>summary svg{transform:rotate(180deg)}
.al-kontext-inhalt{display:flex;flex-direction:column;gap:18px;padding:4px 20px 18px}
.al-kx h3{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--app-text-3)}
.al-kx-daten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:13.5px;line-height:1.45}
.al-kx-daten div{display:contents}
.al-kx-daten dt{color:var(--app-text-3)}
.al-kx-daten dd{margin:0;overflow-wrap:anywhere}
.al-kx-daten a{color:var(--app-blau);text-decoration:none}
.al-kx-felder{display:flex;flex-direction:column;gap:8px}
.al-kx-felder .al-kf select{width:100%;max-width:none}
.al-kx-liste{display:flex;flex-direction:column}
.al-kx-zeile{display:flex;justify-content:space-between;gap:8px;width:100%;padding:6px 0;border:0;border-top:1px solid var(--app-rahmen);background:none;font:inherit;font-size:13.5px;color:var(--app-blau);text-align:left;cursor:pointer}
.al-kx-zeile:first-child{border-top:0}
.al-kx-zeile small{flex:none;color:var(--app-text-3)}
.al-kx-auf>summary{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--app-blau);cursor:pointer;list-style:none}
.al-kx-auf>summary::-webkit-details-marker{display:none}
.al-kx-auf .tk-form{margin-top:10px}
@container (min-width:720px){
  .al-rumpf{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:stretch}
  .al-mitte{grid-column:1;grid-row:1}
  .al-kontext{grid-column:2;grid-row:1;border-bottom:0;border-left:1px solid var(--app-rahmen)}
  .al-kontext>summary{padding:12px 16px 6px}
  .al-kontext-inhalt{padding:4px 16px 18px}
}
@container (min-width:960px){.al-rumpf{grid-template-columns:minmax(0,1fr) 300px}}
.al-mitte .al-eingabe{position:sticky;bottom:0;z-index:1}
@container (max-width:719px){.al-mitte .al-eingabe{position:static}}
.al-knoepfe{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Inbox in der Arbeitsansicht (08.11.2026) */
.ib-vorgang{gap:12px}
.al-mitte .ib-verlauf{padding:18px 20px}
.al-mitte .ib-antwort{margin:0 20px 20px;background:var(--app-karte)}
.al-hinweise .ib-vorschlag{margin:0}

/* ---------- Vollflaeche fuer Arbeitslisten, Fabian, 08.11.2026 ----------
   "Das Hauptfenster soll nicht eingerueckt sein, sondern die volle Breite ausfuellen; die Liste grenzt buendig an das
   Menue, Suche und Filter stehen in einer Zeile." Ab 1024 px: kein Rand, Hoehe = Fenster minus Kopf, Liste links mit
   eigener Bildlaufleiste, Vorgang rechts ebenso. Schmaler bleibt alles im normalen Fluss. */
.al-leiste{display:flex;align-items:center;gap:6px;min-width:0}
.al-leiste .al-suche{flex:1 1 auto;min-width:0}
.al-leiste .form-select{height:40px}
.al-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border:1px solid var(--app-rahmen-feld, var(--app-rahmen));border-radius:var(--app-knopf-radius,6px);background:var(--app-karte);color:var(--app-text-2);cursor:pointer;position:relative}
.al-icon:hover{color:var(--app-text);border-color:var(--app-rahmen-feld, var(--app-rahmen))}
.al-icon svg{width:18px;height:18px}
.al-icon--haupt{background:var(--app-aktion);border-color:var(--app-aktion);color:var(--app-auf-aktion)}
.al-icon--haupt:hover{color:var(--app-auf-aktion)}
.al-reihe{display:flex;align-items:center;gap:10px;min-width:0;overflow-x:auto;scrollbar-width:none}
.al-reihe::-webkit-scrollbar{display:none}
.al-reihe>*{flex:none}
.reiter.al-reihe{gap:2px}  /* Reiter in einer Leiste (Inbox, Scan-Postkorb, Rechnungen) stehen eng wie alle Reiter */
.al-klein{margin:0;font-size:12.5px;color:var(--app-text-3);line-height:1.4}
@media (min-width:1024px){
  .inhalt--voll{padding:0;gap:0;max-width:none;height:calc(100vh - 65px);overflow:hidden}
  .inhalt--voll .al-det{border:0;border-radius:0;min-height:100%}
}

/* Inbox als Vollflaeche (08.11.2026): ohne Kartenrahmen, Zaehler oben in der Liste, Meldung als Hinweis unten. */
.ib{background:var(--app-karte);border:1px solid var(--app-rahmen);border-radius:8px}
.ib-liste .ib-kopf{padding:12px 16px 0}
@media (min-width:1024px){
  .inhalt--voll .ib{height:100%;min-height:0;border:0;border-radius:0;grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
  .inhalt--voll .ib-liste{min-height:0}
  .inhalt--voll .ib-eintraege{flex:1 1 auto;min-height:0}
  .inhalt--voll .ib-detail{height:100%;background:var(--app-flaeche)}
  .inhalt--voll .ib-vorgang{padding:0}
  .inhalt--voll .ib-zurueck{display:none}
  .inhalt--voll #ib-meldung{position:fixed;right:24px;bottom:24px;z-index:30;max-width:420px;box-shadow:var(--app-schatten)}
  .inhalt--voll .ib-detail>.leerzeile{padding:96px 24px}
}
@media (min-width:1600px){.inhalt--voll .ib{grid-template-columns:420px minmax(0,1fr)}}
@media (min-width:1024px){
  .inhalt--voll .al-det{flex:1 0 auto}
  .inhalt--voll .al-rumpf{flex:1 0 auto}
  .inhalt--voll .ib-vorgang{min-height:100%}
}
.al-mitte>:first-child{flex:1 0 auto}

/* ---------- Seitentyp "Akte" (Klassen ak-*), Fabian, 08.11.2026 ----------
   Gemeinsam fuer Mietvertraege und folgende Akten (zuerst fuer Liegenschaften gebaut, dort noch als lg-*):
   Zurueck-Verweis, Kopf mit Ueberzeile und Knoepfen, Kennzahlen, Reiter, Uebersicht in zwei Spalten. */
.ak{display:flex;flex-direction:column;gap:16px;min-width:0}
.ak-zurueck{align-self:flex-start;font-size:14px;color:var(--app-blau);text-decoration:none}
.ak-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}
.ak-titel{min-width:0;flex:1 1 320px}
.ak-vor{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--app-text-3)}
.ak-kopf h2{margin:2px 0 0;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.ak-kopf p{margin:4px 0 0;color:var(--app-text-2);font-size:14px}
.ak-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.ak-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ak-kpi{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 14px;border:1px solid var(--app-rahmen);border-radius:8px;background:var(--app-karte)}
.ak-kpi small{font-size:12px;color:var(--app-text-3)}
.ak-kpi b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ak-kpi em{font-style:normal;font-size:12px;color:var(--app-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ak-kpi--rot b{color:var(--app-alarm)}
.ak-kpi--gelb b{color:var(--app-warnung)}
.ak-ue{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.ak-spalte{display:flex;flex-direction:column;gap:16px;min-width:0}
.ak-ue .card-header{padding:12px 16px}
.ak-ue .card-title{margin:0;font-size:15px;font-weight:600}
.ak-ue .datagrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ak-hinweis{padding:12px 16px;border-radius:8px;background:var(--app-warnung-hell);color:var(--app-warnung);font-size:14px;line-height:1.5}
.ak-hinweis--ruhig{background:var(--app-flaeche-2);color:var(--app-text-2)}
.ak-hinweis b{display:block;margin-bottom:2px}
.ak-leer{padding:24px;text-align:center;color:var(--app-text-3);font-size:14px}
@media (max-width:1100px){.ak-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.ak-ue{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.ak-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Schwerpunkte (Fabian, 08.11.2026): Zeile auf Heute, Knopf im Menue, Auswahl im Panel */
.schwerpunkte{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:0; font-size:14px; color:var(--app-text-2)}
.leiste .punkt.leise{background:none; border:0; font:inherit; width:100%; text-align:left; cursor:pointer; color:var(--app-text-3); margin-top:8px}
.leiste .punkt.leise:hover{background:var(--app-flaeche); color:var(--app-text)}
.sp-auswahl{display:flex; flex-direction:column; gap:4px}
.sp-zeile{display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer}
.sp-zeile input{width:20px; height:20px; flex:none}
.sp-auswahl .btn{margin-top:16px; align-self:flex-start}
.schwerpunkt-karten{display:contents}
.inbox-karte .liste small.ruhig-klein{color:var(--app-text-3)}

/* Fingerbedienung (Fabian, 07.11.2026, Grundsatz 6; geprueft 08.11.2026 bei 390/820/1180 px): Menue, Schwerpunkte und Karten auf Heute mindestens 44 px */
@media (pointer:coarse){
  .leiste .punkt{min-height:var(--app-tipp)}
  .btn.btn-sm{min-height:var(--app-tipp)}
  .inbox-karte .zahlen a{display:inline-flex; align-items:center; min-height:var(--app-tipp)}
  .inbox-karte .liste a{align-items:center; min-height:var(--app-tipp)}
  .inbox-karte .ib-kopfzeile a{display:inline-flex; align-items:center; min-height:var(--app-tipp)}
}

/* ---------- Muster und Zustaende (Fabian, 08.11.2026) ----------
   Anlass: "Ich moechte jedenfalls mit Patterns fuer diverse States arbeiten" (Tabler, Seite "Background patterns").
   Die Klassen heissen wie bei Tabler (bg-pattern-*), die Tabler-Datei 1.0.0 kennt sie aber nicht: Sie kamen erst mit 1.5.0.
   Ein Wechsel der Tabler-Version betrifft alle Seiten und ist eine neue Abhaengigkeit (CLAUDE.md, "Nie ohne Rueckfrage"),
   darum hier eigene, kleine Regeln ueber die --app-*-Token (Dunkelmodus kommt mit). Faerbung ueber --muster; Stufen sm/lg.
   Regel (Tabler, "Accessibility"): Muster nie hinter Fliesstext, nur auf Baendern, Marken und leeren Flaechen. */
.bg-pattern-diagonal-stripes,.bg-pattern-dots,.bg-pattern-horizontal-stripes,.bg-pattern-grid{
  --muster:color-mix(in srgb, var(--app-text-3) 45%, transparent); --muster-groesse:7px}
.bg-pattern-sm{--muster-groesse:5px}
.bg-pattern-lg{--muster-groesse:10px}
.bg-pattern-md{--muster-groesse:7px}   /* Fabian, 10.11.2026: mittlere Stufe (Tabler 1.5), leere Spalten im Mietanbot-Board; xl war zu grob */
.bg-pattern-diagonal-stripes{background-image:repeating-linear-gradient(135deg, var(--muster) 0 2px, transparent 2px var(--muster-groesse))}
.bg-pattern-horizontal-stripes{background-image:repeating-linear-gradient(0deg, var(--muster) 0 1px, transparent 1px var(--muster-groesse))}
.bg-pattern-dots{background-image:radial-gradient(var(--muster) 1.2px, transparent 1.5px); background-size:var(--muster-groesse) var(--muster-groesse)}
.bg-pattern-grid{background-image:linear-gradient(var(--muster) 1px, transparent 1px), linear-gradient(90deg, var(--muster) 1px, transparent 1px); background-size:var(--muster-groesse) var(--muster-groesse)}
.bg-pattern-red{--muster:color-mix(in srgb, var(--app-alarm) 60%, transparent)}
.bg-pattern-orange{--muster:color-mix(in srgb, var(--app-warnung) 60%, transparent)}
.bg-pattern-blue{--muster:color-mix(in srgb, var(--app-blau) 55%, transparent)}
.bg-pattern-green{--muster:color-mix(in srgb, var(--app-ok) 55%, transparent)}

/* Arbeitszeilen wie die Task-Liste von Tabler: Haken, Titel, Datum, Prioritaet, Person; links ein Zustandsband mit Muster */
.arbeit-liste{list-style:none; margin:0; padding:0}
.arbeit-zeile{position:relative; display:flex; align-items:center; gap:12px; padding:8px 16px 8px 20px; min-height:56px; border-top:1px solid var(--app-linie-fein)}
.arbeit-zeile:hover{background:var(--app-hover)}
.zustandsband{position:absolute; left:0; top:8px; bottom:8px; width:6px; border-radius:3px; background-color:var(--app-flaeche-2)}
.zustandsband.z-ueberfaellig{background-color:var(--app-alarm-hell)}
.zustandsband.z-arbeit{background-color:var(--app-blau-hell)}
.zustandsband.z-freigabe{background-color:var(--app-warnung-hell)}
.zustandsband.z-erledigt{background-color:var(--app-ok-hell)}
.arbeit-haken-feld{display:flex; align-items:center; justify-content:center; width:32px; height:44px; flex:none; margin:0; cursor:pointer}
.arbeit-haken-feld input{width:20px; height:20px; margin:0; cursor:pointer}
.arbeit-symbol{display:flex; align-items:center; justify-content:center; width:32px; flex:none; color:var(--app-text-3)}
.arbeit-symbol svg{width:18px; height:18px}
.arbeit-titel{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; color:var(--app-text); text-decoration:none; padding:4px 0}
.arbeit-titel .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px}
.arbeit-titel small{color:var(--app-text-3); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.arbeit-zeile.ist-erledigt .t{text-decoration:line-through; color:var(--app-text-3)}
.arbeit-meta{display:flex; align-items:center; gap:12px; flex:none}
.arbeit-datum{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--app-text-2); white-space:nowrap; border-radius:6px; padding:2px 8px}
.arbeit-datum svg{width:14px; height:14px; flex:none}
.arbeit-datum.ist-ueber{color:var(--app-alarm); background-color:var(--app-alarm-hell)}
.arbeit-prio{font-size:13px; color:var(--app-text-3); white-space:nowrap}
.arbeit-prio.hoch{color:var(--app-warnung); font-weight:600}
.arbeit-zeile .avatar{flex:none}
.arbeit-mehr{display:flex; align-items:center; min-height:44px; padding:0 20px; border-top:1px solid var(--app-linie-fein); font-size:14px}
@media (max-width:640px){
  .arbeit-zeile{flex-wrap:wrap; row-gap:0; padding-top:4px; padding-bottom:8px}
  .arbeit-meta{flex-basis:100%; padding-left:44px; justify-content:flex-start}
}
/* Leerer Zustand: gepunktete Flaeche, ein Satz */
.leer-zustand{display:flex; align-items:center; justify-content:center; min-height:96px; margin:4px 0 0; border:1px dashed var(--app-rahmen); border-radius:8px;
  background-color:var(--app-flaeche-2); color:var(--app-text-2); font-size:14px; text-align:center; padding:16px}
/* Team in Bearbeitung: eine Zeilengruppe je Person */
.team-person{min-width:0}
.team-person + .team-person{margin-top:8px}
.team-kopf.karte-innen{flex-direction:row; align-items:center; gap:12px; padding:12px 20px 8px}
.team-kopf b{font-weight:600}
.team-kopf .zaehler{font-size:13px; color:var(--app-text-3)}
@media (pointer:coarse){ .arbeit-titel{min-height:var(--app-tipp); justify-content:center} }

/* Dahoam-Nutzung (Fabian, 08.11.2026): Marken ohne Ziel, Saeulen je Woche */
.inbox-karte .zahlen .marke-zahl{font-size:14px; border-radius:8px; padding:8px 12px; color:var(--app-blau); background:var(--app-blau-hell)}
.inbox-karte .zahlen .marke-zahl.warnung{color:var(--app-warnung); background:var(--app-warnung-hell)}
.inbox-karte .zeile-text{display:flex; gap:12px; padding:8px 0; border-top:1px solid var(--app-linie-fein); color:var(--app-text); font-size:14px}
.balken{margin:0; display:flex; flex-direction:column; gap:4px}
.balken figcaption{font-size:13px; color:var(--app-text-3)}
.balken svg{max-width:100%; height:auto; fill:var(--app-blau)}

/* ---------- Seitenrahmen mit Vorlagen (Fabian, 09.11.2026) ----------
   huelle.js setzt aus data-vorlage die Klasse inhalt--<vorlage> (und body.vorlage-<vorlage>). Breiten stehen nur hier, nicht mehr in den Seiten.
   arbeitsliste: siehe inhalt--voll weiter oben. akte und uebersicht: volle Inhaltsbreite (.inhalt, 1400 px).
   formular: schmale Spalte, linksbuendig; data-breite="breit" fuer Assistenten mit Tabelle (Mitteilungen). */
:root{ --app-formular-breite:720px; --app-formular-breit:900px }
.inhalt--formular{max-width:calc(var(--app-formular-breite) + 48px)}
.inhalt--formular.inhalt--breit{max-width:calc(var(--app-formular-breit) + 48px)}
.inhalt--formular.inhalt--vollbreit{max-width:1400px}
.inhalt--akte.inhalt--vollbreit{max-width:none}  /* Fabian, 11.11.2026: Mietanbot-Board ueber die ganze Flaeche */  /* Fabian, 09.11.2026: Mietinteressent anlegen ueber die ganze Seite */
.seiten-unter{margin:0; color:var(--app-text-2); max-width:68ch}
/* Hauptaktion eines Formulars: im Fluss, am Handy in einer unteren Leiste in Daumenreichweite (Grundsatz 6 der Designstrategie) */
.aktionsleiste{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
/* Hauptaktion im Seitenkopf (huelle.js, hauptaktion()): der Kopfknopf ersetzt den echten Knopf, wo beide sichtbar waeren */
.kopf .hauptaktion{display:inline-flex; align-items:center; gap:6px}
.kopf .hauptaktion[hidden]{display:none}
@media (min-width:1024px){ body.vorlage-arbeitsliste .hauptaktion-ziel{display:none} }
/* Fabian, 13.11.2026 (Nachtrundgang): Die Leiste bleibt auch am Bildschirm am Ende des Formulars stehen. Vorher war sie ab 641 px
   ausgeblendet und das Absenden stand nur oben rechts im Kopf; bei langen Formularen (HV-Anfrage, 1100 px) musste man nach dem letzten
   Feld wieder hinauf. Der Knopf im Kopf bleibt. Zurueck: die alte Regel wieder einsetzen:
   @media (min-width:641px){ body.vorlage-formular .aktionsleiste:has(.hauptaktion-ziel){display:none} } */
@media (min-width:641px){ body.vorlage-formular .aktionsleiste:has(.hauptaktion-ziel){margin-top:8px} }
@media (max-width:640px){ .kopf .hauptaktion .hauptaktion-text{display:none} .kopf .hauptaktion{min-width:var(--app-tipp); justify-content:center} }
@media (max-width:640px){
  /* Bugbot PR 80, 09.11.2026: Der Kartenrahmen des Formulars (Rand + Innenabstand) lag um die Leiste und hielt sie vom Rand fern.
     Am Handy faellt die Karte deshalb weg, die Felder stehen direkt auf der Seite, die Leiste reicht bis an die Raender. */
  .inhalt--formular form.card{border:0; background:none; box-shadow:none; padding:0; --tblr-card-spacer-x:0; --tblr-card-spacer-y:0}
  .inhalt--formular form.card > .card-body{padding:0}
  .inhalt--formular .aktionsleiste{position:sticky; bottom:0; z-index:5; margin:0 -16px -48px; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--app-karte); border-top:1px solid var(--app-rahmen)}
  .inhalt--formular .aktionsleiste .btn{flex:1 1 auto; min-height:var(--app-tipp)}
}


/* Fabian, 10.11.2026 (Fehlerbild Mietanbot bei zusammengeschobenem Fenster): Dockt das Detail rechts an, wird der Seitenkopf eng; Suche und Knoepfe
   ueberlappten sich. Dann nur Symbole statt Text bei "Neu anlegen" und "Abmelden", kleinere Abstaende. */
@media (min-width:1024px) and (max-width:1599px){
  body.panel-offen .kopf{gap:8px; padding:0 16px}
  body.panel-offen .kopf .neu-text,
  body.panel-offen .kopf .rechts a.btn > span{display:none}
  body.panel-offen .kopf .titel{flex:0 1 auto}
  body.panel-offen .kopf-suche{justify-content:flex-end; flex:1 1 40px}
  body.panel-offen .suchknopf{width:auto; min-width:40px; justify-content:center}
}

/* Fabian, 10.11.2026: Ueberall sichtbare, dicke Scrollbalken wirkten wie iFrames. Duenn und zurueckhaltend, nur beim Ueberfahren kraeftiger. */
*{scrollbar-width:thin; scrollbar-color:var(--app-linie-fein) transparent}
*:hover{scrollbar-color:var(--app-rahmen-feld) transparent}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--app-linie-fein); border-radius:8px; border:2px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--app-rahmen-feld); background-clip:content-box}

/* Fabian, 10.11.2026: Listendichte "Kompakt" (Meine Daten > Ansicht). Nur Abstaende in Listenzeilen, keine Schrift und keine Tipp-Ziele
   unter 36 px Hoehe; am Handy (Daumen) bleibt es bei "Normal". */
@media (min-width:761px){
  html[data-dichte="kompakt"] .ib-eintraege a{padding:7px 16px; gap:0}
  html[data-dichte="kompakt"] .tk-karte{padding-top:7px; padding-bottom:7px; gap:1px}
  html[data-dichte="kompakt"] .ag-zeile{padding-top:7px; padding-bottom:7px}
  html[data-dichte="kompakt"] .lg-zeile{padding-top:8px; padding-bottom:8px}
  html[data-dichte="kompakt"] .vorgang{padding-top:7px; padding-bottom:7px}
  html[data-dichte="kompakt"] .table > :not(caption) > * > *{padding-top:.4rem; padding-bottom:.4rem}
}
.ansicht-feld{display:flex; flex-direction:column; gap:4px; max-width:360px}

/* Objektnummer als Badge mit Haus-Symbol (Fabian, 11.11.2026, Tabler badge). Leise Marke nach dem Stylesheet: Navy hell,
   Ecken 4 px, Zahl in gleicher Breite; vom Text daneben durch das Leerzeichen getrennt, umbricht nicht. */
.badge.obj-nr{display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 6px; border-radius:4px; border:0;
  background:var(--app-blau-hell); color:var(--app-blau); font-size:12.5px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; vertical-align:2px; white-space:nowrap}
.badge.obj-nr .obj-nr__sym{width:12px; height:12px; flex:none}
h1 .badge.obj-nr, h2 .badge.obj-nr{height:26px; font-size:15px; padding:0 8px; vertical-align:4px}
h1 .badge.obj-nr .obj-nr__sym, h2 .badge.obj-nr .obj-nr__sym{width:15px; height:15px}
a .badge.obj-nr{text-decoration:none}
/* Fabian, 13.11.2026: Die Objekt-Nr. ist ueberall ein Sprung zur Akte der Liegenschaft (huelle.js). */
.badge.obj-nr[data-objekt]{cursor:pointer}
.badge.obj-nr[data-objekt]:hover{box-shadow:inset 0 0 0 1px currentColor}
.ts-wrapper .badge.obj-nr[data-objekt], .ts-dropdown .badge.obj-nr[data-objekt], label .badge.obj-nr[data-objekt], [data-objekt-ruhig] .badge.obj-nr[data-objekt]{cursor:inherit; box-shadow:none}

/* ---------- Formelemente nach Tabler (Fabian, 11.11.2026, Vorschlag „Formelemente nach Tabler“, static/felder.js) ---------- */
/* Datum: Textfeld mit Kalender-Symbol rechts; Datum mit Uhrzeit nebeneinander. */
.feld-datum{padding-right:36px!important; background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717B8C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2'/%3e%3cpath d='M16 2v4M8 2v4M3 10h18'/%3e%3c/svg%3e");
  font-variant-numeric:tabular-nums; min-width:9.5em}
.feld-datumzeit{display:inline-flex; gap:8px; width:100%; align-items:stretch}
.feld-datumzeit .feld-datum{flex:1 1 auto; min-width:0}
.feld-datumzeit .feld-zeit{flex:0 0 108px; width:108px}
/* Kalender (Litepicker) an die Token angeglichen */
.litepicker{font-family:var(--schrift, inherit)!important; font-size:14px!important; z-index:1060!important;
  --litepicker-container-months-color-bg:var(--app-karte); --litepicker-container-months-box-shadow-color:transparent;
  --litepicker-month-header-color:var(--app-text); --litepicker-button-prev-month-color:var(--app-text-2); --litepicker-button-next-month-color:var(--app-text-2);
  --litepicker-button-prev-month-color-hover:var(--app-blau); --litepicker-button-next-month-color-hover:var(--app-blau);
  --litepicker-month-weekday-color:var(--app-text-3); --litepicker-month-week-number-color:var(--app-text-3);
  --litepicker-day-color:var(--app-text); --litepicker-day-color-hover:var(--app-blau); --litepicker-is-today-color:var(--app-signal-text);
  --litepicker-is-start-color:var(--app-auf-aktion); --litepicker-is-start-color-bg:var(--app-aktion);
  --litepicker-is-end-color:var(--app-auf-aktion); --litepicker-is-end-color-bg:var(--app-aktion); --litepicker-is-locked-color:var(--app-text-3)}
.litepicker .container__months{border:1px solid var(--app-rahmen); border-radius:8px!important; box-shadow:var(--app-ebene-menue)!important}
.litepicker .container__months .month-item-header{padding:8px!important}
.litepicker .container__months .month-item-header div>.month-item-name,
.litepicker .container__months .month-item-header div>.month-item-year{font:inherit; color:var(--app-text); background:var(--app-karte); border:1px solid var(--app-rahmen-feld); border-radius:6px; padding:2px 4px}
.litepicker .container__days .day-item{border-radius:6px!important}
.litepicker .container__days .day-item:hover{box-shadow:inset 0 0 0 1px var(--app-blau)!important}
/* Auswahl mit Suche (Tom Select): Aussehen wie .form-select, Liste wie die Menues */
.ts-wrapper{position:relative; width:100%}
.ts-wrapper .ts-control{display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:40px; padding:6px 36px 6px 12px; border:1px solid var(--app-rahmen-feld);
  border-radius:6px; background:var(--app-karte); color:var(--app-text); font-size:15px; cursor:pointer; line-height:1.4;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23717B8C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px}
.ts-wrapper.focus .ts-control{border-color:var(--app-blau); box-shadow:0 0 0 3px var(--app-fokus)}
.ts-wrapper.disabled .ts-control{opacity:.6; cursor:default}
.ts-wrapper .ts-control>input{flex:1 1 60px; min-width:60px; border:0!important; outline:0!important; box-shadow:none!important; background:none; font:inherit; color:var(--app-text); padding:0; margin:0}
.ts-wrapper.single.has-items .ts-control>input{position:absolute; opacity:0; width:4px; min-width:0}
.ts-wrapper.single.has-items.focus.dropdown-active .ts-control>input{position:static; opacity:1; width:auto; min-width:60px}
.ts-wrapper.single.has-items.focus.dropdown-active .ts-control>.item{display:none}
.ts-wrapper .ts-control .item{display:inline-flex; align-items:center; gap:6px; min-width:0}
.ts-wrapper.multi .ts-control .item{background:var(--app-blau-hell); color:var(--app-blau); border-radius:4px; padding:0 4px 0 8px; font-size:14px; min-height:26px}
.ts-wrapper .remove{border:0; background:none; color:inherit; padding:0 4px; text-decoration:none; font-size:16px; line-height:1}
.ts-dropdown{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:1050; background:var(--app-karte); border:1px solid var(--app-rahmen); border-radius:8px;
  box-shadow:var(--app-ebene-menue); padding:4px; color:var(--app-text)}
.ts-dropdown .ts-dropdown-content{max-height:300px; overflow:auto}
.ts-dropdown .option, .ts-dropdown .no-results, .ts-dropdown .create{padding:8px 12px; border-radius:4px; font-size:15px; cursor:pointer}
.ts-dropdown .option.active{background:var(--app-blau-hell); color:var(--app-blau)}
.ts-dropdown .option.selected{font-weight:600}
.ts-dropdown .highlight{background:none; color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px}
.ts-dropdown .no-results{color:var(--app-text-3); cursor:default}
.ts-hidden-accessible{border:0!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; overflow:hidden!important; padding:0!important; position:absolute!important; width:1px!important; height:1px!important; white-space:nowrap!important}
.form-select-sm + .ts-wrapper .ts-control, .ts-wrapper.form-select-sm .ts-control{min-height:32px; padding-top:2px; padding-bottom:2px; font-size:14px}
/* Suche mit Lupe im Feld (input-icon), ohne Umbau der Seiten */
input[type="search"].form-control{padding-left:36px; background-repeat:no-repeat; background-position:left 12px center; background-size:16px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717B8C' stroke-width='1.75' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e")}
/* Mehrzeilige Felder wachsen mit (Firefox: feste Hoehe, Ziehen geht weiter) */
textarea.form-control{field-sizing:content; min-height:80px; max-height:420px}
/* Datei: normales Feld, Knopf im Feld wie die Rand-Knoepfe */
input[type="file"].form-control::file-selector-button{font:inherit; font-size:14px; border:0; border-right:1px solid var(--app-rahmen-feld); background:var(--app-flaeche-2); color:var(--app-text); padding:8px 12px; margin:-8px 12px -8px -12px; cursor:pointer}
/* Pflicht, Hinweis, Fehler (Beschluss 7): Stern leise, Fehler rot unter dem Feld */
.form-label.required::after{content:" *"; color:var(--app-text-3); margin-left:0}
.form-hint{display:block; margin-top:4px; font-size:12.5px; color:var(--app-text-3)}
.invalid-feedback{font-size:13px; color:var(--app-alarm)}
.is-invalid ~ .invalid-feedback{display:block}
.form-control.is-invalid, .form-select.is-invalid{border-color:var(--app-alarm); background-image:none}
.feld-datum.is-invalid{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2'/%3e%3cpath d='M16 2v4M8 2v4M3 10h18'/%3e%3c/svg%3e")}
/* Betraege mit Einheit (input-group): Zahl rechtsbuendig, Einheit leise */
.input-group .form-control.feld-zahl, .feld-zahl{text-align:right; font-variant-numeric:tabular-nums}
.input-group-text{background:var(--app-flaeche-2); color:var(--app-text-2); border-color:var(--app-rahmen-feld); font-size:14px}
/* Auswahlgruppe (form-selectgroup): Knoepfe nebeneinander, gewaehlt navy hell */
.form-selectgroup{display:flex; flex-wrap:wrap; gap:8px}
.form-selectgroup-item{position:relative; margin:0}
.form-selectgroup-input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.form-selectgroup-label{display:inline-flex; flex-direction:column; justify-content:center; min-height:36px; padding:6px 12px; border:1px solid var(--app-rahmen-feld); border-radius:6px;
  background:var(--app-karte); color:var(--app-text-2); font-size:14px; line-height:1.3; cursor:pointer; text-align:left}
.form-selectgroup-label small{font-size:12.5px; color:var(--app-text-3); font-weight:400}
.form-selectgroup-input:checked + .form-selectgroup-label{border-color:var(--app-blau); background:var(--app-blau-hell); color:var(--app-blau); font-weight:600}
.form-selectgroup-input:focus-visible + .form-selectgroup-label{box-shadow:0 0 0 3px var(--app-fokus)}
.form-selectgroup-input:disabled + .form-selectgroup-label{opacity:.5; cursor:default}
/* Schalter (form-switch) in Navy */
.form-switch .form-check-input:checked{background-color:var(--app-aktion); border-color:var(--app-aktion)}
.form-switch .form-check-input:focus{box-shadow:0 0 0 3px var(--app-fokus)}
/* Tom Select uebernimmt die Klassen des Auswahlfelds (form-select) an den Rahmen: dort keinen zweiten Rahmen zeichnen. */
.ts-wrapper.form-select, .ts-wrapper.form-control{padding:0; border:0; background:none; box-shadow:none; min-height:0; height:auto}
.ts-wrapper.form-select-sm .ts-control{min-height:32px; padding-top:2px; padding-bottom:2px; font-size:14px}
.ts-wrapper.single .ts-control{flex-wrap:nowrap}
.ts-wrapper.single .ts-control>input::placeholder{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ts-wrapper .ts-control .item{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Schalter in Zeilen, die schon flex sind (Tickets, Liegenschaften, Kopf der Arbeitsliste): ohne Tablers Einzug */
.form-switch:is(.tk-schalter, .lg-schalter, .al-kf--haken){padding-left:0; min-height:0}
.form-switch:is(.tk-schalter, .lg-schalter, .al-kf--haken) .form-check-input{float:none; margin:0; flex:none}
.form-switch:is(.tk-schalter) .form-check-input{margin-top:2px}
/* Bereiche mit eigenem background-Kurzwert (z. B. .ev input) sollen das Kalender-Symbol nicht verdecken. */
input.feld-datum{background-repeat:no-repeat!important; background-position:right 12px center!important; background-size:16px!important;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23717B8C' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2'/%3e%3cpath d='M16 2v4M8 2v4M3 10h18'/%3e%3c/svg%3e")!important}
input.feld-datum.is-invalid{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2'/%3e%3cpath d='M16 2v4M8 2v4M3 10h18'/%3e%3c/svg%3e")!important}
.form-control.feld-datum{text-align:left!important}  /* Datum immer linksbuendig, auch in Bereichen mit rechtsbuendigen Zahlen */

/* ---------- Vereinheitlichung, Fabian, 11.11.2026 ----------
   Auftrag "durch das gesamte Portal gehen und Design und Bedienung vereinheitlichen". Die Seiten kamen einzeln aus den Snippets und
   brachten je eine eigene Knopf-Familie (lg-, bb-, ev-, tk-, ag-, bg-) mit 32 bis 38 px Hoehe, eigene Reiter, Suchfelder und
   Aktualisieren-Knoepfe mit. Diese Schicht legt die gemeinsamen Masse einmal fest (Designstrategie: Knoepfe mindestens 40 px, Reiter mit
   Unterstrich in der Akzentfarbe, gleiche Begriffe); die Seiten-Stylesheets behalten nur, was wirklich nur dort gilt.
   Regeln: 1) Knopf 40 px hoch, 15 px Schrift, "klein" 32 px; am Handy und bei Fingerbedienung mindestens 44 px. 2) Reiter: Unterstrich
   statt Flaeche (.reiter, oben). 3) Aktualisieren: neben einem Suchfeld nur das Symbol (.al-icon), sonst Symbol mit dem Wort
   "Aktualisieren" (.btn). 4) Suchfeld immer mit Lupe (.al-suche). 5) Die Suche im Kopf steht auf jeder Seite an derselben Stelle. Muster: /stil.
   Fabian, 12.11.2026 ("Duenne jetzt die Seiten-Stylesheets aus"): Die Seiten-Stylesheets setzen fuer diese Familien keine Hoehe, Abstaende
   und Schriftgroesse mehr; Suchfelder und Symbol-Knoepfe tragen .al-suche bzw. .al-icon und bringen nur noch mit, was nur dort gilt.
   Vorher ueberstimmten alte !important-Regeln der Tickets diese Schicht (Knoepfe 32 statt 40 px), und am Tablet mit Finger galten 40 statt 44 px.
   !important bleibt hier, weil einzelne Seiten Knoepfe in engeren Selektoren fassen (.tk-form-fuss>.tk-knopf u. a.). */
/* Suchfeld mit Lupe: gleicher Rahmen und gleiche Hoehe wie die Auswahlfelder daneben. */
.al-suche{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--app-rahmen-feld, var(--app-rahmen));border-radius:var(--app-knopf-radius,6px);background:var(--app-karte);min-width:0}
.al-suche:focus-within{border-color:var(--app-blau);box-shadow:0 0 0 3px var(--app-fokus)}
.al-suche svg{width:16px;height:16px;color:var(--app-text-3);flex:none}
.al-suche input{flex:1;min-width:0;height:100%;border:0!important;background:transparent!important;font:inherit;font-size:15px;color:var(--app-text);outline:0;box-shadow:none!important;padding:0!important;min-height:0!important}
body .lg-knopf,body .bb-knopf,body .ev-knopf,body .ag-knopf,body .tk-knopf,body .bg-los{height:40px!important;min-height:40px!important;padding:0 16px!important;
  font-size:15px!important;font-weight:600;border-radius:var(--app-knopf-radius,6px)}
body .ag-knopf--klein,body .tk-knopf--klein,body .lg-knopf--klein,body .ev-knopf--klein{height:32px!important;min-height:32px!important;padding:0 12px!important;font-size:14px!important}
@media (max-width:760px),(pointer:coarse){
  body .lg-knopf,body .bb-knopf,body .ev-knopf,body .ag-knopf,body .tk-knopf,body .bg-los,
  body .ag-knopf--klein,body .tk-knopf--klein,body .lg-knopf--klein,body .ev-knopf--klein,
  .al-icon{height:var(--app-tipp)!important;min-height:var(--app-tipp)!important}
  .al-icon{width:var(--app-tipp)}
  .al-suche{height:var(--app-tipp)}
  .al-suche input{font-size:16px}
  .reiter button{min-height:var(--app-tipp); box-sizing:border-box; display:inline-flex; align-items:center}
}
/* Kopf: Titel und rechte Seite teilen sich den Platz gleich, die Suche steht dadurch immer in der Mitte (vorher wanderte sie mit der Laenge der Brotkrumen). */
@media (min-width:761px){
  .kopf .titel{flex:1 1 0}
  .kopf .kopf-suche{flex:0 1 420px}
  .kopf .rechts{flex:1 1 0; justify-content:flex-end; margin-left:0}
}
@media (max-width:760px){.kopf .hilfe-knopf{display:none}}  /* am Handy steht die Hilfe im Benutzermenue */
/* Eingabefelder der Zeiterfassung: gleiche Ecken und derselbe Pfeil am Auswahlfeld wie .form-select (vorher das Bedienelement des Browsers). */
.vo-zt input,.vo-zt select,.vo-zt textarea{border-radius:6px!important}
.vo-zt select{appearance:none; -webkit-appearance:none; padding-right:36px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 10px center!important; background-size:16px!important}
@media (pointer:coarse){.mv-kz{min-height:40px}}  /* Filter mit Zaehler der Mietvertraege: am Finger so hoch wie die Status-Chips der Tickets */

/* Fabian, 13.11.2026: Sprunglink "Zum Inhalt" (huelle.js), nur mit Tastaturfokus sichtbar; absolut, damit er das Raster der Schale nicht verschiebt */
.sprunglink{position:absolute; left:8px; top:-60px; z-index:50; padding:8px 14px; border-radius:6px; background:var(--app-aktion); color:var(--app-auf-aktion); font-weight:600; text-decoration:none}
.sprunglink:focus{top:8px}
#inhalt:focus{outline:0}

/* Fabian, 13.11.2026: "Aufgaben dazu" am Vorgang und am Ticket (vo.aufgabenZu) */
.aufgaben-zu{margin:12px 0 0; padding:10px 12px; border:1px solid var(--app-rahmen); border-radius:8px; background:var(--app-karte)}
.aufgaben-zu[hidden]{display:none}
.aufgaben-zu__titel{margin:0 0 6px; font-size:13px; font-weight:600; color:var(--app-text-2)}
.aufgaben-zu__liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.aufgaben-zu__liste li{display:flex; flex-wrap:wrap; gap:2px 10px; align-items:baseline; font-size:14px}
.aufgaben-zu__liste a{text-decoration:none}
.aufgaben-zu__liste a:hover span{text-decoration:underline}
.aufgaben-zu__liste a.ist-zu span{text-decoration:line-through; color:var(--app-text-3)}
.aufgaben-zu__liste small{color:var(--app-text-3); font-size:12px}

/* Fabian, 13.11.2026: Kopfzeile der Inbox als Marken (wie die Inbox-Karte auf Heute); mindestens 32 px hoch, am Geraet 44 px */
.ib-kopf{display:flex; flex-wrap:wrap; gap:6px}
.ib-kopf .ib-marke{display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 10px; border-radius:8px; font-size:13px; color:var(--app-blau); background:var(--app-blau-hell)}
.ib-kopf .ib-marke strong{color:inherit}
.ib-kopf .ib-marke.warnung{color:var(--app-warnung); background:var(--app-warnung-hell)}
.ib-kopf .ib-marke.ruhig{color:var(--app-text-2); background:none; box-shadow:inset 0 0 0 1px var(--app-rahmen)}
.ib-kopf .ib-marke:hover{color:var(--app-blau)}
@media (pointer:coarse){ .ib-kopf .ib-marke{min-height:var(--app-tipp)} }

/* Fabian, 13.11.2026 (Nachtrundgang): kleine Verweise sind am Geraet (Finger) mindestens 44 px hoch: "‹ Alle …", Verweise in Kartenkoepfen,
   Namen in Tabellen. Gemessen waren sie 18 bis 21 px. */
@media (pointer:coarse){
  .lg-zurueck, .ak-zurueck, .card-actions a, .lg-tr-name, .wo-zahl a, a.wo-zahl{display:inline-flex; align-items:center; min-height:var(--app-tipp)}
}