';inherits:false;initial-value:0deg}
@keyframes rotateBorder{to{--bpm-angle:360deg}}
.stat-card{transform-style:preserve-3d}
.stat-card::after{
content:'';position:absolute;inset:-1px;border-radius:inherit;
background:conic-gradient(from var(--bpm-angle),
transparent 0%,transparent 60%,
rgba(200,168,75,0.6) 70%,rgba(229,201,106,0.9) 80%,rgba(200,168,75,0.6) 90%,
transparent 100%
);
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
opacity:0;transition:opacity .4s;
animation:rotateBorder 3s linear infinite paused;
pointer-events:none;
}
.stat-card:hover::after{opacity:1;animation-play-state:running}
/* HOLOGRAPHIC SHEEN — Glanzstreifen auf Cards */
.card,.stat-card,.anf-card,.k-card{overflow:hidden}
/* Anlagen-Card: Inhalt soll nicht abgeschnitten werden */
#af-anlagen-list { overflow: visible; }
#af-anlagen-list ~ * { overflow: visible; }
.card:has(#af-anlagen-list) { overflow: visible; }
.card::before,.stat-card::before,.anf-card::before{
/* stat-card::before schon für Top-Border genutzt — nur card und anf-card */
}
.card:hover::after,.anf-card:hover::after{
content:'';position:absolute;
top:0;left:-60%;width:40%;height:100%;
background:linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.025) 40%,
var(--gold-a06) 50%,
rgba(255,255,255,0.025) 60%,
transparent 100%
);
animation:holoSheen .6s ease forwards;
pointer-events:none;
}
@keyframes holoSheen{
0%{left:-60%;opacity:0}
20%{opacity:1}
100%{left:120%;opacity:0}
}
/* BUTTON RIPPLE */
.btn{overflow:hidden}
@keyframes bpm-ripple{
0%{transform:scale(0);opacity:.4}
100%{transform:scale(4);opacity:0}
}
.bpm-ripple-el{
position:absolute;border-radius:50%;
background:rgba(255,255,255,0.18);
animation:bpm-ripple .5s ease-out forwards;
pointer-events:none;aspect-ratio:1;
}
/* FLOATING PARTICLES */
#bpm-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bpm-particle{
position:absolute;border-radius:50%;
background:radial-gradient(circle,rgba(200,168,75,0.6),transparent);
animation:floatParticle linear infinite;
pointer-events:none;
}
@keyframes floatParticle{
0%{transform:translateY(100vh) scale(0);opacity:0}
10%{opacity:1}
90%{opacity:.4}
100%{transform:translateY(-20px) scale(1);opacity:0}
}
/* 3D TILT — Karten kippen leicht zur Maus */
/* transitions für tilt werden per JS gesetzt */
@keyframes viewFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.view.active {
animation: viewFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.view.active .detail-hero,
.view.active .dok-topbar{animation:view-fade-slide .4s cubic-bezier(.4,0,.2,1) both}
/* 3. BUTTON GLOW - Primary Buttons */
.btn-primary:hover {
box-shadow: 0 0 20px rgba(200, 168, 75, 0.4),
0 4px 12px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 0 10px rgba(200, 168, 75, 0.3);
}
/* Secondary/Ghost Buttons - subtiler Glow */
.btn-secondary:hover {
box-shadow: 0 0 12px rgba(200, 168, 75, 0.2);
}
/* 4. SMOOTH CHECKBOX/RADIO - Scale on Check */
input[type="checkbox"],
input[type="radio"] {
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
transform: scale(1.1);
}
input[type="checkbox"]:active,
input[type="radio"]:active {
transform: scale(0.95);
}
/* BONUS: Smooth Badge Pulse */
@keyframes badgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.bell-badge {
animation: badgePulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* BONUS: Smooth Focus Ring */
input:focus, select:focus, textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.2);
}
/* ── Portal-Modus ───────────────────────────────── */
html.portal-mode #login-screen,
html.portal-mode #loader,
html.portal-mode #sidebar,
html.portal-mode #main,
html.portal-mode #cal-tooltip,
html.portal-mode #crm-confirm-overlay{display:none!important}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100dvh;overflow:hidden}
html.portal-mode,html.portal-mode body{overflow:auto;height:auto}
body{background:var(--black);color:var(--text);font-family:var(--font-b);font-size:var(--t-lg)}
body::before{content:'';position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;
background-image:linear-gradient(var(--gold-a04) 1px,transparent 1px),linear-gradient(90deg,var(--gold-a04) 1px,transparent 1px);
background-size:48px 48px;}
#app{display:flex;width:100%;height:100%;position:relative;z-index:var(--z-base)}
/* ── Ort-Autocomplete ───────────────────────────── */
.ort-wrap{position:relative}
.ort-suggestions{position:absolute;left:0;right:0;top:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);z-index:var(--z-dropdown);box-shadow:0 8px 24px rgba(0,0,0,.5);max-height:220px;overflow-y:auto;display:none}
.ort-suggestions.open{display:block}
.ort-suggestion-item{padding:9px 12px;cursor:pointer;font-size:var(--t-base);border-bottom:1px solid var(--border);transition:background .1s}
.ort-suggestion-item:last-child{border-bottom:none}
.ort-suggestion-item:hover,.ort-suggestion-item.active{background:var(--surface-2)}
.ort-suggestion-name{font-weight:600;color:var(--text)}
.ort-suggestion-detail{font-size:var(--t-xs);color:var(--muted);margin-top:2px}
/* ── Ungesehene Anfragen ────────────────────────── */
.anfrage-neu-dot{display:inline-block;background:rgba(231,76,60,.15);color:var(--s-abs);border:1px solid rgba(231,76,60,.45);font-size:9px;font-weight:700;padding:1px 6px;border-radius:var(--r-sm);margin-right:7px;letter-spacing:.4px;vertical-align:middle;flex-shrink:0}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@keyframes slideToast{0%{transform:translateX(400px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes fadeToast{0%{opacity:1}100%{opacity:0}}
@keyframes bounceToast{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.anfrage-ungesehen{border-left:4px solid var(--s-abs) !important;background:linear-gradient(90deg,rgba(231,76,60,.13) 0%,rgba(231,76,60,.04) 55%,transparent 100%) !important}
.anfrage-ungesehen td:first-child{position:relative}
/* ── Glocke / Notifications ────────────────────── */
#notif-bell{position:relative;cursor:pointer;padding:4px 6px;border-radius:var(--r);transition:background var(--tr-mid)}
#notif-bell:hover{background:rgba(200,168,75,.1)}
#notif-bell .bell-icon{font-size:20px;display:inline-block;transition:transform .1s}
#notif-bell.ringing .bell-icon{animation:bell-ring .5s ease infinite}
#mob-bell-btn.ringing{animation:bell-ring .5s ease infinite;transform-origin:50% 4px}
#notif-bell .bell-badge{position:absolute;top:0;right:0;background:var(--s-abs);color:#fff;border-radius:var(--r-full);width:16px;height:16px;font-size:var(--t-xs);font-weight:700;display:none}
#notif-bell.has-new .bell-badge{display:flex}
@keyframes bell-ring{
0%{transform:rotate(0)}
15%{transform:rotate(15deg)}
30%{transform:rotate(-15deg)}
45%{transform:rotate(10deg)}
60%{transform:rotate(-10deg)}
75%{transform:rotate(5deg)}
100%{transform:rotate(0)}
}
#notif-panel{position:fixed;right:8px;top:58px;width:300px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-panel);z-index:var(--z-search);display:none;overflow:hidden;word-break:break-word}
#notif-panel.open{display:block}
/* ── CRM Confirm Modal ─────────────────────────── */
#crm-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:var(--z-confirm);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#crm-confirm-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:28px 28px 22px;max-width:420px;width:90%;box-shadow:var(--sh-modal);box-sizing:border-box;overflow:hidden}
#crm-confirm-title{font-family:var(--font-h);font-size:var(--t-lg);letter-spacing:1.5px;color:var(--text)}
#crm-confirm-msg{font-size:var(--t-md);color:var(--muted);line-height:1.6;margin-bottom:18px;white-space:pre-line}
#crm-confirm-btns{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:4px;flex-wrap:wrap}
#crm-confirm-btns .btn{white-space:normal;word-break:break-word;text-align:center;min-width:0;flex-shrink:1}
/* ── Generisches Modal-System (openModal Helper) ───
Verwendung: openModal({title, body, actions, size})
Pattern für alle Modals außer crmConfirm (das hat eigene IDs aus Legacy-Gründen) */
.modal-overlay{
position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:var(--z-modal);
display:flex;align-items:center;justify-content:center;
padding:20px;backdrop-filter:blur(6px);
animation:modal-fade-in .15s ease-out;
}
.modal-overlay.modal-closing{animation:modal-fade-out .15s ease-in forwards}
.modal-overlay.modal-closing .modal-box{animation:modal-slide-out .15s ease-in forwards}
@keyframes modal-fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}
@keyframes modal-slide-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(10px) scale(0.97)}}
.modal-box{
background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
width:100%;max-height:90vh;display:flex;flex-direction:column;
box-shadow:var(--sh-modal);box-sizing:border-box;overflow:hidden;
animation:modal-slide-in .2s ease-out;
}
@keyframes modal-slide-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.modal-box.modal-size-small{max-width:420px}
.modal-box.modal-size-medium{max-width:620px}
.modal-box.modal-size-large{max-width:920px}
.modal-box.modal-size-fullscreen{max-width:100%;max-height:100%;height:100%;border-radius:0}
.modal-header{
display:flex;justify-content:space-between;align-items:center;
padding:18px 22px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
cursor:move;user-select:none;
}
.modal-title{
font-family:var(--font-h);font-size:var(--t-lg);letter-spacing:1.5px;color:var(--gold);
margin:0;line-height:1.3;
}
.modal-close{
background:none;border:none;color:var(--muted);font-size:22px;line-height:1;
cursor:pointer;padding:4px 8px;border-radius:var(--r);
transition:color var(--tr-fast), background var(--tr-fast);
}
.modal-close:hover{color:var(--text);background:rgba(255,255,255,.05)}
.modal-body{
padding:18px 22px;overflow-y:auto;flex:1;
font-size:var(--t-md);color:var(--text);line-height:1.5;
}
.modal-footer{
display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;
padding:14px 22px 18px;border-top:1px solid var(--border);flex-shrink:0;
}
.modal-footer .btn{white-space:normal;word-break:break-word;min-width:0;flex-shrink:1}
.modal-footer.modal-footer-spread{justify-content:space-between}
/* Mobile: Modals werden zu Bottom-Sheets (außer fullscreen) */
@media (max-width: 768px) {
.modal-overlay{padding:0;align-items:flex-end}
.modal-box{
max-width:100% !important;width:100%;
border-radius:16px 16px 0 0;
max-height:95vh;
animation:modal-slide-up .25s cubic-bezier(.4,0,.2,1);
}
.modal-box.modal-size-fullscreen{border-radius:0;height:100%;max-height:100%}
@keyframes modal-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-header{padding:14px 18px 12px}
.modal-body{padding:14px 18px}
.modal-footer{padding:12px 18px 16px}
/* Drag-Handle oben am Bottom-Sheet */
.modal-box::before{
content:'';display:block;width:40px;height:4px;background:rgba(255,255,255,.15);
border-radius:var(--r-xs);margin:8px auto 0;flex-shrink:0;
}
}
/* ── Sidebar Collapse ──────────────────────────── */
#sidebar{transition:width .25s cubic-bezier(.4,0,.2,1)}
#sidebar.collapsed{width:50px!important;min-width:50px!important;overflow:hidden}
/* v1.4bp: Hover-Expand wieder aktiv (war versehentlich entfernt) */
#sidebar.collapsed:hover{width:var(--sw)!important;min-width:var(--sw)!important;overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,0.4)}
#sidebar.collapsed .s-logo-text,
#sidebar.collapsed .s-logo-sub,
#sidebar.collapsed .s-bottom{opacity:0;width:0;overflow:hidden;transition:opacity var(--tr-mid),width 0s}
#sidebar.collapsed:hover .s-logo-text,
#sidebar.collapsed:hover .s-logo-sub,
#sidebar.collapsed:hover .s-section,
#sidebar.collapsed:hover .s-bottom{opacity:1;width:auto;transition:opacity var(--tr-mid),width 0s}
#sidebar.collapsed .s-logo{padding:14px 8px;justify-content:center}
#sidebar.collapsed:hover .s-logo{padding:20px 18px 16px;justify-content:space-between}
/* v6.55/56: Option A — Icons größer (26px), kompakter, exakt zentriert */
#sidebar.collapsed .s-item{
padding:0;
margin:2px 8px;
gap:0;
justify-content:center;
align-items:center;
font-size:0;
border-left:none;
border-radius:var(--r);
height:42px;
width:auto;
transition:background .15s ease, transform .12s ease;
}
#sidebar.collapsed:hover .s-item{
padding:8px 18px;
margin:0;
gap:11px;
justify-content:flex-start;
font-size:var(--t-base);
border-radius:0;
height:auto;
}
#sidebar.collapsed .s-item.active{
background:rgba(200,168,75,0.14);
box-shadow:inset 0 0 0 1px rgba(200,168,75,0.25);
}
#sidebar.collapsed .s-item:hover{
background:var(--gold-a08);
transform:scale(1.05);
}
/* SVG: feste Größe + sauber zentriert via Block-Layout */
#sidebar.collapsed .s-item svg{
width:26px;
height:26px;
display:block;
margin:0 auto;
opacity:.85;
flex-shrink:0;
}
#sidebar.collapsed:hover .s-item svg{
width:14px;
height:14px;
opacity:.65;
margin:0;
}
#sidebar.collapsed .s-item.active svg{opacity:1;color:var(--gold)}
#sidebar.collapsed .s-item:hover svg{opacity:1}
/* v6.55: Section-Header im collapsed Modus als zarte Trennlinie statt komplett ausblenden */
/* Collapsed: Header ausblenden, Body immer sichtbar für Icon-Only-View */
#sidebar.collapsed .s-acc-head{opacity:0;width:0;overflow:hidden;padding:0;height:0;pointer-events:none;}
#sidebar.collapsed .s-acc-arrow{opacity:0;width:0;height:0;}
#sidebar.collapsed .s-acc-body{max-height:600px !important;overflow:visible;} /* immer offen im collapsed state */
#sidebar.collapsed:hover .s-acc-head{opacity:1;width:auto;overflow:visible;padding:14px 16px 6px 18px;height:auto;pointer-events:auto;}
#sidebar.collapsed:hover .s-acc-arrow{opacity:.7;width:10px;height:10px;}
#sidebar.collapsed .s-section{
font-size:0;
padding:0;
margin:6px 14px 6px;
height:1px;
background:rgba(255,255,255,0.06);
letter-spacing:0;
color:transparent;
overflow:hidden;
}
#sidebar.collapsed:hover .s-section{
font-size:var(--t-xs);
padding:20px 0 6px 18px;
margin:0;
height:auto;
background:transparent;
letter-spacing:2.5px;
color:var(--muted);
}
/* ══════════════════════════════════════════════════════
SIDEBAR TOUCH-TAP FIX — Audit Fix R8
Collapsed Sidebar auf Touch: hover-expand greift nicht.
Fix: hover:none deaktiviert hover-expand, JS übernimmt Tap.
══════════════════════════════════════════════════════ */
@media (hover: none) {
#sidebar.collapsed { cursor: pointer; }
#sidebar.collapsed:hover {
width: 50px !important;
min-width: 50px !important;
box-shadow: none !important;
overflow: hidden !important;
}
}
#sidebar.collapsed #sidebar-toggle-btn{transform:rotate(180deg)}
#sidebar-toggle-btn{background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;border-radius:var(--r-sm);transition:color var(--tr-mid),transform .2s ease;line-height:1;font-size:16px}
#sidebar-toggle-btn:hover{color:var(--gold)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(200,168,75,0.2);border-radius:var(--r-sm)}
/* ── Sidebar ───────────────────────────────────── */
#sidebar{
width:var(--sw);min-width:var(--sw);
background:var(--surface);border-right:1px solid var(--border);
display:flex;flex-direction:column;overflow-y:auto;z-index:var(--z-sidebar);
}
.s-logo{padding:18px 18px 16px;border-bottom:1px solid var(--gold-a08);text-align:center}
.s-logo-text{font-family:var(--font-h);font-size:22px;letter-spacing:2px;color:var(--gold)}
.s-logo-sub{font-size:var(--t-xs);color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;margin-top:3px}
/* v6.49: Logo-Effekte konfigurierbar via Custom Properties + Body-Klassen
Defaults — werden von applyLogoSettings() zur Laufzeit überschrieben */
:root{
--logo-glow-duration: 6s;
--logo-glow-opacity: 0.55;
--logo-glow-offset: 6px;
--logo-glow-blur: 14px;
/* Stärkere Defaults für Loader/Login (größeres Logo = mehr Wirkung) */
}
@keyframes logoRotateGlow {
0% { filter: drop-shadow(var(--logo-glow-offset) 0 var(--logo-glow-blur) rgba(200,168,75, var(--logo-glow-opacity))); }
25% { filter: drop-shadow(0 var(--logo-glow-offset) var(--logo-glow-blur) rgba(200,168,75, var(--logo-glow-opacity))); }
50% { filter: drop-shadow(calc(var(--logo-glow-offset) * -1) 0 var(--logo-glow-blur) rgba(200,168,75, var(--logo-glow-opacity))); }
75% { filter: drop-shadow(0 calc(var(--logo-glow-offset) * -1) var(--logo-glow-blur) rgba(200,168,75, var(--logo-glow-opacity))); }
100% { filter: drop-shadow(var(--logo-glow-offset) 0 var(--logo-glow-blur) rgba(200,168,75, var(--logo-glow-opacity))); }
}
@keyframes logoPulseGlow {
0%, 100% { filter: drop-shadow(0 0 calc(var(--logo-glow-blur) * 0.4) rgba(200,168,75, calc(var(--logo-glow-opacity) * 0.4))); }
50% { filter: drop-shadow(0 0 var(--logo-glow-blur) rgba(200,168,75, var(--logo-glow-opacity))); }
}
/* Sidebar-Logo */
#s-logo-wrap{
cursor: pointer;
display: inline-block;
transition: transform 0.3s cubic-bezier(.4,0,.2,1);
}
#s-logo-wrap img{
display: block;
margin: 0 auto;
transition: filter var(--tr-slow);
}
#s-logo-wrap:hover{ transform: scale(1.04); }
#s-logo-wrap:hover img{
animation-play-state: paused !important;
filter: drop-shadow(0 0 calc(var(--logo-glow-blur) * 1.5) rgba(200,168,75, calc(var(--logo-glow-opacity) * 1.4))) !important;
}
/* Effekt-Typen via Body-Klassen — gelten für alle 3 Logo-Stellen */
body.logo-fx-rotate #s-logo-wrap img,
body.logo-fx-rotate .login-logo img{
animation: logoRotateGlow var(--logo-glow-duration) linear infinite;
}
body.logo-fx-rotate .loader-img{
animation: loaderFadeUp .6s ease both, logoRotateGlow var(--logo-glow-duration) linear infinite .6s;
}
body.logo-fx-pulse #s-logo-wrap img,
body.logo-fx-pulse .login-logo img{
animation: logoPulseGlow var(--logo-glow-duration) ease-in-out infinite;
}
body.logo-fx-pulse .loader-img{
animation: loaderFadeUp .6s ease both, logoPulseGlow var(--logo-glow-duration) ease-in-out infinite .6s;
}
body.logo-fx-static #s-logo-wrap img,
body.logo-fx-static .login-logo img,
body.logo-fx-static .loader-img{
animation: none;
filter: drop-shadow(0 0 var(--logo-glow-blur) rgba(200,168,75, var(--logo-glow-opacity)));
}
body.logo-fx-static .loader-img{
animation: loaderFadeUp .6s ease both;
}
body.logo-fx-none #s-logo-wrap img,
body.logo-fx-none .login-logo img,
body.logo-fx-none .loader-img{
animation: none;
filter: none;
}
body.logo-fx-none .loader-img{
animation: loaderFadeUp .6s ease both;
}
/* Sidebar-Ausrichtung umschaltbar */
body.sidebar-logo-left .s-logo{ text-align: left; }
body.sidebar-logo-left #s-logo-wrap img{ margin: 0; }
body.sidebar-logo-left #s-logo-wrap > div{ text-align: left; }
/* v6.50: Logo-Effekt-Selects sollen volle Grid-Spaltenbreite nutzen
(globale Settings-Regel aus v6.21 würde sie sonst auf 320px zwängen) */
#fx-logo-type, #fx-logo-duration, #fx-logo-intensity, #fx-logo-align{
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
#sidebar.collapsed .s-logo{opacity:0;width:0;overflow:hidden;transition:opacity var(--tr-base) ease .1s,width 0s;padding:0;border-bottom:none}
#sidebar.collapsed:hover .s-logo{opacity:1;width:auto;transition:opacity var(--tr-mid),width 0s;padding:20px 18px 16px;border-bottom:1px solid var(--border)}
#sidebar.collapsed .s-logo img{height:0;opacity:0;transition:opacity var(--tr-base), height var(--tr-base)}
#sidebar.collapsed:hover .s-logo img{height:38px;opacity:1}
.s-section{padding:20px 0 6px 18px;font-size:var(--t-xs);color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;font-weight:700}
/* ── ACCORDION SIDEBAR ─────────────────────────────── */
.s-acc-section{}
.s-acc-head{
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px 6px 18px;
font-size:var(--t-xs);color:var(--muted);
letter-spacing:2px;text-transform:uppercase;font-weight:700;
cursor:pointer;user-select:none;
transition:color var(--tr-mid);
}
.s-acc-head:hover{color:var(--text);}
.s-acc-head.open{color:var(--gold);}
.s-acc-arrow{
color:var(--muted);flex-shrink:0;
transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s;
opacity:.7;
}
.s-acc-head.open .s-acc-arrow{transform:rotate(180deg);color:var(--gold);}
/* ══════════════════════════════════════════════════════
INKOGNITO-MODUS v3 — Chiffre statt Blur
Daten bleiben strukturell intakt, Inhalt verfremdet
══════════════════════════════════════════════════════ */
body.incognito #incog-toggle {
color: var(--s-abs) !important;
background: rgba(231,76,60,.15) !important;
border-radius: 6px;
box-shadow: 0 0 0 1px rgba(231,76,60,.5);
}
body.incognito::after {
content: '🕵 INKOGNITO';
position: fixed; top: 8px; left: 50%; transform: translateX(-50%);
z-index:var(--z-lock); font-size: 10px; font-weight: 700; letter-spacing: 2px;
color: var(--s-abs); background: rgba(231,76,60,.15);
border: 1px solid rgba(231,76,60,.4); border-radius:var(--r-lg);
padding: 3px 14px; pointer-events: none; font-family: var(--font-b);
white-space: nowrap;
}
.s-acc-badge{
font-size:9px;font-weight:700;
background:var(--gold);color:var(--black);
border-radius:8px;padding:1px 5px;
margin-left:auto;margin-right:22px;
flex-shrink:0;
}
.s-acc-body{
overflow:hidden;
max-height:0;
transition:max-height .25s cubic-bezier(.4,0,.2,1);
}
.s-acc-body.open{max-height:600px;}
.s-item{
display:flex;align-items:center;gap:11px;padding:10px 18px;cursor:pointer;
color:var(--muted);font-size:var(--t-lg);font-weight:600;letter-spacing:.3px;
border-left:2px solid transparent;
transition:color var(--tr-fast), background-color var(--tr-fast), border-left-color var(--tr-fast);
}
/* Kompakter auf größeren Monitoren — Einträge passen sonst nicht */
@media (min-width: 1280px) {
.s-item{padding:7px 18px;font-size:clamp(12px,0.85vw,15px)}
.s-cat{padding:14px 18px 4px}
}
.s-item:hover{color:var(--text);background:var(--gold-a06)}
.s-item.active{color:var(--gold);border-left-color:var(--gold);background:var(--gold-a12);font-weight:600;box-shadow:inset 3px 0 12px var(--gold-a15)}
.s-item svg{width:17px;height:17px;flex-shrink:0;opacity:.65;transition:opacity var(--tr-fast)}
.s-item.active svg{opacity:1}
.s-item:hover svg{opacity:.9}
.s-bottom{margin-top:auto;border-top:1px solid var(--border)}
.notif{width:5px;height:5px;border-radius:var(--r-full);background:var(--s-abs);display:inline-block;margin-left:4px;vertical-align:middle}
.notif-count{background:var(--s-abs);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px;margin-left:auto;min-width:20px;text-align:center;animation:notif-ring 2s ease-in-out infinite;font-family:var(--font-b)}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(200,168,75,.6)}50%{box-shadow:0 0 0 5px rgba(200,168,75,0)}}
@keyframes notif-ring{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.5)}50%{box-shadow:0 0 0 5px rgba(231,76,60,0)}}
@keyframes notif-ring-gold{0%,100%{box-shadow:0 0 0 0 rgba(200,168,75,.5)}50%{box-shadow:0 0 0 5px rgba(200,168,75,0)}}
@keyframes notif-ring-orange{0%,100%{box-shadow:0 0 0 0 rgba(230,126,34,.5)}50%{box-shadow:0 0 0 5px rgba(230,126,34,0)}}
/* ── Main ──────────────────────────────────────── */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#topbar{
height:50px;min-height:50px;background:rgba(20,20,20,0.96);
backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:0;padding:0 20px;z-index:var(--z-topbar);
}
.btn-icon-notif{position:relative;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.topbar-bell-badge{position:absolute;top:4px;right:4px;background:var(--s-abs);color:#fff;border-radius:var(--r-full);width:16px;height:16px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;pointer-events:none}
#topbar-back{
display:none;align-items:center;gap:6px;padding:6px 12px 6px 0;
cursor:pointer;color:var(--muted);font-size:var(--t-base);font-weight:600;
letter-spacing:.5px;text-transform:uppercase;border-right:1px solid var(--border);
margin-right:16px;transition:color var(--tr-fast), opacity var(--tr-fast);
}
#topbar-back:hover{color:var(--gold)}
#topbar-title{font-family:var(--font-h);font-size:var(--t-xl);letter-spacing:2px;color:var(--text);flex:1;text-align:left}
#topbar-actions{display:flex;gap:8px}
#content{flex:1;overflow:hidden;padding:0;display:flex;flex-direction:column;min-height:0}
/* ── Views ─────────────────────────────────────────────────── */
.view{display:none}
.view.active{display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:clip;padding:var(--view-pad);box-sizing:border-box}
#view-kalender.active{display:flex;flex-direction:column;overflow:hidden;padding:var(--view-pad);flex:1;min-height:0}
#view-dokument-detail.active{display:flex;flex-direction:column;padding:0;overflow:hidden;flex:1;min-height:0}
/* ── Dok-Edit Split-Layout ────────────────────────────── */
#dok-detail-content{display:flex;flex-direction:column;flex:1;min-height:0}
.dok-topbar{flex-shrink:0;padding:12px 20px;border-bottom:1px solid var(--border);background:var(--surface);box-shadow:var(--sh-bar)}
/* QW1-Fix: Send-Bar schiebt #content nach unten — Höhe dynamisch via CSS-Var */
body.ang-send-bar-active #content{padding-top:var(--ang-bar-h,46px);transition:padding-top .15s ease}
#content{transition:padding-top .15s ease}
.dok-topbar-row1{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dok-topbar-row2{display:flex;gap:8px;flex-wrap:wrap}
.dok-form{width:720px;flex-shrink:0;overflow-y:auto;padding:20px 22px;border-right:none;box-sizing:border-box;min-height:0;transition:width .1s}
.dok-split,.dok-wrap{display:flex;flex:1;min-height:0;overflow:hidden;position:relative}
.dok-preview{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px;background:var(--surface-2);overflow-y:auto;position:sticky;top:80px;max-height:calc(100vh - 100px)}
.dok-preview-label{font-size:var(--t-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;flex-shrink:0}
.dok-preview iframe{display:block;width:100%;max-width:794px;aspect-ratio:210/297;margin:0 auto;border:none;border-radius:var(--r-sm);box-shadow:0 4px 32px rgba(0,0,0,0.6);background:white;flex-shrink:0;transform-origin:top center;transition:transform var(--tr-mid)}
/* Vorschau aus → Form Vollbreite */
body.preview-hidden .dok-preview{display:none}
body.preview-hidden .dok-form{width:100%;border-right:none}
/* ── Buttons ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--r);border:none;cursor:pointer;font-family:var(--font-b);font-size:var(--t-base);font-weight:600;transition:all var(--tr-fast);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;flex-shrink:0}
.btn-primary{background:var(--gold);color:var(--black)}.btn-primary:hover{background:var(--gold-2)}
.btn-secondary{background:transparent;color:var(--muted);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
/* Dokument-Buttons Anfrage-Detail */
.anf-doc-btn{background:var(--surface-2);border:1px solid rgba(200,168,75,.35);color:var(--gold)}
/* Workflow Timeline */
@keyframes wf-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes wf-pulse{0%,100%{box-shadow:0 0 0 4px var(--gold-a15)}50%{box-shadow:0 0 0 8px rgba(200,168,75,.05)}}
@keyframes wf-line-grow{from{width:0% !important;opacity:0}to{width:var(--wf-target);opacity:1}}
@keyframes chip-float{0%,100%{transform:translateY(0) scale(1);opacity:.18}50%{transform:translateY(-5px) scale(1.06);opacity:.26}}
@keyframes chip-enter{from{opacity:0;transform:scale(.6) translateY(6px)}to{opacity:.18;transform:scale(1) translateY(0)}}
@keyframes chip-float-inner{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.06)}}
.anf-chip{cursor:default}
.anf-chip:hover{border-color:var(--gold) !important;transform:translateY(-2px);background-color:var(--gold-a04) !important;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.anf-chip:hover .anf-chip-ghost{opacity:.45 !important;transform:scale(1.1) translateY(-2px)}
/* Priorität 1: Kern-Daten (Datum, Uhrzeit, Ort, Typ, Gäste, Umsatz) */
.anf-chip-prio1{
position:relative;
}
.anf-chip-prio1::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg, transparent 0%, rgba(200,168,75,0.55) 25%, rgba(200,168,75,0.85) 50%, rgba(200,168,75,0.55) 75%, transparent 100%);
border-radius:var(--r) var(--r) 0 0;
pointer-events:none;
opacity:.5;
transition:opacity .25s ease;
}
.anf-chip-prio1:hover::before{ opacity:1; }
/* Priorität 2: Logistik (Anfahrt, Sprit, Maut) — v7.53e: gleicher goldener Rand wie prio1 */
.anf-chip-prio2{
position:relative;
}
.anf-chip-prio2::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg, transparent 0%, rgba(200,168,75,0.55) 25%, rgba(200,168,75,0.85) 50%, rgba(200,168,75,0.55) 75%, transparent 100%);
border-radius:var(--r) var(--r) 0 0;
pointer-events:none;
opacity:.5;
transition:opacity .25s ease;
}
.anf-chip-prio2:hover::before{ opacity:1; }
/* Pulse für Umsatz-Chip */
.anf-chip-pulse{ animation: chipGoldPulse 4s ease-in-out infinite; }
@keyframes chipGoldPulse{
0%,100%{ box-shadow: 0 0 0 0 rgba(200,168,75,0); }
50% { box-shadow: 0 0 22px 0 rgba(200,168,75,.18); }
}
/* v6.10: Versetzte Animation der Ghost-Icons via CSS-Variable pro Kachel-Position */
.anf-chips > .anf-chip:nth-child(1){--chip-delay:0s}
.anf-chips > .anf-chip:nth-child(2){--chip-delay:0.4s}
.anf-chips > .anf-chip:nth-child(3){--chip-delay:0.8s}
.anf-chips > .anf-chip:nth-child(4){--chip-delay:1.2s}
.anf-chips > .anf-chip:nth-child(5){--chip-delay:1.6s}
.anf-chips > .anf-chip:nth-child(6){--chip-delay:2s}
.anf-chips > .anf-chip:nth-child(7){--chip-delay:2.4s}
.anf-chips > .anf-chip:nth-child(8){--chip-delay:2.8s}
.anf-chips > .anf-chip:nth-child(9){--chip-delay:3.2s}
.anf-chips > .anf-chip:nth-child(10){--chip-delay:3.6s}
/* v6.11: Bulk-Aktionen sind ein Desktop-Feature — auf Mobile (Cards) verstecken */
@keyframes hero-watermark-breathe{0%,100%{opacity:.18;transform:translateY(-50%) rotate(-15deg) scale(1)}50%{opacity:.26;transform:translateY(-50%) rotate(-13deg) scale(1.04)}}
.af-sticky-save {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index:var(--z-floatbar);
background: var(--surface);
border: 1px solid var(--gold);
border-radius: 24px;
padding: 10px 18px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 10px 40px rgba(0,0,0,.45), 0 0 0 4px var(--gold-a08);
animation: af-sticky-fade-in .25s ease-out;
}
@keyframes af-sticky-fade-in {
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes af-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.85); }
}
@media (max-width: 768px) {
/* Sticky-Save-Bar: nur sichtbar bei ungespeicherten Änderungen, kompakt */
.af-sticky-save {
display: none; /* Initial — wird per JS auf flex gesetzt bei _dirty */
position: fixed !important;
bottom: calc(64px + env(safe-area-inset-bottom,0px)) !important;
left: 12px !important;
right: 12px !important;
transform: none !important;
border-radius: 14px !important;
padding: 10px 14px !important;
justify-content: space-between !important;
z-index: 8500 !important;
}
.af-sticky-save button {
flex-shrink: 0 !important;
}
/* Sticky-Save-Bar nur in Form-Tabs anzeigen */
body.af-tab-postfach .af-sticky-save,
body.af-tab-unterlagen .af-sticky-save,
body.af-tab-automationen .af-sticky-save,
body.af-tab-hochzeitsportal .af-sticky-save {
display: none !important;
}
}
/* ═══ Countdown-Ring Animation ═══ */
@keyframes ring-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:var(--ring-target,0)}}
@keyframes eskalPulse{0%,100%{opacity:1;background:rgba(231,76,60,0.15)}50%{opacity:.75;background:rgba(231,76,60,0.28)}}
@keyframes liquid-pulse-urgent{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.3), 0 0 8px rgba(231,76,60,.3)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.3), 0 0 24px rgba(231,76,60,.7)}}
@keyframes liquid-pulse-soon{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.3), 0 0 6px rgba(200,168,75,.2)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.3), 0 0 18px rgba(200,168,75,.5)}}
/* Liquid-Wave CSS-Animationen (GPU-Compositor statt SMIL-Hauptthread)
v8.19: vertikales Schwappen via --lw-bob (JS setzt Amplitude+Tempo je nach
Event-Naehe: je dichter, desto hoeher und schneller die Welle) */
/* v8.20: 3 Stuetzpunkte (0/50/100%) mit linear ergaben eine Dreieckswelle
fuer die Y-Bewegung — sah mechanisch/ruckelig aus statt fluessig. Jetzt
5 Stuetzpunkte sinusfoermig approximiert (sin 45° ≈ .7071) + ease-in-out
statt linear fuer zusaetzliche Rundung zwischen den Stops. */
@keyframes lw-fwd{
0% {transform:translateX(0) translateY(0)}
25% {transform:translateX(12.5px) translateY(calc(var(--lw-bob,0px) * 0.7071))}
50% {transform:translateX(25px) translateY(var(--lw-bob,0px))}
75% {transform:translateX(37.5px) translateY(calc(var(--lw-bob,0px) * 0.7071))}
100%{transform:translateX(50px) translateY(0)}
}
@keyframes lw-rev{
0% {transform:translateX(50px) translateY(0)}
25% {transform:translateX(37.5px) translateY(calc(var(--lw-bob,0px) * -0.6 * 0.7071))}
50% {transform:translateX(25px) translateY(calc(var(--lw-bob,0px) * -0.6))}
75% {transform:translateX(12.5px) translateY(calc(var(--lw-bob,0px) * -0.6 * 0.7071))}
100%{transform:translateX(0) translateY(0)}
}
.lw-a{animation:lw-fwd 3s ease-in-out infinite;will-change:transform}
.lw-b{animation:lw-rev 4s ease-in-out infinite;will-change:transform}
/* ═══ Postfach-Settings: saubere Komponenten ═══ */
.pf-set-card .form-group{ margin-bottom:14px }
.form-group-0{ margin-bottom:0!important }
.form-group-sm{ margin-bottom:10px }
.pf-set-card .form-group label{ font-size:11px!important; font-weight:700!important; color:var(--muted)!important; text-transform:uppercase!important; letter-spacing:1px!important; text-align:left!important; display:block!important; margin-bottom:5px!important }
.pf-set-card .form-group .pf-set-hint{ font-size:10px; color:var(--faint); margin-top:4px; display:block; line-height:1.5 }
.pf-set-card .form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.pf-set-card input[type=text], .pf-set-card input[type=email], .pf-set-card input[type=number], .pf-set-card input[type=date], .pf-set-card select, .pf-set-card textarea{
width:100%; box-sizing:border-box; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
border-radius:var(--r); padding:8px 12px; font-size:13px; font-family:var(--font-b); outline:none; transition:border-color var(--tr-fast)
}
.pf-set-card input:focus, .pf-set-card select:focus, .pf-set-card textarea:focus{ border-color:var(--gold); background:var(--gold-a06) }
.pf-set-card input[type=number]{ max-width:120px }
/* Toggle-Row: einheitliche Zeile mit Checkbox links und Label rechts daneben */
.pf-set-toggle{ display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border-2); cursor:pointer }
.pf-set-toggle:last-child{ border-bottom:none }
.pf-set-toggle:hover{ background:rgba(200,168,75,0.03) }
.pf-set-toggle input[type=checkbox]{ accent-color:var(--gold); width:16px; height:16px; margin-top:2px; flex-shrink:0; cursor:pointer }
.pf-set-toggle-body{ flex:1; min-width:0 }
.pf-set-toggle-title{ font-size:13px!important; color:var(--text)!important; font-weight:600!important; text-transform:none!important; letter-spacing:0!important; line-height:1.4; margin:0; display:block }
.pf-set-toggle-desc{ font-size:11px; color:var(--muted); margin-top:3px; line-height:1.5; display:block }
.pf-set-toggle-right{ flex-shrink:0; display:flex; align-items:center; gap:8px }
.pf-set-toggle-right input[type=number]{ width:55px; max-width:55px; padding:4px 6px; text-align:center }
/* Inline-Zahl für "Nach X Tagen" Pattern */
.pf-set-inline-num{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--text); font-weight:600 }
.pf-set-inline-num input[type=number]{ width:55px; max-width:55px; padding:4px 6px; text-align:center; font-size:13px }
/* Regel-Tabelle */
.pf-rule-row{ border-bottom:1px solid var(--border-2); transition:background var(--tr-fast) }
.pf-rule-row:last-child{ border-bottom:none }
.pf-rule-row:hover{ background:rgba(200,168,75,0.05) }
#pf-set-rules-list table th{ background:var(--surface) }
#pf-set-rules-list input#pf-rules-search:focus{ border-color:var(--gold) }
/* ═══ Follow-up Wächter + Erweiterte Suche ═══ */
.cm-followup-bar{display:flex;align-items:center;gap:10px;padding:7px 16px;border-top:1px solid var(--border-2);background:var(--surface-2);flex-shrink:0;flex-wrap:wrap}
.cm-followup-bar label{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted);cursor:pointer;user-select:none}
.cm-followup-bar label:hover{color:var(--text)}
.cm-followup-bar input[type=number]{width:38px;background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:3px;padding:2px 5px;font-size:11px;text-align:center;-moz-appearance:textfield}
.cm-followup-bar input[type=number]::-webkit-inner-spin-button{opacity:.5}
.cm-followup-bar .fu-active{color:var(--gold)!important}
.pf-adv-filter{display:none;padding:6px 8px;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--border)}
.pf-adv-filter.open{display:flex}
.pf-fchip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-xl);border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--tr-fast);letter-spacing:.3px;white-space:nowrap;user-select:none}
.pf-fchip:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-a08)}
.pf-fchip.active{background:var(--gold);border-color:var(--gold);color:var(--black)}
/* pi-qf-btn: Posteingang-Quick-Filter nutzt denselben Stil */
.pi-qf-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-xl);border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all var(--tr-fast);white-space:nowrap;user-select:none}
.pi-qf-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-a08)}
.pi-qf-btn.active{background:var(--gold);border-color:var(--gold);color:var(--black)}
.pf-fchip-date{font-size:10px;padding:3px 8px}
.pf-adv-von{background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--r-xl);padding:3px 10px;font-size:10px;outline:none;width:100px;transition:border-color var(--tr-fast)}
.pf-adv-von:focus{border-color:var(--gold)}
.pf-adv-filter-toggle{background:var(--surface-3);border:1px solid var(--border);color:var(--muted);border-radius:var(--r);padding:5px 8px;font-size:11px;cursor:pointer;transition:color var(--tr-fast),border-color .12s;flex-shrink:0}
.pf-adv-filter-toggle.active{color:var(--gold);border-color:var(--gold)}
/* Serienmail Modal */
#serienmail-overlay{position:fixed;inset:0;z-index:calc(var(--z-lock) - 1);background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;animation:modalFadeIn .15s ease}
#serienmail-box{width:min(760px,95vw);max-height:90vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 24px 80px rgba(0,0,0,.7);animation:modalSlideIn .18s ease;overflow:hidden}
.sm-step{display:none}.sm-step.active{display:flex;flex-direction:column;flex:1;min-height:0}
.sm-recipient-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--border-2);cursor:pointer;transition:background .1s}
.sm-recipient-row:hover{background:var(--gold-a06)}
.sm-recipient-row.selected{background:rgba(200,168,75,0.1)}
.sm-recipient-row input[type=checkbox]{accent-color:var(--gold)}
/* ═══ Ungelesene Mails — Pulse-Effekt ═══ */
@keyframes mail-border-pulse{
0%,100%{box-shadow:0 0 0 1px rgba(231,76,60,.4), 0 0 8px rgba(231,76,60,.15)}
50%{box-shadow:0 0 0 2px rgba(231,76,60,.7), 0 0 20px rgba(231,76,60,.35)}
}
@keyframes mail-dot-blink{0%,100%{opacity:1}50%{opacity:.2}}
.dash-unread-active{animation:mail-border-pulse 2s ease-in-out infinite;border-color:rgba(231,76,60,.5)!important}
.mail-dot-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--s-abs);animation:mail-dot-blink 1.4s ease-in-out infinite;margin-right:6px;vertical-align:middle;flex-shrink:0}
/* ═══ Wetter-Icon-Animationen (kontinuierlich) ═══ */
@keyframes wt-sun-pulse{0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 8px rgba(243,156,18,.4))}50%{transform:scale(1.08) rotate(15deg);filter:drop-shadow(0 0 16px rgba(243,156,18,.7))}}
@keyframes wt-cloud-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@keyframes wt-fog-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@keyframes wt-rain-shake{0%,100%{transform:translateY(0)}25%{transform:translateY(-2px)}50%{transform:translateY(1px)}75%{transform:translateY(-1px)}}
@keyframes wt-snow-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes wt-storm-flicker{0%,100%{filter:drop-shadow(0 0 4px rgba(241,196,15,.4))}10%,30%{filter:drop-shadow(0 0 16px rgba(241,196,15,.9)) brightness(1.3)}50%{filter:drop-shadow(0 0 4px rgba(241,196,15,.4))}}
@keyframes wt-temp-glow{0%,100%{text-shadow:0 1px 6px rgba(0,0,0,.6)}50%{text-shadow:0 1px 6px rgba(0,0,0,.6), 0 0 12px rgba(255,255,255,.3)}}
.wt-anim-sun{animation:wt-sun-pulse 4s ease-in-out infinite;display:inline-block}
.wt-anim-cloud{animation:wt-cloud-drift 5s ease-in-out infinite;display:inline-block}
.wt-anim-fog{animation:wt-fog-pulse 3s ease-in-out infinite;display:inline-block}
.wt-anim-rain{animation:wt-rain-shake 1.2s ease-in-out infinite;display:inline-block}
.wt-anim-snow{animation:wt-snow-spin 8s linear infinite;display:inline-block}
.wt-anim-storm{animation:wt-storm-flicker 3s ease-in-out infinite;display:inline-block}
.wt-temp-anim{animation:wt-temp-glow 3s ease-in-out infinite}
/* v6.26: Konsistente Emoji-Schriftart für Wetter-Icons — sonst kann der Browser bei Symbol-Codepoints
auf System-Symbol-Fonts zurückfallen (monochrom) statt auf Color-Emoji-Fonts. */
.wt-anim-sun, .wt-anim-cloud, .wt-anim-fog, .wt-anim-rain, .wt-anim-snow, .wt-anim-storm{
font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', sans-serif !important;
}
@keyframes ring-pulse-urgent{0%,100%{filter:drop-shadow(0 0 4px rgba(231,76,60,.5))}50%{filter:drop-shadow(0 0 16px rgba(231,76,60,.9))}}
/* ── BPM Weather+Clock Widget (bwc) ── */
.bwc{width:100%;background:linear-gradient(155deg,#1c1a17 0%,#111 100%);border:1px solid var(--gold-a22);border-radius:var(--r);padding:16px 14px 13px;position:relative;overflow:hidden;font-family:var(--font-b);animation:bwcIn .8s cubic-bezier(.22,1,.36,1) both}
.bwc::before{content:'';position:absolute;top:-50px;right:-50px;width:160px;height:160px;background:radial-gradient(circle,rgba(200,168,75,.07) 0%,transparent 65%);pointer-events:none}
.bwc-clk{display:flex;align-items:baseline;justify-content:center;margin-bottom:4px;animation:bwcIn .8s .07s both cubic-bezier(.22,1,.36,1)}
.bwc-hm{font-size:44px;font-weight:200;color:#fff;letter-spacing:-2.5px;line-height:1}
.bwc-ss{font-size:19px;font-weight:300;color:var(--gold);margin-bottom:3px;animation:bwcBlink 2s ease-in-out infinite}
.bwc-dt{text-align:center;font-size:var(--t-xs);font-weight:300;color:rgba(255,255,255,.32);letter-spacing:.6px;margin-bottom:13px;animation:bwcIn .8s .12s both cubic-bezier(.22,1,.36,1)}
.bwc-ln{height:1px;background:linear-gradient(90deg,transparent,rgba(200,168,75,.28),transparent);margin-bottom:12px}
.bwc-now{display:flex;align-items:center;gap:11px;margin-bottom:12px;animation:bwcIn .8s .17s both cubic-bezier(.22,1,.36,1)}
.bwc-ico{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;animation:bwcFloat 5s ease-in-out infinite}
.bwc-tmp{font-size:28px;font-weight:200;color:#fff;letter-spacing:-1px;line-height:1}
.bwc-cnd{font-size:11px;font-weight:300;color:rgba(255,255,255,.38);margin-top:3px}
.bwc-fc{display:none !important}
.bwc-fd{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px}
.bwc-fn{font-size:8.5px;font-weight:400;color:rgba(255,255,255,.28);letter-spacing:.4px;text-transform:uppercase}
.bwc-fi{width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.bwc-fh{font-size:var(--t-base);font-weight:400;color:rgba(255,255,255,.72)}
.bwc-fl{font-size:10px;font-weight:300;color:rgba(255,255,255,.22)}
.bwc-fd.bwc-today .bwc-fn{color:var(--gold);font-weight:600}
.bwc-fd.bwc-today .bwc-fh{color:#fff;font-weight:500}
@keyframes bwcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes bwcFloat{0%,100%{transform:translateY(0)}35%{transform:translateY(-3px)}70%{transform:translateY(-5px)}}
@keyframes bwcBlink{0%,43%,57%,100%{opacity:1}50%{opacity:.1}}
@keyframes bwcSpin{to{transform:rotate(360deg)}}
.bwc-rays{animation:bwcSpin 10s linear infinite;transform-box:view-box;transform-origin:12px 12px}
.bwc-status{border-top:1px solid rgba(255,255,255,.07);padding-top:11px;margin-top:11px}
.bwc-status-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
.bwc-status-divider{height:1px;background:rgba(255,255,255,.07);margin:8px -14px;}
@keyframes ring-pulse-soon{0%,100%{filter:drop-shadow(0 0 4px rgba(200,168,75,.4))}50%{filter:drop-shadow(0 0 12px rgba(200,168,75,.7))}}
@keyframes count-pop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.event-card{transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .25s, box-shadow .25s}
.event-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(200,168,75,.3)}
.countdown-num{animation:count-pop .5s cubic-bezier(.34,1.56,.64,1) .8s both}
.date-tile-mobile-countdown{position:absolute;top:-6px;right:-6px;background:linear-gradient(145deg,#E8C566,var(--gold));color:#000;font-family:var(--font-h);font-size:var(--t-xs);font-weight:700;border-radius:10px;padding:3px 8px;line-height:1;box-shadow:0 4px 12px rgba(200,168,75,.45), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.15);letter-spacing:.5px;border:1px solid rgba(255,255,255,.2)}
.date-tile-mobile-countdown.urgent{background:linear-gradient(145deg,#FF6B6B,var(--s-abs));color:#fff;box-shadow:0 4px 12px rgba(231,76,60,.5), inset 0 1px 0 rgba(255,255,255,.3);animation:ring-pulse-urgent 2s ease-in-out infinite}
/* ═══ Universelle Watermark-Klasse ═══ */
.hero-wm{position:absolute;left:-30px;top:50%;transform:translateY(-50%) rotate(-15deg);font-size:260px;line-height:1;pointer-events:none;user-select:none;z-index:0;-webkit-mask-image:linear-gradient(105deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 90%);mask-image:linear-gradient(105deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 90%);opacity:.22;animation:hero-watermark-breathe 6s ease-in-out infinite}
.hero-wm.right{left:auto;right:-30px;-webkit-mask-image:linear-gradient(285deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 90%);mask-image:linear-gradient(285deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0) 90%);transform:translateY(-50%) rotate(15deg)}
.hero-wm-host{position:relative;overflow:hidden}
.hero-wm-host > *:not(.hero-wm){position:relative;z-index:1}
/* ═══ View-Fade Transition für Detail-Views ═══ */
@keyframes view-fade-slide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.view-anim{animation:view-fade-slide .35s cubic-bezier(.4,0,.2,1) both}
/* ═══ Listen-Hover (dezent) ═══
v6.33: translateX und Border-Slide entfernt — Zeile soll nicht springen.
Nur dezenter Gold-Background als Klickbar-Feedback. */
tr.clickable, .list-row{transition:background var(--tr-fast)}
tr.clickable:active td{background:rgba(200,168,75,0.1) !important}
tr.clickable:hover td{background:rgba(200,168,75,0.05);cursor:pointer;transition:background var(--tr-fast)}
/* Row-Actions: auf Desktop hover-reveal, auf Touch immer sichtbar */
.row-actions{display:flex;gap:4px;opacity:0;transition:opacity var(--tr-mid)}
@media (hover: hover) {
.clickable:hover .row-actions{opacity:1}
tr:hover .row-actions{opacity:1}
}
/* Touch-Geräte: immer sichtbar (kein hover verfügbar) */
@media (hover: none) {
.row-actions{opacity:1}
}
/* ── Focus-Ring einheitlich ──────────────────────── */
/* Fix v6.11d: Einheitlicher Gold-Fokus-Ring für Input + Button */
input:focus-visible,select:focus-visible,textarea:focus-visible,
button:focus-visible,a:focus-visible{
outline:2px solid rgba(200,168,75,.85) !important;
outline-offset:3px !important;
}
/* Primär-Buttons: stärkerer Ring (Gold auf Gold = Kontrast via Schatten) */
.btn-primary:focus-visible{
outline-color:rgba(255,255,255,.8) !important;
box-shadow:0 0 0 4px rgba(200,168,75,.4) !important;
}
input:focus,select:focus{
border-color:var(--gold) !important;
box-shadow:0 0 0 3px var(--gold-a15) !important}
/* ── Custom Tooltips via data-tip ────────────────── */
[data-tip]{position:relative}
[data-tip]:hover::after{
content:attr(data-tip);
position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
background:rgba(15,15,15,.97);color:#f0f0f0;
font-size:var(--t-sm);font-weight:600;white-space:nowrap;
padding:5px 10px;border-radius:var(--r);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 4px 16px rgba(0,0,0,.5);
pointer-events:none;z-index:var(--z-modal);
animation:tip-fade-in .12s ease both
}
[data-tip]:hover::before{
content:'';position:absolute;bottom:calc(100% + 2px);left:50%;
transform:translateX(-50%);
border:5px solid transparent;border-top-color:rgba(15,15,15,.97);
pointer-events:none;z-index:var(--z-modal)
}
@keyframes tip-fade-in{from{opacity:0;transform:translateX(-50%) translateY(3px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* ── Keyboard-Navigation Fokus ───────────────────── */
tr.clickable.kb-focus td{background:rgba(200,168,75,.14) !important;outline:none}
tr.clickable.kb-focus td:first-child{border-left:3px solid var(--gold) !important}
/* ══════════════════════════════════════════════════════
MOBILE CONSOLIDATION — Audit BK
Kleine isolierte @media(max-width:768px)-Blöcke zusammengeführt
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
#notif-panel{position:absolute;right:4px;top:52px;max-width:calc(100vw - 8px)}
#anf-bulk-bar{display:none !important}
.anf-bulk-cb,#anf-bulk-select-all{display:none !important}
.anf-card-footer .badge{font-size:12px;padding:4px 10px;}
.af-qa-label{display:none}
.af-quick-actions .btn{padding:6px 10px}
.anf-actions .anf-kennenlern-btn { display: flex !important; }
#mobile-fab { display: flex !important; }
.portal-wrap{padding:20px 14px 40px}
.portal-header{padding:40px 16px 28px}
.portal-logo{font-size:36px}
.portal-sign-box{padding:28px 20px}
.portal-sign-box h2{font-size:var(--t-h)}
.btn-ss,.btn-sx,.btn-px,.btn-dx,.btn-ds{min-height:44px !important}
.btn-gx,.btn-gs,.btn-ps,.btn-bs,.btn-ki{min-height:44px !important}
.af-unterlagen-grid{grid-template-columns:1fr}
}
@media print{
#sidebar,#topbar,.btn,.row-actions,#toast-container,
#global-search-overlay,[data-tip]::after,[data-tip]::before{display:none !important}
#main{width:100% !important;overflow:visible !important}
.view.active{display:block !important;overflow:visible !important;padding:0 !important}
body{background:#fff !important;color:#000 !important;font-size:12pt}
.card{border:1px solid #ccc !important;background:#fff !important;box-shadow:none !important}
.badge{border:1px solid #999 !important;color:#333 !important;background:#f0f0f0 !important}
a{color:#000 !important;text-decoration:none}
}
/* ═══ Empty-State Animation ═══ */
@keyframes empty-pulse{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:.5;transform:scale(1.05)}}
.empty-state-big .empty-icon{font-size:80px;opacity:.4;animation:empty-pulse 3s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(200,168,75,.2))}
.empty-state-big .empty-title{font-family:var(--font-h);font-size:var(--t-xl);letter-spacing:1px;text-transform:uppercase;color:var(--text);margin-top:8px}
.empty-state-big .empty-sub{font-size:var(--t-md);color:var(--muted);max-width:340px;line-height:1.6}
.wf-step:hover .wf-step-dot{transform:scale(1.08);transition:transform var(--tr-base) ease}
.wf-step{transition:opacity var(--tr-base)}
.anf-doc-btn:hover{border-color:var(--gold);background:var(--gold-a08)}
.anf-doc-btn--active{background:var(--gold-a12);border-color:rgba(200,168,75,.6)}
.anf-doc-btn--active:hover{background:rgba(200,168,75,.2);border-color:var(--gold)}
.btn-danger{background:rgba(231,76,60,.1);color:var(--s-abs);border:1px solid rgba(231,76,60,.2)}.btn-danger:hover{background:rgba(231,76,60,.2)}
.btn-success{background:rgba(39,174,96,.15);color:var(--s-best);border:1px solid rgba(39,174,96,.3)}.btn-success:hover{background:rgba(39,174,96,.25)}
.btn-bs{background:rgba(39,174,96,.15);color:var(--s-best);border:1px solid rgba(39,174,96,.3);padding:6px 12px;font-size:var(--t-sm);border-radius:var(--r);cursor:pointer;font:600 var(--t-sm) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}.btn-bs:hover{background:rgba(39,174,96,.25)}
.btn-info{background:rgba(52,152,219,.15);color:var(--c-info);border:1px solid rgba(52,152,219,.3)}.btn-info:hover{background:rgba(52,152,219,.25)}
/* .btn-is = btn btn-info btn-sm (1x) */
.btn-is{background:rgba(52,152,219,.15);color:var(--c-info);border:1px solid rgba(52,152,219,.3);padding:6px 12px;font-size:var(--t-sm);min-height:32px;white-space:nowrap;border-radius:var(--r);cursor:pointer;font:600 var(--t-sm) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}.btn-is:hover{background:rgba(52,152,219,.25)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border-2)}.btn-ghost:hover{color:var(--text);border-color:var(--border)}
.dok-filter-btn.active,.kunden-filter-btn.active{background:var(--gold);color:var(--black);border-color:var(--gold)}
/* Einheitliche Filter-Button Klasse für alle Views */
.filter-btn {
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
border-radius:var(--r);
transition:all var(--tr-mid);
white-space: nowrap; /* Text nie umbrechen */
overflow: hidden; /* Kein Overflow */
text-overflow: ellipsis; /* Falls doch zu lang: ... */
flex-shrink: 0; /* In Flex-Containern nicht schrumpfen */
min-width: fit-content; /* Mindestbreite = Inhalt */
box-sizing: border-box;
}
.filter-btn:hover { color: var(--text); border-color: var(--border); }
.filter-btn.active { background: var(--gold); color: var(--black); border-color: var(--gold); font-weight: 700; }
/* Button-Größen: Mindesthöhe für Touch + Text immer sichtbar */
.btn-sm { padding: 6px 12px; font-size: var(--t-sm); min-height: 32px; white-space: nowrap; }
.btn-xs { padding: 4px 10px; font-size: var(--t-xs); min-height: 28px; white-space: nowrap; }
/* Icon-Button: kleine quadratische Buttons in Toolbars/Headers (×, Format-Tools, Quick-Actions) */
.btn-icon{
background:none;border:none;cursor:pointer;
color:var(--muted);padding:4px 8px;
border-radius:var(--r);font-size:var(--t-md);line-height:1;
transition:color var(--tr-fast), background var(--tr-fast);
display:inline-flex;align-items:center;justify-content:center;
}
.btn-icon:hover{color:var(--text);background:rgba(255,255,255,.05)}
.btn-icon.active{color:var(--gold)}
/* Modifier für Icon-Buttons mit Akzent-Farbe (z.B. Primary-Action im Header) */
.btn-icon.gold{color:var(--gold)}
.btn-icon.gold:hover{background:var(--gold-a12)}
/* Tab-Counter-Button: zwei-Zeilen-Tab mit Zahl oben + Label unten (Veranstaltungen, Dokumente, Kunden) */
.tab-counter-btn{
background:none;border:none;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;padding:10px 16px;
flex-shrink:0; /* WICHTIG: nicht zerquetschen lassen */
font-family:var(--font-b);font-size:var(--t-sm);font-weight:400;
color:var(--muted);white-space:nowrap;line-height:1.2;
transition:color var(--tr-fast), background var(--tr-fast);
border-bottom:3px solid transparent;
}
.tab-counter-btn:hover{color:var(--text);background:rgba(255,255,255,.03)}
.tab-counter-btn.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:700}
.tab-counter-btn .tab-counter-num{font-size:var(--t-xl);font-weight:700;color:var(--text);line-height:1}
.tab-counter-btn.active .tab-counter-num{color:var(--gold)}
/* Solid Danger-Button (für kritische Lösch-Aktionen, satter als das normale btn-danger) */
.btn-danger-solid{background:var(--s-abs);color:#fff;border:none}
.btn-danger-solid:hover{background:#c0392b}
/* ── Cards ─────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:var(--card-pad);transition:background var(--tr-base),border-color var(--tr-base),box-shadow var(--tr-base)}
/* v7.35: Einheitliche Card-Optik für System-Sub-Tabs.
v7.36: Erweitert auf alle Einstellungen-Tabs (Profil, Dokumente, E-Mail, Workflow). */
#set-tab-profil .card,
#set-tab-auftrag .card,
#set-tab-email .card,
#set-tab-vorlagen-set .card,
#set-tab-texte-set .card,
#set-tab-gage-set .card,
#set-tab-workflow .card,
#set-tab-konto .card,
#set-tab-ki-config .card,
#set-tab-benachrichtigungen .card,
#set-tab-cloud .card,
#set-tab-integrationen .card,
#set-tab-ui-effekte .card,
#set-tab-sicherheit .card,
#set-tab-admin .card,
#set-tab-admin .admin-section {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(200,168,75,0.18) !important;
border-radius: var(--r);
padding: 18px 20px;
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
margin-bottom: 16px;
}
/* Card-Header Titel + Trennstrich */
#set-tab-profil .card .card-header,
#set-tab-auftrag .card .card-header,
#set-tab-email .card .card-header,
#set-tab-vorlagen-set .card .card-header,
#set-tab-texte-set .card .card-header,
#set-tab-gage-set .card .card-header,
#set-tab-workflow .card .card-header,
#set-tab-konto .card .card-header,
#set-tab-benachrichtigungen .card .card-header,
#set-tab-cloud .card .card-header,
#set-tab-integrationen .card .card-header,
#set-tab-ui-effekte .card .card-header,
#set-tab-sicherheit .card .card-header {
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
padding-bottom: 10px;
}
#set-tab-profil .card .card-title,
#set-tab-auftrag .card .card-title,
#set-tab-email .card .card-title,
#set-tab-vorlagen-set .card .card-title,
#set-tab-texte-set .card .card-title,
#set-tab-gage-set .card .card-title,
#set-tab-workflow .card .card-title,
#set-tab-konto .card .card-title,
#set-tab-benachrichtigungen .card .card-title,
#set-tab-cloud .card .card-title,
#set-tab-integrationen .card .card-title,
#set-tab-ui-effekte .card .card-title,
#set-tab-sicherheit .card .card-title {
color: var(--gold);
font-size:var(--t-base);
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 700;
}
/* ── Workflow-Tab: form-group Inputs dunkel (CI) ──────────────────── */
#set-tab-workflow .card .form-group { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
#set-tab-workflow .card .form-group label { font-size:var(--t-xs); font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; display:block; }
#set-tab-workflow .card .form-group input,
#set-tab-workflow .card .form-group select,
#set-tab-workflow .card .form-group textarea {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--text);
padding: 8px 10px;
font-size: 13px;
font-family: var(--font-b);
width: 100%;
outline: none;
}
#set-tab-workflow .card .form-group input:focus,
#set-tab-workflow .card .form-group select:focus { border-color: var(--gold); background: var(--gold-a06); }
#set-tab-workflow .card .form-group select option { background: var(--surface-2); }
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-header-wrap{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.card-header-sep{border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:14px}
.card-header-toggle{cursor:pointer}
.card-header-toggle:hover .card-title{color:var(--text)}
.card-header-sm{margin-bottom:10px}
.card-header-md{margin-bottom:16px}
.card-title{font-family:var(--font-h);font-size:var(--t-md);letter-spacing:2px;color:var(--muted)}
.card-title-gold{color:var(--gold) !important}
.card-title-danger{color:var(--s-abs) !important;letter-spacing:1px}
/* ── Grid ──────────────────────────────────────── */
/* auto-fit/minmax: Grid kollabiert intrinsisch — Audit Fix G2 */
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--gap)}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--gap)}
.g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:var(--gap)}
.g5{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:12px}
/* Dashboard KPI: alle 4 Karten gleich breit + entspannter Gap */
#dash-stats{grid-template-columns:repeat(4,1fr) !important;gap:16px !important}
/* Erste Karte: Gold-Akzent bleibt, Schrift einheitlich */
#dash-stats>.stat-card:first-child{border-color:var(--gold-a22) !important}
#dash-stats>.stat-card .stat-v{font-size:clamp(22px,2vw,48px) !important}
#dash-stats>.stat-card .stat-l{font-size:var(--t-xs) !important;letter-spacing:1.5px !important}
/* ── Stat Card ─────────────────────────────────── */
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:calc(var(--card-pad) * 1.2);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.stat-v{font-family:var(--font-h);font-size:clamp(24px,2.08vw,56px);color:var(--gold);line-height:1;letter-spacing:1px}
.stat-l{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-top:6px;font-weight:600}
/* ── Table ─────────────────────────────────────── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:9px 12px;font-size:var(--t-xs);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.th-sticky{background:var(--surface-2);position:sticky;top:0;z-index:1}
td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:var(--t-md);color:var(--text);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.clickable:hover td{background:var(--gold-a04);cursor:pointer}
/* .row-actions: konsolidiert in Z.1159 */
/* ── Toolbar ───────────────────────────────────── */
.toolbar{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap}
#dok-search{flex-basis:100%;width:100%;min-height:40px}
/* CSS :hover statt inline onmouseenter/onmouseleave */
button[onclick*="openGlobalSearch"]:hover{border-color:var(--gold)!important;color:var(--gold)!important}
#theme-toggle:hover{border-color:var(--gold)!important}
#sidebar-toggle-btn:hover{color:var(--gold)!important}
.si{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:7px 12px;font-family:var(--font-b);font-size:var(--t-md);outline:none;transition:border var(--tr-fast)}
.si:focus{border-color:var(--gold)}.si::placeholder{color:var(--muted)}
select.si{cursor:pointer}.si option{background:var(--surface-2)}
/* ── Badges ────────────────────────────────────── */
/* ── Badge System (einheitlich überall) ────────── */
.badge{
display:inline-flex;align-items:center;
padding:3px 8px;border-radius:var(--r-sm);
font-size:var(--t-xs);font-weight:700;
letter-spacing:.6px;text-transform:uppercase;
white-space:nowrap;line-height:1.4;
border:1px solid transparent;
}
/* Anfragen-Status */
.b-anfrage,
.b-angebot,
.b-besprechung{background:rgba(255,152,0,.15);color:#FF9800;border-color:rgba(255,152,0,.4)}
.b-buchungsprozess{background:rgba(230,126,34,.18);color:#E67E22;border-color:rgba(230,126,34,.45);font-weight:700}
.b-bestaetigt,.b-gebucht{background:rgba(39,174,96,.15);color:var(--s-best);border-color:rgba(39,174,96,.4)}
.b-abgerechnet{background:var(--gold-a15);color:var(--gold);border-color:rgba(200,168,75,.4)}
.b-abgesagt{background:rgba(231,76,60,.12);color:var(--s-abs);border-color:rgba(231,76,60,.35);text-decoration:line-through}
/* Dokument-Status */
.b-offen{background:rgba(243,156,18,.12);color:#F39C12;border-color:rgba(243,156,18,.3)}
.b-gesendet{background:rgba(74,144,217,.12);color:#5BA4F5;border-color:rgba(74,144,217,.3)}
.b-gedruckt{background:rgba(149,165,166,.12);color:#BDC3C7;border-color:rgba(149,165,166,.3)}
.b-bezahlt{background:rgba(26,188,156,.12);color:var(--s-durch);border-color:rgba(26,188,156,.35)}
.b-ueberfaellig{background:rgba(231,76,60,.15);color:var(--s-abs);border-color:rgba(231,76,60,.4);animation:pulse-badge 2s ease infinite}
.b-abgeschlossen{background:rgba(127,140,141,.1);color:#95A5A6;border-color:rgba(127,140,141,.25)}
.b-storniert,.b-abgelehnt{background:rgba(149,165,166,.08);color:#7F8C8D;border-color:rgba(149,165,166,.2);text-decoration:line-through}
@keyframes pulse-badge{0%,100%{opacity:1}50%{opacity:.65}}
/* ── Leere Textarea visuell markieren ───────────────────── */
.ac-field:is(textarea):placeholder-shown:not(:focus){
border-style:dashed;
border-color:rgba(200,168,75,0.25);
background:rgba(200,168,75,0.02);
}
.ac-field:is(textarea):placeholder-shown:not(:focus)::placeholder{
color:rgba(200,168,75,0.35);
font-style:italic;
}
/* ── Badge: echter Pill-Radius, größer auf Mobile ────────── */
.badge{border-radius:var(--r-xl) !important;}
/* ── Workflow Progress Bar ───────────────────────────────── */
.wf-progress-bar{
display:flex;align-items:center;gap:0;
margin:0 0 14px 0;
max-width:100%;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r-xl);
overflow:hidden;
height:34px;
}
.wf-pb-step{
flex:1;display:flex;align-items:center;justify-content:center;
font-size:11px;font-family:var(--font-b);letter-spacing:0.5px;
text-transform:uppercase;padding:0 8px;
color:var(--faint);
border-right:1px solid var(--border-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
transition:all var(--tr-base);height:100%;cursor:default;
}
.wf-pb-step:last-child{border-right:none;}
.wf-pb-step.wf-done{background:var(--gold-a12);color:var(--gold);}
.wf-pb-step.wf-active{background:var(--gold);color:var(--black);font-weight:700;font-size:12px;cursor:pointer;}
.wf-pb-step.wf-active:hover{background:var(--gold-2);}
.wf-pb-step.wf-abgesagt{background:rgba(231,76,60,0.15);color:var(--s-abs);}
/* Nächster-Schritt-Card (unter Progress Bar) */
.wf-next-step{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--gold-a06);border:1px solid var(--border);border-radius:var(--r);margin:0 0 4px;}
.wf-next-step.wf-next-warn{background:rgba(231,76,60,0.06);border-color:rgba(231,76,60,0.22);}
.wf-next-text{flex:1;font-size:12px;color:var(--muted);line-height:1.5;}
/* Buchungs-Checkliste */
.wf-checkliste{margin:0 0 14px;cursor:pointer;}
.wf-checkliste summary{font-size:10px;color:var(--faint);letter-spacing:1px;text-transform:uppercase;list-style:none;padding:0 2px;user-select:none;}
.wf-checkliste-items{padding:8px 4px 4px;}
.wf-chk-item{display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,0.45);margin:3px 0;}
.wf-chk-done{color:var(--muted);text-decoration:line-through;opacity:.5;}
/* ── Empty State ─────────────────────────────────────────── */
/* ── Section-Header System (einheitlich) ────────── */
.section-title{
font-family:var(--font-h);font-size:var(--t-sm);font-weight:700;
letter-spacing:2px;text-transform:uppercase;
color:var(--muted);margin-bottom:12px;
}
/* Postfach/Posteingang Resize-Handle */
#pf-left-col, #pi-left-col { border-right: none !important; }
body.col-resizing * { user-select: none !important; }
@keyframes skeletonPulse { 0%,100%{opacity:.4} 50%{opacity:.8} }
/* Compose-Modal: Autofill-Weiß verhindern */
#cm-to, #cm-cc, #cm-bcc, #cm-subject {
background: transparent !important;
color: var(--text) !important;
}
#cm-to:-webkit-autofill,
#cm-cc:-webkit-autofill,
#cm-bcc:-webkit-autofill,
#cm-subject:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #141414 inset !important;
-webkit-text-fill-color: rgba(255,255,255,0.9) !important;
caret-color: rgba(255,255,255,0.9);
transition: background-color 5000s ease-in-out 0s;
}
/* Custom details/summary Pfeil im Postfach */
.pf-inline-images summary { list-style: none; }
.pf-inline-images summary::-webkit-details-marker { display: none; }
.pf-inline-images summary::before { content: '▶'; font-size:9px; margin-right:6px; transition:transform var(--tr-mid); display:inline-block; }
.pf-inline-images[open] summary::before { transform: rotate(90deg); }
.detail-page{max-width:1320px;width:100%;box-sizing:border-box;margin-left:auto;margin-right:auto}
/* Globale Lesebreite: .detail-page (z.B. #anfrage-detail-content) auf max 1320px */
/* Einstellungen und andere Views: eigenes Layout, keine Zentrierung per CSS */
/* Postfach-Tab: volle Bildschirmbreite nutzen */
body.af-tab-postfach [data-af-tab="postfach"]{padding:0}
/* Posteingang-View: ebenfalls volle Bildschirmbreite */
#view-posteingang.view{max-width:100%}
#view-posteingang #posteingang-content{max-width:100%}
.detail-hero{
background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
padding:var(--card-pad);margin-bottom:18px;
display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
}
.detail-hero-left h1{font-family:var(--font-h);font-size:28px;letter-spacing:2px;color:var(--text);margin-bottom:6px}
.detail-hero-left .meta{font-size:var(--t-md);color:var(--muted);display:flex;gap:16px;flex-wrap:wrap}
.detail-hero-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
/* ── Kundenportal ──────────────────────────────── */
#portal-root{display:none;min-height:100vh;background:#eceae4;font-family:var(--font-b);color:#1a1a1a}
#portal-root.active{display:block;position:fixed;inset:0;z-index:var(--z-modal);overflow-y:auto;background:#eceae4}
/* ══════════════════════════════════════════════
PORTAL - BPM CORPORATE DESIGN
══════════════════════════════════════════════ */
html.portal-mode,html.portal-mode body{background:#0E0E0E !important;color:#F5F0EA !important;font-family:'Lato',sans-serif !important}
.portal-wrap{max-width:900px;margin:0 auto;padding:40px 20px 80px}
.portal-header{text-align:center;padding:60px 20px 40px;border-bottom:1px solid rgba(201,150,90,0.2);margin-bottom:48px;position:relative}
.portal-header::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.portal-logo{font-family:'Dancing Script',cursive;font-size:48px;color:var(--gold);margin-bottom:12px;letter-spacing:2px}
.portal-subtitle{font-size:var(--t-base);color:var(--muted);letter-spacing:3px;text-transform:uppercase}
.portal-doc-frame{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.4);margin-bottom:48px}
.portal-sign-box{background:rgba(15,15,15,0.6);border:1px solid rgba(201,150,90,0.15);border-radius:var(--r-lg);padding:40px;margin-bottom:32px;backdrop-filter:blur(10px)}
.portal-sign-box h2{font-family:'Dancing Script',cursive;font-size:32px;font-weight:400;margin-bottom:12px;color:var(--gold);letter-spacing:1px}
.portal-sign-box p{font-size:var(--t-lg);color:var(--muted);margin-bottom:24px;line-height:1.7}
.portal-success{background:rgba(15,15,15,0.6);border:1px solid rgba(39,174,96,0.3);border-radius:var(--r-lg);padding:48px 40px;text-align:center}
.portal-success h2{font-family:'Dancing Script',cursive;font-size:36px;color:var(--s-best);margin-bottom:16px}
#portal-canvas{width:100%;height:160px;border:2px dashed rgba(201,150,90,0.3);border-radius:var(--r);background:rgba(0,0,0,0.3);cursor:crosshair;touch-action:none;display:block}
#portal-canvas.signed{border-color:var(--gold)}
.portal-clear{background:none;border:1px solid rgba(231,76,60,0.4);color:var(--s-abs);padding:6px 12px;border-radius:var(--r);font-size:var(--t-sm);cursor:pointer;transition:all 0.2s}
.portal-clear:hover{background:rgba(231,76,60,0.1);border-color:var(--s-abs)}
.portal-name-input{width:100%;padding:12px 16px;background:rgba(0,0,0,0.4);border:1px solid rgba(201,150,90,0.2);border-radius:var(--r);color:#F5F0EA;font-size:var(--t-lg);font-family:'Lato',sans-serif;transition:all 0.2s;box-sizing:border-box}
.portal-name-input:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,0.6)}
.portal-name-input::placeholder{color:var(--muted)}
.portal-submit{width:100%;padding:18px;background:linear-gradient(135deg,var(--gold),#A6784A);color:#0E0E0E;border:none;border-radius:var(--r);font-size:16px;font-weight:700;cursor:pointer;margin-top:24px;letter-spacing:1px;transition:all 0.3s;text-transform:uppercase;font-family:'Lato',sans-serif}
.portal-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,150,90,0.4)}
.portal-submit:disabled{background:#3a3a3a;color:var(--muted);cursor:not-allowed;transform:none}
.portal-info-box{background:rgba(15,15,15,0.4);border-left:3px solid var(--gold);padding:20px 24px;margin:32px 0;border-radius:0 8px 8px 0}
.portal-info-box h3{font-family:'Dancing Script',cursive;font-size:var(--t-h);color:var(--gold);margin-bottom:12px}
.portal-info-box p{font-size:var(--t-md);color:var(--muted);line-height:1.6;margin-bottom:8px}
.portal-footer{margin-top:64px;padding-top:32px;border-top:1px solid rgba(201,150,90,0.15);text-align:center}
.portal-footer-links{display:flex;gap:24px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}
.portal-footer-links a{color:var(--muted);font-size:var(--t-base);text-decoration:none;transition:color 0.2s}
.portal-footer-links a:hover{color:var(--gold)}
.portal-contact{font-size:var(--t-sm);color:var(--muted);margin-top:12px}
/* Nächste Events responsive */
@media (max-width: 1100px) {.next-event-col-2{display:none}}
/* ══════════════════════════════════════════════════════════════════
TABLET BREAKPOINT (769px–1024px)
iPad Pro Portrait, Surface Tablets, kleine Laptops
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
/* g4: wird jetzt durch auto-fit/minmax intrinsisch kollabiert — kein Override mehr nötig */
/* g3 in Settings-Forms: 2 Spalten statt 3 */
.form-row-3:not(.mob-3col) { grid-template-columns: 1fr 1fr !important; }
}
/* ══════════════════════════════════════════════════════════════════
TABLET SIDEBAR — Icon-Only — Audit Fix QW5
769px–1023px: Touch-Geräte haben kein Hover → kein hover-expand.
Sidebar bleibt als 56px-Icon-Leiste. Hamburger öffnet Drawer.
══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023px) {
/* Sidebar auf Icon-Breite fixieren */
#sidebar {
width: 56px !important;
min-width: 56px !important;
overflow: hidden !important;
}
/* Hover-expand deaktivieren (Touch hat kein Hover) */
#sidebar:hover {
width: 56px !important;
min-width: 56px !important;
overflow: hidden !important;
box-shadow: none !important;
}
/* Logo: nur Icon, kein Text */
#sidebar .s-logo-text,
#sidebar .s-logo-sub,
#sidebar .s-bottom { opacity: 0 !important; width: 0 !important; overflow: hidden !important; }
/* Items: Text per font-size:0 ausblenden (gleich wie .collapsed) */
#sidebar .s-item {
padding: 0 !important;
margin: 2px 8px !important;
gap: 0 !important;
justify-content: center !important;
align-items: center !important;
font-size: 0 !important;
border-left: none !important;
border-radius: var(--r) !important;
height: 44px !important;
}
#sidebar .s-item svg {
width: 22px !important; height: 22px !important;
display: block !important; margin: 0 auto !important;
opacity: .8 !important; flex-shrink: 0 !important;
}
#sidebar .s-item.active svg { opacity: 1 !important; color: var(--gold) !important; }
/* Section-Labels als Trennlinie */
#sidebar .s-section {
font-size: 0 !important; padding: 0 !important;
margin: 6px 10px !important; height: 1px !important;
background: rgba(255,255,255,0.06) !important;
color: transparent !important; overflow: hidden !important;
}
/* Accordion-Header ausblenden, Body immer offen */
#sidebar .s-acc-head { opacity: 0 !important; width: 0 !important; height: 0 !important;
padding: 0 !important; overflow: hidden !important; pointer-events: none !important; }
#sidebar .s-acc-body { max-height: 600px !important; overflow: visible !important; }
#sidebar-toggle-btn { display: none !important; }
/* Hamburger sichtbar machen für Drawer-Öffnung */
#mob-ham { display: flex !important; }
/* ── Tooltip: Icon-Label rechts neben Item ────────────────────── */
#sidebar .s-item[title] { position: relative; }
#sidebar .s-item[title]:hover::after {
content: attr(title);
position: fixed;
left: 64px;
background: var(--surface-2);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 5px 10px;
font-size: 12px;
font-family: var(--font-b);
font-weight: 600;
white-space: nowrap;
z-index: calc(var(--z-sidebar) + 10);
box-shadow: 0 4px 16px rgba(0,0,0,.4);
pointer-events: none;
}
/* ── Layout-Anpassungen — Tablet ─────────────────────────────── */
/* View-Padding etwas kompakter */
.view.active { padding: 14px 16px !important; }
/* Cards: mittleres Padding zwischen Desktop (18px) und Mobile (12px) */
.card { padding: 14px !important; }
.stat-card { padding: 14px !important; }
/* Toolbar: immer wrapping damit Suche + Filter sauber stapeln */
.toolbar { flex-wrap: wrap !important; gap: 8px !important; }
.toolbar .si { flex: 1 1 160px !important; }
/* detail-cols: früher einspaltig als bisher (war erst ab 900px) */
/* 769-900px: 2fr 1fr-Grid = rechte Spalte ~200px bei 769 → zu eng */
.detail-cols { grid-template-columns: 1fr !important; }
.detail-cols > :last-child { position: static !important; max-height: none !important; }
/* Dashboard: 2-Spalten (1.4fr 1fr 1fr ist zu eng auf 770px+56px Sidebar) */
.dash-main-grid { grid-template-columns: 1fr 1fr !important; }
/* Tabs: immer scrollbar statt umbrechen */
.tabs { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
.tab { white-space: nowrap !important; }
}
@media (max-width: 700px) {.next-event-col-1{display:none}}
@media (max-width: 900px) {
.dash-main-grid{grid-template-columns:1fr 1fr!important}
}
@media (max-width: 600px) {
.dash-main-grid{grid-template-columns:1fr!important}
}
.portal-success p{color:var(--muted);font-size:var(--t-lg)}
.detail-cols{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start;min-width:0}
.kd-mob-actions{display:none}
.detail-cols>*{min-width:0}
.detail-cols>:last-child{position:sticky;top:12px;max-height:calc(100vh - 60px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent;min-width:0}
details.card>summary{user-select:none}
details.card[open]>.details-arrow,details.card[open] summary .details-arrow{transform:rotate(90deg)}
details.card summary .details-arrow{transition:transform var(--tr-base);display:inline-block}
.detail-cols>:last-child::-webkit-scrollbar{width:4px}
.detail-cols>:last-child::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-sm)}
@media (max-width: 1200px) {.detail-cols{grid-template-columns:1.5fr 1fr}}
@media (max-width: 900px) {.detail-cols{grid-template-columns:1fr}.detail-cols>:last-child{position:static;max-height:none}}
/* ══════════════════════════════════════════════════════════════════
GRID OVERFLOW FIX (v9.42)
Grid-Items haben default min-width:auto → überlaufen bei langem Inhalt
══════════════════════════════════════════════════════════════════ */
.g2 > *, .g3 > *, .g4 > *, .g5 > * { min-width: 0; }
.form-row-2 > *, .form-row-3 > * { min-width: 0; }
.detail-cols > * { min-width: 0; }
/* Mobile: noch strikter */
@media (max-width: 768px) {
/* Container/Wrapper bekommen min-width:0 damit Inhalt nicht über drückt */
.view, #anfrage-detail-content, #kunde-detail-content, #dok-detail-content,
.detail-page, .card, .page-form, .form-group {
min-width: 0 !important;
}
/* Force max-width auf 100vw als letztes Sicherheitsnetz */
.view > *, .detail-page > *, .card > * {
max-width: 100% !important;
}
}
@media (max-width: 768px) {
/* ═══════════════════════════════════════════════════════
ANFRAGE-DETAIL HERO + QUICK-ACTIONS — Sauberes Mobile-Layout
═══════════════════════════════════════════════════════ */
/* Hero-Karte: Padding kompakt, Watermark kleiner */
#anfrage-detail-content .detail-hero {
padding: 12px !important;
margin-bottom: 0 !important;
}
#anfrage-detail-content .hero-watermark {
font-size: 140px !important;
left: -40px !important;
opacity: 0.10 !important;
}
/* Header-Row: Avatar + Name vertikal stacken (Stats nicht in den Header sondern eigene Zeile) */
.anf-header-row {
flex-wrap: wrap !important;
gap: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
/* Avatar bleibt links */
.anf-header-row > div:first-child {
flex-shrink: 0;
}
/* Name-Block bekommt Rest der Breite oben */
.anf-header-row > div:nth-child(2) {
flex: 1 1 calc(100% - 60px) !important;
min-width: 0 !important;
}
/* Stats: eigene Reihe, drei gleichgroße Cards */
.anf-stats {
flex: 1 1 100% !important;
width: 100% !important;
border-left: none !important;
border-right: none !important;
border-top: 1px solid var(--border) !important;
padding: 8px 0 0 !important;
margin-top: 4px !important;
justify-content: space-around !important;
}
.anf-stats > div {
padding: 2px 6px !important;
flex: 1 !important;
min-width: 0 !important;
}
.anf-stats > div > div:first-child {
font-size: 9px !important;
margin-bottom: 1px !important;
}
.anf-stats > div > div:last-child {
font-size:var(--t-md) !important;
}
/* Action-Grid: 2 Spalten als saubere Hauptaktionen */
.anf-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
margin-top: 8px !important;
width: 100% !important;
}
.anf-actions .btn,
.anf-actions .anf-action-btn {
flex: 0 0 auto !important;
min-width: 0 !important;
padding: 6px 12px !important;
font-size: 10px !important;
flex-direction: row !important;
gap: 5px !important;
height: auto !important;
box-sizing: border-box !important;
justify-content: center !important;
letter-spacing: 0.2px !important;
white-space: nowrap !important;
}
/* Erstkontakt-Button Desktop: versteckt in anf-actions (Float-Bar / Hero-Buttons statt dessen) */
.anf-actions .anf-kennenlern-btn { display: none !important; }
/* 💾 Speichern-Button: full-width, prominent */
/* v6.14zy: Save-Button-Spezial-Layout-Override entfernt — Button existiert nicht mehr */
/* Quick-Actions: kompakter, einheitliche Höhe wie anf-actions */
.af-quick-actions {
padding: 6px 8px !important;
margin: 0 !important;
gap: 4px !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.af-quick-actions .btn,
.af-quick-actions a.btn {
flex-shrink: 0 !important;
min-width: 44px !important;
padding: 8px 10px !important;
}
}
/* Dokument-Detail: Zwei-Spalten mit sticky Vorschau */
.dok-layout{
display:flex;
flex-direction:row;
gap:20px;
align-items:flex-start;
width:100%;
}
.dok-layout > .card{
flex:0 0 clamp(420px, 38%, 600px);
min-width:0;
}
.dok-layout > div:last-child{
flex:1;
min-width:0;
min-height:0;
}
@media (max-width: 1000px) {.dok-layout > .card{flex:0 0 340px}}
@media (max-width: 750px) {.dok-layout{flex-direction:column}.dok-layout > .card{flex:none;width:100%}}
/* ── Form inside page ────────────────────────────────────────── */
.page-form .form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.page-form label{font-size:var(--t-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;display:block}
.page-form input,.page-form select,.page-form textarea{
background:rgba(255,255,255,0.04);border:1px solid rgba(200,168,75,0.18);color:var(--text);
border-radius:var(--r);padding:9px 12px;font-family:var(--font-b);font-size:var(--t-md);
outline:none;transition:all var(--tr-mid);width:100%;box-sizing:border-box;max-width:100%;
}
.page-form input:focus,.page-form select:focus,.page-form textarea:focus{border-color:var(--gold);background:var(--gold-a06);box-shadow:0 0 0 2px var(--gold-a08)}
.page-form input::placeholder,.page-form textarea::placeholder{color:var(--muted)}
.page-form select option{background:var(--surface-2)}
.page-form textarea{resize:vertical;min-height:80px;line-height:1.5;white-space:pre-wrap;font-family:var(--font-b)}
/* Textarea Resize-Handle größer + sichtbarer */
textarea::-webkit-resizer{
background:linear-gradient(135deg,transparent 40%,rgba(200,168,75,.5) 40%,rgba(200,168,75,.5) 55%,transparent 55%,transparent 65%,rgba(200,168,75,.5) 65%,rgba(200,168,75,.5) 80%,transparent 80%);
border-radius:0 0 var(--r) 0;
width:18px;height:18px;cursor:s-resize
}
textarea{scrollbar-width:thin;scrollbar-color:rgba(200,168,75,.3) transparent}
textarea:hover::-webkit-resizer{background:linear-gradient(135deg,transparent 40%,rgba(200,168,75,.85) 40%,rgba(200,168,75,.85) 55%,transparent 55%,transparent 65%,rgba(200,168,75,.85) 65%,rgba(200,168,75,.85) 80%,transparent 80%)}
/* Uhr-Icon bei time-Inputs größer + gold */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{
filter:invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.2);
opacity:.6;
width:18px;height:18px;
cursor:pointer;
padding:2px;
border-radius:var(--r-sm);
transition:opacity var(--tr-mid),background .15s
}
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover{
opacity:1;
background:var(--gold-a15)
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-section-title{font-family:var(--font-h);font-size:var(--t-sm);letter-spacing:2.5px;color:var(--gold);padding:16px 0 8px;border-bottom:1px solid var(--border);margin-bottom:14px;text-transform:uppercase}
.absage-box{background:rgba(231,76,60,.06);border:1px solid rgba(231,76,60,.3);border-left:3px solid var(--s-abs);border-radius:var(--r);padding:14px;margin-bottom:14px;display:none}
/* ── Timeline ──────────────────────────────────── */
.timeline{position:relative;padding-left:4px}
.timeline::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,var(--gold),rgba(200,168,75,0.1));border-radius:var(--r-sm)}
.timeline-item{display:flex;gap:12px;padding:10px 0;position:relative}
.timeline-item:hover .tl-actions{opacity:1 !important}
.ai-ton-btn.active{background:var(--gold) !important;color:var(--black) !important;border-color:var(--gold) !important;font-weight:600}
.timeline-item:last-child{}
.tl-dot{width:14px;height:14px;border-radius:var(--r-full);background:var(--gold);flex-shrink:0;margin-top:3px;border:2px solid var(--surface);box-shadow:0 0 0 2px var(--gold);z-index:1}
.tl-dot.tl-status{background:var(--s-best)}
.tl-dot.tl-mail{background:#4A90D9}
.tl-dot.tl-doc{background:#9B59B6}
.tl-date{font-size:var(--t-xs);color:var(--muted);margin-bottom:3px}
.tl-text{font-size:var(--t-base);color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.tl-text.tl-collapsed{max-height:80px;overflow:hidden;position:relative;mask-image:linear-gradient(to bottom,black 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 50%,transparent 100%)}
.tl-expand-btn{font-size:10px;color:var(--gold);cursor:pointer;background:transparent;border:none;padding:2px 0;margin-top:2px;font-family:var(--font-b);letter-spacing:.3px}
.tl-expand-btn:hover{text-decoration:underline}
.vl-item:hover{background:var(--gold-a06)}
.vl-item.active{background:var(--gold-dim);border-left:2px solid var(--gold)}
.pf-item:hover{background:var(--gold-a06)}
.pf-item.pf-active{background:var(--gold-dim) !important}
.pi-item:hover{background:var(--gold-a06);transition:background var(--tr-fast)}
.pi-item.pi-active{background:var(--gold-dim) !important;border-left:3px solid var(--gold) !important}
[data-af-tab="postfach"].af-tab-active{display:flex !important;width:100%}
/* ── Kanban ────────────────────────────────────── */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:16px;min-height:400px;align-items:flex-start}
.k-col{min-width:240px;width:240px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;transition:border-color var(--tr-base),background .2s}
.k-head{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.k-title{font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:1.5px}
.k-cnt{background:var(--surface-2);border-radius:10px;padding:1px 6px;font-size:var(--t-xs);color:var(--muted)}
.k-cards{flex:1;padding:8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:160px}
.k-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;cursor:grab;transition:border var(--tr-mid),transform .15s,box-shadow .15s}
.k-card:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-kanban)}
.k-col.drag-over{border-color:var(--gold)!important;background:var(--gold-a06)!important}
.k-card.dragging{opacity:0.35;cursor:grabbing;transform:scale(0.97)}
.k-name{font-size:var(--t-base);font-weight:600;color:var(--text);margin-bottom:3px}
.k-meta{font-size:var(--t-xs);color:var(--muted)}
.k-date{font-size:var(--t-sm);color:var(--gold);margin-top:5px;font-weight:700}
/* ── Kalender ──────────────────────────────────── */
/* v6.62: KW-Spalte entfernt — Kalenderwoche jetzt als Badge im Montag.
v6.60: grid-template-rows: auto fixt den Bug mit großer Lücke unter
den Wochentag-Headern. */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto;grid-auto-rows:1fr;gap:2px;flex:1}
.cal-kw{display:none}
.cal-dn-spacer{display:none}
.cal-dn{text-align:center;font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);padding:6px 0}
.cal-dn.weekend{color:rgba(200,168,75,0.6)}
.cal-day{min-height:80px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:5px;cursor:pointer;transition:border var(--tr-fast),background .12s;overflow:hidden;display:flex;flex-direction:column;position:relative}
.cal-day:hover{border-color:rgba(200,168,75,0.3);background:var(--gold-a04)}
.cal-day.weekend{background:rgba(200,168,75,0.05)}
.cal-day.other{opacity:.18}
/* v6.59: HEUTE prominenter — gefüllter Hintergrund + 2px Border + sanfter Glow */
.cal-day.today{border-color:var(--gold);border-width:2px;background:rgba(200,168,75,0.13);box-shadow:inset 0 0 24px var(--gold-a08)}
.cal-dn2{font-weight:700;color:var(--muted);margin-bottom:3px;font-size:var(--t-xs);letter-spacing:.3px}
.cal-day.today .cal-dn2{color:var(--gold);font-size:var(--t-sm);font-weight:900}
.cal-day.weekend .cal-dn2{color:rgba(200,168,75,0.65)}
.cal-kw-badge{position:absolute;top:3px;right:4px;font-size:8px;font-weight:700;color:rgba(200,168,75,0.45);font-family:var(--font-b);letter-spacing:.5px;background:var(--gold-a08);padding:1px 5px;border-radius:var(--r);pointer-events:none;line-height:1.3}
.cal-day.today .cal-kw-badge{color:var(--gold);background:rgba(200,168,75,0.18)}
.cal-ev{font-size:var(--t-xs);border-radius:var(--r-sm);padding:5px 7px;margin-top:3px;font-weight:700;overflow:hidden;border-left:3px solid;flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:2px;cursor:pointer;position:relative;min-height:72px}
/* v6.64: Events-Container — Desktop stretcht vertikal (alter Look bleibt), Mobile wickelt um */
.cal-day-events{display:flex;flex-direction:column;flex:1;gap:2px;min-height:0}
.cal-aufgaben-dots{display:flex;gap:2px;align-items:center;padding:1px 4px;flex-wrap:wrap;}
.cal-aufgabe-dot{font-size:7px;color:#9B7FD4;line-height:1;cursor:default;}
.cal-aufgabe-dot:hover{color:var(--gold);}
.cal-day-more{display:none}
.cal-ev.abs{background:rgba(231,76,60,.12);color:var(--s-abs);border-left-color:var(--s-abs)}
.cal-ev.best{background:rgba(39,174,96,.12);color:var(--s-best);border-left-color:var(--s-best)}
.cal-ev.ang{background:rgba(74,144,217,.12);color:#5DADE2;border-left-color:#4A90D9}
.cal-ev.gebucht{background:var(--gold-a15);color:var(--gold);border-left-color:var(--gold)}
.cal-feiertag{font-size:8px;background:rgba(231,76,60,.15);color:var(--s-abs);border-radius:var(--r-sm);padding:2px 4px;margin-bottom:2px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-left:2px solid var(--s-abs);letter-spacing:.3px}
/* v6.62: Ferien als zarter Background-Tint + Streifen unten (kollidiert nicht mit KW-Badge) */
.cal-ferien{display:none}
.cal-day.ferien-bg{background:rgba(74,144,217,0.08)}
.cal-day.ferien-bg.weekend{background:rgba(74,144,217,0.12)}
.cal-day.ferien-bg::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(74,144,217,0.55);border-radius:0 0 var(--r) var(--r)}
.cal-filter-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cal-filter-btn{padding:5px 12px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:var(--t-sm);font-weight:600;border-radius:var(--r);cursor:pointer;letter-spacing:.3px;transition:color var(--tr-fast),background var(--tr-fast),border-color var(--tr-fast);font-family:var(--font-b)}
.cal-filter-btn:hover{color:var(--text);border-color:rgba(200,168,75,0.3)}
.cal-filter-btn.active{background:var(--gold);color:var(--black);border-color:var(--gold)}
/* ── KI-Panel Buttons (v6.01e) ───────────────── */
.ki-ton-btn{
padding:5px 14px;border-radius:var(--r-sm);
border:1px solid var(--border);background:transparent;
color:var(--muted);font-size:12px;cursor:pointer;
font-family:var(--font-b);transition:all var(--tr-fast);
}
.ki-ton-btn:hover{border-color:var(--gold-brd);color:var(--text)}
.ki-ton-btn.active{
background:var(--gold);color:var(--black);
border-color:var(--gold);font-weight:700;
}
.ki-chip-btn{
padding:4px 11px;border-radius:var(--r-sm);
border:1px solid var(--border);background:transparent;
color:var(--muted);font-size:11px;cursor:pointer;
font-family:var(--font-b);transition:all var(--tr-fast);
}
.ki-chip-btn:hover{border-color:var(--gold-brd);color:var(--text)}
.ki-chip-btn.active{
background:var(--gold-a15);
color:var(--gold);border-color:var(--gold);
}
/* Wochenansicht */
.cal-time-label{font-size:var(--t-xs);color:var(--muted);text-align:right;padding-right:6px;padding-top:3px}
#cal-tooltip{position:fixed;z-index:var(--z-modal);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px;width:260px;box-shadow:var(--sh-panel);pointer-events:none;display:none}
#cal-tooltip.visible{display:block}
/* ── Bar Chart ─────────────────────────────────── */
.bar-chart{display:flex;gap:6px;align-items:stretch;height:130px;margin-bottom:8px}
.bc{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;height:100%}
.bcw{flex:1;display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:0;position:relative}
.bcb{width:100%;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-radius:var(--r-sm) var(--r-sm) 0 0;min-height:2px;transition:height var(--tr-slow),background var(--tr-slow)}
.bcl{font-size:var(--t-xs);color:var(--muted);text-align:center;flex-shrink:0;margin-top:3px}
.bcv{font-size:9px;font-weight:700;color:var(--gold);text-align:center;white-space:nowrap;line-height:1.3;margin-bottom:2px}
.bcvb{font-size:8px;color:var(--muted);text-align:center;white-space:nowrap;line-height:1.2;margin-bottom:2px}
/* ── Positionen ────────────────────────────────── */
.pos-row{display:grid;grid-template-columns:1fr 70px 100px 32px;gap:6px;align-items:center;margin-bottom:6px}
.pos-row input{margin:0}
.pos-total{text-align:right;padding:10px 0;border-top:1px solid var(--border);font-family:var(--font-h);font-size:20px;letter-spacing:1px;color:var(--gold)}
/* ── Aufgabe item ──────────────────────────────── */
.task{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px 10px;padding:var(--row-pad-v) var(--row-pad-h);background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:5px;transition:border var(--tr-fast);min-height:40px}
.task:hover{border-color:rgba(200,168,75,0.25);background:rgba(200,168,75,0.02)}
.task-cb{width:16px;height:16px;border-radius:var(--r-sm);border:2px solid var(--border);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background var(--tr-fast),border-color var(--tr-fast)}
.task-cb.done{background:var(--gold);border-color:var(--gold)}
.task-cb svg{width:10px;height:10px;color:var(--black)}
.task-done{text-decoration:line-through;color:var(--muted)}
.overdue{color:var(--s-abs)!important}
/* Aufgaben Desktop-Fallback für neue Mobile-Klassen */
.auf-row-top{display:flex;align-items:center;gap:10px;width:100%}
.auf-title{font-size:13px;font-weight:600;flex:1;min-width:0;white-space:normal;word-break:break-word}
.auf-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;flex:0 0 100%;margin-left:30px}
.auf-meta-item{font-size:11px;color:var(--muted);white-space:nowrap;background:rgba(255,255,255,0.04);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:2px 6px}
.auf-badge{font-size:11px;font-weight:700;border-radius:var(--r-sm);padding:2px 6px;white-space:nowrap}
.auf-meta-item.overdue{color:var(--s-abs);border-color:rgba(231,76,60,0.3);background:rgba(231,76,60,0.08)}
.auf-notiz{max-width:100%;min-width:0;white-space:normal;font-size:11px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
@media (max-width: 768px) {
.task{
flex-direction:column;gap:8px;padding:12px 14px;
border-left:3px solid var(--auf-color, var(--border));
touch-action:manipulation;-webkit-tap-highlight-color:transparent;
cursor:pointer;
}
.task:active{background:var(--surface-2)}
.auf-row-top{display:flex;align-items:center;gap:10px;width:100%}
.auf-row-top .task-cb{width:36px;height:36px;flex-shrink:0} /* Touch: 36px Mindest-Target */
.auf-row-top .task-cb svg{width:16px;height:16px}
.auf-title{flex:1;min-width:0;font-size:var(--t-md);font-weight:600;line-height:1.3}
.auf-title.task-done{text-decoration:line-through;color:var(--muted);font-weight:400}
.auf-meta{flex-wrap:wrap;gap:4px}
.auf-meta-item{font-size:11px}
.auf-notiz{font-size:var(--t-xs);color:var(--muted);padding-left:32px;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* row-actions auf Mobile immer sichtbar — kein Hover auf Touch. Fix R1 */
.row-actions{display:flex !important;opacity:1 !important}
}
/* ══════════════════════════════════════════════════════
LANDSCAPE MODE — Audit Fix v6.11c
Phones im Querformat: Höhe ~320-430px CSS.
Probleme: Kalender zu hoch, Stats zu hoch, Formulare scrollen endlos.
Fix: kompaktere Abstände, Kalender-Tage kleiner, Bottom-Nav ausblenden.
══════════════════════════════════════════════════════ */
@media (max-width: 768px) and (orientation: landscape) {
/* Bottom-Nav ausblenden — zu wenig Platz */
#mob-bottom-nav {
display: none !important;
}
/* Kein Bottom-Padding mehr nötig */
#main {
padding-bottom: env(safe-area-inset-bottom) !important;
}
/* Topbar: kompakter */
#topbar {
height: 40px !important;
min-height: 40px !important;
}
/* view-pad: minimal */
.view.active {
padding: 8px 12px !important;
}
/* Kalender-Tage: sehr kompakt */
.cal-grid {
grid-auto-rows: 44px !important;
}
.cal-day {
height: 44px !important;
min-height: 44px !important;
}
/* Stat-Cards: 2-spaltig nebeneinander */
#dash-stats {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
/* Cards: weniger Padding */
.card, .stat-card {
padding: 10px 12px !important;
}
/* Sticky-Save Bars: direkt am Bottom (kein nav-Offset) */
.aneu-save-bar,
#view-kunde-detail .detail-hero-actions,
#view-kunde-neu .detail-hero-actions {
bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}
/* dash-main-grid: nebeneinander */
.dash-main-grid {
grid-template-columns: 1fr 1fr !important;
}
}
/* ══════════════════════════════════════════════════════
STICKY FORM SAVE — Audit Fix R3
Formulare (Kunden, Anfrage-Neu): Speichern-Button auf
Mobile als Sticky-Bar am unteren Rand. Kein Scrollen
mehr nötig um zu speichern.
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Kunden-Detail/Neu: Speichern-Bar sticky am Bildschirmrand */
#view-kunde-detail .detail-hero-actions,
#view-kunde-neu .detail-hero-actions {
position: fixed !important;
bottom: calc(68px + env(safe-area-inset-bottom)) !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: var(--z-floatbar) !important;
background: var(--surface) !important;
border: 1px solid var(--gold-brd) !important;
border-radius: 20px !important;
padding: 8px 14px !important;
gap: 8px !important;
box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
flex-wrap: nowrap !important;
width: auto !important;
max-width: calc(100vw - 32px) !important;
}
/* Anfrage-Neu: Speichern-Bar sticky */
.aneu-save-bar {
position: fixed !important;
bottom: calc(68px + env(safe-area-inset-bottom)) !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: var(--z-floatbar) !important;
background: var(--surface) !important;
border: 1px solid var(--gold-brd) !important;
border-radius: 20px !important;
padding: 8px 14px !important;
box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
width: auto !important;
max-width: calc(100vw - 32px) !important;
}
/* Padding damit Formular-Content nicht vom Sticky-Bar verdeckt wird */
#view-anfrage-neu .card.page-form,
#view-kunde-detail .card.page-form,
#view-kunde-neu .card.page-form {
padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
}
}
/* Dok-Editor: Sticky "Vorschau öffnen" Tab am unteren Rand */
.dok-mobile-preview-btn-sticky {
position: fixed !important;
bottom: calc(68px + env(safe-area-inset-bottom)) !important;
right: 16px !important;
z-index: var(--z-floatbar) !important;
background: var(--gold) !important;
color: var(--black) !important;
border: none !important;
border-radius: 20px !important;
padding: 10px 18px !important;
font-size: var(--t-base) !important;
font-weight: 700 !important;
box-shadow: 0 6px 24px rgba(200,168,75,0.4) !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
cursor: pointer !important;
}
/* row-actions Buttons: Touch-Target 44×44px */
@media (hover: none) {
.row-actions button, .row-actions a {
min-width: 44px !important;
min-height: 44px !important;
}
}
/* ── Empty ─────────────────────────────────────── */
/* Vollwertiger Empty-State: für leere Listen/Cards (mit ✨ Sparkle + optional CTA) */
.empty{text-align:center;padding:50px 20px;color:var(--muted);position:relative}
.empty-state{
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:60px 24px;min-height:280px;
animation:emptyFadeIn .4s cubic-bezier(.22,1,.36,1);
}
.empty-state .es-icon{
width:72px;height:72px;margin-bottom:18px;
border-radius:var(--r-full);
background:radial-gradient(circle,var(--gold-a08) 0%,transparent 70%);
display:flex;align-items:center;justify-content:center;
position:relative;
}
.empty-state .es-icon svg{
width:38px;height:38px;color:var(--gold);opacity:.85;
}
.empty-state .es-icon::after{
content:'';position:absolute;inset:-4px;
border-radius:var(--r-full);
border:1px solid var(--gold-a15);
animation:esRing 3s ease-in-out infinite;
}
.empty-state h3{
font-family:var(--font-h);font-size:var(--t-xl);letter-spacing:1.5px;
color:var(--text);margin-bottom:8px;font-weight:400;
}
.empty-state p{
font-size:var(--t-md);color:var(--muted);max-width:340px;
line-height:1.6;margin-bottom:22px;
}
.empty-state .es-cta{
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
color:#0a0a0a;border:none;border-radius:var(--r);
padding:11px 22px;font-size:var(--t-base);font-weight:600;letter-spacing:.5px;
cursor:pointer;transition:all var(--tr-base);
box-shadow:0 4px 16px rgba(200,168,75,.25);
font-family:var(--font-b);text-transform:uppercase;
}
.empty-state .es-cta:hover{
transform:translateY(-1px);
box-shadow:0 8px 24px rgba(200,168,75,.4);
}
.empty-state .es-cta:active{transform:translateY(0)}
.empty-state .es-secondary{
font-size:var(--t-sm);color:rgba(200,168,75,.6);
cursor:pointer;letter-spacing:.5px;text-decoration:underline;
margin-top:14px;
}
.empty-state .es-secondary:hover{color:var(--gold)}
@keyframes emptyFadeIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes esRing{
0%,100%{transform:scale(1);opacity:.5}
50%{transform:scale(1.1);opacity:.2}
}
/* Empty State innerhalb von Tabellen */
tr td .empty-state{padding:40px 20px;min-height:200px}
.empty::before{content:'✨';display:block;font-size:48px;opacity:.25;margin-bottom:8px;animation:empty-pulse 3s ease-in-out infinite;filter:drop-shadow(0 4px 16px rgba(200,168,75,.2))}
.empty p{margin:8px 0;font-size:var(--t-md);line-height:1.5}
.empty p.empty-hint{font-size:var(--t-sm);color:rgba(255,255,255,.4);margin-top:-4px;margin-bottom:14px}
.empty .btn{margin-top:10px}
/* Kompakter Empty-State: für Sub-Sections innerhalb einer Card (kein Sparkle) */
.empty-inline{text-align:center;padding:14px 10px;color:var(--muted);font-size:var(--t-sm);font-style:italic}
/* ── Tabs ──────────────────────────────────────── */
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:18px}
.tabs.tabs-flush{margin-bottom:0} /* schließt direkt an Inhalt an */
.tabs.tabs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;white-space:nowrap} /* horizontal scrollbar mit iOS smooth */
.tab{padding:9px 16px;font-size:var(--t-sm);font-weight:700;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:color var(--tr-fast),border-color var(--tr-fast),background var(--tr-fast);margin-bottom:-1px;letter-spacing:1px;text-transform:uppercase}
.tab:hover{color:var(--text)}.tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab-c{display:none}.tab-c.active{display:block}
/* ── Anfrage-Detail Tab-Switching (v4.82) ─────── */
/* Cards UND Hero mit data-af-tab werden je nach aktivem Tab ein/ausgeblendet */
[data-af-tab]:not(.af-tab){display:none}
[data-af-tab].af-tab-active{display:block}
/* KI-Card: nur auf Übersicht-Tab */
body:not(.af-tab-uebersicht) [id^='ki-sum-card-']{display:none!important}
.af-unterlagen-grid.af-tab-active{display:grid !important}
/* v6.00: Quick-Actions: standardmäßig sichtbar, in Übersicht-Tab versteckt */
.af-quick-actions{display:flex !important;width:100%;max-width:100%;flex-wrap:wrap}
body.af-tab-uebersicht .af-quick-actions{display:none !important}
/* Hero hat display:block per Inline-Style — darf nur sichtbar sein wenn aktiv */
.detail-hero[data-af-tab]:not(.af-tab-active){display:none !important}
.af-tab-count{
display:inline-block;min-width:18px;height:16px;padding:0 5px;margin-left:4px;
background:rgba(255,255,255,.08);color:var(--muted);
border-radius:var(--r);font-size:var(--t-xs);font-weight:700;text-align:center;line-height:16px;
letter-spacing:0;
}
.af-tab-count:empty,.af-tab-count.zero{display:none}
.af-tab.active .af-tab-count{background:rgba(200,168,75,.2);color:var(--gold)}
/* ── Anfrage-Detail Tabs: Design D — Unterstrich + Icon + Label ── */
#af-tabs{
border-bottom:1px solid var(--color-border-tertiary, var(--border)) !important;
margin-bottom:16px;
padding:0;
background:transparent;
border-radius:0;
gap:0;
display:flex;
width:100%;
box-sizing:border-box;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
#af-tabs .af-tab{
display:flex;
align-items:center;
gap:5px;
padding:9px 14px;
font-size:var(--t-base);
font-weight:600;
letter-spacing:.3px;
text-transform:none;
cursor:pointer;
color:var(--muted);
border-bottom:2px solid transparent;
margin-bottom:-1px;
transition:color var(--tr-fast), border-color .12s;
white-space:nowrap;
flex-shrink:0;
border-radius:0;
background:transparent;
position:relative;
}
#af-tabs .af-tab:hover{color:var(--text)}
#af-tabs .af-tab.active{
color:var(--gold);
border-bottom-color:var(--gold);
}
/* Labels inline sichtbar */
#af-tabs .af-tab-label{
display:inline;
font-size:inherit;
font-weight:inherit;
color:inherit;
}
/* Counter-Badge inline */
#af-tabs .af-tab-count{
display:inline-flex;
align-items:center;
justify-content:center;
font-size:var(--t-xs);
height:14px;
min-width:14px;
padding:0 4px;
border-radius:7px;
background:var(--surface-2);
color:var(--muted);
font-weight:700;
margin-left:2px;
position:static;
}
#af-tabs .af-tab.active .af-tab-count{
background:rgba(200,168,75,.2);
color:var(--gold);
}
/* ── Unterlagen-Tab: 2-Spalten-Grid (v4.99) ─── */
.af-unterlagen-grid{
display:none; /* default hidden */
grid-template-columns:1fr;
gap:16px;
margin-bottom:16px;
}
.af-unterlagen-grid.af-tab-active{
display:grid !important;
}
.af-unterlagen-col{
display:flex;
flex-direction:column;
gap:16px;
}
.af-unterlagen-col .card{
margin-bottom:0 !important;
flex:0 0 auto;
}
/* Mobile: sticky + scrollbar ausblenden */
@media (max-width: 768px) {
#af-tabs{
position:sticky;
top:0;
background:rgba(20,20,20,0.98);
z-index:var(--z-subtab);
margin:-10px -10px 16px -10px;
padding:0 10px;
box-shadow:0 2px 8px rgba(0,0,0,.4);
scrollbar-width:none;
}
#af-tabs::-webkit-scrollbar{display:none}
#af-tabs .af-tab{
padding:9px 10px;
font-size:var(--t-sm);
}
body.light #af-tabs{background:rgba(255,255,255,0.98)}
}
/* ── Mail status ───────────────────────────────── */
.mail-ok{background:rgba(39,174,96,.12);border:1px solid rgba(39,174,96,.25);color:var(--s-best);border-radius:var(--r);padding:10px 14px;font-size:var(--t-md);font-weight:600;margin-top:10px;display:none}
.mail-err{background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.25);color:var(--s-abs);border-radius:var(--r);padding:10px 14px;font-size:var(--t-md);margin-top:10px;display:none}
/* ── Toast ─────────────────────────────────────── */
#toast-container{position:fixed;bottom:22px;right:22px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast-item{display:flex;align-items:center;gap:10px;padding:10px 16px 14px;border-radius:10px;font-weight:600;font-size:var(--t-base);letter-spacing:.3px;transform:translateX(120%) scale(0.95);opacity:0;transition:all .35s cubic-bezier(0.34,1.56,0.64,1);pointer-events:auto;box-shadow:0 4px 20px rgba(0,0,0,.3);min-width:200px;max-width:320px;position:relative;overflow:hidden}
.toast-item.show{transform:translateX(0) scale(1);opacity:1}
.toast-item.hide{transform:translateX(120%) scale(0.95);opacity:0}
.toast-icon{font-size:16px;flex-shrink:0}
.toast-text{flex:1;line-height:1.3}
.toast-bar{position:absolute;bottom:0;left:0;height:3px;border-radius:0 0 0 10px;animation:toastBar linear forwards}
@keyframes toastBar{from{width:100%}to{width:0%}}
.toast-success{background:#1a3a2a;border:1px solid rgba(39,174,96,.4);color:var(--s-best)}
.toast-success .toast-bar{background:var(--s-best)}
.toast-error{background:#3a1a1a;border:1px solid rgba(231,76,60,.4);color:var(--s-abs)}
.toast-error .toast-bar{background:var(--s-abs)}
.toast-warn{background:#3a2e1a;border:1px solid rgba(200,168,75,.4);color:var(--gold)}
.toast-warn .toast-bar{background:var(--gold)}
.toast-info{background:var(--surface);border:1px solid var(--border);color:var(--text)}
.toast-info .toast-bar{background:var(--muted)}
.toast-undo{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);color:inherit;border-radius:var(--r-sm);padding:3px 10px;font-size:10px;font-weight:700;letter-spacing:.5px;cursor:pointer;flex-shrink:0;font-family:var(--font-b);transition:background var(--tr-mid)}
.toast-undo:hover{background:rgba(255,255,255,0.22)}
/* ── Loader ────────────────────────────────────── */
#loader{position:fixed;inset:0;background:var(--black);display:flex;align-items:center;justify-content:center;z-index:var(--z-loader);flex-direction:column;gap:20px;overflow:hidden}
#loader::before{
content:'';position:absolute;inset:-25px;
background-image:
linear-gradient(rgba(201,150,90,0.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(201,150,90,0.08) 1px,transparent 1px);
background-size:50px 50px;
pointer-events:none;
animation: bgGridDrift 80s linear infinite;
}
#loader::after{
content:'';position:absolute;inset:0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--gold-a12) 0%, transparent 65%);
pointer-events:none;
animation: bgSpotPulse 7s ease-in-out infinite;
}
#loader > *{position:relative;z-index:1}
@keyframes bgGridDrift{
from{ background-position: 0 0; }
to { background-position: 50px 50px; }
}
@keyframes bgSpotPulse{
0%,100%{ opacity:.55; transform:scale(1); }
50% { opacity:1; transform:scale(1.18); }
}
.loader-logo{font-family:var(--font-h);font-size:22px;letter-spacing:4px;color:var(--gold);animation:loaderFadeUp .8s ease both;text-transform:lowercase}
/* v6.49: Loader-Logo verwendet die "big"-Custom-Properties (etwas stärker als Sidebar) */
.loader-img{
max-height:120px;
max-width:300px;
object-fit:contain;
/* Default: Fade-Up. Glow kommt über body.logo-fx-* Klassen */
animation: loaderFadeUp .6s ease both;
}
.loader-dots{display:flex;gap:8px}
.loader-dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--gold);animation:blink 1.2s infinite}
.loader-dot:nth-child(2){animation-delay:.4s}.loader-dot:nth-child(3){animation-delay:.8s}
.loader-text{font-size:var(--t-sm);color:rgba(255,255,255,0.3);letter-spacing:2px;text-transform:uppercase;animation:loaderFadeUp 1s ease .3s both}
@keyframes loaderFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* Login-Logo: Glow kommt über body.logo-fx-* Klassen, kein eigenes hardcoded animation */
.login-logo img{ display: block; }
/* ── Page Transitions ── */
.view{opacity:0;transform:translateY(8px);transition:opacity var(--tr-base),transform var(--tr-base)}
.view.active{opacity:1;transform:translateY(0)}
/* ── Skeleton Loader ── */
/* v6.14za11: alte .skeleton Definition entfernt — kanonische Version weiter unten */
/* ── Save Button Flash ── */
@keyframes saveFlash{0%{background:var(--gold);color:#000;transform:scale(1)}50%{background:var(--s-best);color:#fff;transform:scale(1.05)}100%{background:var(--gold);color:#000;transform:scale(1)}}
.btn-save-success{animation:saveFlash .6s ease}
/* ── Konfetti ── */
@keyframes konfetti-fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
.konfetti-piece{position:fixed;width:8px;height:8px;border-radius:var(--r-sm);pointer-events:none;z-index:var(--z-top);animation:konfetti-fall linear forwards}
/* ── Globale Suche ── */
#global-search-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:var(--z-search);display:none;align-items:flex-start;justify-content:center;padding-top:15vh;backdrop-filter:blur(4px)}
#global-search-overlay.open{display:flex}
#global-search-box{background:var(--surface);border:1px solid var(--gold);border-radius:var(--r);width:560px;max-width:90vw;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
#global-search-input{width:100%;padding:16px 20px;background:transparent;border:none;color:var(--text);font-size:var(--t-xl);outline:none;font-family:var(--font-b)}
#global-search-results{max-height:400px;overflow-y:auto;border-top:1px solid var(--border)}
.gs-item{padding:12px 20px;cursor:pointer;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,0.04);transition:background .1s}
.gs-item:hover{background:var(--gold-a08)}
.gs-item-icon{font-size:var(--t-xl);flex-shrink:0}
.gs-item-name{font-weight:600;font-size:var(--t-md)}
.gs-item-sub{font-size:var(--t-sm);color:var(--muted);margin-top:1px}
/* ── Heute-Kachel Countdown ── */
@keyframes countdown-pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.today-urgent{animation:countdown-pulse 2s ease infinite}
/* ── Drag & Drop Positionen ── */
/* Drag & Drop für Positionen wurde v4.75 entfernt — Klassen .drag-over-pos und .dragging-pos hier raus */
@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
/* ── Light Mode ────────────────────────────────── */
body.light{
--gold: #6A5820;
--gold-2: #8A7530;
--black: #B8B2AA;
--surface: #C8C2BA;
--surface-2: #A8A29A;
--surface-3: #989290;
--border: rgba(150,120,50,0.25);
--border-2: rgba(0,0,0,0.10);
--text: rgba(18,14,8,0.92);
--muted: rgba(18,14,8,0.55);
--faint: rgba(18,14,8,0.38); /* A11y: erhöht für WCAG AA */
--gold-dim: rgba(150,120,50,0.14);
--gold-brd: rgba(150,120,50,0.30);
}
body.light::before{
background-image:
linear-gradient(var(--gold-a06) 1px,transparent 1px),
linear-gradient(90deg,var(--gold-a06) 1px,transparent 1px);
}
body.light #sidebar{box-shadow:2px 0 12px rgba(0,0,0,0.12)}
body.light #topbar{background:rgba(168,162,154,0.97)}
body.light .card{box-shadow:0 1px 4px rgba(0,0,0,0.10)}
body.light .b-angebot {background:rgba(107,63,168,0.14)!important;color:var(--s-ang)!important;border:1px solid rgba(107,63,168,0.35)!important}
body.light .b-gebucht,
body.light .b-bestaetigt {background:rgba(26,122,66,0.14)!important;color:var(--s-best)!important;border:1px solid rgba(26,122,66,0.35)!important}
body.light .b-abgeschlossen{background:rgba(74,85,104,0.14)!important;color:var(--s-abg)!important;border:1px solid rgba(74,85,104,0.35)!important}
body.light .b-abgerechnet {background:rgba(106,88,32,0.14)!important;color:var(--s-abr)!important;border:1px solid rgba(106,88,32,0.35)!important}
body.light .b-abgesagt {background:rgba(181,43,30,0.14)!important;color:var(--s-abs)!important;border:1px solid rgba(181,43,30,0.35)!important}
body.light .b-offen {background:rgba(74,85,104,0.14)!important;color:#4A5568!important;border:1px solid rgba(74,85,104,0.35)!important}
body.light .b-gesendet {background:rgba(26,95,160,0.14)!important;color:var(--s-anf)!important;border:1px solid rgba(26,95,160,0.35)!important}
body.light .b-bezahlt {background:rgba(26,122,66,0.14)!important;color:var(--s-best)!important;border:1px solid rgba(26,122,66,0.35)!important}
body.light .b-gedruckt {background:rgba(74,85,104,0.14)!important;color:#4A5568!important;border:1px solid rgba(74,85,104,0.35)!important}
body.light .b-storniert,
body.light .b-abgelehnt {background:rgba(181,43,30,0.14)!important;color:var(--s-abs)!important;border:1px solid rgba(181,43,30,0.35)!important}
body.light .b-ueberfaellig {background:rgba(181,43,30,0.18)!important;color:var(--s-abs)!important;border:1px solid rgba(181,43,30,0.45)!important;font-weight:700!important}
body.light .badge-gold {background:rgba(106,88,32,0.14)!important;color:var(--s-abr)!important;border:1px solid rgba(106,88,32,0.35)!important}
body.light .badge-green {background:rgba(26,122,66,0.14)!important;color:var(--s-best)!important;border:1px solid rgba(26,122,66,0.35)!important}
body.light tbody tr.clickable:hover{background:rgba(106,88,32,0.12)!important}
body.light .k-card{box-shadow:0 1px 3px rgba(0,0,0,0.08)}
body.light input,body.light select,body.light textarea{
background:#C0BAB2;border-color:rgba(150,120,50,0.28);color:rgba(18,14,8,0.90);
}
body.light .si{background:#C8C2BA}
body.light #loader{background:#B8B2AA}
body.light .stat-card::before{background:linear-gradient(90deg,var(--gold),transparent)}
body.light ::-webkit-scrollbar-track{background:rgba(0,0,0,0.04)}
body.light ::-webkit-scrollbar-thumb{background:rgba(200,168,75,0.3)}
/* v6.88l: Light Mode Erweiterungen — kritische Stellen mit hardcoded Farben */
/* Backgrounds die rgba(255,255,255,...) sind auf hellem Untergrund unsichtbar */
body.light .modal-overlay{background:rgba(20,16,10,0.45)!important}
body.light .modal-box{background:#FFFFFF!important;box-shadow:0 12px 40px rgba(0,0,0,0.18)!important}
body.light .modal-header{border-bottom-color:rgba(0,0,0,0.06)!important}
body.light .modal-footer{border-top-color:rgba(0,0,0,0.06)!important}
body.light .modal-title{color:rgba(20,16,10,0.90)!important}
body.light .modal-close{color:rgba(20,16,10,0.50)!important}
body.light .modal-close:hover{background:rgba(0,0,0,0.04)!important;color:rgba(20,16,10,0.85)!important}
body.light table{background:transparent!important}
body.light tbody tr{border-bottom-color:rgba(0,0,0,0.05)!important}
body.light tbody tr.clickable:hover{background:var(--gold-a06)!important}
body.light thead th{background:rgba(0,0,0,0.02)!important;color:rgba(20,16,10,0.55)!important;border-bottom-color:rgba(0,0,0,0.08)!important}
body.light .btn-ghost{background:rgba(0,0,0,0.03)!important;color:rgba(20,16,10,0.78)!important;border-color:rgba(0,0,0,0.10)!important}
body.light .btn-ghost:hover{background:rgba(0,0,0,0.06)!important}
body.light .btn-icon{color:rgba(20,16,10,0.65)!important;background:rgba(0,0,0,0.03)!important}
body.light .btn-icon:hover{background:rgba(0,0,0,0.07)!important;color:var(--gold)!important}
body.light .tabs .tab{color:rgba(20,16,10,0.50)!important}
body.light .tabs .tab.active{color:var(--gold)!important}
body.light .tabs{border-bottom-color:rgba(0,0,0,0.06)!important}
body.light .toast{background:rgba(20,16,10,0.92)!important;color:#fff!important}
body.light .empty-state h3{color:rgba(20,16,10,0.85)!important}
body.light .empty-state p{color:rgba(20,16,10,0.55)!important}
body.light .empty-state .es-icon{background:rgba(200,168,75,0.10)!important}
body.light .k-col{background:rgba(0,0,0,0.025)!important}
body.light .k-card{background:#FFFFFF!important;border-color:rgba(0,0,0,0.06)!important}
body.light .k-cards{background:transparent!important}
body.light .anf-header-row{border-bottom-color:rgba(0,0,0,0.08)!important}
/* Generic dark-on-dark surface fixes */
body.light [style*="rgba(255,255,255,0.02)"]:not(.dont-flip){background-color:rgba(0,0,0,0.025)!important}
body.light [style*="rgba(255,255,255,0.04)"]:not(.dont-flip){background-color:rgba(0,0,0,0.04)!important}
body.light [style*="rgba(255,255,255,0.05)"]:not(.dont-flip){background-color:rgba(0,0,0,0.05)!important}
body.light [style*="rgba(255,255,255,0.06)"]:not(.dont-flip){background-color:rgba(0,0,0,0.06)!important}
body.light #login-screen{background:#FAF7F2!important}
body.light #login-screen::after,
body.light #loader::after{
background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--gold-a06) 0%, transparent 65%) !important;
}
/* Konfetti & Ringe */
body.light .empty-state .es-icon::after{background:rgba(200,168,75,0.18)!important}
/* ── v8.10: Light-Mode-Audit — ergänzte Overrides ── */
/* Sticky Subtab-Leiste in Anfrage-Detail */
body.light #af-tabs{background:rgba(255,255,255,0.98)!important;box-shadow:0 2px 8px rgba(0,0,0,0.08)!important}
/* Sidebar s-section Labels */
body.light .s-section{color:rgba(20,16,10,0.40)!important}
body.light .s-item{color:rgba(20,16,10,0.60)!important}
body.light .s-item:hover{background:rgba(0,0,0,0.04)!important;color:rgba(20,16,10,0.85)!important}
body.light .s-logo-text{color:var(--gold)!important}
/* Anfrage-Detail Hero */
body.light .detail-hero{border-bottom-color:rgba(0,0,0,0.08)!important}
body.light .anf-stats{background:rgba(0,0,0,0.03)!important;border-color:rgba(0,0,0,0.06)!important}
body.light .anf-stats>div{border-color:rgba(0,0,0,0.05)!important}
/* Timeline */
body.light .tl-item{background:rgba(0,0,0,0.02)!important;border-color:rgba(0,0,0,0.06)!important}
body.light .tl-item:hover{background:var(--gold-a06)!important}
/* Form-section-title */
body.light .form-section-title{border-bottom-color:rgba(0,0,0,0.08)!important}
/* Notification-Panel */
body.light #notif-panel{background:rgba(255,255,255,0.98)!important;border-color:rgba(0,0,0,0.08)!important}
body.light .notif-item{border-bottom-color:rgba(0,0,0,0.05)!important}
body.light .notif-item:hover{background:var(--gold-a06)!important}
/* Global Search */
body.light #global-search-box{background:#fff!important;border-color:var(--gold)!important}
body.light .gs-item:hover{background:var(--gold-a06)!important}
body.light #global-search-input{color:rgba(20,16,10,0.90)!important}
body.light .gs-item{border-bottom-color:rgba(0,0,0,0.04)!important}
/* Changelog-Modal */
body.light .changelog-entry{background:var(--surface)!important}
body.light .changelog-entry{border-color:rgba(0,0,0,0.06)!important}
/* Automationen dirty-banner */
body.light #auto-settings-dirty-banner{color:#8a5c00!important}
/* Dashboard Fokus-Karten */
body.light .dash-focus-item{background:rgba(0,0,0,0.02)!important;border-color:rgba(0,0,0,0.06)!important}
/* ── Login ─────────────────────────────────────── */
#login-screen{
position:fixed;inset:0;z-index:var(--z-loader);
background:var(--black);
display:none;align-items:center;justify-content:center;
overflow:hidden;
}
#login-screen::before{
content:'';position:absolute;inset:-25px;
background-image:
linear-gradient(rgba(201,150,90,0.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(201,150,90,0.08) 1px,transparent 1px);
background-size:50px 50px;
animation: bgGridDrift 80s linear infinite;
}
#login-screen::after{
content:'';position:absolute;inset:0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, var(--gold-a12) 0%, transparent 65%);
pointer-events:none;
animation: bgSpotPulse 7s ease-in-out infinite;
}
.login-box{
position:relative;z-index:1;
width:100%;max-width:400px;padding:0 24px;
display:flex;flex-direction:column;align-items:center;
animation:loginFadeIn 0.6s ease-out;
}
@keyframes loginFadeIn{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes pulse{
0%, 100%{transform:scale(1);opacity:1}
50%{transform:scale(1.05);opacity:0.8}
}
.login-logo{
margin-bottom:4px;text-align:center;
}
.login-sub{
font-size:var(--t-xs);color:var(--muted);letter-spacing:3px;
text-transform:uppercase;margin-bottom:40px;text-align:center;
}
.login-card{
width:100%;background:var(--surface);
border:1px solid rgba(201,150,90,0.2);border-radius:var(--r);
padding:32px;
box-shadow:0 0 40px rgba(201,150,90,0.12),0 0 80px rgba(201,150,90,0.06);
}
.login-label{
display:block;font-size:var(--t-xs);font-weight:700;
color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;
margin-bottom:7px;
}
.login-input{
width:100%;background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--r);
padding:11px 14px;font-family:var(--font-b);font-size:var(--t-lg);
color:var(--text);outline:none;margin-bottom:16px;
transition:all var(--tr-mid);
}
.login-input:focus{
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(201,150,90,0.15);
}
.login-input::placeholder{color:var(--faint);}
.l-pass-eye-btn{position:absolute;right:0;top:0;height:100%;width:42px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.4);transition:color var(--tr-mid)}
.login-btn{
width:100%;padding:12px;margin-top:4px;
background:var(--gold);color:var(--black);
border:none;border-radius:var(--r);cursor:pointer;
font-family:var(--font-h);font-size:16px;letter-spacing:2px;
transition:background var(--tr-fast);
}
.login-btn:hover{background:var(--gold-2);}
.login-err{
margin-top:14px;padding:10px 14px;
background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.2);
border-radius:var(--r);color:var(--s-abs);font-size:var(--t-base);
text-align:center;display:none;
}
.login-divider{
width:40px;height:2px;background:var(--gold);
margin:0 auto 28px;border-radius:1px;
}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
/* ── v7.16: Login-Screen Equalizer-Bars (links/rechts) ─────────────── */
.login-eq {
position: fixed;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 5px;
align-items: center;
height: 50vh;
max-height: 400px;
z-index: 0;
opacity: 0.4;
pointer-events: none;
}
.login-eq.left { left: 5%; }
.login-eq.right { right: 5%; }
.login-eq-bar {
width: 3px;
background: linear-gradient(to top, var(--gold), var(--gold-2));
border-radius:var(--r-xs);
box-shadow: 0 0 10px rgba(200,168,75,0.5);
animation: loginEqPulse 1.6s ease-in-out infinite;
transform-origin: bottom;
}
.login-eq-bar:nth-child(1) { height: 30%; animation-delay: 0s; animation-duration: 1.8s; }
.login-eq-bar:nth-child(2) { height: 60%; animation-delay: 0.2s; animation-duration: 1.4s; }
.login-eq-bar:nth-child(3) { height: 45%; animation-delay: 0.4s; animation-duration: 1.6s; }
.login-eq-bar:nth-child(4) { height: 80%; animation-delay: 0.1s; animation-duration: 2s; }
.login-eq-bar:nth-child(5) { height: 35%; animation-delay: 0.6s; animation-duration: 1.3s; }
.login-eq-bar:nth-child(6) { height: 55%; animation-delay: 0.3s; animation-duration: 1.7s; }
.login-eq-bar:nth-child(7) { height: 70%; animation-delay: 0.5s; animation-duration: 1.5s; }
.login-eq-bar:nth-child(8) { height: 40%; animation-delay: 0s; animation-duration: 1.9s; }
@keyframes loginEqPulse {
0%, 100% { transform: scaleY(0.35); }
50% { transform: scaleY(1); }
}
@media (max-width: 900px) { .login-eq { display: none; } }
/* ── v7.16: Login Recovery-Links als Pills ────────────────────────── */
.login-recovery-pills {
margin-top: 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
/* Telegram-Link: volle Breite, zentriert */
.login-recovery-pills .login-recovery-pill:last-child {
grid-column: 1 / -1;
}
.login-recovery-pill {
font-size: var(--t-xs);
color: var(--muted);
padding: 9px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
cursor: pointer;
transition: all 0.15s;
letter-spacing: 0.5px;
font-weight: 600;
font-family: var(--font-b);
text-transform: uppercase;
text-align: center;
user-select: none;
display: block;
}
.login-recovery-pill:hover {
background: var(--gold-dim);
border-color: var(--gold-brd);
color: var(--gold);
}
/* ── v7.16: Login-Button Shine-Effekt beim Hover ─────────────────── */
.login-btn {
position: relative;
overflow: hidden;
}
.login-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
transition: left 0.7s;
pointer-events: none;
}
.login-btn:hover::before { left: 100%; }
.login-btn:hover { letter-spacing: 3px; }
/* ── Unsaved Changes Dialog ────────────────────── */
#unsaved-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0.7);
z-index:var(--z-confirm);display:none;align-items:center;justify-content:center;
backdrop-filter:blur(4px);
}
#unsaved-overlay.show{display:flex}
#unsaved-dialog{
background:var(--surface);border:1px solid var(--gold-brd);
border-radius:var(--r);padding:28px 28px 22px;max-width:420px;width:90%;
box-shadow:0 8px 40px rgba(0,0,0,0.5);
animation:dialogIn .2s ease;
}
@keyframes dialogIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.unsaved-icon{font-size:28px;margin-bottom:12px;text-align:center}
.unsaved-title{font-family:var(--font-h);font-size:var(--t-xl);letter-spacing:1px;color:var(--text);margin-bottom:8px;text-align:center}
.unsaved-msg{font-size:var(--t-md);color:var(--muted);text-align:center;line-height:1.6;margin-bottom:22px}
.unsaved-btns{display:flex;gap:8px;justify-content:center}
/* ════════════════════════════════════════════════════
MOBILE ≤768px – nur Ergänzungen, Desktop unverändert
════════════════════════════════════════════════════ */
/* Hamburger: Desktop hidden */
#mob-ham{display:none;align-items:center;justify-content:center;
min-width:44px;min-height:44px;background:none;border:none;
cursor:pointer;color:var(--muted);flex-shrink:0;padding:0;
border-radius:var(--r);transition:color var(--tr-mid);
-webkit-tap-highlight-color:transparent}
#mob-ham:hover{color:var(--gold)}
/* Bottom-Nav: Desktop hidden (v5.66) */
#mob-bottom-nav{display:none}
/* Overlay – liegt INNERHALB #app, daher kein Stacking-Context-Problem */
#mob-overlay{display:none;position:fixed;inset:0;
background:rgba(0,0,0,.6);z-index:var(--z-mob-bg);
-webkit-tap-highlight-color:transparent}
#mob-overlay.on{display:block}
@media (max-width: 768px) {
/* iOS: verhindert Auto-Zoom bei Input-Fokus (font-size < 16px zoomt rein) */
input,select,textarea{font-size:16px !important}
/* Kompensation: Labels trotzdem klein lassen */
input::placeholder{font-size:14px}
/* Mobile: Cards kompakter, weniger Padding */
.card{padding:12px}
.card-header{margin-bottom:10px}
/* Mobile: form-group etwas enger */
.form-group{margin-bottom:10px}
/* Mobile: form-row-2 immer einspaltig */
.form-row-2,.form-row-3{grid-template-columns:1fr}
.form-row-2.mob-2col{grid-template-columns:1fr 1fr}
.form-row-3.mob-3col{grid-template-columns:1fr 1fr 1fr}
/* Mobile: Toolbar kompakter */
.toolbar{padding:8px 12px;gap:6px}
/* ── Logo auf Mobile immer sichtbar ─────────────────── */
#s-logo-wrap img { height:32px !important; display:block !important; }
#sidebar.collapsed .s-logo img,
#sidebar.collapsed:hover .s-logo img { height:32px !important; }
/* ── Glocke: Topbar-Version zeigen, Sidebar-Version ausblenden ── */
#mob-bell-btn { display:flex !important; }
#notif-bell { display:none !important; }
/* ── Hamburger sichtbar ─────────────────────── */
#mob-ham{display:flex !important}
/* ── Sidebar: Drawer ────────────────────────── */
#sidebar{
position:fixed !important;
top:0 !important;left:0 !important;bottom:0 !important;
width:min(80vw,272px) !important;
min-width:0 !important;
transform:translateX(-110%) !important;
transition:transform .25s cubic-bezier(.4,0,.2,1) !important;
z-index:var(--z-mob-ui) !important; /* --z-mob-bg:490 → Sidebar liegt drüber */
overflow-y:auto !important;
box-shadow:none !important;
display:flex !important; /* immer flex – transform steuert Sichtbarkeit */
}
/* Drawer offen */
#sidebar.mob-open{
transform:translateX(0) !important;
box-shadow:8px 0 40px rgba(0,0,0,.85) !important;
}
/* Desktop-Collapse auf Mobile nullen */
#sidebar.collapsed,#sidebar.collapsed:hover{
width:min(80vw,272px) !important;
min-width:0 !important;
overflow:hidden !important;
transform:translateX(-110%) !important;
}
#sidebar.collapsed.mob-open,#sidebar.collapsed:hover.mob-open{
transform:translateX(0) !important;
}
#sidebar.collapsed .s-logo-text,
#sidebar.collapsed .s-logo-sub,
#sidebar.collapsed .s-section,
#sidebar.collapsed .s-bottom{display:block !important}
#sidebar.collapsed .s-item,
#sidebar .s-item{
padding:8px 18px !important;justify-content:flex-start !important;
font-size:var(--t-md) !important;border-left-width:2px !important;gap:9px !important}
#sidebar.collapsed .s-item svg,
#sidebar .s-item svg{width:14px !important;height:14px !important;opacity:.7 !important}
#sidebar .s-section{padding:14px 0 4px 18px !important;font-size:var(--t-xs) !important}
#sidebar-toggle-btn{display:none !important}
/* ── Main: volle Breite ─────────────────────── */
#main{width:100% !important}
/* ── Topbar ─────────────────────────────────── */
#topbar{height:50px !important;min-height:50px !important;
padding:0 8px !important;gap:0 !important}
#topbar-title{font-size:var(--t-md) !important;letter-spacing:.8px !important;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topbar-back{padding:6px 6px 6px 0 !important;font-size:var(--t-sm) !important}
#topbar-actions{gap:4px !important;flex-shrink:0}
#autosave-indicator{display:none !important}
/* ── BOTTOM-NAV (v5.66) ───────────────────────── */
#mob-bottom-nav{
display:flex !important;
position:fixed;left:0;right:0;bottom:0;
background:rgba(20,18,16,0.97);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-top:1px solid var(--border);
z-index:var(--z-mob-nav);
padding-bottom:env(safe-area-inset-bottom);
box-shadow:0 -4px 20px rgba(0,0,0,0.4);
}
#mob-bottom-nav .mbn-tab{
flex:1;background:transparent;border:none;color:var(--muted);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:3px;padding:8px 4px 6px;cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:color .15s ease;
position:relative;
min-height:56px;
}
#mob-bottom-nav .mbn-tab svg{opacity:.65;transition:opacity var(--tr-fast)}
/* 5 Tabs (Audit QW2): Label 9px → 10px, mehr Luft */
#mob-bottom-nav .mbn-tab span:not(.mbn-badge){
font-size:10px;font-weight:600;letter-spacing:.2px;
}
#mob-bottom-nav .mbn-tab{
padding:8px 4px 6px;
gap:3px;
}
#mob-bottom-nav .mbn-tab.active{color:var(--gold)}
#mob-bottom-nav .mbn-tab.active svg{opacity:1}
#mob-bottom-nav .mbn-tab.active::before{
content:'';position:absolute;top:0;left:25%;right:25%;height:2px;
background:var(--gold);border-radius:0 0 2px 2px;
}
#mob-bottom-nav .mbn-tab:active{background:var(--gold-a08)}
#mob-bottom-nav .mbn-badge{
position:absolute;top:6px;right:calc(50% - 22px);
background:var(--s-abs);color:#fff;border-radius:9px;
min-width:16px;height:16px;font-size:var(--t-xs);font-weight:700;
padding:0 4px;display:flex;align-items:center;justify-content:center;
pointer-events:none;
}
/* ── Mehr-Sheet Items — Audit QW2 ───────────────── */
.mbn-mehr-item{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:6px;padding:16px 8px;border-radius:var(--r);
background:var(--surface-2);border:1px solid var(--border);
color:var(--muted);font-size:var(--t-sm);font-weight:600;
cursor:pointer;transition:color var(--tr-mid),background var(--tr-mid);
-webkit-tap-highlight-color:transparent;min-height:80px;
}
.mbn-mehr-item:active{background:var(--surface-3);color:var(--text);}
.mbn-mehr-item svg{opacity:.7}
.mbn-mehr-item:active svg{opacity:1}
/* Main braucht Bottom-Padding damit Content nicht verdeckt wird */
#main{padding-bottom:calc(60px + env(safe-area-inset-bottom)) !important}
/* Bei Anfrage-Detail: Padding für Sticky-Save unten */
body.view-anfrage-detail #main,
body.view-anfrage-detail-open #main { padding-bottom:calc(80px + env(safe-area-inset-bottom)) !important }
/* Aber: Detail-Views mit fixem Save-Bar haben eigenes Padding */
/* Toast/Autosave/FAB-artige Elemente auf Mobile über Bottom-Nav anheben */
#toast-container{bottom:calc(72px + env(safe-area-inset-bottom)) !important}
#autosave-indicator{bottom:calc(72px + env(safe-area-inset-bottom)) !important}
/* FAB anheben damit er nicht vom Bottom-Nav verdeckt wird */
#mobile-fab{bottom:calc(76px + env(safe-area-inset-bottom)) !important}
/* ── Views ──────────────────────────────────── */
.view.active{padding:10px 10px !important}
#view-kalender.active{padding:6px 6px !important}
/* ════════════════════════════════════════════════════════
INPUT TOUCH-TARGETS — Mobile min-height
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,
textarea {
min-height: 40px !important;
font-size: var(--t-md) !important; /* Verhindert iOS Auto-Zoom bei <16px */
}
/* Login-Inputs: eigene Größen */
.login-input {
min-height: unset !important;
font-size: 14px !important;
}
/* Checkboxen größer für Touch */
input[type=checkbox],
input[type=radio] {
width: 20px !important;
height: 20px !important;
}
}
/* ── Touch-Targets (Apple HIG: 44pt min, Material: 48dp) ─── */
.btn {
min-height: 44px !important;
padding: 10px 13px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex-shrink: 0 !important;
box-sizing: border-box !important;
}
/* Login-Screen: eigenes Design, keine Mobile-Overrides */
#login-screen .btn,
#login-screen .login-btn,
.login-card .btn {
min-height: unset !important;
padding: unset !important;
}
/* Filter-Pills: Buttons auf Mobile Mindestgröße + Tap-freundlich */
.filter-pills .filter-btn,
.flex-row-wrap .filter-btn {
min-height: 36px !important;
padding: 6px 14px !important;
font-size:var(--t-base) !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
min-width: max-content !important;
}
/* btn-sm auf Mobile etwas größer für bessere Tippbarkeit */
.btn-sm {
min-height: 40px !important;
padding: 8px 14px !important;
font-size:var(--t-base) !important;
white-space: nowrap !important;
}
/* btn-xs bleibt kompakt aber mit Mindesthöhe */
.btn-xs {
min-height: 44px !important;
padding: 6px 10px !important;
font-size:var(--t-sm) !important;
white-space: nowrap !important;
}
.btn-sm{min-height:44px !important;padding:9px 12px !important}
.btn-xs{min-height:44px !important;padding:8px 11px !important}
/* Touch-Targets: alle primären Buttons ≥ 44px (WCAG 2.5.5) */
.btn:not(.btn-icon):not(.mbn-badge):not(.tab):not(.filter-btn){min-height:44px !important}
/* Tabellen-Action-Buttons: kompakter erlaubt da nicht primär per Touch bedient */
.tw .btn,.row-actions .btn{min-height:32px !important;padding:5px 9px !important}
/* ── Touch-Targets: select + row-actions — Audit QW4 ──────── */
/* select hat kein min-height aus dem btn-Block → nachrüsten */
select{min-height:44px !important}
/* row-actions: Icons weiter auseinander + Mindestfläche für Treffsicherheit */
.row-actions{gap:10px !important}
.row-actions button,.row-actions a{
min-width:36px !important;min-height:36px !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;
}
/* ── Typography Fix R7: Label-Harmonie auf Mobile ─────────────────
Problem: Inputs = 16px (iOS-Zoom-Schutz), Labels = 11px → 45% Sprung.
Fix: Labels auf Mobile auf 13px + weniger aggressives Uppercase. */
.page-form label,
.field-label, .field-label-block, .field-label-top,
.form-group > label,
#view-einstellungen .form-group label {
font-size: 12px !important;
letter-spacing: 0.4px !important;
}
/* Placeholder-Größe angleichen */
input::placeholder, textarea::placeholder {
font-size: 15px !important;
opacity: 0.5;
}
/* ── iOS Zoom verhindern ─────────────────────── */
input,select,textarea{font-size:16px !important}
.si{font-size:var(--t-lg) !important}
/* ── CSS-Klassen-Grids ──────────────────────── */
/* g2/g3/g4/g5: werden durch auto-fit/minmax intrinsisch kollabiert — kein !important-Override mehr nötig */
/* #dash-stats auf Mobile: 2×2 Grid */
#dash-stats{grid-template-columns:1fr 1fr !important;gap:10px !important}
/* Auf Mobile: alle gleich, keine span-Ausnahme */
.form-row-2,.form-row-3{grid-template-columns:1fr !important;gap:10px !important}
.detail-cols{grid-template-columns:1fr !important}
/* Kunden-Kontakt-Schnellbar auf Mobile sichtbar */
.kd-mob-actions{
display:flex !important;
gap:8px;flex-wrap:wrap;
margin:-4px -10px 12px -10px;
padding:10px 10px 10px;
background:var(--surface-2);
border-bottom:1px solid var(--border);
}
.kd-mob-btn{ flex:1;min-width:calc(50% - 4px);justify-content:center;text-align:center; }
/* ── INLINE-STYLE Overrides via CSS (Attribut-Selector + !important) ──
CSS !important schlägt inline style – zuverlässiger als JS ───────── */
/* Alle Flex-Container innerhalb detail-hero: wrapping erlauben */
.detail-hero [style*="display:flex"]{flex-wrap:wrap !important}
/* Inline-Grid-Reste: auto-fit/minmax kollabiert bereits — minmax-Override entfällt */
/* Breite feste Spalten die noch inline sind → 1fr (Seltene Altlasten) */
[style*="460px"]{grid-template-columns:1fr !important}
[style*="220px"]{grid-template-columns:1fr !important}
/* [style*="repeat(3,"] → jetzt class="g3" — Selektor entfernt */
/* [style*="repeat(4,"] → jetzt class="g4" — Selektor entfernt */
/* [style*="1fr 1fr 1fr"] → jetzt class="g3" — Selektor entfernt */
/* Preiskalkulation Zeile: 2fr 120px (spezifisch, selten) */
[style*="2fr 120px"]{grid-template-columns:1fr 1fr !important}
[style*="60px 1fr auto"]{grid-template-columns:1fr 1fr !important}
/* Spezifisch: Anfrage-Detail Header-Zeile stats+buttons */
.detail-hero [style*="align-items:center"][style*="gap:5px"]{
flex-wrap:wrap !important;gap:6px !important;
justify-content:flex-start !important}
/* Stats-Boxes (ANFRAGEN/BUCHUNGEN/UMSATZ): auf Mobile schmaler */
.detail-hero [style*="border-left:1px solid var(--border)"][style*="border-right"]{
font-size:var(--t-xs) !important}
.detail-hero [style*="border-left:1px solid var(--border)"][style*="border-right"] > div{
padding:3px 8px !important}
/* ── Kalender ────────────────────────────────── */
#cal-layout{grid-template-columns:1fr !important}
/* cal-sidebar on mobile: shown above grid via order */
/* v6.64: Touch-optimiert — feste Zellenhöhe (80px) statt aspect-ratio.
Datum oben links wie bei Standard-Kalendern.
Events als 7px Status-Punkte unten in der Zelle.
Aktiver Touch-Feedback durch :active background. */
.cal-grid{
font-size:var(--t-xs) !important;
grid-template-columns:repeat(7,minmax(0,1fr)) !important;
/* Fix R2: 110px→60px — auf 390px Screen: 55px breit, 60px hoch = nahezu quadratisch */
grid-auto-rows:60px !important;
grid-template-rows:auto !important;
flex:none !important;
width:100% !important;
max-width:100% !important;
gap:2px !important;
}
.cal-day{
aspect-ratio:auto !important;
height:60px !important;
min-height:60px !important;
padding:3px 2px 2px !important;
overflow:hidden !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
-webkit-tap-highlight-color:rgba(200,168,75,0.25) !important;
touch-action:manipulation !important;
cursor:pointer !important;
pointer-events:auto !important;
}
/* v6.66: ALLE direct children der cal-day werden auf pointer-events:none
gesetzt, damit Touch/Click immer auf den .cal-day Parent landet
(sonst kann der calDayClick durch Child-Elemente verschluckt werden) */
.cal-day > *{pointer-events:none !important}
.cal-day:active{background:rgba(200,168,75,0.2) !important}
.cal-day .cal-dn2{
font-size:var(--t-sm) !important; /* kleiner da weniger Platz */
font-weight:700 !important;
margin:0 0 2px 0 !important;
line-height:1 !important;
text-align:left !important;
padding-right:0 !important; /* kein Rechts-Padding nötig bei 60px */
}
.cal-day.today{
background:rgba(200,168,75,0.18) !important;
border-color:var(--gold) !important;
border-width:2px !important;
}
.cal-day.today .cal-dn2{font-size:var(--t-lg) !important;font-weight:900 !important}
.cal-kw-badge{
font-size:8px !important;
padding:1px 4px !important;
top:2px !important;
right:2px !important;
line-height:1.3 !important;
background:var(--gold-a15) !important;
font-weight:700 !important;
}
/* v6.69: Events-Container vertikal gestackt damit Text-Pillen reinpassen */
.cal-day-events{
display:flex !important;
flex-direction:column !important;
flex:1 !important;
min-height:0 !important;
gap:2px !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
align-items:stretch !important;
}
/* v6.69: Events als kompakte Text-Pillen mit Status-Farbe (statt Punkte) */
.cal-ev{
flex:0 0 auto !important;
height:auto !important;
width:100% !important;
padding:2px 4px !important;
margin:0 !important;
border-radius:3px !important;
font-size:9px !important;
font-weight:700 !important;
line-height:1.2 !important;
border:none !important;
border-left:3px solid !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
pointer-events:none !important;
display:block !important;
box-shadow:none !important;
}
.cal-ev.best{background:rgba(39,174,96,.20) !important;border-left-color:var(--s-best) !important;color:var(--s-best) !important}
.cal-ev.ang{background:rgba(74,144,217,.20) !important;border-left-color:#4A90D9 !important;color:#5DADE2 !important}
.cal-ev.gebucht{background:rgba(200,168,75,.20) !important;border-left-color:var(--gold) !important;color:var(--gold) !important}
.cal-ev.abs{background:rgba(231,76,60,.18) !important;border-left-color:var(--s-abs) !important;color:var(--s-abs) !important;opacity:.6 !important}
/* "+N" Mehr-Indikator wenn mehr als 4 Events am Tag */
.cal-day-more{
display:block !important;
font-size:8px !important;
font-weight:700 !important;
color:var(--muted) !important;
margin-top:2px !important;
text-align:right !important;
padding-right:2px !important;
}
/* Feiertag als kompakte Mini-Pille */
.cal-feiertag{
font-size:8px !important;
padding:1px 3px !important;
margin:2px 0 0 0 !important;
line-height:1.2 !important;
border-left-width:2px !important;
border-radius:var(--r-xs) !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
flex-shrink:0 !important;
}
.cal-dn{font-size:9px !important;padding:6px 0 !important;letter-spacing:.5px !important;text-align:center !important}
.cal-cell{padding:1px !important;min-height:50px !important}
.cal-day-num{font-size:var(--t-xs) !important}
.cal-event-pill{font-size:8px !important;padding:1px 3px !important}
.cal-filter-bar{flex-wrap:wrap !important;gap:4px !important}
.cal-filter-btn{padding:5px 11px !important;font-size:var(--t-sm) !important;min-height:32px !important}
#cal-auslastung > div{font-size:var(--t-sm) !important;padding:8px 10px !important;flex-wrap:wrap !important}
/* v6.63: View-Container: garantiertes padding gegen "abgeschnitten links" */
#view-kalender{padding-left:max(8px,env(safe-area-inset-left)) !important;padding-right:max(8px,env(safe-area-inset-right)) !important}
/* ── Dokument-Editor — Fix R5 ─────────────────── */
.dok-split{flex-direction:column !important;overflow:auto !important}
.dok-form{width:100% !important;border-right:none !important;
border-bottom:none !important;padding:12px !important}
/* Vorschau auf Mobile per default ausblenden — Nutzer öffnet via Modal */
.dok-preview{display:none !important}
.dok-topbar{padding:8px 10px !important}
.dok-topbar-row1{flex-wrap:wrap !important;gap:6px !important}
.dok-topbar-row2{gap:4px !important;flex-wrap:wrap !important}
/* Vorschau-Button auf Mobile: größer + Gold-Akzent (primäre Aktion) */
#btn-toggle-preview{
min-height:44px !important;
background:rgba(200,168,75,0.1) !important;
border-color:var(--gold-brd) !important;
color:var(--gold) !important;
font-weight:600 !important;
}
/* ── Detail-Hero ─────────────────────────────── */
.detail-hero{flex-direction:column !important;gap:10px !important;padding:12px !important}
.detail-hero-left h1{font-size:var(--t-xl) !important}
.detail-hero-actions{flex-wrap:wrap !important;width:100% !important;gap:6px !important}
.detail-hero-actions .btn{flex:1 !important;justify-content:center !important}
/* ── Cards / Toolbar / Tabs ──────────────────── */
.card{padding:12px !important}
.card-header{margin-bottom:10px !important}
.toolbar{flex-wrap:wrap !important;gap:8px !important;padding:8px 0 !important}
.toolbar .si{flex:1 1 110px !important}
.tabs{overflow-x:auto !important;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch}
.tab{white-space:nowrap !important;padding:7px 11px !important;font-size:var(--t-sm) !important}
/* ═══════════════════════════════════════════
EINHEITLICHE SUCH-UX FÜR ALLE LISTEN
Anfragen / Kunden / Dokumente / Produkte
═══════════════════════════════════════════ */
/* Alle Toolbars: Vertikal stapeln */
#view-anfragen .toolbar,
#view-kunden .toolbar,
#view-finanzen > div:first-child,
#view-produkte .toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 6px !important;
padding: 8px 0 !important;
}
/* Alle Suchfelder: gleicher Stil */
#a-search,
#k-search,
#dok-search,
#art-search {
flex: none !important;
width: 100% !important;
height: 40px !important;
min-height: 40px !important;
padding: 8px 14px !important;
font-size:var(--t-lg) !important;
box-sizing: border-box !important;
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
color: var(--text) !important;
}
#a-search::placeholder,
#k-search::placeholder,
#dok-search::placeholder,
#art-search::placeholder {
color: var(--muted) !important;
font-size:var(--t-md) !important;
}
/* Sekundäre Dropdowns: klein, links */
#a-jahr,
#a-view-mode,
/* Anfragen-Toolbar: durch universelles .mob-filters System ersetzt */
/* ═══════════════════════════════════════════════════════
FINANZEN-TOOLBAR — Mobile: Suche + 2 Dropdowns
═══════════════════════════════════════════════════════ */
#view-finanzen .toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
padding: 8px 0 !important;
}
/* Action-Buttons (DATEV + Neue Dokumente): verstecken auf Mobile */
#view-finanzen .toolbar > .flex-row.gap-8 {
display: none !important;
}
/* ═══════════════════════════════════════════════════════
FINANZEN — Summen-Bar Mobile-Layout (kompakt)
═══════════════════════════════════════════════════════ */
#dok-summen-bar {
padding: 10px 12px !important;
gap: 8px !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Summen-Werte-Container: gleichmäßig verteilt */
#dok-summen-bar > div[style*="display:flex"] {
width: 100% !important;
justify-content: space-around !important;
flex-wrap: nowrap !important;
}
/* Einzelne Summen-Werte (Netto/MwSt/Brutto): kompakt */
#dok-summen-bar > div > div {
padding: 0 6px !important;
flex: 1 !important;
min-width: 0 !important;
align-items: center !important;
}
/* Summen-Beträge kleiner */
#dok-summen-bar strong {
font-size:var(--t-lg) !important;
}
#dok-summen-bar #dok-summen-brutto {
font-size: 16px !important;
}
/* Count-Text */
#dok-summen-bar #dok-summen-count {
font-size:var(--t-sm) !important;
text-align: center;
}
/* Sicherstellen dass Finanzen-View nicht überläuft */
#view-finanzen {
max-width: 100vw !important;
}
#view-finanzen > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* + Neues Event Button auf Mobile verstecken (FAB übernimmt), aber
KI-Import & Trends sichtbar lassen — wichtige Funktionen nur hier verfügbar */
#view-anfragen .toolbar > div[style*="margin-left:auto"] .btn-primary,
#view-kunden .toolbar > div[style*="margin-left:auto"] .btn-primary,
#view-kunden .toolbar > div.ml-auto .btn-primary,
#view-finanzen > div:first-child > div[style*="margin-left:auto"] > .btn-primary,
#view-produkte .toolbar > .btn-primary {
display: none !important;
}
/* Action-Button-Container darf bleiben aber nicht ganz rechts gepinnt sein */
#view-anfragen .toolbar > div[style*="margin-left:auto"],
#view-anfragen .toolbar > div.flex-row.gap-8 {
margin-left: 0 !important;
width: 100% !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 6px !important;
}
/* KI-Import & Trends als sm-Buttons mit kompakteren Labels */
#view-anfragen .toolbar .btn-ghost {
flex: 1 !important;
min-width: 0 !important;
padding: 8px 6px !important;
font-size:var(--t-sm) !important;
white-space: nowrap !important;
}
/* Vertikale Trenner verstecken */
#view-anfragen .toolbar > div[style*="width:1px"],
#view-kunden .toolbar > div[style*="width:1px"],
#view-kunden .toolbar > .divider-v,
#view-finanzen > div:first-child > div[style*="width:1px"],
#view-finanzen > div:first-child > .divider-v {
display: none !important;
}
/* Finanzen Summen-Bar: kompakter und stack auf Mobile */
#dok-summen-bar {
padding: 10px 12px !important;
gap: 8px !important;
}
#dok-summen-bar > div {
width: 100%;
justify-content: space-between !important;
}
#dok-summen-bar > div > div {
padding: 0 6px !important;
flex: 1;
align-items: center !important;
}
#dok-summen-bar [id*="summen"] {
font-size:var(--t-lg) !important;
}
/* Toolbar in Finanzen kompakter */
#view-finanzen > .toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
/* Suchfeld: immer volle Breite, eigene Zeile */
#view-finanzen > .toolbar > #dok-search {
width: 100% !important;
flex: none !important;
min-height: 40px !important;
}
#view-finanzen > .toolbar > .flex-row-wrap {
overflow-x: auto;
flex-wrap: nowrap !important;
-webkit-overflow-scrolling: touch;
}
#view-finanzen > .toolbar > .flex-row-wrap .filter-btn {
flex-shrink: 0;
}
/* Filter-Button-Container: einheitlich 4er Grid bei Anfragen + Dokumenten */
#view-anfragen .toolbar > div[style*="background:var(--surface-2)"],
#view-finanzen > div:first-child > div:first-child {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 4px !important;
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
padding: 4px !important;
}
/* Filter-Buttons: einheitlicher Stil */
.dok-filter-btn,
.kunden-filter-btn {
padding: 7px 4px !important;
font-size:var(--t-xs) !important;
min-height: 36px !important;
text-align: center !important;
flex: none !important;
min-width: 0 !important;
border-radius: var(--r) !important;
border: 1px solid var(--border) !important;
background: var(--surface) !important;
color: var(--muted) !important;
font-weight: 600 !important;
}
.dok-filter-btn.active,
.kunden-filter-btn.active {
background: var(--gold) !important;
color: #000 !important;
font-weight: 700 !important;
border-color: var(--gold) !important;
}
/* Kunden hat nur 3 Filter (Alle/Privat/Firma) → 3er Grid */
#view-kunden .toolbar > div[style*="display:flex"][style*="gap:6px"]:first-child {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 4px !important;
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
padding: 4px !important;
}
/* "Nur neueste" Checkbox kompakt */
#view-finanzen label[title*="Versteckt"] {
align-self: flex-start !important;
padding: 0 !important;
margin: 0 !important;
}
/* ── ANFRAGE-NEU: Mobile Optimierung ──────── */
/* Doppelter Header weg - Topbar zeigt schon Titel */
#view-anfrage-neu .detail-hero,
#view-anfrage-neu .detail-hero-left {
display: none !important;
}
/* Form-Section-Title kompakter */
#view-anfrage-neu .form-section-title,
#view-anfrage-detail .form-section-title {
font-size:var(--t-base) !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
}
/* Form-Rows: 1 Spalte */
#view-anfrage-neu .form-row-2,
#view-anfrage-neu .form-row-3,
#view-anfrage-detail .form-row-2,
#view-anfrage-detail .form-row-3 {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Kunde-Auswahl-Bereich (Select + Neu-Button) - schöner gestalten */
#view-anfrage-neu .form-group > div[style*="display:flex"][style*="gap:6px"] {
gap: 6px !important;
display: grid !important;
grid-template-columns: 1fr auto !important;
}
#view-anfrage-neu .form-group > div[style*="display:flex"][style*="gap:6px"] select {
width: 100% !important;
min-width: 0 !important;
}
#view-anfrage-neu .form-group > div[style*="display:flex"][style*="gap:6px"] .btn {
flex-shrink: 0 !important;
padding: 0 14px !important;
min-height: 44px !important;
font-size:var(--t-base) !important;
white-space: nowrap !important;
}
/* Form-Group Labels deutlicher */
#view-anfrage-neu .form-group label,
#view-anfrage-detail .form-group label {
font-size:var(--t-xs) !important;
margin-bottom: 6px !important;
display: block !important;
}
/* Padding der Cards reduziert */
#view-anfrage-neu .card,
#view-anfrage-neu .page-form {
padding: 14px !important;
}
/* ── KUNDE-DETAIL: Mobile Optimierung ──────── */
/* Hero kompakter */
#view-kunde-detail .detail-hero,
#view-kunde-neu .detail-hero {
padding: 10px 12px !important;
margin-bottom: 12px !important;
gap: 8px !important;
}
#view-kunde-detail .detail-hero-left h1,
#view-kunde-neu .detail-hero-left h1 {
font-size:var(--t-xl) !important;
margin-bottom: 4px !important;
line-height: 1.2 !important;
}
#view-kunde-detail .detail-hero-left .meta,
#view-kunde-neu .detail-hero-left .meta {
font-size:var(--t-sm) !important;
gap: 8px !important;
}
/* Action-Buttons: 3er Grid mit Icon + Label (wie Dokumente) */
#view-kunde-detail .detail-hero-actions,
#view-kunde-neu .detail-hero-actions {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
width: 100% !important;
flex-wrap: unset !important;
}
#view-kunde-detail .detail-hero-actions .btn,
#view-kunde-neu .detail-hero-actions .btn {
flex: none !important;
padding: 8px 4px !important;
min-height: 52px !important;
font-size:var(--t-sm) !important;
font-weight: 600 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
line-height: 1.2 !important;
white-space: normal !important;
text-align: center !important;
}
/* Avatar-Bereich: Zentriert, Foto-Button darunter */
#kunden-foto-preview {
width: 80px !important;
height: 80px !important;
margin: 0 auto 12px !important;
font-size:var(--t-h) !important;
}
/* Container-Div des Avatars (das mit display:flex;gap:12px) */
div[style*="display:flex"][style*="gap:12px"][style*="align-items:center"]:has(#kunden-foto-preview) {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
/* Fallback ohne :has - direkt das Element nach Avatar */
#kunden-foto-preview + div,
#kunden-foto-preview ~ div[style*="flex:1"] {
width: 100% !important;
flex: none !important;
}
/* Summen-Bar: kompakter auf Mobile */
#dok-summen-netto, #dok-summen-mwst, #dok-summen-brutto {
font-size:var(--t-lg) !important;
}
/* ── Tabellen ────────────────────────────────── */
.tw{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
.tw table{min-width:460px;font-size:var(--t-sm) !important}
/* Tabellen → Cards auf Mobile (alle Listen-Views) */
#anfragen-content .tw table,
#view-kunden .tw table,
#view-finanzen .tw table,
#view-produkte .tw table { display: none !important; }
#anfragen-content .tw .mob-cards,
#view-kunden .tw .mob-cards,
#view-finanzen .tw .mob-cards,
#view-produkte .tw .mob-cards { display: block !important; padding: 4px 0; }
/* Mobile Card Design */
.mob-card {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 12px 14px;
margin-bottom: 8px;
cursor: pointer;
border-left-width: 3px;
border-left-style: solid;
transition:background var(--tr-mid);
}
.mob-card:active { background: var(--surface-3); }
.mob-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
margin-bottom: 8px;
}
.mob-card-icon {
font-size: 22px;
line-height: 1;
flex-shrink: 0;
}
.mob-card-name {
flex: 1;
min-width: 0;
}
.mob-card-knr {
font-size:var(--t-xs);
color: var(--gold);
margin-bottom: 2px;
}
.mob-card-title {
font-size:var(--t-md);
font-weight: 600;
color: var(--text);
line-height: 1.3;
}
.mob-card-betrag {
font-family: var(--font-h);
font-size:var(--t-lg);
font-weight: 600;
flex-shrink: 0;
text-align: right;
}
.mob-card-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size:var(--t-sm);
color: var(--muted);
}
.mob-card-status {
margin-left: auto;
font-size:var(--t-xs);
font-weight: 600;
padding: 3px 8px;
border-radius: 3px;
border: 1px solid currentColor;
}
.mob-cards { display: none; }
/* ── Generisches Stack-Layout für Tabellen mit data-label ────────
Jede Tabelle die auf Mobile zu Karten werden soll bekommt einfach
class="table-stack" und jede | ein data-label="...".
Funktioniert auch für Tabellen mit Inputs. */
.table-stack {
border-collapse: separate !important;
border-spacing: 0 8px !important;
}
.table-stack thead { display: none; }
.table-stack tbody, .table-stack tr, .table-stack td {
display: block;
width: 100%;
box-sizing: border-box;
}
.table-stack tr {
background: var(--surface-2);
border-radius: 10px;
border-left: 3px solid var(--gold);
padding: 8px 4px;
margin-bottom: 8px;
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.table-stack td {
padding: 6px 12px !important;
border: none !important;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
min-height: 28px;
text-align: left !important;
}
.table-stack td::before {
content: attr(data-label);
color: var(--muted);
font-size:var(--t-xs);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
flex-shrink: 0;
min-width: 90px;
}
/* Wenn td kein data-label hat (z.B. Action-Spalten) → ohne Label-Spalte */
.table-stack td:not([data-label])::before { content: none; }
.table-stack td:not([data-label]) {
justify-content: flex-end;
padding-top: 4px !important;
border-top: 1px solid var(--border) !important;
margin-top: 4px;
}
/* Inputs in Stack-Layout sollen volle rechte Spalte einnehmen */
.table-stack td input,
.table-stack td select,
.table-stack td textarea {
width: 100% !important;
max-width: 180px;
}
/* Empty-Row (z.B. "Keine Daten") nicht stacken */
.table-stack tr.empty-row {
background: transparent;
border: none;
padding: 0;
}
.table-stack tr.empty-row td {
display: block;
text-align: center !important;
justify-content: center;
}
.table-stack tr.empty-row td::before { content: none; }
/* ── Positions-Zeilen ────────────────────────── */
.pos-row{grid-template-columns:1fr 52px 72px 26px !important;gap:3px !important}
/* ── Kanban ──────────────────────────────────── */
.kanban{overflow-x:auto !important;-webkit-overflow-scrolling:touch;padding-bottom:8px !important}
.k-col{min-width:200px !important}
/* ── Sonstiges ───────────────────────────────── */
.detail-page,.page-form{max-width:100% !important}
.portal-wrap{padding:14px 10px 40px !!important}
#crm-confirm-box{width:94% !important;padding:18px 14px !important}
/* ── Stat-Cards ──────────────────────────────── */
.stat-card{padding:12px 10px !important}
.stat-v{font-size:clamp(20px,5vw,28px) !important}
.stat-l{font-size:var(--t-xs) !important;letter-spacing:1px !important}
/* ── Anfrage-Detail Header ────────────────────── */
/* Haupt-Zeile: Avatar + Name + Stats + Buttons → umbrechen */
.anf-header-row{
flex-wrap:wrap !important;
gap:10px !important;
min-height:auto !important; /* v1.4bj: kein 160px auf Mobile */
}
/* Avatar kleiner auf Mobile */
.anf-header-row [style*="width:120px"]{
width:72px !important; height:72px !important;
font-size:24px !important;
}
.anf-header-row [style*="width:60px"]{
width:40px !important; height:40px !important;
font-size:14px !important;
}
/* Avatar + Name bleiben zusammen oben */
.anf-header-row > div:first-child{flex-shrink:0}
/* Stats: kompakt, horizontal scrollbar */
.anf-stats{
flex-shrink:1 !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch;
border-left:none !important;
border-right:none !important;
border-top:1px solid var(--border) !important;
width:100% !important;
padding:6px 0 !important;
}
.anf-stats > div{padding:3px 10px !important;flex-shrink:0}
/* Actions: volle Breite, horizontal scrollbar */
.anf-actions{
width:100% !important;
overflow-x:auto !important;
-webkit-overflow-scrolling:touch;
flex-wrap:nowrap !important;
padding-bottom:2px !important;
gap:6px !important;
}
.anf-actions .btn{flex-shrink:0 !important}
/* ═══════════════════════════════════════════════════════
OVERFLOW-SCHUTZ FÜR DETAIL-SEITEN AUF MOBILE
═══════════════════════════════════════════════════════ */
/* Detail-Container: nichts darf rechts überlaufen */
.detail-page,
#anfrage-detail-content,
#kunde-detail-content,
#dok-detail-content,
#aufgabe-detail-content,
#lst-detail-content,
#art-detail-content {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Direkte Kinder bekommen max-width Schutz */
.detail-page > *,
#anfrage-detail-content > *,
#kunde-detail-content > *,
#dok-detail-content > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Hero-Karte: kompakter auf Mobile */
.detail-hero {
padding: 12px !important;
overflow: hidden !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Hero Watermark: nicht über Rand, kleiner */
.hero-watermark {
font-size: 180px !important;
left: -50px !important;
opacity: 0.12 !important;
}
/* Anfrage-Header: stack komplett vertikal */
.anf-header-row {
flex-wrap: wrap !important;
gap: 10px !important;
}
.anf-header-row > div:nth-child(2) {
min-width: 0 !important;
width: calc(100% - 60px) !important;
}
/* Stats: 3 Cards full-width, klein */
.anf-stats {
width: 100% !important;
flex-shrink: 1 !important;
border-left: none !important;
border-right: none !important;
border-top: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
padding: 8px 0 !important;
margin-top: 4px !important;
justify-content: space-around !important;
}
.anf-stats > div {
padding: 4px 8px !important;
min-width: 0 !important;
flex: 1 !important;
}
.anf-stats > div > div:first-child {
font-size: 9px !important;
}
.anf-stats > div > div:last-child {
font-size:var(--t-lg) !important;
}
/* Actions: 2x2 oder 2x3 Grid mit klarem Wrap (kein Inline-Grid-Override) */
.anf-actions {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
overflow-x: visible !important;
}
.anf-actions .btn,
.anf-actions .anf-action-btn {
width: 100% !important;
min-width: 0 !important;
padding: 8px 4px !important;
font-size:var(--t-sm) !important;
flex-direction: column !important;
gap: 4px !important;
height: auto !important;
box-sizing: border-box !important;
}
.anf-actions .anf-action-btn span {
font-size:var(--t-sm) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.anf-actions .anf-action-btn span[style*="font-size:20px"],
.anf-actions .anf-action-btn span[style*="font-size:var(--t-xl)"] {
font-size:var(--t-xl) !important;
}
/* Chip-Kacheln: 2 Spalten, sicher in Box */
.anf-chips {
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
}
.anf-chip {
min-width: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 10px !important;
}
.anf-chip > div {
word-break: break-word !important;
max-width: 100% !important;
}
/* Sticky-Save-Bar: nicht überlaufen */
.af-sticky-save {
max-width: 100% !important;
box-sizing: border-box !important;
padding: 10px 12px !important;
}
/* Quick-Action-Bar: scroll horizontal wenn nötig */
.af-quick-actions {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
flex-wrap: nowrap !important;
}
.af-quick-actions > * {
flex-shrink: 0 !important;
}
/* Tabs scrollbar bei Bedarf */
#af-tabs {
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Generic: alle Cards in Detail-Pages mit Overflow-Schutz */
.detail-page .card,
#anfrage-detail-content .card {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Forms: Inputs nicht überlaufen */
.detail-page input,
.detail-page textarea,
.detail-page select,
#anfrage-detail-content input,
#anfrage-detail-content textarea,
#anfrage-detail-content select {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ═══════════════════════════════════════════════════════
FORMS: 2/3-spaltige Rows auf Mobile zu 1 Spalte
═══════════════════════════════════════════════════════ */
.form-row-2,
.form-row-3 {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* Card-Header rules: ersetzt durch robusteres Stacking-Layout oben */
/* Form-Group: Inputs/Textareas mit max-width */
.form-group {
max-width: 100% !important;
box-sizing: border-box !important;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ═══════════════════════════════════════════════════════
BRIEFING-TAB & DETAIL-CARDS — robuste Mobile-Lösung
═══════════════════════════════════════════════════════ */
/* Card-Header: Title oben, Action-Buttons darunter horizontal scrollbar */
.detail-page .card-header,
#anfrage-detail-content .card-header,
#kunde-detail-content .card-header,
#dok-detail-content .card-header {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
/* Action-Buttons-Reihe (das zweite div im card-header): horizontal scrollbar */
.detail-page .card-header > div:nth-child(2),
#anfrage-detail-content .card-header > div:nth-child(2) {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
gap: 6px !important;
padding-bottom: 4px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
scrollbar-width: thin;
/* Hinweis-Schatten rechts, dass scrollbar ist */
background: linear-gradient(to right, transparent calc(100% - 20px), var(--gold-a08));
}
.detail-page .card-header > div:nth-child(2) > *,
#anfrage-detail-content .card-header > div:nth-child(2) > * {
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.detail-page .card-header > div:nth-child(2)::-webkit-scrollbar,
#anfrage-detail-content .card-header > div:nth-child(2)::-webkit-scrollbar {
height: 4px;
}
.detail-page .card-header > div:nth-child(2)::-webkit-scrollbar-thumb,
#anfrage-detail-content .card-header > div:nth-child(2)::-webkit-scrollbar-thumb {
background: var(--gold-brd);
border-radius:var(--r-xs);
}
/* Card-Title: ganze Breite, klein */
.detail-page .card-header > .card-title,
#anfrage-detail-content .card-header > .card-title {
font-size:var(--t-lg) !important;
width: 100% !important;
flex: none !important;
}
/* Card itself: Overflow-Schutz garantiert */
.detail-page .card,
#anfrage-detail-content .card,
#kunde-detail-content .card,
#dok-detail-content .card {
padding: 12px !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
/* Page-Form Input/Textarea: 100% Breite garantiert */
.page-form input,
.page-form select,
.page-form textarea {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Time-Inputs in Hochzeit (kompakt) — dürfen kleiner sein */
.page-form input[type="time"][style*="width:auto"] {
width: auto !important;
min-width: 70px !important;
}
/* form-section-title kompakt */
.form-section-title {
margin: 12px 0 6px !important;
font-size:var(--t-sm) !important;
}
/* Textareas volle Breite */
textarea {
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Tables in Detail-Pages: scrollbar */
.detail-page .tw,
#anfrage-detail-content .tw,
#dok-detail-content .tw {
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* ── Anfrage-Detail Chip-Grid → 2 Spalten ─────── */
.anf-chips{
grid-template-columns:repeat(2,1fr) !important;
gap:6px !important;
}
/* Wert-Chip: volle Breite unten */
.anf-chips > div:last-child{
grid-column:1 / -1 !important;
}
/* ── v7.56: Automationen Mahnung-Tage als 1-Spalter ─── */
/* Greift NUR im Automationen-Setup-Tab, fängt 1fr 1fr 1fr Inputs ab */
#auto-tab-setup [style*="grid-template-columns:1fr 1fr 1fr"]{
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* ── v7.56a: Kalender-Topbar — sekundäre Buttons im Overflow-Menü ── */
/* Wrap-Container per ID versteckt — höhere Specificity, keine Class-Konflikte */
#cal-tb-frei-wrap{ display:none !important }
#cal-tb-extras-wrap{ display:none !important }
#cal-tb-overflow-btn{ display:inline-flex !important }
/* Kalender-Topbar-Layout kompakter */
#cal-topbar-row{
gap:6px !important;
flex-wrap:wrap !important;
}
#cal-topbar-row .btn-sm{
min-height:38px !important;
padding:8px 10px !important;
font-size:var(--t-base) !important;
}
/* ── v7.56: Settings-Subtabs — Dropdown statt horizontal-scroll ── */
#settings-subtabs{ display:none !important }
/* settings-subtabs-mobile: per flat-select ersetzt — display:none in @media (max-width:768px) weiter unten */
#settings-subtabs .sub-email{ opacity:0 !important; pointer-events:none !important; width:0 !important; padding:0 !important; border:none !important; overflow:hidden !important; min-width:0 !important }
}
/* v7.56: Cal-Topbar Overflow-Btn: standardmäßig hidden (Desktop), Mobile sichtbar */
#cal-tb-overflow-btn{ display:none }
#cal-tb-overflow-menu{
position:absolute;
top:calc(100% + 4px);
right:0;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
box-shadow:0 8px 24px rgba(0,0,0,.5);
padding:6px;
min-width:200px;
z-index:var(--z-topbar);
display:none;
}
#cal-tb-overflow-menu.open{ display:block }
#cal-tb-overflow-menu button{
display:flex;
align-items:center;
gap:8px;
width:100%;
padding:10px 12px;
background:transparent;
border:none;
color:var(--text);
font-size:var(--t-md);
text-align:left;
cursor:pointer;
border-radius:var(--r);
}
#cal-tb-overflow-menu button:hover{ background:var(--surface-2) }
#cal-tb-overflow-menu button:active{ background:var(--gold-dim) }
/* v7.56: Settings-Subtabs Mobile-Dropdown standardmäßig hidden (Desktop) */
#settings-subtabs-mobile{
display:none;
margin-bottom:20px;
max-width:900px;
}
#settings-subtabs-mobile select{
width:100%;
padding:11px 14px;
background:var(--surface-2);
border:1px solid var(--border);
border-radius:var(--r);
color:var(--text);
font-size:var(--t-lg);
font-family:var(--font-b);
font-weight:600;
letter-spacing:.5px;
cursor:pointer;
outline:none;
-webkit-appearance:none;
appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a84b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:18px;
padding-right:40px;
}
/* ══════════════════════════════════════════════════════════════
UI/UX OPTIMIERUNG: BUTTON-LAYOUT & HIERARCHIE
══════════════════════════════════════════════════════════════ */
/* 1. EINSTELLUNGEN: Sticky 💾 Speichern-Bar oben */
.settings-save-bar {
position: sticky;
top: 0;
z-index:var(--z-subtab);
background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 90%, transparent 100%);
padding: 12px 0;
margin-bottom: 12px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
}
.settings-save-bar.hidden {
display: none;
}
.settings-save-bar .btn {
min-width: 140px;
}
/* 2. BUTTON-HIERARCHIE */
.btn.btn-primary-lg {
background: var(--gold);
color: var(--black);
min-width: 140px;
padding: 10px 20px;
font-weight: 600;
font-size:var(--t-lg);
border: none;
}
.btn.btn-primary-lg:hover {
background: var(--gold-2);
}
.btn.btn-secondary-normal {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 16px;
font-size:var(--t-md);
}
.btn.btn-secondary-normal:hover {
background: var(--surface-3);
}
.btn.btn-danger {
background: rgba(231,76,60,.1);
color: var(--s-abs);
border: 1px solid rgba(231,76,60,.2);
min-width: 100px;
padding: 8px 16px;
}
.btn.btn-danger:hover {
background: rgba(231,76,60,.2);
}
/* 3. RESPONSIVE: Mobile Button Stack */
@media (max-width: 768px) {
.btn.btn-primary-lg,
.btn.btn-secondary-normal {
width: 100%;
text-align: center;
}
.settings-save-bar {
flex-wrap: wrap;
}
.settings-save-bar .btn {
flex: 1;
min-width: 120px;
}
}
/* 4. UNGESPEICHERTE ÄNDERUNGEN INDICATOR */
.settings-dirty-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--gold);
font-size:var(--t-base);
font-weight: 600;
}
.settings-dirty-indicator::before {
content: '●';
font-size: 8px;
}
/* 5. VISUELLE FEEDBACK */
.btn-flash {
animation: btnFlash 0.5s ease-out;
}
@keyframes btnFlash {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* ══════════════════════════════════════════════════════════════════
PHASE 2: MOBILE RESPONSIVE DESIGN
══════════════════════════════════════════════════════════════════ */
/* 1. MOBILE: Button Stacking */
@media (max-width: 768px) {
/* Dokument-Detail Buttons stacken vertikal */
.dok-button-group {
flex-direction: column;
}
.dok-button-group button,
.dok-button-group .btn {
width: 100%;
text-align: center;
}
/* Mail-Modal: Optimiert für kleine Screens */
#mail-panel > div {
width: 95vw !important;
max-width: 95vw !important;
max-height: 95vh !important;
padding: 0 !important;
}
/* Inputs: Größer für Touch */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea {
font-size: 16px !important; /* Verhindert Mobile-Zoom */
padding: 12px !important;
line-height: 1.5 !important;
}
/* Portal-URL-Eingabe: Auf Mobile stacken (Input über Button) */
.portal-url-row {
flex-direction: column !important;
align-items: stretch !important;
}
.portal-url-row input { width: 100% !important; }
.portal-url-row button { width: 100% !important; }
/* Externe-Dienste-Cards: Button auf Mobile unter den Info-Block stacken */
.service-cards > div {
flex-wrap: wrap !important;
}
.service-cards > div > a,
.service-cards > div > button {
width: 100% !important;
flex-basis: 100% !important;
margin-top: 6px !important;
text-align: center !important;
justify-content: center !important;
}
/* Einstellungen: Reduziertes Padding */
.tab-c {
padding: 12px !important;
}
/* Touch-Targets: Min. 44x44px */
button {
min-height: 44px !important;
min-width: 44px !important;
}
/* Buttons in Einstellungen: Full-width — NUR im Settings-Tab-Container,
sonst zerlegt es Action-Button-Reihen (z.B. Anlagen-Liste, Dokument-Aktionen) */
#view-einstellungen .tab-c .btn-sm,
#view-einstellungen .tab-c .btn-xs {
width: 100%;
margin-bottom: 8px;
}
}
/* 2. EXTRA SMALL: < 480px (Smartphone) */
@media (max-width: 480px) {
/* Mail-Modal: Noch kompakter */
#mail-panel > div {
border-radius: 0 !important;
}
/* Textarea: Reduzierte Höhe */
textarea#mp-body {
min-height: 120px !important;
max-height: 35vh !important;
}
/* Icon-Buttons klein halten */
button i {
margin-right: 4px;
}
/* Tabelle: Scrollen statt brechen */
table {
font-size:var(--t-base);
}
/* Formulare: Single Column */
.form-row-2 {
flex-direction: column !important;
}
.form-row-2 > div {
width: 100% !important;
}
}
/* ══════════════════════════════════════════════════════
CONTENT-MAX-WIDTH — Audit Fix QW1 (v3)
Verhindert überdehnte Layouts auf 1920px+ / 4K.
Lösung: extra Padding auf .view.active selbst —
.view.active bleibt IMMER voll breit → Scroll funktioniert überall.
max() verhindert Engstellen auf kleinen Screens (gibt nie weniger
als den bestehenden --view-pad her).
══════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
/* .view.active = Scroll-Container, volle Breite.
Inhalt wird per Padding auf max. 1560px eingeschnürt.
Startet erst ab 1600px Viewport → kein Einfluss auf 1280px Screens. */
.view.active {
padding-left: max(var(--view-pad), calc((100% - 1560px) / 2));
padding-right: max(var(--view-pad), calc((100% - 1560px) / 2));
}
/* Kalender + Anfragen brauchen volle Breite */
#view-kalender.active,
#view-anfragen.active {
padding-left: var(--view-pad);
padding-right: var(--view-pad);
}
/* #main: kein Padding mehr (war v2-Ansatz, jetzt obsolet) */
#main {
padding-left: 0;
padding-right: 0;
}
}
/* ══════════════════════════════════════════════════════
FORMULAR-MAX-WIDTH — Audit Fix F1
Formulare auf breiten Screens auf lesbare Breite deckeln.
detail-page (1100px) und modal-body (eigene Breite) ausgenommen.
Gilt ab 1440px damit auf kleineren Screens nichts bricht.
══════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
/* Einstellungs-Karten: max-width damit Felder nicht überdehnen */
#view-einstellungen .card { max-width: 860px; }
/* Standalone page-form direkt in einem View (nicht in detail-page/modal) */
.view > .page-form,
.view > .card.page-form { max-width: 860px; }
/* Kunden-Formular in view-anfragen-neu / view-kunde-neu */
#kunde-form,
#anfrage-neu-content .page-form { max-width: 860px; }
}
/* 3. LANDSCAPE MODE: Sehr breite Screens */
@media (min-width: 1400px) {
/* Buttons können nebeneinander */
.dok-button-group {
flex-wrap: nowrap;
}
/* Mehr Platz nutzen */
#mail-panel > div {
width: 680px !important;
}
}
/* ══════════════════════════════════════════════════════
FLUID SCALING — Monitorgrössen-Optimierung
Schriften, Abstände und Layout wachsen proportional
══════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
LAPTOP BREAKPOINT — Audit Fix R6
1280px–1599px: kleiner Laptop / großes Tablet-Landscape
Fluid Scaling startet hier sanft (bisher erst ab 1600px).
══════════════════════════════════════════════════════ */
@media (min-width: 1280px) and (max-width: 1599px) {
:root {
--t-xs: 11px;
--t-sm: 12px;
--t-base: 13px;
--t-md: 14px;
--t-lg: 14px;
}
/* detail-cols: bei 1280px mit Sidebar etwas schmalere rechte Spalte */
.detail-cols { grid-template-columns: 1.8fr 1fr; gap: 16px; }
/* dash-main-grid: bei 1280-1440px 2 Spalten wenn Sidebar offen */
/* g4 hat auto-fit — passt sich selbst an */
/* Etwas kompaktere Cards */
.card { padding: 16px; }
.stat-card { padding: 16px; }
}
/* 1600px+ — Großer Full-HD / kleiner 1440p */
@media (min-width: 1600px) {
:root {
--t-xs: 12px;
--t-sm: 12px;
--t-base: 13px;
--t-md: 14px;
--t-lg: 15px;
--t-xl: 19px;
--t-h: 26px;
--sw: 210px;
}
.card { padding: 20px; }
.stat-card { padding: 20px; }
.stat-v { font-size: 34px; }
#topbar { height: 54px; min-height: 54px; padding: 0 24px; }
}
/* 1920px+ — 1440p / QHD */
@media (min-width: 1920px) {
:root {
--t-xs: 13px;
--t-sm: 13px;
--t-base: 14px;
--t-md: 15px;
--t-lg: 16px;
--t-xl: 21px;
--t-h: 28px;
--r: 7px;
--sw: 225px;
}
.card { padding: 22px; }
.stat-card { padding: 22px; }
.stat-v { font-size: 36px; }
#topbar { height: 56px; min-height: 56px; padding: 0 28px; }
#topbar-title { font-size: 20px; letter-spacing: 2.5px; }
.s-item { padding: 11px 20px; font-size: 15px; }
.badge { font-size: 12px; padding: 4px 10px; }
.btn { padding: 8px 18px; font-size: 13px; }
.form-section-title { font-size: 12px; }
body { font-size: 15px; }
}
/* 2560px+ — 4K / UHD */
@media (min-width: 2560px) {
:root {
--t-xs: 15px;
--t-sm: 15px;
--t-base: 16px;
--t-md: 17px;
--t-lg: 19px;
--t-xl: 24px;
--t-h: 34px;
--r: 8px;
--sw: 240px;
}
.card { padding: 26px; }
.stat-card { padding: 26px; }
.stat-v { font-size: 42px; }
#topbar { height: 62px; min-height: 62px; padding: 0 36px; }
#topbar-title { font-size: 22px; letter-spacing: 3px; }
.s-item { padding: 13px 24px; font-size: 16px; }
.s-logo { height: 70px; }
.badge { font-size: 13px; padding: 5px 12px; }
.btn { padding: 9px 20px; font-size: 14px; }
.btn-sm { padding: 6px 14px; font-size: 12px; }
body { font-size: 17px; }
table td, table th { padding: 12px 14px; }
.anf-card { padding: 16px; }
input, select, textarea { font-size: 15px; padding: 11px 14px; }
}
/* ══════════════════════════════════════════════════════════════════
PHASE 3.4: ACCESSIBILITY IMPROVEMENTS
══════════════════════════════════════════════════════════════════ */
/* 1. ARIA-LABELS FÜR SCREENREADER */
button[aria-label],
a[aria-label] {
/* Keine visuellen Änderungen, nur für Screenreader */
}
/* 2. KEYBOARD FOCUS STATES — v6.11d unified */
button:focus-visible, a:focus-visible {
outline: 2px solid rgba(200,168,75,.85) !important;
outline-offset: 3px !important;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) {
outline: none !important;
}
input:focus,
select:focus,
textarea:focus {
outline: 2px solid var(--gold) !important;
outline-offset: 2px !important;
}
/* 3. FOKUS SICHTBAR */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea
/* Text-Selektion in Brand-Farben */
::selection { background: rgba(200,168,75,0.25); color: var(--text); }
::-moz-selection { background: rgba(200,168,75,0.25); color: var(--text); }
:focus-visible {
outline: 2px solid var(--gold) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 4px rgba(200, 168, 75, 0.1) !important;
}
/* 4. KONTRAST VERBESSERUNG */
.btn-ghost {
/* Besserer Kontrast */
border-width: 1.5px;
}
.btn-ghost:hover {
background: var(--surface-2);
}
/* 5. SKIP-LINK (für Keyboard-Nutzer) */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--gold);
color: var(--black);
padding: 8px 12px;
text-decoration: none;
border-radius: 0 0 4px 0;
font-weight: 600;
z-index: var(--z-lock);
}
.skip-link:focus {
top: 0;
}
/* 6. REDUCEERTE MOTION (für Nutzer mit Bewegungs-Sensitivität) */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.toast-item {
transition: none !important;
}
.btn-flash {
animation: none !important;
}
/* Audit 3D: 3D-Transforms bei prefers-reduced-motion deaktivieren — Audit Fix 3D */
.stat-card, .anf-card {
transform-style: flat !important;
transform: none !important;
perspective: none !important;
}
.stat-card::after, .anf-card::after,
.stat-card::before.tilt-active, .anf-card.tilt-active::before {
display: none !important;
}
}
/* Audit 3D: Touch-Geräte ohne Hover — 3D-Tilt deaktivieren
hover:hover = Gerät unterstützt echtes Hover (Desktop-Maus)
Kein hover:hover = Touch-Gerät → 3D-Transforms sind dort nutzlos + CPU-Last */
@media (hover: none) {
.stat-card, .anf-card {
transform-style: flat !important;
perspective: none !important;
}
.stat-card::after, .anf-card::after { display: none !important; }
.stat-card.tilt-active::before { display: none !important; }
.stat-card { transition: box-shadow var(--tr-base), border-color .2s !important; }
}
/* 7. HIGH CONTRAST MODE */
@media (prefers-contrast: more) {
button {
border-width: 2px;
}
.btn-primary {
text-decoration: underline;
}
.btn-danger {
border: 2px solid currentColor;
}
}
/* 8. DARK MODE SUPPORT */
@media (prefers-color-scheme: dark) {
button:focus-visible {
outline-color: var(--gold);
}
}
/* ══════════════════════════════════════════════════════════════════
MAIL-MODAL: VISUELLE STRUKTURIERUNG
══════════════════════════════════════════════════════════════════ */
/* Mail-Panel Container: Flex-Layout für bessere Separation */
#mail-panel > div {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
height: 100%;
}
/* Mail-Panel Sections: Klare Trennung */
#mail-panel > div > div:nth-child(1) {
/* Header */
padding: 20px 28px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
#mail-panel > div > div:nth-child(2) {
/* Status-Bar (gold) */
padding: 10px 28px;
border-bottom: 2px solid var(--border);
flex-shrink: 0;
}
#mail-panel > div > div:nth-child(3),
#mail-panel > div > div:nth-child(4),
#mail-panel > div > div:nth-child(5) {
/* Form Groups: To, CC, Subject */
padding: 0 28px 12px 28px;
border-bottom: none;
flex-shrink: 0;
}
#mail-panel > div > div:nth-child(3) {
padding-top: 16px;
}
/* Nachricht-Textarea: Scrollable */
#mail-panel textarea#mp-body {
max-height: 280px !important;
overflow-y: auto !important;
flex: 1;
}
/* Anhänge-Section */
#mail-panel > div > div:nth-child(6) {
padding: 16px 28px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
/* Status-Zeile */
#mp-status {
padding: 0 28px 10px 28px;
flex-shrink: 0;
}
/* Buttons-Footer: Sticky Bottom */
#mail-panel > div > div:last-child {
padding: 16px 28px !important;
background: var(--surface-2) !important;
border-top: 1px solid var(--border) !important;
display: flex !important;
gap: 8px !important;
justify-content: flex-end !important;
flex-shrink: 0 !important;
flex-wrap: wrap !important;
}
#mail-panel .btn {
min-width: 100px;
}
#mail-panel .btn-primary {
background: var(--gold) !important;
color: var(--black) !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════════════════════════════
v6.21 — SETTINGS-LAYOUT VERDICHTUNG (Desktop, alle Sub-Tabs)
Globale Regeln für #view-einstellungen damit alle Tabs ein
konsistentes, kompaktes Layout haben. Angreifpunkt: Inputs sind
nicht mehr 100% breit, Section-Header schrumpfen, Form-Groups
bekommen weniger Spacing. Mobile-Regeln (s. unten) bleiben
unberührt — sie greifen unter 768px via separater Media Query.
═══════════════════════════════════════════════════════════════ */
/* Form-Groups: kompakteres Spacing zwischen Feldern */
#view-einstellungen .form-group{
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
/* Felder-Labels in Settings-Karten: CI-konform (10px, uppercase, muted) */
#view-einstellungen .card .form-group > label,
#view-einstellungen .card .form-group > .form-group-label {
font-size: var(--t-xs);
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 0;
}
/* Checkbox- und Radio-Labels behalten ihr eigenes Layout */
#view-einstellungen .card .form-group > label[style*="cursor:pointer"],
#view-einstellungen .card .form-group > label[style*="align-items"] {
text-transform: none;
letter-spacing: normal;
font-size: var(--t-md);
font-weight: 400;
}
/* Hint-Text unter Feldern */
#view-einstellungen .card .form-group > span,
#view-einstellungen .card .form-group > small {
font-size: var(--t-xs);
color: var(--faint);
margin-top: 2px;
}
/* Ältere label-Regel (außerhalb von .card) bleibt erhalten */
#view-einstellungen .form-group label {
font-size: var(--t-sm);
letter-spacing: .2px;
margin-bottom: 3px;
color: var(--muted);
font-weight: 600;
}
/* Number-Inputs: max 160px breit (Inhalt braucht keine volle Breite) */
#view-einstellungen .form-group input[type="number"],
#view-einstellungen input[type="number"].si{
max-width: 160px;
}
/* Auch number/select Inputs OHNE .form-group Wrapper — kommt häufig in den älteren Tabs vor (workflow, cloud, etc.) */
#view-einstellungen input[type="number"][style*="width:100%"],
#view-einstellungen input[type="number"][style*="width: 100%"]{
max-width: 160px !important;
width: 160px !important;
}
/* Selects: nur so breit wie Inhalt + Padding */
#view-einstellungen .form-group select,
#view-einstellungen select.si{
width: auto;
min-width: 140px;
max-width: 320px;
}
/* Selects mit inline width:100% — überschreiben (gilt überall in #view-einstellungen) */
#view-einstellungen select[style*="width:100%"],
#view-einstellungen select[style*="width: 100%"]{
width: auto !important;
min-width: 160px !important;
max-width: 320px !important;
}
/* Time-Inputs (HH:MM) */
#view-einstellungen .form-group input[type="time"]{
max-width: 130px;
font-size: 15px;
font-family: var(--font-b);
font-weight: 600;
color: var(--gold);
text-align: center;
}
/* Inputs allgemein: weniger Padding für kompakteres Look */
#view-einstellungen .form-group input,
#view-einstellungen .form-group select,
#view-einstellungen .form-group textarea{
padding: 6px 10px;
font-size:var(--t-md);
}
/* Section-Header (inline mit font-family:var(--font-h) und letter-spacing) — verkleinern */
#view-einstellungen [style*="font-family:var(--font-h)"][style*="letter-spacing:2px"]{
font-size:var(--t-xs) !important;
letter-spacing: 1.5px !important;
margin-bottom: 8px !important;
}
#view-einstellungen [style*="font-family:var(--font-h)"][style*="letter-spacing:1.5px"]{
font-size:var(--t-xs) !important;
margin-bottom: 6px !important;
}
/* Card-Header: Card-Title kleiner, kompakter */
#view-einstellungen .card-header{
margin-bottom: 10px;
padding-bottom: 8px;
}
#view-einstellungen .card-title{
font-size:var(--t-md);
}
/* Cards in Settings: weniger vertikales Padding */
#view-einstellungen .card.page-form{
padding: 14px 16px;
margin-bottom: 10px;
}
/* Form-Rows (form-row-2, form-row-3): kompakter */
#view-einstellungen .form-row-2,
#view-einstellungen .form-row-3{
gap: 12px;
margin-bottom: 10px;
}
/* Hint-Texte (kleiner grauer Subtext direkt unter Feld) */
#view-einstellungen .form-group .hint,
#view-einstellungen .form-group small,
#view-einstellungen .form-hint{
font-size:var(--t-xs);
color: var(--muted);
margin-top: 2px;
display: block;
line-height: 1.4;
}
/* Inline-Subtexts (` …`) verdichten */
#view-einstellungen .form-group > div[style*="font-size:var(--t-xs)"][style*="color:var(--muted)"],
#view-einstellungen .form-group > div[style*="font-size:var(--t-xs)"][style*="color: var(--muted)"]{
font-size:var(--t-xs) !important;
margin-top: 2px !important;
line-height: 1.4 !important;
}
/* Längere Texte (Email, Adresse, URL) dürfen weiter volle Breite haben */
#view-einstellungen .form-group input[type="text"],
#view-einstellungen .form-group input[type="email"],
#view-einstellungen .form-group input[type="password"],
#view-einstellungen .form-group input[type="url"],
#view-einstellungen .form-group input[type="tel"]{
/* keine max-width — volle Breite OK für Texte */
}
/* Textareas dürfen auch volle Breite */
#view-einstellungen .form-group textarea{
/* keine max-width */
}
/* Checkboxen + Radio: kompakter Abstand */
#view-einstellungen input[type="checkbox"],
#view-einstellungen input[type="radio"]{
margin-right: 6px;
}
/* "💾 Speichern"-Toast / Erfolg-Hinweise (üblicherweise grün, 11px) — kompakter */
#view-einstellungen [id$="-save-info"]{
font-size:var(--t-sm);
margin-top: 4px;
}
/* ───────────────────────────────────────────────────────────────
v6.22 — Preise-Tab spezifisch: Eventart-Tabelle + Sub-Sektionen
kompakter. Greift nur in #set-tab-gage-set. Keine HTML-
Änderungen — alles via CSS.
─────────────────────────────────────────────────────────────── */
/* Eventart-Tabelle: Cells viel kompakter */
#set-tab-gage-set .table-stack td,
#set-tab-gage-set .table-stack th{
padding: 6px 10px !important;
}
#set-tab-gage-set .table-stack th{
font-size:var(--t-xs) !important;
}
#set-tab-gage-set .table-stack td:first-child{
font-size:var(--t-base) !important;
}
/* Number-Inputs in der Eventart-Tabelle: kleiner padding */
#set-tab-gage-set .table-stack input[type="number"]{
padding: 4px 8px !important;
font-size:var(--t-base) !important;
}
/* Sub-Sektionen (Fahrtkosten, Kraftstoff, Abfahrtszeit) — Abstand zwischen ihnen reduzieren */
#set-tab-gage-set [style*="margin-top:14px"][style*="padding-top:12px"][style*="border-top"]{
margin-top: 10px !important;
padding-top: 8px !important;
}
#set-tab-gage-set [style*="margin-top:20px"][style*="padding-top:16px"][style*="border-top"]{
margin-top: 10px !important;
padding-top: 8px !important;
}
/* Card vom Preise-Tab: kompakteres Padding (Card hat keine .page-form Klasse, daher spezifisch) */
#view-einstellungen #set-tab-gage-set > .card{
padding: 12px 14px !important;
}
/* DJ-Beschreibung Textarea: kürzere Standardhöhe */
#set-tab-gage-set #ep-beschreibung{
min-height: 110px !important;
}
/* Card-Header oben in der Card weniger margin-bottom */
#set-tab-gage-set > .card > .card-header{
margin-bottom: 8px !important;
}
/* Erste Erklär-Zeile (z.B. "Definiere Basispreis und Zusatzstundenpreis...") kompakter */
#set-tab-gage-set > .card > p{
font-size:var(--t-sm) !important;
margin-bottom: 10px !important;
}
/* ───────────────────────────────────────────────────────────────
v6.23 — Preise-Tab WIRKLICH kompakt: Container-Breite begrenzt,
Distanz-Stufen schmal, Beispiel-Boxen nicht voll breit.
Behebt: Auf großem Bildschirm zogen sich Inputs und Listen
horizontal auseinander (Delete-Button war 200px breit etc.)
─────────────────────────────────────────────────────────────── */
/* Maximale Breite für den ganzen Preise-Tab — Atemraum, aber begrenzt */
#set-tab-gage-set{
max-width: 920px;
}
/* Distanz-Stufen-Zeilen: schmal halten, Delete-Button feste Breite */
#set-tab-gage-set #abf-stufen-list{
max-width: 320px;
}
#set-tab-gage-set #abf-stufen-list .abf-stufe-row{
grid-template-columns: 22px 90px auto 90px 28px !important;
gap: 6px !important;
}
#set-tab-gage-set #abf-stufen-list .abf-stufe-row .btn-danger{
padding: 2px 6px !important;
font-size:var(--t-lg) !important;
line-height: 1 !important;
width: 28px !important;
min-width: 0 !important;
}
/* Live-Beispiel-Boxen (Fahrtkosten / Kraftstoff / Abfahrtszeit) — nicht voll breit */
/* Variante 1: Moderne Browser via :has() */
#set-tab-gage-set div:has(> #fahrtkosten-beispiel-live),
#set-tab-gage-set div:has(> #abf-beispiel-live),
#set-tab-gage-set div:has(> div > #kraft-beispiel-live),
#set-tab-gage-set div:has(> #gesamtpreis-beispiel-live){
max-width: 720px;
}
/* Variante 2: Fallback via Inline-Style-Match (greift auch ohne :has()) */
#set-tab-gage-set div[style*="background:var(--surface-2)"][style*="padding:6px 10px"][style*="border-radius:var(--r)"],
#set-tab-gage-set div[style*="background:rgba(196,164,90,0.08)"]{
max-width: 720px !important;
}
/* Sonderpreise-Tabelle kompakter — die Container-Begrenzung greift schon, aber Cell-Padding extra */
#set-tab-gage-set #sp-tabelle table th,
#set-tab-gage-set #sp-tabelle table td{
padding: 5px 8px !important;
font-size:var(--t-base) !important;
}
#set-tab-gage-set #sp-tabelle input,
#set-tab-gage-set #sp-tabelle select{
padding: 4px 8px !important;
font-size:var(--t-base) !important;
}
/* "Standard für ..." Buttons direkt nach den Platzhaltern: kompakter */
#set-tab-gage-set [onclick*="resetBeschreibung"]{
font-size:var(--t-xs) !important;
padding: 4px 8px !important;
}
/* Platzhalter-Code-Pills kompakter */
#set-tab-gage-set code[style*="border-radius:var(--r-sm)"]{
font-size:var(--t-xs) !important;
padding: 1px 5px !important;
}
/* ───────────────────────────────────────────────────────────────
v6.31 — Preise-Tab: Sektions-Themen klar visuell abgrenzen
Vorher: Sub-Sektionen (FAHRTKOSTEN, KRAFTSTOFF, ABFAHRTSZEIT,
SONDERPREISE) waren nur mit border-top getrennt → man sah nicht
wo ein Thema anfing. Jetzt: jedes Top-Level-Thema bekommt einen
eigenen surface-Container mit Padding + Border.
─────────────────────────────────────────────────────────────── */
/* Top-Level Sub-Sektionen direkt unter der Card als eigene Blöcke */
#set-tab-gage-set > .card > div[style*="border-top:1px solid var(--border)"]{
background: rgba(0,0,0,0.18) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
padding: 14px 16px !important;
margin-top: 14px !important;
padding-top: 14px !important;
}
/* Distanz-Zuschläge-Block: gesamter Container schmal damit + Stufe Button neben den Eingaben sitzt */
#set-tab-gage-set #abf-stufen-list{
max-width: 320px;
}
#set-tab-gage-set div:has(> #abf-stufen-list){
max-width: 360px;
}
/* Sonderpreise: Delete-Button auf fixe schmale Größe (war unbegrenzt rot über Tabelle gestretcht) */
#set-tab-gage-set #sp-tabelle button.btn-danger,
#set-tab-gage-set #sp-tabelle .btn-danger{
padding: 2px 6px !important;
width: 28px !important;
min-width: 0 !important;
font-size:var(--t-lg) !important;
line-height: 1 !important;
}
/* Sonderpreise: Save-Button auch kompakt halten */
#set-tab-gage-set #sp-tabelle button.btn-success,
#set-tab-gage-set #sp-tabelle .btn-success{
padding: 2px 6px !important;
min-width: 0 !important;
font-size:var(--t-lg) !important;
line-height: 1 !important;
}
/* v6.32: Sonderpreise "+ Neuen Kunden hinzufügen"-Box —
die globale Settings-Regel zwang Selects auf max 320px, dadurch entstand
leerer Platz im Grid-Layout. Hier explizit volle Spaltenbreite zurück. */
#set-tab-gage-set #sp-neu-kunde{
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
#set-tab-gage-set #sp-neu-basis,
#set-tab-gage-set #sp-neu-zustd,
#set-tab-gage-set #sp-neu-stdbase{
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Box selbst füllt jetzt die volle Card-Breite aus — globale 720px-Begrenzung ist via :not(:has) ausgenommen */
#set-tab-gage-set #sp-tabelle ~ div[style*="background:var(--surface-2)"]{
max-width: none !important;
}
/* ═══════════════════════════════════════════════════════════════
v6.24 — Optimierungsschema auf ALLE Settings-Sub-Tabs anwenden
Whitelist-Approach: Editor-Tabs (vorlagen-set, texte-set, email)
bleiben unangetastet wegen Live-Preview/HTML-Editor-Bedarf.
Alle anderen Tabs bekommen die gleichen Verdichtungs-Regeln wie
gage-set in v6.23.
═══════════════════════════════════════════════════════════════ */
/* Container max-width für lesbare Spaltenbreite — gilt für alle Settings-Tabs außer Editoren */
#set-tab-profil,
#set-tab-auftrag,
#set-tab-konto,
#set-tab-workflow,
#set-tab-integrationen,
#set-tab-benachrichtigungen,
#set-tab-cloud,
#set-tab-sicherheit,
#set-tab-ui-effekte,
#set-tab-gage-set,
#set-tab-admin{
max-width: 920px;
}
/* Innere max-width:900px Wrapper aufheben — sonst doppelte Begrenzung */
#set-tab-profil > div[style*="max-width:900px"],
#set-tab-auftrag > div[style*="max-width:900px"],
#set-tab-konto > div[style*="max-width:900px"],
#set-tab-benachrichtigungen > div[style*="max-width:900px"],
/* Cards in allen Settings-Tabs: kompakteres Innen-Padding */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) > div > .card,
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) > .card{
padding: 12px 14px !important;
margin-bottom: 10px !important;
}
/* Card-Header: enger */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) .card-header{
margin-bottom: 8px !important;
padding-bottom: 6px !important;
}
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) .card-title{
font-size:var(--t-md) !important;
}
/* Tabellen in allen Settings-Tabs: kompaktes Cell-Padding */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) table th,
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) table td{
padding: 5px 10px !important;
font-size:var(--t-base) !important;
}
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) table input,
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) table select{
padding: 4px 8px !important;
font-size:var(--t-base) !important;
}
/* Tabellen-Header (TH): klein und uppercase */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) table th{
font-size:var(--t-xs) !important;
letter-spacing: 1px !important;
}
/* Beispiel-/Info-Boxen (typisches Inline-Style-Pattern) auf max 720px begrenzen
v6.32: Sonderpreise Add-New-Box (enthält #sp-neu-kunde) ausgenommen, die soll volle Breite haben */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) div[style*="background:var(--surface-2)"][style*="border-radius:var(--r)"]:not(.card):not(:has(#sp-neu-kunde)){
max-width: 720px !important;
}
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) div[style*="background:rgba(196,164,90,0.08)"]{
max-width: 720px !important;
}
/* Erklär-Texte (12px muted) global kompakter */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) p[style*="font-size:var(--t-base)"][style*="color:var(--muted)"],
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) p[style*="font-size:var(--t-base)"][style*="color: var(--muted)"]{
font-size:var(--t-sm) !important;
margin-bottom: 8px !important;
margin-top: 0 !important;
line-height: 1.5 !important;
}
/* Buttons in Settings: btn-sm und btn-xs kompakter */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) .btn-sm{
padding: 5px 10px !important;
font-size:var(--t-sm) !important;
}
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) .btn-xs{
padding: 4px 8px !important;
font-size:var(--t-xs) !important;
}
/* Form-Row-2 / Form-Row-3 kompakter */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) .form-row-2,
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) .form-row-3{
gap: 12px !important;
margin-bottom: 10px !important;
}
/* Section-Header (wie KRAFTSTOFF, FAHRTKOSTEN, ANZEIGE etc.) — uppercase 10px konsistent */
#view-einstellungen .tab-c:not(#set-tab-vorlagen-set):not(#set-tab-texte-set):not(#set-tab-email) [style*="text-transform:uppercase"][style*="letter-spacing"]{
font-size:var(--t-xs) !important;
margin-top: 12px !important;
margin-bottom: 6px !important;
}
.anf-call-mobile{ display: inline-flex !important; }
#view-kunden .tw table{ font-size: 13.5px; }
#view-kunden .tw table td,
#view-kunden .tw table th{
padding: 11px 12px;
vertical-align: middle;
}
#view-kunden .tw table tbody tr{
transition:background-color var(--tr-fast) ease;
}
#view-kunden .tw table tbody tr:hover{
background-color: rgba(200,168,75,0.05);
}
/* v6.88l: Single-Row Horizontal-Scroll statt Wrap, Schatten am rechten Rand zeigt: hier geht's weiter */
.kd-auftrag-pills-wrap{
position: relative;
margin-bottom: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r);
}
.kd-auftrag-pills-wrap::after{
content: '';
position: absolute;
top: 0; right: 0;
width: 40px; height: 100%;
pointer-events: none;
background: linear-gradient(90deg, transparent 0%, var(--surface) 90%);
border-radius: 0 var(--r) var(--r) 0;
opacity: .8;
}
.kd-auftrag-pills{
display: flex;
flex-wrap: nowrap;
gap: 8px;
padding: 12px 14px;
align-items: center;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--gold-dim) transparent;
}
.kd-auftrag-pills::-webkit-scrollbar{ height: 6px; }
.kd-auftrag-pills::-webkit-scrollbar-track{ background: transparent; }
.kd-auftrag-pills::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 3px; }
.kd-pill{
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 13px;
border-radius:var(--r-xl);
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
font-family: var(--font-b);
font-size:var(--t-base);
font-weight: 600;
cursor: pointer;
transition:transform var(--tr-fast), filter .12s, box-shadow .12s;
white-space: nowrap;
letter-spacing: .2px;
flex-shrink: 0;
}
.kd-pill:hover{
transform: translateY(-1px);
filter: brightness(1.15);
box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}
.kd-pill-dot{
display: inline-block;
width: 9px; height: 9px;
border-radius:var(--r-full);
flex-shrink: 0;
}
body.light .kd-auftrag-pills-wrap::after{
background: linear-gradient(90deg, transparent 0%, var(--surface) 90%);
}
#view-kunden .tw table td,
#view-kunden .tw table th{
padding: 11px 12px;
vertical-align: middle;
}
#view-kunden .tw table tbody tr{
transition:background-color var(--tr-fast) ease;
}
#view-kunden .tw table tbody tr:hover{
background-color: rgba(200,168,75,0.05);
}
/* Action-Icon-Cluster pro Zeile */
.kunden-row-actions{
display: flex;
gap: 6px;
align-items: center;
justify-content: flex-end;
}
.kunden-row-actions .kra-btn{
width: 32px; height: 32px;
border-radius:var(--r);
background: var(--surface-2);
border: 1px solid var(--border);
color: rgba(255,255,255,0.55);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition:background-color var(--tr-fast), color .12s, border-color .12s, transform .12s;
text-decoration: none;
padding: 0;
}
.kunden-row-actions .kra-btn:hover{
background: var(--gold-dim);
color: var(--gold);
border-color: var(--gold);
transform: translateY(-1px);
}
.kunden-row-actions .kra-btn.kra-danger:hover{
background: rgba(231,76,60,0.12);
color: var(--s-abs);
border-color: rgba(231,76,60,0.5);
}
.kunden-row-actions .kra-btn.kra-disabled{
opacity: 0.25;
cursor: not-allowed;
pointer-events: none;
}
/* kunden-row-actions: Touch-Target auf 44×44px (iOS HIG-Minimum) */
@media (hover: none) {
.kunden-row-actions .kra-btn {
width: 44px !important;
height: 44px !important;
}
.kunden-row-actions {
gap: 4px !important;
}
}
body.light .kunden-row-actions .kra-btn{
color: rgba(0,0,0,0.45);
}
@media (max-width: 1100px){
/* Wochentag-Heatmap + Gauge: side-by-side wird zu untereinander auf engen Screens */
}
@media (max-width: 768px) {
/* Heatline an Anfragen-Tabelle dicker für Touch-Auflösung */
#anfragen-content tr.clickable[style*="border-left:4px"]{
border-left-width: 5px !important;
}
/* Umsatz-Gauge: stackt auf Mobile (Gauge oben, Text drunter) */
#dash-umsatz-gauge > div{
flex-direction: column !important;
gap: 12px !important;
padding: 14px 16px !important;
}
#dash-umsatz-gauge svg{
width: 100% !important;
max-width: 240px !important;
height: auto !important;
margin: 0 auto !important;
display: block !important;
}
#dash-umsatz-gauge > div > div:last-child{
text-align: center !important;
}
/* Eventtyp-Donut: SVG mittig, Legende drunter */
#stats-content svg[viewBox="0 0 160 160"]{
margin: 0 auto !important;
display: block !important;
}
#stats-content .card > div[style*="display:flex"][style*="gap:20px"]{
flex-direction: column !important;
gap: 16px !important;
align-items: stretch !important;
}
/* Auslastungs-Heatmap: Scroll-Hint per Schatten am Rand */
#stats-content .card > div[style*="overflow-x:auto"]{
position: relative !important;
-webkit-overflow-scrolling: touch !important;
box-shadow: inset -12px 0 8px -8px rgba(0,0,0,.4);
}
body.light #stats-content .card > div[style*="overflow-x:auto"]{
box-shadow: inset -12px 0 8px -8px rgba(0,0,0,.15);
}
/* Statistiken-View g2 Spalten zu Single-Column */
#stats-content .g2{
grid-template-columns: 1fr !important;
}
}
/* ══════════════════════════════════════════════════════════════════
LAYOUT UTILITIES — für konsistente Finanzen-View (v9.16+)
══════════════════════════════════════════════════════════════════ */
/* Flex Layouts */
.flex-row {
display: flex;
align-items: center;
gap: 8px;
}
.flex-row-wrap {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.flex-end {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
/* Dividers */
.divider-v {
width: 1px;
height: 24px;
background: var(--border-2);
flex-shrink: 0;
}
.label-checkbox {
display: flex;
align-items: center;
gap: 6px;
padding: 0 12px;
cursor: pointer;
user-select: none;
white-space: nowrap;
font-size:var(--t-sm);
color: var(--muted);
}
/* Spacing */
.gap-4 { gap: 4px !important; }
.gap-6 { gap: 6px !important; }
.gap-8 { gap: 8px !important; }
/* Summen-Bar */
.stat-bar {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 12px 20px;
margin-bottom: 12px;
display: flex;
gap: 32px;
align-items: center;
flex-wrap: wrap;
}
.stat-bar-count {
font-size:var(--t-base);
color: var(--muted);
white-space: nowrap;
}
.summen-card-value.gold {
color: var(--gold);
font-size: 22px;
}
/* Table Header Klassen */
.tr-past{opacity:.72}
.tr-past:hover{opacity:1!important}
.th-sortable {
cursor: pointer;
user-select: none;
}
.th-sortable:hover {
color: var(--gold);
}
.th-checkbox {
width: 32px;
}
.th-actions {
text-align: right;
}
.th-checkbox-input {
accent-color: var(--gold);
cursor: pointer;
width: 15px;
height: 15px;
}
/* ── Dashboard: 3-Zonen-Layout (v6.01f) ─────── */
.view-section-label {
font-size:10px;font-weight:700;letter-spacing:1px;
color:var(--muted);text-transform:uppercase;
font-family:var(--font-b);
display:flex;align-items:center;gap:8px;
/* v6.14za29: kompakter — Dashboard Whitespace reduziert */
margin:10px 0 5px;
}
.view-section-label::before {
content:'';flex:1;height:1px;background:var(--border);
}
.view-section-label:first-child,
.view-section-label:first-of-type { margin-top:0; }
/* Dashboard Layout */
.dash-row {
margin-bottom: 8px;
}
.dash-row-tight {
margin-bottom: 10px;
}
.dash-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
align-items: stretch;
}
.dash-stats-grid > div {
display: flex;
flex-direction: column;
}
.dash-stats-grid > div > div {
flex: 1;
}
/* v1.4bj: Dashboard Mobile — Stats-Grid ausblenden, Tab-System aktivieren */
@media (max-width: 768px) {
/* Wochentag-Chart + Gauge auf Mobile verstecken — zu dicht, zu wenig Mehrwert */
/* Mobile-Tab-Leiste einblenden */
#dash-mobile-tabs { display: flex !important; margin-bottom: 0 !important; }
/* Cards standardmäßig versteckt, per Tab ein/ausblenden */
.dash-card { display: none !important; }
.dash-card.dash-tab-active { display: block !important; }
/* Fokus-Card: volle Breite, kein Mindest-Height */
#dash-card-fokus.dash-tab-active,
#dash-card-aufgaben.dash-tab-active,
#dash-card-rechnungen.dash-tab-active { display: block !important; height: auto !important; }
/* dash-main-grid auf Mobile: kein Grid mehr (Cards per Tab) */
.dash-main-grid { display: block !important; }
/* Next-Event Hero: kompakter */
#dash-next-event .next-event-card { padding: 10px 12px !important; }
/* g5 Stats: 2 Spalten auf Mobile */
#dash-stats.g5 { grid-template-columns: repeat(2, 1fr) !important; }
#dash-stats.g5 > .stat-card:last-child { grid-column: 1 / -1 !important; }
}
.dash-main-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 12px;
margin-bottom: 14px;
align-items: start;
}
.dash-card-wrap {
display: flex;
flex-direction: column;
gap: 8px;
}
.card-warn-gold {
border-color: rgba(200,168,75,0.3) !important;
}
.card-warn-red {
border-color: rgba(231,76,60,0.25) !important;
}
/* Equipment View */
/* eq-toolbar removed — migrated to .toolbar (KRIT-1) */
.eq-title {
font-family: var(--font-h);
font-size: 22px;
letter-spacing: 2px;
color: var(--text);
margin: 0;
}
.eq-subtitle {
font-size:var(--t-sm);
color: var(--muted);
margin-top: 2px;
}
.eq-filter-row {
display: flex;
gap: 8px;
align-items: center;
}
/* eq-select removed — migrated to .si (KRIT-1) */
.eq-kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
/* eq-table-card removed — migrated to .card (KRIT-1) */
/* eq-table-wrap removed — migrated to .tw (KRIT-1) */
/* eq-table/th rules removed — migrated to standard table/.th-sortable (KRIT-1) */
/* Vorlagen */
/* tpl-title removed — card-header/card-title pattern used instead (STR-2) */
.tpl-anfrage-row {
margin-bottom: 12px;
}
.tpl-label {
font-size:var(--t-xs);
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
display: block;
margin-bottom: 5px;
}
.tpl-select {
width: 100%;
}
.tpl-text {
background: var(--surface-2);
border-radius: var(--r);
padding: 14px;
font-size:var(--t-md);
color: var(--text);
line-height: 1.7;
white-space: pre-wrap;
max-height: 400px;
overflow-y: auto;
}
.send-panel {
margin-top: 16px;
}
.mail-body-textarea {
min-height: 180px;
}
.mail-send-btn {
margin-top: 10px;
width: 100%;
justify-content: center;
}
/* Generic util */
.ml-auto {
margin-left: auto;
}
/* ══════════════════════════════════════════════════════════════════
UTILITY KLASSEN — Top-Patterns (v9.30+)
══════════════════════════════════════════════════════════════════ */
.mb-0 { margin-bottom: 0 !important; }
.p-10-12 { padding: 10px 12px; }
.flex-1 { flex: 1; }
.label-tiny {
font-size:var(--t-xs);
margin-bottom: 3px;
}
.text-muted-sm {
font-size:var(--t-sm);
color: var(--muted);
}
.text-gold {
color: var(--gold);
}
.text-strong {
font-size:var(--t-md);
font-weight: 600;
color: var(--text);
}
.input-compact {
font-size:var(--t-base);
padding: 6px 8px;
width: 100%;
}
.input-w100 {
width: 100px;
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--r);
padding: 6px 10px;
font-family: var(--font-b);
font-size:var(--t-md);
outline: none;
}
/* ══════════════════════════════════════════════════════════════════
FAB (Floating Action Button) + Sheet
══════════════════════════════════════════════════════════════════ */
#mobile-fab {
display: none; /* nur mobile — wird via @media(max-width:768px) eingeblendet */
position: fixed;
bottom: 24px;
right: 24px;
width: 56px;
height: 56px;
background: var(--gold);
border-radius:var(--r-full);
box-shadow: 0 4px 12px rgba(201,150,90,.4);
cursor: pointer;
z-index:var(--z-modal);
align-items: center;
justify-content: center;
transition:transform var(--tr-base), background .2s;
}
#mobile-fab:active {
transform: scale(0.94);
}
#mobile-fab svg {
width: 28px;
height: 28px;
}
#fab-sheet {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.7);
z-index:var(--z-mob-bg);
align-items: flex-end;
justify-content: center;
padding: 0;
backdrop-filter: blur(2px);
}
#fab-sheet.open {
display: flex;
}
.fab-sheet-card {
background: var(--surface);
border-radius: var(--r) var(--r) 0 0;
width: 100%;
max-width: 500px;
padding: 0;
box-shadow: 0 -4px 24px rgba(0,0,0,.6);
animation: slideUp .2s ease;
padding-bottom: env(safe-area-inset-bottom);
}
.fab-sheet-header {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.fab-sheet-title {
font-family: var(--font-h);
font-size: var(--t-lg);
letter-spacing: 1px;
color: var(--gold);
}
.fab-sheet-close {
font-size: var(--t-h);
line-height: 1;
}
.fab-sheet-body {
padding: 12px;
}
.fab-action {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: var(--r);
cursor: pointer;
margin-bottom: 8px;
background: var(--surface-2);
transition:background var(--tr-mid);
}
.fab-action:last-child {
margin-bottom: 0;
}
.fab-action:active {
background: rgba(200,168,75,0.14);
}
.fab-action-icon {
width: 40px;
height: 40px;
background: rgba(201,150,90,.15);
border-radius:var(--r-full);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 20px;
}
.fab-action-text {
flex: 1;
min-width: 0;
}
.fab-action-title {
font-size: var(--t-lg);
font-weight: 600;
color: var(--text);
}
.fab-action-desc {
font-size: var(--t-sm);
color: var(--muted);
margin-top: 2px;
}
/* ══════════════════════════════════════════════════════════════════
EQUIPMENT KARTEN-LAYOUT (Mobile)
══════════════════════════════════════════════════════════════════ */
/* eq-mobile-only/eq-desktop-only removed — migrated to .mobile-only/.desktop-only (KRIT-1) */
/* ══════════════════════════════════════════════════════════════════
BRIEFING CARD-HEADER (responsive von Anfang an, v9.40)
══════════════════════════════════════════════════════════════════ */
.briefing-card-header {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
margin-bottom: 14px;
}
.briefing-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.briefing-title-row .card-title {
flex: 1;
min-width: 0;
}
.briefing-toggle-icon {
font-size:var(--t-lg);
color: var(--muted);
flex-shrink: 0;
}
.briefing-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.briefing-actions .btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 5px;
}
.briefing-actions .ba-icon {
font-size:var(--t-lg);
line-height: 1;
}
.briefing-actions .ba-label {
font-size: inherit;
}
@media (max-width: 768px) {
/* Desktop-Buttons-Reihe komplett verstecken auf Mobile */
.briefing-actions.desktop-only,
.briefing-card-header .briefing-actions.desktop-only,
.card-header .briefing-actions.desktop-only {
display: none !important;
visibility: hidden !important;
max-height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
/* Mobile-Trigger sichtbar */
.briefing-actions-mobile.mobile-only {
display: flex !important;
}
.briefing-card-header {
overflow: hidden !important;
max-width: 100% !important;
box-sizing: border-box !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
.briefing-title-row .card-title {
font-size:var(--t-md) !important;
}
}
/* ══════════════════════════════════════════════════════════════════
UNIFIED SEARCH-BAR — einheitliches Pattern für alle Listen-Views
══════════════════════════════════════════════════════════════════ */
.search-bar {
background: var(--surface-2);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--r);
padding: 9px 14px;
font-family: var(--font-b);
font-size: var(--t-md);
outline: none;
transition:border var(--tr-fast), background .12s;
width: 100%;
min-width: 0;
box-sizing: border-box;
flex: 1;
}
.search-bar:focus {
border-color: var(--gold);
background: var(--gold-a06);
box-shadow: 0 0 0 2px var(--gold-a08);
}
.search-bar::placeholder {
color: var(--muted);
}
@media (max-width: 768px) {
.search-bar {
width: 100% !important;
flex: 1 1 100% !important;
height: 40px !important;
padding: 8px 14px !important;
}
}
/* Form-Group Highlight wenn Input fokussiert */
.form-group:focus-within > label {
color: var(--gold);
}
.form-group:focus-within > .form-group-label {
color: var(--gold);
}
/* ══════════════════════════════════════════════════════════════════
BUTTON SYSTEM — Hilfklassen (v9.75)
══════════════════════════════════════════════════════════════════ */
/* Volle Breite — für Mobile-Kontexte */
.btn-full { width: 100% !important; justify-content: center !important; }
/* Icon + Text nebeneinander — einheitlicher Gap */
.btn-icon-label { gap: 6px; }
.btn-icon-label .icon { font-size:var(--t-lg); line-height: 1; }
/* Disabled-State einheitlich */
.btn[disabled], .btn:disabled {
opacity: 0.45 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* btn-sm-outline — Variante für sekundäre Aktionen mit Rahmen */
.btn-sm-outline {
padding: 4px 10px;
font-size: var(--t-sm);
background: transparent;
border: 1px solid currentColor;
border-radius: var(--r);
cursor: pointer;
font-family: var(--font-b);
font-weight: 600;
letter-spacing: .4px;
text-transform: uppercase;
transition:all var(--tr-fast);
}
/* Konsistente Icon-Buttons in Toolbars */
.toolbar .btn-icon {
width: 34px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* Verbesserte Touch-Scrollbereiche */
@media (max-width: 768px) {
/* Kalender Grid: Touch-optimiert */
.cal-grid {
touch-action: pan-y pinch-zoom;
}
/* Filter-Pills: horizontale Scroll ohne Seiten-Scroll */
.mob-filters,
.filter-pills {
touch-action: pan-x;
overscroll-behavior-x: contain;
}
/* Tabs: horizontal scrollbar sauber */
.tabs-scroll {
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }
}
/* ══════════════════════════════════════════════════════════════════
LOADING STATES — Konsistent (v9.78)
══════════════════════════════════════════════════════════════════ */
/* v6.14za11: Konsolidierte Skeleton-Loader (Single Source of Truth) */
.skeleton {
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s ease-in-out infinite;
border-radius: var(--r);
display: inline-block;
height: 14px;
min-width: 60px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-text { height: 12px; width: 80%; margin: 4px 0; }
.skeleton-text-sm { height: 10px; width: 50%; }
.skeleton-text-lg { height: 18px; width: 70%; }
.skeleton-circle { width: 32px; height: 32px; border-radius: 50%; min-width:32px }
.skeleton-block { width: 100%; height: 60px; }
/* Skeleton-Row für Listen-Loading */
.skeleton-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border-2);
}
.skeleton-row > * { flex-shrink: 0; }
.skeleton-row > .skeleton-flex { flex: 1 1 auto; flex-shrink: 1; min-width: 0; }
.is-loading::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0.15);
border-radius: inherit;
z-index: 1;
}
/* Puls-Animation für Badge etc. */
@keyframes pulse-soft {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.pulse { animation: pulse-soft 2s ease-in-out infinite; }
/* ╔══════════════════════════════════════════════════════════════════╗
║ UTILITY CLASSES — Inline-Style Replacements (v9.78) ║
╚══════════════════════════════════════════════════════════════════╝ */
/* Farben */
.text-gold { color: var(--gold) !important; }
.text-muted { color: var(--muted) !important; }
.text-faint { color: var(--faint) !important; }
.text-text { color: var(--text) !important; }
.text-success { color: var(--s-best) !important; }
.text-danger { color: var(--s-abs) !important; }
.text-info { color: #4A90D9 !important; }
/* Typografie */
.text-xs { font-size: var(--t-xs); }
.text-sm { font-size: var(--t-sm); }
.text-base { font-size: var(--t-base); }
.text-md { font-size: var(--t-md); }
.text-lg { font-size: var(--t-lg); }
.text-xl { font-size: var(--t-xl); }
.text-h { font-family: var(--font-h); letter-spacing: 1px; }
.text-bold { font-weight: 700; }
.text-600 { font-weight: 600; }
/* Kombinierte häufige Muster */
/* .label-xs → Alias auf field-label (0× im HTML, entfernt v6.09a) */
.label-sm { font-size: var(--t-sm); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.hint-sm { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.caption { font-size: var(--t-sm); color: var(--muted); margin-top: 2px; }
/* Spacing */
/* Layout */
.flex-1 { flex: 1; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.w-full { width: 100%; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Screen-Reader Only */
/* Cursor */
.clickable { cursor: pointer; }
.not-allowed { cursor: not-allowed; opacity: 0.45; }
/* Overflow */
/* ╔══════════════════════════════════════════════════════════════════╗
║ UNIVERSELLES MOBILE-TOOLBAR-SYSTEM (v9.64) ║
║ Einheitliche Struktur für alle Listen-Views ║
╚══════════════════════════════════════════════════════════════════╝
Pattern: Suche (full-width) → Filter-Dropdowns (nebeneinander) → Karten
Gilt für: Events, Kunden, Finanzen, Produkte, Equipment, Aufgaben
*/
/* Einheitlicher Mobile-Filter-Container */
.mob-filters {
display: none; /* Standard: versteckt (desktop) */
}
#af-tabs-mobile.mob-filters {
display: none; /* Horizontal scroll tabs: always hidden on desktop */
}
@media (max-width: 768px) {
#af-tabs-mobile.mob-filters {
display: flex; /* Horizontal scroll on mobile */
}
/* Alle Toolbars vertikal stapeln */
.view .toolbar {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
padding: 8px 0 !important;
}
/* Suche immer volle Breite */
.view .toolbar .search-bar {
width: 100% !important;
order: -1; /* Immer zuerst */
}
/* Mobile-Filter-Container sichtbar machen */
.mob-filters {
display: flex !important;
gap: 8px !important;
width: 100% !important;
}
/* Mobile-Dropdown einheitlich */
.mob-select {
flex: 1;
min-width: 0;
height: 40px;
padding: 8px 10px;
font-size:var(--t-md);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--text);
box-sizing: border-box;
-webkit-appearance: auto;
}
.mob-select:focus {
border-color: var(--gold);
outline: none;
}
/* Desktop-Filter auf Mobile verstecken */
.view .toolbar > .desktop-only {
display: none !important;
}
/* Aktions-Button-Gruppen verstecken (FAB übernimmt) */
.view .toolbar > .flex-row.gap-8,
.view .toolbar > .ml-auto,
.view .toolbar > .flex-row-wrap.gap-6 {
display: none !important;
}
/* Trennlinien verstecken */
.view .toolbar > .divider-v {
display: none !important;
}
/* Quick-Actions + Briefing-Card: volle Breite auf Mobile */
.af-quick-actions {
width: 100% !important;
box-sizing: border-box !important;
}
/* Briefing in detail-cols: volle Breite, kein Grid-Beschnitt */
[data-af-tab="hochzeitsportal"] { display: none; }
body.af-tab-hochzeitsportal [data-af-tab="hochzeitsportal"] { display: block; }
[data-af-tab="briefing"].card {
width: 100% !important;
box-sizing: border-box !important;
min-width: 0 !important;
}
/* detail-cols auf Mobile: 1 Spalte, volle Breite */
.detail-cols {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Anfragen Status-Tabs + Event-Detail-Tabs: auf Mobile verstecken */
.anf-status-tabs-desktop,
#af-tabs {
display: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
BREADCRUMB BAR — sticky unterhalb Topbar, JS-gesteuert (display:none/flex)
══════════════════════════════════════════════════════════════════ */
#breadcrumb-bar {
position: sticky;
top: 50px;
z-index: var(--z-breadcr);
background: rgba(10,10,10,.88);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--border);
padding: 5px 20px;
font-size: 11px;
color: var(--muted);
align-items: center;
gap: 6px;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
}
/* Mobile: Breadcrumb ausblenden — ZURÜCK-Button + Topbar-Title übernehmen Kontext */
@media (max-width: 768px) {
#breadcrumb-bar { display: none !important; }
}
/* ── INFORMATIONSDICHTE-TOGGLE (v6.14g) ────────────────────────────────── */
/* --row-density: compact | normal (default) | comfortable */
:root { --row-pad-v: 10px; --row-pad-h: 12px; }
body[data-density="compact"] { --row-pad-v: 5px; --row-pad-h: 10px; }
body[data-density="comfortable"] { --row-pad-v: 15px; --row-pad-h: 14px; }
td { padding: var(--row-pad-v) var(--row-pad-h); }
/* Dichte-Toggle Buttons */
.density-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 4px 7px; border-radius: 4px; font-size: 11px; cursor: pointer;
border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.4);
background: transparent; transition: all .12s; letter-spacing: .3px;
line-height: 1;
}
.density-btn:hover { border-color: rgba(200,168,75,0.3); color: var(--muted); }
.density-btn.active {
background: var(--gold-a12); border-color: rgba(200,168,75,0.4);
color: var(--gold);
}
/* ── SAVED VIEWS CHIPS (v6.14e) ────────────────────────────────────────── */
/* v6.14za13: .sv-chip durch .sv-tab ersetzt */
/* v6.14za13: .sv-chip:hover entfernt */
/* v6.14za13: .sv-chip-active entfernt */
/* v6.14za13: .sv-chip-x entfernt */
/* v6.14za13: .sv-chip:hover .sv-chip-x entfernt */
/* ── INLINE STATUS-CHIP (v6.14) ────────────────────────────────────────── */
.status-chip-btn { white-space: nowrap; }
.status-chip-btn:hover {
filter: brightness(1.3);
transform: translateY(-1px);
}
.status-chip-btn:active { transform: translateY(0); filter: brightness(1.1); }
/* ── KEYBOARD-NAVIGATION ANFRAGEN-TABELLE (v6.14a) ─────────────────────── */
.anf-kb-row { outline: none; }
.anf-kb-focused {
background: rgba(200,168,75,0.07) !important;
box-shadow: inset 2px 0 0 var(--gold);
}
.anf-kb-focused td { color: var(--text) !important; }
/* Scrollbare Pill-Reihe auf Mobile (Finanzen Typ/Status, viele Optionen) */
.mob-scroll-pills {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
@media (max-width: 768px) {
.mob-scroll-pills {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 2px;
}
.mob-scroll-pills::-webkit-scrollbar { display: none; }
.mob-scroll-pills .filter-btn,
.mob-scroll-pills .btn { flex-shrink: 0; }
}
/* ══════════════════════════════════════════════════════════════════
UNIFIED FILTER-PILLS — einheitliches Pattern für Status/Typ/Kategorie-Filter
══════════════════════════════════════════════════════════════════ */
.filter-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.filter-pills .filter-btn {
flex-shrink: 0;
}
@media (max-width: 768px) {
.filter-pills {
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-x !important;
overscroll-behavior-x: contain !important;
padding-bottom: 6px;
margin: 0;
scrollbar-width: none;
}
.filter-pills::-webkit-scrollbar {
display: none;
}
.filter-pills .filter-btn {
flex-shrink: 0 !important;
white-space: nowrap !important;
touch-action: manipulation !important;
}
/* Typ-Filter Reihe in Finanzen ebenfalls */
#view-finanzen .toolbar > .flex-row-wrap {
touch-action: pan-x !important;
overscroll-behavior-x: contain !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}
#view-finanzen .toolbar > .flex-row-wrap::-webkit-scrollbar {
display: none;
}
}
/* ══════════════════════════════════════════════════════════════════
DETAIL-SEITEN TOPBAR — Einheitliches 3-Col-Grid auf Mobile (v9.68)
× Zurück | 💾 Speichern | ⋯ Aktionen
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* Alle Detail-Hero-Actions auf Mobile → 3-Spalten-Grid */
.detail-hero-actions,
.kunde-hero-actions,
.anf-actions {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
width: 100% !important;
}
.detail-hero-actions .btn,
.kunde-hero-actions .btn {
width: 100% !important;
min-width: 0 !important;
padding: 10px 6px !important;
font-size:var(--t-sm) !important;
white-space: nowrap !important;
text-align: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* 💾 Speichern-Button: immer gold, prominent */
.detail-hero-actions .btn-primary,
.kunde-hero-actions .khero-save {
background: var(--gold) !important;
color: var(--black) !important;
font-weight: 700 !important;
order: 2 !important;
}
/* Zurück-Button immer links */
.detail-hero-actions .btn-ghost:first-child,
.kunde-hero-actions .khero-cancel {
order: 1 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
KARTEN-STANDARD: Einheitliche Name + Betrag Größen (v9.68)
Gilt für alle 5 Karten-Typen
══════════════════════════════════════════════════════════════════ */
/* Einheitlicher Hauptname: var(--t-card)/700 */
.anf-card-name,
.dc-name,
.kc-card-name,
.ac-name,
.eq-card-title {
font-size: var(--t-card, 15px) !important;
font-weight: 700 !important;
color: var(--text) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Einheitlicher Betrag: 17px/font-h/gold */
.anf-card-amount,
.dc-amount,
.ac-card-price,
.eq-restwert-val {
font-family: var(--font-h) !important;
font-size: 17px !important;
color: var(--gold) !important;
white-space: nowrap;
flex-shrink: 0;
}
/* Einheitlicher Hover-Effekt für alle Karten (Desktop) */
@media (hover: hover) {
.anf-card:hover,
.dc-card:hover,
.kc-card:hover,
.ac-card:hover,
.eq-card:hover {
background: var(--surface-2) !important;
border-color: var(--gold-brd) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 0 0 1px var(--gold-a08) !important;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
}
/* Karten: kein Delay bei Touch-Events (300ms click-delay entfernt) */
.anf-card, .dc-card, .kc-card, .ac-card, .eq-card {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
/* ═══ Light-Mode: Karten-Hintergründe ═══ */
body.light .task,
body.light .anf-card,
body.light .dc-card,
body.light .kc-card,
body.light .ac-card,
body.light .eq-card {
background: #FFFFFF;
border-color: rgba(163,137,53,0.15);
}
body.light .anf-card:hover,
body.light .dc-card:hover,
body.light .kc-card:hover,
body.light .ac-card:hover,
body.light .eq-card:hover {
background: #F8F5F0 !important;
}
body.light .anf-card:active,
body.light .dc-card:active,
body.light .kc-card:active,
body.light .ac-card:active,
body.light .eq-card:active {
background: #F0EDE8 !important;
}
/* Einheitlicher :active State für alle Karten */
.anf-card:active,
.dc-card:active,
.kc-card:active,
.ac-card:active,
.eq-card:active {
background: var(--surface-2) !important;
}
/* ══════════════════════════════════════════════════════════════════
GLOBAL MOBILE OVERFLOW PROTECTION (v9.41)
Hartes Sicherheitsnetz: Verhindert dass etwas viewport-Breite überschreitet
══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* Alle direkten Card-Header-Inhalte auf Mobile: scrollbar wenn zu breit */
.card .card-header {
flex-wrap: wrap !important;
gap: 8px !important;
}
.card .card-header > div[style*="display:flex"] {
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin;
}
.card .card-header > div[style*="display:flex"] > * {
flex-shrink: 0;
}
/* Form-Sections in Briefing: alle ihre Form-Rows zu 1 Spalte */
#briefing-content .form-row-2,
#briefing-content .form-row-3 {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* Hochzeitsablauf-Reihen: Label+Time-Input nebeneinander OK lassen */
#briefing-content .form-group > div[style*="justify-content:space-between"] {
gap: 6px !important;
}
#briefing-content input[type="time"][style*="width:auto"] {
min-width: 90px !important;
max-width: 110px !important;
flex-shrink: 0;
}
/* Detail-Page Card Padding */
.detail-page .card,
#anfrage-detail-content .card,
#kunde-detail-content .card,
#dok-detail-content .card {
padding: 12px !important;
overflow: hidden !important;
}
/* alle Inputs/Textareas/Selects in Detail-Pages garantiert in Box */
.detail-page input,
.detail-page textarea,
.detail-page select,
#anfrage-detail-content input,
#anfrage-detail-content textarea,
#anfrage-detail-content select {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Ausnahme: Time-Inputs dürfen kompakt sein */
.detail-page input[type="time"][style*="width:auto"],
#anfrage-detail-content input[type="time"][style*="width:auto"] {
max-width: 110px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
GENERIC MOBILE/DESKTOP VISIBILITY (v9.35)
══════════════════════════════════════════════════════════════════ */
.mobile-only { display: none; }
.desktop-hidden { display: none; } /* Shown only on mobile via @media */
.desktop-only { display: block; }
/* af-more-details: Details-Element im Stammdaten-Tab */
#af-more-details > summary { user-select: none; }
/* Briefing sections */
#briefing-content details > summary { user-select:none; }
#briefing-content details > summary::-webkit-details-marker { display:none; }
#briefing-content details[open] > summary span:first-child { content:'▾'; }
#briefing-content details > div { animation: wf-fadein .2s ease; }
#af-more-details > summary::-webkit-details-marker { display: none; }
#af-more-details[open] > summary #af-more-arrow { transform: rotate(90deg); display: inline-block; transition:transform var(--tr-mid); }
#af-more-arrow { display: inline-block; transition:transform var(--tr-mid); }
/* Stats-Toggle-Row braucht flex statt block */
@media (max-width: 768px) {
.mobile-only { display: block !important; }
button.mobile-only, .mobile-only.is-flex { display: flex !important; }
.desktop-only { display: none !important; }
/* Spezifische Display-Modi für mobile-only Container die kein "block" wollen */
.mobile-only.is-grid { display: grid !important; }
.mobile-only.is-flex { display: flex !important; }
}
/* ══════════════════════════════════════════════════════════════════
KUNDEN KARTEN-LAYOUT (Mobile)
══════════════════════════════════════════════════════════════════ */
.kunden-cards {
flex-direction: column;
gap: 10px;
}
.kc-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--status-color, var(--border));
border-radius: var(--r);
padding: 12px 14px;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
transition:background var(--tr-mid), border-color .15s;
cursor: pointer;
}
.kc-card:active {
background: var(--surface-2);
border-color: var(--gold-brd);
}
.kc-card.is-fav {
border-left: 3px solid var(--gold);
}
.kc-card-row1 {
display: flex;
align-items: flex-start;
gap: 12px;
}
.kc-card-name-block {
flex: 1;
min-width: 0;
}
.kc-card-name {
font-size: 15px;
font-weight: 700;
color: var(--text);
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kc-card-subname {
font-size:var(--t-sm);
color: var(--muted);
margin-top: 2px;
}
.kc-card-meta-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 6px;
}
.kc-card-typ {
font-size: 9px;
padding: 2px 8px;
border-radius: 10px;
font-weight: 700;
letter-spacing: .5px;
}
.kc-card-typ.is-firma {
background: rgba(74,144,217,.15);
color: #4A90D9;
}
.kc-card-typ.is-privat {
background: rgba(39,174,96,.12);
color: var(--s-best);
}
.kc-card-nr {
font-size:var(--t-xs);
color: var(--gold);
font-family: var(--font-h);
letter-spacing: 1px;
}
.kc-card-anfragen {
font-size:var(--t-xs);
color: var(--gold);
font-weight: 600;
}
.kc-card-fav-icon {
color: var(--gold);
font-size:var(--t-xl);
flex-shrink: 0;
}
.kc-card-contact {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 8px;
border-top: 1px solid var(--border-2);
}
.kc-card-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text);
text-decoration: none;
font-size:var(--t-base);
padding: 4px 0;
}
.kc-card-link span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.kc-card-link:active {
color: var(--gold);
}
.kc-empty {
padding: 20px 0;
}
/* ══════════════════════════════════════════════════════════════════
MOBILE FILTER DROPDOWNS — einheitliche Klasse für alle Views
══════════════════════════════════════════════════════════════════ */
.mobile-filter-dropdown:focus {
border-color: var(--gold);
outline: none;
}
/* Mobile-Toolbar: durch .mob-filters System ersetzt — kein separater Block nötig */
/* ══════════════════════════════════════════════════════════════════
DOKUMENTE MOBILE FILTER — Zwei Dropdowns nebeneinander
══════════════════════════════════════════════════════════════════ */
.dok-mobile-filters {
gap: 8px;
width: 100%;
}
.dok-mobile-select {
flex: 1;
min-width: 0;
box-sizing: border-box;
height: 40px;
padding: 8px 10px;
font-size:var(--t-md);
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
color: var(--text);
}
.dok-mobile-select:focus {
border-color: var(--gold);
outline: none;
}
/* ══════════════════════════════════════════════════════════════════
DOKUMENTE KARTEN-LAYOUT (Mobile)
══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
DOKUMENTE KARTEN-LAYOUT (Mobile) — v9.58 Redesign
══════════════════════════════════════════════════════════════════ */
.dok-cards {
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
/* display wird durch .mobile-only / .is-flex gesteuert — kein display hier! */
}
/* Neue saubere Card-Struktur — analog zu anf-card */
.dc-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--dc-color, var(--muted));
border-radius: var(--r);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
transition:background var(--tr-mid);
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.dc-card:active { background: var(--surface-2); }
/* Header: Typ + Nummer links, Status-Badge rechts */
.dc-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.dc-meta {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.dc-typ-label {
font-size:var(--t-xs);
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.8px;
white-space: nowrap;
}
.dc-nummer {
font-family: var(--font-h);
font-size:var(--t-md);
letter-spacing: 0.5px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-status-col {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
max-width: 50%;
}
/* Kundenname — groß und prominent wie bei anf-card */
.dc-name {
font-size: 15px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
/* Event-Titel darunter */
.dc-event-title {
font-size:var(--t-sm);
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Footer: Datum links, Betrag rechts */
.dc-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-top: 8px;
border-top: 1px solid var(--border-2);
flex-wrap: wrap;
}
.dc-dates-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.dc-date {
font-size:var(--t-sm);
color: var(--muted);
white-space: nowrap;
}
.dc-amount {
font-family: var(--font-h);
font-size: 17px;
letter-spacing: 0.5px;
color: var(--gold);
white-space: nowrap;
flex-shrink: 0;
}
/* Signatur-Badges */
.dc-sig-badge {
font-size:var(--t-xs);
font-weight: 700;
padding: 2px 6px;
border-radius:var(--r-sm);
white-space: nowrap;
}
.dc-sig-ok { background: rgba(39,174,96,.2); color: var(--s-best); }
.dc-sig-wait { background: rgba(39,174,96,.15); color: var(--s-best); animation: pulse-dot 1.5s infinite; }
.dc-sig-portal { background: rgba(74,144,217,.15); color: #5DADE2; }
.dc-empty { padding: 20px 0; }
/* ══════════════════════════════════════════════════════════════════
PRODUKTE KARTEN-LAYOUT (Mobile)
══════════════════════════════════════════════════════════════════ */
.art-cards {
flex-direction: column;
gap: 10px;
}
.ac-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--status-color, var(--border));
border-radius: var(--r);
padding: 12px 14px;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
transition:background var(--tr-mid), border-color var(--tr-mid), transform var(--tr-mid), box-shadow var(--tr-mid);
}
.ac-card:active {
background: var(--surface-2);
}
.ac-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
}
.ac-card-name-block {
flex: 1;
min-width: 0;
}
.ac-artnr {
font-size:var(--t-xs);
color: var(--gold);
font-family: var(--font-h);
letter-spacing: 1px;
}
.ac-name {
font-size:var(--t-lg);
font-weight: 700;
color: var(--text);
line-height: 1.3;
margin-top: 2px;
}
.ac-kat {
font-size:var(--t-sm);
color: var(--muted);
margin-top: 3px;
}
.ac-price-block {
text-align: right;
flex-shrink: 0;
}
.ac-price {
font-family: var(--font-h);
font-size:var(--t-xl);
letter-spacing: 0.5px;
color: var(--gold);
}
.ac-einheit {
font-size:var(--t-xs);
color: var(--muted);
margin-top: 1px;
}
.ac-desc {
font-size:var(--t-base);
color: var(--muted);
line-height: 1.4;
padding-top: 8px;
border-top: 1px solid var(--border-2);
}
.ac-empty {
padding: 20px 0;
}
/* ══════════════════════════════════════════════════════════════════
ANFRAGEN/EVENTS KARTEN-LAYOUT (Mobile)
══════════════════════════════════════════════════════════════════ */
.anf-cards {
flex-direction: column;
gap: 10px;
}
.anf-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--status-color, var(--muted));
border-radius: var(--r);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
transition:background var(--tr-mid);
min-width: 0;
overflow: hidden;
box-sizing: border-box;
}
.anf-card:active {
background: var(--surface-2);
}
.anf-card.is-new {
background: rgba(231,76,60,0.04);
}
.anf-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.anf-card-typ {
display: flex;
align-items: center;
gap: 6px;
font-size:var(--t-sm);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
min-width: 0;
flex: 1;
}
.anf-card-typ span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.anf-card-new-badge {
font-size: 9px;
background: var(--s-abs);
color: #fff;
border-radius:var(--r-sm);
padding: 2px 6px;
font-weight: 700;
letter-spacing: 0.5px;
flex-shrink: 0;
}
.anf-card-name {
font-size: 15px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.anf-card-meta {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size:var(--t-sm);
color: var(--muted);
}
.anf-card-date.is-past {
color: var(--faint);
}
.anf-card-ort {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.anf-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-top: 8px;
border-top: 1px solid var(--border-2);
}
.anf-card-amount {
font-family: var(--font-h);
font-size: 17px;
letter-spacing: 0.5px;
color: var(--gold);
white-space: nowrap;
}
.anf-empty {
padding: 20px 0;
}
/* ══════════════════════════════════════════════════════════════════
DOKUMENTE OVERFLOW-FIX (Mobile)
══════════════════════════════════════════════════════════════════ */
.dc-card {
min-width: 0;
overflow: hidden;
}
.dc-kdname,
.dc-event {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.dc-card-customer {
min-width: 0;
}
.dc-card-footer {
flex-wrap: wrap;
min-width: 0;
}
.dc-dates {
flex-wrap: wrap;
min-width: 0;
}
.dc-amount {
white-space: nowrap;
}
@media (max-width: 380px) {
.dc-amount { font-size: 16px; }
.dc-typ-icon { font-size:var(--t-xl); }
}
@media (max-width: 768px) {
.eq-filter-row { flex-wrap: wrap; }
.eq-cards { display: grid; } /* mobile cards visible */
.eq-kpis { grid-template-columns: repeat(2, 1fr) !important; }
}
.eq-cards {
display: none; /* Desktop: versteckt — mobile-only, via @media überschrieben */
grid-template-columns: 1fr;
gap: 10px;
}
.eq-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--status-color, var(--border));
border-radius: var(--r);
padding: 12px 14px;
min-width: 0;
overflow: hidden;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
transition:background var(--tr-mid), border-color .15s;
cursor: pointer;
}
.eq-card:active {
background: var(--surface-2);
border-color: var(--gold-brd);
}
.eq-card.is-ohne {
opacity: 0.65;
}
.eq-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
.eq-card-title {
font-size:var(--t-lg);
font-weight: 700;
color: var(--text);
line-height: 1.3;
flex: 1;
min-width: 0;
}
.eq-card-meta {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
font-size:var(--t-sm);
color: var(--muted);
}
.eq-card-meta .eq-kat-badge {
font-size:var(--t-xs);
padding: 2px 8px;
border-radius:var(--r-xl);
background: var(--surface-3);
border: 1px solid var(--border-2);
color: var(--muted);
}
.eq-card-artnr {
font-family: var(--font-h);
font-size:var(--t-xs);
letter-spacing: 1px;
color: var(--faint);
}
.eq-card-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
padding: 10px 0 6px;
border-top: 1px solid var(--border-2);
}
.eq-card-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.eq-card-stat-label {
font-size: 9px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
}
.eq-card-stat-val {
font-family: var(--font-h);
font-size:var(--t-lg);
letter-spacing: 0.5px;
color: var(--text);
}
.eq-card-stat-val.is-rest-good { color: var(--s-best); }
.eq-card-stat-val.is-rest-mid { color: #E67E22; }
.eq-card-stat-val.is-rest-bad { color: var(--s-abs); }
.eq-card-stat-val.is-faint { color: var(--faint); font-family: var(--font-b); font-size:var(--t-md); }
.eq-card-bar {
height: 4px;
background: var(--border-2);
border-radius:var(--r-xs);
overflow: hidden;
}
.eq-card-bar-fill {
height: 100%;
border-radius:var(--r-xs);
transition: width .3s;
}
.eq-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding-top: 4px;
}
.eq-card-empty {
text-align: center;
padding: 40px 20px;
color: var(--muted);
font-size:var(--t-md);
}
/* Kalender View */
/* ╔══════════════════════════════════════════════════════════════════╗
║ KALENDER — MOBILE LAYOUT (v9.74) ║
╚══════════════════════════════════════════════════════════════════╝ */
@media (max-width: 768px) {
/* Topbar: Navigation + Monat in einer Zeile, Aktionen verstecken */
#view-kalender.active {
padding: 8px 10px !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
}
.cal-topbar {
flex-wrap: wrap !important;
gap: 8px !important;
margin-bottom: 8px !important;
}
.cal-topbar-left {
flex: 1 !important;
gap: 6px !important;
}
.cal-topbar-left .btn {
min-height: 40px !important;
padding: 8px 12px !important;
font-size: 16px !important;
font-weight: 700 !important;
}
.cal-month-display {
font-size: 16px !important;
flex: 1 !important;
text-align: center !important;
}
/* Frei?-Button auf Mobile verstecken (im Overflow-Menü) */
#cal-tb-frei-wrap {
display: none !important;
}
/* Desktop-Extras verstecken */
.cal-extras-wrap {
display: none !important;
}
/* Overflow-Button: immer sichtbar */
.cal-overflow-btn {
display: flex !important;
min-height: 40px !important;
}
/* + Termin: kompakter */
.cal-topbar-right .btn-primary {
padding: 8px 12px !important;
font-size:var(--t-sm) !important;
min-height: 40px !important;
}
/* Filter-Bar: Dropdown statt Buttons */
.cal-filter-bar {
margin-bottom: 8px !important;
gap: 6px !important;
}
.cal-filter-label {
display: none !important; /* Platz sparen */
}
.cal-filter-btn {
flex: 1 !important;
min-height: 36px !important;
text-align: center !important;
justify-content: center !important;
border-radius: var(--r) !important;
font-size:var(--t-sm) !important;
padding: 6px 8px !important;
}
/* Auslastungs-Bar: kompakter */
.cal-auslastung-row {
margin-bottom: 6px !important;
font-size:var(--t-sm) !important;
}
/* Layout: Sidebar UNTER den Kalender */
.cal-layout {
grid-template-columns: 1fr !important;
gap: 12px !important;
flex: none !important;
min-height: 0 !important;
}
/* Kalender-Grid: volle Breite */
.cal-main-col,
.cal-month-wrap {
min-height: 0 !important;
width: 100% !important;
}
.cal-grid {
gap: 1px !important;
}
/* Tages-Zellen: kleiner auf Mobile */
.cal-day {
min-height: 52px !important;
padding: 3px !important;
font-size:var(--t-sm) !important;
}
.cal-day-num {
font-size:var(--t-sm) !important;
margin-bottom: 2px !important;
}
/* Events in Tages-Zellen: sehr kompakt */
.cal-event {
font-size: 9px !important;
padding: 1px 3px !important;
border-radius:var(--r-xs) !important;
line-height: 1.3 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* Wochentag-Header */
.cal-weekday {
font-size: 9px !important;
padding: 3px 2px !important;
letter-spacing: 0.5px !important;
}
/* Sidebar: nach unten, kompakter */
.cal-sidebar-wrap {
overflow-y: visible !important;
gap: 8px !important;
}
.cal-card-tight {
padding: 10px !important;
}
/* Legende: horizontal auf Mobile */
.cal-legend-list {
flex-direction: row !important;
flex-wrap: wrap !important;
gap: 8px 16px !important;
}
}
/* Sehr kleine Displays: Wochentage als 1 Buchstabe */
@media (max-width: 380px) {
.cal-weekday-label {
display: none !important;
}
.cal-weekday-short {
display: inline !important;
}
.cal-day {
min-height: 44px !important;
}
.cal-day-num {
font-size:var(--t-xs) !important;
}
}
.cal-topbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
flex-shrink: 0;
}
.cal-topbar-left {
display: flex;
align-items: center;
gap: 8px;
}
.cal-month-display {
font-family: var(--font-h);
font-size:var(--t-xl);
letter-spacing: 2px;
}
.cal-topbar-right {
display: flex;
gap: 6px;
align-items: center;
position: relative;
}
.cal-overflow-btn {
font-size:var(--t-xl);
line-height: 1;
padding: 6px 10px;
}
.cal-extras-wrap {
display: inline-flex;
gap: 6px;
}
.cal-auslastung-row {
flex-shrink: 0;
margin-bottom: 10px;
}
.cal-filter-label {
font-size:var(--t-xs);
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 700;
margin-right: 4px;
}
.cal-layout {
display: grid;
grid-template-columns: 1fr 220px;
gap: 16px;
flex: 1;
min-height: 0;
}
.cal-main-col,
.cal-month-wrap {
display: flex;
flex-direction: column;
min-height: 0;
}
.cal-month-wrap {
flex: 1;
}
.cal-sidebar-wrap {
display: flex;
flex-direction: column;
gap: 12px;
overflow-y: auto;
}
.cal-card-tight {
padding: 12px;
}
.cal-section-label {
font-size:var(--t-xs);
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-bottom: 10px;
}
/* Legende */
.cal-legend-card {
padding: 8px 10px;
background: var(--surface-2);
border-radius: var(--r);
}
.cal-legend-list {
display: flex;
flex-direction: column;
gap: 4px;
font-size:var(--t-xs);
}
.cal-legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.cal-legend-dot {
width: 10px;
height: 10px;
border-radius:var(--r-sm);
flex-shrink: 0;
}
.cal-legend-dot.dot-best {
background: rgba(39,174,96,.3);
border-left: 2px solid var(--s-best);
}
.cal-legend-dot.dot-anf {
background: rgba(74,144,217,.2);
border-left: 2px solid #4A90D9;
}
.cal-legend-dot.dot-abs {
background: rgba(231,76,60,.2);
border-left: 2px solid var(--s-abs);
}
.cal-legend-dot.dot-feiertag {
background: rgba(231,76,60,.15);
border-left: 2px solid var(--s-abs);
}
.cal-legend-dot.dot-ferien {
background: rgba(74,144,217,.08);
position: relative;
}
.cal-legend-dot.dot-ferien::after {
content: '';
position: absolute;
top: 1px;
right: 1px;
width: 4px;
height: 4px;
border-radius:var(--r-full);
background: rgba(74,144,217,0.7);
}
.cal-legend-bottom {
margin-top: 8px;
flex-shrink: 0;
}
.cal-overflow-suffix {
color: var(--muted);
font-size:var(--t-sm);
margin-left: auto;
}
.dok-detail-fill {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
/* Mobile: horizontal scrollbar */
.cal-day.past{opacity:.55}.cal-day.past.has-events{opacity:.75}.cal-day.past.today{opacity:1}
/* ─────────────────────────────────────────── */
/* ── Skeleton-Loading (v6.01i) ───────────────── */
@keyframes bpm-shimmer {
0% { background-position: -600px 0 }
100% { background-position: 600px 0 }
}
.sk-row {
background: linear-gradient(90deg,
var(--surface-2) 0%, var(--surface-3) 40%, var(--surface-2) 80%);
background-size: 600px 100%;
animation: bpm-shimmer 1.4s ease-in-out infinite;
border-radius: var(--r-sm);
}
.sk-line { height:12px; border-radius:var(--r-sm); margin:2px 0 }
.sk-line-sm { height:10px; width:60%; border-radius:var(--r-sm) }
.sk-line-xs { height: 8px; width:40%; border-radius:var(--r-sm) }
.sk-tr td { padding:12px !important; }
.sk-card { background:var(--surface);border:1px solid var(--border);
border-radius:var(--r);padding:12px;margin-bottom:8px }
/* ── Button-Shorthands Runde 2 (v6.01v) ─────── */
/* .btn-ss = btn btn-secondary btn-sm (61x) */
.btn-ss{padding:6px 12px;font-size:var(--t-sm);min-height:32px;white-space:nowrap;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;font:600 var(--t-sm) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-ss:hover{border-color:var(--gold);color:var(--gold)}
/* .btn-sx = btn btn-secondary btn-xs (38x) */
.btn-sx{padding:4px 10px;font-size:var(--t-xs);min-height:28px;white-space:nowrap;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;font:600 var(--t-xs) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-sx:hover{border-color:var(--gold);color:var(--gold)}
/* .btn-px = btn btn-primary btn-xs (13x) */
.btn-px{padding:4px 10px;font-size:var(--t-xs);min-height:28px;white-space:nowrap;background:var(--gold);color:var(--black);border:1px solid transparent;border-radius:var(--r);cursor:pointer;font:600 var(--t-xs) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-px:hover{background:var(--gold-2)}
/* .btn-dx = btn btn-danger btn-xs (12x) */
.btn-dx{padding:4px 10px;font-size:var(--t-xs);min-height:28px;white-space:nowrap;background:rgba(231,76,60,.1);color:var(--s-abs);border:1px solid rgba(231,76,60,.2);border-radius:var(--r);cursor:pointer;font:600 var(--t-xs) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-dx:hover{background:rgba(231,76,60,.2)}
/* .btn-ds = btn btn-danger btn-sm (9x) */
.btn-ds{padding:6px 12px;font-size:var(--t-sm);min-height:32px;white-space:nowrap;background:rgba(231,76,60,.1);color:var(--s-abs);border:1px solid rgba(231,76,60,.2);border-radius:var(--r);cursor:pointer;font:600 var(--t-sm) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-ds:hover{background:rgba(231,76,60,.2)}
/* Mobile touch targets */
/* ── Button-Shorthand-Aliase (v6.01u) ───────── */
/* .btn-gx = btn btn-ghost btn-xs (81x most used) */
.btn-gx{padding:4px 10px;font-size:var(--t-xs);min-height:28px;white-space:nowrap;background:transparent;color:var(--muted);border:1px solid var(--border-2);border-radius:var(--r);cursor:pointer;font:600 var(--t-xs) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-gx:hover{color:var(--text);border-color:var(--border)}
/* .btn-bx = btn-xs primary-ghost variant (goldene Border, fällt auf als Action-Button) */
.btn-bx{padding:4px 10px;font-size:var(--t-xs);min-height:28px;white-space:nowrap;background:transparent;color:var(--gold);border:1px solid var(--gold-brd);border-radius:var(--r);cursor:pointer;font:600 var(--t-xs) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-bx:hover{color:var(--gold-2);border-color:var(--gold);background:var(--gold-dim)}
/* .btn-gs = btn btn-ghost btn-sm (74x) */
.btn-gs{padding:6px 12px;font-size:var(--t-sm);min-height:32px;white-space:nowrap;background:transparent;color:var(--muted);border:1px solid var(--border-2);border-radius:var(--r);cursor:pointer;font:600 var(--t-sm) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-gs:hover{color:var(--text);border-color:var(--border)}
/* .btn-ps = btn btn-primary btn-sm (62x) */
.btn-ps{padding:6px 12px;font-size:var(--t-sm);min-height:32px;white-space:nowrap;background:var(--gold);color:var(--black);border:1px solid transparent;border-radius:var(--r);cursor:pointer;font:600 var(--t-sm) var(--font-b);text-transform:uppercase;letter-spacing:.4px;transition:all var(--tr-fast)}
.btn-ps:hover{background:var(--gold-2)}
/* Mobile touch targets */
/* ── Tastatur-Fokus (Accessibility v6.01h) ───── */
.s-item:focus-visible,
.s-acc-head:focus-visible {
outline: 2px solid var(--gold);
outline-offset: -2px;
border-radius: var(--r-sm);
}
.tab:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* Globaler :focus-visible und :focus:not(:focus-visible) — bereits in Zeile ~5113 definiert */
/* ── Utility-Klassen aus Top-10 Inline-Patterns (v6.01e) ─────── */
.surface-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.flex-1-min0{flex:1;min-width:0}
/* ── Formular-Labels — Canonical (field-label-block/top = Aliase) ── */
.field-label,.field-label-block,.field-label-top{font-size:var(--t-xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px}
.checkbox-gold{accent-color:var(--gold);width:14px;height:14px}
.t-hint{font-size:10px;color:var(--muted);margin-top:4px}
.row-click{display:flex;align-items:center;gap:12px;cursor:pointer}
/* ─────────────────────────────────────────── */
@keyframes pfPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
.muss-scroll::-webkit-scrollbar{width:5px}
.muss-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:3px}
.muss-scroll::-webkit-scrollbar-thumb{background:rgba(200,168,75,0.4);border-radius:3px}
.muss-scroll::-webkit-scrollbar-thumb:hover{background:rgba(200,168,75,0.7)}
.muss-scroll{scrollbar-width:thin;scrollbar-color:rgba(200,168,75,0.4) rgba(255,255,255,0.03)}
/* ── anf-actions: auf Mobile im Hero dargestellt ── */
@media (max-width: 768px) {
.anf-actions { display: none !important; }
/* v1.4bi: Float-Bar wird dynamisch per JS erstellt */
/* v1.7l: komplett ausgeblendet — redundant zu Hero-Quick-Actions, Save ist oben */
#anf-float-bar {
display: none !important;
}
#anf-mob-more-sheet .btn {
justify-content: center !important;
text-align: center !important;
}
#anf-float-bar .btn,
#anf-float-bar .anf-action-btn {
font-size: 11px !important;
padding: 8px 4px !important;
min-height: 44px !important;
height: auto !important;
flex-direction: column !important;
gap: 3px !important;
width: 100% !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#anf-float-bar .anf-kennenlern-btn {
grid-column: 1 / -1 !important;
flex: 1 0 100% !important;
background: var(--c-whatsapp) !important;
color: #fff !important;
border-color: var(--c-whatsapp-brd) !important;
flex-direction: row !important;
gap: 6px !important;
font-size: 11px !important;
}
/* v6.14zy: Float-Bar Save-Button-Override entfernt — Auto-Save übernimmt */
/* Chips kompakter */
.anf-chip { padding: 8px !important; }
.anf-chip > div:first-child { font-size: 9px !important; }
}
/* ── Utility-Klassen Runde 2 (v6.01k) ───────── */
.checkbox-gold-lg{width:18px;height:18px;accent-color:var(--gold);cursor:pointer}
.checkbox-gold-sm{accent-color:var(--gold);width:14px;height:14px;flex-shrink:0}
.checkbox-gold-15{accent-color:var(--gold);width:15px;height:15px}
.icon-16{width:16px;height:16px;cursor:pointer}
.txt-12-flex{font-size:12px;color:var(--text);flex:1}
.txt-12-muted-mb{font-size:12px;color:var(--muted);margin-bottom:14px}
.td-pad{padding:10px 12px;font-size:13px}
/* ── Utility-Klassen Runde 3 (v6.01l) ───────── */
.row-click-10{display:flex;align-items:center;gap:10px;cursor:pointer}
.row-click-sm{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px}
.row-click-md{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.flex-wrap-8{display:flex;gap:8px;flex-wrap:wrap}
.checkbox-gold-14{accent-color:var(--gold);width:14px;height:14px}
.icon-24-center{font-size:24px;width:40px;text-align:center}
.flex-1-auto{flex:1 1 auto;min-width:0;text-transform:none}
.card-desc{font-size:11.5px;color:var(--muted);line-height:1.4;text-transform:none;font-weight:400;letter-spacing:0}
.grid-2-10{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.t-10-muted{font-size:10px;color:var(--muted)}
.surface-box-flex{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--card-pad);display:flex;align-items:center;gap:12px}
/* ── Utility-Klassen Runde 4 (v6.01m) ───────── */
.row-click-surface{display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 10px;background:var(--surface-2);border-radius:var(--r);font-size:12px;user-select:none}
.input-full{width:100%;padding:8px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px;outline:none}
.input-70{width:70px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:6px 10px;font-family:var(--font-b);font-size:13px;outline:none}
.input-130{width:130px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:6px 10px;font-family:var(--font-b);font-size:13px;outline:none}
.icon-20-cell{font-size:20px;line-height:1;width:28px;flex-shrink:0;text-align:center;text-transform:none}
.t-success-hint{font-size:11px;color:var(--s-best);margin-top:4px}
.card-name{font-size:13px;font-weight:600;color:var(--text);letter-spacing:.2px;margin-bottom:2px;text-transform:none}
.t-muted-meta{font-size:10px;color:var(--muted);font-weight:400;margin-left:6px}
.flex-gap-6{display:flex;align-items:center;gap:6px}
.flex-gap-10{display:flex;gap:10px;align-items:center}
.flex-gap-8{display:flex;gap:8px}
.row-bordered{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--border);text-transform:none}
.tab-pill{flex-shrink:0;padding:10px 14px;font-size:11px;font-weight:600;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;font-family:var(--font-b)}
.th-label{text-align:center;padding:7px 8px;font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--muted);border-bottom:1px solid var(--border);text-transform:uppercase}
/* ── Utility-Klassen Runde 5 (v6.01n) ───────── */
/* btn-ghost-action → asl-btn (v6.01u, identisch) */
.t-15-dark{font-size:15px;color:#222}
.t-sm-muted-3{font-size:11px;color:var(--muted);margin-top:3px}
.table-pdf{border-collapse:collapse;font-family:Arial,sans-serif}
.td-center{padding:6px 8px;border-bottom:1px solid var(--border);text-align:center}
.checkbox-gold-16{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0}
.t-gold-bold{color:var(--gold);font-weight:700}
/* .flex-between bereits in Haupt-CSS definiert (Zeile 767) */
/* ── Utility-Klassen Runde 6 (v6.01o) ───────── */
.flex-wrap-14{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.input-inline{font-size:12px;padding:5px 8px;width:100%}
.surface-dark{background:rgba(0,0,0,0.18);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
/* .field-label-block → konsolidiert in .field-label (v6.09a) */
.checkbox-gold-16b{accent-color:var(--gold);width:16px;height:16px}
.menu-item-btn{display:block;width:100%;text-align:left;padding:8px 14px;background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;font-family:var(--font-b);font-weight:600}
.surface-box-16{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.t-sm-muted-4{font-size:11px;color:var(--muted);margin-top:4px}
.section-label-gold{font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.flex-col-6{display:flex;flex-direction:column;gap:6px}
.grid-2-12{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.table-full{width:100%;border-collapse:collapse}
.flex-between-start{display:flex;justify-content:space-between;align-items:flex-start}
.input-full-sm{width:100%;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px}
.t-10-mb{font-size:10px;margin-bottom:4px}
/* .field-label-top → konsolidiert in .field-label (v6.09a) */
.t-10-success{font-size:10px;color:var(--s-best)}
.t-muted-400{font-weight:400;color:var(--muted)}
.t-10-faint-mt{font-size:10px;color:var(--faint);margin-top:4px}
/* ── Utility-Klassen Runde 7 (v6.01p) ───────── */
.section-title-h{font-family:var(--font-h);font-size:14px;letter-spacing:1px;color:var(--text);margin-bottom:12px}
.t-right-muted{text-align:right;font-size:12px;color:var(--muted)}
.stat-val-gold{color:var(--gold);font-family:var(--font-b);font-size:16px;display:block}
.t-sm-muted-mb10{font-size:11px;color:var(--muted);margin-bottom:10px}
.flex-gap-6b{display:flex;gap:6px}
.t-12-bold-text{font-size:12px;font-weight:600;color:var(--text)}
.t-12-bold{font-size:12px;font-weight:600}
.flex-col-8{display:flex;flex-direction:column;gap:8px}
.chip-wrap{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.row-click-11{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11px}
.icon-14{width:14px;height:14px}
.t-16-bold{font-size:16px;font-weight:700}
.w-full-box{width:100%;box-sizing:border-box}
.t-10-faint{font-size:10px;color:var(--faint)}
.flex-center-10{display:flex;align-items:center;gap:10px}
/* ── Settings: Flat-Select Mobile (v6.01q) ─── */
#settings-flat-select { display: none }
@media (max-width: 768px) {
/* Alte 2-Level-Navigation ausblenden */
#settings-maintabs-mobile { display: none !important; }
#settings-subtabs-mobile { display: none !important; }
/* Neues Flat-Select einblenden */
#settings-flat-select {
display: block;
width: 100%;
margin-bottom: 14px;
max-width: 900px;
}
}
/* ── Utility-Klassen Runde 8 (v6.01r) ───────── */
.strength-bar{flex:1;background:rgba(255,255,255,.06);transition:background-color .2s}
.t-10-faint-mt2{font-size:10px;color:var(--faint);margin-top:2px}
.t-12-muted-mb16{font-size:12px;color:var(--muted);margin-bottom:16px}
.t-12-muted-mt3{font-size:12px;color:var(--muted);margin-top:3px}
.select-h32{width:100%;height:32px;border:1px solid var(--border);border-radius:var(--r);cursor:pointer}
.flex-col-3{display:flex;flex-direction:column;gap:3px}
.th-left{text-align:left;padding:9px 12px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border)}
.section-divider{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.input-110{width:110px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:6px 10px;font-size:13px}
.input-full-b{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:8px 10px;font-family:var(--font-b);font-size:12px;outline:none}
.flex-wrap-center-8{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.border-top-14{border-top:1px solid var(--border);padding-top:14px}
.t-12-muted-mb10{font-size:12px;color:var(--muted);margin-bottom:10px}
.t-13-mb6{font-size:13px;margin-bottom:6px}
.t-11-muted-mb12{font-size:11px;color:var(--muted);margin-bottom:12px}
.t-11-muted-b{color:var(--muted);font-size:11px}
.t-13-text-b{font-size:13px;color:var(--text)}
.t-10-muted-mt3{font-size:10px;color:var(--muted);margin-top:3px}
.t-10-faint-mt1{font-size:10px;color:var(--faint);margin-top:1px}
.title-gold-h{font-family:var(--font-h);font-size:14px;color:var(--gold)}
.t-13-bold-text{font-size:13px;font-weight:700;color:var(--text)}
.flex-center-8{display:flex;align-items:center;gap:8px}
.t-muted-700{color:var(--muted);font-weight:700}
.t-9-muted{font-size:9px;color:var(--muted);letter-spacing:.5px}
/* ── Utility-Klassen Runde 9 (v6.02h) ───────── */
.tag-gold-sm{background:var(--surface-2);padding:2px 6px;border-radius:var(--r-sm);color:var(--gold);margin:0 3px}
/* .field-label-upper → entfernt (0× verwendet, v6.09a) */
.input-s2-full{width:100%;box-sizing:border-box;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px;padding:6px 10px;outline:none}
.stat-num-h{font-size:28px;font-weight:700;font-family:var(--font-h);color:var(--text);line-height:1}
.t-f10-upper{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:6px}
.flex-between-line{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.flex-bold-6{font-size:11px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.input-s1-w100{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:8px 10px;outline:none;font-family:var(--font-b);font-size:12px;box-sizing:border-box}
.progress-track{height:6px;background:var(--surface-3);border-radius:3px;margin-bottom:4px;overflow:hidden}
.dropdown-abs{display:none;position:absolute;z-index:var(--z-subtab);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.t-10-muted-upper-b{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:15px}
.t-10-muted-600-mb3{font-size:10px;color:var(--muted);font-weight:600;display:block;margin-bottom:3px}
.t-10-muted-mb5{font-size:10px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:5px}
.row-divider-10{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.t-gold-label{font-family:var(--font-b);font-size:10px;letter-spacing:0.5px;color:var(--gold);margin-bottom:4px}
.t-13-body{font-size:13px;line-height:1.7;color:var(--text);min-height:80px;padding:8px 4px}
.input-s2-flex{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:6px 8px;font-size:11px;outline:none}
/* ── Utility-Klassen Runde 10 (v6.02i) ──────── */
.t-12-muted-upper{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:4px}
.input-s1-sm{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:6px 8px;font-size:12px;outline:none;font-family:var(--font-b);box-sizing:border-box}
.input-s3-full{width:100%;box-sizing:border-box;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px;padding:6px 10px;outline:none;font-family:var(--font-b)}
.input-s2-padded{width:100%;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px;outline:none}
.t-10-upper-ls15{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.t-10-upper-ls1-6{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.input-s2-9p{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:8px 10px;outline:none;font-size:12px;font-family:var(--font-b);box-sizing:border-box}
.row-click-muted{display:flex;align-items:center;gap:5px;cursor:pointer;font-family:var(--font-b);font-size:11px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400}
.t-9-divider{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-2)}
.gold-chip{display:flex;align-items:center;gap:4px;background:var(--gold-dim);border:1px solid var(--gold-brd);border-radius:var(--r-sm);padding:3px 8px;font-size:12px;color:var(--gold)}
.input-s2-flex-btn{flex:1;padding:6px;font-size:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);cursor:pointer}
.tab-pill-muted{padding:5px 12px 3px;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
.input-s2-sm{width:100%;padding:6px 8px;font-size:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r)}
.t-10-upper-ls8{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:5px}
.surface-center{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--card-pad);text-align:center}
.t-9-muted-2{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.t-block-upper{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.t-xs-muted-upper{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.t-10-muted-ls5{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.5px;margin-bottom:2px}
.input-s2-7p{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:8px 10px;outline:none;font-size:13px;font-family:var(--font-b)}
.t-10-upper-ls1-mb{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:8px}
/* ── Utility-Klassen Runde 11 (v6.02j) ──────── */
.input-s1-7p{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:7px 8px;font-size:13px;outline:none;box-sizing:border-box}
.input-mono-s2{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:6px 10px;font-family:var(--font-mono,monospace);font-size:11px;outline:none}
.input-s2-flex2{flex:1;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:7px 10px;font-family:var(--font-b);font-size:13px;outline:none}
.input-s3-box{width:100%;box-sizing:border-box;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px;padding:6px 10px;outline:none}
.input-s2-px12{width:100%;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);color:var(--text)}
.t-10-upper-ls1-6b{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px}
.t-italic-muted{text-transform:none;letter-spacing:0;font-style:italic;opacity:.7}
.t-11-green-hide{font-size:11px;color:var(--s-best);display:none;margin-top:4px}
.t-11-muted-mb8{font-size:11px;color:var(--muted);margin-bottom:8px;line-height:1.5}
.t-11-muted-mb12{font-size:11px;font-weight:700;color:var(--muted);margin-bottom:12px}
.flex-top-10{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.flex-wrap-8c{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.surface-card-14{border:1px solid var(--border);border-radius:var(--r);padding:var(--card-pad);margin-bottom:12px}
/* ── bpm-mail.js Template-Klassen (v6.02k) ── */
.pf-meta-label{font-size:10px;color:var(--muted);margin-bottom:3px;font-weight:600}
.pf-section-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px}
.pf-section-label-6{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:6px}
.pf-icon-btn{background:none;border:none;cursor:pointer;font-size:13px;padding:3px 5px;color:var(--muted);border-radius:3px}
.pf-divider{width:1px;height:18px;background:var(--border);margin:0 4px}
.pf-divider-sm{width:1px;height:16px;background:var(--border);margin:0 3px}
.pf-row-label{font-size:11px;font-weight:600;color:var(--muted);min-width:72px;flex-shrink:0;white-space:nowrap}
.pf-input-sm{background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:12px;padding:5px 8px;border-radius:var(--r);outline:none}
.pf-tab-header{padding:8px 14px;font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:1.5px}
.pf-modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.pf-close-btn{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px}
.pf-flex-4{display:flex;align-items:center;gap:4px;flex-shrink:0}
.pf-col-header{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-right:8px}
.pf-toolbar-row{display:none;align-items:center;border-bottom:1px solid var(--border-2);padding:0 16px}
/* ── bpm-mail.js Runde 2 (v6.02t) ───────────── */
.pf-input-4px{background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-size:12px;padding:5px 8px;border-radius:var(--r-sm)}
.pf-progress-bar{position:absolute;left:0;bottom:-4px;width:100%;height:4px;border:none;padding:0;opacity:.9;cursor:pointer}
.pf-tab-faint-head{padding:8px 14px;font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:1.5px;border-bottom:1px solid var(--border-2)}
.pf-col-label{color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-right:8px;min-width:30px}
.pf-ghost-btn{background:transparent;border:none;color:var(--faint);cursor:pointer;font-size:16px;padding:2px 6px}
.pf-hover-actions{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:none;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:2px 4px;z-index:2}
.pf-compose-input{flex:1;background:transparent !important;border:none !important;color:var(--text);font-size:13px;padding:9px 0;outline:none !important;box-shadow:none !important;font-family:var(--font-b)}
.pf-td-label-9{padding:7px 12px;text-align:left;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:700}
.pf-t-faint-shrink{font-size:10px;color:var(--faint);flex-shrink:0}
.pf-border-top-3{border-top:1px solid var(--border-2);margin:3px 0}
.pf-gold-border{color:var(--gold);border-color:rgba(200,168,75,0.3)}
.pf-quote-block{margin:0;padding:0 0 0 12px;border-left:3px solid #ddd;color:#555}
.pf-iframe-full{width:100%;height:100%;border:none;border-radius:var(--r-sm)}
.pf-t-12-muted-3{font-size:12px;color:var(--muted);margin-bottom:3px}
.pf-overflow-flex{overflow-y:auto;flex:1}
.pf-t-12-muted{font-size:12px;color:var(--muted)}
.pf-icon-20{padding:10px 14px;font-size:20px}
.pf-ptr-rel{position:relative;cursor:pointer}
/* ── bpm-mail.js Runde 3 (v6.02u) ───────────── */
.pf-t-11-faint-ell{font-size:11px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pf-title-gold-h{font-family:var(--font-h);font-size:14px;letter-spacing:2px;color:var(--gold)}
.pf-card-border{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.pf-t-faint-10{color:var(--faint);font-size:10px}
.pf-t-gold-break{color:var(--gold);word-break:break-all}
.pf-input-s3-flex{flex:1;background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:10px 12px;font-size:13px;outline:none}
.pf-btn-ghost-gold{background:transparent;border:1px solid var(--gold);color:var(--gold);border-radius:var(--r);padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer}
.pf-btn-gold-solid{padding:7px 18px;background:var(--gold);color:#1a1400;border:none;border-radius:var(--r-sm);font-size:12px;font-weight:700;cursor:pointer}
.pf-row-hover{padding:9px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text);transition:background var(--tr-fast)}
.pf-tab-item{font-size:11px;color:var(--text);border-color:var(--border-2);text-transform:none;letter-spacing:0;text-align:left;white-space:nowrap}
.pf-tab-header-upper{cursor:pointer;padding:10px 14px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px}
/* ── JS-Modul Template-Klassen (v6.02l) ──── */
.doc-lbl-5{font-size:10px;color:var(--muted);text-transform:uppercase;display:block;margin-bottom:5px}
.doc-lbl-bold{display:block;font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.doc-lbl-11{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.doc-input-ghost{width:100%;padding:9px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text);border-radius:var(--r);font-size:13px;outline:none;font-family:var(--font-b)}
.doc-input-s2{width:100%;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:12px;outline:none}
.doc-td-right{text-align:right;padding:5px 8px;font-size:10px;color:#222}
.doc-lbl-mb4{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.portal-th{padding:6px 10px;text-align:left;font-size:10px;color:var(--muted);text-transform:uppercase}
.portal-row-between{display:flex;justify-content:space-between;font-size:var(--t-base);color:var(--muted);margin-bottom:6px}
.portal-micro-label{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;display:block;margin-bottom:3px}
.set-th{padding:8px 10px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700}
.set-card-overflow{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.ki-section-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:4px}
.ki-input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:6px 8px;font-size:13px;outline:none;font-family:var(--font-b)}
.mod-input-s3{width:100%;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:12px;padding:6px 8px;outline:none}
/* ── Final Utility-Klassen (v6.02m) ─────────── */
.col-flex-start{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}
.empty-state-pad{padding:32px;text-align:center;color:var(--muted);font-size:13px}
.grid-2-mb10{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.t-hint-18{margin-top:10px;font-size:11px;color:var(--muted);min-height:18px}
.t-green-section{color:var(--s-best);font-weight:600;margin-top:14px;margin-bottom:6px}
.t-orange-section{color:#E67E22;font-weight:600;margin-top:14px;margin-bottom:6px}
.t-gold-hint{display:none;font-size:10px;color:var(--gold);margin-top:3px}
.img-cover-hidden{width:100%;height:100%;object-fit:cover;display:none}
.auth-tag{background:var(--surface);padding:2px 6px;border-radius:var(--r-sm);font-family:var(--font-mono,monospace);font-size:10px}
.kal-warn{color:#F39C12;font-size:12px;margin-top:6px}
/* ── Absolute Final-Klassen (v6.02o) ────────── */
.input-mono-sm{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--r-sm);padding:6px 8px;font-size:13px;outline:none;box-sizing:border-box;font-family:var(--font-mono,monospace)}
.row-click-s2-12{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:6px 12px}
.input-s3-13{width:100%;box-sizing:border-box;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px;padding:8px 10px}
/* ── Batch-Final Utility-Klassen (v6.02q) ───── */
.flex-wrap-6{display:flex;flex-wrap:wrap;gap:6px}
.flex-end-8{display:flex;gap:8px;justify-content:flex-end}
.t-13-bold-text2{font-size:13px;color:var(--text);font-weight:600}
.flex-between-center{display:flex;align-items:center;justify-content:space-between}
.v-divider{width:1px;background:var(--border);margin:2px 4px}
.t-11-muted-mb6{font-size:11px;color:var(--muted);margin-bottom:6px}
.flex-gap-8c{display:flex;gap:8px;align-items:center}
.t-11-muted-mt8{font-size:11px;color:var(--muted);margin-top:8px}
/* ── Shared Module Utility-Klassen (v6.02r) ─── */
.t-11-muted-neg8{font-size:11px;color:var(--muted);margin:-8px 0 10px 0}
.t-11-muted-lh16{font-size:11px;color:var(--muted);line-height:1.6}
.t-13-bold-mb16{font-size:13px;font-weight:700;margin-bottom:16px}
.flex-gap-4-s0{display:flex;gap:4px;flex-shrink:0}
.icon-54-mb12{width:54px;height:54px;margin-bottom:12px}
.flex-gap-6-center{display:flex;gap:6px;align-items:center}
.t-10-muted-nowrap{font-size:10px;color:var(--muted);white-space:nowrap}
.img-cover-full{width:100%;height:100%;object-fit:cover}
.t-16-gold-bold{font-size:16px;font-weight:700;color:var(--gold)}
.t-22-gold-h{font-size:22px;font-family:var(--font-h);color:var(--gold)}
.t-10-muted-mt1{font-size:10px;color:var(--muted);margin-top:1px}
.ptr-fade{cursor:pointer;opacity:.7;margin-left:2px}
.t-10-muted-mb12{font-size:10px;color:var(--muted);margin-bottom:12px}
.t-muted-mt8{color:var(--muted);margin-top:8px}
.ptr-muted-tr{cursor:pointer;color:var(--muted);transition:.15s}
.kal-label{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:4px}
.kal-row-click{cursor:pointer;display:flex;align-items:center;gap:14px}
.kal-hint{font-size:12px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis}
.kal-gold-hint{font-size:11px;color:var(--gold);margin-top:4px}
/* ── Mega-Batch Utility-Klassen (v6.02s) ────── */
/* index.html */
.t-text-600{color:var(--text);font-weight:600}
.t-14-dark{font-size:14px;color:#222}
.display-none-maxw{display:none;max-width:900px}
.table-collapse-6{border-collapse:collapse;margin-top:6px}
/* bpm-mail.js */
.pf-t-faint-11{font-size:11px;color:var(--faint)}
.pf-t-muted-11{font-size:11px;color:var(--muted)}
.pf-t-faint-10{font-size:10px;color:var(--faint)}
.pf-icon-pad{padding:10px 14px;font-size:18px}
/* bpm-docs.js */
.doc-td-r8{padding:0 8px;text-align:right}
.doc-t-10-p{font-size:10px;padding:2px 5px}
.doc-disabled{opacity:.4;cursor:not-allowed}
/* bpm-portal.js */
.portal-cell-muted{color:var(--muted);padding:2px 8px 2px 0;white-space:nowrap}
.portal-t-dark{font-size:11px;color:#444}
.portal-t-bold-dark{font-weight:700;color:#111;white-space:nowrap}
.portal-t-cream{color:#F5F0EA;font-weight:600}
/* bpm-settings.js */
.set-row-gold{padding:5px 8px;border-bottom:1px solid var(--border);background:var(--gold-a08)}
.set-strength-bar{flex:1;background:rgba(255,255,255,.06);transition:background-color .2s}
.set-table-full{width:100%;border-collapse:collapse}
/* bpm-ki.js */
.ki-body-line{padding:4px 0;font-size:13px;line-height:1.6}
.ki-hint-sm{font-size:13px;color:var(--text);margin-bottom:4px}
/* bpm-kalender.js */
.kal-cell-muted{font-size:10px;color:var(--muted);margin-left:4px}
.kal-hint-long{font-size:12px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis}
/* ── JS-Template Utility-Klassen (v6.02) ────── */
.td-right-3{text-align:right;padding:3px 0}
.td-right-2{text-align:right;padding:2px 0}
.t-blue-section{color:var(--c-info);font-weight:600;margin-top:14px;margin-bottom:6px}
.t-gold-section{color:var(--gold);font-weight:600;margin-top:14px;margin-bottom:6px}
.td-label-sm{padding:3px 6px;text-align:left;color:var(--muted);font-weight:600}
.lh-11{height:11px;line-height:11px}
.svg-icon{flex-shrink:0;vertical-align:middle}
/* ── 2x-Pattern Cleanup (v6.01s) ──────────── */
.u-2-f11-gold-flex{padding:18px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-b);font-size:11px;letter-spacing:0.5px;color:var(--gold);text-transform:uppercase}
.u-3-f10-muted-flex{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;padding:6px 0 10px 0;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--border)}
.u-5-f11-flex-mb{margin-bottom:15px;background:#fff;border:1px dashed #ddd;padding:10px;min-height:100px;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:11px}
.u-6-f13-text-s2-brd{width:110px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:6px 10px;font-family:var(--font-b);font-size:13px;outline:none}
.u-7-f12-text-s2-brd{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:7px 10px;font-size:12px;font-family:monospace;box-sizing:border-box}
.u-8-f13-text-s3-brd{width:100%;background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:7px 10px;font-size:13px;outline:none;box-sizing:border-box}
.u-9-f13-text-s2-brd{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:9px 12px;font-size:13px;font-family:var(--font-b);outline:none;width:100%}
.u-10-grid-s1-brd{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer}
.u-11-text-flex{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--t-md);font-weight:400;text-transform:none;letter-spacing:0;color:var(--text)}
.u-12-f12-text-b7-mb{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.u-13-f13-flex{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;cursor:pointer;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.u-14-f13-text-s2-brd{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:6px 10px;font-size:13px;outline:none;max-width:100px}
.u-15-f10-gold-b7-mb{font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;padding:6px 0;border-bottom:1px solid var(--border)}
.u-16-f12-muted-brd{background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--muted);cursor:pointer;padding:3px 8px;font-size:12px;line-height:1}
.u-17-f12-faint-r{background:transparent;border:none;color:var(--faint);cursor:pointer;font-size:12px;padding:3px 6px;border-radius:var(--r);transition:all var(--tr-fast)}
.u-18-f13-text-s3-brd{width:100%;background:var(--surface-3);border:1px solid var(--border);color:var(--text);border-radius:var(--r);padding:8px 10px;font-size:13px;outline:none}
.u-19-flex-mb{margin-bottom:15px;background:#fff;border:1px solid #ddd;padding:10px;min-height:100px;display:flex;align-items:center;justify-content:center}
.u-20-b7{background:#E67E22;color:#000;font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.3px}
.u-21-b7{background:var(--s-best);color:#000;font-size:9px;font-weight:700;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.3px}
.u-22-f10-gold-mt{font-size:10px;color:var(--gold);margin-top:8px;padding:6px 10px;background:var(--gold-a08);border:1px solid rgba(200,168,75,.2);border-radius:var(--r-sm)}
.u-23-f10-muted-b7-s2{padding:8px 12px;background:var(--surface-2);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.u-24-f13-flex{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border)}
.u-25-f11-muted-mt-s2{font-size:11px;color:var(--muted);margin-top:10px;padding:6px 10px;background:var(--surface-2);border-radius:var(--r);line-height:1.5}
.u-26-muted-flex{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;flex-shrink:0;font-weight:400}
.u-27-f10-muted{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:18px 0 8px;border-top:1px solid var(--border);padding-top:14px}
.u-28-f13-text-s2-brd{width:100%;padding:8px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px}
.u-29-f10-muted-b7-mb{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px}
.u-30-f13-text-s3-brd{width:100%;padding:8px 10px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font-size:13px}
.u-31-x{width:32px;height:32px;border:none;background:none;cursor:pointer;border-radius:var(--r-sm);flex-shrink:0}
.u-32-text-s3-brd-r{width:100%;padding:9px 12px;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font:13px var(--font-b)}
.u-33-f12-muted-s2-brd{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:var(--card-pad);color:var(--muted);font-size:12px;text-align:center}
.u-34-muted-b7-mb{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.u-35-f11-gold-b7-mb{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.u-36-f11-muted-mt-s2{font-size:11px;color:var(--muted);margin-top:10px;padding:6px 10px;background:var(--surface-2);border-radius:var(--r)}
.u-37-flex-brd-r{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r);background:rgba(0,0,0,0.18);overflow:hidden}
.u-38-flex{padding:0 24px;border-right:1px solid var(--border-2);display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.u-39-f10-muted-b7-mb{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.8px;text-transform:uppercase;margin-bottom:4px}
.u-40-f10-muted-mt{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.u-41-f12-gold-b6-mb{font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.5px;margin-bottom:2px;opacity:.9}
.u-42-f16-b7-mb{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.u-43-muted-b7-mb{font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}
.u-44-f12-text-b6{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-45-f10-muted-b7-mb{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:1px;display:block;margin-bottom:4px}
.u-46-gold{margin-left:auto;font-size:9px;background:var(--gold-a12);color:var(--gold);padding:1px 6px;border-radius:10px}
.u-47-f10-muted{text-align:left;padding:8px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.u-48-f11-gold-b7-mb{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.u-49-text-b6{cursor:pointer;padding:10px 12px;font-size:13px;font-weight:600;color:var(--text);user-select:none}
.u-50-f10-gold-b7-mb{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-bottom:6px}
.u-51-flex-mb{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.u-52-f11-gold-mb{font-family:var(--font-b);font-size:11px;letter-spacing:0.5px;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.u-53-gold-mt{accent-color:var(--gold);width:16px;height:16px;margin-top:2px;flex-shrink:0}
.u-54-f12-gold-mb{font-family:var(--font-b);font-size:12px;letter-spacing:0.5px;color:var(--gold);margin-bottom:6px}
.u-55-mb-s2-brd-r{margin-bottom:12px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.u-56-f12-text-b6-mb{display:block;font-size:12px;font-weight:600;margin-bottom:10px;color:var(--text)}
.u-57-f12-text-b6-mb{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--text)}
.u-58-mt-r{margin-top:16px;padding:12px;background:var(--gold-a08);border:1px solid rgba(200,168,75,0.2);border-radius:var(--r)}
.u-59-mb-s2-brd-r{margin-bottom:20px;padding:var(--card-pad);background:var(--surface-2);border-radius:var(--r);border:1px solid var(--border)}
.u-60-flex{display:flex;align-items:center;gap:14px;padding:14px 16px;text-transform:none}
.u-61-f10-muted-b7{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.u-62-text{color:var(--text);font-family:var(--font-h);font-size:20px;letter-spacing:0.5px;line-height:1}
.u-63-flex-mb{display:flex;gap:4px;align-items:center;margin-bottom:5px;flex-wrap:wrap}
.u-64-f10-muted-mb{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}
.u-65-f10-muted-mb{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.u-66-f11-muted{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-67-f11-muted{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-68-x{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}
.u-69-x{font-size:8px;color:rgba(200,168,75,0.8);font-weight:400;letter-spacing:0;text-transform:none}
.u-70-f10-muted-mb{font-size:10px;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.8px}
.u-71-mb-r{background:#fff;padding:10px;border-radius:var(--r);display:inline-block;margin-bottom:10px}
.u-72-f10-muted-mb{font-size:10px;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:1px}
.u-73-mb-w100{width:100%;border-radius:var(--r-sm);margin-bottom:10px;max-height:200px;object-fit:cover}
.u-74-f10-mb-s1{padding:5px 8px;background:var(--surface);border-radius:var(--r-sm);margin-bottom:3px;font-size:10px}
.u-75-flex-mb{display:flex;align-items:center;gap:6px;margin-bottom:2px;flex-wrap:wrap}
.u-76-f13-text{font-size:13px;line-height:1.7;color:var(--text);min-height:160px;padding:8px 4px}
.u-77-f11-text{margin:0;padding-left:18px;font-size:11px;line-height:1.6;color:var(--text)}
.u-78-f11-muted-mt{margin-top:10px;font-size:11px;color:var(--muted);min-height:18px;text-align:center}
.u-79-muted-mt{font-size:var(--t-xs);color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.u-80-text-b7{font-size:18px;font-weight:700;color:var(--text);font-family:var(--font-h);letter-spacing:1px}
.u-81-x{position:absolute;inset:0;background-image:linear-gradient(rgba(201,150,90,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(201,150,90,0.08) 1px,transparent 1px);background-size:50px 50px}
.u-82-f11-muted-mt{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.5}
.u-83-flex-mb{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.u-84-f11-muted{font-size:11px;color:var(--muted);margin:0 0 14px 0;line-height:1.5}
.u-85-flex{display:flex;align-items:center;gap:8px;cursor:pointer}
.u-86-mt-s2-r{margin-top:20px;padding:var(--card-pad);background:var(--surface-2);border-radius:var(--r)}
.u-87-f11-muted-mb{font-size:11px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.u-88-f12-b7{font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.u-89-s2-r{background:var(--surface-2);border-radius:var(--r);padding:10px 12px;text-align:center}
.u-90-flex-mb{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.u-91-flex-mt{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.u-92-f11-muted{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.u-93-f10-gold-b7-mt{font-size:10px;color:var(--gold);font-weight:700;margin-top:2px}
.u-94-f10-green-b7-mt{font-size:10px;color:var(--s-best);font-weight:700;margin-top:2px}
.u-95-f16-gold{font-family:var(--font-h);font-size:16px;letter-spacing:1.5px;color:var(--gold)}
.u-96-f12-muted-mb{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.u-97-f11-muted{font-size:11px;color:var(--muted);padding:14px;font-style:italic}
.u-98-flex{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.u-99-f14-gold{font-family:var(--font-h);font-size:14px;letter-spacing:1px;color:var(--gold)}
.u-100-f12-muted{padding:11px 12px;text-align:right;font-size:12px;color:var(--muted)}
.u-101-f12-text{padding:11px 12px;text-align:right;font-size:12px;color:var(--text)}
.u-102-f13-text-mb{font-size:13px;color:var(--text);margin-bottom:5px;line-height:1.6}
.u-103-flex{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.u-104-f10-muted-b6-mb{font-size:10px;color:var(--muted);font-weight:600;margin-bottom:6px}
.u-105-f10-muted-mb{font-size:10px;color:var(--muted);display:block;margin-bottom:5px}
.u-106-x{border:1px solid #ddd;border-radius:var(--r-sm);padding:20px;background:#f9f9f9}
.u-107-x{border:1px dashed #ccc;border-radius:var(--r-sm);padding:20px;background:#fafafa}
.u-108-f12-muted-mb{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.5}
.u-109-f11-muted-mb{font-size:11px;color:var(--muted);text-decoration:line-through;margin-bottom:2px}
.u-110-red-b6-mb-mt{color:var(--s-abs);font-weight:600;margin-top:14px;margin-bottom:6px}
.u-111-grid-mb{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px}
.u-112-gold{width:16px;height:16px;cursor:pointer;accent-color:var(--gold)}
.u-113-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.u-114-f12{width:28px;height:28px;font-size:12px}
.u-115-f10-muted-mb{font-size:10px;color:var(--muted);margin-bottom:8px}
.u-116-f12-muted-mb{font-size:12px;color:var(--muted);margin-bottom:18px}
.u-117-f12-muted-mb{font-size:12px;color:var(--muted);margin-bottom:6px}
.u-118-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.u-119-mb{margin-bottom:0;flex:1;min-width:100px}
.u-120-f12-muted-mb{font-size:12px;color:var(--muted);margin-bottom:12px}
.u-121-mt{margin-top:14px;padding-top:10px;border-top:1px solid var(--border)}
.u-122-mb{margin-bottom:0;flex:1;min-width:280px}
.u-123-gold-mb{color:var(--gold);display:block;margin-bottom:4px}
.u-124-f12-muted-mb{font-size:12px;color:var(--muted);margin-bottom:20px}
.u-125-flex{display:flex;flex-direction:column;gap:18px}
.u-126-f12-muted{color:var(--muted);font-size:12px;padding:10px 0}
.u-127-f14-gold-b7{font-weight:700;color:var(--gold);font-size:14px}
.u-128-gold{font-family:var(--font-h);font-size:20px;color:var(--gold)}
.u-129-f11-green{font-size:11px;color:var(--s-best);line-height:1.6}
.u-130-flex{display:flex;align-items:flex-start;justify-content:space-between}
.u-131-flex{display:flex;gap:12px;align-items:center}
.u-132-grid{display:grid;grid-template-columns:1fr 100px;gap:10px}
.u-133-mb{margin-bottom:14px;padding:0;overflow:hidden}
.u-134-f11-muted{font-size:11px;color:var(--muted);flex-shrink:0}
.u-135-x{text-align:center;padding:4px 14px;border-left:1px solid var(--border)}
.u-136-flex{display:flex;gap:6px;flex-wrap:wrap}
.u-137-x{opacity:.6;pointer-events:none;cursor:default}
.u-138-f10-muted{color:var(--muted);font-size:10px;font-weight:400}
.u-139-flex{display:flex;flex-direction:column;gap:2px}
.u-140-r-w100{max-width:100%;max-height:75vh;border-radius:var(--r)}
.u-141-flex-mb{display:flex;gap:8px;margin-bottom:12px}
.u-142-muted{padding:40px;text-align:center;color:var(--muted)}
.u-143-f12-text-b7{font-size:12px;font-weight:700;color:var(--text)}
.u-144-flex-mb{display:flex;gap:6px;margin-bottom:14px}
.u-145-f12{font-size:12px;padding-left:16px;border-left:1px solid #e0e0e0}
.u-146-x{border:none;border-top:1px solid #eee;margin:16px 0}
.u-147-x{grid-column:1/-1;padding-top:8px;border-top:1px solid var(--border-2)}
.u-148-w100{max-width:100%;max-height:100px;object-fit:contain}
.u-149-f11{font-size:11px;line-height:1.8;color:#333}
.u-150-f11{font-size:11px;line-height:1.8;color:#bbb}
.u-151-grid{display:grid;grid-template-columns:1fr;gap:6px}
.u-152-f11-muted-b6{font-size:11px;color:var(--muted);font-weight:600}
.u-153-f12-text{font-size:12px;color:var(--text);font-weight:500}
.u-154-f13-gold-b7{font-weight:700;color:var(--gold);font-size:13px}
.u-155-f11-muted{font-size:11px;color:var(--muted);margin-left:8px}
.u-156-f11-muted-b7{font-size:11px;font-weight:700;color:var(--muted)}
.u-157-x{font-weight:300;letter-spacing:2px}
.u-158-mb{font-size:48px;margin-bottom:12px}
.u-160-f12{font-family:monospace;font-size:12px}
.u-161-x{position:relative;display:inline-block}
.u-162-muted{font-size:20px;color:var(--muted)}
.u-163-f11-faint{color:var(--faint);font-size:11px}
.u-164-gold{width:auto;accent-color:var(--gold)}
.u-165-x{margin:0;grid-column:1 / -1}
.u-166-w100{max-width:900px;width:100%}
.u-167-f10-faint{color:var(--faint);font-size:10px}
.u-168-x{font-size:9px;gap:4px}
.u-169-x{gap:8px;flex-wrap:wrap}
.u-170-x{width:auto;min-width:200px}
.u-171-mb{display:block;margin-bottom:4px}
.u-172-gold{color:var(--gold);text-decoration:underline}
.u-173-f13-muted{font-size:13px;color:var(--muted)}
.u-174-f12{font-size:12px;max-width:280px}
.u-175-x{text-align:center;padding:0 18px 18px}
.u-176-x{opacity:.25;cursor:not-allowed}
.u-177-f14-b6{font-size:14px;font-weight:600}
.u-178-f14-b7{font-size:14px;font-weight:700}
.u-179-x{font-size:20px;line-height:1}
.u-180-x{font-size:20px;flex-shrink:0}
.u-181-x{flex-shrink:0;white-space:nowrap}
.u-182-x{cursor:pointer;user-select:none}
.u-183-f13{padding:5px 8px;font-size:13px}
.u-184-text{color:var(--text);text-decoration:none}
.u-185-x{position:relative;flex:1}
.u-186-x{flex-shrink:0;padding:0 10px}
.u-187-x{font-weight:400;text-transform:none}
.u-188-x{opacity:.2;cursor:default}
.u-189-x{padding:32px;text-align:center}
.u-190-gold-mt{margin-top:2px;accent-color:var(--gold)}
.u-191-faint{font-size:9px;color:var(--faint)}
.u-192-x{padding:11px 12px;text-align:right}
.u-193-x{color:var(--border-2);margin:0 2px}
.u-194-gold-b6{color:var(--gold);font-weight:600}
.u-195-x{padding:10px 12px;border-top:1px solid var(--border)}
.u-196-f10{padding:1px 5px;font-size:10px}
.u-197-mt{border-collapse:collapse;margin-top:8px}
.u-198-mt{border-collapse:collapse;margin-top:9px}
.u-199-mt{border-collapse:collapse;margin-top:7px}
.u-200-text{padding:3px 6px;color:var(--text)}
.u-201-x{cursor:pointer;margin:0}
.u-202-f10-b6{font-size:10px;font-weight:600}
/* ── Anf-Actions: auf breiten Screens alle Aktionen direkt zeigen statt
hinter "Mehr" zu verstecken — genug Platz ist genug Platz. Auf schmalen
Screens (Mobile, <=768px) bleibt das kompakte Mehr-Dropdown ── */
.anf-mehr-inline{display:contents}
.anf-mehr-wrap{display:none}
@media (max-width: 768px) {
.anf-mehr-inline{display:none !important}
.anf-mehr-wrap{display:block !important}
}
/* ── Desktop anf-actions: Kennenlern verstecken, Buttons kompakt ─── */
.anf-actions .anf-kennenlern-btn { display: none !important; }
.anf-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
}
.anf-actions .btn,
.anf-actions .anf-action-btn {
flex: 0 1 auto !important;
width: auto !important;
min-width: 80px !important;
max-width: 180px !important;
padding: 6px 10px !important;
font-size: 10px !important;
gap: 4px !important;
height: 32px !important;
box-sizing: border-box !important;
justify-content: center !important;
white-space: nowrap !important;
}
.anf-actions .anf-action-btn[onclick*="saveAnfrage"],
.anf-actions .btn-primary[onclick*="saveAnfrage"] {
display: none !important;
}
/* v6.14zy: Mobile Save-Button-Override entfernt — Auto-Save übernimmt */
/* v6.14zy: .anf-save-hide bleibt überall versteckt — kein Float-Bar-Override mehr */
.anf-save-hide { display: none !important; }
/* ── Hero: Name/Stats immer sichtbar, Buttons darunter ─────────── */
.anf-header-row {
flex-wrap: wrap !important;
}
.anf-header-row > div[style*="flex:1"] {
min-width: 180px !important;
}
.anf-actions {
flex: 0 0 100% !important;
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 5px !important;
margin-top: 2px !important;
}
.anf-actions .btn,
.anf-actions .anf-action-btn {
flex: 0 1 auto !important;
width: auto !important;
min-width: 0 !important;
padding: 5px 10px !important;
font-size: 10px !important;
height: 28px !important;
gap: 4px !important;
white-space: nowrap !important;
}
.anf-actions .anf-kennenlern-btn { display: none !important; }
/* ── Mobile: Hero-Bereich komplett neu ─────────────────────────── */
@media (max-width: 768px) {
/* Hero-Card: kein Overflow */
.detail-hero { padding: 12px 12px 10px !important; overflow: hidden !important; }
/* Header-Row: Avatar + Name gestapelt, Stats darunter */
.anf-header-row {
flex-wrap: wrap !important;
gap: 8px !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
/* Avatar kleiner */
.anf-header-row > div[style*="width:44px"] {
width: 36px !important;
height: 36px !important;
font-size: 12px !important;
flex-shrink: 0 !important;
}
/* Name / Titel: Flex-1, kein Overflow */
.anf-header-row > div[style*="flex:1"] {
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
}
.anf-header-row > div[style*="flex:1"] div {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 13px !important;
}
.anf-header-row > div[style*="flex:1"] div:last-child {
font-size: 10px !important;
}
/* Stats: kompakt, scrollt horizontal */
.anf-stats {
flex: 0 0 100% !important;
width: 100% !important;
overflow-x: auto !important;
border-left: none !important;
border-right: none !important;
border-top: 1px solid var(--border) !important;
padding: 6px 0 !important;
gap: 0 !important;
}
.anf-stats > div { padding: 2px 10px !important; flex-shrink: 0 !important; }
.anf-stats > div > div:first-child { font-size: 8px !important; }
.anf-stats > div > div:last-child { font-size: 14px !important; }
/* Actions: auf Mobile komplett versteckt (Floating-Bar) */
.anf-actions { display: none !important; }
/* Info-Chips: 2 Spalten */
.anf-chips {
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
margin-top: 10px !important;
}
.anf-chip {
padding: 8px 10px !important;
min-height: 0 !important;
}
.anf-chip > div:first-child {
font-size: 8px !important;
margin-bottom: 2px !important;
}
.anf-chip > div:nth-child(2) {
font-size: 13px !important;
font-weight: 700 !important;
}
/* Status-Timeline: Schrift kleiner */
.anf-status-line { gap: 0 !important; }
.anf-status-step { min-width: 0 !important; flex: 1 !important; }
.anf-status-step span { font-size: 7px !important; }
}
/* Float-Bar: einheitliche Icon-Farben */
#anf-float-bar .anf-action-btn span[style*="font-size:20px"],
#anf-float-bar .anf-action-btn span[style*="font-size: 20px"],
#anf-float-bar .btn span[style*="font-size:20px"] {
filter: none !important;
opacity: 0.9 !important;
}
#anf-float-bar .btn, #anf-float-bar .anf-action-btn {
color: rgba(255,255,255,0.8) !important;
border-color: rgba(200,168,75,0.2) !important;
background: rgba(255,255,255,0.04) !important;
}
#anf-float-bar .btn:active, #anf-float-bar .anf-action-btn:active {
background: var(--gold-a15) !important;
}
@media (max-width: 768px) {
/* 4-Spalten Grid */
.anf-actions {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
flex-wrap: unset !important;
}
.anf-actions .btn,
.anf-actions .anf-action-btn {
flex: unset !important;
width: unset !important;
}
.anf-actions .anf-kennenlern-btn {
grid-column: span 2 !important;
justify-content: center !important;
flex-direction: row !important;
}
}
/* ─────────────────────────────────────────── */
@media (min-width: 900px){
.admin-sec-grid-wrap{ grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}
/* ─────────────────────────────────────────── */
.auto-card-aktiv{
border-color:rgba(201,150,90,0.5) !important;
background:linear-gradient(135deg,var(--surface) 0%,rgba(201,150,90,0.06) 100%) !important;
box-shadow:0 0 0 1px rgba(201,150,90,0.25),0 4px 16px rgba(201,150,90,0.08) !important;
}
.auto-card-aktiv .card-title::after{content:' ✓';color:var(--gold);font-size:var(--t-sm);font-weight:400;opacity:.8}
.auto-card-aktiv .card-title::after{content:' ✓';color:var(--gold);font-size:var(--t-sm);font-weight:400;opacity:.8}
/* ══════════════════════════════════════════
Auto-Card System · beats per micha CI
══════════════════════════════════════════ */
/* KI-Button global -- zwei Varianten:
btn-gx btn-ki = Ghost-Stil (lila Outline, transparent BG)
btn btn-xs btn-ki = Gradient-Stil (lila-blau, weisser Text) */
.btn-ki {
color: #a78bfa !important;
border-color: rgba(124,58,237,.35) !important;
}
.btn-ki:hover {
background: rgba(124,58,237,.1) !important;
border-color: rgba(124,58,237,.6) !important;
color: #c4b5fd !important;
}
.btn.btn-xs.btn-ki {
background: linear-gradient(135deg,#7c3aed,#3b82f6) !important;
color: #fff !important;
border: none !important;
font-size: 10px;
padding: 3px 8px;
}
.btn-jetzt {
border: 1px solid var(--gold) !important;
color: var(--gold) !important;
}
/* CARD */
.auto-card {
padding: 0 !important;
overflow: hidden;
}
/* HEADER — 2-Zeilen-Layout: Titel oben, Buttons unten */
.auto-card .card-header {
padding: 10px 16px 10px !important;
background: var(--surface-2);
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
margin-bottom: 0 !important;
}
.auto-card .card-title {
font-family: var(--font-h) !important;
font-size: 13px !important;
letter-spacing: 2px !important;
color: var(--gold) !important;
text-transform: uppercase !important;
line-height: 1 !important;
}
/* ACTION ROW — immer einzeilig unter dem Titel */
.auto-card .ac-actions {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.auto-card .ac-check {
display: flex !important;
align-items: center;
gap: 5px;
cursor: pointer;
font-size: 11px;
color: var(--muted);
font-weight: 600;
}
.auto-card .ac-check input[type="checkbox"] {
accent-color: var(--c-info);
width: 13px;
height: 13px;
}
.auto-card .ac-check.ac-check-aktiv input {
accent-color: var(--gold);
width: 14px;
height: 14px;
}
.auto-card .ac-check.ac-check-aktiv span {
color: var(--text);
font-size: 12px;
font-weight: 700;
}
/* BODY */
.auto-card .ac-body {
padding: 14px 16px 16px;
}
.auto-card .ac-desc {
font-size: 11px;
color: var(--muted);
line-height: 1.5;
margin: 0 0 12px;
}
/* LABELS */
.auto-card .ac-label {
display: block;
font-size: 10px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
margin-top: 2px;
}
/* FIELDS */
.auto-card .ac-field {
width: 100%;
background: var(--surface-3) !important;
border: 1px solid var(--border) !important;
color: var(--text);
border-radius: var(--r);
padding: 8px 10px;
font-size: 12px;
font-family: var(--font-b);
box-sizing: border-box;
margin-bottom: 10px;
resize: vertical;
display: block;
}
.auto-card .ac-field[type="text"] { resize: none; }
.auto-card .ac-field:focus {
border-color: var(--gold) !important;
outline: none;
background: rgba(200,168,75,0.05) !important;
box-shadow: 0 0 0 2px var(--gold-a08);
}
.auto-card .ac-field-sm { margin-bottom: 6px; }
/* PLACEHOLDER HINTS */
.auto-card .ac-ph {
font-size: 10px;
color: var(--faint);
line-height: 1.7;
margin-top: -4px;
margin-bottom: 10px;
}
.auto-card .ac-ph code { color: var(--muted); font-size: 10px; }
/* ROW (tage input) */
.auto-card .ac-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.auto-card .ac-num {
background: var(--surface-3);
border: 1px solid var(--border);
color: var(--text);
border-radius: var(--r);
padding: 7px 8px;
font-size: 13px;
font-family: var(--font-b);
text-align: center;
width: 74px;
flex-shrink: 0;
}
.auto-card input[type="time"].ac-num {
width: 105px;
font-size: 15px;
font-family: var(--font-b);
font-weight: 600;
letter-spacing: 0.5px;
padding: 7px 8px;
text-align: center;
color: var(--gold);
border-color: var(--gold-brd);
}
.auto-card .ac-row-label {
font-size: 11px;
color: var(--muted);
}
/* MODUS BUTTONS (Anzahlung) */
.auto-card .ac-modus-row {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.auto-card .ac-modus-btn {
flex: 1;
justify-content: center;
text-align: center;
}
.auto-card .ac-modus-active {
background: var(--gold) !important;
color: var(--black) !important;
font-weight: 700;
}
/* BLOCK (telefonat privat/firma) */
.auto-card .ac-block {
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 12px;
}
.auto-card .ac-wochentage {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
font-size: 11px;
color: var(--muted);
}
.auto-card .ac-wochentage label {
display: flex;
align-items: center;
gap: 3px;
cursor: pointer;
}
.auto-card .ac-tel-preview {
font-size: 10px;
color: var(--faint);
line-height: 1.5;
margin-top: 6px;
}
/* TYPEN TOGGLE */
.auto-card .ac-typen-wrap { margin-top: 6px; }
.auto-card .ac-typen-btn {
font-size: 10px;
color: var(--muted);
display: flex;
align-items: center;
gap: 4px;
padding: 3px 0;
background: none;
border: none;
cursor: pointer;
}
.auto-card .ac-typen-panel {
margin-top: 10px;
padding: 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--r);
}
.auto-card .ac-typ-row { margin-bottom: 8px; }
/* DETAILS (Mahnung Vorlagen) */
.auto-card .ac-details {
border: 1px solid var(--border);
border-radius: var(--r);
overflow: hidden;
margin-bottom: 6px;
}
.auto-card .ac-details summary {
cursor: pointer;
padding: 9px 12px;
font-size: 12px;
font-weight: 600;
background: var(--surface-2);
color: var(--text);
user-select: none;
list-style: none;
}
.auto-card .ac-details summary::-webkit-details-marker { display: none; }
.auto-card .ac-details[open] summary {
border-bottom: 1px solid var(--border);
color: var(--gold);
}
.auto-card .ac-details-body {
padding: 12px;
}
/* AKTIV HIGHLIGHT */
.auto-card-aktiv {
border-color: rgba(200,168,75,0.35) !important;
}
.auto-card-aktiv .card-title::after {
content: ' ✓';
color: var(--gold);
font-size: 10px;
opacity: .8;
}
/* auto-grid: override tab-c display:none/block with display:grid */
.tab-c.auto-grid{display:none !important}
.tab-c.auto-grid.active{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:14px;padding-top:16px;align-content:start}
@media (max-width: 640px) {
.tab-c.auto-grid.active{grid-template-columns:1fr !important;gap:10px}
.auto-pf-grid{grid-template-columns:1fr !important}
.auto-tel-span{grid-column:span 1 !important}
#auto-cat-tabs .tab{padding:8px 10px;font-size:var(--t-xs);letter-spacing:.5px}
}
/* ─────────────────────────────────────────── */
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* FAB nur auf Mobile einblenden */
/* fab-hidden-Klasse versteckt FAB auch auf Mobile (z.B. in Dok-Editor) */
body.fab-hidden #mobile-fab { display: none !important; }
/* Portal-Sperr-Bar: Desktop Flex, Mobile 2x2 Grid */
.portal-actions-row {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
/* Kunde-Detail Hero-Actions: Desktop Flex, Mobile 2-Reihen Layout */
.dok-topbar-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
}
/* Mobile-Trigger standardmäßig versteckt */
.dok-act-mobile-trigger {
display: none !important;
}
/* Bottom-Sheet Container (gleicher Stil wie fab-sheet/briefing-sheet) */
#dok-actions-sheet {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.7);
z-index:var(--z-mob-bg);
align-items: flex-end;
justify-content: center;
padding: 0;
backdrop-filter: blur(2px);
}
#dok-actions-sheet.open {
display: flex;
}
#dok-actions-list .dok-act-secondary {
display: flex !important; /* im Sheet wieder sichtbar */
width: 100%;
justify-content: flex-start;
padding: 12px 16px !important;
margin-bottom: 6px;
font-size:var(--t-md) !important;
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
text-align: left !important;
}
#dok-actions-list .dok-act-secondary:last-child {
margin-bottom: 0;
}
/* Briefing-Actions Sheet — gleicher Stil wie fab-sheet */
#briefing-actions-sheet {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.7);
z-index:var(--z-mob-bg);
align-items: flex-end;
justify-content: center;
padding: 0;
backdrop-filter: blur(2px);
}
#briefing-actions-sheet.open {
display: flex;
}
/* ─────────────────────────────────────────── */
@media (max-width: 768px) {
/* Strg+K Hint auf Mobile sinnlos */
#topbar [class*="cmd"], #topbar [id*="cmd"],
#topbar > div:has(> kbd),
#topbar [style*="border-radius"][style*="border:1px"]:not(:has(svg)):not(.btn):has(span) {
display: none !important;
}
/* Strg+K spezifisch (bekannte Klassen prüfen) */
.cmd-trigger, [data-cmd-trigger] { display: none !important; }
/* Topbar-Icons einheitliche Größe */
#topbar #mob-ham,
#topbar #mob-bell-btn,
#topbar #notif-bell,
#topbar [onclick*="darkmode"],
#topbar [onclick*="theme"],
#topbar > button:not(.btn-primary):not(.btn-danger) {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
border-radius: var(--r) !important;
}
/* Topbar-Title nicht abschneiden */
#topbar-title {
font-size:var(--t-md) !important;
flex: 1 !important;
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
padding: 0 8px !important;
}
.card {
padding: 14px !important;
margin-bottom: 12px !important;
border-radius: var(--r) !important;
border: 1px solid var(--border) !important;
}
/* Card-Header einheitlich */
.card-header {
margin-bottom: 12px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid var(--border) !important;
gap: 8px !important;
}
.card-title {
font-size:var(--t-md) !important;
font-family: var(--font-h) !important;
letter-spacing: 1px !important;
color: var(--gold) !important;
text-transform: uppercase !important;
}
.form-section-title {
font-size:var(--t-sm) !important;
font-family: var(--font-h) !important;
letter-spacing: 1.5px !important;
color: var(--gold) !important;
margin-bottom: 14px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid var(--border) !important;
text-transform: uppercase !important;
}
.form-group {
margin-bottom: 12px !important;
}
.form-group label {
font-size:var(--t-xs) !important;
font-weight: 600 !important;
letter-spacing: 1px !important;
color: var(--muted) !important;
text-transform: uppercase !important;
margin-bottom: 6px !important;
display: block !important;
}
input, select, textarea, .si {
font-size: 16px !important; /* iOS Zoom Verhinderung */
padding: 10px 12px !important;
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
color: var(--text) !important;
min-height: 42px !important;
box-sizing: border-box !important;
width: 100% !important;
}
textarea {
min-height: 80px !important;
line-height: 1.5 !important;
resize: vertical !important;
}
input:focus, select:focus, textarea:focus, .si:focus {
border-color: var(--gold) !important;
outline: none !important;
}
/* Spezielle Inputs (Suchfelder bleiben volle Breite) */
input[type="checkbox"], input[type="radio"] {
width: auto !important;
min-height: 0 !important;
padding: 0 !important;
accent-color: var(--gold) !important;
}
/* Date/Time Inputs iOS Fix */
input[type="date"], input[type="time"] {
-webkit-appearance: none !important;
appearance: none !important;
min-height: 42px !important;
line-height: 1.4 !important;
}
#mob-preview-modal {
display: none;
position: fixed;
inset: 0;
z-index:var(--z-modal);
flex-direction: column;
background: var(--surface);
}
#mob-preview-modal.open { display: flex; }
#mob-preview-modal-bar {
background: var(--surface-2);
border-bottom: 1px solid var(--border);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
#mob-preview-modal-title {
flex: 1;
font-size:var(--t-base);
font-weight: 600;
color: var(--muted);
}
#mob-preview-modal-close {
background: none;
border: 1px solid var(--border);
color: var(--text);
padding: 6px 14px;
border-radius: var(--r);
font-size:var(--t-base);
font-weight: 600;
cursor: pointer;
min-height: 36px;
}
#mob-preview-iframe {
flex: 1;
width: 100%;
height: 100%;
border: none;
background: white;
}
/* Der Toggle-Button */
#mob-portal-toggle {
width: 100%;
padding: 10px 14px;
background: var(--surface-2);
border: none;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
color: var(--muted);
font-size:var(--t-sm);
font-weight: 600;
letter-spacing: .5px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
#mob-portal-toggle .mob-portal-badge {
margin-left: auto;
font-size:var(--t-xs);
padding: 2px 6px;
border-radius: 10px;
font-weight: 700;
}
/* Portal-Inhalt: versteckt wenn .mob-collapsed */
#mob-portal-content.mob-collapsed {
display: none !important;
}
/* 3-Spalten Grid → 1 Spalte */
#mob-portal-content > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
#mob-portal-content > div[style*="grid-template-columns"] > div {
border-right: none !important;
border-bottom: 1px solid var(--border) !important;
padding: 10px !important;
}
#mob-portal-content > div[style*="grid-template-columns"] > div:last-child {
border-bottom: none !important;
}
/* Portal-Buttons: 4er Grid */
#dok-col-portal > div[style*="display:flex"][style*="gap:4px"] {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 4px !important;
}
#dok-col-portal .btn-xs {
min-height: 34px !important;
padding: 5px 4px !important;
font-size:var(--t-xs) !important;
text-align: center !important;
white-space: normal !important;
line-height: 1.2 !important;
}
.dok-topbar {
padding: 10px !important;
}
.dok-topbar-row1 {
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
/* Titel oben */
.dok-topbar-row1 > div:first-child {
flex: none !important;
}
/* Button-Container: 4er Grid */
.dok-topbar-row1 > div[style*="display:flex"][style*="gap:8px"] {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
flex-wrap: unset !important;
}
/* Buttons im Grid: Icon oben, Label unten */
.dok-topbar-row1 > div[style*="display:flex"][style*="gap:8px"] .btn,
.dok-topbar-row1 > div[style*="display:flex"][style*="gap:8px"] button {
min-height: 52px !important;
padding: 6px 4px !important;
font-size:var(--t-xs) !important;
font-weight: 600 !important;
flex-direction: column !important;
gap: 2px !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.2 !important;
border-radius: var(--r) !important;
}
/* 💾 Speichern-Button: span 2 Spalten */
.dok-topbar-row1 > div[style*="display:flex"] > .btn-primary:last-child {
grid-column: span 2 !important;
min-height: 44px !important;
flex-direction: row !important;
font-size:var(--t-base) !important;
}
.btn {
min-height: 44px !important;
padding: 10px 16px !important;
font-size:var(--t-md) !important;
font-weight: 600 !important;
letter-spacing: .5px !important;
border-radius: var(--r) !important;
border: 1px solid var(--border) !important;
transition: all 0.15s !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
white-space: nowrap !important;
}
.btn-primary {
background: var(--gold) !important;
color: #000 !important;
border-color: var(--gold) !important;
font-weight: 700 !important;
}
.btn-secondary {
background: var(--surface-2) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
.btn-ghost {
background: transparent !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
.btn-danger {
background: rgba(231, 76, 60, 0.1) !important;
color: var(--s-abs) !important;
border-color: rgba(231, 76, 60, 0.3) !important;
}
.btn-sm {
min-height: 36px !important;
padding: 8px 12px !important;
font-size:var(--t-base) !important;
}
.btn-xs {
min-height: 30px !important;
padding: 5px 9px !important;
font-size:var(--t-sm) !important;
}
/* Action-Buttons in Tabellen-Zeilen kleiner */
.row-actions .btn {
min-height: 30px !important;
padding: 5px 8px !important;
font-size:var(--t-sm) !important;
}
.stat-card {
padding: 14px !important;
border-radius: var(--r) !important;
border: 1px solid var(--border) !important;
background: var(--surface-2) !important;
}
.stat-v, .stat-value {
font-size: 22px !important;
font-family: var(--font-h) !important;
color: var(--gold) !important;
line-height: 1.2 !important;
}
.stat-l, .stat-label {
font-size:var(--t-xs) !important;
color: var(--muted) !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
margin-top: 4px !important;
}
.detail-hero {
padding: 12px !important;
margin-bottom: 12px !important;
gap: 10px !important;
}
.detail-hero-left h1 {
font-size:var(--t-xl) !important;
font-family: var(--font-h) !important;
letter-spacing: 1.5px !important;
line-height: 1.2 !important;
margin-bottom: 4px !important;
}
.detail-hero-left .meta {
font-size:var(--t-sm) !important;
gap: 8px !important;
color: var(--muted) !important;
}
/* Detail-Hero Action Buttons (3er/4er Grid) */
.detail-hero-actions {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
width: 100% !important;
flex-wrap: unset !important;
}
.detail-hero-actions .btn {
flex: none !important;
padding: 8px 4px !important;
min-height: 56px !important;
font-size:var(--t-sm) !important;
font-weight: 600 !important;
flex-direction: column !important;
gap: 3px !important;
line-height: 1.2 !important;
white-space: normal !important;
text-align: center !important;
}
.tabs {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
flex-wrap: nowrap !important;
border-bottom: 1px solid var(--border) !important;
gap: 0 !important;
}
.tab {
flex-shrink: 0 !important;
white-space: nowrap !important;
padding: 10px 14px !important;
font-size:var(--t-base) !important;
font-weight: 600 !important;
letter-spacing: .5px !important;
border: none !important;
border-bottom: 3px solid transparent !important;
background: none !important;
color: var(--muted) !important;
border-radius: 0 !important;
min-height: 44px !important;
}
.tab.active {
color: var(--gold) !important;
border-bottom-color: var(--gold) !important;
}
.mob-card {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-left-width: 3px !important;
border-radius: var(--r) !important;
padding: 12px 14px !important;
margin-bottom: 8px !important;
cursor: pointer !important;
transition: all 0.15s !important;
}
.mob-card:active {
background: var(--surface-3) !important;
transform: scale(0.98) !important;
}
.mob-card-knr {
font-size:var(--t-xs) !important;
color: var(--gold) !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
margin-bottom: 3px !important;
}
.mob-card-title {
font-size:var(--t-lg) !important;
font-weight: 600 !important;
color: var(--text) !important;
line-height: 1.3 !important;
}
.mob-card-betrag {
font-family: var(--font-h) !important;
font-size:var(--t-lg) !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
letter-spacing: .5px !important;
}
.mob-card-meta {
margin-top: 8px !important;
padding-top: 8px !important;
border-top: 1px solid var(--border) !important;
font-size:var(--t-sm) !important;
color: var(--muted) !important;
}
.mob-card-status {
margin-left: auto !important;
font-size:var(--t-xs) !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 3px !important;
border: 1px solid currentColor !important;
text-transform: uppercase !important;
letter-spacing: .5px !important;
}
.modal-content, [class*="modal-box"] {
width: 94vw !important;
max-width: 94vw !important;
padding: 18px !important;
border-radius: var(--r) !important;
}
/* "Nur neueste"-Label und ähnliche Checkbox-Labels */
label[style*="user-select"][style*="cursor:pointer"] {
font-size:var(--t-base) !important;
padding: 6px 0 !important;
gap: 8px !important;
}
.empty {
padding: 40px 20px !important;
text-align: center !important;
color: var(--muted) !important;
}
.empty p {
font-size:var(--t-md) !important;
margin-bottom: 12px !important;
}
.badge, [class*="badge-"] {
font-size:var(--t-xs) !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 3px !important;
text-transform: uppercase !important;
letter-spacing: .5px !important;
display: inline-block !important;
}
.view.active { padding: 10px !important; }
.view.active > .card:first-child { margin-top: 0 !important; }
.view.active > div:last-child { margin-bottom: 0 !important; }
/* Main-Tabs: scrollbar, kompakt */
#settings-maintabs {
gap: 4px !important;
margin-bottom: 8px !important;
}
#settings-maintabs .tab {
font-size:var(--t-sm) !important;
padding: 6px 10px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
#settings-subtabs {
gap: 4px !important;
margin-bottom: 14px !important;
}
#settings-subtabs .tab {
font-size:var(--t-xs) !important;
padding: 5px 8px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Form-Groups: volle Breite, kompakter */
#view-einstellungen .form-row-2,
#view-einstellungen .form-row-3 {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
#view-einstellungen .form-group {
margin-bottom: 10px !important;
}
#view-einstellungen label {
font-size:var(--t-sm) !important;
margin-bottom: 4px !important;
}
/* Karten in Einstellungen */
#view-einstellungen .card {
padding: 12px !important;
margin-bottom: 10px !important;
}
#view-einstellungen .card-header {
flex-wrap: wrap !important;
gap: 6px !important;
}
/* 💾 Speichern-Buttons */
#view-einstellungen .btn-primary {
min-height: 42px !important;
}
/* Farbpaletten + Icon-Grids */
#view-einstellungen [style*="grid-template-columns: repeat"] {
grid-template-columns: repeat(4, 1fr) !important;
}
/* max-width Blocks */
#view-einstellungen [style*="max-width:900px"],
#view-einstellungen [style*="max-width: 900px"] {
max-width: 100% !important;
}
/* Toolbar */
#view-aufgaben .toolbar {
gap: 8px !important;
}
#view-aufgaben .toolbar .si {
flex: 1 !important;
min-height: 40px !important;
}
#view-aufgaben .toolbar .btn {
min-height: 40px !important;
font-size:var(--t-md) !important;
}
/* Aufgaben-Liste */
#aufgaben-list .card,
#aufgaben-list > div {
padding: 12px !important;
margin-bottom: 8px !important;
}
/* Aufgabe Detail */
#view-aufgabe-detail .detail-hero {
padding: 12px !important;
}
#view-aufgabe-detail .form-row-2,
#view-aufgabe-detail .form-row-3 {
grid-template-columns: 1fr !important;
}
#view-aufgabe-detail .btn-group {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
/* Jahr-Buttons */
#stats-content > div:first-child {
flex-wrap: wrap !important;
gap: 4px !important;
}
/* 4-Spalten Stat-Cards → 2 Spalten */
#stats-content .g4 {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
#stats-content .stat-card {
padding: 10px !important;
}
#stats-content .stat-v {
font-size: 16px !important;
}
#stats-content .stat-l {
font-size: 8px !important;
}
/* 2-Spalten Charts → 1 Spalte */
#stats-content .g2 {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Bar-Charts auf volle Breite */
#stats-content .bar-chart {
height: 120px !important;
gap: 2px !important;
}
#stats-content .bc {
min-width: 0 !important;
}
#stats-content .bcl {
font-size: 7px !important;
}
/* Pie/Ring Charts */
#stats-content canvas,
#stats-content svg {
max-width: 100% !important;
height: auto !important;
}
/* Funnel: 4 Spalten → 2x2 Grid auf Mobile */
#stats-content > .card div[style*="grid-template-columns:repeat(4,1fr)"] {
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
}
/* Funnel-Boxen: Größen runter */
#stats-content > .card div[style*="grid-template-columns:repeat(4,1fr)"] > div {
padding: 10px 8px !important;
}
#stats-content > .card div[style*="grid-template-columns:repeat(4,1fr)"] > div > div[style*="font-size:28px"] {
font-size: 22px !important;
}
/* Funnel Footer-Zeile: stack */
#stats-content .card-header {
flex-wrap: wrap !important;
gap: 8px !important;
}
#stats-content .card-header > div[style*="font-size:22px"] {
font-size: 16px !important;
}
/* Tabellen in Statistiken */
#stats-content table {
font-size:var(--t-sm) !important;
}
#stats-content th,
#stats-content td {
padding: 6px 8px !important;
}
/* Haupt-Tabs */
#auto-main-tabs {
gap: 4px !important;
}
#auto-main-tabs .tab {
flex: 1 !important;
text-align: center !important;
font-size:var(--t-base) !important;
padding: 8px 6px !important;
}
/* Sub-Tabs (Ausstehend/Gesendet/Verworfen) */
#auto-tab-queue .tabs .tab {
font-size:var(--t-sm) !important;
padding: 6px 10px !important;
flex-shrink: 0 !important;
}
/* Automation-Einträge */
#auto-pend-list > div,
#auto-sent-list > div,
#auto-dis-list > div {
padding: 10px 12px !important;
font-size:var(--t-base) !important;
}
/* Setup-Tab: Abschnitte */
#auto-tab-setup .card {
padding: 12px !important;
margin-bottom: 10px !important;
}
#auto-tab-setup .form-row-2,
#auto-tab-setup .form-row-3 {
grid-template-columns: 1fr !important;
}
/* Toggle-Switches nebeneinander */
#auto-tab-setup [style*="display:flex"][style*="align-items:center"] {
flex-wrap: wrap !important;
gap: 8px !important;
}
/* Action-Buttons */
#auto-tab-setup .btn {
min-height: 40px !important;
font-size:var(--t-base) !important;
}
/* Header-Row: vertikal stapeln */
.anf-header-row {
flex-direction: column !important;
gap: 10px !important;
padding-bottom: 12px !important;
margin-bottom: 12px !important;
}
/* Avatar + Name: horizontal in einer Zeile */
.anf-header-row > div:first-child { display: none !important; } /* Avatar weg - spart Platz */
.anf-header-row > div:nth-child(2) {
font-size:var(--t-lg) !important;
white-space: normal !important;
}
.anf-header-row > div:nth-child(2) > div:first-child {
font-size:var(--t-lg) !important;
font-weight: 700 !important;
white-space: normal !important;
}
/* Stats: kompakte horizontale Leiste */
.anf-stats {
width: 100% !important;
border-left: none !important;
border-right: none !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
background: rgba(0,0,0,.2) !important;
justify-content: space-around !important;
}
.anf-stats > div {
padding: 8px 10px !important;
flex: 1 !important;
}
.anf-stats > div > div:first-child {
font-size: 8px !important;
letter-spacing: .5px !important;
}
.anf-stats > div > div:last-child {
font-size: 16px !important;
font-weight: 700 !important;
}
/* Action-Buttons: 4er Grid */
.anf-actions {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
width: 100% !important;
max-width: 100% !important;
}
.anf-actions .btn {
padding: 8px 4px !important;
min-height: 56px !important;
font-size:var(--t-xs) !important;
font-weight: 600 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
white-space: normal !important;
text-align: center !important;
line-height: 1.2 !important;
border-radius: var(--r) !important;
}
/* Löschen und 💾 Speichern: 2 Spalten breit */
.anf-actions .btn-danger { grid-column: span 2 !important; }
.anf-actions .btn-primary { grid-column: span 2 !important; min-height: 44px !important; flex-direction: row !important; font-size:var(--t-md) !important; }
/* Erstkontakt-Button (v5.29): Mobile-only, volle Breite, WhatsApp-Grün */
.anf-actions .anf-kennenlern-btn {
display: flex !important;
grid-column: span 4 !important;
flex-direction: row !important;
background: var(--c-whatsapp) !important;
border: 1px solid var(--c-whatsapp-brd) !important;
color: #fff !important;
font-weight: 700 !important;
font-size:var(--t-md) !important;
gap: 8px !important;
min-height: 48px !important;
}
/* Event-Chips: 2er Grid */
.anf-chips {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
.anf-chips > div {
padding: 8px 10px !important;
}
.anf-chips > div > div:first-child {
font-size: 8px !important;
margin-bottom: 3px !important;
}
.anf-chips > div > div:nth-child(2) {
font-size:var(--t-md) !important;
font-weight: 700 !important;
}
/* Detail-Hero Hintergrund auf Mobile etwas kompakter */
#view-anfrage-detail .detail-hero {
padding: 12px !important;
}
/* Wert-Anzeige (geschätzter Umsatz) unter den Chips */
.anf-wert-row {
margin-top: 8px !important;
font-size:var(--t-base) !important;
}
/* Action-Buttons: einheitlich */
.anf-action-btn {
padding: 12px 10px !important;
text-align: center !important;
font-size:var(--t-sm) !important;
white-space: normal !important;
line-height: 1.4 !important;
justify-content: center !important;
flex-direction: column !important;
align-items: center !important;
gap: 4px !important;
min-height: 56px !important;
}
/* Erstkontakt-Button (v5.29): Default versteckt — wird nur auf Mobile via Media-Query sichtbar */
.anf-kennenlern-btn {
display: none !important;
}
@media (min-width: 769px) {
.anf-kennenlern-btn,
.anf-actions .anf-kennenlern-btn,
.anf-actions[data-mob] .anf-kennenlern-btn {
display: none !important;
}
}
.anf-action-locked {
display: flex;
align-items: center;
justify-content: center;
padding: 12px 10px;
font-size:var(--t-xs);
color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--r);
min-height: 44px;
}
/* Admin-Sections (v5.47) — einheitliche kompakte Sektion-Boxen */
div.admin-tab-content div.admin-section,
.admin-section {
background-color: rgba(255, 255, 255, 0.04) !important;
background-image: linear-gradient(180deg, rgba(200,168,75,0.025), rgba(200,168,75,0.01)) !important;
border: 1px solid rgba(200,168,75,0.18) !important;
border-radius: var(--r) !important;
padding: 18px 20px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03) !important;
}
.admin-section-title {
font-size:var(--t-sm) !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
color: var(--gold) !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid var(--border) !important;
}
.admin-sec-list{
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--r);
background: rgba(0,0,0,0.18);
overflow: hidden;
}
.admin-sec-list .asl-row{
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-top: 1px solid var(--border);
transition:background-color var(--tr-fast);
}
.admin-sec-list .asl-row:first-child{
border-top: none;
}
.admin-sec-list .asl-row:hover{
background: var(--gold-a04);
}
.admin-sec-list .asl-row.asl-row-danger:hover{
background: rgba(231,76,60,0.05);
}
.admin-sec-list .asl-icon{
font-size: 20px;
line-height: 1;
width: 28px;
flex-shrink: 0;
text-align: center;
text-transform: none;
}
.admin-sec-list .asl-text{
flex: 1 1 auto;
min-width: 0;
text-transform: none;
}
.admin-sec-list .asl-title{
font-size:var(--t-md);
font-weight: 600;
color: var(--text);
letter-spacing: .2px;
margin-bottom: 2px;
text-transform: none;
}
.admin-sec-list .asl-desc{
font-size: 11.5px;
color: var(--muted);
line-height: 1.4;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
}
.admin-sec-list .asl-row.asl-row-danger .asl-title{
color: var(--s-abs);
}
.admin-sec-list .asl-btn{
-webkit-appearance: none;
appearance: none;
flex-shrink: 0;
padding: 7px 14px;
border-radius:var(--r);
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
cursor: pointer;
font-family: var(--font-b);
font-size:var(--t-sm);
font-weight: 600;
text-transform: uppercase;
letter-spacing: .8px;
transition:all var(--tr-fast);
min-width: 88px;
text-align: center;
}
.admin-sec-list .asl-btn:hover{
border-color: var(--gold);
color: var(--gold);
background: var(--gold-a06);
}
.admin-sec-list .asl-btn-danger{
border-color: rgba(231,76,60,.4);
color: var(--s-abs);
}
.admin-sec-list .asl-btn-danger:hover{
background: rgba(231,76,60,0.10);
border-color: var(--s-abs);
color: #fff;
}
/* Mobile: Beschreibung wird kleiner, Layout bleibt 3-Spaltig */
@media (max-width: 600px){
.admin-sec-list .asl-row{
padding: 12px 12px;
gap: 10px;
}
.admin-sec-list .asl-icon{
font-size:var(--t-xl);
width: 22px;
}
.admin-sec-list .asl-desc{
font-size: 11px;
/* auf Mobile mehr abkürzen damit Button-Platz bleibt */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-sec-list .asl-btn{
padding: 6px 10px;
font-size:var(--t-xs);
min-width: 70px;
}
}
/* Light Mode */
body.light .admin-sec-list{
background: rgba(0,0,0,0.02);
border-color: rgba(0,0,0,0.10);
}
body.light .admin-sec-list .asl-row{
border-top-color: rgba(0,0,0,0.08);
}
body.light .admin-sec-list .asl-row:hover{
background: var(--gold-a08);
}
.admin-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.admin-row > .btn,
.admin-row > label.btn {
flex: 1 1 0;
min-width: 0;
min-height: 36px;
padding: 6px 10px;
font-size:var(--t-base);
justify-content: center;
text-align: center;
}
.admin-info-row {
margin-top: 8px;
padding: 7px 10px;
background: rgba(0,0,0,0.18);
border-radius:var(--r-sm);
font-size:var(--t-xs);
font-family: var(--font-b);
color: var(--muted);
line-height: 1.5;
}
/* Mobile: Admin-Sections — Buttons stapeln */
@media (max-width: 768px) {
.admin-row {
flex-direction: column;
gap: 6px;
}
.admin-row > .btn,
.admin-row > label.btn {
flex: 1 1 100%;
width: 100%;
min-height: 42px;
font-size:var(--t-md);
}
}
/* Admin-Tab Tabellen-Stil (v5.34) — Desktop */
.admin-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
.admin-table th,
.admin-table td {
white-space: nowrap;
}
/* Status-Spalte darf umbrechen falls mehrere Badges (z.B. GEBUCHT + GEDRUCKT) */
.admin-table td:has(.badge + .badge) { white-space: normal; }
.card > .admin-table th:first-child { padding-left: 16px; }
.card > .admin-table td:first-child { padding-left: 16px; }
.card > .admin-table th:last-child { padding-right: 16px; }
.card > .admin-table td:last-child { padding-right: 16px; }
.card > .admin-table thead th {
position: sticky;
top: 0;
z-index: 1;
}
/* Card-Hintergrund für Admin-Tabelle */
#admin-list .card {
background: var(--surface) !important;
border: 1px solid rgba(200,168,75,0.14) !important;
}
/* Header Gold-Tint */
#admin-list .admin-table thead th {
background: rgba(200,168,75,0.07) !important;
border-bottom: 1px solid rgba(200,168,75,0.18) !important;
}
/* Zebra */
#admin-list .admin-table tbody tr:nth-child(even) td {
background: rgba(255,255,255,0.025) !important;
}
/* Hover — gesamte Zeile */
#admin-list .admin-table tbody tr {
transition: background 0.1s;
}
#admin-list .admin-table tbody tr:hover td {
background: rgba(200,168,75,0.10) !important;
}
/* Gold-Linie links beim Hover */
#admin-list .admin-table tbody tr td:first-child {
border-left: 3px solid transparent;
transition: border-color 0.1s;
}
#admin-list .admin-table tbody tr:hover td:first-child {
border-left: 3px solid var(--gold) !important;
}
.admin-table thead th .admin-col-resize {
background: transparent;
transition: background 0.15s;
}
.admin-table thead th .admin-col-resize:hover {
background: rgba(200,168,75,0.3);
}
.admin-table thead th .admin-col-resize:active {
background: var(--gold);
}
/* Sortier-Pfeile in TH dezenter */
.admin-table th[onclick]:hover {
background: var(--gold-a06);
color: var(--gold) !important;
}
@media (min-width: 769px) {
.admin-table th,
.admin-table td { white-space: nowrap !important; }
/* Feste Default-Breiten (überschreibbar via Drag-Resize) */
.admin-table th:nth-child(1), .admin-table td:nth-child(1) { min-width: 110px; } /* Nr (AB-2026-027-01) */
.admin-table th:nth-child(2), .admin-table td:nth-child(2) { min-width: 170px; } /* Typ (Auftragsbestätigung) */
.admin-table th:nth-child(3), .admin-table td:nth-child(3) { min-width: 220px; } /* Kunde (kann breiter werden) */
.admin-table th:nth-child(4), .admin-table td:nth-child(4) { min-width: 100px; } /* Erstellt */
.admin-table th:nth-child(5), .admin-table td:nth-child(5) { min-width: 110px; } /* Eventdatum */
.admin-table th:nth-child(6), .admin-table td:nth-child(6) { min-width: 110px; } /* Betrag */
.admin-table th:nth-child(7), .admin-table td:nth-child(7) { min-width: 120px; } /* Status */
.admin-table th:nth-child(8), .admin-table td:nth-child(8) { min-width: 110px; } /* Aktionen */
/* Tabelle scrollt horizontal in Card wenn nötig */
.card > .admin-table { min-width: 100%; }
}
.admin-table th {
text-align: left;
padding: 8px 10px;
font-size:var(--t-xs);
color: var(--muted);
border-bottom: 1px solid var(--border);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
}
.admin-table tbody tr {
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover {
background: rgba(200,168,75,0.03);
}
.admin-table td {
padding: 11px 10px;
font-size:var(--t-base);
vertical-align: middle;
}
.admin-table td.admin-nr { font-size:var(--t-sm); color: var(--muted); white-space: nowrap; }
.admin-table td.admin-betrag {
font-size:var(--t-md); color: var(--gold);
font-family: var(--font-h); font-weight: 700;
white-space: nowrap; /* Beträge nicht umbrechen */
}
.admin-table td.admin-actions { text-align: right; white-space: nowrap; }
@media (min-width: 769px) {
/* Header dunkler abgesetzt */
.admin-table thead th {
background: rgba(0,0,0,0.25) !important;
border-bottom: 1px solid var(--border) !important;
}
/* Zebra-Streifen: jede zweite Zeile etwas heller */
.admin-table tbody tr:nth-child(even) {
background: rgba(255,255,255,0.015);
}
.admin-table tbody tr:nth-child(odd) {
background: rgba(255,255,255,0);
}
/* Hover bleibt Vorrang */
.admin-table tbody tr:hover {
background: var(--gold-a06) !important;
}
/* Senkrechte Trennstriche zwischen Spalten — dezent gold-getönt */
.admin-table thead th:not(:last-child),
.admin-table tbody td:not(:last-child) {
border-right: 1px solid var(--gold-a08);
}
/* Header-Trennstriche etwas kräftiger */
.admin-table thead th:not(:last-child) {
border-right-color: var(--gold-a15);
}
.admin-table tbody tr[data-doctyp="Angebot"] td:nth-child(1) {
border-left: 3px solid var(--c-info);
color: #5DADE2;
}
.admin-table tbody tr[data-doctyp="Auftragsbestätigung"] td:nth-child(1) {
border-left: 3px solid #9B59B6;
color: #BB8FCE;
}
.admin-table tbody tr[data-doctyp="Rechnung"] td:nth-child(1) {
border-left: 3px solid var(--s-best);
color: #58D68D;
}
.admin-table tbody tr[data-doctyp="Mahnung"] td:nth-child(1) {
border-left: 3px solid var(--s-abs);
color: #EC7063;
}
/* Anfragen (haben keine Doktyp-Daten, kriegen goldene Markierung) */
.admin-table tbody tr[data-doctyp="Anfrage"] td:nth-child(1) {
border-left: 3px solid var(--gold);
}
/* Typ-Spalte in Doktyp-Farbe einfärben */
.admin-table tbody tr[data-doctyp="Angebot"] td:nth-child(2) { color: #5DADE2; font-weight: 600; }
.admin-table tbody tr[data-doctyp="Auftragsbestätigung"] td:nth-child(2) { color: #BB8FCE; font-weight: 600; }
.admin-table tbody tr[data-doctyp="Rechnung"] td:nth-child(2) { color: #58D68D; font-weight: 600; }
.admin-table tbody tr[data-doctyp="Mahnung"] td:nth-child(2) { color: #EC7063; font-weight: 600; }
/* Kunde: hervorgehoben, ist die Hauptinfo der Zeile */
.admin-table td:nth-child(3) {
color: var(--text);
font-weight: 600;
}
/* Erstellt: dezent (Hilfsdatum) */
.admin-table td:nth-child(4) {
color: rgba(255,255,255,0.55);
font-size: 11.5px;
}
/* Eventdatum: kräftiger als Erstelldatum */
.admin-table td:nth-child(5) {
color: rgba(255,255,255,0.85);
font-weight: 500;
}
/* Betrag: Gold */
.admin-table td:nth-child(6),
.admin-table td.admin-betrag {
color: var(--gold) !important;
font-family: var(--font-h);
font-weight: 700;
font-size:var(--t-md);
}
}
/* Admin-Tab Mobile (v5.34): Tabelle wird via CSS zur Card-Liste */
@media (max-width: 768px) {
/* Tabellen-Struktur aufbrechen: alles wird zu Block-Elementen */
.admin-table,
.admin-table thead,
.admin-table tbody,
.admin-table tr,
.admin-table td {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Header verstecken — die Labels kommen über data-label */
.admin-table thead {
display: none !important;
}
/* Jede Zeile ist eine Card */
.admin-table tr {
background: var(--surface-2) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r) !important;
padding: 12px !important;
margin-bottom: 8px !important;
}
/* Jede Zelle bekommt ihr Label vorgesetzt */
.admin-table td {
border: none !important;
padding: 4px 0 !important;
font-size:var(--t-md) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
text-align: left !important;
white-space: normal !important;
}
.admin-table td::before {
content: attr(data-label);
flex-shrink: 0;
width: 70px;
font-size:var(--t-xs);
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Inhalt der Zelle füllt den Rest */
.admin-table td > * {
flex: 1;
min-width: 0;
word-break: break-word;
}
/* Action-Cell ohne Label, voller Breite */
.admin-table td.admin-actions {
margin-top: 8px;
padding-top: 8px !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.admin-table td.admin-actions::before {
display: none;
}
.admin-table td.admin-actions .btn {
width: 100% !important;
min-height: 38px !important;
}
/* Spezial-Styling für Nr. und Betrag bleibt auch mobil erhalten */
.admin-table td.admin-nr { color: var(--gold) !important; font-weight: 700 !important; font-size:var(--t-sm) !important; letter-spacing: 1px; }
.admin-table td.admin-betrag { font-size:var(--t-lg) !important; color: var(--gold) !important; font-family: var(--font-h) !important; font-weight: 700 !important; }
}
/* Admin-Tab Mobile (v5.32+v5.35): Filter-Buttons + Backup-Buttons */
@media (max-width: 768px) {
/* Filter-Buttons-Reihe horizontal scrollbar (statt zu wrappen) */
.admin-filter-row {
display: none !important;
}
/* (v5.47: .admin-backup-row durch .admin-row ersetzt — alte Regeln entfernt) */
/* Admin-PIN-Eingabe auf Mobile: Volle Breite, gestapelt */
#admin-lock > div[style*="display:flex"] {
flex-direction: column !important;
align-items: stretch !important;
}
#admin-pin-input {
width: 100% !important;
box-sizing: border-box !important;
}
}
/* Card-Header Buttons (+ NEU, ALLE →) kompakter */
#view-dashboard .card-header .btn {
min-height: 32px !important;
padding: 5px 12px !important;
font-size:var(--t-sm) !important;
font-weight: 700 !important;
}
/* Timeline Mobile: 4 in einer Reihe, kompakt */
.wf-timeline > div { padding: 6px 5px !important; min-width: 0 !important; }
.wf-timeline > div span[style*="font-size:var(--t-xs)"] { font-size: 7px !important; letter-spacing: 0 !important; white-space: normal !important; word-break: break-word !important; }
.wf-timeline > div span[style*="font-size:var(--t-xs)"],
.wf-timeline > div div[style*="font-size:var(--t-xs)"] { font-size: 7px !important; }
.wf-timeline > div div[style*="font-size:8px"] { font-size: 7px !important; }
.wf-timeline > div span[style*="font-size:var(--t-base)"] { font-size:var(--t-xs) !important; }
#view-kalender .toolbar {
flex-wrap: wrap !important;
gap: 6px !important;
padding: 6px 0 !important;
}
/* Kalender Toolbar Mobile */
#view-kalender > div:first-child {
flex-wrap: wrap !important;
gap: 8px !important;
}
/* Navigation (‹ Monat ›) + Heute */
#view-kalender > div:first-child > div:first-child {
flex: 1 !important;
gap: 6px !important;
}
/* Monat/Woche Toggle + ICS + Termin → eigene Zeile */
#view-kalender > div:first-child > div:last-child {
width: 100% !important;
justify-content: space-between !important;
}
/* ICS Button: kompakt */
#view-kalender .btn-secondary[onclick*="ICS"] {
padding: 6px 10px !important;
font-size:var(--t-sm) !important;
min-height: 36px !important;
}
/* + Termin Button */
#view-kalender .btn-primary[onclick*="anfrage-neu"] {
padding: 6px 12px !important;
font-size:var(--t-base) !important;
min-height: 36px !important;
}
/* Mobile Kalender: Sidebar als Agenda-View oben, Grid aufklappbar darunter */
#cal-layout {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#cal-sidebar {
display: block !important;
order: -1 !important;
}
#cal-main {
display: none; /* Standard: Grid versteckt, per _calToggleMobGrid() öffenbar */
}
#cal-mob-agenda-header {
display: block !important;
}
.cal-cell { padding: 2px !important; min-height: 54px !important; }
.cal-day-num { font-size:var(--t-sm) !important; }
/* Zellen auf Mobile - viel größer */
.cal-day {
min-height: 70px !important;
padding: 3px !important;
}
.cal-dn2 {
font-size:var(--t-base) !important;
margin-bottom: 2px !important;
}
.cal-dn {
font-size:var(--t-xs) !important;
padding: 4px 2px !important;
}
.cal-event-pill { font-size: 8px !important; padding: 1px 3px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; }
.cal-feiertag, .cal-ferien { font-size: 7px !important; padding: 0 !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
#cal-auslastung { font-size:var(--t-xs) !important; }
/* Sidebar als aufklappbares Panel */
/* Stat-Cards: kompakter, Mini-Charts kleiner */
#view-dashboard .stat-card {
padding: 10px 12px !important;
}
#view-dashboard .stat-v {
font-size: 20px !important;
line-height: 1.1 !important;
}
#view-dashboard .stat-l {
font-size:var(--t-xs) !important;
margin-top: 3px !important;
}
/* Mini-Charts (Balken) im Stat-Card: kleiner */
#view-dashboard .stat-card canvas,
#view-dashboard .stat-card svg {
max-height: 40px !important;
margin-top: 4px !important;
}
#view-dashboard .stat-card > div[style*="display:flex"][style*="gap"] {
gap: 2px !important;
}
/* g5 Stats-Grid: 2er Grid auf Mobile */
#dash-stats {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
/* Jahresprognose (letzter Stat) → volle Breite */
#dash-stats > .stat-card:last-child {
grid-column: span 2 !important;
}
/* Next-Event: Nächste Events (3-Spalten → 1-Spalten) */
#dash-next-event > div[style*="display:flex"] {
flex-direction: column !important;
gap: 8px !important;
}
#dash-next-event .next-event-col-1,
#dash-next-event .next-event-col-2 {
display: none !important;
}
#dash-next-event .next-event-col-0 {
display: block !important;
flex: none !important;
width: 100% !important;
}
/* Mobile: Datumskachel braucht overflow visible für Countdown-Badge */
#dash-next-event .event-card{overflow:visible !important}
#dash-next-event .event-card > div[style*="border-radius:var(--r)"]{overflow:visible !important}
/* Ring-Charts auf Mobile verstecken (zu klein um lesbar zu sein) */
#dash-next-event [style*="border-radius:var(--r-full)"],
#dash-next-event svg {
display: none !important;
}
/* Hauptgrid: 3-Spalten → 1 Spalte */
.dash-main-grid {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* Aktive-Anfragen Liste: kompakter */
#dash-anfragen > div {
padding: 10px 0 !important;
border-bottom: 1px solid var(--border) !important;
font-size:var(--t-md) !important;
}
/* Heatmap-Labels lesbar */
#dash-wt-heatmap {
font-size:var(--t-xs) !important;
}
/* Offene Rechnungen: Beträge rechtsbündig */
#view-dashboard [style*="justify-content:space-between"] {
flex-wrap: nowrap !important;
}
body { overscroll-behavior: contain !important; }
*:focus-visible {
outline: 2px solid var(--gold) !important;
outline-offset: 2px !important;
}
#toast-container, .toast {
bottom: 90px !important; /* Über Bottom-Nav/FAB */
font-size:var(--t-md) !important;
padding: 12px 18px !important;
}
}
/* ─────────────────────────────────────────── */
/* Tab-Content Sichtbarkeit — !important damit Inline-Styles und Wrapper nichts kaputt machen */
.admin-tab-content { display: none !important; }
.admin-tab-content.active { display: block !important; }
.admin-tab-content[data-admin-pane="werkzeuge"].active { display: flex !important; flex-direction: column !important; gap: 18px !important; }
/* Wrapper-Layout: Tabs links, Undo-Pill rechts */
/* E-Mail Sub-Tabs */
.email-sub-tabs { margin-bottom: 18px; }
.email-sub-tabs .email-tab { cursor: pointer; }
.admin-sub-tabs-wrap {
position: relative;
margin-top: 4px;
margin-bottom: 18px;
width: 100%;
}
.admin-sub-tabs-wrap .tabs.admin-sub-tabs {
margin-bottom: 0;
padding-right: 140px;
}
.admin-sub-tabs-wrap .admin-undo-pill {
position: absolute;
right: 0;
bottom: 6px;
}
@media (max-width: 700px){
.admin-sub-tabs-wrap .tabs.admin-sub-tabs { padding-right: 0; }
.admin-sub-tabs-wrap .admin-undo-pill {
position: static;
margin-top: 8px;
}
/* ──── POSTFACH + POSTEINGANG MOBILE ──── */
[data-af-tab="postfach"]{
height: calc(100vh - 180px) !important;
min-height: 0 !important;
}
[data-af-tab="postfach"] > div{
flex-direction: column !important;
}
#pf-left-col, #pi-left-col{
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-right: none !important;
flex: 1 1 auto !important;
}
#pf-resize-handle, [onmousedown*="pi-left-col"]{
display: none !important;
}
/* Detail-Pane auf Mobile: rechte Spalte versteckt — Inhalt erscheint im pf-mobile-modal */
[data-af-tab="postfach"] > div > div:last-child:not(#pf-left-col){
display: none !important;
}
/* Mail-Liste: Bottom-Padding damit letzte Mails nicht hinter Bottom-Nav verschwinden */
#postfach-list, [id$="-mail-list"]{
padding-bottom: 80px !important;
}
/* ──── COMPOSE-MODAL MOBILE — Vollbild, kompakte Toolbar ──── */
#compose-modal{
padding: 0 !important;
align-items: stretch !important;
justify-content: stretch !important;
}
#cm-inner{
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
min-height: 100vh !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
resize: none !important;
}
/* Header-Toolbar: kompakt, Buttons kleiner */
#cm-inner > div:first-child{
padding: 8px 10px !important;
gap: 6px !important;
}
#cm-title{
font-size: 10px !important;
width: 100%;
margin-bottom: 4px;
}
#cm-inner > div:first-child .btn-primary{
padding: 7px 12px !important;
font-size: 11px !important;
}
#cm-inner > div:first-child .btn-ghost{
padding: 6px 8px !important;
min-width: 36px !important;
font-size: 13px !important;
}
#cm-char-count, #cm-status{
display: none !important;
}
/* Recipient-Felder kompakter */
#cm-inner input[id^="cm-"]{
padding: 10px 0 !important;
font-size: 14px !important;
}
#cm-inner input#cm-priority,
#cm-inner input#cm-read-receipt,
#cm-inner input#cm-sig-toggle{
display: none !important;
}
#cm-inner label{
width: 42px !important;
font-size: 9px !important;
}
/* Body: maximaler Platz */
#cm-body{
flex: 1 !important;
min-height: 0 !important;
padding: 12px 14px !important;
font-size: 14px !important;
}
/* Format-Toolbar Mobile: kompakter + horizontaler Scroll */
#cm-format-bar{
padding: 4px 8px !important;
gap: 0 !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
}
#cm-format-bar::-webkit-scrollbar{ display: none; }
#cm-format-bar select{
font-size: 10px !important;
padding: 3px 4px !important;
min-width: auto !important;
}
#cm-format-bar #cm-font{ width: 70px !important; min-width: 70px !important; }
#cm-format-bar #cm-size{ width: 42px !important; }
.cm-fmt-btn{
padding: 4px 6px !important;
min-width: 26px !important;
height: 26px !important;
font-size: 11px !important;
}
/* Quote-Block: kompakter, max 35vh */
#cm-quote-wrap{
max-height: 35vh !important;
}
#cm-quote-preview{
font-size: 12px !important;
padding: 10px 14px 10px 16px !important;
margin-left: 10px !important;
}
/* Attachments-Chips kompakt */
#cm-attachments{
padding: 6px 10px !important;
}
/* Filter-Tabs auf Mobile: Horizontal scrollbar statt wrap */
#postfach-tabs, #pi-tabs{
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none;
}
#postfach-tabs::-webkit-scrollbar, #pi-tabs::-webkit-scrollbar{ display: none; }
#postfach-tabs > button, #pi-tabs > button{
flex: 0 0 auto !important;
min-width: 44px !important;
}
/* Detail-Toolbar: kompakter auf Mobile */
#postfach-detail .btn{
padding: 6px 10px !important;
font-size: 11px !important;
}
/* Compose-Modal: Tastatur-Handling */
#compose-modal{
width: 100% !important;
height: 100% !important;
max-height: 100vh !important;
border-radius: 0 !important;
inset: 0 !important;
}
#cm-body{
min-height: 120px !important;
max-height: 35vh !important;
}
/* Quick-Actions auf Touch: standardmäßig versteckt — per Swipe-Left aufdeckbar */
.pf-quick-actions{
display: none !important;
}
.pf-item.pf-swiped .pf-quick-actions{
display: flex !important;
opacity: 0.95;
background: var(--surface-2) !important;
}
/* Bei aktivem Swipe: pointer-events nur auf den Actions, nicht auf der Mail */
.pf-item.pf-swiped > *:not(.pf-quick-actions){
opacity: 0.6;
}
/* Globale Suche + Sort: größere Touch-Targets */
#postfach-search ~ button{
min-width: 38px !important;
min-height: 36px !important;
}
/* Listenzeile: mehr Padding für Touch */
.pf-item{
padding: 14px 12px 12px !important;
}
}
/* Rückgängig-Button als Pill */
.admin-undo-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: transparent;
border: 1px solid var(--border);
border-radius:var(--r);
color: var(--muted);
font-family: var(--font-b);
font-size:var(--t-sm);
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
cursor: pointer;
transition:all var(--tr-base);
margin-bottom: 6px;
}
.admin-undo-pill .undo-icon { font-size:var(--t-lg); line-height: 1; }
.admin-undo-pill:not(:disabled):hover {
border-color: var(--s-best);
color: var(--s-best);
background: rgba(39,174,96,0.06);
}
.admin-undo-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-undo-pill.has-undo {
border-color: var(--s-best);
color: var(--s-best);
background: rgba(39,174,96,0.08);
animation: undoPulse 2s ease-in-out infinite;
}
.admin-undo-pill.has-undo .undo-count {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius:var(--r-full);
background: var(--s-best);
color: #fff;
font-size:var(--t-xs);
font-weight: 700;
}
@keyframes undoPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(39,174,96,0.4); }
50% { box-shadow: 0 0 0 6px rgba(39,174,96,0); }
}
/* ─────────────────────────────────────────── */
.ki-tag{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r-xl);padding:3px 10px;font-size:var(--t-sm);color:var(--muted);cursor:pointer;transition:all var(--tr-fast);user-select:none}
.ki-tag.active{background:var(--gold-a12);border-color:var(--gold);color:var(--gold)}
.ki-tag:hover:not(.active){border-color:rgba(200,168,75,0.3);color:var(--text)}
.ki-variant{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--r);padding:10px 14px;cursor:pointer;transition:all var(--tr-mid);position:relative}
.ki-variant:hover{border-color:rgba(200,168,75,0.3)}
.ki-variant.sel{border-color:var(--gold);background:var(--gold-a08)}
.ki-vlabel{font-size:var(--t-xs);font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.ki-vtext{font-size:var(--t-base);color:var(--text);line-height:1.6;white-space:pre-wrap}
@keyframes kiBlink{0%,100%{opacity:1}50%{opacity:.15}}
/* 100dvh Fallback für ältere Browser (kein Dynamic Viewport) */
@supports not (height: 100dvh) {
html, body { height: 100vh !important; }
}
/* ── Utility-Klassen (v10.70 — ersetzt häufige inline-styles) ── */
/* ── t-* Konsolidierung v6.09g — Multi-Selektoren ──────────────────────
Alle folgenden Klassen haben identischen CSS-Body. HTML bleibt unverändert. */
/* 11px muted (274× gesamt: t-sm-mu 131, t-xs-mu 78, t-sm-muted 65) */
.t-sm-mu,.t-xs-mu,.t-sm-muted{font-size:11px;color:var(--muted)}
/* 11px muted margin-top:2px (67× gesamt) */
.t-xs-mu-mt,.t-sm-mu-mt,.t-11-muted-mt2{font-size:11px;color:var(--muted);margin-top:2px}
/* 10px muted weight:400 (15× gesamt) */
.t-xs-mu-w4,.t-10-muted-400{font-size:10px;color:var(--muted);font-weight:400}
/* 13px weight:600 (29× gesamt) */
.t-13-bold,.t-13-bold-b{font-size:13px;font-weight:600}
/* 13px weight:600 color:text (43× gesamt) */
.t-strong,.t-13-text{font-size:13px;font-weight:600;color:var(--text)}
.t-12-mu{font-size:12px;color:var(--muted)}
@media (max-width: 768px) {
.anf-chips{grid-template-columns:1fr 1fr !important;grid-auto-rows:auto !important;gap:6px !important;}
.anf-chip{min-height:0 !important;padding:8px 10px !important;overflow:hidden !important;}
.anf-chip-ghost{font-size:24px !important;}
.anf-chip-ort,#anfahrt-chip{grid-column:span 2 !important;}
.anf-chip-date{font-size:13px !important;white-space:nowrap !important;}
.anf-chip-time{font-size:11px !important;white-space:nowrap !important;}
}
/* ── Mobile Compose: Full-Screen ────────────────────────────────── */
@media (max-width: 768px) {
#compose-modal{
padding:0 !important;
align-items:stretch !important;
justify-content:stretch !important;
background:rgba(0,0,0,0.85) !important;
}
#cm-inner{
width:100% !important;
height:100% !important;
min-width:0 !important;
max-width:100% !important;
max-height:100% !important;
border-radius:0 !important;
resize:none !important;
/* Platz für visuelle Tastatur via JS */
}
/* Format-Toolbar auf Mobile kompakter */
#cm-format-bar{
gap:1px !important;
padding:4px 6px !important;
overflow-x:auto !important;
flex-wrap:nowrap !important;
}
#cm-format-bar button,
#cm-format-bar select{
flex-shrink:0 !important;
font-size:13px !important;
padding:6px 8px !important;
min-width:32px !important;
}
/* Body-Textarea füllt gesamten verbleibenden Platz */
#cm-body{
min-height:120px !important;
font-size:16px !important; /* Verhindert Zoom auf iOS */
}
/* Header-Buttons kleiner auf Mobile */
#cm-inner > div:first-child{
padding:8px 10px !important;
gap:4px !important;
}
}
/* ── Shared E-Mail Modal CSS ─────────────────────── */
/* Gilt für bpm-mail-modal (Erstkontakt + Quick) */
/* compose-modal hat eigene Dimensionen, nutzt diese Klassen nicht */
.bpm-mail-modal-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.97);
z-index:var(--z-lock);
align-items:center;
justify-content:center;
backdrop-filter:blur(4px);
}
.bpm-mail-modal-overlay.open{ display:flex; }
.bpm-mail-modal-box{
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--r);
padding:var(--card-pad);
max-width:620px;
width:95%;
max-height:90vh;
overflow-y:auto;
box-shadow:0 8px 40px rgba(0,0,0,.7);
}
.bpm-mail-modal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
cursor:move;
user-select:none;
}
.bpm-mail-modal-title{
font-family:var(--font-h);
font-size:15px;
letter-spacing:1px;
color:var(--gold);
}
.bpm-mail-modal-ki-panel{
margin-bottom:12px;
padding:12px;
background:var(--gold-a06);
border:1px solid rgba(200,168,75,0.2);
border-radius:var(--r);
}
.bpm-mail-modal-recipient{
font-size:12px;
color:var(--muted);
margin-bottom:14px;
padding:8px 12px;
background:var(--surface-2);
border-radius:var(--r);
border:1px solid var(--border);
}
/* ─────────────────────────────────────────── */
/* ── Anfragen View-Toggle ─────────────────── */
.a-view-toggle{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:2px}
.a-vt-btn{background:transparent;color:var(--muted);border:none;border-radius:var(--r-sm);padding:4px 8px;cursor:pointer;font-size:11px;font-weight:700;letter-spacing:1px;font-family:var(--font-b);transition:all var(--tr-mid)}
.a-vt-btn:hover{color:var(--text)}
.a-vt-btn.a-vt-active{background:var(--gold);color:var(--black)}
/* ── KI Dropdown Items ────────────────────── */
.ki-drop-item{display:flex;align-items:center;gap:6px;width:100%;background:transparent;border:none;color:rgba(255,255,255,0.65);font-size:11px;font-weight:600;padding:7px 12px;cursor:pointer;font-family:var(--font-b);text-align:left;transition:all var(--tr-fast)}
.ki-drop-item:hover{color:var(--gold);background:var(--gold-a08)}
/* ── Kalender Event-Liste ─────────────────── */
.cal-list-item-hover{transition:opacity var(--tr-mid)}.cal-list-item-hover:hover{opacity:.7}
/* v6.14h: Dashboard Gauge + Top-Kunden Layout — Mobile untereinander */
.dash-gauge-row { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr); gap: 16px; align-items: start; }
@media (max-width: 900px) {
.dash-gauge-row { grid-template-columns: 1fr !important; }
}
/* v6.14za1: Einstellungen-View Fullscreen — keine seitlichen Ränder */
#view-einstellungen.view.active {
padding: 0 !important;
}
/* v6.14za1: Sicherheits-Min-Width damit Settings-Spalte nicht komplett zusammenklappt */
#view-einstellungen #doc-settings-left {
min-width: 700px !important;
padding-left: 12px !important;
padding-right: 4px !important;
}
/* v6.14za1: Cards-Items min-width:0 damit sie shrinkbar sind im Grid (vorher quetschten sich Selects raus) */
#view-einstellungen .card.page-form .form-group {
min-width: 0;
}
/* v6.14za2: Nur DIREKTE Children der form-group bekommen 100% Breite —
inline-gestylte Inputs in verschachtelten Flex-Containern (z.B. SEPA QR Color-Picker) bleiben unangetastet */
#view-einstellungen .card.page-form .form-group > select,
#view-einstellungen .card.page-form .form-group > input:not([type="color"]):not([style*="width"]) {
width: 100% !important;
box-sizing: border-box !important;
}
/* v6.14za1: Card-Inhalt darf nicht über Card-Rand laufen */
#view-einstellungen .card.page-form {
overflow: visible !important;
}
/* v6.14za1: Live-Vorschau scrollbar machen falls Dokument breiter ist als Container */
#view-einstellungen #doc-settings-right {
overflow: auto !important;
}
/* v6.14za3: Settings-Cards kompakter (Variante E) — ~30% weniger Höhe pro Card */
#view-einstellungen .card.page-form {
padding: 8px 10px !important;
}
#view-einstellungen #doc-settings-left {
gap: 5px !important; /* war 10px */
}
#view-einstellungen .card.page-form .section-label-gold {
margin-bottom: 5px !important; /* war 12px */
font-size: 9px !important; /* war 10px */
}
#view-einstellungen .card.page-form .form-group {
margin-bottom: 5px !important; /* war 12px */
gap: 2px !important; /* war 4px */
}
#view-einstellungen .card.page-form .form-group label {
font-size: 9px !important;
letter-spacing: 0.8px !important;
}
/* form-group mb-0 weiter respektieren */
#view-einstellungen .card.page-form .form-group.mb-0 {
margin-bottom: 0 !important;
}
/* Inputs/Selects in Cards etwas kompakter */
#view-einstellungen .card.page-form select,
#view-einstellungen .card.page-form input[type="text"],
#view-einstellungen .card.page-form input[type="number"],
#view-einstellungen .card.page-form input[type="date"],
#view-einstellungen .card.page-form textarea {
padding: 5px 8px !important;
font-size: 12px !important;
}
/* v6.14za9: Doppelbuchungs-Badge im Kalender */
.cal-doppel-badge {
position: absolute;
top: 4px;
right: 4px;
z-index: 3;
font-size: 9px;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
letter-spacing: 0.3px;
white-space: nowrap;
pointer-events: none;
text-transform: uppercase;
}
.cal-doppel-hart {
background: #E74C3C;
color: white;
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 1px 4px rgba(231,76,60,.5);
animation: cal-doppel-pulse 2s ease-in-out infinite;
}
.cal-doppel-weich {
background: #F39C12;
color: #000;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}
@keyframes cal-doppel-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.cal-day.has-conflict-hart {
border-color: #E74C3C !important;
box-shadow: inset 0 0 0 1px rgba(231,76,60,.5);
}
.cal-day.has-conflict-weich {
border-color: rgba(243,156,18,.6) !important;
}
/* v6.14za10: Swipe-Animationen */
@keyframes slide-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Swipe-Cells: cursor und touch-action sodass horizontale Swipes nicht mit vertikalem Scroll konkurrieren */
tr.anf-kb-row[data-anf-id], .anf-card[data-anf-id] {
touch-action: pan-y; /* erlaubt vertikales Scrollen, blockiert horizontales (für Swipe-Detection) */
}
/* v6.14za15: Saved-Views-Tab-CSS entfernt (Feature rausgeworfen) */
/* v6.14za16: Activity-Stream — Kunden-Detail + Dashboard-Feed */
.kd-activity-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 14px;
border-bottom: 1px solid var(--border-2);
transition: background .12s;
}
.kd-activity-item:last-child { border-bottom: none; }
.kd-activity-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 4px;
}
.kd-activity-body { flex: 1; min-width: 0; }
.kd-activity-text { font-size: 12px; font-weight: 600; color: var(--text); }
.kd-activity-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.kd-activity-time { font-size: 10px; color: var(--faint); flex-shrink: 0; margin-top: 3px; }
/* Dashboard Activity-Feed */
.dash-activity-feed { display: flex; flex-direction: column; }
.dash-activity-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 14px;
border-bottom: 1px solid var(--border-2);
cursor: pointer;
transition: background .12s;
}
.dash-activity-item:hover { background: rgba(200,168,75,0.05); }
.dash-activity-item:last-child { border-bottom: none; }
.dash-activity-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.dash-activity-body { flex: 1; min-width: 0; }
.dash-activity-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-activity-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.dash-activity-when { font-size: 10px; color: var(--faint); flex-shrink: 0; white-space: nowrap; margin-top: 3px; }
/* v6.14zl: Placeholder in echten Eingabefeldern ausblenden — Suchfelder behalten ihren Placeholder */
input::placeholder,
textarea::placeholder {
color: transparent !important;
}
/* Ausnahmen: Suchleisten behalten sichtbaren Placeholder */
input[type="search"]::placeholder,
.search-bar::placeholder,
#global-search-input::placeholder,
#settings-search::placeholder,
#admin-dok-search::placeholder {
color: var(--faint) !important;
}
/* v6.14za19: Split-View */
tr.anf-split-active td { background: var(--gold-a08) !important; }
tr.anf-split-active { border-left-color: var(--gold) !important; }
#anfragen-split-panel { transition: width .2s ease; }
/* v6.14za23: Split-View — Flex-Row, .tw overflow-x:auto enthält Tabellen-Überlauf */
/* Der Schlüssel: anfragen-content hat overflow:hidden → Flex funktioniert
.tw darin hat overflow-x:auto → Tabelle kann bei Bedarf scrollen */
#anfragen-split-wrap {
display: flex;
flex-direction: row;
min-width: 0;
/* KEIN overflow:hidden hier — bricht position:sticky auf Panel */
align-items: flex-start; /* Panel nimmt nur seine eigene Höhe */
}
#anfragen-split-wrap #anfragen-content {
flex: 1;
min-width: 0;
overflow: hidden;
}
#anfragen-split-wrap #anfragen-content .tw {
overflow-x: auto;
max-width: 100%;
}
#anfragen-split-wrap #anfragen-split-panel {
flex-shrink: 0;
flex-grow: 0;
width: 360px;
align-self: flex-start;
/* v6.14za27: Smooth Slide + Fade */
transition: margin-top .25s cubic-bezier(.4, 0, .2, 1), opacity .15s ease;
opacity: 0;
border-radius: 8px;
margin-left: 8px;
box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
#anfragen-split-wrap #anfragen-split-panel[style*="display: flex"],
#anfragen-split-wrap #anfragen-split-panel[style*="display:flex"] {
opacity: 1;
}
/* Footer mit Shortcuts */
.split-shortcuts-footer {
position: sticky;
bottom: 0;
background: var(--surface-2);
border-top: 1px solid var(--border);
padding: 6px 12px;
font-size: 10px;
color: var(--faint);
display: flex;
gap: 12px;
justify-content: center;
}
.split-shortcuts-footer kbd {
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: 3px;
padding: 1px 5px;
font-family: var(--font-b);
font-size: 9px;
color: var(--muted);
}
/* Split-Panel Header kompakt */
#anfragen-split-header { min-height: 40px; }
#anfragen-split-content { font-size: 12px; }
tr.anf-split-active td { background: var(--gold-a08) !important; }
tr.anf-split-active { border-left-color: var(--gold) !important; }
/* v6.14za29: Quick-Filter Pills (Heute/Morgen/Woche/Monat) */
.qf-bar { display: flex; gap: 6px; align-items: center; }
.qf-btn {
padding: 6px 12px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 18px;
color: var(--muted);
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
white-space: nowrap;
letter-spacing: .2px;
}
.qf-btn:hover {
border-color: var(--gold-brd);
color: var(--text);
background: var(--gold-a04);
}
.qf-btn.active {
background: var(--gold);
color: var(--black);
border-color: var(--gold);
box-shadow: 0 2px 6px rgba(200,168,75,0.25);
}
.qf-btn-clear {
background: transparent;
border-color: rgba(231,76,60,0.4);
color: #E74C3C;
padding: 6px 9px;
font-weight: 700;
}
.qf-btn-clear:hover {
background: rgba(231,76,60,0.1);
border-color: #E74C3C;
}
/* v6.14za29: Settings-Polish */
/* Settings-Search prominenter mit Focus-Glow */
#settings-search:focus {
border-color: var(--gold) !important;
background: var(--surface-3) !important;
box-shadow: 0 0 0 3px var(--gold-a12);
}
/* Settings Cards mit Hover-Lift */
#view-einstellungen .card {
transition: border-color .15s, transform .15s;
}
#view-einstellungen .card:hover {
border-color: rgba(200,168,75,0.25);
}
/* v6.14za29: Posteingang Tab-Bar kompakter */
#pi-tabs .qf-btn {
padding: 5px 8px !important;
font-size: 10px !important;
letter-spacing: .4px;
text-transform: uppercase;
border-radius: 14px !important;
}
/* v6.14za30: Activity-Feed Details — Pfeil dreht beim Öffnen */
#dash-activity-details[open] summary .details-arrow {
transform: rotate(90deg);
}
#dash-activity-details summary::-webkit-details-marker { display: none; }
#dash-activity-details summary { outline: none; }
#dash-activity-details summary:hover .details-arrow { color: var(--gold); }
/* v6.14za31: Aufgaben-Filter Counter-Badge */
.auf-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
margin-left: 4px;
background: rgba(255,255,255,0.08);
border-radius: 9px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0;
}
.auf-filter-btn.active .auf-count {
background: rgba(0,0,0,0.18);
color: var(--black);
}
/* Überfällig-Button rot wenn aktiv */
.auf-filter-ueberfaellig.active {
background: #E74C3C !important;
color: #fff !important;
border-color: #E74C3C !important;
box-shadow: 0 2px 6px rgba(231,76,60,0.3) !important;
}
.auf-filter-ueberfaellig.active .auf-count {
background: rgba(0,0,0,0.25);
color: #fff;
}
/* Hover-State auf Überfällig (auch wenn nicht aktiv) zeigt rote Tendenz */
.auf-filter-ueberfaellig:not(.active):hover {
border-color: rgba(231,76,60,0.5);
color: #E74C3C;
}
/* v6.14za32: Kunden-Filter Counter-Badge */
.kd-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
margin-left: 4px;
background: rgba(255,255,255,0.08);
border-radius: 9px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0;
}
.kunden-filter-btn.active .kd-count {
background: rgba(0,0,0,0.18);
color: var(--black);
}
/* Favoriten-Filter: gold-haltige Sondernote auch wenn nicht aktiv */
.kunden-filter-fav:not(.active) {
color: var(--gold);
border-color: rgba(200,168,75,0.25);
}
.kunden-filter-fav:not(.active):hover {
background: var(--gold-a08);
border-color: var(--gold-brd);
}
/* v6.14za33: Dokumente-Filter Counter-Badge */
.dok-count, .dok-stat-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
margin-left: 4px;
background: rgba(255,255,255,0.08);
border-radius: 9px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0;
}
.dok-filter-btn.active .dok-count,
#dok-status-pills .qf-btn.active .dok-stat-count {
background: rgba(0,0,0,0.18);
color: var(--black);
}
/* Mahnungen/Überfällig: rote Akzente */
.dok-filter-mahnung:not(.active) {
color: #E74C3C;
border-color: rgba(231,76,60,0.25);
}
.dok-filter-mahnung:not(.active):hover {
background: rgba(231,76,60,0.08);
border-color: rgba(231,76,60,0.5);
}
.dok-filter-mahnung.active,
.dok-filter-ueberfaellig.active {
background: #E74C3C !important;
color: #fff !important;
border-color: #E74C3C !important;
box-shadow: 0 2px 6px rgba(231,76,60,0.3) !important;
}
.dok-filter-mahnung.active .dok-count,
.dok-filter-ueberfaellig.active .dok-stat-count {
background: rgba(0,0,0,0.25);
color: #fff;
}
.dok-filter-ueberfaellig:not(.active):hover {
border-color: rgba(231,76,60,0.5);
color: #E74C3C;
}
/* v6.14za34: Kalender-Filter Counter-Badge */
.cal-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 16px;
padding: 0 5px;
margin-left: 4px;
background: rgba(255,255,255,0.08);
border-radius: 9px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0;
}
.cal-filter-btn.active .cal-count {
background: rgba(0,0,0,0.18);
color: var(--black);
}
/* cal-filter-bar an Layout der anderen Filter angleichen */
.cal-filter-bar {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
}
.cal-filter-label {
font-size: 10px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-right: 4px;
}
/* v6.14zk: Autocomplete-Vorschläge und Spellcheck-Unterstreichungen global deaktivieren */
input, textarea, select {
autocomplete: off;
}
textarea {
spellcheck: false;
}
/* Chrome Autofill-Highlight entfernen */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px var(--surface-3) inset !important;
-webkit-text-fill-color: var(--text) !important;
caret-color: var(--text);
}
/* ── Mobile Bottom Sheet (v6.14za77) ─────────────────────────────── */
@media (max-width: 768px) {
.modal-bs-overlay {
align-items: flex-end !important;
padding: 0 !important;
background: rgba(0,0,0,0.6);
transition: opacity .3s ease;
}
.modal-bs-sheet {
width: 100% !important;
max-width: 100% !important;
max-height: 92vh;
border-radius: 16px 16px 0 0 !important;
background: var(--surface);
border: 1px solid var(--border);
border-bottom: none;
overflow-y: auto;
padding: 0;
transform: translateY(0);
transition: transform .3s cubic-bezier(.4,0,.2,1);
animation: bsSlideUp .3s cubic-bezier(.4,0,.2,1) both;
/* Drag handle */
padding-top: 20px;
}
.modal-bs-sheet::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--border);
border-radius: 2px;
margin: -14px auto 14px;
}
.modal-bs-sheet .modal-header {
padding: 12px 18px 10px;
border-bottom: 1px solid var(--border);
}
.modal-bs-sheet .modal-body {
padding: 16px 18px;
max-height: 70vh;
overflow-y: auto;
}
.modal-bs-sheet .modal-footer {
padding: 12px 18px 20px;
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
flex-wrap: wrap;
}
@keyframes bsSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
}
/* Dokumente-View: volle Breite — Tabelle braucht mehr Platz als andere Views */
#view-dokumente > *,
#view-dokument-detail > * {
max-width: 100% !important;
}
|