/* ====================================================================
   Marke: Logo & T-Signet von Tom's Handwerkerservice (js/brand.js)
   Logofarben: Anthrazit #1E2934, Stahlblau #1D4978 (dunkel: #5B8FC7)
   ==================================================================== */
:root{--logo-main:#1E2934;--logo-accent:#1D4978}
.theme-dark{--logo-main:#E7EEF2;--logo-accent:#5B8FC7}

/* Grundform des T: Teile einzeln animierbar */
.wm-t{display:block;overflow:visible}
.wm-t g{fill:currentColor}
.wm-t path,.wm-brand-svg path{transform-box:view-box}
.wm-t-bar,.wm-brand-svg .wm-t-bar{transform-origin:248px 39px} /* Mitte des Schraubenschlüssels */
.wm-t-leg,.wm-brand-svg .wm-t-leg{transform-origin:137px 249px}

/* Bauplan + Zeichnen (einmalig): Hilfslinien ziehen sich, der Umriss zeichnet sich nach,
   das T füllt sich, die Hilfslinien treten zurück */
.wm-hl{fill:none;stroke:var(--text-3);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.wm-t-bauen .wm-hl{animation:wmHlZiehen .6s cubic-bezier(.4,0,.2,1) forwards,wmHlWeg .7s 2.1s forwards}
.wm-t-bauen .wm-hl:nth-child(2){animation-delay:.08s,2.1s}
.wm-t-bauen .wm-hl:nth-child(3){animation-delay:.16s,2.1s}
.wm-t-bauen .wm-hl:nth-child(4){animation-delay:.24s,2.1s}
.wm-t-bauen .wm-hl:nth-child(5){animation-delay:.32s,2.1s}
.wm-t-bauen .wm-hl:nth-child(6){animation-delay:.4s,2.1s}
.wm-t-bauen .wm-tp{fill:transparent;stroke:currentColor;stroke-width:3.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:wmTZeichnen 1.1s .7s cubic-bezier(.45,0,.2,1) forwards,wmTFuellen .55s 1.75s forwards}
.wm-t-bauen .wm-t-leg-l{animation-delay:.85s,1.8s}
.wm-t-bauen .wm-t-leg-r{animation-delay:.95s,1.85s}
@keyframes wmHlZiehen{from{opacity:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes wmHlWeg{from{opacity:1;stroke-dashoffset:0}to{opacity:0;stroke-dashoffset:0}}
@keyframes wmTZeichnen{to{stroke-dashoffset:0}}
@keyframes wmTFuellen{from{stroke-dashoffset:0}to{fill:currentColor;stroke-width:0;stroke-dashoffset:0}}

/* Schlüssel "dreht" kurz */
@keyframes wmTSchrauben{0%,100%{transform:rotate(0)}30%{transform:rotate(-16deg)}60%{transform:rotate(6deg)}}

/* ─── Seitenleiste ─────────────────────────────────────────────────── */
.wm-brand{width:100%;cursor:pointer;display:flex;align-items:center;gap:10px;padding:2px 0}
.wm-brand-svg{width:100%;height:auto;display:block;color:var(--logo-main)}
.wm-brand-svg .wm-hl{stroke-width:3}
.wm-brand-svg.wm-t-bauen .wm-tp{stroke-width:6}
.wm-brand-svg .wm-logo-main{fill:var(--logo-main)}
.wm-brand-svg .wm-logo-accent{fill:var(--logo-accent)}
.wm-brand:hover .wm-t-bar{animation:wmTSchrauben .7s cubic-bezier(.3,.7,.3,1.3)}
.wm-brand-svg .wm-logo-main path:not(.wm-t-bar):not(.wm-t-leg),.wm-brand-svg .wm-logo-accent path{animation:wmFadeUp .6s 1.85s both}
@keyframes wmFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wm-brand-name{font-family:var(--font-head);font-weight:800;font-size:1.3rem;color:var(--logo-main)}
.wm-brand .wm-t{width:40px;color:var(--logo-main)}
html.theme-dark #sidebarBrandLogoImg{filter:none}

/* ─── Ladebildschirm ───────────────────────────────────────────────── */
.wm-loader{display:flex;flex-direction:column;align-items:center;gap:18px}
.wm-t-loop{width:96px;color:var(--logo-main)}
.wm-t-loop .wm-hl{animation:wmHlLoop 3.6s cubic-bezier(.4,0,.2,1) infinite}
.wm-t-loop .wm-tp{fill:transparent;stroke:currentColor;stroke-width:3.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:wmTLoop 3.6s cubic-bezier(.45,0,.2,1) infinite}
.wm-t-loop .wm-t-leg-l{animation-delay:.08s}
.wm-t-loop .wm-t-leg-r{animation-delay:.16s}
@keyframes wmHlLoop{0%{stroke-dashoffset:1;opacity:1}15%{stroke-dashoffset:0;opacity:1}55%{opacity:.6}75%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes wmTLoop{0%,15%{stroke-dashoffset:1;fill:transparent;stroke-width:3.5;opacity:1}45%{stroke-dashoffset:0;fill:transparent;stroke-width:3.5}58%,85%{stroke-dashoffset:0;fill:currentColor;stroke-width:0;opacity:1}100%{stroke-dashoffset:0;fill:currentColor;stroke-width:0;opacity:0}}
.wm-loader-bar{width:120px;height:3px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.wm-loader-bar span{display:block;width:40%;height:100%;border-radius:3px;background:var(--grad);animation:wmLoadBar 1.2s ease-in-out infinite}
@keyframes wmLoadBar{from{transform:translateX(-110%)}to{transform:translateX(280%)}}

/* ─── Login ────────────────────────────────────────────────────────── */
.wm-login-logo-wrap{display:grid;place-items:center;overflow:hidden}
.wm-t-login{width:118%;max-width:none;color:#1E2934}
.wm-login-logo-wrap:hover .wm-t-bar{animation:wmTSchrauben .7s cubic-bezier(.3,.7,.3,1.3)}
.wm-t-wasserzeichen{position:absolute;right:-60px;bottom:-40px;width:340px;color:#fff;opacity:.09;z-index:0;pointer-events:none;transform:rotate(-12deg);animation:wmTSchweben 16s ease-in-out infinite}
@keyframes wmTSchweben{0%,100%{transform:rotate(-12deg) translate(0,0)}50%{transform:rotate(-8deg) translate(-14px,-18px)}}

/* ─── Dashboard: Wasserzeichen in der Umsatz-Karte ─────────────────── */
.db-kpi-hero{isolation:isolate}
.wm-t-hero{position:absolute;right:-18px;top:-16px;width:150px;color:#fff;opacity:.13;z-index:-1;transform:rotate(-14deg);pointer-events:none;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s}
.db-kpi-hero:hover .wm-t-hero{transform:rotate(-6deg) scale(1.06);opacity:.2}
.db-kpi-hero:hover .wm-t-hero .wm-t-bar{animation:wmTSchrauben .8s cubic-bezier(.3,.7,.3,1.3)}

/* ─── KI-Knopf: T mit Funken ───────────────────────────────────────── */
.wm-ki-fab{position:relative}
.wm-t-fab{width:26px;color:#fff}
.wm-ki-fab:hover .wm-t-bar{animation:wmTSchrauben .7s cubic-bezier(.3,.7,.3,1.3)}
.wm-fab-spark{position:absolute;right:9px;top:8px;width:13px;height:13px;color:#fff;animation:wmFunkeln 2.6s ease-in-out infinite}
.wm-fab-spark svg{width:100%;height:100%;display:block}
@keyframes wmFunkeln{0%,100%{transform:scale(.7) rotate(0);opacity:.7}50%{transform:scale(1.15) rotate(45deg);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .wm-t *,.wm-brand-svg *,.wm-t-wasserzeichen,.wm-fab-spark{animation:none!important}
}