/* =====================================================================
   Flowstate CRM — Designsystem (Estera-Referenz, Flowstate-Blau)
   Icon-Rail + Top-Bar + Reiter + Segment-Switcher · Raster 8px
   ===================================================================== */
:root{
  /* Die drei Sparten. Eine Farbe je Geschäftsfeld, überall dieselbe — auf den
     To-Do-Karten, im Detailfenster, später überall dort, wo eine Sparte
     auftaucht. Bewusst außerhalb der Graphit-Umschaltung definiert: Webdesign
     ist blau, egal auf welcher Seite man steht. Alle drei liegen bei mindestens
     4,5:1 gegen Weiß, damit weiße Schrift auf dem Abzeichen lesbar bleibt. */
  --sp-webdesign:#2563EB;   /* Blau */
  --sp-performance:#C2620A; /* Orange */
  --sp-ki:#8C2340;          /* Weinrot */
  --blau-900:#0B2545;--blau-800:#12376B;--blau-700:#1B4B93;--blau-600:#2563EB;
  --blau-500:#3B82F6;--blau-400:#60A5FA;--blau-300:#93C5FD;--blau-200:#BFDBFE;
  --blau-100:#DBEAFE;--blau-50:#EFF6FF;
  --background:#F7F8FB;--surface:#FFFFFF;--surface-2:#F1F3F9;--surface-3:#E8ECF5;
  --border:#E6E9F0;--border-stark:#D3DAE6;
  --foreground:#0F1B2D;--text-secondary:#4A5568;--text-muted:#7A8699;
  --primary:var(--blau-600);--primary-hover:var(--blau-700);--primary-soft:var(--blau-50);
  --akzent:#D63384;--akzent-flaeche:#FDEEF5;--akzent-rand:#F7D6E6;
  --success:#157A48;--success-flaeche:#E7F5EE;
  --warning:#AE7413;--warning-flaeche:#FDF4E3;
  --danger:#C2374F;--danger-flaeche:#FCECEF;
  --info:#2B7CC4;--info-flaeche:#E9F2FB;
  --stage-1:#93C5FD;--stage-2:#60A5FA;--stage-3:#3B82F6;--stage-4:#2563EB;
  --stage-5:#1B4B93;--stage-6:#12376B;--stage-7:#0B2545;--stage-8:#157A48;
  --r-sm:8px;--r-md:10px;--r-lg:14px;
  --s1:0 1px 2px rgba(15,27,45,.05);--s2:0 2px 8px rgba(15,27,45,.07);--s3:0 14px 40px rgba(15,27,45,.16);
  --tempo:170ms cubic-bezier(.4,0,.2,1);
}
/* Graupalette fuer CRM-Dashboard und Cold-Calling-Liste (Bilder/Bild 2.jpeg) — greift
   ueber body.crm-dashboard-design (gesetzt fuer crm-start und crm-leads, siehe
   lib/schale.js). Der Rest des Systems (OS-Seiten, Kunden/Pipeline/Team) bleibt beim Blau-Theme.
   "--blau-*" wird hier bewusst mit-ueberschrieben, damit Balken/Kanban-Stufen/Chart-Linie
   automatisch mitfaerben, ohne jede einzelne Stelle im CSS anfassen zu muessen. */
/* ======================= GRAPHIT =======================
   Die gesamte Palette ist aus dem Deko-Objekt selbst gemessen (public/bilder/orb-grau.png,
   Helligkeits-Perzentile ueber alle deckenden Pixel):

     1% #15161B · 15% #303336 · 30% #44474C · 50% #5B5F62 · 70% #7A7E84 · 95% #BFC0C0

   Entscheidend ist der Blaustich: die Blume hat durchgehend B−R ≈ +7, sie ist ein KUEHLES
   Graphit. Die vorherige Palette war warmes Taupe (#2B2A28 -> B−R = −3). Objekt und Flaeche
   zogen also farblich in entgegengesetzte Richtungen — deshalb wirkte die Seite huebsch,
   aber nie wie aus einem Guss. Jetzt liegt jeder Grauton vom hellsten Hintergrund bis zur
   dunkelsten Karte auf DERSELBEN Achse wie das Objekt: es sitzt nicht mehr auf dem Design,
   es ist das Design.

   "--blau-*" wird bewusst mit-ueberschrieben, damit Chart-Linie, Balken und Kanban-Stufen
   automatisch mitfaerben, ohne jede Stelle einzeln anzufassen. */
body.crm-dashboard-design{
  --blau-900:#15171B;--blau-800:#1F2227;--blau-700:#2C3037;--blau-600:#3B4048;
  --blau-500:#5B6069;--blau-400:#7A8087;--blau-300:#A4A9B1;--blau-200:#CBCFD5;
  --blau-100:#E1E4E9;--blau-50:#F2F4F7;
  /* Der Hintergrund ist eine Buehne, kein Anstrich: EINE Lichtquelle oben links, echtes
     Gewicht unten rechts (bis #A2A7B0 statt vorher #C6C4BD). Die dunklen Pole sitzen
     bewusst im unteren Bilddrittel — dort liegt kein Fliesstext, dort darf es tragen.
     background-attachment siehe unten: die Lichtquelle bleibt beim Scrollen stehen. */
  --background:
    radial-gradient(1200px 760px at 14% -20%, #EFF2F6 0%, rgba(239,242,246,0) 52%),
    radial-gradient(1500px 1000px at 90% 100%, #838894 0%, rgba(131,136,148,0) 62%),
    radial-gradient(950px 860px at -4% 86%, #939AA5 0%, rgba(147,154,165,0) 56%),
    linear-gradient(162deg, #DCE0E7 0%, #CBD0D8 30%, #B4B9C3 66%, #989DA9 100%);
  /* Karten sind aus dem Block geschliffen: eigene Lichtquelle in der oberen linken Ecke,
     der Verlauf laeuft diagonal bis #D4D8DF aus. Der reine Linear-Verlauf davor
     verteilte sich ueber die grossen Kartenflaechen so weit, dass am Bildschirm
     wieder nur flaches Weiss ankam — die Ecklichtquelle macht ihn wieder lesbar. */
  --surface:
    radial-gradient(88% 72% at 2% -6%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(160deg,#FDFDFE 0%,#F3F5F8 28%,#E4E7EC 64%,#D2D6DD 100%);
  --surface-2:linear-gradient(160deg,#F1F3F6 0%,#D2D6DD 100%);
  --surface-3:linear-gradient(160deg,#DDE0E5 0%,#AFB4BD 100%);
  --border:#C2C7CF;--border-stark:#9DA2AB;
  --foreground:#14161A;--text-secondary:#4B5058;--text-muted:#5E646C;
  --primary:var(--blau-600);--primary-hover:var(--blau-700);--primary-soft:var(--blau-50);
  --akzent:#5B6069;--akzent-flaeche:#E7E9ED;--akzent-rand:#CBCFD5;
  --warning:#5E646C;--warning-flaeche:#E7E9ED;
  --info:#4B5058;--info-flaeche:#F0F2F5;
  /* Trichter-Stufen: eine durchgehende Rampe von mittlerem Graphit ins Schwarz der Blume.
     Frueher begann sie bei #DCDBD7 — weisse Schrift darauf hatte 1,39:1 und war praktisch
     unlesbar. Jede Stufe liegt jetzt bei mindestens 5,3:1. */
  --stage-1:#666C75;--stage-2:#5A6069;--stage-3:#4E545C;--stage-4:#42474F;
  --stage-5:#363B42;--stage-6:#2A2E35;--stage-7:#1A1E23;--stage-8:#157A48;
  /* Kuehl getoente, geschichtete Schatten — Nahschatten fuer die Kante, Fernschatten
     fuer das Abheben von der jetzt dunkleren Flaeche. */
  --s1:0 1px 2px rgba(20,22,26,.07), 0 2px 6px rgba(20,22,26,.05);
  --s2:0 4px 14px -2px rgba(20,22,26,.14), 0 2px 6px rgba(20,22,26,.07);
  --s3:0 30px 70px -18px rgba(16,18,22,.42), 0 10px 24px -10px rgba(16,18,22,.26);
}
/* Die Lichtquelle gehoert zum Raum, nicht zum Dokument: fest verankert bleibt sie beim
   Scrollen an ihrem Platz, statt mit dem Inhalt wegzurutschen. Ohne das laegen die
   dunklen Pole bei einer 3.500 px langen Seite komplett ausserhalb des Sichtbereichs
   und die ganze Tiefe waere umsonst gerechnet. */
body.crm-dashboard-design{background-attachment:fixed}
/* Zusaetzliche Verlaeufe fuer innere Bauteile — nur im CRM-Dashboard. Die Forecast-Box
   braucht einen eigenen Verlauf, weil ihr Standard var(--surface) nutzte, das selbst ein
   Verlauf ist und als Farb-Stopp ungueltig waere. */
body.crm-dashboard-design .forecast{background:linear-gradient(135deg,#D2D7DE 0%,#EDEFF3 48%,#FFFFFF 100%)}
body.crm-dashboard-design .signal{background:linear-gradient(120deg,#E3E6EB 0%,#F4F6F8 100%)}
body.crm-dashboard-design .signal-icon{background:linear-gradient(160deg,#FFFFFF 0%,#DEE2E7 100%)}
body.crm-dashboard-design .zeitraum{background:linear-gradient(160deg,#EDEFF3 0%,#D2D6DD 100%)}
body.crm-dashboard-design .segmente{background:linear-gradient(160deg,#EDEFF3 0%,#D2D6DD 100%)}
body.crm-dashboard-design .leer-icon{background:linear-gradient(160deg,#FFFFFF 0%,#DEE2E7 100%)}
/* Dunkle Fassung — nur die Farbmarken werden getauscht, kein Bauteil kennt sie einzeln.
   Umschalter sitzt in der Topbar, Auswahl liegt in localStorage. */
:root[data-theme="dark"]{
  --blau-900:#0A1626;--blau-800:#0F2540;--blau-700:#16345B;--blau-600:#4B8DF8;
  --blau-500:#5E9BFA;--blau-400:#7FB0FC;--blau-300:#9DC3FD;--blau-200:#1E3A5F;
  --blau-100:#16304F;--blau-50:#132840;
  --background:#0C1420;--surface:#121C2B;--surface-2:#1A2637;--surface-3:#243247;
  --border:#223044;--border-stark:#2E3F57;
  --foreground:#E8EEF6;--text-secondary:#A8B8CC;--text-muted:#7C8DA3;
  --primary:#4B8DF8;--primary-hover:#6BA1FA;--primary-soft:#16304F;
  --akzent:#F06CAB;--akzent-flaeche:#33192A;--akzent-rand:#4A2438;
  --success:#3DBB80;--success-flaeche:#12301F;
  --warning:#E0A33C;--warning-flaeche:#332612;
  --danger:#EC6A80;--danger-flaeche:#331A20;
  --info:#5AA9E6;--info-flaeche:#122536;
  --stage-1:#1E3A5F;--stage-2:#27507F;--stage-3:#31659F;--stage-4:#3B7ABF;
  --stage-5:#4B8DF8;--stage-6:#7FB0FC;--stage-7:#9DC3FD;--stage-8:#3DBB80;
  --s1:0 1px 2px rgba(0,0,0,.4);--s2:0 2px 8px rgba(0,0,0,.45);--s3:0 14px 40px rgba(0,0,0,.6);
}
/* "Weiss / Schlicht"-Modus (Wunsch Lukas 22.07.): flaches, ruhiges Weiss OHNE
   Verlaeufe, Blau -> neutrales Schiefergrau — augenschonend bei Blaulichtfilter.
   Eigener Knopf in der Topbar (getrennt vom Hell/Dunkel-Schalter), in localStorage.
   Ueberschreibt sowohl das Blau-Theme als auch Janniks grauen CRM-Dashboard-Look. */
:root[data-weiss="1"],
:root[data-weiss="1"] body.crm-dashboard-design{
  /* Urspruengliches Flowstate-BLAU erzwingen (auch ueber data-theme=dark UND
     Janniks CRM-Grau) — Lukas will das Blau behalten, nur alles weiss. */
  --blau-900:#0B2545;--blau-800:#12376B;--blau-700:#1B4B93;--blau-600:#2563EB;
  --blau-500:#3B82F6;--blau-400:#60A5FA;--blau-300:#93C5FD;--blau-200:#BFDBFE;
  --blau-100:#DBEAFE;--blau-50:#EFF6FF;
  --background:#F7F8FB;--surface:#FFFFFF;--surface-2:#F1F3F9;--surface-3:#E8ECF5;
  --border:#E6E9F0;--border-stark:#D3DAE6;
  --foreground:#0F1B2D;--text-secondary:#4A5568;--text-muted:#7A8699;
  --primary:#2563EB;--primary-hover:#1B4B93;--primary-soft:#EFF6FF;
  --akzent:#2563EB;--akzent-flaeche:#EFF6FF;--akzent-rand:#BFDBFE;
  --stage-1:#93C5FD;--stage-2:#60A5FA;--stage-3:#3B82F6;--stage-4:#2563EB;
  --stage-5:#1B4B93;--stage-6:#12376B;--stage-7:#0B2545;--stage-8:#157A48;
  --s1:0 1px 2px rgba(15,27,45,.05);--s2:0 2px 8px rgba(15,27,45,.07);--s3:0 14px 40px rgba(15,27,45,.16);
}
/* Janniks Verlaufs-Flaechen im CRM-Dashboard im Weiss-Modus flach weiss machen. */
:root[data-weiss="1"] body.crm-dashboard-design .forecast,
:root[data-weiss="1"] body.crm-dashboard-design .signal,
:root[data-weiss="1"] body.crm-dashboard-design .signal-icon,
:root[data-weiss="1"] body.crm-dashboard-design .zeitraum,
:root[data-weiss="1"] body.crm-dashboard-design .segmente,
:root[data-weiss="1"] body.crm-dashboard-design .leer-icon{background:#FFFFFF}
/* Die zwei dunklen Anker-Karten (Umsatz-Hero + Umsatz je Person) -> weiss. */
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte,
:root[data-weiss="1"] body.crm-dashboard-design .karte-dunkel{
  background:#FFFFFF;border-color:var(--border);color:var(--foreground);box-shadow:var(--s2)}
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .kachel-zahl,
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .hero-umsatz-neben-zahl,
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .mini-stat b,
:root[data-weiss="1"] body.crm-dashboard-design .karte-dunkel h2,
:root[data-weiss="1"] body.crm-dashboard-design .karte-dunkel .balken-wert{color:var(--foreground)}
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .kachel-label,
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .kachel-mini-titel,
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .mini-stat .caption,
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .caption,
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .kachel-mini-ziel,
:root[data-weiss="1"] body.crm-dashboard-design .karte-dunkel .sub,
:root[data-weiss="1"] body.crm-dashboard-design .karte-dunkel .caption,
:root[data-weiss="1"] body.crm-dashboard-design .karte-dunkel .balken-label{color:var(--text-secondary)}
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .mini-stat-reihe{border-bottom-color:var(--border)}
/* Balken (je Person) im Weiss-Modus blau statt hell. */
:root[data-weiss="1"] body.crm-dashboard-design .karte-dunkel .balken{background:linear-gradient(180deg,var(--blau-500) 0%,var(--blau-600) 100%)}

/* Sidebar (Rail) -> weiss mit BLAUEN Icons/Akzenten. */
:root[data-weiss="1"] .rail{
  background:#FFFFFF;border-color:var(--border);color:var(--text-secondary);
  box-shadow:0 20px 48px -14px rgba(15,27,45,.13), inset 0 1px 0 rgba(255,255,255,.6)}
:root[data-weiss="1"] .rail a{color:var(--primary)}
:root[data-weiss="1"] .rail a:hover{background:var(--primary-soft);color:var(--primary-hover)}
:root[data-weiss="1"] .rail a.offen{color:var(--primary-hover)}
:root[data-weiss="1"] .rail a.aktiv{color:var(--primary-hover);
  background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--akzent-rand)}
:root[data-weiss="1"] .rail-gruppe{color:var(--text-muted)}
:root[data-weiss="1"] .rail-marke .rail-wort{color:var(--foreground)}
:root[data-weiss="1"] .rail-nutzer{border-top-color:var(--border)}
:root[data-weiss="1"] .rail-nutzer .rail-wort span:first-child{color:var(--foreground)}
:root[data-weiss="1"] .rail-nutzer .rail-wort span:last-child{color:var(--text-muted)!important}
:root[data-weiss="1"] .rail button{color:var(--text-secondary)}
:root[data-weiss="1"] .rail button:hover{background:var(--danger-flaeche);color:var(--danger)}
:root[data-weiss="1"] .rail-logo{background:linear-gradient(158deg,var(--blau-600) 0%,var(--blau-800) 100%);color:#fff}
:root[data-weiss="1"] .rail-avatar{background:linear-gradient(160deg,var(--blau-600),var(--blau-800));color:#fff}
/* Der Weiss-Umschalter in der Topbar: klar beschriftete Pille. */
.topbar .weiss-schalter{width:auto;height:auto;min-width:0;padding:6px 12px;border-radius:999px;
  font:600 12px/1 'Inter',system-ui,sans-serif;color:var(--text-secondary);
  background:var(--surface-2);border:1px solid var(--border);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background var(--tempo),color var(--tempo),border-color var(--tempo)}
.topbar .weiss-schalter:hover{color:var(--foreground);border-color:var(--border-stark)}
.topbar .weiss-schalter.aktiv{background:var(--primary);color:#fff;border-color:var(--primary)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--background);color:var(--foreground);
  font:400 14px/1.55 'Inter','Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1{font-size:22px;font-weight:600;letter-spacing:-.015em}
h2{font-size:16px;font-weight:600;letter-spacing:-.01em}
h3{font-size:14px;font-weight:600}
.caption{font-size:12px;color:var(--text-muted)}
.sub{font-size:13px;color:var(--text-secondary)}
.muted{color:var(--text-muted)}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
svg{flex-shrink:0}

/* ---------- Anmeldung ---------- */
body.login-seite{display:grid;place-items:center;min-height:100vh;
  background:radial-gradient(900px 500px at 50% -5%,var(--blau-50),transparent 65%),var(--background)}
.login-karte{width:min(410px,92vw);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:40px;box-shadow:var(--s3)}
.login-marke{display:flex;align-items:center;gap:13px}
.login-logo{width:44px;height:44px;border-radius:12px;background:var(--blau-900);color:#fff;
  display:grid;place-items:center;box-shadow:0 4px 14px rgba(11,37,69,.3)}
.login-logo svg{width:22px;height:22px}
.marke{font-size:19px;font-weight:700;letter-spacing:-.02em}
.marke em{color:var(--primary);font-style:normal}
.marke-sub{font-size:11px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.login-karte form{display:grid;gap:14px;margin-top:22px}

/* ---------- Gerüst: Icon-Rail + Inhalt ---------- */
.shell{min-height:100vh}
/* Dunkle, schwebende, abgerundete Nav-Pill (Charcoal, mit Abstand vom Rand) — die
   Icon-Leiste faehrt beim Hover zu einem gruppierten Panel mit hellem Text aus. */
.rail{display:flex;flex-direction:column;gap:2px;overflow:hidden;
  position:fixed;top:14px;left:14px;bottom:14px;width:74px;padding:16px 13px;z-index:40;
  border-radius:26px;border:1px solid #24231D;
  background:linear-gradient(180deg,#3B3A37 0%,#2C2B28 58%,#201F1C 100%);
  box-shadow:0 20px 48px -14px rgba(18,17,14,.5), inset 0 1px 0 rgba(255,255,255,.06);
  color:rgba(240,238,233,.82);transition:width var(--tempo),box-shadow var(--tempo)}
.rail:hover{width:266px;box-shadow:0 28px 66px -14px rgba(18,17,14,.62), inset 0 1px 0 rgba(255,255,255,.08)}
/* Mitte scrollt, Marke oben + Nutzerblock unten bleiben fest sichtbar */
.rail-nav{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail-nav::-webkit-scrollbar{width:0;height:0}
.rail-wort{white-space:nowrap;opacity:0;transition:opacity 120ms;font-size:13.5px;font-weight:550}
.rail:hover .rail-wort{opacity:1}
.rail-gruppe{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:rgba(240,238,233,.6);padding:16px 12px 7px;white-space:nowrap;opacity:0;transition:opacity 120ms;height:30px}
.rail:hover .rail-gruppe{opacity:1}
.rail-gruppe:first-of-type{padding-top:4px}
.rail-marke{display:flex;align-items:center;gap:13px;padding:0 6px 16px;white-space:nowrap;min-width:0;flex-shrink:0}
.rail-logo{width:38px;height:38px;border-radius:12px;
  background:linear-gradient(158deg,#F5F3EE 0%,#C7C5BE 100%);color:#2B2A28;
  display:grid;place-items:center;box-shadow:0 5px 14px -4px rgba(0,0,0,.45);flex-shrink:0}
.rail-logo svg{width:19px;height:19px}
.rail-marke .rail-wort{color:#FCFBF9}
/* min-width:0 ist noetig: Flex-Kinder sind sonst mindestens so breit wie ihr Inhalt. */
.rail a{height:44px;border-radius:12px;display:flex;align-items:center;gap:14px;padding:0 14px;
  color:rgba(242,240,235,.86);position:relative;flex-shrink:0;min-width:0;
  transition:background var(--tempo),color var(--tempo),padding var(--tempo)}
.rail:hover a{padding:0 12px}
.rail a:hover{background:rgba(255,255,255,.07);color:#FFFFFF}
.rail a.offen{color:#FFFFFF}
.rail a.aktiv{color:#FCFBF9;
  background:linear-gradient(160deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.07) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.rail a svg{width:19px;height:19px}
.rail-nutzer{display:flex;align-items:center;gap:13px;padding:13px 6px 5px;margin-top:6px;flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.12);white-space:nowrap;min-width:0}
.rail-nutzer .rail-wort span:first-child{color:#FFFFFF}
.rail-nutzer .rail-wort span:last-child{color:rgba(240,238,233,.62)!important}
.rail-avatar{width:34px;height:34px;border-radius:50%;
  background:linear-gradient(160deg,#F3F1EC,#B2AFA8);color:#2B2A28;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.rail form{margin:0}
.rail button{background:none;color:rgba(240,238,233,.72);padding:0 12px;height:44px;
  border-radius:12px;display:flex;align-items:center;gap:14px;box-shadow:none}
.rail button:hover{background:rgba(236,106,128,.16);color:#F5B7C1;box-shadow:none}
.rail > a[href="/logout"]{flex-shrink:0;color:rgba(240,238,233,.72)}
.rail > a[href="/logout"]:hover{background:rgba(236,106,128,.16);color:#F5B7C1}
.inhalt{display:flex;flex-direction:column;min-width:0;margin-left:102px}

/* ---------- Top-Bar ---------- */
/* Schwebende, abgerundete Kopfleiste — gleiche Form wie die Navbar-Pille, Farbe
   bleibt hell (var(--surface)). Abstand nach oben und ein kleiner nach rechts. */
.topbar{display:flex;align-items:center;gap:20px;padding:11px 22px;background:var(--surface);
  border:1px solid var(--border);border-radius:22px;
  box-shadow:0 14px 32px -20px rgba(18,17,14,.32), inset 0 1px 0 rgba(255,255,255,.65);
  margin:14px 14px 0 0;position:relative;z-index:20}
.topbar-titel{font-size:17px;font-weight:600;white-space:nowrap}
.topbar-suche{flex:1;max-width:540px;margin:0 auto;position:relative}
.topbar-suche input{background:var(--surface-2);border-color:transparent;padding-left:38px;height:38px;border-radius:10px}
.topbar-suche input:focus{background:var(--surface);border-color:var(--primary)}
.topbar-suche svg{position:absolute;left:13px;top:11px;width:16px;height:16px;color:var(--text-muted)}
.kbd{position:absolute;right:11px;top:9px;font-size:11px;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.topbar-rechts{display:flex;align-items:center;gap:14px;margin-left:auto}
.datum-chip{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-secondary);
  background:var(--surface-2);border-radius:99px;padding:6px 13px;white-space:nowrap}
.datum-chip svg{width:14px;height:14px}
.termin-hinweis{display:flex;align-items:center;gap:8px;background:var(--warning-flaeche);
  border-radius:99px;padding:6px 15px;font-size:12.5px;color:var(--foreground);white-space:nowrap}
.termin-hinweis svg{width:15px;height:15px;color:var(--warning)}
.termin-minuten{color:var(--danger);font-weight:700}
.glocke-huelle{position:relative}
.glocke{position:relative;color:var(--text-secondary)}
.glocke svg{width:18px;height:18px}
.glocke-punkt{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger)}
.glocke.klingelt svg{animation:glocke-laeuten .6s ease-in-out infinite}
@keyframes glocke-laeuten{
  0%,100%{transform:rotate(0)}
  20%{transform:rotate(-16deg)}
  40%{transform:rotate(13deg)}
  60%{transform:rotate(-9deg)}
  80%{transform:rotate(5deg)}
}
.glocke-popup{position:absolute;top:calc(100% + 8px);right:0;width:300px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--s3);padding:14px;z-index:30}
.glocke-popup-liste{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow-y:auto}
.glocke-popup-eintrag{font-size:13px;color:var(--foreground);padding:9px 10px;background:var(--surface-2);border-radius:var(--r-sm)}
.glocke-popup-leer{font-size:13px;color:var(--text-muted);padding:8px 2px}
.glocke-popup .dialog-fuss{justify-content:flex-end;margin-top:12px;padding-top:12px}
.nutzer-block{text-align:right;line-height:1.25}
.nutzer-name{font-size:13.5px;font-weight:600}
.nutzer-rolle{font-size:11.5px;color:var(--text-muted)}
.stoppuhr{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:99px;padding:6px 8px 6px 15px}
.stoppuhr-zeit{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--foreground);min-width:64px}
.stoppuhr button{padding:6px 13px;font-size:12px;border-radius:99px;box-shadow:none}
.stoppuhr button.feierabend{background:var(--surface);color:var(--danger);border:1px solid var(--border-stark)}
.stoppuhr button.feierabend:hover{background:var(--surface-3)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--blau-600);color:#fff;
  display:grid;place-items:center;font-weight:600;font-size:13px;object-fit:cover;flex-shrink:0}

/* ---------- Reiterleiste ---------- */
/* Reiter sitzen unter der schwebenden Kopfleiste — kein eigener Balken mehr,
   sondern transparent, damit sie sauber unter dem Header schweben. */
.reiterleiste{display:flex;align-items:center;gap:20px;padding:10px 22px 2px;background:transparent;
  border-bottom:none;flex-wrap:wrap;margin-right:14px}
/* Reiter bekommen dieselbe Interaktion wie die Navbar: weiches, rundes Highlight
   statt Unterstrich — gleiche Schrift, gleiches Anfass-Gefuehl. */
.reiter{display:flex;gap:6px}
.reiter a{padding:8px 14px;font-size:14px;font-weight:500;color:var(--text-secondary);
  border-radius:11px;transition:color var(--tempo),background var(--tempo),box-shadow var(--tempo)}
.reiter a:hover{color:var(--foreground);background:var(--surface-2);text-decoration:none}
.reiter a.aktiv{color:var(--foreground);background:var(--surface);font-weight:600;
  box-shadow:0 4px 14px -8px rgba(18,17,14,.35), inset 0 1px 0 rgba(255,255,255,.7)}
/* Wessen Deals sehe ich — steht mit Abstand rechts neben den Reitern. */
.personen{display:flex;gap:3px;margin-left:22px;padding-left:22px;
  border-left:1px solid var(--border);flex-wrap:wrap;align-items:center}
.personen a{padding:7px 12px;font-size:13px;font-weight:500;color:var(--text-muted);
  border-radius:9px;white-space:nowrap;transition:color var(--tempo),background var(--tempo)}
.personen a:hover{color:var(--foreground);background:var(--surface-2);text-decoration:none}
.personen a.aktiv{color:var(--foreground);background:var(--surface-2);font-weight:650;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.segmente{display:inline-flex;gap:2px;background:var(--surface-2);padding:3px;
  border-radius:9px;margin:8px 0 8px auto}
.segmente a{padding:6px 14px;border-radius:7px;font-size:13px;font-weight:500;color:var(--text-secondary)}
.segmente a:hover{color:var(--foreground);text-decoration:none}
.segmente a.aktiv{background:var(--surface);color:var(--foreground);box-shadow:var(--s1);font-weight:600}

main{padding:22px 26px 64px;min-width:0}
.seiten-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;margin-bottom:18px}
.seiten-kopf p{font-size:13.5px;color:var(--text-secondary);margin-top:2px}

/* ---------- Bedienelemente ---------- */
button,.knopf{background:var(--primary);color:#fff;border:0;border-radius:var(--r-sm);padding:9px 16px;
  font:600 13.5px/1.2 inherit;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:background var(--tempo),box-shadow var(--tempo),transform var(--tempo)}
button:hover,.knopf:hover{background:var(--primary-hover);text-decoration:none;box-shadow:var(--s2)}
button:active{transform:translateY(1px)}
button.dunkel,.knopf.dunkel{background:var(--blau-800)}
button.dunkel:hover{background:var(--blau-900)}
button.sekundaer,.knopf.sekundaer{background:var(--surface);color:var(--foreground);border:1px solid var(--border-stark)}
button.sekundaer:hover{background:var(--surface-2)}
button.still{background:transparent;color:var(--text-secondary);box-shadow:none;padding:6px 10px}
button.still:hover{background:var(--surface-2);box-shadow:none}
button.klein{padding:5px 11px;font-size:12.5px}
button svg,.knopf svg{width:16px;height:16px}
input,select,textarea{background:var(--surface);border:1px solid var(--border-stark);border-radius:var(--r-sm);
  padding:9px 12px;font:400 13.5px inherit;color:var(--foreground);width:100%;
  transition:border-color var(--tempo),box-shadow var(--tempo)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--blau-100)}
input::placeholder{color:var(--text-muted)}
label{display:block;font-size:12.5px;font-weight:550;color:var(--text-secondary);margin-bottom:6px}
.feld{margin-bottom:16px}.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- Karten & Raster ---------- */
.karte{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;box-shadow:var(--s1)}
.karte+.karte{margin-top:16px}
/* In Grid-Rastern kein Zusatz-Abstand — sonst rutschen die 2./3. Karte 16px nach unten
   und wirken niedriger als die erste (Grid regelt Abstaende bereits ueber gap). */
.raster .karte+.karte{margin-top:0}
.karte-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.karte-kopf .sub{margin-top:2px}
.raster{display:grid;gap:16px}
.raster-3{grid-template-columns:1.15fr 1fr .9fr}
.raster-2{grid-template-columns:1fr 1fr}
@media(max-width:1300px){.raster-3{grid-template-columns:1fr}.raster-2{grid-template-columns:1fr}}

/* ---------- KPI-Kacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-bottom:18px}
.kachel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:var(--s1);transition:box-shadow var(--tempo)}
.kachel:hover{box-shadow:var(--s2)}
.kachel-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.kachel-label{font-size:13px;font-weight:500;color:var(--text-secondary)}
.kachel-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary)}
.kachel-icon svg{width:17px;height:17px}
.kachel-icon.gruen{background:var(--success-flaeche);color:var(--success)}
.kachel-icon.bernstein{background:var(--warning-flaeche);color:var(--warning)}
.kachel-icon.rosa{background:var(--akzent-flaeche);color:var(--akzent)}
.kachel-icon.rot{background:var(--danger-flaeche);color:var(--danger)}
.kachel-zahl{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.kachel-fuss{margin-top:9px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kachel-fuss-stapel{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.trend.klein{font-size:11px;padding:2px 6px}
.kachel-versetzt{padding-left:28px}
.kachel-versetzt .kachel-kopf{margin-bottom:2px}
.kachel-versetzt .kachel-fuss{margin-top:15px}
.kachel-mini{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.kachel-mini-titel{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em}
.kachel-mini-zahl{font-size:13.5px;font-weight:600;color:var(--foreground)}
.kachel-mini-ziel{font-weight:400;color:var(--text-muted);font-size:11.5px}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;
  font-size:11.5px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--text-secondary)}
.b-blau{background:var(--info-flaeche);color:var(--info)}
.b-gruen{background:var(--success-flaeche);color:var(--success)}
.b-bernstein{background:var(--warning-flaeche);color:var(--warning)}
.b-rot{background:var(--danger-flaeche);color:var(--danger)}
.b-rosa{background:var(--akzent-flaeche);color:var(--akzent)}
.punkt{width:7px;height:7px;border-radius:50%;background:currentColor}
.trend{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  padding:3px 8px;border-radius:6px}
.trend.auf{background:var(--success-flaeche);color:var(--success)}
.trend.ab{background:var(--danger-flaeche);color:var(--danger)}

/* ---------- Tabellen ---------- */
.tabelle-huelle{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--s1)}
table.tabelle{width:100%;border-collapse:collapse}
.tabelle th{text-align:left;padding:12px 18px;font-size:12px;font-weight:600;color:var(--text-secondary);
  border-bottom:1px solid var(--border);white-space:nowrap}
.tabelle td{padding:13px 18px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.tabelle tbody tr{transition:background var(--tempo)}
.tabelle tbody tr:hover{background:var(--surface-2)}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle .rechts{text-align:right}
.zeile-titel{font-weight:600;line-height:1.35}
.zeile-sub{font-size:12px;color:var(--text-muted);margin-top:1px}
.rang{width:34px;height:26px;border-radius:7px;background:var(--surface-2);color:var(--text-secondary);
  display:grid;place-items:center;font-size:12px;font-weight:600}

/* ---------- Filterleiste ---------- */
.filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.filter .such{position:relative;flex:1;min-width:240px;max-width:360px}
.filter .such svg{position:absolute;left:12px;top:11px;width:15px;height:15px;color:var(--text-muted)}
.filter .such input{padding-left:36px}
/* Eigener, kompakter Pfeil statt des nativen — der sitzt sonst weit rechts, weil die
   Auswahl immer so breit wird wie ihre laengste Option. field-sizing laesst sie
   zusaetzlich auf den gewaehlten Text schrumpfen, wo der Browser es kann. */
.filter select,select.knapp{width:auto;min-width:0;
  -webkit-appearance:none;appearance:none;field-sizing:content;
  padding-right:26px;background-repeat:no-repeat;background-position:right 9px center;
  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' fill='none' stroke='%23787774' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E")}

/* Anruf-Statistik: Tabelle in der rechten Haelfte ueber der Leadliste.
   Zeile 1 = Tagesdurchschnitt ("Allgemein"), Zeile 2 = heute + Abweichung davon. */
/* Links die Sparten-Reiter (mittig zur Statistik), rechts die Statistik — ohne Kasten. */
.lead-kopf{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;align-items:center}
.sparten-reiter{display:flex;gap:6px;flex-wrap:wrap;align-self:center}
.sparten-reiter a{padding:8px 14px;font-size:14px;font-weight:500;color:var(--text-secondary);
  border-radius:11px;transition:color var(--tempo),background var(--tempo),box-shadow var(--tempo)}
.sparten-reiter a:hover{color:var(--foreground);background:var(--surface-2);text-decoration:none}
.sparten-reiter a.aktiv{color:var(--foreground);background:var(--surface);font-weight:600;
  box-shadow:0 4px 14px -8px rgba(18,17,14,.35), inset 0 1px 0 rgba(255,255,255,.7)}
.anruf-stat-karte{grid-column:2}
.anruf-stat-kopf{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.anruf-stat-kopf h2{font-size:15px;margin:0}
.anruf-stat-tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.anruf-stat-tab th,.anruf-stat-tab td{text-align:right;padding:6px 4px}
.anruf-stat-tab thead th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted);border-bottom:1px solid var(--border);padding-bottom:7px;line-height:1.25}
.anruf-stat-tab tbody th{text-align:left;font-size:12.5px;font-weight:650;white-space:nowrap;padding-right:12px}
.anruf-stat-tab tbody th span{display:block;font-size:10.5px;font-weight:500;color:var(--text-muted)}
.anruf-stat-tab .stat-zahl{font-size:20px;font-weight:700;letter-spacing:-.02em;display:block}
.stat-allgemein .stat-schnitt{display:block;font-size:11px;font-weight:500;color:var(--text-muted);margin-top:1px}
.stat-heute td{border-top:1px solid var(--border)}
.stat-delta{display:block;font-size:11px;font-weight:650;margin-top:1px}
.stat-delta.auf{color:var(--success)}
.stat-delta.ab{color:var(--danger)}
.stat-delta.neutral{color:var(--text-muted)}
.stat-heute td.puls .stat-zahl{animation:stat-puls .6s ease-out}
@keyframes stat-puls{0%{color:var(--success);transform:scale(1.12)}100%{color:inherit;transform:scale(1)}}
@media (max-width:1100px){.lead-kopf{grid-template-columns:1fr}.anruf-stat-karte{grid-column:1}}

/* "+ Neuer Lead" sitzt ueber der Suchzeile */
.lead-neu-leiste{display:flex;margin-bottom:10px}
/* Kopf ohne Statistik daneben: Reiter stehen allein links */
.lead-kopf-einzeln{grid-template-columns:1fr;margin-bottom:12px}
/* Kundenzahlen rechts neben den Sparten-Reitern */
.kunden-zaehler{grid-column:2;justify-self:end;text-align:right}
.kunden-zaehler .anruf-stat-kopf{justify-content:flex-end;margin-bottom:10px}
.zaehler-reihe{display:flex;gap:26px;justify-content:flex-end;flex-wrap:wrap}
.zaehler{display:flex;flex-direction:column;line-height:1.15}
.zaehler-zahl{font-size:20px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--text-secondary)}
.zaehler-titel{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-muted);margin-top:3px}
/* Die Gesamtzahl steht groesser und dunkler als die Aufschluesselung daneben. */
.zaehler.stark{padding-right:22px;margin-right:4px;border-right:1px solid var(--border)}
.zaehler.stark .zaehler-zahl{font-size:26px;color:var(--foreground)}
.zaehler.stark .zaehler-titel{color:var(--text-secondary)}
@media (max-width:900px){.kunden-zaehler{grid-column:1;justify-self:start;text-align:left}
  .kunden-zaehler .anruf-stat-kopf,.zaehler-reihe{justify-content:flex-start}}
/* ---------- Kundenakte: Anordnung ----------
   Oben nebeneinander Stammdaten / Auftrag / Leistungen, darunter To-Dos,
   ganz unten der Verlauf — so muss man kaum scrollen. */
.akte-oben{display:flex;flex-direction:column-reverse;gap:0}
/* Drei Spalten: Stammdaten | Auftrag + Stand | Firma + Leistungen + Umgesetzt.
   Die Karten fliessen in Spalten, damit "Leistungen" direkt unter "Die Firma" landet. */
.akte-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-bottom:16px}
.akte-spalte{display:grid;gap:16px;align-content:start;min-width:0}
.akte-spalte>.karte{margin:0}
.akte-unten{display:grid;gap:16px}
.akte-unten>.karte{margin-bottom:0}
@media (max-width:1200px){.akte-spalten{grid-template-columns:1fr 1fr}}
@media (max-width:820px){.akte-spalten{grid-template-columns:1fr}}

/* Dokumenten-Ablage: Ordner zum Hineinziehen */
.ablage{display:flex;align-items:center;gap:13px;padding:16px;border-radius:12px;cursor:pointer;
  border:2px dashed var(--border-stark);background:var(--surface-2);
  transition:border-color var(--tempo),background var(--tempo)}
.ablage:hover{border-color:var(--primary);background:var(--surface)}
.ablage.drueber{border-color:var(--success);background:var(--success-flaeche)}
.ablage-icon{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(160deg,#FFFFFF 0%,#E2E1DC 100%);color:var(--blau-700);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(43,42,40,.12)}
.ablage-icon svg{width:20px;height:20px}
.ablage-text b{display:block;font-size:13.5px;margin-bottom:2px}
.ablage-liste{display:grid;gap:6px;margin-top:10px}
.ablage-datei{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:9px;background:var(--surface-2);font-size:12.5px}
.ablage-datei-name{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ablage-hinweis{margin-top:10px}
/* Hinweis: aus dem Lead eine Kundenakte machen */
.akte-hinweis{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-radius:14px;margin-bottom:16px;
  background:linear-gradient(158deg,#FFFFFF 0%,#F2F1ED 100%);border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--s1)}
.akte-hinweis.stark{border-color:var(--success);background:linear-gradient(158deg,#F3FAF5 0%,#E6F4EC 100%)}
.akte-hinweis b{display:block;font-size:14px;margin-bottom:2px}
.akte-hinweis .caption{display:block;max-width:60ch}
.akte-hinweis form{display:flex;gap:8px;align-items:center;margin:0}
.akte-hinweis input[type=date]{width:auto}

/* ---------- Kundenakte: Kopf ---------- */
.akte-zurueck{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:550;
  color:var(--text-secondary);margin-bottom:12px}
.akte-zurueck:hover{color:var(--foreground);text-decoration:none}
.akte-zurueck svg{width:15px;height:15px}
.akte-kopf{align-items:flex-start;gap:16px;flex-wrap:wrap}
.akte-titel{display:flex;align-items:flex-start;gap:14px;min-width:0}
/* Bild der Ansprechperson — zeigt auf einen Blick, wen man am Telefon hat */
.akte-avatar{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:linear-gradient(160deg,#F4F3F0 0%,#DFDDD7 100%);
  display:grid;place-items:end center;box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 2px 6px rgba(43,42,40,.12)}
.akte-avatar svg{width:44px;height:42px;display:block}
.akte-person{font-weight:600;color:var(--foreground)}
.akte-kopf-rechts{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.akte-bereich{display:flex;flex-direction:column;gap:4px;margin:0}
.akte-bereich label{margin:0;font-size:11px}
.akte-bereich select{width:auto;min-width:170px}
.akte-form-oben{margin-top:0;padding-top:0;border-top:0}
/* Lead-Stand bei Performance-Marketing-Kunden */
.leads-stand{margin:4px 0 14px}
.leads-stand-text{font-size:13px;color:var(--text-secondary);margin-bottom:7px}
.leads-stand-text b{color:var(--foreground)}
.leads-spur{height:9px;border-radius:99px;background:var(--surface-2);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(43,42,40,.12)}
.leads-balken{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blau-500),var(--blau-800));
  transition:width .7s cubic-bezier(.2,.7,.2,1)}

/* ---------- Kundenakte: Auftrag, Leistungen, To-Dos ---------- */
.akte-form{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.akte-form .feld{margin:0}
/* Mehrfachauswahl (Leistungen, Kontaktwege) als anklickbare Chips */
.wahl-liste{display:flex;flex-wrap:wrap;gap:7px}
.wahl{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;
  border:1px solid var(--border-stark);background:var(--surface);font-size:12.5px;cursor:pointer;
  transition:background var(--tempo),border-color var(--tempo),color var(--tempo)}
.wahl:hover{background:var(--surface-2)}
.wahl input{width:15px;height:15px;margin:0;accent-color:var(--primary);cursor:pointer}
.wahl:has(input:checked){background:var(--primary-soft);border-color:var(--primary);color:var(--primary);font-weight:600}
/* To-Dos in der Akte — kompakter als auf der To-Do-Seite */
.akte-todos{display:grid;gap:6px;margin-bottom:12px}
.akte-todo{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  background:var(--surface-2);font-size:13px}
.akte-todo.fertig .akte-todo-text{text-decoration:line-through;color:var(--text-muted)}
.akte-todo-text{flex:1;min-width:0}
.akte-todo form{margin:0;display:flex}
/* Titel bekommt eine eigene Zeile, darunter Wichtigkeit/Dringlichkeit/Tag/Knopf —
   sonst quetschen die Auswahlfelder das Eingabefeld auf null. */
/* In der schmalen Spalte stehen die Felder untereinander, Tag und Knopf nebeneinander. */
/* Titel und die beiden Auswahlfelder ueber die volle Breite, darunter die zwei
   Datumsfelder nebeneinander und der Knopf daneben. */
.akte-todo-neu{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:4px}
.akte-todo-neu input[name=titel],.akte-todo-neu select{grid-column:1/-1}
/* Phasen im "Aktueller Stand" der Lead-Akte */
.phasen-liste{display:grid;gap:7px}
.phasen-zeile{display:flex;align-items:center;gap:9px}
.akte-todo-neu select{min-width:0}
.akte-todo-neu input[type=date]{width:auto}
.akte-todo-neu button{padding:9px 13px}

/* Kunden-Tabelle: eigene Spaltenbreiten, sonst wie die Cold-Calling-Liste */
.kunden-tabelle th:nth-child(1),.kunden-tabelle td:nth-child(1){width:26%}
.kunden-tabelle th:nth-child(2),.kunden-tabelle td:nth-child(2){width:15%}
.kunden-tabelle th:nth-child(3),.kunden-tabelle td:nth-child(3){width:13%}
.kunden-tabelle th:nth-child(4),.kunden-tabelle td:nth-child(4){width:15%}
.kunden-tabelle th:nth-child(5),.kunden-tabelle td:nth-child(5){width:11%}
.kunden-tabelle th:nth-child(6),.kunden-tabelle td:nth-child(6){width:20%}
.lead-neu-dialog{max-width:620px;width:calc(100vw - 40px)}
.lead-neu-wahl{display:flex;gap:6px;background:var(--surface-2);padding:4px;border-radius:11px;margin-bottom:18px}
.lead-neu-wahl button{flex:1;background:none;color:var(--text-secondary);box-shadow:none;
  padding:8px 12px;font-size:13.5px;border-radius:8px}
.lead-neu-wahl button.aktiv{background:var(--surface);color:var(--foreground);font-weight:600;box-shadow:var(--s1)}
/* "In wessen Liste?" — nur fuer die Geschaeftsfuehrung sichtbar. Bewusst
   abgesetzt und nicht als weiteres Feld unter vielen: Wem die Leads gehoeren,
   entscheidet, wer sie anruft. Das muss man sehen, bevor man drueckt. */
.lead-neu-fuer{background:var(--surface-2);border-radius:10px;padding:11px 12px;margin-bottom:18px}
.lead-neu-fuer label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.lead-neu-fuer select{width:100%}
.lead-neu-fuer .sub{font-size:12px}
.lead-neu-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.lead-neu-raster .voll{grid-column:1/-1}
.lead-neu-spalten{font-size:12px;font-weight:600;color:var(--text-secondary);
  background:var(--surface-2);border-radius:8px;padding:9px 12px;line-height:1.6}
.lead-neu-dialog textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6}
.lead-neu-alt{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.lead-neu-alt summary{font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.lead-neu-alt summary:hover{color:var(--foreground)}
.lead-neu-hinweis{font-size:13px;margin-top:14px;min-height:18px;color:var(--text-secondary)}
.lead-neu-hinweis.erfolg{color:var(--success);font-weight:600}
.lead-neu-hinweis.fehler{color:var(--danger);font-weight:600}

/* Branche je Lead — nachtraeglich aenderbar */
.lead-branche{margin-top:5px;font-size:11.5px;padding:4px 24px 4px 8px;border-radius:7px;
  color:var(--text-secondary);background-color:var(--surface-2);border-color:transparent;
  -webkit-appearance:none;appearance:none;field-sizing:content;max-width:100%;
  background-repeat:no-repeat;background-position:right 7px center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 11 7' fill='none' stroke='%23787774' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E")}
.lead-branche:hover{background-color:var(--surface-3);cursor:pointer}
.lead-branche.gesetzt{border-color:var(--success);background-color:var(--success-flaeche)}
.lead-branche.fehler{border-color:var(--danger);background-color:var(--danger-flaeche)}

/* ---------- Cold-Calling-Liste: alles auf einen Blick, kein Seitwaerts-Scrollen ---------- */
.anruf-tabelle{table-layout:fixed;width:100%}
.anruf-tabelle th,.anruf-tabelle td{padding:10px 10px;vertical-align:middle}
.anruf-tabelle th:nth-child(1),.anruf-tabelle td:nth-child(1){width:20%}
.anruf-tabelle th:nth-child(2),.anruf-tabelle td:nth-child(2){width:13%}
.anruf-tabelle th:nth-child(3),.anruf-tabelle td:nth-child(3){width:13%}
.anruf-tabelle th:nth-child(4),.anruf-tabelle td:nth-child(4){width:9%}
.anruf-tabelle th:nth-child(5),.anruf-tabelle td:nth-child(5){width:16%}
.anruf-tabelle th:nth-child(6),.anruf-tabelle td:nth-child(6){width:21%}
.anruf-tabelle th:nth-child(7),.anruf-tabelle td:nth-child(7){width:8%}
.anruf-tabelle td .zeile-titel{white-space:normal;line-height:1.25}
/* Firmenname und Ort muessen sich markieren und kopieren lassen — man schlaegt
   sie anderswo nach. Die Zeilen-Auswahl per Ziehen darf das nicht kosten:
   waehrend eines Zuges traegt der body .zieht-aus, dann greift die Sperre aus
   Zeile ~3015 wieder und die Markierung waechst nicht ueber die Tabelle. */
body:not(.zieht-aus) .anruf-tabelle td .zeile-titel,
body:not(.zieht-aus) .anruf-tabelle td .zeile-sub{
  user-select:text;-webkit-user-select:text;cursor:text}
/* Handy oben, Festnetz darunter. Die zweite Nummer tritt zurueck: Sie ist der
   Umweg, nicht das Ziel. Das Kuerzel davor steht nur da, wenn es zwei gibt. */
.anruf-tabelle .tel-zweite{margin-top:3px}
.anruf-tabelle .tel-art{
  display:inline-block;min-width:52px;font-size:11px;color:var(--text-muted);
  font-weight:500;letter-spacing:.01em}
.anruf-tabelle .tel-zweite a{font-weight:400;opacity:.8}

/* Wann der Lead hochgeladen wurde. Ein Datum, keine Meldung — deshalb noch
   eine Stufe leiser als die Nebenzeile, in der es steht, und angehaengt statt
   in einer eigenen Spalte. Wer es genau wissen will, faehrt darueber: im
   Tooltip stehen das volle Datum und die Liste, aus der der Lead stammt. */
.anruf-tabelle .zeile-quelle{opacity:.62;white-space:nowrap;cursor:help}
.anruf-tabelle .zeile-quelle::before{content:" · "}

/* Maps-Suche fuer Leads ohne Webseite: sichtbar, aber leiser als ein echter
   Webseiten-Link — er fuehrt zu Google, nicht zum Betrieb selbst. Der lange
   Selektor ist Absicht: weiter unten faerbt eine Regel ALLE Links der Tabelle
   blau (body.crm-dashboard-design .anruf-tabelle a) und wuerde sonst gewinnen. */
body .anruf-tabelle td a.maps-link{
  color:var(--text-muted);font-weight:500;text-decoration:none;white-space:nowrap}
body .anruf-tabelle td a.maps-link:hover{color:var(--primary);text-decoration:underline}
.anruf-tabelle .anruf-ergebnis,.anruf-tabelle .anruf-grund,
.anruf-tabelle .anruf-notiz,.anruf-tabelle .anruf-grund-frei{
  width:100%;padding:7px 9px;font-size:12.5px;border-radius:8px}
.anruf-tabelle .anruf-ergebnis,.anruf-tabelle .anruf-grund{padding-right:26px}
.anruf-tabelle .anruf-grund-frei{margin-top:6px}
.anruf-tabelle .anruf-akte{width:100%;justify-content:center;padding:7px 8px;font-size:12px;white-space:nowrap}
.anruf-tabelle .anruf-akte svg{width:14px;height:14px}
.anruf-senden{width:20px;height:20px;accent-color:var(--success);cursor:pointer}
.anruf-zeile:hover{background:var(--surface-2)}

/* ============================================================
   Cold-Calling-Liste im Grau-Design (wie das CRM-Dashboard).
   Der dunkle Tabellenkopf ist der Anker der Seite — so wie die
   dunklen Karten das Dashboard tragen. Die Lead-Zeilen darunter
   bleiben bewusst rein weiss, damit die Liste ruhig lesbar bleibt.
   ============================================================ */

/* Tabellenkopf hell — weiss mit weichem Grauverlauf, wie der Rest der Seite */
body.crm-dashboard-design .anruf-tabelle thead th{
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F0EC 60%,#E7E6E1 100%);
  color:var(--text-secondary);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:13px 10px;
  border-bottom:1px solid rgba(43,42,40,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
body.crm-dashboard-design .anruf-tabelle thead th:first-child{padding-left:16px}
body.crm-dashboard-design .anruf-tabelle thead th:last-child{padding-right:16px}

/* Tabellenrahmen: schwebend, wie die Karten im Dashboard */
body.crm-dashboard-design .tabelle-huelle{
  background:#FFFFFF;border:1px solid rgba(43,42,40,.09);border-radius:16px;
  box-shadow:0 1px 2px rgba(43,42,40,.05), 0 14px 34px -14px rgba(43,42,40,.2)}

/* Lead-Zeilen bleiben weiss — mit feiner Trennlinie und ruhigem Hover */
body.crm-dashboard-design .anruf-tabelle tbody tr{background:#FFFFFF}
body.crm-dashboard-design .anruf-tabelle tbody td{
  border-bottom:1px solid rgba(43,42,40,.07);padding-top:12px;padding-bottom:12px}
body.crm-dashboard-design .anruf-tabelle tbody td:first-child{padding-left:16px}
body.crm-dashboard-design .anruf-tabelle tbody td:last-child{padding-right:16px}
body.crm-dashboard-design .anruf-zeile:hover{background:linear-gradient(180deg,#FCFBF9 0%,#F4F3F0 100%)}
body.crm-dashboard-design .anruf-tabelle .zeile-titel{letter-spacing:-.01em}
body.crm-dashboard-design .anruf-tabelle a{color:var(--blau-700);font-weight:550}
body.crm-dashboard-design .anruf-tabelle a:hover{color:var(--blau-900)}

/* Bedienelemente in der Zeile: heller Verlauf + zarte Lichtkante */
body.crm-dashboard-design .anruf-tabelle .anruf-ergebnis,
body.crm-dashboard-design .anruf-tabelle .anruf-grund,
body.crm-dashboard-design .anruf-tabelle .anruf-notiz,
body.crm-dashboard-design .anruf-tabelle .anruf-grund-frei,
body.crm-dashboard-design .lead-branche{
  background-color:#F7F6F3;border-color:rgba(43,42,40,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
body.crm-dashboard-design .anruf-tabelle .anruf-ergebnis:hover,
body.crm-dashboard-design .lead-branche:hover{background-color:#F0EFEB}
body.crm-dashboard-design .anruf-tabelle .anruf-akte{
  background:linear-gradient(180deg,#FFFFFF 0%,#F0EFEB 100%);
  border:1px solid rgba(43,42,40,.12);color:var(--blau-800);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(43,42,40,.06)}
body.crm-dashboard-design .anruf-tabelle .anruf-akte:hover{
  background:linear-gradient(180deg,#FFFFFF 0%,#E7E6E1 100%)}
body.crm-dashboard-design .anruf-senden{accent-color:var(--blau-800);width:19px;height:19px}

/* Anruf-Statistik: ohne Kasten, aber mit klarer Typo-Hierarchie */
body.crm-dashboard-design .anruf-stat-kopf h2{letter-spacing:-.015em}
body.crm-dashboard-design .anruf-stat-tab thead th{border-bottom-color:rgba(43,42,40,.14)}
body.crm-dashboard-design .stat-allgemein .stat-zahl{color:var(--blau-800)}
body.crm-dashboard-design .stat-heute td{border-top-color:rgba(43,42,40,.12)}
body.crm-dashboard-design .stat-heute .stat-zahl{color:#22211F}

/* Sparten-Reiter: gleiche Pille wie die Reiter im Dashboard */
body.crm-dashboard-design .sparten-reiter a.aktiv{
  background:linear-gradient(158deg,#FFFFFF 0%,#F2F1ED 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -8px rgba(43,42,40,.35)}

/* Such- und Filterzeile: leicht eingelassen, damit sie ruhig wirkt */
body.crm-dashboard-design .filter .such input,
body.crm-dashboard-design .filter select{
  background-color:#FBFAF8;border-color:rgba(43,42,40,.12);
  box-shadow:inset 0 1px 2px rgba(43,42,40,.05)}
body.crm-dashboard-design .filter .such input:focus,
body.crm-dashboard-design .filter select:focus{
  background-color:#FFFFFF;border-color:var(--blau-500);box-shadow:0 0 0 3px rgba(114,111,104,.16)}

/* Leerer Zustand + Dialog im Kartenlook des Dashboards */
body.crm-dashboard-design .karte.leer{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(43,42,40,.05), 0 12px 30px -14px rgba(43,42,40,.2)}
body.crm-dashboard-design dialog{
  background:linear-gradient(158deg,#FFFFFF 0%,#F7F6F3 100%);
  border:1px solid rgba(43,42,40,.1);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 32px 70px -20px rgba(38,37,33,.4)}
body.crm-dashboard-design dialog::backdrop{background:rgba(38,37,33,.42);backdrop-filter:blur(3px)}
body.crm-dashboard-design dialog input,
body.crm-dashboard-design dialog select,
body.crm-dashboard-design dialog textarea{
  background-color:#FFFFFF;border-color:rgba(43,42,40,.14);
  box-shadow:inset 0 1px 2px rgba(43,42,40,.04)}
body.crm-dashboard-design .lead-neu-wahl{
  background:linear-gradient(160deg,#EDECE8 0%,#DFDDD7 100%);
  box-shadow:inset 0 1px 3px rgba(43,42,40,.09)}
body.crm-dashboard-design .lead-neu-wahl button.aktiv{
  background:linear-gradient(158deg,#FFFFFF 0%,#F4F3F0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -6px rgba(43,42,40,.3)}
body.crm-dashboard-design .lead-neu-spalten,
body.crm-dashboard-design .lead-neu-fuer{
  background:linear-gradient(160deg,#F2F1ED 0%,#E4E3DE 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}

/* Feinschliff — die Kleinigkeiten, die den Unterschied machen */
/* Fokus grau statt blau, passend zur Palette */
body.crm-dashboard-design button:focus-visible,
body.crm-dashboard-design a:focus-visible,
body.crm-dashboard-design input:focus-visible,
body.crm-dashboard-design select:focus-visible,
body.crm-dashboard-design textarea:focus-visible{
  outline:2px solid var(--blau-600);outline-offset:2px}
body.crm-dashboard-design .anruf-senden:focus-visible{outline-offset:3px}
/* Telefonnummern und Zahlen sauber untereinander */
body.crm-dashboard-design .anruf-tabelle td:nth-child(3){font-variant-numeric:tabular-nums}
/* Leerer Zustand im Kartenlook des Dashboards */
body.crm-dashboard-design .leer-icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 6px 16px -8px rgba(43,42,40,.3);color:var(--blau-700)}
body.crm-dashboard-design .leer h3{letter-spacing:-.015em}
/* Roter Streifen am linken Rand zeigt, auf welcher Zeile die Maus gerade steht —
   wandert mit und macht das Abtelefonieren in langen Listen eindeutig.
   impeccable-disable side-tab (Hover-Markierung, ausdruecklich so gewuenscht) */
body.crm-dashboard-design .anruf-zeile{transition:background var(--tempo),box-shadow var(--tempo)}
body.crm-dashboard-design .anruf-zeile:hover{box-shadow:inset 4px 0 0 var(--danger)}
/* Der erste Eintrag schliesst sauber an den dunklen Kopf an */
body.crm-dashboard-design .anruf-tabelle tbody tr:first-child td{border-top:0}
body.crm-dashboard-design .anruf-tabelle tbody tr:last-child td{border-bottom:0}
.filter-zahl{margin-left:auto;font-size:13px;color:var(--text-muted)}

/* ---------- Trichter ---------- */
.trichter{display:grid;gap:9px}
.trichter-zeile{display:grid;grid-template-columns:1fr 215px;align-items:center;gap:16px}
.trichter-klick{cursor:pointer;border-radius:8px;padding:4px;margin:-4px;transition:background var(--tempo)}
.trichter-klick:hover{background:var(--surface-2)}
/* Breites Stufen-Fenster (volle Breite, Suche + Blaettern) */
.trichter-dialog{max-width:none;width:94vw;padding:24px 28px}
.trichter-dlg-kopf{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.trichter-dlg-kopf h2{margin-bottom:2px}
.trichter-suche-huelle{flex:1;max-width:360px;margin-left:auto;position:relative}
.trichter-suche-huelle svg{position:absolute;left:13px;top:11px;width:16px;height:16px;color:var(--text-muted)}
.trichter-suche{background:var(--surface-2);border-color:transparent;padding-left:38px;height:38px;border-radius:10px;width:100%}
.trichter-dialog .tabelle-huelle{max-height:60vh;overflow-y:auto}
.trichter-dlg-fuss{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.trichter-blaettern{display:flex;gap:8px}
.trichter-spur{display:flex;justify-content:center}
.trichter-balken{height:38px;border-radius:8px;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:14px;transition:width .8s cubic-bezier(.4,0,.2,1);min-width:44px}
.trichter-info{font-size:12.5px;line-height:1.45}
.trichter-info strong{font-weight:600;display:block}
.trichter-info span{color:var(--text-muted)}

/* ---------- Donut ---------- */
.donut-block{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.donut{position:relative;width:186px;height:186px;flex-shrink:0}
.donut svg{transform:rotate(-90deg)}
.donut-mitte{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.donut-mitte b{font-size:23px;font-weight:700;letter-spacing:-.02em;display:block}
.donut-legende{flex:1;min-width:230px;display:grid;gap:10px}
.legende-zeile{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:11px;font-size:13px}
.legende-farbe{width:10px;height:10px;border-radius:3px}
.legende-wert{font-weight:600}
.legende-prozent{color:var(--text-muted);font-size:12px;min-width:36px;text-align:right}

/* ---------- Balken ---------- */
.balken-block{display:flex;align-items:flex-end;gap:14px;height:200px;padding-top:12px}
.balken-saeule{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%}
.balken{position:relative;width:100%;max-width:60px;border-radius:7px 7px 0 0;margin-top:auto;
  background:linear-gradient(180deg,var(--blau-300),var(--blau-700));transition:height .8s cubic-bezier(.4,0,.2,1)}
.balken-wert{position:absolute;top:-18px;left:-10px;right:-10px;text-align:center;
  font-size:11px;font-weight:600;color:var(--foreground);white-space:nowrap}
.balken-label{font-size:12px;color:var(--text-secondary);white-space:nowrap}
.balken-summe{border-left:1px solid var(--border);padding-left:14px;margin-left:4px}
.balken-summe .balken{background:linear-gradient(180deg,var(--blau-600),var(--blau-900))}
.balken-summe .balken-label{font-weight:600;color:var(--foreground)}

/* ---------- Team-Leistung ---------- */
/* Drei gleich breite Kacheln nebeneinander; auf schmalen Schirmen untereinander. */
.team-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media (max-width:1100px){.team-reihe{grid-template-columns:1fr}}
.team-reihe .karte{margin-bottom:0;display:flex;flex-direction:column}
.team-reihe .balken-block{margin-top:auto}
/* Umschalter über einer Kachel: Zeitraum bzw. Kennzahl */
.zeit-schalter{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px;padding:3px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--border)}
.zeit-schalter button{flex:1 1 auto;background:transparent;color:var(--text-secondary);
  border:0;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;white-space:nowrap;
  box-shadow:none;transition:background var(--tempo),color var(--tempo)}
.zeit-schalter button:hover{background:rgba(255,255,255,.6);color:var(--foreground);box-shadow:none}
.zeit-schalter button.an{background:var(--surface);color:var(--foreground);box-shadow:var(--s1)}
.karte-kopf .zeit-schalter{margin:0;flex:0 0 auto;max-width:60%}
/* Zahl über dem Balken — bei 0 blasser, damit die Spitzenwerte herausstechen */
.balken-null .balken{opacity:.35}
.balken-null .balken-wert{color:var(--text-muted);font-weight:500}
/* In den schmalen Kacheln stehen mehr Säulen nebeneinander: kleinere Beschriftung,
   und lange Quellennamen dürfen umbrechen statt überzulaufen. */
.team-reihe .balken-block{height:190px;padding-top:20px}
.team-reihe .balken-label{font-size:10.5px;white-space:normal;text-align:center;line-height:1.25}
/* In den schmalen Kacheln stehen bis zu sieben Säulen: die Zahl darf nicht mehr
   über den Balken hinausragen, sonst überlappen die Nachbarn. */
.team-reihe .balken-block{gap:8px}
.team-reihe .balken-wert{font-size:11px;left:-3px;right:-3px}
.team-reihe .balken{max-width:46px}
/* Grundgesamtheit unter dem Namen: "1 von 3" — ordnet die Prozentzahl ein */
.balken-basis{font-size:10px;color:var(--text-muted);text-align:center;line-height:1.2;
  margin-top:-4px;white-space:nowrap}
.balken-basis:empty{display:none}

/* ---------- Fenster beim Überfahren einer Säule ----------
   Zeigt die absoluten Zahlen hinter der Prozentangabe: "40 Leads · 5 Kunden".
   Schwebt über der Säule, milchig hinterlegt, und faengt keine Mausereignisse ab. */
.balken-saeule{position:relative;outline:none}
/* Sitzt am oberen Rand des Balkenfelds — nie über den Umschaltern, egal wie hoch
   der Balken darunter ist. Milchig, aber deckend genug zum Lesen. */
.balken-fenster{position:absolute;top:0;left:50%;transform:translate(-50%,6px);
  z-index:40;min-width:168px;max-width:230px;display:flex;flex-direction:column;gap:2px;
  padding:11px 14px;border-radius:13px;text-align:left;
  background:rgba(253,252,250,.94);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 40px -14px rgba(18,17,14,.4), 0 0 0 1px rgba(43,42,40,.06);
  opacity:0;pointer-events:none;
  transition:opacity var(--tempo),transform var(--tempo)}
.balken-saeule:hover .balken-fenster,
.balken-saeule:focus-visible .balken-fenster{opacity:1;transform:translate(-50%,0)}
.balken-fenster .bf-name{font-size:13px;font-weight:650;line-height:1.25}
.balken-fenster .bf-zeit{font-size:10.5px;color:var(--text-muted);text-transform:none;margin-bottom:4px}
.balken-fenster .bf-zahlen{font-size:12.5px;font-weight:600;color:var(--foreground);line-height:1.35}
.balken-fenster .bf-quote{font-size:11.5px;color:var(--text-secondary)}
.balken-fenster .bf-quote:empty{display:none}
/* Die äußeren Säulen dürfen nicht aus der Kachel herauslaufen */
.balken-saeule:first-child .balken-fenster{left:0;transform:translate(0,6px)}
.balken-saeule:first-child:hover .balken-fenster{transform:translate(0,0)}
.balken-saeule:last-child .balken-fenster{left:auto;right:0;transform:translate(0,6px)}
.balken-saeule:last-child:hover .balken-fenster{transform:translate(0,0)}
/* Beim Überfahren tritt die Säule selbst leicht hervor */
.balken-saeule:hover .balken{filter:brightness(1.06)}

/* ---------- Team-Tabelle: Bestand links, Tageswerte rechts ---------- */
.team-tabelle .gruppen-zeile th{padding-bottom:2px;border-bottom:0;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.team-tabelle .gruppe{text-align:center;border-bottom:1px solid var(--border)}
.team-tabelle .gruppe-heute{color:var(--blau-700)}
/* Feine Trennlinie zwischen Bestand und Heute */
.team-tabelle .heute-erst{border-left:1px solid var(--border)}
.team-tabelle .null{color:var(--text-muted)}
.team-tabelle .zeile-sub{display:block;font-size:11px;color:var(--text-muted);font-weight:400;margin-top:2px}
.badge.still{background:var(--surface-2);color:var(--text-muted);cursor:help}

/* ---------- Personenseite ---------- */
.person-aufgaben{display:flex;flex-wrap:wrap;gap:6px}
.person-aufgaben .badge{font-size:11.5px;padding:4px 10px}
/* Kennzahlenreihe über einem Diagramm */
.kennzeilen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kennzeilen-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:820px){.kennzeilen,.kennzeilen-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kennzeilen .kennzeile{display:flex;flex-direction:column;gap:2px;padding:11px 14px;
  border-radius:12px;background:linear-gradient(158deg,#FFFFFF 0%,var(--surface-2) 100%);
  border:1px solid var(--border)}
.kennzeilen .kennzeile>span{font-size:11px;color:var(--text-muted);letter-spacing:.02em}
.kennzeilen .kennzeile>b{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.kennzeilen .kennzeile>i{font-size:11px;color:var(--text-secondary);font-style:normal;line-height:1.3}
.kennzeilen .kennzeile>i:empty{display:none}
/* Die drei Quoten des Cold Callings */
.quoten-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:820px){.quoten-reihe{grid-template-columns:1fr}}
.quote-kachel{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border-radius:12px;
  background:linear-gradient(158deg,var(--blau-50) 0%,var(--blau-100) 100%);
  border:1px solid var(--blau-200)}
.quote-kachel>span{font-size:11.5px;font-weight:600;color:var(--blau-800)}
.quote-kachel>b{font-size:26px;font-weight:700;letter-spacing:-.025em;color:var(--blau-900);line-height:1.1}
.quote-kachel>i{font-size:11px;color:var(--blau-700);font-style:normal}
/* Vergleich zum Team-Schnitt — ordnet die Quote ein */
.quote-kachel>em{font-size:10.5px;font-style:normal;color:var(--text-muted);margin-top:3px;line-height:1.3}
.quote-kachel>em:empty{display:none}
.quote-kachel>em.besser{color:var(--success);font-weight:600}
.quote-kachel>em.schlechter{color:var(--danger);font-weight:600}
/* Im grauen Design sind die drei Quoten die wichtigsten Zahlen der Seite —
   dunkel abgesetzt wie die Navigationsleiste, damit sie den Blick fangen. */
body.crm-dashboard-design .quote-kachel{
  background:linear-gradient(158deg,#3B3A37 0%,#2A2925 100%);
  border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--s2)}
body.crm-dashboard-design .quote-kachel>span{color:rgba(242,240,235,.72)}
body.crm-dashboard-design .quote-kachel>b{color:#FFFFFF}
body.crm-dashboard-design .quote-kachel>i{color:rgba(242,240,235,.55)}
body.crm-dashboard-design .quote-kachel>em{color:rgba(242,240,235,.5)}
body.crm-dashboard-design .quote-kachel>em.besser{color:#8FD3A8}
body.crm-dashboard-design .quote-kachel>em.schlechter{color:#F0A79E}

/* Zwei Kacheln nebeneinander: offene Pipeline und Verlustgründe */
.person-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.person-reihe{grid-template-columns:1fr}}
.person-reihe .karte{margin-bottom:0}
/* Aufzaehlung mit Punkt, Text, Anzahl und Betrag */
.liste-zeilen{display:flex;flex-direction:column}
.liste-zeile{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border)}
.liste-zeile:last-of-type{border-bottom:0}
.lz-punkt{width:9px;height:9px;border-radius:3px;flex-shrink:0;background:var(--text-muted)}
.lz-punkt.sparte-webdesign{background:#1F3A63}
.lz-punkt.sparte-performance{background:#C4671F}
.lz-punkt.sparte-ki{background:#7B2233}
.lz-text{flex:1;min-width:0;font-size:13px;font-weight:550;line-height:1.3}
.lz-text i{display:block;font-size:10.5px;font-style:normal;color:var(--text-muted);font-weight:400}
.lz-zahl{font-size:13px;color:var(--text-secondary);min-width:24px;text-align:right}
.lz-wert{font-size:13px;font-weight:650;min-width:74px;text-align:right}
.liste-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:11px;border-top:1px solid var(--border-stark);font-size:12.5px}
.liste-fuss span{color:var(--text-secondary)}
.liste-fuss b{font-size:15px;font-weight:700}
/* Verlustgründe als waagrechte Balken */
.grund-zeile{display:grid;grid-template-columns:1fr 96px 26px;align-items:center;gap:11px;padding:7px 0}
.gz-text{font-size:12.5px;line-height:1.3}
.gz-spur{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(43,42,40,.12)}
.gz-spur i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#D98A80,#A32B22)}
.gz-zahl{font-size:12.5px;font-weight:650;text-align:right}

/* ---------- Buchhaltung ---------- */
.bh-tasten{display:flex;gap:8px;flex-wrap:wrap}
.bh-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.bh-reihe{grid-template-columns:1fr}}
.bh-reihe .karte{margin-bottom:0}
/* Zeitraum-Umschalter als Verweise (kein JS nötig, die Seite laedt neu) */
.zeit-schalter a{flex:1 1 auto;text-align:center;background:transparent;color:var(--text-secondary);
  border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;white-space:nowrap;
  text-decoration:none;transition:background var(--tempo),color var(--tempo)}
.zeit-schalter a:hover{background:rgba(255,255,255,.6);color:var(--foreground);text-decoration:none}
.zeit-schalter a.an{background:var(--surface);color:var(--foreground);box-shadow:var(--s1)}
/* Zwei Balken je Monat: Einnahmen und Ausgaben direkt nebeneinander */
.bh-verlauf{display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:8px}
.bh-monat{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;min-width:0}
.bh-paar{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:100%}
.bh-paar span{flex:0 0 auto;width:11px;max-width:42%;border-radius:5px 5px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.bh-ein{background:linear-gradient(180deg,#7FB894 0%,#3E7A57 100%)}
.bh-aus{background:linear-gradient(180deg,#D99B92 0%,#A03A2E 100%)}
.bh-monat-label{font-size:10.5px;color:var(--text-muted);white-space:nowrap}
.bh-legende{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  font-size:11.5px;color:var(--text-secondary)}
.bh-legende span{display:flex;align-items:center;gap:6px}
.bh-punkt{width:9px;height:9px;border-radius:3px}
.bh-punkt.ein{background:#3E7A57}
.bh-punkt.aus{background:#A03A2E}
/* Betrag in der Buchungsliste: Richtung an der Farbe erkennbar, aber nie nur daran —
   das Vorzeichen steht immer davor. */
.bh-betrag{font-weight:650;white-space:nowrap}
.bh-betrag.einnahme{color:#2F6B47}
.bh-betrag.ausgabe{color:#A03A2E}
/* Zustandspunkt in Belegliste und Lexware-Schritten */
.lz-punkt.offen{background:var(--warn,#C98A2B)}
.lz-punkt.fertig{background:var(--success)}
.lz-tat{flex-shrink:0;display:flex}
.lz-tat button{padding:5px 8px}
.lz-text i .spaet{color:var(--danger);font-weight:650}
.lz-punkt.fehler{background:var(--danger)}

/* ---------- Kontostand und Steuer-Rücklage ----------
   Die zwei wichtigsten Zahlen der Seite, darum dunkel abgesetzt und größer
   als die übrigen Kacheln. */
.kasse-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media (max-width:820px){.kasse-reihe{grid-template-columns:1fr}}
.kasse{position:relative;display:flex;flex-direction:column;gap:4px;padding:20px 22px;
  border-radius:18px;background:linear-gradient(158deg,#3B3A37 0%,#26251F 100%);
  border:1px solid rgba(255,255,255,.07);color:#F4F2ED;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), var(--s2)}
.kasse.steuer{background:linear-gradient(158deg,#4A3E33 0%,#2B231C 100%)}
.kasse.minus{background:linear-gradient(158deg,#5C302B 0%,#331D1A 100%)}
.kasse-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:600;color:rgba(244,242,237,.72);letter-spacing:.02em}
.kasse-kopf svg{width:17px;height:17px;opacity:.55}
.kasse-zahl{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.kasse-fuss{font-size:11.5px;color:rgba(244,242,237,.6);line-height:1.45}
.kasse-fuss b{color:rgba(244,242,237,.9)}
.kasse-rechnung{display:block;font-size:10.5px;color:rgba(244,242,237,.42);margin-top:2px}
.kasse-frei{margin-top:8px;padding-top:9px;border-top:1px solid rgba(255,255,255,.1);
  font-size:11.5px;color:rgba(244,242,237,.62)}
.kasse-frei b{color:#FFFFFF;font-weight:650}
.kasse-knopf{align-self:flex-start;margin-top:9px;background:rgba(255,255,255,.1);
  color:#F4F2ED;border:1px solid rgba(255,255,255,.14);border-radius:9px;
  padding:6px 12px;font-size:11.5px;font-weight:600;box-shadow:none}
.kasse-knopf:hover{background:rgba(255,255,255,.18);box-shadow:none}

/* ---------- Belegeingang mit Prüfschritt ---------- */
.beleg-liste{display:flex;flex-direction:column;gap:10px;margin-top:12px}
/* Gebuchte Belege ausklappbar (28.07.) — beim Einpflegen eines ganzen Jahres
   schob die Liste sonst die Ablage zum Hochladen aus dem Bild. Was noch zu
   prüfen ist, steht weiter offen darüber; hier liegt nur das Erledigte. */
.beleg-mehr{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.beleg-mehr>summary{display:flex;align-items:center;gap:10px;cursor:pointer;
  list-style:none;padding:7px 2px;border-radius:var(--r-sm);
  transition:background var(--tempo)}
.beleg-mehr>summary::-webkit-details-marker{display:none}
.beleg-mehr>summary:hover{background:var(--surface-2)}
/* Eigenes Dreieck, damit es links steht und mitdreht — das eingebaute sitzt je
   nach Browser woanders. */
.beleg-mehr>summary::before{content:"";width:0;height:0;flex:none;
  border-left:5px solid var(--text-muted);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform var(--tempo)}
.beleg-mehr[open]>summary::before{transform:rotate(90deg)}
.beleg-mehr-titel{font-size:13.5px;font-weight:600}
.beleg-mehr-hinweis{margin-left:auto}
.beleg-mehr[open] .beleg-mehr-hinweis::after{content:" — zuklappen"}
.beleg-mehr-fuss{display:flex;align-items:flex-start;gap:8px;margin-top:12px}
.beleg-mehr-fuss svg{width:15px;height:15px;flex:none;margin-top:1px}
.beleg{border:1px solid var(--border);border-radius:13px;padding:12px 13px;
  background:linear-gradient(158deg,#FFFFFF 0%,var(--surface-2) 100%)}
.beleg.gebucht{opacity:.72}
.beleg.fehler{border-color:#E7B4AF}
.beleg-kopf{display:flex;align-items:center;gap:9px}
.beleg-name{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.3;
  overflow-wrap:anywhere}
.beleg-name i{display:block;font-size:10.5px;font-style:normal;color:var(--text-muted);font-weight:400}
.beleg-fehler{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding:8px 10px;
  border-radius:9px;background:#FCEDEC;color:#8C2020;font-size:11.5px;line-height:1.4}
.beleg-fehler svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}
/* Prüfmaske: Felder in zwei Spalten, damit der Kasten nicht in die Länge wächst */
.beleg-pruefen{margin-top:11px;padding-top:11px;border-top:1px solid var(--border)}
.beleg-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.beleg-felder label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;
  color:var(--text-muted);letter-spacing:.02em;min-width:0}
.beleg-felder input,.beleg-felder select{margin:0;font-size:12.5px;padding:7px 9px;min-width:0}
.beleg-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.beleg-fuss button{font-size:12.5px;padding:8px 14px}
.beleg-fertig{margin-top:9px;padding-top:9px;border-top:1px solid var(--border);
  font-size:12px;color:var(--text-secondary);line-height:1.4}
/* Ablage im Zustand "Datei schwebt darüber" */
.ablage.bereit{border-color:var(--blau-500);background:var(--blau-50)}
.grund-zeile .gz-text i{display:block;font-size:10.5px;font-style:normal;color:var(--text-muted)}

/* ---------- Kanban ---------- */
.kanban{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 18px;align-items:flex-start}
.spalte{flex:0 0 286px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px;box-shadow:var(--s1);border-top:3px solid var(--stufe,var(--stage-3))}
.spalte-kopf{margin-bottom:12px}
/* Zwei Zeilen Platz: lange Namen wie "Erstgespräch / Readiness-Check gebucht"
   duerfen umbrechen, ohne die Karten der Nachbarspalten nach unten zu schieben. */
.spalte-titel-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.spalte-titel{font-size:14px;font-weight:600}
.spalte-zahl{font-size:12px;font-weight:600;color:var(--text-muted)}
.spalte-quote{font-size:11.5px;color:var(--text-muted);margin-top:2px}
.spalte-karten{display:grid;gap:10px;min-height:56px}
.deal{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:13px;
  cursor:grab;transition:box-shadow var(--tempo),transform var(--tempo),background var(--tempo)}
.deal:hover{background:var(--surface);box-shadow:var(--s2);transform:translateY(-1px)}
.deal.zieht{opacity:.45;cursor:grabbing}
.spalte.ziel{background:var(--blau-50);border-color:var(--blau-300)}
.deal-kopf{display:flex;align-items:flex-start;gap:8px}
.deal-punkt{width:8px;height:8px;border-radius:50%;background:var(--stufe,var(--stage-3));margin-top:5px;flex-shrink:0}
.deal-name{font-weight:600;font-size:13.5px;line-height:1.35;flex:1}
.deal-griff{color:var(--border-stark)}
.deal-griff svg{width:13px;height:13px}
.deal-person{font-size:11.5px;color:var(--text-muted);margin:2px 0 0 16px;line-height:1.35}
.deal-betrag{font-size:22px;font-weight:700;letter-spacing:-.025em;margin:8px 0 7px;
  display:flex;align-items:baseline;gap:8px;color:var(--deal-farbe,var(--foreground))}
.deal-bonus{font-size:10.5px;font-weight:650;letter-spacing:.02em;padding:2px 7px;border-radius:99px;
  background:var(--deal-flaeche,var(--surface-3));color:var(--deal-farbe,var(--text-secondary));cursor:help}
.deal-zeile{font-size:12px;color:var(--text-muted);margin-bottom:8px}

/* ============================================================
   Pipeline im Grau-Design (wie Dashboard, Leads und Kunden).
   Die Spalten bleiben ruhig und hell — die Farbe gehoert den Karten,
   damit die Bereiche beim Ueberfliegen sofort auffallen.
   ============================================================ */
body.crm-dashboard-design .spalte{
  background:linear-gradient(158deg,#FFFFFF 0%,#F4F3F0 55%,#EAE9E4 100%);
  border:1px solid rgba(43,42,40,.09);border-radius:16px;border-top:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(43,42,40,.05), 0 14px 34px -16px rgba(43,42,40,.22)}
body.crm-dashboard-design .spalte-kopf{
  padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid rgba(43,42,40,.1)}
body.crm-dashboard-design .spalte-titel{letter-spacing:-.01em}
body.crm-dashboard-design .spalte-zahl{
  background:var(--surface-3);color:var(--foreground);border-radius:99px;padding:1px 9px;
  font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
body.crm-dashboard-design .spalte.ziel{
  background:linear-gradient(158deg,#FFFFFF 0%,#EDECE8 100%);
  border-color:var(--blau-500);box-shadow:0 0 0 3px rgba(114,111,104,.14), var(--s2)}
body.crm-dashboard-design .spalte-leer{
  border-color:rgba(43,42,40,.16);color:var(--text-muted);background:rgba(255,255,255,.35)}
/* Ziehen: die Karte hebt leicht ab statt einfach blass zu werden */
body.crm-dashboard-design .deal.zieht{opacity:.5;transform:scale(.98)}
body.crm-dashboard-design .deal{cursor:pointer}
body.crm-dashboard-design .deal[draggable="true"] .deal-griff{cursor:grab}
/* "Neuer Deal" und der Hinweisbalken passen sich dem Grau an */
body.crm-dashboard-design .hinweis.info{
  background:linear-gradient(158deg,#FFFFFF 0%,#F2F1ED 100%);
  border:1px solid rgba(43,42,40,.1);border-left:0;border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--s1)}
body.crm-dashboard-design .hinweis.info svg{color:var(--blau-600)}
/* Kurze Rueckmeldung, wenn ein Zug nicht moeglich war */
.zug-hinweis{position:fixed;left:50%;bottom:28px;transform:translate(-50%,14px);
  background:linear-gradient(158deg,#3B3A37 0%,#26251F 100%);color:#F6F4F0;
  padding:11px 18px;border-radius:12px;font-size:13.5px;font-weight:550;
  box-shadow:0 18px 44px -14px rgba(18,17,14,.6);z-index:60;
  opacity:0;pointer-events:none;transition:opacity var(--tempo),transform var(--tempo)}
.zug-hinweis.sichtbar{opacity:1;transform:translate(-50%,0)}
/* Karte, die nicht abgelegt werden konnte, blinkt kurz rot auf */
.deal.abgelehnt{animation:zug-abgelehnt 1.4s ease-out}
@keyframes zug-abgelehnt{
  0%,60%{box-shadow:0 0 0 2px var(--danger), var(--s2)}
  100%{box-shadow:none}
}

/* Farbe je Bereich — die ganze Karte traegt die Farbe, damit man beim Ueberfliegen
   sofort sieht, aus welchem Bereich ein Deal kommt.
   --deal-farbe = kraeftiger Ton fuer Betrag und Rand,
   --deal-hell/--deal-tief = Verlauf der Kartenflaeche,
   --deal-kante = Rahmen, --deal-marke = Flaeche der Bereichs-Marke. */
.deal.sparte-webdesign{--deal-farbe:#1F3A63;--deal-hell:#F4F8FD;--deal-tief:#DCE7F5;
  --deal-kante:#B7CCE8;--deal-marke:#CBDCF1}
.deal.sparte-performance{--deal-farbe:#A8501A;--deal-hell:#FFF7F0;--deal-tief:#FAE2CD;
  --deal-kante:#EEC49E;--deal-marke:#F7D7BB}
.deal.sparte-ki{--deal-farbe:#7B2233;--deal-hell:#FDF4F6;--deal-tief:#F5DDE2;
  --deal-kante:#E5BCC5;--deal-marke:#EFCDD4}
.deal[class*="sparte-"]{
  background:linear-gradient(158deg,var(--deal-hell) 0%,var(--deal-tief) 100%);
  border:1px solid var(--deal-kante);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--s1)}
.deal[class*="sparte-"]:hover{
  background:linear-gradient(158deg,#FFFFFF 0%,var(--deal-tief) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--s2)}
.deal[class*="sparte-"] .deal-punkt{background:var(--deal-farbe)}
.deal[class*="sparte-"] .deal-name{color:#1E1D1B}
.deal[class*="sparte-"] .deal-person{color:rgba(30,29,27,.6)}
.deal[class*="sparte-"] .deal-fuss{border-top-color:var(--deal-kante);color:rgba(30,29,27,.72)}
.deal[class*="sparte-"] .deal-griff{color:var(--deal-kante)}
.deal[class*="sparte-"] .badge{background:rgba(255,255,255,.7);color:rgba(30,29,27,.7)}
.deal-sparte{background:var(--deal-marke)!important;color:var(--deal-farbe)!important;font-weight:650}
.deal-marken{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.deal-fuss{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary);
  padding-top:9px;border-top:1px solid var(--border)}
.deal-fuss svg{width:13px;height:13px;color:var(--text-muted)}
.spalte-leer{border:1.5px dashed var(--border-stark);border-radius:var(--r-md);padding:16px 10px;
  text-align:center;font-size:12px;color:var(--text-muted)}

/* ---------- Bereichs-Punkte im Spaltenkopf (nur Gesamtsicht) ----------
   Sagen auf einen Blick, welche Bereiche diese Phase ueberhaupt haben —
   nur deren Karten lassen sich hier ablegen. */
.stufe-punkte{display:inline-flex;align-items:center;gap:4px;margin-right:auto;padding-left:2px}
.stufe-punkt{width:9px;height:9px;border-radius:3px;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(43,42,40,.2)}
.stufe-punkt.sparte-webdesign{background:#1F3A63}
.stufe-punkt.sparte-performance{background:#C4671F}
.stufe-punkt.sparte-ki{background:#7B2233}
/* Projektabwicklung, Gesamtsicht: unter "Phase N" steht je Bereich der Name, den
   die Phase dort traegt. Feste Mindesthoehe fuer drei Zeilen, damit die Karten
   aller Spalten auf gleicher Hoehe beginnen. */
.stufe-namen{display:flex;flex-direction:column;gap:3px;margin-top:5px;min-height:52px}
.stufe-namen span{display:flex;align-items:center;gap:6px;font-size:11.5px;
  color:var(--text-secondary);line-height:1.3}
.stufe-namen i{width:7px;height:7px;border-radius:2px;flex-shrink:0}
/* Spalte, in der die gezogene Karte nichts verloren hat */
.spalte.gesperrt{background:var(--surface-2);border-color:var(--border);opacity:.5}
.spalte.gesperrt .spalte-karten{pointer-events:none}

/* ---------- Termin auf der Karte ----------
   Im Erstgespraech das Gespraechsdatum, danach die Frist. */
.deal-termin{display:flex;align-items:center;gap:6px;margin:0 0 9px;font-size:11.5px;
  color:rgba(30,29,27,.68);line-height:1.3}
.deal-termin svg{width:13px;height:13px;flex-shrink:0;opacity:.75}
.deal-termin b{font-weight:650}
.deal-termin.offen{color:rgba(30,29,27,.4)}
.deal-termin.spaet{color:var(--danger);font-weight:600}
.deal-termin.spaet svg{opacity:1}

/* ---------- Dringlichkeit ----------
   Steht als Wort unten in der Fusszeile, rechts neben dem Verantwortlichen —
   keine Marke, kein Farbstreifen. Die Karten sind ohnehin danach sortiert. */
.deal-fuss{justify-content:space-between;gap:8px}
.deal-wer{display:flex;align-items:center;gap:6px;min-width:0}
/* Auswahlfeld, das nicht wie eines aussieht: erst beim Ueberfahren zeigt es den
   Rahmen. So bleibt die Karte ruhig, laesst sich aber ohne Umweg ueber die Akte
   einstufen. */
.deal-dring{font-size:11.5px;font-weight:650;letter-spacing:.01em;white-space:nowrap;flex-shrink:0;
  appearance:none;-webkit-appearance:none;background:transparent;border:1px solid transparent;
  border-radius:7px;padding:2px 6px;margin:0;width:auto;min-width:0;cursor:pointer;
  text-align:right;text-align-last:right;
  transition:background var(--tempo),border-color var(--tempo)}
.deal-dring:hover,.deal-dring:focus{background:rgba(255,255,255,.75);border-color:var(--deal-kante,var(--border-stark));outline:none}
.deal-dring.dr-rot{color:#A32B22}
.deal-dring.dr-bernstein{color:#8A5210}
.deal-dring.dr-blau{color:#2E5C9A}
.deal-dring.dr-still{color:rgba(30,29,27,.45)}
.deal-dring.dr-leer{color:rgba(30,29,27,.34);font-weight:550}
.deal-dring option{color:var(--foreground);font-weight:500}

/* Verlust-Spalte: klar abgesetzt, damit man nicht versehentlich hineinzieht */
.spalte-verlust .spalte-titel{color:var(--danger)}
.spalte-verlust .spalte-quote{color:rgba(163,43,34,.7)}
.spalte-verlust.ziel{background:#FCEDEC;border-color:#E7B4AF}
.badge.d-rot{background:#FBDDDD;color:#8C2020}
.badge.d-bernstein{background:#FBE7CB;color:#8A5210}
.badge.d-blau{background:#DCE7F5;color:#26456F}
.badge.d-still{background:var(--surface-2);color:var(--text-muted)}

/* ---------- Aufforderung nach einem gebuchten Erstgespraech ----------
   Bleibt stehen, bis man sie wegklickt — das Gespraechsdatum darf nicht untergehen. */
/* Sitzt ueber der Zeituhr unten rechts, damit sich beide nicht verdecken. */
.akte-ruf{position:fixed;right:22px;bottom:110px;z-index:70;width:370px;
  padding:16px 18px 16px;border-radius:16px;
  background:linear-gradient(158deg,#FFFFFF 0%,#F1EFEA 100%);border:1px solid var(--border-stark);
  box-shadow:0 24px 54px -18px rgba(18,17,14,.42);
  opacity:0;transform:translateY(12px);transition:opacity var(--tempo),transform var(--tempo)}
.akte-ruf.sichtbar{opacity:1;transform:translateY(0)}
.akte-ruf-text{display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.45;
  padding-right:24px}
.akte-ruf-text b{font-size:14px;font-weight:650}
.akte-ruf-text span{color:var(--text-secondary)}
.akte-ruf-knoepfe{margin-top:13px}
.akte-ruf-knoepfe .knopf{white-space:nowrap;font-size:12.5px;padding:9px 15px}
.akte-ruf-knoepfe button.still{position:absolute;top:10px;right:10px;padding:4px 7px;
  font-size:13px;line-height:1;color:var(--text-muted)}

/* Datumsfelder im To-Do-Formular der Akte tragen ihre Bedeutung sichtbar */
.akte-todo-datum{display:flex;flex-direction:column;gap:3px;font-size:10.5px;
  color:var(--text-muted);letter-spacing:.02em}
.akte-todo-datum input{margin:0}

/* ---------- Handlungsliste ---------- */
.signal{display:flex;align-items:center;gap:13px;background:var(--akzent-flaeche);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:16px}
.signal-icon{width:38px;height:38px;border-radius:11px;background:var(--surface);color:var(--akzent);
  display:grid;place-items:center;flex-shrink:0}
.signal-icon svg{width:18px;height:18px}
.signal-text{flex:1}
.signal-text b{font-size:13.5px;display:block}
.signal-text span{font-size:12.5px;color:var(--text-secondary)}
.aufgabe{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.aufgabe:last-child{border-bottom:0}
.aufgabe input[type=checkbox]{width:16px;height:16px;flex-shrink:0}
.aufgabe-text{flex:1}
.spalten-titel{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.06em;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.spalten-titel svg{width:14px;height:14px}

/* ---------- Detail / Feed ---------- */
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media(max-width:1100px){.zwei-spalten{grid-template-columns:1fr}}
.feed-eintrag{display:grid;grid-template-columns:28px 1fr;gap:11px;padding:12px 0;border-bottom:1px solid var(--border)}
.feed-eintrag:last-child{border-bottom:0}
.feed-icon{width:28px;height:28px;border-radius:9px;background:var(--surface-2);color:var(--text-muted);
  display:grid;place-items:center}
.feed-icon svg{width:14px;height:14px}
.feed-icon.gruen{background:var(--success-flaeche);color:var(--success)}
.feed-icon.blau{background:var(--info-flaeche);color:var(--info)}
.feed-text{font-size:13.5px;line-height:1.45}
.feed-zeit{font-size:11.5px;color:var(--text-muted);margin-top:2px}
dl.def{display:grid;grid-template-columns:auto 1fr;gap:11px 16px;font-size:13.5px;align-items:baseline}
dl.def dt{color:var(--text-secondary);font-weight:500;white-space:nowrap}
dl.def dd{text-align:right;font-weight:500}
.fortschritt{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.fortschritt>span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--blau-500),var(--blau-700));transition:width .9s cubic-bezier(.4,0,.2,1)}

/* ---------- Hinweis / Leer / Dialog ---------- */
.hinweis{border-radius:var(--r-md);padding:13px 16px;font-size:13px;display:flex;gap:11px;align-items:flex-start}
.hinweis svg{width:17px;height:17px;margin-top:1px}
.hinweis.info{background:var(--info-flaeche);color:var(--info)}
.hinweis.warn{background:var(--warning-flaeche);color:var(--warning)}
.leer{text-align:center;padding:52px 24px}
.leer-icon{width:52px;height:52px;margin:0 auto 14px;border-radius:14px;background:var(--surface-2);
  display:grid;place-items:center;color:var(--text-muted)}
.leer-icon svg{width:24px;height:24px}
.leer h3{font-size:15px;margin-bottom:6px}
.leer p{font-size:13.5px;color:var(--text-secondary);max-width:420px;margin:0 auto}
dialog{border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;max-width:560px;width:92vw;
  box-shadow:var(--s3);color:var(--foreground);margin:auto}
dialog::backdrop{background:rgba(15,27,45,.34);backdrop-filter:blur(2px)}
dialog h2{margin-bottom:4px}dialog .sub{margin-bottom:20px}
.dialog-fuss{display:flex;gap:8px;justify-content:flex-end;margin-top:8px;padding-top:16px;border-top:1px solid var(--border)}
button.gefahr,.knopf.gefahr{background:var(--danger)}
button.gefahr:hover,.knopf.gefahr:hover{filter:brightness(.9)}

/* ---------- Tagesresuemee (Feierabend-Dialog) ---------- */
.resuemee{margin:4px 0 8px;padding:14px 16px;background:var(--surface-2);border-radius:var(--r-md);display:flex;flex-direction:column;gap:10px}
.resuemee h3{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);font-weight:700}
.resuemee-zeile{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.resuemee-zeile b{font-size:15px}
.resuemee-spalten{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.resuemee-spalten>div{display:flex;flex-direction:column;gap:6px}
.resuemee-haupt{display:flex;align-items:baseline;gap:6px}
.resuemee-haupt span{font-size:12.5px;color:var(--text-secondary)}
.resuemee-haupt b{font-size:17px}
.resuemee-unter{display:flex;align-items:baseline;gap:6px;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}
.resuemee-unter span{font-size:12px;color:var(--text-muted)}
.resuemee-unter b{font-size:14px}
b.resuemee-prozent{font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px}
.resuemee-prozent.gruen{background:var(--success-flaeche);color:var(--success)}
.resuemee-prozent.rot{background:var(--danger-flaeche);color:var(--danger)}

@media(max-width:860px){
  .rail{padding:10px;width:64px}.inhalt{margin-left:64px}
  .rail a{padding:0 12px}
  .topbar{padding:10px 14px;gap:10px}.topbar-suche{display:none}
  .reiterleiste{padding:0 14px;overflow-x:auto}.reiter{gap:16px}
  main{padding:16px 14px 48px}.feld-paar{grid-template-columns:1fr}
  .trichter-zeile{grid-template-columns:1fr}
  .raster,.raster-2,.raster-3{grid-template-columns:1fr!important}
}

/* Zeitraum-Umschalter wie bei Estera */
.zeitraum{display:flex;gap:2px;background:var(--surface-2);padding:4px;border-radius:10px;margin:14px 0 18px}
.zeitraum a{flex:1;text-align:center;padding:8px 12px;border-radius:7px;font-size:13px;font-weight:500;
  color:var(--text-secondary);transition:background var(--tempo),color var(--tempo)}
.zeitraum a:hover{color:var(--foreground);text-decoration:none}
.zeitraum a.aktiv{background:var(--blau-800);color:#fff;font-weight:600;box-shadow:var(--s1)}
.chart-kopf{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.chart-zahl{font-size:30px;font-weight:700;letter-spacing:-.03em}
.chart-achse{display:flex;justify-content:space-between;margin-top:6px}
.chart-y{position:absolute;left:0;top:0;bottom:0;width:48px;font-size:11px;color:var(--text-muted)}
.chart-y span{position:absolute;right:8px;transform:translateY(-50%);white-space:nowrap}
.chart-flaeche{position:relative;padding-left:48px}
.chart-fuss{font-size:12.5px;color:var(--text-secondary);margin-top:10px}
.karte-schmal{min-width:0}
.zeitraum-schmal{display:flex;gap:3px;padding:3px}
.zeitraum-schmal a{flex:1;padding:6px 4px;font-size:10.5px;white-space:nowrap}

/* Mittlere Dashboard-Karte: behaelt Eigenhoehe (Orb ragt raus), waehrend die
   Nachbarkarten links/rechts durch align-items:stretch auf gleiche Hoehe kommen.
   Kraeftigerer Grauverlauf als die uebrigen Karten (mehr Grau reingezogen). */
.karte-mitte{align-self:start;
  background:linear-gradient(158deg,#FFFFFF 0%,#EFF1F4 42%,#DDE0E5 74%,#C9CDD4 100%)}
/* Die dunkle Hero-Karte ist ein Stueck aus demselben Block wie die Blume: dieselbe
   Lichtquelle oben links, derselbe Abfall nach unten, dieselbe Rampe #4A4E55 -> #16181C
   (gemessene Perzentile 30% -> 1% des Objekts). Unten sitzt ein Bodenlicht, auf dem das
   Objekt steht — dadurch schwebt es nicht mehr vor der Karte, sondern liegt darin. */
body.crm-dashboard-design .karte-mitte{
  position:relative;
  background:
    radial-gradient(150% 92% at 50% 120%, #6E737B 0%, rgba(110,115,123,0) 56%),
    radial-gradient(120% 78% at 18% -16%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 54%),
    linear-gradient(162deg, #565B64 0%, #3A3F46 28%, #24272D 64%, #0F1115 100%);
  border-color:#0F1114;
  box-shadow:
    0 34px 76px -20px rgba(12,14,18,.62),
    0 10px 26px -10px rgba(12,14,18,.46),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.55);
  color:#E9EBEF}
body.crm-dashboard-design .karte-mitte .hero-umsatz-neben-zahl,
body.crm-dashboard-design .karte-mitte .mini-stat b{color:#FCFDFE}
/* Die Umsatzzahl bleibt bewusst deckend weiss. Sie hatte kurz einen Verlauf wie eine
   polierte Kante der Blume — das sah am Bildschirm kaum anders aus, haette aber drei
   gekoppelte Regeln gebraucht (@supports-Absicherung und ein Zuruecksetzen im
   Weiss-Modus). Laeuft eine davon je auseinander, verschwindet ausgerechnet der
   Monatsumsatz. Der Verlauf traegt hier ohnehin die Karte, nicht die Ziffer. */
body.crm-dashboard-design .karte-mitte .kachel-zahl{color:#FCFDFE}
body.crm-dashboard-design .karte-mitte .kachel-label,
body.crm-dashboard-design .karte-mitte .kachel-mini-titel,
body.crm-dashboard-design .karte-mitte .mini-stat .caption{color:rgba(233,235,239,.74)}
body.crm-dashboard-design .karte-mitte .caption,
body.crm-dashboard-design .karte-mitte .kachel-mini-ziel{color:rgba(233,235,239,.64)}
body.crm-dashboard-design .karte-mitte .mini-stat-reihe{border-bottom-color:rgba(255,255,255,.13)}
/* Kontaktschatten (hart, nah) + kuehler Lichthof (weit) — das Objekt wirft Licht auf die
   Karte zurueck, statt nur davor zu kleben. */
body.crm-dashboard-design .karte-mitte .orb-deko{
  filter:drop-shadow(0 24px 40px rgba(6,7,10,.66)) drop-shadow(0 0 46px rgba(184,196,214,.15))}

/* Zweiter dunkler Anker (Umsatz je Person) — gleiche Rampe, diagonal versetzt:
   Hero oben Mitte, dieser unten rechts. Insgesamt bleibt das Dashboard hell. */
body.crm-dashboard-design .karte-dunkel{
  background:
    radial-gradient(110% 78% at 24% -18%, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 56%),
    radial-gradient(140% 82% at 84% 114%, rgba(126,132,142,.55) 0%, rgba(126,132,142,0) 58%),
    linear-gradient(162deg, #545962 0%, #383D44 34%, #23262C 68%, #0F1115 100%);
  border-color:#0F1114;
  box-shadow:
    0 30px 68px -20px rgba(12,14,18,.58),
    0 10px 24px -10px rgba(12,14,18,.44),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.55);
  color:#E9EBEF}
body.crm-dashboard-design .karte-dunkel h2{color:#FCFDFE}
body.crm-dashboard-design .karte-dunkel .sub,
body.crm-dashboard-design .karte-dunkel .caption{color:rgba(233,235,239,.62)}
body.crm-dashboard-design .karte-dunkel .karte-kopf a:hover{color:#FCFDFE;text-decoration:none}
body.crm-dashboard-design .karte-dunkel .balken-label{color:rgba(233,235,239,.76)}
body.crm-dashboard-design .karte-dunkel .balken-wert{color:#FCFDFE}
/* Die Saeulen sind gewoelbt wie die Falten der Blume: Licht auf der linken Kante,
   Schatten auf der rechten, Verlauf von poliertem Weiss ins Graphit. */
body.crm-dashboard-design .karte-dunkel .balken{
  background:linear-gradient(177deg,#FFFFFF 0%,#EAECF0 20%,#C0C5CD 58%,#8E949D 100%);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.6),
    inset -2px 0 4px -1px rgba(10,12,16,.3),
    inset 0 -14px 20px -14px rgba(10,12,16,.35),
    0 -3px 14px rgba(200,210,224,.16)}

/* Premium-Lichtkante: helle Karten bekommen eine helle Oberkante, eine dunkle Unterkante
   und einen bodenlastigen Fernschatten -> angehobenes Papier ueber einer Flaeche mit
   Gewicht, nicht flaches Weiss auf flachem Weiss. */
body.crm-dashboard-design .karte:not(.karte-mitte):not(.karte-dunkel),
body.crm-dashboard-design .kachel{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(20,22,26,.055),
    0 1px 2px rgba(20,22,26,.06),
    0 14px 32px -14px rgba(20,22,26,.2),
    0 34px 62px -32px rgba(20,22,26,.3)}

/* Trichter-Karte nur so hoch wie ihr Inhalt (nicht auf Nachbarhoehe strecken) —
   sonst bleibt unter der letzten Stufe "Gewonnen" viel leerer Weissraum. */
.karte-trichter{align-self:start}
.mini-stat-reihe{display:flex;justify-content:center;gap:48px;margin-bottom:18px;
  padding-bottom:16px;border-bottom:1px solid var(--border)}
.mini-stat{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.mini-stat b{font-size:17px;font-weight:700;letter-spacing:-.02em}
/* Umsatz Juli sitzt per zentriertem Flex GENAU in der Kastenmitte (ueber dem Objekt).
   Kunden (links) und Juni (rechts) sind absolut an die Kastenraender gepinnt und vertikal
   mittig zum Umsatz-Block — dadurch bleibt "Umsatz Juli" echt zentriert, egal wie breit
   die Seitentexte sind. */
.hero-umsatz{position:relative;display:flex;justify-content:center;text-align:center;min-height:96px;align-items:center}
.hero-umsatz-haupt{display:flex;flex-direction:column;align-items:center;gap:4px}
.hero-umsatz-haupt .kachel-zahl{font-size:44px}
.hero-umsatz-seite{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.hero-umsatz-seite:first-child{left:0}
.hero-umsatz-neben{right:0}
.hero-umsatz-neben-zahl{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--foreground)}
/* Freigestelltes Deko-Objekt (Bild 3) — gross, ragt unten aus der Karte heraus. */
.orb-deko{display:block;width:90%;max-width:400px;margin:16px auto -90px;position:relative}

/* ---------- Heute zu tun: 3 Spalten nach Wichtigkeit ---------- */
.heute-spalten{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;align-items:start}
.heute-spalte{display:flex;flex-direction:column;gap:7px;min-width:0}
.heute-spalte-kopf{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--text-muted);padding-bottom:6px;border-bottom:1px solid var(--border);min-height:26px}
.heute-todo{display:flex;gap:9px;align-items:flex-start;
  background:linear-gradient(158deg,#FFFFFF 0%,#F4F2ED 52%,#EBE8E1 100%);
  border:1px solid rgba(0,0,0,.05);
  border-radius:11px;padding:10px 11px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), var(--s1);
  transition:box-shadow var(--tempo),transform var(--tempo),border-color var(--tempo)}
.heute-todo:hover{box-shadow:var(--s2);transform:translateY(-2px)}
.heute-todo:active{cursor:grabbing}
/* Dringlichkeit traegt das Badge; die Karte bekommt nur einen zarten, umlaufenden
   roten Rand statt eines Seitenbalkens (kein Side-Tab-Tell). */
.heute-todo--dringend{border-color:var(--danger)}
/* Drag & Drop zwischen den Wichtigkeits-Spalten */
.heute-todo.todo-zieht{opacity:.45}
.heute-spalte.spalte-ziel{background:var(--surface-2);border-radius:10px;
  outline:2px dashed var(--border-stark);outline-offset:3px}
/* runder Abhak-Button — leer mit dezentem Rand, beim Hover erscheint der grüne Haken */
.heute-todo .todo-haken{flex:none;margin-top:1px;width:21px;height:21px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--border-stark);color:transparent;
  display:grid;place-items:center;box-shadow:none;transition:all var(--tempo)}
.heute-todo .todo-haken svg{width:12px;height:12px}
.heute-todo .todo-haken:hover{border-color:var(--success);background:var(--success);color:#fff;transform:scale(1.08)}
.heute-todo-text{min-width:0;flex:1}
.heute-todo-titel{font-size:12.5px;font-weight:650;line-height:1.28;letter-spacing:-.01em}
.heute-todo-kunde{display:block;font-size:10.5px;color:var(--text-secondary);margin:2px 0 7px}
.heute-todo .badge.dring{font-size:9px;padding:2px 8px;border-radius:99px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
/* Detail-Fenster eines To-Dos */
.todo-dialog{max-width:460px}
.todo-dlg-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.todo-dlg-kopf h2{margin-bottom:2px}
.todo-dlg-kopf .still{padding:4px}
.todo-dlg-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.todo-dlg-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px;background:var(--surface-2);border-radius:var(--r-md);margin-bottom:16px}
.todo-dlg-grid span{display:block;font-size:11px;color:var(--text-muted);margin-bottom:3px}
.todo-dlg-grid b{font-size:14px}
.todo-dialog h3{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);font-weight:700;margin:16px 0 6px}
.todo-dlg-text{font-size:13.5px;color:var(--text-secondary);line-height:1.5}

/* ---------- To-Dos ---------- */
.todo-zeile{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.todo-zeile:last-child{border-bottom:0}
.todo-check{margin:0}
.todo-haken{width:24px;height:24px;padding:0;border-radius:7px;background:var(--surface);
  border:1.5px solid var(--border-stark);color:#fff;display:grid;place-items:center;box-shadow:none}
.todo-haken svg{width:15px;height:15px}
.todo-haken.an{background:var(--success);border-color:var(--success)}
.todo-haken:hover{border-color:var(--success)}
.todo-text{flex:1;min-width:0}
.todo-titel{font-size:14px;font-weight:600}
.todo-meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12px;color:var(--text-muted)}
.todo-meta a{display:inline-flex;align-items:center;gap:5px;color:var(--text-secondary)}
.todo-meta svg{width:13px;height:13px}
.todo-plan{margin:0}
.todo-plan input{height:34px;padding:4px 8px;font-size:12.5px}
.todo-weg{padding:6px;color:var(--text-muted);box-shadow:none}
.todo-weg:hover{color:var(--danger);background:var(--surface-2)}
.todo-weg svg{width:15px;height:15px}
.todo-erledigt .todo-titel{text-decoration:line-through;color:var(--text-muted)}

/* Forecast-Box */
.forecast{background:linear-gradient(135deg,var(--akzent-flaeche),var(--surface));border:1px solid var(--akzent-rand);
  border-radius:var(--r-md);padding:16px 18px;margin-bottom:16px}
.forecast-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--akzent);margin-bottom:6px}
.forecast-label svg{width:16px;height:16px}
.forecast-zahl{font-size:29px;font-weight:700;letter-spacing:-.03em;color:var(--foreground)}
.forecast-sub{font-size:12px;color:var(--text-muted);margin-top:3px}
.kennliste{display:grid;gap:2px}
.kennzeile{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.kennzeile:last-child{border-bottom:0}
.kennzeile svg{width:16px;height:16px;color:var(--text-muted)}
.kennzeile span{flex:1;color:var(--text-secondary)}
.kennzeile .rail-avatar{flex:none}
.kennzeile .rail-avatar,.kennzeile .caption{color:inherit}
.kennzeile .caption{color:var(--text-muted)}
.kennzeile b{font-weight:650}

/* ---------- Reiter "Pipeline-Volumen": Auswertung je Sparte ---------- */
.sparte-zeile{padding:15px 0;border-bottom:1px solid var(--border)}
.sparte-zeile:last-of-type{border-bottom:0}
.sparte-kopf{display:flex;align-items:baseline;gap:12px;margin-bottom:9px}
.sparte-kopf b{font-size:14.5px;font-weight:650}
.sparte-wert{margin-left:auto;font-size:16px;font-weight:700;letter-spacing:-.02em}
.sparte-spur{position:relative;height:28px;border-radius:9px;overflow:hidden;
  background:linear-gradient(180deg,#EEECE7 0%,#E2DFD8 100%);
  box-shadow:inset 0 1px 2px rgba(43,42,40,.12), inset 0 -1px 0 rgba(255,255,255,.5)}
.sparte-balken{position:absolute;left:0;top:0;bottom:0;border-radius:9px;
  background:linear-gradient(180deg,#D6D3CB 0%,#B4B0A6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 6px -1px rgba(43,42,40,.24);
  transition:width .7s cubic-bezier(.2,.7,.2,1)}
.sparte-balken.gewichtet{
  background:linear-gradient(180deg,#524E46 0%,#2A2723 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 11px -2px rgba(0,0,0,.5)}
.sparte-fuss{display:flex;justify-content:space-between;margin-top:8px;gap:12px;flex-wrap:wrap}
.sparte-fuss>.caption{flex:1;min-width:0}
.pv-legende{display:flex;gap:20px;margin:4px 0 10px;flex-wrap:wrap;font-size:12.5px;color:var(--text-secondary)}
.pv-legende span{display:flex;align-items:center;gap:7px}
.pkt{width:12px;height:12px;border-radius:4px;display:inline-block}
.pkt.gesamt{background:linear-gradient(180deg,#D6D3CB,#B4B0A6);box-shadow:0 1px 2px rgba(43,42,40,.2)}
.pkt.gewichtet{background:linear-gradient(180deg,#524E46,#2A2723);box-shadow:0 1px 3px rgba(0,0,0,.35)}
/* Pipeline-Volumen: Kopf-Zusammenfassung + Detailzeilen je Sparte */
.pv-summe{display:flex;gap:22px;margin-left:auto;text-align:right;flex-wrap:wrap}
.pv-summe .caption{display:block;margin-bottom:2px}
.pv-summe b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.pv-gruen{color:var(--success)}
.sparte-anteil{display:block;font-size:11px;font-weight:600;color:var(--text-muted);text-align:right;margin-top:1px}
.sparte-fuss .caption b{font-weight:650}
.pv-board{white-space:nowrap}
.stufen-liste{display:grid;gap:1px}
.stufen-zeile{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;
  border-bottom:1px solid var(--border)}
.stufen-zeile:last-child{border-bottom:0}
.stufen-punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.stufen-name{min-width:118px;color:var(--text-secondary)}
.stufen-spur{flex:1;height:7px;background:var(--surface-2);border-radius:4px;overflow:hidden;min-width:40px}
.stufen-balken{height:100%;border-radius:4px;transition:width var(--tempo)}
.stufen-zeile b{min-width:20px;text-align:right;font-weight:650}
.stufen-wert{min-width:74px;text-align:right;color:var(--text-muted);font-size:12.5px}
.hinweis{margin-top:14px;background:var(--surface-2);border-left:3px solid var(--blau-500);
  border-radius:0 9px 9px 0;padding:11px 14px;font-size:12.8px;color:var(--text-secondary);line-height:1.5}
.hinweis b{color:var(--foreground)}

/* Rueckweg ins Operating System — sitzt ueber dem Nutzerblock */
.rail-zurueck{border-top:1px solid var(--border);border-radius:0;margin-bottom:2px;color:var(--text-muted)}
.rail-zurueck:hover{background:var(--primary-soft);color:var(--primary)}

/* ---------- Verschachtelte Navigation: Unterbereiche des aktiven Moduls ---------- */
.rail a.offen{color:#FFFFFF}
/* Eingeklappt sitzen ALLE Icons (auch die Unterpunkte) in einer mittigen Spalte —
   keine Einrueckung. Erst beim Ausfahren rueckt die Gruppe ein und bekommt die
   Trennlinie, weil dann Platz fuer die Beschriftung da ist. */
.rail-gruppe-unter{display:grid;gap:2px;margin:2px 0 6px;padding-left:0;min-width:0;
  border-left:1px solid transparent;
  transition:margin var(--tempo),padding-left var(--tempo),border-color var(--tempo)}
.rail:hover .rail-gruppe-unter{margin-left:23px;padding-left:9px;border-left-color:rgba(255,255,255,.12)}
.rail a.rail-unter{height:38px;font-size:13px;padding:0 15px;color:rgba(240,238,233,.74)}
.rail a.rail-unter:hover{color:#FFFFFF}
.rail:hover a.rail-unter{padding:0 12px}
.rail a.rail-unter svg{width:16px;height:16px}
.rail a.rail-unter .rail-wort{font-size:12.8px}
.rail a.rail-marke{text-decoration:none;color:inherit;padding:0 5px 16px}
.rail-marke:hover{text-decoration:none}

/* ---------- Hell/Dunkel-Schalter ---------- */
.thema-schalter{padding:8px;border-radius:9px;background:transparent;box-shadow:none;
  color:var(--text-muted);display:grid;place-items:center;width:36px;height:36px}
.thema-schalter:hover{background:var(--surface-2);color:var(--foreground);box-shadow:none}
.thema-schalter svg{width:17px;height:17px;grid-area:1/1}
.thema-schalter svg:last-child{display:none}
:root[data-theme="dark"] .thema-schalter svg:first-child{display:none}
:root[data-theme="dark"] .thema-schalter svg:last-child{display:block}

/* ---------- Buchhaltung: Belegeingang und Monatsordner ---------- */
/* Fehlte bisher: .klein war nur fuer <button> definiert, die Ordner-Zeile
   benutzt aber <a class="knopf klein"> fuer den Download. */
.knopf.klein{padding:5px 11px;font-size:12.5px}

/* Was beim Auslesen unklar war. Bewusst ruhiger als .beleg-fehler: das ist ein
   Hinweis zum Gegenlesen, kein Fehler. */
.beleg-hinweis{display:flex;align-items:flex-start;gap:7px;margin-top:9px;padding:8px 10px;
  border-radius:9px;background:var(--blau-50);color:var(--blau-900);
  font-size:11.5px;line-height:1.4}
.beleg-hinweis svg{width:14px;height:14px;flex-shrink:0;margin-top:1px}

/* Monatsordner. Eine Zeile je Monat mit Summen und den zwei Knoepfen. */
.bh-ordner{display:grid;gap:7px}
.bh-ordner-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:11px;
  background:linear-gradient(158deg,#FFFFFF 0%,var(--surface-2) 100%)}
/* Der laufende Monat ist noch nicht vollstaendig — sichtbar abgesetzt, damit
   niemand ihn versehentlich als Monatsabschluss verschickt. */
.bh-ordner-zeile.laufend{border-style:dashed;opacity:.9}
.bh-ordner-monat{min-width:0;flex:1}
.bh-ordner-monat b{display:block;font-size:13.5px;line-height:1.3}
.bh-ordner-monat .caption{font-size:11px}
.bh-ordner-tat{display:flex;align-items:center;gap:7px;flex-shrink:0}
.bh-ordner-tat .caption{font-size:11px;color:var(--text-muted)}
.bh-ordner-fuss{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;
  padding-top:11px;border-top:1px solid var(--border);font-size:11.5px;line-height:1.5}
.bh-ordner-fuss svg{width:14px;height:14px;flex-shrink:0;margin-top:2px;color:var(--text-muted)}
@media (max-width:560px){
  .bh-ordner-tat{width:100%;justify-content:flex-end}
}

/* Zahltag beim Abhaken einer offenen Rechnung. Schmal gehalten — er steht neben
   dem Haken und darf die Zeile nicht sprengen. */
.lz-bezahlt{display:flex;align-items:center;gap:6px}
.lz-bezahlt input[type="date"]{width:auto;padding:4px 7px;font-size:11.5px}
/* Merksatz unter der Prüfmaske einer Kundenrechnung. */
.beleg-merk{display:flex;align-items:flex-start;gap:6px;margin:9px 0 0;
  font-size:11px;line-height:1.45;color:var(--text-muted)}
.beleg-merk svg{width:13px;height:13px;flex-shrink:0;margin-top:1px}

/* ---------- Marketing & Content ---------- */

.kachel-von{font-size:16px;font-weight:500;color:var(--text-muted)}

/* Ausstoß: acht Wochensäulen mit Ziellinie. Die Höhe ist die Aussage —
   sie wird nicht animiert, damit beim Laden nichts wackelt. */
/* stretch, nicht flex-end: sonst schrumpft jede Spalte auf ihre Inhaltshöhe und
   die Säulen stehen auf verschiedenen Grundlinien. Das Ausrichten nach unten
   macht die Spalte selbst (justify-content in .mk-saeule). */
.mk-wochen{display:flex;align-items:stretch;gap:9px;height:150px;padding-top:16px}
/* Grid statt Flex: zwei feste Zeilen — Säule (nimmt den Rest) und Datum.
   Damit stehen alle Säulen garantiert auf derselben Grundlinie, unabhängig
   davon, wie hoch ihr Balken ist. */
.mk-woche{flex:1;min-width:0;display:grid;grid-template-rows:1fr auto;gap:6px;justify-items:center}
/* Spalte von unten gestapelt: Zahl oben auf dem Balken, Balken auf dem Boden. */
.mk-saeule{position:relative;width:100%;min-height:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;gap:3px}
.mk-balken{flex:0 0 auto;width:100%;max-width:34px;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--blau-300),var(--blau-700))}
.mk-balken.erreicht{background:linear-gradient(180deg,#7FB98B,#2F6B41)}
/* Die laufende Woche ist noch nicht vorbei — gestreift, damit niemand sie
   mit einer abgeschlossenen Woche verwechselt. */
.mk-balken.laufend{opacity:.75;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 4px,transparent 4px 8px),
    linear-gradient(180deg,var(--blau-300),var(--blau-700))}
.mk-ziellinie{position:absolute;left:-2px;right:-2px;height:0;
  border-top:1.5px dashed var(--text-muted);opacity:.6}
/* Ganz normal im Fluss — dadurch sitzt die Zahl immer auf ihrem Balken,
   auch wenn der null hoch ist. */
.mk-wert{flex:0 0 auto;font-size:11px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1}
/* Eigener Name mit Bereichs-Präfix. Ein blosses ".leer" gibt es hier schon —
   das ist der leere Zustand einer Karte mit padding:52px 24px, und genau das hat
   die Zahl auf 115px aufgeblaeht, statt sie 11px hoch zu lassen. */
.mk-wert-null{color:var(--text-muted);font-weight:400}
.mk-woche-tag{font-size:10px;color:var(--text-muted);white-space:nowrap}
.mk-legende{display:flex;align-items:flex-start;gap:6px;margin-top:12px;font-size:11px;line-height:1.5}
.mk-legende svg{width:13px;height:13px;flex-shrink:0;margin-top:2px}

.mk-trenner{height:1px;background:var(--border);margin:16px 0 13px}
.mk-unter{font-size:12.5px;font-weight:650;margin:0 0 9px;color:var(--text-secondary)}

/* Kanalanteile des Monats */
.mk-kanaele{display:grid;gap:7px}
.mk-kanal{display:grid;grid-template-columns:104px 1fr 28px;align-items:center;gap:10px;font-size:12px}
.mk-kanal-name{color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kanal-spur{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.mk-kanal-spur>span{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--blau-400),var(--blau-700))}
.mk-kanal b{text-align:right;font-variant-numeric:tabular-nums}

/* Redaktionsplan */
.mk-posts{display:grid;gap:8px;max-height:520px;overflow-y:auto}
.mk-post{border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  background:linear-gradient(158deg,#FFFFFF 0%,var(--surface-2) 100%)}
.mk-post.spaet{border-color:#E7B4AF}
.mk-post-kopf{display:flex;align-items:flex-start;gap:9px}
.mk-post-titel{flex:1;min-width:0;font-size:13px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.mk-post-titel i{display:block;font-size:10.5px;font-style:normal;font-weight:400;color:var(--text-muted);margin-top:2px}
.mk-post-tag{font-size:11px;color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-post-tag.spaet{color:#A4243D;font-weight:650}
.mk-post-notiz{margin:7px 0 0;font-size:11.5px;line-height:1.45;color:var(--text-secondary)}
.mk-post-tat{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:9px}

/* Zuletzt veröffentlicht */
.mk-raus{display:grid;gap:6px}
.mk-raus-zeile{display:flex;align-items:baseline;gap:9px;padding:7px 2px;
  border-bottom:1px solid var(--border)}
.mk-raus-zeile:last-child{border-bottom:0}
.mk-raus-titel{flex:1;min-width:0;font-size:12.5px;font-weight:600}
.mk-raus-titel i{display:block;font-size:10.5px;font-style:normal;font-weight:400;color:var(--text-muted)}
.mk-raus-tag{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}

.mk-kampagne-tat{white-space:nowrap;display:flex;gap:5px;justify-content:flex-end}
.tabelle tr.matt{opacity:.6}
.tabelle td.teuer{color:#A4243D;font-weight:650}

/* Funnel: drei ineinandergeschobene Balken — breit = alle Leads,
   schmal = gewonnene Kunden. */
.mk-funnel{display:grid;gap:14px}
.mk-funnel-zeile{display:grid;gap:6px}
.mk-funnel-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mk-funnel-kopf b{font-size:13px}
.mk-funnel-spur{position:relative;height:26px;border-radius:7px;background:var(--surface-2);overflow:hidden}
.mk-funnel-spur>span{position:absolute;left:0;top:0;bottom:0;border-radius:7px}
.mk-f-leads{background:var(--blau-200)}
.mk-f-eg{background:var(--blau-500)}
.mk-f-kunde{background:var(--blau-800)}
.mk-funnel-quoten{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--text-muted)}
.mk-funnel-quoten b{color:var(--foreground);font-variant-numeric:tabular-nums}

@media (max-width:700px){
  .mk-kanal{grid-template-columns:80px 1fr 26px}
  .mk-wochen{gap:5px}
}

/* ---------- Content: Umschalter zwischen den Personal-Brands ---------- */
/* Filtert die ganze Seite, darum bewusst prominenter als eine Reiterleiste. */
.ct-marken{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ct-marken a{display:flex;flex-direction:column;gap:2px;min-width:150px;
  padding:9px 14px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);color:var(--text-secondary);text-decoration:none;
  transition:border-color var(--tempo),box-shadow var(--tempo),color var(--tempo)}
.ct-marken a:hover{border-color:var(--border-stark);text-decoration:none;box-shadow:var(--s1)}
.ct-marken a.an{border-color:var(--blau-800);color:var(--foreground);box-shadow:var(--s1);
  background:linear-gradient(158deg,#FFFFFF 0%,var(--surface-2) 100%)}
.ct-marke-name{font-size:13.5px;font-weight:650;line-height:1.25}
.ct-marke-zahl{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.ct-marke-zahl .spaet{color:#A4243D}
/* Markenkuerzel vor der Zeile, wenn alle Marken zusammen angezeigt werden. */
.ct-marke-tag{color:var(--foreground);font-weight:650}
@media (max-width:560px){ .ct-marken a{flex:1;min-width:0} }

/* Zweite Filterebene: Kanal innerhalb der Marke. Flacher als der Marken-
   Umschalter, damit die Rangfolge sichtbar bleibt — erst Marke, dann Kanal. */
.ct-kanaele{display:flex;gap:6px;flex-wrap:wrap;margin:-8px 0 16px}
.ct-kanaele a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;
  border:1px solid var(--border);border-radius:99px;background:var(--surface);
  color:var(--text-secondary);text-decoration:none;font-size:12.5px;
  transition:border-color var(--tempo),color var(--tempo),background var(--tempo)}
.ct-kanaele a:hover{border-color:var(--border-stark);color:var(--foreground);text-decoration:none}
.ct-kanaele a.an{background:var(--blau-800);border-color:var(--blau-800);color:#fff;font-weight:600}
.ct-kanal-zahl{font-size:10.5px;font-weight:650;padding:1px 5px;border-radius:99px;
  background:var(--surface-2);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ct-kanaele a.an .ct-kanal-zahl{background:rgba(255,255,255,.22);color:#fff}
.ct-kanal-zahl.spaet{background:#FCEDEC;color:#8C2020}

/* Kanalauswahl im Post-Dialog: mehrere Haken, weil ein Stück auf mehreren
   Kanälen läuft. Kästchen statt Auswahlliste — man sieht alle vier auf einen
   Blick und was angehakt ist. */
.ct-kanalwahl{display:flex;gap:8px;flex-wrap:wrap}
.ct-kanalwahl-feld{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 12px;border:1px solid var(--border-stark);border-radius:9px;
  background:var(--surface);font-size:13px;user-select:none}
.ct-kanalwahl-feld:hover{border-color:var(--primary)}
.ct-kanalwahl-feld input{width:auto;margin:0;accent-color:var(--blau-800)}
.ct-kanalwahl-feld:has(input:checked){border-color:var(--blau-800);
  background:var(--blau-50);font-weight:600}
/* Ziel erreicht — grün statt neutral, damit man es im Vorbeigehen sieht. */
.ct-kanal-zahl.voll{background:var(--success-flaeche,#E6F4EA);color:#146C43}
.ct-kanaele a.an .ct-kanal-zahl.voll{background:rgba(255,255,255,.28);color:#fff}
.ct-ziel-knopf{border-style:dashed !important;color:var(--text-muted) !important}

/* ---------- Content: Uploads und Analyse ---------- */

/* Ein Eintrag je Video UND Kanal — dasselbe Video hat auf drei Kanälen drei
   verschiedene Zahlen, die zu mitteln wäre die unbrauchbarste Darstellung. */
.ct-uploads{display:grid;gap:7px;max-height:420px;overflow-y:auto}
.ct-upload{display:block;padding:10px 12px;border:1px solid var(--border);border-radius:11px;
  background:linear-gradient(158deg,#FFFFFF 0%,var(--surface-2) 100%);
  text-decoration:none;color:inherit;
  transition:border-color var(--tempo),box-shadow var(--tempo)}
.ct-upload:hover{border-color:var(--blau-500);box-shadow:var(--s1);text-decoration:none}
/* Fehlende Zahlen sind die Arbeitsliste — gestrichelt, damit sie auffallen. */
.ct-upload.leerzahl{border-style:dashed}
.ct-upload-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ct-upload-titel{font-size:13px;font-weight:600;line-height:1.3;min-width:0;overflow-wrap:anywhere}
.ct-upload-kanal{flex-shrink:0;font-size:10.5px;font-weight:650;color:var(--text-muted);
  padding:2px 7px;border-radius:99px;background:var(--surface-2)}
.ct-upload-zeile{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:5px;flex-wrap:wrap}
.ct-upload-tag{font-size:10.5px;color:var(--text-muted)}
.ct-upload-zahlen{font-size:11.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.ct-upload-zahlen b{color:var(--foreground)}
.ct-upload-zahlen i{font-style:normal;font-size:10px;color:var(--text-muted);margin-left:6px}
.ct-upload-fehlt{font-size:11.5px;font-weight:600;color:var(--blau-700)}

.ct-summen td:first-child{color:var(--text-secondary)}
.ct-summen-kopf td{font-weight:650;border-bottom:2px solid var(--border)}

/* Analyse-Seite: eine Karte je Kanal, darin Messpunkte nebeneinander. */
.ct-analyse{margin-bottom:16px}
.ct-analyse-tab td:first-child{color:var(--text-secondary)}
.ct-analyse-tab td.rechts{font-variant-numeric:tabular-nums}
.ct-leer{color:var(--text-muted)}
/* Die Veränderung zwischen zwei Messpunkten ist die eigentliche Aussage:
   nicht wie viel, sondern ob es nachgezogen hat. */
.ct-wachstum{display:block;font-style:normal;font-size:10.5px;font-weight:650;margin-top:1px}
.ct-wachstum.auf{color:#146C43}
.ct-wachstum.ab{color:#A4243D}
.ct-messfelder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin-bottom:12px}
.ct-zurueck{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  color:var(--text-secondary);text-decoration:none}
.ct-zurueck:hover{color:var(--foreground)}
.ct-zurueck svg{width:15px;height:15px}
@media (max-width:640px){ .ct-messfelder{grid-template-columns:1fr} }

/* =====================================================================
   GRAPHIT — Licht und Tiefe (nur CRM-Dashboard und Cold-Calling-Liste)

   Das Deko-Objekt lebt von einem einzigen Prinzip: Falten, die Licht fangen.
   Helle Kante links, Schatten rechts, weicher Abfall nach unten. Genau dieses
   Prinzip liegt hier auf den Datenelementen — Balken, Segmente, Pillen sind
   keine flachen Rechtecke mehr, sondern gewoelbte Grate aus demselben Material.
   Das ist die Klammer, die Objekt und Oberflaeche zu einem Stueck macht.

   Alle Regeln sind mit "body.crm-dashboard-design" eingegrenzt: die OS-Seiten
   und Lukas' Bereiche bleiben unveraendert beim Blau-Theme.
   ===================================================================== */

/* ---------- Trichter: jede Stufe ein gewoelbter Grat ----------
   Die Flaechenfarbe kommt als Inline-Stil (var(--stage-N)) aus crm-routes.js;
   angefasst wird darum nur der Schatten. Oben Licht, rechts und unten Abfall. */
body.crm-dashboard-design .trichter-balken{
  border-radius:9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -14px 22px -12px rgba(6,8,12,.5),
    inset -16px 0 26px -16px rgba(6,8,12,.42),
    0 2px 7px -2px rgba(20,22,26,.28);
  text-shadow:0 1px 2px rgba(6,8,12,.45)}
body.crm-dashboard-design .legende-farbe{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(20,22,26,.22)}
/* Der Donut bekommt Tiefe, statt als Aufkleber auf der Karte zu liegen. */
body.crm-dashboard-design .donut svg{filter:drop-shadow(0 8px 16px rgba(20,22,26,.2))}

/* ---------- Saeulen in den hellen Karten: gleiche Woelbung ---------- */
body.crm-dashboard-design .karte:not(.karte-dunkel) .balken{
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.45),
    inset -2px 0 5px -1px rgba(6,8,12,.24),
    0 2px 6px -2px rgba(20,22,26,.24)}

/* ---------- Dunkle Akzente, systematisch statt zufaellig ----------
   Aktive Pillen und dunkle Knoepfe kommen aus derselben Rampe wie die
   Anker-Karten. So gibt es im ganzen Dashboard genau EIN Dunkel. */
body.crm-dashboard-design .zeitraum a.aktiv,
body.crm-dashboard-design button.dunkel,
body.crm-dashboard-design .knopf.dunkel{
  background:linear-gradient(168deg,#454A52 0%,#292D33 52%,#15171B 100%);
  color:#FCFDFE;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 4px 14px -4px rgba(12,14,18,.5)}
body.crm-dashboard-design button.dunkel:hover,
body.crm-dashboard-design .knopf.dunkel:hover{
  background:linear-gradient(168deg,#525862 0%,#33383F 52%,#1C1F24 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 22px -6px rgba(12,14,18,.55)}

/* ---------- Eingelassene Flaechen: Forecast, Resuemee, Rang ----------
   Nach innen versetzte Kante -> die Flaeche liegt IN der Karte, nicht darauf. */
body.crm-dashboard-design .forecast,
body.crm-dashboard-design .resuemee{
  box-shadow:inset 0 1px 2px rgba(20,22,26,.07), inset 0 -1px 0 rgba(255,255,255,.85)}

/* ---------- To-Do-Karten in denselben kuehlen Ton ----------
   Vorher warmes Papier (#F4F2ED) neben kuehlem Graphit — das war der zweite
   sichtbare Bruch neben den Ankerkarten. */
body.crm-dashboard-design .heute-todo{
  background:linear-gradient(158deg,#FFFFFF 0%,#F4F6F8 50%,#E7EAEF 100%);
  border-color:rgba(20,22,26,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(20,22,26,.05), 0 8px 20px -12px rgba(20,22,26,.22)}
body.crm-dashboard-design .heute-todo:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 26px -8px rgba(20,22,26,.26)}

/* ---------- Navigationsleiste und Kopfzeile aus demselben Block ----------
   Nur im Dashboard-Design umgefaerbt; die uebrigen Seiten behalten ihre Leiste.
   Ohne das bliebe eine warm-braune Saeule links neben einer kuehlen Seite stehen. */
body.crm-dashboard-design .rail{
  border-color:#0E1013;
  background:linear-gradient(180deg,#41464D 0%,#2A2E34 56%,#15171B 100%);
  box-shadow:0 24px 54px -14px rgba(10,12,16,.55), inset 0 1px 0 rgba(255,255,255,.08);
  color:rgba(233,235,239,.84)}
body.crm-dashboard-design .rail:hover{
  box-shadow:0 32px 72px -14px rgba(10,12,16,.66), inset 0 1px 0 rgba(255,255,255,.1)}
body.crm-dashboard-design .rail-logo{
  background:linear-gradient(158deg,#F8F9FB 0%,#C2C7CF 100%);color:#15171B}
body.crm-dashboard-design .rail-avatar{
  background:linear-gradient(160deg,#F2F4F7,#ADB2BA);color:#15171B}
body.crm-dashboard-design .topbar{
  box-shadow:0 18px 38px -22px rgba(14,16,20,.4), inset 0 1px 0 rgba(255,255,255,.85)}
body.crm-dashboard-design .reiter a.aktiv{
  box-shadow:0 6px 18px -8px rgba(14,16,20,.4), inset 0 1px 0 rgba(255,255,255,.9)}

/* =====================================================================
   Weiss-Modus (Lukas): alles oben Ergaenzte wieder flach und weiss.
   Muss NACH den Graphit-Regeln stehen, sonst greift es nicht.
   ===================================================================== */
:root[data-weiss="1"] body.crm-dashboard-design .trichter-balken{box-shadow:none;text-shadow:none}
:root[data-weiss="1"] body.crm-dashboard-design .donut svg{filter:none}
:root[data-weiss="1"] body.crm-dashboard-design .karte:not(.karte-dunkel) .balken{box-shadow:none}
:root[data-weiss="1"] body.crm-dashboard-design .karte:not(.karte-mitte):not(.karte-dunkel),
:root[data-weiss="1"] body.crm-dashboard-design .kachel{box-shadow:var(--s1)}
:root[data-weiss="1"] body.crm-dashboard-design .forecast,
:root[data-weiss="1"] body.crm-dashboard-design .resuemee{box-shadow:none}
:root[data-weiss="1"] body.crm-dashboard-design .heute-todo{
  background:#FFFFFF;border-color:var(--border);box-shadow:var(--s1)}
:root[data-weiss="1"] body.crm-dashboard-design .zeitraum a.aktiv,
:root[data-weiss="1"] body.crm-dashboard-design button.dunkel,
:root[data-weiss="1"] body.crm-dashboard-design .knopf.dunkel{
  background:var(--blau-800);color:#fff;box-shadow:var(--s1)}
:root[data-weiss="1"] body.crm-dashboard-design .karte-mitte .orb-deko{
  filter:drop-shadow(0 14px 26px rgba(15,27,45,.18))}

/* ---------- Content: Videoakte und Vergleichszahlen ----------
   Die Akte steht ueber den Zahlen: was war im Video zu sehen, wie lang war es,
   wo laeuft es. Ohne diesen Kopf sind die Tabellen darunter nicht deutbar. */
.ct-akte-marken{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ct-akte-raster{display:grid;grid-template-columns:1fr 260px;gap:26px;align-items:start}
.ct-akte-inhalt h3{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px}
.ct-inhalt-text{font-size:14px;line-height:1.6;white-space:pre-wrap}
.ct-akte-fakten{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden}
.ct-fakt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 14px;background:var(--surface)}
.ct-fakt span{font-size:12.5px;color:var(--text-secondary)}
.ct-fakt b{font-size:14px;font-weight:650;white-space:nowrap}
/* Ein Link je Kanal — dasselbe Kurzvideo hat auf jeder Plattform eine eigene URL. */
.ct-akte-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border)}
.ct-linkzeile{display:flex;align-items:center;gap:9px;padding:7px 13px;
  background:var(--surface-2);border-radius:99px;font-size:13px}
.ct-linkkanal{font-weight:650;color:var(--text-secondary)}
.ct-kanal-tasten{display:flex;gap:8px;flex-shrink:0}

/* Der Wert gross, der Vergleich klein daneben — nicht andersherum. Die Zahl ist
   die Tatsache, der Prozentwert nur ihre Einordnung. */
.ct-analyse-tab td .ct-wert{font-variant-numeric:tabular-nums}
.ct-vgl{display:inline-block;margin-left:8px;font-style:normal;font-size:11px;
  font-weight:700;padding:2px 7px;border-radius:99px;white-space:nowrap;vertical-align:1px}
.ct-vgl.auf{background:var(--success-flaeche);color:var(--success)}
.ct-vgl.ab{background:var(--danger-flaeche);color:var(--danger)}
.ct-vgl.gleich{background:var(--surface-2);color:var(--text-muted)}
/* Die Ø-Spalte steht optisch zurueck: sie ist Bezugsgroesse, nicht Messwert. */
.ct-spalte-schnitt{color:var(--text-secondary);
  border-left:1px solid var(--border);background:var(--surface-2)}
th.ct-spalte-schnitt{font-weight:600}
.ct-vgl-basis{display:block;font-size:10.5px;color:var(--text-muted);font-weight:400;margin-top:1px}
/* Kennzeichnet Zeilen, die wir selbst rechnen und die keine Plattform liefert. */
.ct-berechnet{display:inline-block;margin-left:7px;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:5px;
  background:var(--surface-2);color:var(--text-muted);vertical-align:1px}
@media (max-width:900px){ .ct-akte-raster{grid-template-columns:1fr} }

/* ---------- Content: Ideen-Werkstatt ----------
   Vom Vorschlag ueber Haken/X zum Skript. Die Funnel-Stufe traegt jede Karte
   sichtbar, weil das die eigentliche Ordnung ist: eine Idee ohne Stufe ist nur
   ein Einfall, mit Stufe ist sie ein Werkzeug fuer eine bestimmte Aufgabe. */
.id-band{display:flex;align-items:center;gap:18px;margin-bottom:16px;
  text-decoration:none;color:inherit;transition:box-shadow var(--tempo),transform var(--tempo)}
.id-band:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--s2)}
.id-band-zahl{flex-shrink:0;min-width:52px;height:52px;padding:0 12px;border-radius:14px;
  display:grid;place-items:center;font-size:24px;font-weight:700;letter-spacing:-.02em;
  color:#fff;background:linear-gradient(168deg,#454A52 0%,#292D33 52%,#15171B 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 4px 14px -4px rgba(12,14,18,.5)}
.id-band-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.id-band-text strong{font-size:15px;font-weight:650}
.id-band-pfeil{flex-shrink:0;font-size:13px;font-weight:650;color:var(--primary)}

.id-markenwahl{display:flex;gap:3px;padding:3px;border-radius:11px;background:var(--surface-2)}
.id-markenwahl a{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:550;color:var(--text-secondary)}
.id-markenwahl a:hover{color:var(--foreground);text-decoration:none}
.id-markenwahl a.aktiv{background:var(--surface);color:var(--foreground);font-weight:650;box-shadow:var(--s1)}

.id-abschnitt{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-size:15px}
.id-abschnitt span{font-size:12px;font-weight:700;padding:2px 9px;border-radius:99px;
  background:var(--surface-3);color:var(--text-secondary)}
/* Zwei Spalten: eine Idee ist zu lang fuer drei und zu kurz fuer eine. */
.id-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:16px;align-items:start}
.id-karte{display:flex;flex-direction:column;gap:10px}
/* Innenkante statt Rahmen: ein 3px-Balken bricht an einer Karte mit 14px
   Eckenradius sichtbar auf. Als inset-Schatten folgt er der Rundung. */
.id-karte--ja{box-shadow:inset 3px 0 0 var(--success), var(--s1)}
.id-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.id-marken{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.id-tasten{display:flex;gap:8px;flex-shrink:0}
.id-form{margin:0}
/* Haken und X sind die wichtigsten Knoepfe der Seite: gross genug zum sicheren
   Treffen (44 px), gruen und rot getrennt, damit man sie nicht verwechselt. */
.id-ja,.id-nein{width:44px;height:44px;padding:0;border-radius:12px;display:grid;place-items:center}
.id-ja svg,.id-nein svg{width:20px;height:20px}
/* Der Haken ist die HAeUFIGERE Handlung und darum der dunkle, schwere Knopf —
   nicht der bunte. Im Graphit-Umfeld war das 44px grosse Signalgruen die einzige
   Farbe auf der ganzen Seite und zog jeden Blick auf sich, egal worum es ging.
   Die Bedeutung traegt ohnehin das Zeichen, nicht die Farbe. */
.id-ja{background:var(--blau-800);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--s1)}
.id-ja:hover{background:var(--blau-900)}
.id-nein{background:var(--surface-2);color:var(--text-secondary)}
.id-nein:hover{background:var(--danger-flaeche);color:var(--danger)}
.id-titel{font-size:15.5px;font-weight:650;line-height:1.4}
.id-text{font-size:13.5px;line-height:1.6;color:var(--text-secondary)}
.id-warum{padding:11px 13px;border-radius:var(--r-md);background:var(--surface-2)}
.id-warum span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);margin-bottom:4px}
.id-warum p{font-size:13px;line-height:1.55}
.id-beispiel{font-size:12.5px;color:var(--text-muted);line-height:1.5}
.id-fuss{margin-top:auto;padding-top:4px}

/* Funnel-Stufe: von hell nach dunkel wie der Trichter selbst — oben breit und
   hell (Reichweite), unten schmal und dunkel (Entscheidung). */
.id-stufe{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.02em;color:#fff;white-space:nowrap}
.id-stufe.id-tofu{background:var(--stage-2)}
.id-stufe.id-mofu{background:var(--stage-4)}
.id-stufe.id-bofu{background:var(--stage-6)}
.id-stufe.id-bindung{background:var(--success)}

.id-holen{display:flex;flex-direction:column;gap:14px}
.id-holen-form{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
.id-holen-form .feld{margin:0}
.id-holen-fuss{display:flex;gap:8px;align-items:flex-start;line-height:1.55}
.id-holen-fuss svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}
@media (max-width:720px){ .id-holen-form{grid-template-columns:1fr} }

.id-laeuft{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.id-spinner{width:22px;height:22px;flex-shrink:0;border-radius:50%;
  border:2.5px solid var(--surface-3);border-top-color:var(--primary);
  animation:id-dreht .8s linear infinite}
@keyframes id-dreht{to{transform:rotate(360deg)}}
/* Wer Bewegung abgestellt hat, bekommt statt des Kreisels einen Punkt, der
   pulst — die Auskunft "es laeuft noch" darf nicht verschwinden. */
@media (prefers-reduced-motion:reduce){
  .id-spinner{animation:id-pulst 1.6s ease-in-out infinite;border-top-color:var(--primary)}
  @keyframes id-pulst{0%,100%{opacity:1}50%{opacity:.35}}
}

/* Das Skript ist zum Ablesen da: Fliesstext-Breite, echte Zeilenumbrueche,
   keine Monospace-Optik, die beim Vorlesen stoert. */
.id-skript{white-space:pre-wrap;font:400 14px/1.72 'Inter',system-ui,sans-serif;
  max-width:74ch;color:var(--foreground)}
.id-plan-form{display:grid;grid-template-columns:220px auto;gap:14px;align-items:end}
.id-plan-form .feld{margin:0}
.id-verworfen{list-style:none;display:grid;gap:1px}
.id-verworfen li{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:13px;color:var(--text-secondary)}
.id-verworfen li:last-child{border-bottom:0}
.id-verworfen i{font-style:normal;font-size:12px;color:var(--text-muted);white-space:nowrap}

/* ---------- Content: eine Leiste statt vier Kacheln ----------
   Vier gleich schwere Karten fuer vier Ziffern brauchten eine ganze
   Bildschirmhoehe, und weil alle gleich aussahen, stach die wichtigste Zahl
   (das Wochenziel) nicht heraus. Hier gliedern Trennlinien, und nur das erste
   Feld traegt Farbe. */
.ct-leiste{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:0;
  padding:0;overflow:hidden;margin-bottom:16px}
.ct-leiste-feld{display:flex;flex-direction:column;gap:3px;padding:16px 22px;
  border-left:1px solid var(--border);min-width:0}
.ct-leiste-feld:first-child{border-left:0}
.ct-leiste-titel{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted)}
.ct-leiste-zahl{font-size:27px;font-weight:700;letter-spacing:-.03em;line-height:1.1;
  display:flex;align-items:baseline;gap:6px}
.ct-leiste-zahl span{font-size:15px;font-weight:600;color:var(--text-muted);letter-spacing:-.01em}
/* Nur der Zielwert bekommt einen farbigen Balken — Ampel ohne Ampel-Kitsch. */
.ct-leiste-haupt{box-shadow:inset 3px 0 0 var(--border-stark)}
.ct-leiste-haupt.voll{box-shadow:inset 3px 0 0 var(--success)}
.ct-leiste-haupt.mittel{box-shadow:inset 3px 0 0 var(--warning)}
.ct-leiste-haupt.knapp{box-shadow:inset 3px 0 0 var(--danger)}
.ct-leiste-feld.warnt .ct-leiste-zahl{color:var(--danger)}
@media (max-width:1000px){ .ct-leiste{grid-template-columns:1fr 1fr}
  .ct-leiste-feld:nth-child(3){border-left:0}
  .ct-leiste-feld:nth-child(n+3){border-top:1px solid var(--border)} }
@media (max-width:560px){ .ct-leiste{grid-template-columns:1fr}
  .ct-leiste-feld{border-left:0;border-top:1px solid var(--border)}
  .ct-leiste-feld:first-child{border-top:0} }

/* ---------- Ideenwerkstatt: Filter ---------- */
.id-filter{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.id-filterblock{display:flex;align-items:center;gap:10px;padding:7px 12px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--s1)}
.id-filterkopf{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);white-space:nowrap}
.id-filterblock nav{display:flex;gap:2px;flex-wrap:wrap}
.id-filterblock nav a{padding:5px 11px;border-radius:8px;font-size:12.5px;
  font-weight:550;color:var(--text-secondary);white-space:nowrap}
.id-filterblock nav a:hover{background:var(--surface-2);color:var(--foreground);text-decoration:none}
.id-filterblock nav a.aktiv{background:var(--blau-800);color:#fff;font-weight:650}

/* ---------- Produktionstafel ----------
   Fuenf Spalten in Arbeitsrichtung. Waagerecht scrollbar statt umgebrochen: die
   Reihenfolge IST die Aussage, und ein Umbruch zerstoert sie. */
.pt-anleitung{display:flex;align-items:center;gap:8px;font-size:12.5px;
  color:var(--text-muted);margin:0 0 12px}
.pt-anleitung svg{width:15px;height:15px;flex-shrink:0}
.pt-tafel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);
  gap:12px;overflow-x:auto;padding-bottom:6px;align-items:start}
.pt-spalte{background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:12px;min-width:0;
  transition:box-shadow var(--tempo),background var(--tempo)}
.pt-spalte.pt-ziel{box-shadow:inset 0 0 0 2px var(--primary)}
.pt-spalte-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pt-spalte-titel{font-size:13px;font-weight:700}
.pt-spalte-zahl{font-size:11.5px;font-weight:700;padding:1px 8px;border-radius:99px;
  background:var(--surface);color:var(--text-secondary)}
.pt-spalte-hilfe{font-size:11px;line-height:1.4;color:var(--text-muted);margin:5px 0 10px}
.pt-ablage{display:flex;flex-direction:column;gap:8px;min-height:70px}
.pt-leer{font-size:12px;color:var(--text-muted);text-align:center;padding:14px 0}

/* Tagestrenner: gibt den Ueberblick beim Vorproduzieren — zwei fuer den 5.,
   zwei fuer den 6. Rot, wenn ein Tag unter dem Tagesziel liegt. */
.pt-tagtrenner{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:6px 0 1px;padding-bottom:3px;border-bottom:1px dashed var(--border-stark)}
.pt-tagtrenner span{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-secondary)}
.pt-tagtrenner i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--text-muted)}
.pt-tagtrenner i.knapp{color:var(--danger)}
.pt-tagtrenner:first-child{margin-top:0}

.pt-karte{background:var(--surface);border:1px solid var(--border);border-radius:11px;
  padding:10px 11px;display:flex;flex-direction:column;gap:6px;cursor:grab;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--s1);
  transition:box-shadow var(--tempo),transform var(--tempo)}
.pt-karte:hover{box-shadow:var(--s2);transform:translateY(-1px)}
.pt-karte:active{cursor:grabbing}
.pt-karte.pt-zieht{opacity:.4}
.pt-karte--spaet{box-shadow:inset 3px 0 0 var(--danger), var(--s1)}
.pt-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
/* Das geplante Datum steht zuerst und traegt Gewicht: beim Vorproduzieren ist
   "fuer wann ist das?" die einzige Frage, die zaehlt. */
.pt-datum{font-size:11.5px;font-weight:700;color:var(--foreground);white-space:nowrap}
.pt-datum.spaet{color:var(--danger)}
.pt-titel{font-size:13px;font-weight:600;line-height:1.35}
.pt-zeile{display:flex;flex-wrap:wrap;gap:4px}
.pt-chip{font-size:10px;font-weight:600;padding:2px 7px;border-radius:5px;
  background:var(--surface-2);color:var(--text-secondary);white-space:nowrap}
.pt-chip--kanal{background:var(--surface-3)}
.pt-termin,.pt-datei{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-secondary)}
.pt-termin svg,.pt-datei svg{width:12px;height:12px}
.pt-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:5px;border-top:1px solid var(--border)}
.pt-fuss a{font-size:11.5px;font-weight:600}
.pt-mini{background:var(--surface-2);color:var(--text-secondary);padding:3px 9px;
  font-size:11px;border-radius:6px;box-shadow:none}
.pt-mini:hover{background:var(--blau-800);color:#fff;box-shadow:none}
.pt-liegt{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;
  background:var(--warning-flaeche);color:var(--warning)}

/* Die Deckungszeile: entscheidet, ob ueberhaupt neue Ideen gebraucht werden. */
.pt-deckung{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  margin:12px 0 20px;font-size:13px;color:var(--text-secondary)}
.pt-deckung strong{color:var(--foreground)}
.pt-deckung-luecke{font-size:12.5px;font-weight:600;color:var(--danger)}
.pt-deckung-voll{font-size:12.5px;font-weight:600;color:var(--success)}

/* ---------- Fortschritt beim Hochladen ---------- */
.hl-fortschritt{height:8px;border-radius:99px;background:var(--surface-3);
  overflow:hidden;margin:-6px 0 16px}
/* scaleX statt width: der Elternknoten hat overflow:hidden und die Rundung, er
   schneidet also ohnehin ab — die Breite zu animieren wuerde bei jedem
   Fortschrittsschritt das Layout neu rechnen lassen, ohne dass es etwas bringt. */
.hl-fortschritt>div{height:100%;width:100%;background:var(--primary);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .2s linear}
.hl-fortschritt.fertig>div{background:var(--success)}
.hl-fortschritt.kaputt>div{background:var(--danger)}
#dlg-hochladen input[type=file]{padding:8px 10px;font-size:13px}

/* ---------- Content: Sortierung des Upload-Kastens ----------
   Der eigene Kasten "Zuletzt veroeffentlicht" ist hierin aufgegangen — er war
   nur eine von vier moeglichen Reihenfolgen derselben Liste. */
.ct-sortieren{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 14px;padding:3px;
  border-radius:11px;background:var(--surface-2);border:1px solid var(--border)}
.ct-sortieren a{flex:1 1 auto;text-align:center;padding:6px 11px;border-radius:8px;
  font-size:12px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.ct-sortieren a:hover{color:var(--foreground);background:rgba(255,255,255,.55);text-decoration:none}
.ct-sortieren a.aktiv{background:var(--blau-800);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--s1)}
/* Der Abstand zum Kanaldurchschnitt. Klein und rechts — die absolute Zahl
   bleibt die Tatsache, das hier ist nur ihre Einordnung. */
.ct-leistung{margin-left:8px;font-size:11px;font-weight:700;padding:2px 7px;
  border-radius:99px;white-space:nowrap}
.ct-leistung.auf{background:var(--success-flaeche);color:var(--success)}
.ct-leistung.ab{background:var(--danger-flaeche);color:var(--danger)}
.ct-leistung.gleich{background:var(--surface-2);color:var(--text-muted)}
.ct-sort-fuss{display:flex;gap:8px;align-items:flex-start;line-height:1.5;margin-top:12px}
.ct-sort-fuss svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}
/* Der Bezug MUSS am Chip stehen: die grosse Zahl in der Zeile ist der neueste
   Stand (oft "nach 7 Tagen"), der Prozentwert aber der Abstand zum
   24-Stunden-Schnitt. Ohne die Beschriftung liest man ihn auf die falsche Zahl. */
.ct-leistung i{font-style:normal;font-weight:600;opacity:.62;margin-left:5px;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.03em}

/* ---------- Ideenwerkstatt: drei Funnel-Spalten ----------
   Eine Spalte je Stufe statt einer gemischten Liste. Nebeneinander sieht man
   sofort, wo nichts nachkommt: drei TOFU-Ideen und eine leere BOFU-Spalte
   heisst, dass Reichweite entsteht und unten nichts ankommt. In einer
   Mischliste faellt genau das nicht auf. */
.id-stufen-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:1150px){ .id-stufen-raster{grid-template-columns:1fr} }
.id-stufe-spalte{display:flex;flex-direction:column;gap:12px;min-width:0}
.id-stufe-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-radius:var(--r-md);color:#fff}
.id-stufe-kopf>div{display:flex;align-items:baseline;gap:9px;min-width:0}
.id-stufe-kurz{font-size:12px;font-weight:800;letter-spacing:.06em}
.id-stufe-name{font-size:13px;font-weight:600;opacity:.85}
.id-stufe-zahl{font-size:12px;font-weight:700;padding:1px 9px;border-radius:99px;
  background:rgba(255,255,255,.2)}
/* Von hell nach dunkel wie der Trichter selbst: oben breit (Reichweite),
   unten schmal und schwer (Entscheidung). */
.id-kopf-tofu{background:linear-gradient(160deg,var(--stage-2),var(--stage-3))}
.id-kopf-mofu{background:linear-gradient(160deg,var(--stage-4),var(--stage-5))}
.id-kopf-bofu{background:linear-gradient(160deg,var(--stage-6),var(--stage-7))}
.id-stufe-frage{font-size:12px;color:var(--text-muted);line-height:1.45;margin:-4px 2px 0}
.id-stufe-leer{font-size:12.5px;color:var(--text-muted);text-align:center;
  padding:22px 10px;border:1px dashed var(--border-stark);border-radius:var(--r-md)}
.id-stufe-spalte .id-karte{margin:0}
/* Stand des Skripts direkt auf der angenommenen Karte. */
.id-skriptstand{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:10px;border-top:1px solid var(--border)}
.id-spinner.klein{width:15px;height:15px;border-width:2px}
.id-tagfilter{font-size:12.5px;font-weight:500;color:var(--text-muted)}

/* ---------- Die Tagesleiste ----------
   Die Tafel ist nach ARBEIT sortiert, hier stehen dieselben Kaertchen nach
   TAGEN. Beim Vorproduzieren ist das die eigentliche Frage: was geht am 27.
   raus, und wo steckt es gerade? Ein Klick filtert die Tafel darunter. */
.tp-leiste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(116px,1fr);
  gap:8px;overflow-x:auto;padding:0 0 8px;margin-bottom:14px}
.tp-tag{display:flex;flex-direction:column;gap:3px;padding:10px 11px;min-width:0;
  border-radius:var(--r-md);text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--s1);
  transition:box-shadow var(--tempo),transform var(--tempo)}
.tp-tag:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--s2)}
.tp-wochentag{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);white-space:nowrap}
.tp-datum{font-size:13px;font-weight:650}
.tp-zahl{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.tp-zahl i{font-style:normal;font-size:12px;font-weight:600;color:var(--text-muted)}
.tp-stufen{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.tp-stufe{font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:4px;white-space:nowrap}
/* Dieselbe Rampe wie die Tafelspalten — die Farbe sagt, wie weit es ist. */
.tp-s-aufnehmen{background:var(--stage-2);color:#fff}
.tp-s-schneiden{background:var(--stage-4);color:#fff}
.tp-s-hochladen{background:var(--stage-6);color:#fff}
.tp-s-geplant{background:var(--success-flaeche);color:var(--success)}
.tp-s-raus{background:var(--surface-3);color:var(--text-secondary)}
.tp-s-leer{background:transparent;color:var(--text-muted);font-weight:500;padding-left:0}
/* Der Zustand des Tages traegt eine Kante links — Luecken sollen auffallen,
   ohne dass man Zahlen vergleichen muss. */
.tp-leer{box-shadow:inset 3px 0 0 var(--danger), var(--s1)}
.tp-leer .tp-zahl{color:var(--danger)}
.tp-knapp{box-shadow:inset 3px 0 0 var(--warning), var(--s1)}
.tp-voll{box-shadow:inset 3px 0 0 var(--success), var(--s1)}
.tp-heute{border-color:var(--border-stark)}
.tp-heute .tp-wochentag{color:var(--foreground)}
.tp-gewaehlt{outline:2px solid var(--blau-700);outline-offset:1px}

/* Headline auf dem Kaertchen: der erste Satz, woertlich. */
.pt-headline{font-size:11.5px;line-height:1.45;color:var(--text-secondary);
  padding-left:8px;border-left:2px solid var(--border-stark)}
.pt-plus{width:24px;height:24px;padding:0;margin-left:auto;margin-right:6px;
  border-radius:7px;font-size:17px;line-height:1;display:grid;place-items:center;
  background:var(--surface);color:var(--text-secondary);box-shadow:var(--s1)}
.pt-plus:hover{background:var(--blau-800);color:#fff;box-shadow:var(--s1)}
/* Ueberfaelliges steht vor "heute" — es ist das Dringendste, nicht das Aelteste. */
.tp-spaet{box-shadow:inset 3px 0 0 var(--danger), var(--s1);background:var(--danger-flaeche)}
.tp-spaet .tp-zahl,.tp-spaet .tp-datum{color:var(--danger)}
.tp-s-spaet{background:var(--danger);color:#fff}

/* ---------- Was jetzt raus muss ----------
   Steht vor allem anderen auf der Seite: es ist das Einzige mit einer Uhr im
   Nacken. Rote Kante, aber keine Panik-Farbe auf der ganzen Fläche — sonst
   stumpft der Blick ab, wenn öfter mal etwas fällig ist. */
.id-faellig{margin-bottom:16px;box-shadow:inset 3px 0 0 var(--danger), var(--s2)}
.id-faellig-zeile{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;border-top:1px solid var(--border)}
.id-faellig-zeile>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.id-faellig-zeile strong{font-size:14px;font-weight:650}
.id-faellig-fuss{display:flex;gap:8px;align-items:flex-start;line-height:1.5;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.id-faellig-fuss svg{width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--warning)}

/* ---------- Kalender (/kalender) — nachgebaut nach Google Kalender ----------
   Links die schmale Spalte (Erstellen, Mini-Monat, Kalenderliste), rechts die
   Buehne mit Leiste und Raster. Die Farben kommen aus dem Designsystem, nicht
   aus Googles Palette: --primary (#2563EB) und Googles Blau (#1a73e8) liegen
   so nah beieinander, dass es niemand sieht — dafuer dreht der Kalender im
   Dunkel- und im Weiss-Modus korrekt mit. */
.gk{display:grid;grid-template-columns:248px minmax(0,1fr);gap:20px;align-items:start}
.gk-stoerung{margin-bottom:14px}

/* --- linke Spalte --- */
.gk-seite{display:flex;flex-direction:column;gap:18px;position:sticky;top:0}
/* Googles "Erstellen" ist eine hohe Pille mit Schatten — das auffaelligste
   Element der Seite, weil es die einzige Aktion ist, die man wirklich braucht. */
.gk-erstellen{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  height:48px;padding:0 22px 0 16px;border-radius:99px;
  background:var(--surface);color:var(--foreground);border:1px solid var(--border);
  box-shadow:var(--s2);font-size:14px;font-weight:620}
.gk-erstellen:hover{background:var(--surface-2);box-shadow:var(--s3);transform:none}
.gk-erstellen svg{width:19px;height:19px;color:var(--primary)}

.gk-mini{user-select:none}
.gk-mini-kopf{display:flex;align-items:center;justify-content:space-between;
  padding:0 2px 6px;font-size:13px;font-weight:640}
.gk-mini-kopf span{display:flex;gap:2px}
.gk-mini-kopf a{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:99px;color:var(--text-muted)}
.gk-mini-kopf a:hover{background:var(--surface-2);color:var(--foreground);text-decoration:none}
.gk-mini-kopf svg{width:14px;height:14px}
.gk-mini-wt,.gk-mini-tage{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.gk-mini-wt span{text-align:center;font-size:10px;font-weight:600;color:var(--text-muted);padding:2px 0 4px}
.gk-mini-tage a{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;border-radius:99px;font-size:11.5px;font-weight:550;
  color:var(--text-secondary);font-variant-numeric:tabular-nums}
.gk-mini-tage a:hover{background:var(--surface-3);text-decoration:none}
.gk-mini-tage a.fremd{color:var(--text-muted);opacity:.5}
/* Wie bei Google: hervorgehoben wird NUR der gewaehlte Tag (heller Kreis) und
   heute (voller Kreis). Ein Band ueber die ganze angezeigte Woche hatte ich
   zuerst drin — Google macht das nicht, und es soll 1:1 aussehen. */
.gk-mini-tage a.gewaehlt{background:var(--primary-soft);color:var(--primary);font-weight:700}
.gk-mini-tage a.heute{background:var(--primary);color:#fff;font-weight:700}

.gk-liste{border-top:1px solid var(--border);padding-top:14px}
.gk-liste-titel{font-size:12.5px;font-weight:640;color:var(--text-secondary);margin-bottom:8px}
.gk-liste-titel2{margin-top:16px}
.gk-liste-zeile{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--foreground)}
.gk-liste-zeile input{width:15px;height:15px;padding:0;margin:0;accent-color:var(--primary)}
.gk-liste-fuss{font-size:11px;line-height:1.45;color:var(--text-muted);margin:8px 0 0}

/* --- Leiste ueber der Buehne --- */
.gk-haupt{min-width:0}
.gk-leiste{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.gk-luecke{flex:1 1 auto}
.gk-heute{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:var(--r-sm);
  border:1px solid var(--border-stark);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--text-secondary)}
.gk-heute:hover{background:var(--surface-2);color:var(--foreground);text-decoration:none}
.gk-pfeil{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:99px;color:var(--text-secondary)}
.gk-pfeil:hover{background:var(--surface-2);color:var(--foreground);text-decoration:none}
.gk-pfeil svg{width:17px;height:17px}
.gk-titel{font-size:20px;font-weight:600;margin:0 0 0 8px;letter-spacing:-.015em;white-space:nowrap}
.gk-kw{font-size:11.5px;font-weight:600;color:var(--text-muted);
  background:var(--surface-2);border-radius:99px;padding:3px 9px;margin-left:2px}
.gk-umschalter{display:flex;gap:2px;padding:3px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--border)}
.gk-umschalter a{padding:5px 15px;border-radius:99px;font-size:12.5px;font-weight:600;
  color:var(--text-secondary)}
.gk-umschalter a:hover{color:var(--foreground);text-decoration:none}
.gk-umschalter a.an{background:var(--surface);color:var(--foreground);box-shadow:var(--s1)}

.gk-buehne{border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--surface);overflow:hidden}

/* --- Monatsraster ---
   Googles Kniff: ganztaegige Termine sind gefuellte Balken, Termine MIT
   Uhrzeit nur ein farbiger Punkt plus Zeit und Titel auf dem Zellengrund.
   Dadurch wirkt ein voller Monat nicht wie eine Wand aus Farbe. */
.gk-m-kopf{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border-bottom:1px solid var(--border)}
.gk-m-kopf>div{text-align:center;padding:8px 4px;font-size:10.5px;font-weight:650;
  text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.gk-m-gitter{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  grid-auto-rows:minmax(112px,1fr)}
.gk-m-zelle{border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:2px 3px 5px;display:flex;flex-direction:column;gap:2px;min-width:0;cursor:pointer}
.gk-m-zelle:nth-child(7n){border-right:0}
.gk-m-gitter>.gk-m-zelle:nth-last-child(-n+7){border-bottom:0}
.gk-m-zelle:hover{background:var(--surface-2)}
.gk-m-zelle.fremd{background:var(--background)}
.gk-m-zelle.fremd .gk-m-zahl{color:var(--text-muted);opacity:.6}
.gk-m-zellkopf{display:flex;justify-content:center;padding-top:2px}
.gk-m-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 7px;border-radius:99px;font-size:12px;font-weight:600;color:var(--text-secondary);
  font-variant-numeric:tabular-nums}
.gk-m-zahl:hover{background:var(--surface-3);text-decoration:none;color:var(--foreground)}
.gk-m-zahl.heute{background:var(--primary);color:#fff}
.gk-m-zahl.heute:hover{background:var(--primary-hover);color:#fff}
.gk-m-liste{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden}
/* Beide Termin-Formen sind Knoepfe, sollen aber nicht wie Knoepfe aussehen —
   die Grundregeln fuer button (blau, Polster, Schatten) muessen weg. */
.gk-m-balken,.gk-m-zeile{display:flex;align-items:center;gap:5px;width:100%;text-align:left;
  border:0;border-radius:4px;padding:2px 6px;font-size:11.5px;box-shadow:none;
  min-width:0;overflow:hidden;line-height:1.4}
.gk-m-balken{background:var(--primary);color:#fff;font-weight:600}
.gk-m-balken:hover{background:var(--primary-hover);box-shadow:none;transform:none}
.gk-m-balken span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gk-m-zeile{background:transparent;color:var(--foreground);font-weight:500}
.gk-m-zeile:hover{background:var(--surface-3);box-shadow:none;transform:none}
.gk-punkt{width:7px;height:7px;border-radius:99px;background:var(--primary);flex-shrink:0}
.gk-m-zeit{color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:11px}
.gk-m-titel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:560}
.gk-mehr{font-size:10.5px;font-weight:640;color:var(--text-muted);padding:1px 7px}
.gk-mehr:hover{color:var(--primary)}

/* --- Tages- und Wochenraster --- */
.gk-zeit{display:flex;flex-direction:column}
.gk-z-kopf,.gk-gz,.gk-gitter{display:grid;grid-template-columns:60px repeat(var(--spalten),minmax(0,1fr))}
.gk-z-kopf{border-bottom:1px solid var(--border)}
.gk-z-ecke{display:flex;align-items:flex-end;justify-content:flex-end;padding:0 8px 5px;
  border-right:1px solid var(--border)}
.gk-z-ecke span{font-size:9.5px;font-weight:600;color:var(--text-muted)}
.gk-z-tag{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px 5px;
  border-right:1px solid var(--border)}
.gk-z-tag:last-of-type{border-right:0}
.gk-z-tag:hover{background:var(--surface-2);text-decoration:none}
.gk-z-wt{font-size:10.5px;font-weight:640;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.gk-z-wt.heute{color:var(--primary)}
.gk-z-zahl{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;
  border-radius:99px;font-size:25px;font-weight:400;color:var(--foreground);font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.gk-z-zahl.heute{background:var(--primary);color:#fff;font-weight:520}
/* Ganztaegig-Streifen: nur so hoch wie noetig, aber nie ganz weg — sonst
   springt die Kopfzeile, sobald ein ganztaegiger Termin dazukommt. */
.gk-gz{border-bottom:1px solid var(--border);min-height:28px;background:var(--surface)}
.gk-gz-rand{border-right:1px solid var(--border)}
.gk-gz-zelle{display:flex;flex-direction:column;gap:2px;padding:3px;
  border-right:1px solid var(--border);min-width:0;cursor:pointer}
.gk-gz-zelle:last-child{border-right:0}
.gk-gz-balken{display:block;width:100%;text-align:left;background:var(--primary);color:#fff;
  border:0;border-radius:4px;padding:2px 7px;font-size:11.5px;font-weight:600;
  box-shadow:none;overflow:hidden}
.gk-gz-balken:hover{background:var(--primary-hover);box-shadow:none;transform:none}
.gk-gz-balken span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Das Stundengitter rollt fuer sich — die Seite soll nicht 1200px lang
   werden, nur weil der Tag 24 Stunden hat. */
.gk-rollen{max-height:min(64vh,660px);overflow-y:auto;background:var(--surface)}
.gk-gitter{position:relative}
.gk-stunden{border-right:1px solid var(--border)}
.gk-stundenlabel{height:var(--stunde);position:relative}
/* Die Beschriftung sitzt UEBER ihrer Linie, wie bei Google. Die 0-Uhr-Zeile
   bleibt leer — dort waere die Zahl halb abgeschnitten. */
.gk-stundenlabel span{position:absolute;top:-7px;right:9px;font-size:10.5px;font-weight:500;
  color:var(--text-muted);font-variant-numeric:tabular-nums;background:var(--surface);padding:0 2px}
.gk-spalte{position:relative;border-right:1px solid var(--border)}
.gk-spalte:last-of-type{border-right:0}
.gk-stunde{display:block;width:100%;height:var(--stunde);background:transparent;box-shadow:none;
  border:0;border-top:1px solid var(--border);border-radius:0;padding:0}
.gk-stunde:first-child{border-top:0}
.gk-stunde:hover{background:var(--surface-3);box-shadow:none;transform:none}
.gk-termin{position:absolute;display:flex;flex-direction:column;gap:1px;
  align-items:flex-start;text-align:left;overflow:hidden;
  background:var(--primary);color:#fff;border:0;
  border-radius:4px;padding:3px 7px;box-shadow:none;font-size:11.5px;line-height:1.25}
.gk-termin:hover{background:var(--primary-hover);box-shadow:var(--s2);transform:none;z-index:3}
.gk-termin b{font-weight:640;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gk-termin span{font-size:10.5px;opacity:.85;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%}
/* Kurze Termine: Titel und Zeit nebeneinander statt uebereinander — bei einem
   Viertelstundentermin (20px hoch) ragten sie sonst aus ihrem Kasten heraus. */
.gk-termin.kurz{flex-direction:row;align-items:baseline;gap:5px;padding:1px 7px;line-height:1.1}
.gk-termin.kurz b{font-size:11px;flex:0 1 auto;min-width:0}
.gk-termin.kurz span{font-size:10px;flex:0 0 auto}
/* Die rote Jetzt-Linie — das eine Element, an dem man einen Kalender sofort
   erkennt. Sitzt ueber der Spalte des heutigen Tages. */
.gk-jetzt{position:absolute;height:0;border-top:2px solid #EA4335;z-index:4;pointer-events:none;
  left:calc(60px + var(--spalte) * ((100% - 60px) / var(--spalten)));
  width:calc((100% - 60px) / var(--spalten))}
.gk-jetzt i{position:absolute;left:-5px;top:-6px;width:11px;height:11px;
  border-radius:99px;background:#EA4335}

/* --- Dialoge --- */
.gk-schalter{display:flex;align-items:center;gap:8px;margin:-4px 0 14px;
  font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer}
.gk-schalter input{width:16px;height:16px;padding:0;margin:0;accent-color:var(--primary)}
.gk-fuss{display:flex;align-items:center;gap:8px}
button.still.gefahr{color:var(--danger)}
button.still.gefahr:hover{background:var(--danger-flaeche)}
button.still.gefahr svg{width:15px;height:15px;margin-right:4px;vertical-align:-2px}

@media (max-width:1100px){
  /* Unter 1100px wandert die linke Spalte ueber die Buehne: nebeneinander
     bliebe fuer sieben Tagesspalten kein brauchbarer Platz mehr. */
  .gk{grid-template-columns:minmax(0,1fr)}
  .gk-seite{position:static;flex-direction:row;align-items:flex-start;gap:24px;flex-wrap:wrap}
  .gk-mini{width:230px}
  .gk-liste{border-top:0;padding-top:0;flex:1 1 200px}
}
@media (max-width:760px){
  .gk-seite{display:none}
  .gk-titel{font-size:17px;margin-left:4px}
  .gk-m-gitter{grid-auto-rows:minmax(74px,1fr)}
  .gk-m-zeit{display:none}
  .gk-z-kopf,.gk-gz,.gk-gitter{grid-template-columns:44px repeat(var(--spalten),minmax(0,1fr))}
  .gk-jetzt{left:calc(44px + var(--spalte) * ((100% - 44px) / var(--spalten)));
    width:calc((100% - 44px) / var(--spalten))}
  .gk-z-zahl{font-size:16px;min-width:28px;height:28px}
}
/* Das Etikett: 3 bis 6 Wörter zum Wiedererkennen. Steht ÜBER dem Hook, weil man
   auf einer Tafel mit zwanzig Kärtchen sucht und nicht liest. */
.id-etikett{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:-4px}
/* ---------- Ideenkarte: der Rest klappt auf ----------
   Zugeklappt reicht Etikett + Hook zum Entscheiden. Ausgeschrieben waren die
   Kästen so hoch, dass in eine Spalte kaum zwei Vorschläge passten. */
.id-karte .id-titel{margin-bottom:2px}
.id-mehr{border-top:1px solid var(--border);padding-top:9px;margin-top:2px}
.id-mehr>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:650;color:var(--text-secondary);
  padding:2px 0;user-select:none;transition:color var(--tempo)}
.id-mehr>summary::-webkit-details-marker{display:none}
.id-mehr>summary:hover{color:var(--foreground)}
/* Eigenes Dreieck statt des Browser-Markers — es dreht sich beim Aufklappen,
   damit der Zustand ohne Text ablesbar ist. */
.id-mehr>summary::before{content:"";width:0;height:0;flex-shrink:0;
  border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform var(--tempo)}
.id-mehr[open]>summary::before{transform:rotate(90deg)}
.id-mehr[open]>summary{margin-bottom:8px}
.id-mehr>*:not(summary){margin-top:10px}
.id-mehr>*:not(summary):first-of-type{margin-top:0}
/* Tastaturbedienung sichtbar machen — summary ist fokussierbar. */
.id-mehr>summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
/* ---------- Ideen-Archiv ----------
   Verworfene bleiben stehen UND erreichbar. Sie stehen optisch zurück (blasser,
   graue Kante), aber als vollwertige Karten — man muss sie lesen können, um zu
   entscheiden, ob eine zurück in den Plan soll. */
.id-archiv-hinweis{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;
  line-height:1.55;color:var(--text-muted);margin:-6px 0 12px}
.id-archiv-hinweis svg{width:15px;height:15px;flex-shrink:0;margin-top:2px}
.id-karte--weg{opacity:.72;box-shadow:inset 3px 0 0 var(--border-stark), var(--s1);
  transition:opacity var(--tempo)}
.id-karte--weg:hover{opacity:1}
.id-karte--weg .id-titel{font-weight:600}

/* ---------- Kanalstand ----------
   Der Stand je Kanal, von Hand eingetragen. Bewusst getrennt von den Summen
   darüber: das eine ist, was unsere erfassten Videos gebracht haben, das
   andere der Kanal inklusive allem davor. */
.ks-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.ks-kanal{padding:13px 15px;border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--border);display:flex;flex-direction:column;gap:7px;min-width:0}
.ks-kopf{display:flex;flex-direction:column;gap:1px;padding-bottom:6px;
  border-bottom:1px solid var(--border)}
.ks-kopf strong{font-size:13.5px;font-weight:650}
.ks-zeile{display:flex;align-items:baseline;gap:8px;font-size:12.5px}
.ks-zeile span{color:var(--text-secondary);flex:1;min-width:0}
.ks-zeile b{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
/* Die Veränderung ist die eigentliche Aussage — nicht „4.210 Abos", sondern
   „+310 seit letzter Woche". Darum steht sie direkt an der Zahl. */
.ks-delta,.ks-gleich{font-style:normal;font-size:11px;font-weight:700;
  padding:1px 6px;border-radius:99px;white-space:nowrap}
.ks-delta.auf{background:var(--success-flaeche);color:var(--success)}
.ks-delta.ab{background:var(--danger-flaeche);color:var(--danger)}
.ks-gleich{background:var(--surface-3);color:var(--text-muted)}

/* ---------- Zentrale ----------
   Die Startseite läuft ab dem 27.07. im selben System wie CRM, Buchhaltung und
   Content: .karte mit .karte-kopf, .sub darunter, „öffnen →" als .caption
   rechts im Kopf. Vorher hatte sie ein eigenes Vokabular (.card, .tile, .row
   aus style.css) und Emoji als Überschriften — sie sah aus wie eine andere
   Anwendung als die Bereiche, in die sie führt.

   Bewusst KEINE .kacheln-Reihe wie in den Bereichen selbst. Eine Kachel zeigt
   eine grosse Zahl ohne Zusammenhang; auf einer Übersicht über Übersichten
   sagt die Zahl allein nichts, erst die drei Zeilen darunter machen sie
   lesbar. Genau daran sind die fünf Kacheln gescheitert, die hier standen —
   sie wiederholten nur, was in der Karte darunter ohnehin stand. */
.zt-tasten{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.zt-tasten form{margin:0}
/* Auf dem Telefon stehen vier Knöpfe untereinander und schieben die erste
   Karte fast zweihundert Pixel nach unten — auf einer Übersichtsseite ist das
   die halbe sichtbare Fläche für Knöpfe, die man selten braucht. Zwei nebenein-
   ander, gleich breit: halbe Höhe, und die Trefferflächen werden eher größer. */
@media (max-width:560px){
  .zt-tasten{width:100%}
  .zt-tasten > *{flex:1 1 calc(50% - 4px)}
  .zt-tasten form button,.zt-tasten > .knopf{width:100%;justify-content:center}
}
.zt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.zt-raster .karte,.zt-raster .karte+.karte{margin:0}
/* In einer 310px breiten Karte bricht "öffnen →" sonst zwischen Wort und Pfeil
   um und steht zweizeilig neben der Überschrift. */
.zt-raster .karte-kopf > a.caption{white-space:nowrap}

/* Beschriftung links, Zahl rechts. Tabellenziffern, damit die Zahlen über
   mehrere Zeilen und über mehrere Karten hinweg untereinander stehen. */
.zt-liste{display:flex;flex-direction:column}
.zt-zeile{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.zt-zeile:first-child{padding-top:0}
.zt-zeile:last-child{border-bottom:0;padding-bottom:0}
.zt-zeile > span:first-child{color:var(--text-secondary);min-width:0}
.zt-wert{font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.zt-wert.gross{font-size:16px;font-weight:700;letter-spacing:-.02em}
.zt-wert .zt-ziel{font-weight:500;color:var(--text-muted)}
.zt-zeile.warnt > span:first-child{color:var(--danger)}
.zt-zeile.warnt .zt-wert{color:var(--danger)}
.zt-fuss{margin-top:13px;padding-top:11px;border-top:1px solid var(--border)}
.zt-leer{padding:6px 0 2px}

/* Der Kartenkopf des Kalenders trägt die Tagesnavigation da, wo sonst der
   „öffnen →"-Link steht — beides nebeneinander in .zt-kopf-rechts. */
.zt-kopf-rechts{display:flex;align-items:center;gap:12px;flex-shrink:0}
.zt-nav{display:inline-flex;gap:4px}
.zt-nav button{width:27px;height:27px;padding:0;border-radius:8px;box-shadow:none;
  background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border);
  display:grid;place-items:center}
.zt-nav button:hover{background:var(--surface-3);color:var(--foreground);box-shadow:none}
.zt-nav svg{width:14px;height:14px}

/* Termine: die Uhrzeit bekommt eine eigene Spalte. Fett im Fliesstext ("09:00
   Wochenstart mit Lukas") liest sich als ein Satz — untereinander stehende
   Uhrzeiten liest man als Tagesablauf. */
/* 62px: breit genug fuer "ganztägig" in Versalien. Bei 54px lief das Wort aus
   seiner Spalte heraus und klebte am Titel des Termins. */
.zt-termin{display:grid;grid-template-columns:62px 1fr;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.zt-termin:first-child{padding-top:0}
.zt-termin:last-child{border-bottom:0;padding-bottom:0}
.zt-termin-zeit{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.zt-termin-zeit.ganz{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--text-muted)}
.zt-termin-ort{display:block;font-size:12px;color:var(--text-muted);margin-top:2px}
.zt-frei{display:flex;flex-direction:column;align-items:center;gap:7px;padding:22px 0 18px;
  text-align:center}
.zt-frei svg{width:22px;height:22px;color:var(--text-muted)}

/* ---------- Zentrale: Geld und Ausblick ----------
   Umsatz, Entwicklung und Forecast — dieselben Grössen wie im CRM-Dashboard
   und aus derselben Rechnung (lib/crm.js zentraleZahlen, Abschlusschancen aus
   lib/pipeline-quoten.js). Auch dieselben Bauteile: .forecast, .kennliste,
   .chart-* werden hier wiederverwendet, nicht nachgebaut.

   Bewusst NICHT identisch angeordnet. Im CRM steht die Umsatzzahl in der
   Mitte zwischen Kurve und Forecast; hier steht sie links und trägt die Reihe.
   Und rechts neben ihr steht nicht das Monatsziel, sondern der Umsatz
   INSGESAMT — auf einer Startseite ist "was haben wir bisher gemacht" die
   zweite Frage nach "was haben wir diesen Monat gemacht". Wer beide Seiten
   kennt, erkennt die Familie und merkt trotzdem sofort, wo er ist. */
.zt-geld{display:grid;grid-template-columns:1fr 1.35fr .9fr;gap:16px;margin-bottom:16px;
  align-items:stretch}
.zt-geld .karte{margin:0}

/* Mittig, waagerecht wie senkrecht. Die Karte steht neben einer 200px hohen
   Kurve und wird auf deren Höhe gestreckt — oben angeschlagen sass der Inhalt
   im oberen Drittel und darunter klaffte die halbe Karte leer. Zentriert wird
   die freie Fläche zum Rahmen um die Zahl, statt zum Loch darunter.
   Deshalb hier auch text-align:center: eine Zahl, die mittig in ihrem Kasten
   steht, aber linksbündig gesetzt ist, sieht aus wie verrutscht. */
.zt-umsatz{display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;gap:22px}
.zt-umsatz-haupt{display:flex;flex-direction:column;align-items:center;gap:3px}
/* Zwei Beschriftungen nebeneinander lesen sich sonst als ein Satz
   ("6 Abschlüsse Juni ohne Umsatz"). */
.zt-punkt::before{content:"·";margin-right:9px;color:var(--text-muted)}
/* clamp statt fester Groesse: Bei 25.300 € passt 40px, bei 1.284.900 € nicht
   mehr — und eine umbrechende Umsatzzahl sieht aus wie ein Fehler. */
.zt-umsatz-zahl{font-size:clamp(26px,3.1vw,40px);font-weight:700;letter-spacing:-.035em;
  line-height:1.05;font-variant-numeric:tabular-nums}
.zt-umsatz-fuss{display:flex;align-items:center;justify-content:center;gap:9px;
  flex-wrap:wrap;margin-top:5px}
/* Die Trennlinie geht über die volle Kartenbreite, der Inhalt darunter steht
   in zwei gleich breiten Spalten — so sitzt "Insgesamt" symmetrisch zur
   grossen Zahl darüber und nicht irgendwo rechts. */
.zt-umsatz-seite{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;
  border-top:1px solid var(--border);padding-top:16px}
.zt-umsatz-neben{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.zt-umsatz-neben-zahl{font-size:18px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
/* "Insgesamt" ist die zweitwichtigste Zahl der Karte und bekommt darum die
   volle Textfarbe, während der Vormonat zurücktritt. */
.zt-umsatz-neben.stark .zt-umsatz-neben-zahl{color:var(--foreground)}
.zt-umsatz-neben:not(.stark) .zt-umsatz-neben-zahl{color:var(--text-secondary)}

.zt-kurve .chart-achse{padding-left:0}
.zt-vorn{display:flex;flex-direction:column}
.zt-vorn .kennliste{margin-top:14px}

/* Unter 1200px wird die dreispaltige Reihe zu schmal: die Umsatzzahl schrumpft
   auf Fussnotengroesse und die Kurve hat weniger Breite als Beschriftung.
   Dann Kurve über die volle Breite, Umsatz und Ausblick darunter nebeneinander. */
@media (max-width:1200px){
  .zt-geld{grid-template-columns:1fr 1fr}
  .zt-kurve{grid-column:1/-1;order:-1}
}
/* Einspaltig gilt das Vorziehen der Kurve NICHT mehr: untereinander ist die
   Umsatzzahl die Überschrift der Reihe und muss zuerst kommen. Nebeneinander
   war sie nur nach oben gerückt, weil eine Kurve über zwei Spalten besser
   aussieht als eine Zahl über zwei Spalten. */
@media (max-width:760px){
  .zt-geld{grid-template-columns:1fr}
  .zt-kurve{order:0}
  .zt-umsatz-seite{grid-template-columns:1fr 1fr}
}
/* Zwölf Monatskürzel auf Telefonbreite ergeben "AugSepOktNov…" — ohne Lücke
   gelesen ist das keine Achse mehr. Jedes zweite bleibt stehen; die Kurve
   bleibt lesbar, weil die Punkte ohnehin sichtbar sind. */
@media (max-width:560px){
  .zt-kurve .chart-achse span:nth-child(2n){visibility:hidden}
}

/* ---------- To-Do-Seite ----------
   Die Zeilen selbst sind .todo-* aus dem CRM (dieselbe Tabelle, dieselbe
   Darstellung). Hier steht nur, was die Seite darum herum braucht. */
.td-block{margin-bottom:16px}
.td-block:last-child{margin-bottom:0}
/* Überfällig trägt einen roten Rand statt einer roten Fläche: die Karte bleibt
   lesbar, die Dringlichkeit steht trotzdem sofort im Bild. */
/* ---------- Notizfeld der Kundenakte ----------
   Ein grosses, freies Feld. Zeilenhöhe wie Fliesstext, nicht wie ein
   Eingabefeld: hier stehen Sätze und Absätze, keine Stichwörter.
   Senkrecht vergrösserbar, waagerecht nicht — sonst zieht man es aus der
   Karte heraus. */
/* Kopfzeile der Akte: links zurück, rechts Speichern. Der Knopf steht oben,
   weil man ihn dort sucht — und noch einmal unten in der klebenden Leiste,
   weil die Akte länger ist als jeder Bildschirm. Beide hängen am selben
   Formular, es ist derselbe Vorgang. */
.akte-leiste-oben{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:6px}
.akte-leiste-oben .akte-zurueck{margin:0}
.akte-speichern-oben{display:flex;align-items:center;gap:12px}
/* Solange nichts geändert wurde, ist der Knopf ruhig; danach hebt er sich ab. */
#speichern-oben{transition:box-shadow var(--tempo),transform var(--tempo)}
#speichern-oben.wartet{box-shadow:0 0 0 3px var(--warning-flaeche), var(--s2)}

/* Speicherleiste der Kundenakte — klebt unten, erscheint nur bei Änderungen.
   Die Akte ist länger als jeder Bildschirm; ein fester Knopf am Seitenanfang
   oder -ende wäre je nach Scrollposition unerreichbar. */
.akte-speicherleiste{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;
  gap:12px;margin:16px 0 0;padding:12px 16px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--border-stark);box-shadow:var(--s3)}
.akte-speicherleiste[hidden]{display:none}
.akte-speicher-text{flex:1;font-size:13.5px;font-weight:600}
/* Der Punkt davor sagt „hier liegt etwas an", ohne dass es eine Warnung wäre. */
.akte-speicher-text::before{content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--warning);margin-right:9px;vertical-align:1px}
@media (max-width:560px){
  .akte-speicherleiste{flex-wrap:wrap}
  .akte-speicher-text{flex:1 0 100%}
  .akte-speicherleiste button{flex:1}
}

.akte-notizen{margin-bottom:16px}
.akte-notizen textarea{width:100%;min-height:150px;resize:vertical;line-height:1.6;
  font:inherit;font-size:14px;padding:12px 14px}
.akte-notizen-fuss{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:12px;flex-wrap:wrap}

/* ---------- Sparten-Farben auf den To-Do-Karten ----------
   Webdesign blau, Performance Marketing orange, KI-Projekte weinrot. Die Sparte
   steht nicht an der Aufgabe, sondern am Kunden (sein Tag, sonst die Sparte
   seines jüngsten Deals) — siehe die Abfrage in lib/crm.js.

   Getragen wird die Farbe von einem linken Streifen über einen Innenschatten,
   nicht von einer eingefärbten Fläche: Die Karten stehen zu viert nebeneinander
   in schmalen Spalten, und drei verschiedene Füllfarben nebeneinander machen die
   Tafel unruhig, ohne dass man schneller findet, was man sucht. Der Streifen
   ordnet zu, sobald man ihn kennt, und tritt zurück, wenn man ihn nicht braucht.

   Bewusst per inset-Schatten und nicht per border-left: ein dicker farbiger Rand
   an einer Karte ist ein Muster, das man aus jedem Baukasten kennt. Der
   Innenschatten sitzt in der Kante der Karte statt daneben. */
/* WICHTIG — die Selektoren müssen body.crm-dashboard-design mitnehmen.
   Sonst gewinnt die Regel „body.crm-dashboard-design .heute-todo" weiter oben
   (Spezifität 0,2,1 gegen 0,2,0) und der farbige Streifen kommt nie an. Genau
   daran ist der erste Anlauf am 28.07. gescheitert: Die Klasse stand auf der
   Karte, die Regel stand im Blatt — und trotzdem war nichts zu sehen.

   Die Farbe steckt in einer eigenen Variablen je Karte, damit Grundzustand,
   Überfahren und beide Themen dieselbe Farbe benutzen und nicht dreimal
   dasselbe dastehen muss. */
.heute-todo.sp-webdesign{--sp:var(--sp-webdesign)}
.heute-todo.sp-performance{--sp:var(--sp-performance)}
.heute-todo.sp-ki{--sp:var(--sp-ki)}

.heute-todo.sp-webdesign,.heute-todo.sp-performance,.heute-todo.sp-ki,
body.crm-dashboard-design .heute-todo.sp-webdesign,
body.crm-dashboard-design .heute-todo.sp-performance,
body.crm-dashboard-design .heute-todo.sp-ki{
  box-shadow:inset 4px 0 0 var(--sp), inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(20,22,26,.05), 0 8px 20px -12px rgba(20,22,26,.22)}
.heute-todo.sp-webdesign:hover,.heute-todo.sp-performance:hover,.heute-todo.sp-ki:hover,
body.crm-dashboard-design .heute-todo.sp-webdesign:hover,
body.crm-dashboard-design .heute-todo.sp-performance:hover,
body.crm-dashboard-design .heute-todo.sp-ki:hover{
  box-shadow:inset 4px 0 0 var(--sp), inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 26px -8px rgba(20,22,26,.26)}
/* Im Weiss-Modus wird der Schatten flach gesetzt — der Streifen muss auch dort
   mit, sonst verschwindet er ausgerechnet in der hellsten Ansicht. */
:root[data-weiss="1"] body.crm-dashboard-design .heute-todo.sp-webdesign,
:root[data-weiss="1"] body.crm-dashboard-design .heute-todo.sp-performance,
:root[data-weiss="1"] body.crm-dashboard-design .heute-todo.sp-ki{
  box-shadow:inset 4px 0 0 var(--sp), var(--s1)}
/* Die Titelzeile darf nicht mitfärben, wenn die Karte beim Überfahren die
   Sparten-Farbe annimmt — sonst springt der Text. */
.heute-todo .heute-todo-titel{color:var(--foreground)}

/* Das Abzeichen im Detailfenster nennt die Sparte beim Namen. */
.badge.sp-abzeichen{color:#fff}
.badge.sp-abzeichen.sp-webdesign{background:var(--sp-webdesign)}
.badge.sp-abzeichen.sp-performance{background:var(--sp-performance)}
.badge.sp-abzeichen.sp-ki{background:var(--sp-ki)}

/* Notizfeld im To-Do-Formular der Kundenakte — nimmt die volle Zeile, weil
   dort ganze Sätze stehen und keine Stichwörter. */
.akte-todo-notiz{flex:1 1 100%}

.td-block.td-spaet{border-color:var(--danger)}
.td-notiz{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}

/* Die Tafel: dieselben vier Wichtigkeits-Spalten wie im CRM-Dashboard, aber
   grösser. Dort ist sie eine Karte unter vielen auf einer vollen Seite; hier
   ist sie der Hauptgegenstand und darf den Platz nehmen. Grössere Spaltenköpfe,
   höhere Karten, lesbare Titel statt Kleinstschrift. */
.td-tafel{margin-bottom:16px}
.td-spalten{gap:14px}
.td-spalten .heute-spalte{gap:10px;padding:4px;border-radius:12px;min-height:120px}
.td-spalten .heute-spalte-kopf{font-size:11.5px;letter-spacing:.04em;padding-bottom:9px;
  min-height:0;color:var(--text-secondary)}
.td-karte{padding:13px 14px;border-radius:12px;gap:11px}
.td-karte .heute-todo-titel{font-size:14px;line-height:1.32}
.td-karte .heute-todo-kunde{font-size:11.5px;margin:3px 0 8px}
.td-karte .badge.dring{font-size:9.5px;padding:2px 9px}
.td-karte .badge.dring + .badge.dring{margin-left:5px}
.td-karte .todo-haken{width:23px;height:23px}
.td-karte .todo-haken svg{width:13px;height:13px}
/* Eine leere Spalte braucht trotzdem eine Ablagefläche, sonst kann man nichts
   hineinziehen. Der Strich hält sie offen. */
.td-spalte-leer{text-align:center;padding:16px 0;color:var(--text-muted)}
@media (max-width:900px){
  .td-spalten{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .td-spalten{grid-template-columns:1fr}
  .td-spalten .heute-spalte{min-height:0}
}

/* ---------------------------------------- Dokumente in der Kundenakte
   Zwei Listen unter einer Ablage: Rechnungen (liegen in der Buchhaltung)
   und Unterlagen (liegen nur hier). Getrennt, weil man mit ihnen
   Verschiedenes tut — die einen hakt man ab, die anderen liest man nach. */
.dok-titel{margin:16px 0 8px;font-size:13px;font-weight:700;
  display:flex;align-items:baseline;gap:6px}
.dok-titel .caption{font-weight:400}
.dok-liste{display:flex;flex-direction:column;gap:2px}
.dok-zeile{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--surface)}
.dok-zeile:hover{border-color:var(--border-stark)}
.dok-name{display:flex;align-items:center;gap:8px;min-width:0;flex:1;
  color:inherit;text-decoration:none;font-weight:600;font-size:13px}
.dok-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok-name svg{width:16px;height:16px;flex:none;opacity:.55}
.dok-name:hover{text-decoration:underline}
.dok-meta{font-size:12px;color:var(--text-muted);flex:none;white-space:nowrap}
.dok-weg{flex:none;display:flex}
.dok-weg button{padding:4px}
.dok-weg svg{width:14px;height:14px}
@media (max-width:600px){
  .dok-zeile{flex-wrap:wrap}
  .dok-name{flex:1 1 100%}
}

/* „Verloren" ist kein Knopf, den man aus Versehen trifft: still im Kopf,
   rot erst beim Darüberfahren. */
.verloren-knopf{color:var(--text-muted)}
.verloren-knopf:hover{color:var(--danger);background:var(--danger-flaeche)}
.verloren-knopf svg{width:15px;height:15px}

/* Retainer-Stand: wie viele Monatsbeiträge eingegangen sind.
   Die Punkte zeigen auf einen Blick, wo der Vertrag steht — eine Zahl
   allein sagt nicht, ob 2 von 3 viel oder wenig ist. */
.retainer-spur{display:flex;margin-top:7px;gap:4px;flex:none}
.retainer-spur i{width:22px;height:7px;border-radius:4px;background:var(--border-stark);opacity:.45}
.retainer-spur i.voll{background:var(--success);opacity:1}


/* Der Zähler mit − und +: die häufigste Handlung ist „einen Monat weiter",
   und die soll ein Klick sein, kein Aufklappen einer Liste. */
.retainer-feld{margin-bottom:14px}
.retainer-zeile{display:flex;align-items:stretch;gap:6px}
.retainer-zeile select{flex:1;min-width:0}
.retainer-knopf{flex:none;width:38px;font-size:18px;line-height:1;font-weight:600;
  border:1px solid var(--border);background:var(--surface);border-radius:9px;
  color:var(--text-secondary);cursor:pointer;transition:all var(--tempo,.15s)}
.retainer-knopf:hover{background:var(--surface-2);border-color:var(--border-stark);color:var(--foreground)}
.retainer-knopf:active{transform:scale(.94)}
.retainer-feld .caption{display:block;margin-top:4px}

/* ------------------------------------------- Umsatz aufgeschlüsselt (/umsatz)
   Ein Kasten je Monat, neuester oben, darunter die Kunden, die ihn ausmachen.
   Jede Zeile führt in die Kundenakte — von der Zahl zum Beleg in einem Klick. */
.um-summe{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.um-summe > div{padding:14px 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--s1)}
.um-summe b{display:block;font-size:24px;font-weight:700;margin:3px 0 1px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.um-monat{margin-bottom:14px;padding:0;overflow:hidden}
/* Der laufende Monat bekommt eine Kante — er ist der einzige, der sich noch
   ändert, und genau den sucht man beim Öffnen der Seite. */
.um-monat.jetzt{border-color:var(--primary)}
.um-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.um-kopf h2{margin:0;font-size:16px}
.um-kopf-titel .caption{display:block;margin-top:2px}
.um-kopf-zahl{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;white-space:nowrap}

.um-liste{display:flex;flex-direction:column}
.um-zeile{display:flex;align-items:center;gap:14px;padding:11px 18px;
  color:inherit;text-decoration:none;border-bottom:1px solid var(--border);
  transition:background var(--tempo,.15s)}
.um-zeile:last-child{border-bottom:0}
.um-zeile:hover{background:var(--surface-2)}
.um-tag{flex:none;width:48px;font-size:12px;color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.um-name{flex:1;min-width:0;font-weight:600;font-size:13.5px}
.um-name i{display:block;font-style:normal;font-weight:400;font-size:12px;
  color:var(--text-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-stand{flex:none}
.um-wert{flex:none;width:110px;text-align:right;font-weight:700;font-size:14px;
  font-variant-numeric:tabular-nums}

/* Der Umsatzkasten auf der Zentrale ist jetzt ein Link. */
a.zt-umsatz{color:inherit;text-decoration:none;display:flex}
a.zt-umsatz:hover{border-color:var(--border-stark)}

@media (max-width:760px){
  .um-summe{grid-template-columns:1fr}
  .um-zeile{flex-wrap:wrap;gap:8px 12px}
  .um-name{flex:1 1 60%}
  .um-wert{width:auto;margin-left:auto}
}

/* Auf der Pipeline-Karte: wer betreut, und daneben — falls abweichend — wer
   den Kunden geholt hat. Nur bei Abweichung, sonst stünde zweimal dasselbe. */
.deal-werber{font-style:normal;font-size:11px;opacity:.6;margin-left:5px;font-weight:500}

/* Cold-Calling-Liste: eigene Liste oder Team. Nur für die Geschäftsführung —
   für alle anderen gibt es nichts umzuschalten. */
.wer-schalter{display:inline-flex;gap:2px;padding:2px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);margin-left:auto}
.wer-schalter a{padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;
  color:var(--text-muted);text-decoration:none;white-space:nowrap}
.wer-schalter a.aktiv{background:var(--surface);color:var(--foreground);box-shadow:var(--s1)}
.wer-schalter a:hover:not(.aktiv){color:var(--foreground)}
.anruf-stat-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Mehrfachauswahl in der Cold-Calling-Liste (05.08.).
   Anlass: Nach einem Import mit der falschen Vorauswahl standen 107 Leads mit
   der falschen Branche da. Einzeln umzustellen heisst 107 Mal klicken — das
   macht niemand, und die Liste bleibt falsch. */
.sammel-tipp{margin:0 0 8px}
.anruf-zeile.gewaehlt>td{background:var(--auswahl-bg,rgba(59,130,246,.10))}
.anruf-zeile.gewaehlt>td:first-child{box-shadow:inset 3px 0 0 var(--auswahl-rand,#3B82F6)}
/* Waehrend des Ziehens keine Textmarkierung — sonst faerbt sich beim Ziehen
   ueber die Zeilen der halbe Bildschirm blau. */
body.zieht-aus{user-select:none;-webkit-user-select:none}
.wer-schalter{flex-wrap:wrap}

/* Die Leiste liegt fest ueber dem Inhalt statt unter der Tabelle: Bei 200
   Zeilen muesste man sonst ans Ende scrollen, um die Auswahl anzuwenden. */
.sammel-leiste{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:12px 16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.35)}
.sammel-leiste[hidden]{display:none}
.sammel-leiste label{display:flex;flex-direction:column;gap:4px;
  font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.sammel-leiste select{font-size:13px}
.sammel-zahl{font-size:13.5px;color:var(--text-secondary);align-self:center;white-space:nowrap}
.sammel-zahl b{font-size:17px;color:var(--foreground);margin-right:3px}
.sammel-hinweis{font-size:12.5px;align-self:center;color:var(--text-secondary);max-width:230px}
.sammel-hinweis.fehler{color:var(--danger);font-weight:600}
.sammel-hinweis.erfolg{color:var(--success);font-weight:600}
@media (max-width:760px){
  .sammel-leiste{left:10px;right:10px;transform:none;bottom:10px}
  .sammel-leiste label{flex:1 1 130px}
}

/* Listenwahl im Dialog "Neuer Lead" (19.08.2026).
   Ein Kombifeld: tippen legt eine neue Liste an, Klick waehlt eine bestehende
   und haengt die Leads dort an. Vorher entstand bei jedem Upload zwingend eine
   neue Liste — nach fuenf Anlaeufen standen fuenf gleichnamige im Filter. */
.ln-listenwahl{position:relative}
.ln-listenwahl>input{width:100%;padding-right:36px}
.ln-listen-auf{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;padding:6px 8px;line-height:1;
  font-size:15px;color:var(--text-secondary);border-radius:6px}
.ln-listen-auf:hover{color:var(--foreground);background:var(--surface-2)}
.ln-listen-menu{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 5px);
  max-height:244px;overflow-y:auto;padding:5px;
  background:var(--surface);border:1px solid var(--border);border-radius:11px;
  box-shadow:0 12px 32px rgba(15,27,45,.16)}
.ln-listen-menu button{display:flex;align-items:baseline;gap:8px;width:100%;
  text-align:left;background:none;border:0;cursor:pointer;font:inherit;
  color:var(--foreground);padding:8px 10px;border-radius:8px}
.ln-listen-menu button:hover,.ln-listen-menu button:focus-visible{background:var(--surface-2)}
.ln-listen-menu button.mark{background:var(--primary-soft);font-weight:600}
.ln-listen-menu .zahl{margin-left:auto;flex:none;font-size:12px;color:var(--text-muted)}
.ln-listen-menu .leer{padding:9px 10px;font-size:13px;color:var(--text-muted)}