:root{--bg:#0f172a;--surface:#1e293b;--surface-2:#27344a;--accent:#38bdf8;--accent-dark:#0ea5e9;--warn:#fbbf24;--orange:#f59e0b;--green:#34d399;--red:#f87171;--white:#f8fafc;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--border:rgba(255,255,255,0.08);--border-strong:rgba(255,255,255,0.14);--radius:12px;--radius-sm:8px;--radius-lg:16px;--shadow:0 4px 24px rgba(0,0,0,0.3);--shadow-sm:0 2px 8px rgba(0,0,0,0.2);--shadow-lg:0 12px 36px rgba(0,0,0,0.4);--transition:all .18s cubic-bezier(.4,0,.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
/* 24.08.2026 (Sebastian): echtes Seiten-Scrollen statt Kasten im Kasten.
   Vorher hielten html/body die Seite fest und .app-content scrollte allein -
   der Balken sass mitten in der App. Jetzt scrollt die Seite selbst, der
   Kopf bleibt per sticky oben. */
/* A-819 (26.08.2026): Pull-to-Refresh hart sperren. overscroll-behavior stand
   nur auf body - auf Android Chrome muss es auch auf html stehen, sonst loest ein
   Ziehen von oben trotzdem ein Neuladen aus und ungespeicherte Eingaben (nur im
   Arbeitsspeicher) gehen verloren. Zusammen mit dem Auto-Speicher kann so nichts
   mehr verlorengehen. Normales Scrollen bleibt unberuehrt. */
html,body{min-height:100%;overscroll-behavior:none;overscroll-behavior-y:contain}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--white);font-size:15px;line-height:1.5;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overscroll-behavior:none}
a{color:var(--accent);text-decoration:none}
h1,h2,h3,h4{letter-spacing:-.01em}
::selection{background:rgba(56,189,248,0.3)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.2)}
.app-header{background:var(--surface);padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;box-shadow:var(--shadow-sm)}
.app-header .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.app-header .logo img{width:28px;height:28px;border-radius:6px}
.header-right{display:flex;align-items:center;gap:6px}
/* Verbindungsanzeige im Kopf (14.09.2026, Sebastian): gross genug, dass jeder beim Oeffnen
   sieht, ob er online ist, offline arbeitet oder gerade synchronisiert wird. */
.netz-status{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 8px;border-radius:999px;border:1px solid transparent;font-size:.8rem;font-weight:700;line-height:1;white-space:nowrap;flex-shrink:0;transition:background .2s,color .2s,border-color .2s}
.netz-status:empty{display:none}
.netz-status svg{width:19px;height:19px;flex-shrink:0}
.netz-status.online{color:var(--green);background:rgba(52,211,153,.13);border-color:rgba(52,211,153,.38)}
.netz-status.sync{color:var(--accent);background:rgba(56,189,248,.13);border-color:rgba(56,189,248,.38)}
.netz-status.sync svg{animation:spin 1s linear infinite}
.netz-status.offline{color:var(--orange);background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.42)}
.netz-status.fehler{color:var(--red);background:rgba(248,113,113,.14);border-color:rgba(248,113,113,.42)}
:root[data-theme="light"] .netz-status.online{color:#047857;background:#d1fae5;border-color:#6ee7b7}
:root[data-theme="light"] .netz-status.sync{color:#0369a1;background:#e0f2fe;border-color:#7dd3fc}
:root[data-theme="light"] .netz-status.offline{color:#b45309;background:#fef3c7;border-color:#fcd34d}
:root[data-theme="light"] .netz-status.fehler{color:#b91c1c;background:#fee2e2;border-color:#fca5a5}
.app-header{gap:8px}
/* Handy: die Anzeige ist breiter als der alte Punkt samt Pfeil - Pille etwas knapper,
   Testumgebungs-Schild nur noch "TEST", damit der App-Name nicht abgeschnitten wird. */
@media (max-width:420px){.netz-status{height:28px;gap:4px;padding:0 8px 0 6px;font-size:.74rem}.netz-status svg{width:16px;height:16px}.app-header #testBadge{font-size:0;padding:2px 6px;margin-left:2px;flex-shrink:0}.app-header #testBadge::after{content:"TEST";font-size:.62rem}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.app-content{flex:1;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));animation:viewFade .22s ease}
@keyframes viewFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.app-nav{background:var(--surface);border-top:1px solid var(--border);display:flex;padding:6px 0 calc(env(safe-area-inset-bottom,0px) + 6px);position:relative;z-index:10;box-shadow:0 -2px 12px rgba(0,0,0,0.2)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;color:var(--gray-500);font-size:.65rem;font-weight:600;cursor:pointer;transition:var(--transition);border:none;background:none;-webkit-tap-highlight-color:transparent}
.nav-item .nav-icon{font-size:1.3rem;transition:var(--transition)}
.nav-item:active{transform:scale(.92)}
.nav-item.active{color:var(--accent)}
.nav-item.active .nav-icon{transform:scale(1.1)}
.page-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.page-header h2{font-size:1.25rem;font-weight:700;flex:1}
/* Sebastian 11.09.2026: der 'schoene' Aufmass-Zurueck-Rahmen (accent) als
   Standard. .btn-back hatte nur einen nackten Pfeil - jetzt Rahmen + Label
   " Zurueck" per ::after, damit alle vorhandenen ←-Knoepfe automatisch
   dazugehoeren (kein Umbau in ~40 Fundstellen). */
.btn-back{background:transparent;border:1.5px solid var(--accent);color:var(--accent);font-size:.95rem;font-weight:600;cursor:pointer;padding:0 14px;min-width:auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:var(--radius-sm);transition:var(--transition);-webkit-tap-highlight-color:transparent;line-height:1}
.btn-back::after{content:" Zur\00fc ck";white-space:nowrap;font-weight:600}
.btn-back:hover{background:rgba(56,189,248,.08);color:var(--white);border-color:var(--white)}
.btn-back:active{transform:scale(.96);background:rgba(56,189,248,.15)}
.home-header{text-align:center;padding:24px 0 20px}
.home-header h1{font-size:1.4rem;font-weight:800;margin:8px 0 4px}
.home-sub{color:var(--gray-400);font-size:.9rem}
.home-logo{border-radius:16px;box-shadow:var(--shadow-sm)}
.menu-section{margin-bottom:24px}
.menu-section-title{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.045em;color:var(--gray-400);padding:0 2px 8px;margin:0 0 10px;border-bottom:1px solid var(--border)}
.settings-menu-section{margin-bottom:28px}
.settings-menu-section details.fenster-accordion-item:last-child{margin-bottom:0!important}
.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(158px,100%),248px));gap:12px}
.home-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 16px;text-align:center;cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent}
.home-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
.home-card:active{transform:translateY(-1px) scale(.98)}
.home-card.accent{background:rgba(56,189,248,0.1);border-color:rgba(56,189,248,0.3)}
.home-card.employee{background:rgba(251,191,36,0.1);border-color:rgba(251,191,36,0.3);grid-column:1/-1}
.card-icon{font-size:1.6rem}
.card-label{font-size:.85rem;font-weight:600;letter-spacing:-.01em}
.link-subtle{color:var(--gray-500);font-size:.85rem;cursor:pointer}
.link-subtle:hover{color:var(--accent)}
.form-section{margin-bottom:20px}
.form-section h3{font-size:1rem;margin-bottom:12px;color:var(--gray-300)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .span-2{grid-column:1/-1}
label{display:block;font-size:.8rem;font-weight:600;color:var(--gray-300);margin-bottom:4px}
input,select,textarea{width:100%;min-height:44px;padding:10px 12px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;color:var(--white);font-family:inherit;transition:var(--transition)}
input::placeholder,textarea::placeholder{color:var(--gray-500)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,0.18)}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
input.invalid,select.invalid,textarea.invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(248,113,113,0.12)}
/* Einheitliche Dropdown-Optik (v2.8.46): nativen OS-Pfeil abschalten, konsistenten
   SVG-Caret rechts einsetzen (Rolle/Bezeichnung/Funktion - "das komische Dropdown"). */
select.app-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;cursor:pointer}
select.app-select option{background:var(--surface);color:var(--white)}
textarea{resize:vertical;min-height:60px}
.input-sm{width:80px;text-align:center}
.form-error{color:var(--red);font-size:.85rem;margin-top:8px;display:flex;align-items:center;gap:6px}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.element-selector{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.element-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:var(--transition);font-size:.85rem;color:var(--gray-300);font-weight:500;-webkit-tap-highlight-color:transparent}
.element-chip:active,.element-chip:hover{background:rgba(56,189,248,0.08);border-color:var(--accent)}
.element-chip.active{background:rgba(56,189,248,0.12);border-color:var(--accent);color:var(--white)}
.chip-icon{font-size:1.1rem}
.element-detail-card{background:rgba(56,189,248,0.05);border:1px solid rgba(56,189,248,0.15);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;animation:fadeSlide .25s ease}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.element-detail-card h4{margin:0 0 10px;font-size:.9rem;color:var(--accent);display:flex;align-items:center;gap:6px}
.detail-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.detail-row label{margin:0;font-size:.78rem;min-width:55px}
.sub-options{display:flex;flex-wrap:wrap;gap:6px}
.sub-option{padding:5px 10px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:6px;font-size:.78rem;color:var(--gray-400);cursor:pointer;transition:var(--transition)}
.sub-option:active,.sub-option:hover{border-color:var(--accent);color:var(--gray-300)}
.sub-option.active{background:rgba(56,189,248,0.1);border-color:var(--accent);color:var(--white)}
.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(76px,100%),112px));gap:6px}
.color-swatch{height:40px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:var(--transition)}
.color-swatch:hover{border-color:var(--gray-400);transform:scale(1.08)}
.color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,189,248,0.4)}
.color-name{font-size:.65rem;color:var(--gray-300);text-align:center;line-height:1.1;margin-top:2px}
.icon-select-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(84px,100%),124px));gap:8px}
.icon-select-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:var(--transition)}
.icon-select-item:hover{border-color:var(--gray-400)}
.icon-select-item.active{background:rgba(56,189,248,0.1);border-color:var(--accent)}
.icon-select-item svg{width:50px;height:65px}
.icon-select-label{font-size:.6rem;color:var(--gray-400);text-align:center;line-height:1.2}
.icon-select-item.active .icon-select-label{color:var(--white)}
.pos-photos{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.pos-photo-thumb{width:40px;height:40px;border-radius:4px;object-fit:cover;border:1px solid var(--border)}
.list-card.active-card{border-color:var(--accent);background:rgba(56,189,248,0.04)}
.list-card.done{opacity:0.7;border-color:var(--green)}
.done-check{color:var(--green);font-size:.9rem}
.form-hint{font-size:.82rem;color:var(--gray-500)}
.file-upload-area{border:2px dashed rgba(255,255,255,0.12);border-radius:var(--radius);padding:20px;text-align:center;cursor:pointer;transition:var(--transition)}
.file-upload-area:active,.file-upload-area.dragover{border-color:var(--accent);background:rgba(56,189,248,0.05)}
.upload-icon{font-size:1.8rem;margin-bottom:6px}
.upload-text{color:var(--gray-400);font-size:.85rem}
.upload-text strong{color:var(--accent)}
.file-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.file-preview-item{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.file-preview-item img{width:100%;height:100%;object-fit:cover}
.remove-file{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.7);color:#fff;border:none;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 20px;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:var(--transition);border:none;font-family:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;letter-spacing:-.01em}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(56,189,248,0.35)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--bg);box-shadow:0 2px 10px rgba(56,189,248,0.25)}
.btn-primary:hover{background:#5fc9fa;box-shadow:0 4px 14px rgba(56,189,248,0.35)}
.btn-primary:active{background:var(--accent-dark);transform:scale(.97);box-shadow:0 1px 6px rgba(56,189,248,0.3)}
.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}
.btn-outline:hover{background:rgba(56,189,248,0.08)}
.btn-outline:active{transform:scale(.97);background:rgba(56,189,248,0.14)}
.btn-warn{background:var(--orange);color:var(--bg);box-shadow:0 2px 10px rgba(245,158,11,0.25)}
.btn-warn:hover{background:#f7a829}
.btn-warn:active{transform:scale(.97)}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--gray-300);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--white)}
.btn-sm{min-height:36px;padding:6px 14px;font-size:.8rem}
.btn-xs{min-height:30px;padding:4px 10px;font-size:.72rem;border-radius:6px}
.card-list{display:flex;flex-direction:column;gap:10px}
.list-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);-webkit-tap-highlight-color:transparent}
.list-card:hover{border-color:var(--border-strong);transform:translateY(-1px);box-shadow:var(--shadow)}
.list-card:active{border-color:var(--accent);transform:translateY(0) scale(.99)}
.list-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:700}
.list-card-body{font-size:.85rem;color:var(--gray-400);margin-bottom:8px;line-height:1.5}
.list-card-footer{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--gray-500)}
.text-muted{color:var(--gray-500)}
.badge{display:inline-block;padding:3px 9px;border-radius:5px;font-size:.7rem;font-weight:700;color:var(--bg);letter-spacing:.02em}
.empty-state{text-align:center;color:var(--gray-500);padding:48px 16px;font-size:.9rem}
/* v2.8.94: 5-Kachel-Reihe in Dashboard-Karten (Sebastian 17.08.2026) - Status/Endmass/Aufmass/Bearbeiten/Verwalten
   alle gleich hoch, gleich gross, alle antippbar-sicher (Kartenklick fasst sie nicht an, data-card-actions greift). */
.dashboard-datum{font-size:.72rem;color:var(--gray-400);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 8px}
.dashboard-datum span[title]{margin-left:auto}
.fuenferreihe{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.fk{flex:1 1 0;min-width:78px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 6px;border-radius:8px;font-size:.7rem;font-weight:600;letter-spacing:.02em;text-align:center;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,filter .12s ease;line-height:1.15}
.fk:hover{filter:brightness(1.1);transform:translateY(-1px)}
.fk .oben{font-size:.6rem;text-transform:uppercase;opacity:.8;margin-bottom:2px;font-weight:700;letter-spacing:.04em}
.fk .unten{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fk.info{color:#062033;cursor:default}
.fk.info:hover{transform:none;filter:none}
.fk.status-offen{background:#fbbf24}
.fk.status-endmass{background:#f59e0b}
.fk.status-fertig{background:#34d399}
.fk.endmass-ja{background:#22c55e;color:#062033}
.fk.endmass-nein{background:#64748b;color:#fff}
.fk.aufmass-ja{background:#38bdf8;color:#062033}
.fk.aktion{background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--gray-300);font-weight:700}
.fk.aktion:hover{border-color:var(--accent);color:var(--accent)}
.fk.aktion .oben{opacity:.6}
/* v2.8.91: Zwischenüberschrift der Dashboard-Phasen (Endmaß fällig / In Bearbeitung / Fertig). */
.dashboard-gruppe{font-size:.82rem;color:var(--gray-400);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 8px;display:flex;align-items:center;gap:8px;font-weight:600}
.dashboard-gruppe:first-child{margin-top:0}
.dashboard-gruppe .zahl{background:rgba(255,255,255,.08);padding:1px 8px;border-radius:99px;font-size:.75rem;color:var(--gray-300);font-weight:700}
.dashboard-gruppe.rot   .zahl{background:rgba(248,113,113,.2);color:#f87171}
.dashboard-gruppe.blau  .zahl{background:rgba(56,189,248,.2);color:var(--accent)}
.dashboard-gruppe.gruen .zahl{background:rgba(52,211,153,.2);color:#34d399}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),300px));gap:10px;margin-bottom:16px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;text-align:center;box-shadow:var(--shadow-sm);transition:var(--transition)}
.stat-card:hover{border-color:var(--border-strong)}
.stat-val{font-size:1.6rem;font-weight:800;display:block;letter-spacing:-.02em}
.stat-val.accent{color:var(--accent)}
.stat-val.green{color:var(--green)}
.stat-val.warn{color:var(--orange)}
.stat-lbl{font-size:.72rem;color:var(--gray-500);font-weight:600}
.endmass-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding:10px;background:var(--surface);border-radius:8px}
.info-bar{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);border-radius:8px;padding:8px 14px;margin-bottom:16px;font-size:.82rem;color:var(--orange)}
.kontakt-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.kontakt-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-size:1rem;font-weight:600;transition:var(--transition);box-shadow:var(--shadow-sm);min-height:44px}
.kontakt-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.kontakt-card:active{border-color:var(--accent);transform:translateY(0) scale(.99)}
.kontakt-info{text-align:center;color:var(--gray-400);font-size:.9rem}
.prospekt-card{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;transition:var(--transition);box-shadow:var(--shadow-sm)}
.prospekt-card:hover{border-color:var(--border-strong)}
.prospekt-card:active{border-color:var(--accent);transform:scale(.99)}
.toast{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);left:50%;transform:translateX(-50%) translateY(-100px);background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 22px;font-size:.85rem;font-weight:600;z-index:9999;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;box-shadow:var(--shadow-lg);max-width:90%}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast-success{border-color:var(--green);color:var(--green)}
.toast-warn{border-color:var(--orange);color:var(--orange)}
.toast-info{border-color:var(--accent);color:var(--accent)}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .2s}
.modal-overlay.show{opacity:1}
.modal{background:var(--surface);border-radius:var(--radius-lg);padding:24px;max-width:90%;width:320px;box-shadow:var(--shadow-lg);border:1px solid var(--border);transform:scale(.96);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.modal-overlay.show .modal{transform:scale(1)}
.modal p{margin-bottom:16px;line-height:1.5}
.modal-btns{display:flex;gap:10px;justify-content:flex-end}
/* Action-Sheet (21.07.2026, Dashboard-Aufräumung: gebündeltes "⋮ Verwalten"-Menü) */
/* Standard-Aussehen fuer ALLE Pop-up-Menues (Sebastian 18.08.2026: dicke,
   schoene Buttons, einheitlich in der ganzen App). */
.modal.action-sheet{width:370px}
.action-sheet-list{display:flex;flex-direction:column;gap:10px}
.action-sheet-item{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:18px 18px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.045);color:var(--text);font-size:1.12rem;font-weight:600;line-height:1.3;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}
.action-sheet-item:hover{background:rgba(255,255,255,.10);border-color:var(--accent)}
.action-sheet-item:active{transform:scale(.985)}
.action-sheet-item.danger{color:#ef4444;border-color:rgba(239,68,68,.35)}
.action-sheet-item.danger:hover{background:rgba(239,68,68,.12)}
.action-sheet-item.zurueck{color:var(--accent);border-color:rgba(56,189,248,.45);background:rgba(56,189,248,.08);font-weight:700}
/* Berechtigungs-Liste (21.07.2026, Sebastian: "schöner, wie im Dashboard, untereinander,
   rot=aktiviert/grau=deaktiviert" statt der 2-spaltigen Checkbox-Grid). */
/* Rechte-Haekchen als Raster statt langer Einspalter (08.09.2026, Sebastian:
   "nicht so weit runter scrollen"): auf breiten Schirmen 2-3 Spalten, am Handy
   automatisch eine. Halbiert bis drittelt die Hoehe der Rechte-Liste. */
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));column-gap:14px;row-gap:8px}
/* Rechte-Chips (08.09.2026, Sebastian): EIN anklickbarer Text-Chip statt Label +
   Schieberegler. Gruen = aktiviert, ausgegraut = aus. Die versteckte Checkbox
   traegt weiter den Wert fuers Speichern - der Save-Weg bleibt unberuehrt. */
.perm-chip{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
  color:var(--gray-400);cursor:pointer;font-size:.86rem;font-weight:600;
  transition:background .12s,border-color .12s,color .12s;user-select:none;
  -webkit-tap-highlight-color:transparent}
.perm-chip input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.perm-chip::before{content:'';flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--gray-500)}
.perm-chip:hover{border-color:rgba(255,255,255,.22)}
.perm-chip:has(input:checked){background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.55);color:#4ade80}
.perm-chip:has(input:checked)::before{content:'\2713';border:none;background:#22c55e;color:#0f172a;
  font-size:.72rem;font-weight:900;line-height:16px;text-align:center}
.perm-chip:has(input:checked):hover{border-color:rgba(34,197,94,.8)}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 4px;border-bottom:1px solid var(--border);cursor:pointer}
.perm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 4px;border-bottom:1px solid var(--border);cursor:pointer}
.perm-row:last-child{border-bottom:none}
.perm-row-label{font-size:.88rem}
.perm-row-switch{position:relative;display:inline-block;width:42px;height:24px;border-radius:999px;background:#475569;transition:background .15s;flex-shrink:0}
.perm-row-switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.perm-row-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.perm-row:has(.perm-row-switch input:checked) .perm-row-switch{background:#ef4444}
.perm-row:has(.perm-row-switch input:checked) .perm-row-switch::after{left:20px}
/* Gruppen-Ueberschriften in der Berechtigungs-Schalterliste (Neu-Anlegen + Bearbeiten). */
.perm-group{margin-bottom:6px}
.perm-group + .perm-group{margin-top:8px}
.perm-group-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-400);padding:2px 4px 4px;border-bottom:1px solid var(--border);margin-bottom:2px}
.room-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.room-chip{padding:6px 12px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;font-size:.78rem;color:var(--gray-400);cursor:pointer;transition:var(--transition)}
.room-chip:hover{border-color:var(--gray-400)}
.room-chip.active{background:rgba(56,189,248,0.1);border-color:var(--accent);color:var(--white)}
.room-chip.add-room{border-style:dashed;color:var(--accent)}
.settings-section{margin-bottom:24px}
.settings-section h3{font-size:1rem;margin-bottom:12px;color:var(--gray-300)}
.user-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-bottom:8px}
.user-role{font-size:.75rem;padding:2px 8px;border-radius:4px;font-weight:700}
.role-admin{background:rgba(56,189,248,0.15);color:var(--accent)}
.role-mitarbeiter{background:rgba(251,191,36,0.15);color:var(--orange)}
.role-kunde{background:rgba(52,211,153,0.15);color:var(--green)}
.photo-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(72px,100%),108px));gap:8px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-top:8px}
.photo-picker img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;border:2px solid transparent;cursor:pointer}
.photo-picker img:hover{border-color:var(--gray-400)}
.photo-picker img.selected{border-color:var(--accent)}
.autosave-indicator{position:fixed;top:60px;right:12px;font-size:.7rem;color:var(--gray-500);z-index:100;opacity:0;transition:opacity .3s}
.autosave-indicator.show{opacity:1}
@media(max-width:400px){.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:1}.home-grid{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions .btn{width:100%}}
@media(max-width:380px){.icon-select-grid{grid-template-columns:repeat(3,1fr)}}
.compare-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.03);border-radius:8px;margin-bottom:10px;font-size:.8rem}
.compare-item{display:flex;flex-direction:column;gap:2px}
.compare-label{font-size:.65rem;color:var(--gray-500);font-weight:600}
.compare-val{color:var(--gray-300);font-weight:700}
.signature-overlay{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column}
.sig-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.sig-header span{color:var(--gray-300);font-weight:600}
.signature-overlay canvas{flex:1;width:100%;touch-action:none}
.sig-preview{width:100%;max-width:200px;height:60px;border:1px solid var(--border);border-radius:8px;object-fit:contain;background:rgba(255,255,255,0.03)}
.customer-picker{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:16px}
.customer-picker-item{padding:8px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;font-size:.85rem}
.customer-picker-item:hover{border-color:var(--accent)}
.login-log{max-height:200px;overflow-y:auto}
.log-entry{display:flex;justify-content:space-between;padding:6px 12px;font-size:.78rem;border-bottom:1px solid var(--border)}
.log-entry .log-user{color:var(--accent);font-weight:600}
.log-entry .log-time{color:var(--gray-500)}

/* ── App installieren (18.08.2026) ─────────── */
.install-banner{display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:12px 14px;
  background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.25);border-radius:var(--radius);
  cursor:pointer;transition:var(--transition);-webkit-tap-highlight-color:transparent}
.install-banner:hover{border-color:var(--accent);background:rgba(56,189,248,0.13)}
.install-banner:active{transform:scale(.99)}
.install-banner-icon{font-size:1.5rem;line-height:1;flex-shrink:0}
.install-banner-text{flex:1;font-size:.86rem;line-height:1.35;color:var(--white)}
.install-banner-text .text-muted{font-size:.78rem}
.install-banner-cta{flex-shrink:0;background:var(--accent);color:var(--bg);border-radius:8px;
  padding:8px 14px;font-size:.82rem;font-weight:700;white-space:nowrap}
@media(max-width:400px){
  .install-banner{flex-wrap:wrap}
  .install-banner-cta{width:100%;text-align:center}
}

/* ── Kachel-Wizard ─────────────────────────── */
.kw-progress{display:flex;align-items:center;justify-content:center;gap:0;margin:0 auto 20px;max-width:300px}
.kw-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--gray-500);flex-shrink:0;transition:var(--transition)}
.kw-dot.active{border-color:var(--accent);background:rgba(56,189,248,0.15);color:var(--accent)}
.kw-dot.done{border-color:var(--green);background:rgba(52,211,153,0.15);color:var(--green)}
.kw-dot.done::after{content:'✓';font-size:.7rem}
.kw-line{flex:1;height:2px;background:var(--border);margin:0 2px}
.kw-step-title{font-size:1.05rem;font-weight:700;color:var(--white);margin-bottom:14px}
.kw-nav{display:flex;gap:10px;margin-top:20px;justify-content:flex-end}
.kw-nav .btn-outline{flex-shrink:0}
/* v2.9.02: schmaler Schritt-Hinweis statt 5-Punkte-Balken (Aufmaß-Kachel) */
.kw-step-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);white-space:nowrap}
/* v2.9.02: kompakte Positions-Zeile (Icon+Label+Ort+Zaehler+Punkte in einer Zeile statt zwei Ueberschriften) */
.kw-pos-info{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--gray-300);margin:2px 0 10px}
.kw-pos-info b{color:var(--white)}
.kw-pos-info .kw-pos-dots{margin-bottom:0}

/* Tile grid (step 2) */
.kw-tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),240px));gap:12px;margin-bottom:4px}
.kw-tile{border:2px solid transparent;border-radius:16px;padding:20px 12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:var(--transition);position:relative;user-select:none;-webkit-user-select:none}
.kw-tile:active{transform:scale(.96)}
.kw-tile-icon{font-size:2.2rem;line-height:1}
.kw-tile-label{font-size:.9rem;font-weight:700;color:var(--white)}
.kw-tile-badge{position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border-radius:50%;width:22px;height:22px;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center}
.kw-sel-summary{background:rgba(56,189,248,0.08);border:1px solid rgba(56,189,248,0.2);border-radius:8px;padding:8px 12px;font-size:.82rem;color:var(--gray-300)}

/* Position form card */
.kw-pos-dots{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.kw-pos-dot{width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--border);transition:var(--transition);flex-shrink:0}
.kw-pos-dot.active{background:var(--accent);border-color:var(--accent)}
.kw-pos-dot.done{background:var(--green);border-color:var(--green)}
.kw-pos-card{background:rgba(56,189,248,0.04);border:1px solid rgba(56,189,248,0.12);border-radius:var(--radius);padding:14px 16px;animation:fadeSlide .2s ease}
.kw-field{margin-bottom:12px}
.kw-field>label{display:block;font-size:.78rem;font-weight:700;color:var(--gray-300);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.kw-dim-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kw-subcard{background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:10px;padding:12px;margin-top:10px}
.kw-subcard-title{font-size:.72rem;font-weight:800;color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}

/* Chip row */
.kw-chip-row{display:flex;flex-wrap:wrap;gap:6px}
.kw-chip{padding:7px 13px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;font-size:.8rem;color:var(--gray-300);cursor:pointer;transition:var(--transition);font-family:inherit}
.kw-chip:active,.kw-chip:hover{border-color:var(--accent);color:var(--white)}
.kw-chip.active{background:rgba(56,189,248,0.28);border:2px solid var(--accent);color:var(--white);font-weight:700;padding:6px 12px;box-shadow:0 0 0 3px rgba(56,189,248,0.18),0 0 10px rgba(56,189,248,0.35)}

/* Icon grid (SVG type select) */
.kw-icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(88px,100%),132px));gap:8px}
.kw-icon-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:var(--transition)}
.kw-icon-item:active,.kw-icon-item:hover{border-color:var(--gray-400)}
.kw-icon-item.active{background:rgba(56,189,248,0.24);border:2px solid var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,0.18),0 0 12px rgba(56,189,248,0.4);padding:7px 3px}
.kw-tile-on{background:rgba(56,189,248,0.22)!important;border:2px solid var(--accent)!important;box-shadow:0 0 0 3px rgba(56,189,248,0.18),0 0 12px rgba(56,189,248,0.4)!important;outline:none!important}
.kw-icon-item svg{width:42px;height:54px;color:var(--gray-300)}
.kw-icon-item.active svg{color:var(--accent)}
.kw-icon-label{font-size:.6rem;color:var(--gray-400);text-align:center;line-height:1.2}
.kw-icon-item.active .kw-icon-label{color:var(--white)}

/* Color grid */
.kw-color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(70px,100%),96px));gap:6px;margin-bottom:4px}
.kw-color-swatch{height:38px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;padding:4px}
.kw-color-swatch:hover{transform:scale(1.06);border-color:var(--gray-400)}
.kw-color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,189,248,0.4)}
.kw-color-swatch span{font-size:.58rem;text-align:center;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Maß-Hinweis (gängige Werte) */
.kw-hint{font-size:.62rem;color:var(--gray-500);font-weight:400;margin-left:4px}

/* Positionsübersicht in Step 3 */
.kw-poslist{margin-top:18px;border-top:1px solid var(--border);padding-top:12px}
.kw-poslist-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin-bottom:6px}
.kw-poslist-item{padding:8px 10px;margin-bottom:5px;background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;font-size:.82rem;color:var(--gray-300);cursor:pointer;transition:var(--transition)}
.kw-poslist-item:hover{border-color:var(--gray-400);color:var(--white)}
.kw-poslist-item.active{background:rgba(56,189,248,0.18);border:2px solid var(--accent);color:var(--white);font-weight:600}

/* Summary */
.kw-summary-header{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:12px;font-size:.9rem}
.kw-summary-list{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.kw-summary-row{padding:12px 16px;border-bottom:1px solid var(--border)}
.kw-summary-row:last-child{border-bottom:none}
.kw-summary-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-weight:600;font-size:.9rem}
.kw-summary-details{font-size:.82rem;color:var(--gray-400)}
/* P7 (Sebastian 21.08.2026): "mehr Platz lassen zu der oberen
   Typenbezeichnung". Der erste Anlauf setzte padding-top nur auf die ERSTE
   Zeile der Liste und zielte mit .kw-summary-gruppe auf eine Klasse, die es
   gar nicht gibt. Gemeint ist der Abstand zwischen dem Zeilenkopf und den
   Details - und der gilt in JEDER Zeile. */
.kw-summary-row{padding:16px}
.kw-summary-row-header{margin-bottom:10px}
.kw-summary-photos{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.kw-summary-photos img{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}

/* Compare bar (Endmaß) */
.kw-compare-bar{background:rgba(251,191,36,0.06);border:1px solid rgba(251,191,36,0.2);border-radius:8px;padding:10px 12px;margin-bottom:14px}
.kw-compare-label{font-size:.65rem;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.kw-compare-vals{font-size:.8rem;color:var(--gray-300)}

/* Success screen */
.kw-success{text-align:center;padding:40px 20px}
.kw-success-icon{width:72px;height:72px;border-radius:50%;background:rgba(34,197,94,0.15);border:2px solid #22c55e;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#22c55e;margin:0 auto 20px}
.kw-success h2{color:#22c55e;margin-bottom:8px}

.kw-photo-row{display:flex;flex-wrap:wrap;gap:6px;min-height:0}

@media(max-width:400px){.kw-tile-grid{grid-template-columns:1fr 1fr}.kw-icon-grid{grid-template-columns:repeat(3,1fr)}.kw-nav{flex-wrap:wrap}.kw-nav .btn{flex:1 0 auto}}

/* Farb-Auswahl deutlich hervorheben */
.kw-color-swatch.active{outline:4px solid var(--accent,#38bdf8);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 14px rgba(56,189,248,.7);transform:scale(1.04);position:relative;z-index:1}
.kw-color-swatch.active::after{content:'\2713';position:absolute;top:4px;right:6px;color:#fff;font-weight:800;font-size:1rem;text-shadow:0 0 4px #000,0 0 4px #000}

/* ── Globale Konsistenz: Fokus, Loading, Details ─────────────────────────── */
button:focus-visible,.nav-item:focus-visible,.home-card:focus-visible,.list-card:focus-visible,
.element-chip:focus-visible,.sub-option:focus-visible,.room-chip:focus-visible,.kw-chip:focus-visible,
.kw-tile:focus-visible,.kw-icon-item:focus-visible,a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(56,189,248,0.35)}

/* Skeleton-Loading für asynchrone Inhalte */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 37%,rgba(255,255,255,0.04) 63%);background-size:400% 100%;animation:skeletonShine 1.4s ease infinite;border-radius:var(--radius-sm)}
@keyframes skeletonShine{0%{background-position:100% 0}100%{background-position:0 0}}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,0.35);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;color:#0f172a}
.btn-outline.is-loading::after,.btn-ghost.is-loading::after{color:var(--accent)}


/* Einheitliche h3 in Settings/Form-Sections */
.form-section h3,.settings-section h3{font-weight:700;letter-spacing:-.01em}

/* Bessere Lesbarkeit für sehr kleine Screens */
@media(max-width:340px){body{font-size:14px}.home-header h1{font-size:1.25rem}.page-header h2{font-size:1.1rem}}

/* Größere Touchflächen für sub-option/room-chip/kw-chip (vorher <40px Höhe) */
.sub-option,.room-chip,.kw-chip{min-height:36px;display:inline-flex;align-items:center}

/* Querformat / breitere Screens: Home-Grid bekommt mehr Luft */
/* Fluide Breite statt harter Spruenge (Sebastian 20.08.2026): nutzt 94% der
   Bildschirmbreite bis hoechstens 1600px. Vorher waren es feste Stufen
   640/960/1040px - auf einem WQHD-Schirm blieben davon 41% Nutzflaeche. */
@media(min-width:600px){.app-content{padding:clamp(18px,2vw,32px);max-width:min(94vw,1600px);margin:0 auto;width:100%}.home-grid{gap:16px}}
/* Desktop-Breite (v2.8.46, recherchiert): 600-1023px bleibt Tablet-schmal (640px),
   ab 1024px darf die App ~960px nutzen, ab 1440px 1040px. Mehrspaltige Inhalte
   (form-grid, home-grid) fuellen die Breite ueber Spalten, statt einzelne Felder zu
   strecken - Formulare bleiben so bis ~1040px gut lesbar. */

/* Multi-Fenster Akkordeon */
/* Menüpunkt-Optik statt Pfeil-Akkordeon (21.07.2026, Sebastian-Feedback: "Pfeile sehen
   unprofessionell aus, dezenter, wie Menüpunkte"). Struktur bleibt <details>/<summary>
   (native Aufklapp-Mechanik, kein JS nötig) - nur die Optik wird auf eine schlichte,
   anklickbare Zeile umgestellt, angelehnt an die Dashboard-Kacheln (.home-card). */
details.fenster-accordion-item{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;margin-bottom:10px;overflow:hidden}
details.fenster-accordion-item>summary{padding:14px 16px;cursor:pointer;font-weight:600;list-style:none;user-select:none;transition:background .15s}
details.fenster-accordion-item>summary::-webkit-details-marker{display:none}
details.fenster-accordion-item>summary:hover{background:rgba(255,255,255,.04)}
details.fenster-accordion-item[open]>summary{background:rgba(255,255,255,.05);border-bottom:1px solid var(--border)}
details.fenster-accordion-item>div{padding:14px 16px}

/* Rot/Grau-Aktiv-Pille (21.07.2026, Sebastian: "Rot ist aktiviert, Grau ist deaktiviert",
   wie im Dashboard). Ersetzt die nackte Checkbox+Text-Optik bei Empfehlungen/Flyer-Aktiv-
   Schaltern - der Text bleibt fix "Aktiv", nur die Farbe zeigt den Zustand (reines CSS,
   :checked-Selektor - kein Re-Render der Liste noetig, bestehende change-Handler unveraendert). */
.toggle-pill{display:inline-flex;align-items:center;cursor:pointer;font-size:.78rem;font-weight:600}
.toggle-pill input{position:absolute;opacity:0;width:0;height:0}
.toggle-pill span{padding:4px 12px;border-radius:999px;background:#475569;color:#e2e8f0;transition:background .15s,color .15s}
.toggle-pill input:checked+span{background:#ef4444;color:#fff}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; display: none !important; }
input[type=number] { -moz-appearance: textfield !important; appearance: textfield !important; }
svg foreignObject input[type=number]::-webkit-inner-spin-button,
svg foreignObject input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; display: none !important; }
svg foreignObject input[type=number] { -moz-appearance: textfield !important; appearance: textfield !important; }

/* ---------- Login-Screen (fbx-login-*) ---------- */
.fbx-login-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;padding:24px;gap:20px;box-sizing:border-box}
.fbx-login-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:28px 24px}
.fbx-login-card h3{margin:0 0 6px;font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
.fbx-login-tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px;margin-bottom:20px}
.fbx-login-tab{flex:1;min-height:38px;padding:8px 10px;border:none;background:transparent;color:var(--gray-400);font-family:inherit;font-size:.85rem;font-weight:600;border-radius:calc(var(--radius-sm) - 2px);cursor:pointer;transition:var(--transition);-webkit-tap-highlight-color:transparent}
.fbx-login-tab:hover{color:var(--white)}
.fbx-login-tab.active{background:var(--accent);color:var(--bg)}
.fbx-login-sub{color:var(--gray-400);font-size:.88rem;margin:0 0 18px}
.fbx-login-label{display:block;font-size:.82rem;font-weight:600;color:var(--gray-300);margin:14px 0 6px}
.fbx-login-label:first-of-type{margin-top:0}
.fbx-login-input{margin:0}
.fbx-login-eye{position:absolute;right:4px;top:4px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--gray-400);cursor:pointer;font-size:1.05rem;border-radius:var(--radius-sm);-webkit-tap-highlight-color:transparent}
.fbx-login-eye:hover{color:var(--white);background:rgba(255,255,255,0.05)}
.fbx-login-submit{width:100%;min-height:46px;margin-top:18px;background:var(--accent);color:var(--bg);border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;font-weight:700;letter-spacing:-.01em;cursor:pointer;transition:var(--transition);box-shadow:0 2px 10px rgba(56,189,248,0.25)}
.fbx-login-submit:hover{background:#5fc9fa;box-shadow:0 4px 14px rgba(56,189,248,0.35)}
.fbx-login-submit:active{background:var(--accent-dark);transform:scale(.98)}
.fbx-login-switch{display:block;text-align:center;margin-top:16px;color:var(--accent);font-size:.85rem;text-decoration:none;cursor:pointer}
.fbx-login-switch:hover{text-decoration:underline}
.fbx-login-back{color:var(--gray-400);font-size:.85rem;text-decoration:none}
.fbx-login-back:hover{color:var(--white)}

/* Hell-Theme (Sebastian 19.08.2026): Umschalt-Button im Header. */
:root[data-theme="light"]{--bg:#f1f5f9;--surface:#ffffff;--surface-2:#e6edf5;--accent:#0ea5e9;--accent-dark:#0284c7;--white:#0f172a;--gray-300:#475569;--gray-400:#64748b;--gray-500:#7c8ba1;--border:rgba(15,23,42,0.12);--border-strong:rgba(15,23,42,0.20);--shadow:0 4px 24px rgba(2,8,23,0.10);--shadow-sm:0 2px 8px rgba(2,8,23,0.08);--shadow-lg:0 12px 36px rgba(2,8,23,0.14)}
:root[data-theme="light"] .app-header{background:#ffffff}
:root[data-theme="light"] .fbx-login-eye:hover{background:rgba(15,23,42,0.05)}
.fbx-login-install{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:400px;min-height:46px;margin-top:14px;background:var(--surface);border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--accent);font-family:inherit;font-size:.9rem;font-weight:700;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm)}
.fbx-login-install:hover{background:var(--accent);color:var(--bg)}
.fbx-login-install:active{transform:scale(.98)}

/* Sicherheitsnetz gegen waagerechten Scrollbalken (20.08.2026) */
img,svg,video,table,pre{max-width:100%}

/* Kundenname im Kopf des Assistenten (P1, 21.08.2026) */
.kw-kunde{font-weight:600;font-size:.86rem;color:var(--accent);margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45vw;display:inline-block;vertical-align:middle}

/* CSP-Härtung (30.08.2026): aus index.html ausgelagerte Inline-Styles des App-Shells. */
.app-header .logo { cursor: pointer; }
#testBadge { display: none; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-left: 8px; letter-spacing: .02em; }
.header-icon-btn { background: none; border: none; color: var(--white); cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
#btnTheme { font-size: 1.2rem; }
.app-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 16px; color: var(--gray-500); }
.app-loading .spinner { width: 26px; height: 26px; }