/* ═══════════════════════════════════════════════════════════
   wirMakler CRM · Feinschliff v4
   Dezente Premium-Details: weiche Schatten, sanfte Übergänge,
   ruhige Fokus-Ringe. Ändert keine Layouts.
   ═══════════════════════════════════════════════════════════ */

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html { scroll-behavior: smooth; }

/* Sanftes Erscheinen der Seite */
@keyframes wmFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main.main > * { animation: wmFadeUp .45s cubic-bezier(.22,.7,.3,1) both; }
main.main > *:nth-child(2) { animation-delay: .04s }
main.main > *:nth-child(3) { animation-delay: .08s }
main.main > *:nth-child(4) { animation-delay: .12s }
main.main > *:nth-child(5) { animation-delay: .16s }
main.main > *:nth-child(6) { animation-delay: .20s }

/* Markenfarbe bei Textauswahl */
::selection { background: #E10074; color: #fff; }

/* Buttons: leben leicht mit */
.btn, button {
  transition: transform .16s ease, box-shadow .22s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:not(.ghost):not([disabled]):hover {
  box-shadow: 0 8px 20px -8px rgba(225,0,116,.45), 0 2px 6px -2px rgba(225,0,116,.25);
}

/* Karten & Panels: mehrstufige, weiche Schatten statt harter Kanten */
.panel, .res, .kpi, .card, .lead, .stat, .mrow, .doc {
  transition: transform .2s cubic-bezier(.22,.7,.3,1), box-shadow .25s ease, border-color .2s ease;
}
.res:hover, .kpi:hover, .panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(30,41,59,.05),
              0 8px 18px -6px rgba(30,41,59,.10),
              0 20px 34px -18px rgba(30,41,59,.14);
}

/* Eingabefelder: ruhiger Magenta-Fokus */
input, select, textarea {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #E10074 !important;
  box-shadow: 0 0 0 3px rgba(225,0,116,.12);
}

/* Tastatur-Navigation sichtbar, aber elegant */
:focus-visible { outline: 2px solid #E10074; outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Filter-Chips */
.chip { transition: background-color .16s ease, color .16s ease, transform .16s ease, box-shadow .2s ease; }
.chip:hover { transform: translateY(-1px); }
.chip.on { box-shadow: 0 6px 14px -6px rgba(225,0,116,.5); }

/* Navigation in der Sidebar */
.nav a { transition: background-color .16s ease, color .16s ease, padding-left .16s ease; }

/* Feine Scrollbalken */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 99px; border: 2px solid #F4F7F9; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
aside.sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-color: transparent; }

/* Bilder nie hart abgeschnitten */
main img { border-radius: 4px; }

/* Barrierefreiheit: Bewegung reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Lebendige Navigation: kleine Zähler an Pool und Pipeline */
.nav a, aside a { position: relative; }
.navbadge{display:inline-block;margin-left:8px;min-width:16px;text-align:center;background:#E10074;color:#fff;border-radius:99px;padding:1px 6px;font:800 10px Manrope;vertical-align:1px;box-shadow:0 2px 8px -2px rgba(225,0,116,.55);animation:wmFadeUp .5s ease both}
.navbadge.warn{background:#B45309}


/* ═══════ v14 · Feinschliff: Knöpfe, Menüs, Tiefe ═══════ */
.btn{background:linear-gradient(140deg,#E10074,#C4006A) !important;box-shadow:0 12px 26px -12px rgba(225,0,116,.6);transition:transform .16s ease,box-shadow .22s ease,filter .2s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 16px 32px -12px rgba(225,0,116,.65)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:#fff !important;box-shadow:0 6px 16px -10px rgba(30,41,59,.28)}
.qbtn,.chip{transition:transform .14s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
.qbtn:hover,.chip:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(30,41,59,.28);border-color:#F5C6E0}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23E10074' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px !important;border-radius:11px;cursor:pointer}
select:focus{outline:none;border-color:#E10074 !important;box-shadow:0 0 0 3px rgba(225,0,116,.12)}
input[type="date"],input[type="time"]{border-radius:11px;cursor:pointer}
.panel,article.lead,article.arch,.kcard,.jstat,.kpi{transition:transform .18s ease,box-shadow .25s ease}
h1,h2{letter-spacing:-.015em}
.wm-tabs{display:inline-flex;gap:4px;padding:4px;background:#EEF2F6;border-radius:13px}
.wm-tab{border:none;border-radius:10px;padding:9px 18px;font:800 12.5px Manrope,sans-serif;color:#64748B;background:transparent;cursor:pointer;transition:all .2s ease}
.wm-tab.on{background:#fff;color:#E10074;box-shadow:0 4px 12px -6px rgba(30,41,59,.3)}
.wm-phasen{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:6px 0 2px}
.wm-phase{display:flex;align-items:center;gap:7px;font:700 12px Manrope,sans-serif;color:#94A3B8;cursor:pointer;padding:7px 11px;border-radius:99px;transition:all .2s ease}
.wm-phase .dot{width:9px;height:9px;border-radius:50%;background:#D8DFE8;flex:none;transition:all .2s ease}
.wm-phase.done{color:#B3005C}
.wm-phase.done .dot{background:#F0A6CC}
.wm-phase.on{color:#fff;background:linear-gradient(140deg,#E10074,#C4006A);box-shadow:0 8px 18px -8px rgba(225,0,116,.55)}
.wm-phase.on .dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.wm-phase.final-win.on{background:linear-gradient(140deg,#16A34A,#118A3E)}
.wm-conn{width:20px;height:2px;background:#E8EDF2;flex:none}
.newlead{animation:wmSlideIn .6s cubic-bezier(.2,.8,.3,1) both}
@keyframes wmSlideIn{from{opacity:0;transform:translateY(-16px) scale(.98)}to{opacity:1;transform:none}}


/* ═══════ v18 · Die Versiegelung: Prägung, Goldfaden, Fokus ═══════ */
main.main::after{content:none}
main.main h1{position:relative;padding-bottom:12px}
main.main h1::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:2px;border-radius:2px;background:linear-gradient(90deg,#D4AF37,#F5E7B8 55%,#D4AF37)}
body.wm-fokus .sidebar{display:none !important}
body.wm-fokus main.main{padding-left:clamp(20px,5vw,56px);padding-right:clamp(20px,5vw,56px)}
@media (max-width:780px){
  main.main{padding:22px 16px 70px}
  main.main::after{right:16px}
}


/* ═══════ v20 · Das finale Siegel: Atem, Goldkante ═══════ */
main.main{animation:wmRise .38s ease both}
@keyframes wmRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main.main{animation:none}}
.nav a.active{box-shadow:inset 3px 0 0 #D4AF37}
.wm-tab.on{box-shadow:0 4px 12px -6px rgba(30,41,59,.3),inset 0 -2px 0 #D4AF37}
.chip.on,.ctp.on{box-shadow:inset 0 -2px 0 #D4AF37}


/* ═══════ v22 · NOTFALL-FIX: Die Navigation darf NIE gequetscht werden ═══════ */
/* Ursache: Sidebar-Inhalt wurde höher als der Bildschirm – Flexbox drückte die
   Nav auf null Höhe. Lösung: nichts darf schrumpfen, die Leiste scrollt fein. */
.sidebar{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar::-webkit-scrollbar{width:5px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar>*{flex-shrink:0 !important}
.sidebar .nav{flex:0 0 auto !important;overflow:visible !important;min-height:0}
/* Platz zurückgewinnen: die Zugaben rücken enger zusammen */
#wmUserBox{margin-top:10px !important}
.sidebar-quote{margin-top:10px !important}


/* ═══════ v26 · Drei-Stufen-Fokus: Stufe 2 räumt die Schmuckspalte ═══════ */
body.wm-fokus2 .side-visual{display:none !important}
body.wm-fokus2 .stage{grid-template-columns:1fr !important}
body.wm-fokus2 .moti{display:none !important}
body.wm-fokus2 form.card,body.wm-fokus2 .card#empForm{box-shadow:0 24px 60px -28px rgba(30,41,59,.28),0 0 0 1px rgba(212,175,55,.22) !important;padding-left:34px !important;padding-right:34px !important}