/* Agency OS — Demo (PageFull_Luis) · Designsystem nach den Mockup-Tokens (Petrol-Grundlage) */

:root{
  --petrol-900:#081419; --petrol-800:#10262E; --petrol-700:#1A3B46; --petrol-600:#2A5A69;
  --koralle-700:#B4431F; --koralle-600:#C64E2C; --koralle-400:#FF8163; --koralle-100:#FFE8E1;
  --papier:#F7F7F4; --weiss:#FFFFFF; --linie:#E5E5DF; --linie-stark:#D2D2C9;
  --tinte:#191C18; --tinte-2:#5E635B; --tinte-3:#737870;
  --ok:#2C7A4B; --ok-100:#E3F0E8; --warn:#B07D18; --warn-100:#F7EEDB; --stop:#AF3A2A; --stop-100:#F9E5E1;
  --r-s:5px; --r-m:8px; --r-l:12px;
  --sans:'Geist','Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',Consolas,monospace;
  --schatten:0 1px 2px rgba(25,28,24,.05), 0 2px 8px rgba(25,28,24,.04);
  --schatten-hoch:0 4px 10px rgba(25,28,24,.08), 0 12px 40px rgba(25,28,24,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:15px;
     line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--petrol-600)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--petrol-600);outline-offset:2px;border-radius:var(--r-s)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{
  animation-duration:.01ms!important;transition-duration:.01ms!important}}

.app{display:grid;grid-template-columns:232px 1fr;height:100vh}

/* ===== Seitenleiste ===== */
.leiste{background:var(--petrol-800);padding:14px 10px 10px;display:flex;flex-direction:column;overflow:hidden}
.leiste .kopf{display:flex;align-items:center;justify-content:space-between;padding:2px 8px 14px}
.leiste .marke{color:#fff;font-weight:600;font-size:15px;letter-spacing:-.2px}
.leiste .marke span{color:var(--koralle-400)}
.leiste .demo-pill{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:#C6D5DA;background:rgba(255,255,255,.1);padding:2px 8px;border-radius:99px}
.leiste .suche{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-s);
  padding:7px 11px;font-size:12.5px;color:#869DA5;margin-bottom:10px;display:flex;justify-content:space-between;
  align-items:center;width:100%;transition:background .12s}
.leiste .suche:hover{background:rgba(255,255,255,.12)}
.leiste .suche em{font-style:normal;font-family:var(--mono);font-size:10.5px;background:rgba(255,255,255,.1);
  border-radius:3px;padding:0 5px;color:#C6D5DA}

/* Timer-Widget */
.leiste .timer{background:rgba(255,129,99,.16);border-radius:var(--r-s);width:100%;margin-bottom:12px;
  padding:8px 11px;color:#fff}
.leiste .timer.laeuft{background:rgba(255,129,99,.26)}
.leiste .timer .z1{display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:13.5px}
.leiste .timer .z1 em{font-style:normal;font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.12);
  color:#C6D5DA;border-radius:99px;padding:1px 7px}
.leiste .timer .z1 .uhr{font-family:var(--mono);font-size:13px;color:var(--koralle-400);font-variant-numeric:tabular-nums}

/* Mechanisches Rollwerk: jede Ziffer ist ein Sichtfenster, dahinter rollt ein Ziffernband */
.uhr .zif{display:inline-block;height:1.3em;overflow:hidden;vertical-align:-0.32em}
.uhr .zif .band{display:block;will-change:transform}
.uhr .zif .band span{display:block;height:1.3em;line-height:1.3em;text-align:center}
.uhr .tz{display:inline-block;vertical-align:baseline}
.leiste .timer .z2{font-size:11.5px;color:#B9C9CE;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.leiste nav{overflow-y:auto;flex:1;margin:0 -4px;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
.leiste .gtitel{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:#5F7880;padding:14px 10px 5px}
.leiste nav button{display:flex;align-items:center;gap:9px;width:100%;padding:6.5px 10px;border-radius:var(--r-s);
  color:#B9C9CE;font-size:13.5px;transition:background .1s,color .1s}
.leiste nav button:hover{background:rgba(255,255,255,.06);color:#fff}
.leiste nav button.an{background:rgba(255,255,255,.1);color:#fff;font-weight:500}
.leiste nav button svg{width:15.5px;height:15.5px;flex-shrink:0;opacity:.8}
.leiste nav button .zahl{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--koralle-400)}

/* Mandant + Nutzer */
.leiste .fuss{border-top:1px solid rgba(255,255,255,.08);margin-top:8px;padding-top:8px}
.leiste .mandanten{display:flex;gap:4px;padding:0 6px 8px}
.leiste .mandanten button{flex:1;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.5px;
  padding:4px 0;border-radius:4px;color:#869DA5;background:rgba(255,255,255,.05);transition:all .1s}
.leiste .mandanten button:hover{background:rgba(255,255,255,.12);color:#fff}
.leiste .mandanten button.an{background:var(--koralle-600);color:#fff;font-weight:500}
.leiste .nutzer{display:flex;align-items:center;gap:9px;padding:6px 8px;color:#B9C9CE;font-size:12.5px}
.leiste .nutzer .av{width:26px;height:26px;border-radius:50%;background:var(--petrol-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;flex-shrink:0}
.leiste .nutzer small{display:block;font-size:10.5px;color:#5F7880}

/* ===== Hauptbereich ===== */
main{overflow-y:auto;display:flex;flex-direction:column;min-width:0}
.kopfzeile{position:sticky;top:0;z-index:20;background:rgba(247,247,244,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linie);padding:14px 28px;display:flex;align-items:center;gap:14px;min-height:59px}
.kopfzeile h1{font-size:18px;font-weight:600;letter-spacing:-.3px}
.kopfzeile .sub{font-size:12.5px;color:var(--tinte-3)}
.kopfzeile .rechts{margin-left:auto;display:flex;gap:8px;align-items:center}
.inhalt{padding:22px 28px 60px;max-width:1240px;width:100%}
.inhalt.schmal{max-width:900px}

/* Knöpfe */
.kn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-s);
  font-size:13px;font-weight:500;border:1px solid var(--linie-stark);background:var(--weiss);
  transition:all .1s;white-space:nowrap}
.kn:hover{border-color:var(--tinte-3);background:#FCFCFA}
.kn.primaer{background:var(--petrol-700);border-color:var(--petrol-700);color:#fff}
.kn.primaer:hover{background:var(--petrol-600);border-color:var(--petrol-600)}
.kn.signal{background:var(--koralle-600);border-color:var(--koralle-600);color:#fff}
.kn.signal:hover{background:var(--koralle-700);border-color:var(--koralle-700)}
.kn.leise{border-color:transparent;background:transparent;color:var(--tinte-2)}
.kn.leise:hover{background:#EFEFEA;color:var(--tinte)}
.kn.klein{padding:4px 9px;font-size:12px}
.kn svg{width:14px;height:14px}
.kn:disabled{opacity:.45;cursor:not-allowed}

/* Karten & Tabellen */
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);
  box-shadow:var(--schatten);overflow:hidden}
.karte .ktitel{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 18px;border-bottom:1px solid var(--linie)}
.karte .ktitel h3{font-size:13px;font-weight:600;letter-spacing:.2px}
.karte .ktitel .mehr{font-size:12px;color:var(--tinte-3)}

table.tab{width:100%;border-collapse:collapse;font-size:13.5px}
.tab th{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--tinte-3);font-weight:500;text-align:left;padding:10px 18px;border-bottom:1px solid var(--linie);
  background:#FBFBF9;white-space:nowrap}
.tab td{padding:10.5px 18px;border-bottom:1px solid var(--linie);vertical-align:middle}
.tab tr:last-child td{border-bottom:none}
.tab tbody tr{transition:background .1s}
.tab tbody tr.klick{cursor:pointer}
.tab tbody tr.klick:hover{background:#FAFAF7}
.tab .zahl{text-align:right;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.tab .leer{padding:34px 18px;text-align:center;color:var(--tinte-3);font-size:13.5px}

/* Pillen & Kennzeichen */
.pille{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;
  padding:2px 9px;border-radius:99px;white-space:nowrap}
.pille:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-100);color:var(--ok)}
.p-warn{background:var(--warn-100);color:var(--warn)}
.p-stop{background:var(--stop-100);color:var(--stop)}
.p-neutral{background:#EFEFEA;color:var(--tinte-2)}
.p-petrol{background:#E4EBED;color:var(--petrol-600)}
.p-signal{background:var(--koralle-100);color:var(--koralle-700)}

.av{width:24px;height:24px;border-radius:50%;background:var(--petrol-600);color:#fff;display:inline-flex;
  align-items:center;justify-content:center;font-size:9.5px;font-weight:600;flex-shrink:0}
.av.b{background:var(--koralle-600)}.av.c{background:var(--warn)}.av.d{background:var(--ok)}
.av.bild{background-size:cover;background-position:center;color:transparent}

.mono{font-family:var(--mono);font-size:12.5px}
.gedimmt{color:var(--tinte-3)}
.geld{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* KPI-Zeile */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);padding:14px 16px;box-shadow:var(--schatten)}
.kpi .l{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tinte-3)}
.kpi .w{font-size:22px;font-weight:600;letter-spacing:-.5px;margin-top:3px;font-variant-numeric:tabular-nums}
.kpi .w small{font-size:12.5px;font-weight:400;color:var(--tinte-3);letter-spacing:0}
.kpi .hinweis{font-size:11.5px;color:var(--tinte-3);margin-top:2px}

/* Raster */
.spalten{display:grid;gap:16px}
.spalten.zwei{grid-template-columns:1fr 1fr}
.spalten.haupt-neben{grid-template-columns:minmax(0,1fr) 320px}
@media(max-width:1100px){.spalten.zwei,.spalten.haupt-neben{grid-template-columns:1fr}}

/* Kanban */
.board{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:14px;align-items:start}
.board .spalte{background:#F0F0EC;border-radius:var(--r-m);padding:10px}
.board .stitel{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 10px;
  font-size:12.5px;font-weight:600}
.board .stitel .zahl{font-family:var(--mono);font-size:11px;color:var(--tinte-3);font-weight:400}
.board .zelle{min-height:60px;display:flex;flex-direction:column;gap:8px}
.board .zelle.ueber{outline:2px dashed var(--petrol-600);outline-offset:2px;border-radius:var(--r-s)}
.akarte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);padding:10px 12px;
  box-shadow:var(--schatten);cursor:grab;font-size:13px;position:relative}
.akarte:active{cursor:grabbing}
.akarte .t{padding-right:22px}
.akarte .kbox{position:absolute;top:9px;right:9px;width:14px;height:14px;
  accent-color:var(--petrol-700);cursor:pointer;opacity:.25;transition:opacity .12s}
.akarte:hover .kbox,.akarte .kbox:checked{opacity:1}
.akarte.im-band{background:#EDF3F1;border-color:var(--petrol-600)}
.akarte.ausgewaehlt{background:#EDF3F1;border-color:var(--petrol-600);
  box-shadow:0 0 0 1px var(--petrol-600), var(--schatten)}

/* SortableJS-Zustände: gewählt = angehoben, Geist = Platzhalter im Ziel, Flug = Karte am Zeiger */
.zieh-gewaehlt{box-shadow:var(--schatten-hoch)}
.zieh-geist{opacity:.35;background:#EDF1EF;border:1px dashed var(--petrol-600)}
.zieh-geist>*{visibility:hidden}
.zieh-flug{transform:rotate(2deg);box-shadow:var(--schatten-hoch);opacity:.95;cursor:grabbing}
.akarte .t{font-weight:500;line-height:1.4}
.akarte .meta{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:11.5px;color:var(--tinte-3);flex-wrap:wrap}
.akarte .meta .projekt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.akarte .faellig.spaet{color:var(--stop);font-weight:500}

/* Pipeline (Leads) */
.pipeline{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:12px;align-items:start;overflow-x:auto}
@media(max-width:1400px){.pipeline{grid-template-columns:repeat(3,1fr)}}

/* Formulare */
.feld{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.feld label{font-size:12px;font-weight:500;color:var(--tinte-2)}
.feld input,.feld select,.feld textarea{border:1px solid var(--linie-stark);border-radius:var(--r-s);
  padding:8px 11px;font-size:13.5px;background:var(--weiss);width:100%}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--petrol-600);outline-offset:-1px;border-color:var(--petrol-600)}
.feld textarea{resize:vertical;min-height:70px}
.feldzeile{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feldzeile.drei{grid-template-columns:1fr 1fr 1fr}

/* Überlagerungen — Dialoge öffnen mit demselben Feder-Effekt wie die Suche */
.schleier{position:fixed;inset:0;background:rgba(8,20,25,.4);z-index:90;display:flex;
  align-items:flex-start;justify-content:center;padding:8vh 20px 20px;animation:einblenden .18s ease-out}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.schleier.zu{animation:spot-weg .15s ease-in forwards}
.dialog{background:var(--weiss);border-radius:var(--r-l);box-shadow:var(--schatten-hoch);width:100%;
  max-width:520px;max-height:82vh;overflow-y:auto;
  animation:spot-auf .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes hoch{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.dialog.breit{max-width:760px}
.dialog .dkopf{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;
  border-bottom:1px solid var(--linie);position:sticky;top:0;background:var(--weiss);z-index:2}
.dialog .dkopf h2{font-size:16px;font-weight:600;letter-spacing:-.2px}
.dialog .dkoerper{padding:20px 22px}
.dialog .dfuss{display:flex;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--linie);
  position:sticky;bottom:0;background:var(--weiss)}
.dialog .zu{width:28px;height:28px;border-radius:var(--r-s);display:flex;align-items:center;justify-content:center;color:var(--tinte-3)}
.dialog .zu:hover{background:#EFEFEA;color:var(--tinte)}

/* Anmeldeschirm */
.login-schleier{position:fixed;inset:0;z-index:280;background:var(--petrol-800);
  display:flex;align-items:center;justify-content:center;padding:20px}
.login-karte{background:var(--weiss);border-radius:var(--r-l);box-shadow:var(--schatten-hoch);
  width:100%;max-width:400px;padding:28px 30px 24px;
  animation:spot-auf .38s cubic-bezier(.34,1.56,.64,1)}
.login-karte .marke{font-weight:600;font-size:17px;letter-spacing:-.3px;margin-bottom:2px}
.login-karte .marke span{color:var(--koralle-600)}
.login-karte .unter{font-size:12.5px;color:var(--tinte-3);margin-bottom:18px}
.login-konto{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;
  border-radius:var(--r-m);transition:background .1s}
.login-konto:hover{background:#F0F0EC}
.login-karte input[type=password]{border:1px solid var(--linie-stark);border-radius:var(--r-s);
  padding:9px 12px;font-size:14px;width:100%;font-family:var(--mono);letter-spacing:3px}
.login-karte input[type=password]:focus{outline:2px solid var(--petrol-600);outline-offset:-1px}
.login-fehler{color:var(--stop);font-size:12.5px;min-height:18px;margin-top:8px}
.login-hinweis{font-size:11.5px;color:var(--tinte-3);border-top:1px solid var(--linie);
  margin-top:16px;padding-top:12px;line-height:1.6}

/* Meldungen (Toast) */
.meldungen{position:fixed;bottom:18px;right:18px;z-index:500;display:flex;flex-direction:column;
  align-items:flex-end;gap:8px}
.meldung{background:var(--petrol-800);color:#fff;font-size:13px;padding:10px 16px;border-radius:var(--r-m);
  box-shadow:var(--schatten-hoch);animation:hoch .15s ease-out;max-width:380px;transform-origin:bottom right}
.meldung.fehler{background:var(--stop)}
.meldung.weg{animation:meldung-weg .35s ease-in forwards}
@keyframes meldung-weg{to{opacity:0;transform:translateY(12px) scale(.6)}}

/* Goo-Zustand: Filter auf dem Stapel — nahe Meldungen verschmelzen flüssig,
   neue tropfen mit Quetsch-und-Streck-Feder herein. Abschaltbar unter
   Einstellungen -> Darstellung. */
.meldungen.goo{filter:url(#goo)}
.meldungen.goo .meldung{animation:blob-rein .5s cubic-bezier(.34,1.56,.64,1);box-shadow:none;border-radius:14px}
@keyframes blob-rein{
  0%{opacity:0;transform:translateY(26px) scale(.55,.75)}
  55%{opacity:1;transform:translateY(-3px) scale(1.05,.94)}
  100%{opacity:1;transform:none}}
.meldungen.goo .meldung.weg{animation:blob-weg .4s cubic-bezier(.5,0,.75,.3) forwards}
@keyframes blob-weg{to{opacity:0;transform:translateY(18px) scale(.45,.6)}}

/* Konto-Wechsel: Petrol-Kreis expandiert vom Klickpunkt, Avatar federt ein.
   Abschaltbar unter Einstellungen -> Darstellung. */
.wechsel-schleier{position:fixed;inset:0;z-index:300;background:var(--petrol-800);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  animation:wechsel-auf .34s ease-out forwards}
@keyframes wechsel-auf{from{clip-path:circle(0px at var(--wx,50%) var(--wy,50%))}
  to{clip-path:circle(150% at var(--wx,50%) var(--wy,50%))}}
.wechsel-schleier.zu{animation:wechsel-weg .3s ease-in forwards}
@keyframes wechsel-weg{from{opacity:1}to{opacity:0}}
.wechsel-schleier .wav{width:78px;height:78px;border-radius:50%;background:var(--petrol-600);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:600;
  box-shadow:0 0 0 7px rgba(255,255,255,.08), 0 0 0 14px rgba(255,255,255,.04);opacity:0}
.wechsel-schleier .wname{color:#fff;font-size:19px;font-weight:600;letter-spacing:-.3px;opacity:0}
.wechsel-schleier .wrolle{color:#B9C9CE;font-size:13px;opacity:0;margin-top:-8px}
.wechsel-schleier .wrolle em{font-style:normal;color:var(--koralle-400)}
.wechsel-schleier.zeigen .wav{animation:spot-auf .45s cubic-bezier(.34,1.56,.64,1) .05s forwards}
.wechsel-schleier.zeigen .wname{animation:wechsel-text .4s ease-out .16s forwards}
.wechsel-schleier.zeigen .wrolle{animation:wechsel-text .4s ease-out .26s forwards}
@keyframes wechsel-text{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Suche (Strg K) — Spotlight-artig: Pille erscheint, Filterknöpfe fächern auf */
.spot-schleier{position:fixed;inset:0;background:rgba(8,20,25,.38);z-index:95;
  display:flex;flex-direction:column;align-items:center;padding:15vh 20px 20px;
  animation:einblenden .18s ease-out}
.spot-schleier.zu{animation:spot-weg .15s ease-in forwards}
@keyframes spot-weg{to{opacity:0}}

.spot-zeile{display:flex;align-items:center;width:min(680px,88vw)}
.spot-pille{display:flex;align-items:center;gap:12px;background:var(--weiss);
  border-radius:999px;box-shadow:var(--schatten-hoch);padding:0 22px;height:54px;
  flex:1;min-width:0;animation:spot-auf .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes spot-auf{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.spot-pille svg{width:19px;height:19px;color:var(--tinte-3);flex-shrink:0}
.spot-pille input{border:none;outline:none;background:none;font-size:16.5px;flex:1;
  min-width:0;color:var(--tinte);height:100%}
.spot-pille input::placeholder{color:var(--tinte-3)}

/* Filterknöpfe: Breite waechst von 0 — die Pille weicht fliessend zurück */
.spot-filter{display:flex;gap:10px;width:0;margin-left:0;flex-shrink:0;
  transition:width .5s cubic-bezier(.3,1.25,.5,1),margin-left .5s cubic-bezier(.3,1.25,.5,1)}
.spot-schleier.mit-filtern .spot-filter{width:238px;margin-left:12px}
.spot-filter button{width:52px;height:52px;border-radius:50%;background:var(--weiss);
  box-shadow:var(--schatten-hoch);display:flex;align-items:center;justify-content:center;
  color:var(--tinte-2);flex-shrink:0;opacity:0;
  transition:background .12s,color .12s,transform .15s}
.spot-schleier.mit-filtern .spot-filter button{
  animation:spot-knopf .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes spot-knopf{from{opacity:0;transform:translateX(-30px) scale(.4)}
  to{opacity:1;transform:none}}
.spot-filter button:hover{color:var(--petrol-700);transform:scale(1.07)}
.spot-filter button.an{background:var(--petrol-700);color:#fff}
.spot-filter button svg{width:21px;height:21px}

.spot-ergebnis{width:min(680px,88vw);margin-top:12px;background:var(--weiss);
  border-radius:var(--r-l);box-shadow:var(--schatten-hoch);overflow:hidden;
  animation:spot-panel .28s cubic-bezier(.3,1.2,.5,1);transform-origin:top center}
@keyframes spot-panel{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.spot-ergebnis .treffer{max-height:min(360px,46vh);overflow-y:auto;padding:8px}
.spot-ergebnis .treffer button{display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 12px;border-radius:var(--r-m);font-size:13.5px}
.spot-ergebnis .treffer button:hover{background:#F0F0EC}
.spot-ergebnis .treffer .typ{font-family:var(--mono);font-size:10px;letter-spacing:1px;
  text-transform:uppercase;color:var(--tinte-3);width:64px;flex-shrink:0}

/* Tagesblatt */
.tagkopf{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.tagkopf .datum{font-size:16px;font-weight:600;min-width:220px;text-align:center}
.tagkopf .pfeil{width:30px;height:30px;border:1px solid var(--linie-stark);border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;background:var(--weiss)}
.tagkopf .pfeil:hover{border-color:var(--tinte-3)}
.tagsumme{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--tinte-2)}
.tagsumme b{color:var(--tinte);font-size:15px}

.schnellzeile{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(150px,1fr) 90px minmax(160px,1.6fr) auto;
  gap:8px;padding:12px 16px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-m);
  margin-bottom:16px;align-items:center;box-shadow:var(--schatten)}
.schnellzeile select,.schnellzeile input{border:1px solid var(--linie-stark);border-radius:var(--r-s);padding:7px 9px;font-size:13px}
@media(max-width:1000px){.schnellzeile{grid-template-columns:1fr 1fr;padding:12px}}

/* Verlauf / Zeitleiste */
.spur .monat{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--tinte-3);padding:14px 0 7px}
.spur .e{display:grid;grid-template-columns:30px 1fr;gap:11px;width:100%;padding:9px 10px;border-radius:var(--r-m);align-items:start}
.spur .e:hover{background:#FAFAF7}
.spur .sym{width:28px;height:28px;border-radius:50%;background:#EFEFEA;color:var(--tinte-2);
  display:flex;align-items:center;justify-content:center}
.spur .sym svg{width:13.5px;height:13.5px}
.spur .z1{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;font-weight:500}
.spur .z1 .d{font-family:var(--mono);font-size:11px;color:var(--tinte-3);font-weight:400;flex-shrink:0}
.spur .z2{font-size:12.5px;color:var(--tinte-2);line-height:1.5}

/* Balkendiagramme (Controlling) */
.balken{display:flex;flex-direction:column;gap:9px}
.balken .zeile{display:grid;grid-template-columns:130px 1fr 86px;gap:10px;align-items:center;font-size:12.5px}
.balken .zeile .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinte-2)}
.balken .spurbg{background:#EFEFEA;border-radius:4px;height:16px;overflow:hidden}
.balken .fuellung{height:100%;background:var(--petrol-600);border-radius:4px;min-width:2px}
.balken .fuellung.signal{background:var(--koralle-600)}
.balken .w{text-align:right}

.saeulen{display:flex;align-items:flex-end;gap:10px;height:150px;padding-top:10px}
.saeulen .s{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.saeulen .stab{width:100%;max-width:44px;background:var(--petrol-600);border-radius:4px 4px 0 0;min-height:2px}
.saeulen .m{font-family:var(--mono);font-size:10px;color:var(--tinte-3)}

/* Rechnung (Belegansicht) */
.beleg{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten);
  padding:38px 44px;max-width:820px}
.beleg .bkopf{display:flex;justify-content:space-between;margin-bottom:34px}
.beleg .absender{font-size:11px;color:var(--tinte-3);border-bottom:1px solid var(--linie);padding-bottom:3px;margin-bottom:9px}
.beleg .empfaenger{font-size:13.5px;line-height:1.6}
.beleg .brand{text-align:right}
.beleg .brand .logo{font-weight:600;font-size:17px;letter-spacing:-.3px}
.beleg .brand .logo span{color:var(--koralle-600)}
.beleg .brand .kle{font-size:11px;color:var(--tinte-3);margin-top:6px;line-height:1.6}
.beleg h2.rtitel{font-size:19px;letter-spacing:-.3px;margin-bottom:2px}
.beleg .rmeta{font-size:12.5px;color:var(--tinte-2);margin-bottom:22px;display:flex;gap:18px;flex-wrap:wrap}
.beleg table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px}
.beleg th{font-family:var(--mono);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--tinte-3);
  text-align:left;padding:8px 4px;border-bottom:1.5px solid var(--linie-stark)}
.beleg td{padding:9px 4px;border-bottom:1px solid var(--linie)}
.beleg .re{text-align:right}
.beleg .summen{margin-left:auto;width:280px;font-size:13.5px;margin-top:10px}
.beleg .summen div{display:flex;justify-content:space-between;padding:5px 4px}
.beleg .summen .gesamt{border-top:1.5px solid var(--linie-stark);font-weight:600;font-size:15px;margin-top:4px;padding-top:9px}
.beleg .rfuss{margin-top:30px;font-size:11.5px;color:var(--tinte-3);line-height:1.7;border-top:1px solid var(--linie);padding-top:14px}

/* Reiter (Einstellungen) */
.reiter{display:flex;gap:4px;border-bottom:1px solid var(--linie);margin-bottom:20px}
.reiter button{padding:8px 14px;font-size:13.5px;color:var(--tinte-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.reiter button:hover{color:var(--tinte)}
.reiter button.an{color:var(--petrol-700);font-weight:500;border-bottom-color:var(--koralle-600)}

/* Gummiband-Auswahl (Leistungsprüfung): Linksklick + Ziehen spannt ein Rechteck */
.gummiband{position:fixed;z-index:80;pointer-events:none;border-radius:3px;
  border:1px solid var(--petrol-600);background:rgba(42,90,105,.12)}
body.am-ziehen{user-select:none;cursor:crosshair}
.pruefzeile.im-band{background:#EDF3F1}
.tab tbody tr.im-band td{background:#EDF3F1}
.tab .auswahl-zelle{width:36px;text-align:center;cursor:default}
.tab .auswahl-zelle input[type=checkbox]{width:15px;height:15px;accent-color:var(--petrol-700);vertical-align:middle}

/* Prüf-Liste (Leistungsprüfung) */
.pruef-gruppe{margin-bottom:18px}
.pruef-gruppe .gkopf{display:flex;align-items:center;gap:10px;padding:11px 18px;background:#FBFBF9;
  border-bottom:1px solid var(--linie);font-weight:600;font-size:13.5px}
.pruef-gruppe .gkopf .geld{margin-left:auto}
.pruefzeile{display:grid;grid-template-columns:30px 92px minmax(140px,1.2fr) minmax(150px,1.4fr) 110px 70px 92px;
  gap:10px;align-items:center;padding:9px 18px;border-bottom:1px solid var(--linie);font-size:13px}
.pruefzeile:last-child{border-bottom:none}
.pruefzeile input[type=checkbox]{width:15px;height:15px;accent-color:var(--petrol-700)}
@media(max-width:1000px){.pruefzeile{grid-template-columns:30px 1fr 90px}}

/* Sonstiges */
.leer-gross{padding:60px 20px;text-align:center;color:var(--tinte-3)}
.leer-gross b{display:block;color:var(--tinte);font-size:15px;margin-bottom:4px}
.hilfetext{font-size:12.5px;color:var(--tinte-3);line-height:1.6}
.trennlinie{border:none;border-top:1px solid var(--linie);margin:18px 0}
.abstand-oben{margin-top:18px}
.abstand-unten{margin-bottom:18px}
.vorschlag{border-left:3px solid var(--koralle-400);border-radius:0 var(--r-m) var(--r-m) 0}
.vorschlag .agent{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--koralle-700)}