:root{ --bg:#f0f4f0;--surface:#fff;--surface2:#e8efe8;--border:#d0dcd0; --green:#1a7a1a;--green-dim:rgba(26,122,26,0.1);--green-dark:#1a3a1a; --amber:#b86a00;--amber-dim:rgba(184,106,0,0.1); --red:#c02020;--red-dim:rgba(192,32,32,0.1); --blue:#1a4a8a;--blue-dim:rgba(26,74,138,0.1); --purple:#6a1a8a;--purple-dim:rgba(106,26,138,0.1); --muted:#7a9a7a;--text:#111; /* ── Marken-Paletten je Gesellschaft (aus Logo extrahiert; 1=hell … 5=dunkel/Text) ── */ --gl-1:#b4d067;--gl-2:#98be52;--gl-3:#7fb045;--gl-4:#5c8139;--gl-5:#4a6231; /* GL · 3=Primär */ --ht-1:#fabc44;--ht-2:#c3a95d;--ht-3:#5e7c6a;--ht-4:#0e4f58;--ht-5:#003041; /* HT · 1=Primär/Amber · 4=Petrol */ --hd-1:#e2042f;--hd-2:#ce0e3e;--hd-3:#b2144f;--hd-4:#9a145a;--hd-5:#7c1363; /* HD · 1=Primär/Rot */ --wf-1:#94c23d;--wf-2:#ffffff;--wf-3:#878787;--wf-4:#5b5c5b;--wf-5:#1a1a1a; /* WF · 1=Primär/Grün · 5=Anthrazit */ --hg-1:#c7dcc3;--hg-2:#9dbf98;--hg-3:#77a473;--hg-4:#557d52;--hg-5:#33502f; /* HG · 3=Primär/Salbei */ --sans:system-ui,-apple-system,sans-serif; } /* ── Entitäts-Akzent: schaltet je aktiver Gesellschaft (data-company am ) ── --ent = Primärfarbe (Strips/Rahmen auf hell) · --ent-ink = dunkel/lesbar (Überschriften) --ent-bright = hell/vivid (auf dunkler Kopfzeile, z.B. aktiver Nav-Tab) */ body{--ent:var(--gl-3);--ent-ink:var(--gl-5);--ent-bright:var(--gl-2)} body[data-company="gl"] {--ent:var(--gl-3);--ent-ink:var(--gl-5);--ent-bright:var(--gl-2)} body[data-company="ht"] {--ent:var(--ht-1);--ent-ink:var(--ht-5);--ent-bright:var(--ht-1)} body[data-company="dach"] {--ent:var(--hd-5);--ent-ink:var(--hd-5);--ent-bright:var(--hd-3)} /* Violett statt Karmin (Erik 2026-07-06): Rot kollidiert semantisch mit der Ampel */ body[data-company="wf"] {--ent:var(--wf-1);--ent-ink:var(--wf-5);--ent-bright:var(--wf-1)} body[data-company="gruppe"]{--ent:var(--hg-3);--ent-ink:var(--hg-5);--ent-bright:var(--hg-2)} *{box-sizing:border-box;margin:0;padding:0;font-family:var(--sans)} body{background:var(--bg);color:var(--text);font-size:14px;min-height:100vh} /* ── LOGIN ── */ #login-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:20px;background:var(--green-dark)} .login-box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:32px 40px;width:340px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 40px rgba(0,0,0,0.3)} .login-box label{font-size:10px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:3px;display:block;font-weight:700} .login-box input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 14px;color:var(--text);font-size:13px;outline:none;transition:border-color 0.2s} .login-box input:focus{border-color:var(--green)} #login-error{color:var(--red);font-size:12px;text-align:center;display:none} .btn-primary{background:var(--green);color:#fff;border:none;border-radius:6px;padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:opacity 0.2s} .btn-primary:hover{opacity:0.88} /* ── HEADER ── */ #dashboard{display:none} header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:4px solid var(--ent,var(--green));position:sticky;top:0;background:var(--green-dark);z-index:100} .header-left{display:flex;align-items:center;gap:10px} .header-right{display:flex;align-items:center;gap:6px} .header-sub{font-size:11px;color:rgba(255,255,255,0.45);border-left:1px solid rgba(255,255,255,0.15);padding-left:10px} #status-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.3);display:inline-block;transition:background 0.3s} #status-dot.loading{background:var(--amber);animation:pulse 1s infinite} #status-dot.ok{background:#4ecf4e} #status-dot.error{background:var(--red)} @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.3}} #last-updated{font-size:11px;color:rgba(255,255,255,0.35)} .btn-sm{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);border-radius:5px;padding:5px 11px;color:rgba(255,255,255,0.7);font-size:11px;font-weight:500;cursor:pointer;transition:background 0.15s;white-space:nowrap} .btn-sm:hover{background:rgba(255,255,255,0.18)} .profile-chip{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.08);border-radius:20px;padding:3px 10px 3px 4px;cursor:pointer;border:0.5px solid rgba(255,255,255,0.15);transition:background 0.15s;position:relative} .profile-chip:hover{background:rgba(255,255,255,0.14)} .profile-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,0.3);flex-shrink:0} .profile-avatar-fb{width:24px;height:24px;border-radius:50%;background:#2d6b3a;display:flex;align-items:center;justify-content:center;color:#7ec9a0;font-weight:700;font-size:10px;border:1.5px solid rgba(255,255,255,0.2);flex-shrink:0} .profile-name{font-size:11px;color:rgba(255,255,255,0.85);font-weight:500} .btn-report{background:#4caf82;border:none;border-radius:5px;padding:5px 12px;color:#0d2318;font-size:11px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background 0.15s;white-space:nowrap} .btn-report:hover{background:#5dc994} .btn-report svg{flex-shrink:0} /* ── REPORT MODAL ── */ #report-select-overlay,#report-loading-overlay,#report-result-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.52);z-index:400;align-items:center;justify-content:center} #report-select-overlay.open,#report-loading-overlay.open,#report-result-overlay.open{display:flex} .report-modal{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.18)} .report-mhdr{background:var(--green-dark);padding:14px 18px;display:flex;align-items:center;justify-content:space-between} .report-mhdr-title{color:#fff;font-size:14px;font-weight:700} .report-mhdr-sub{color:rgba(255,255,255,0.45);font-size:11px;margin-top:2px} .report-mclose{background:transparent;border:none;color:rgba(255,255,255,0.5);font-size:20px;cursor:pointer;line-height:1;padding:0} .r-opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px} .r-opt{border:1px solid var(--border);border-radius:8px;padding:12px 14px;cursor:pointer;transition:all 0.15s;background:#fff} .r-opt:hover{border-color:var(--green);background:var(--green-dim)} .r-opt.sel{border-color:var(--green);border-width:2px;background:var(--green-dim)} .r-opt-title{font-size:13px;font-weight:700;color:#111;margin-bottom:2px} .r-opt-desc{font-size:11px;color:var(--muted);line-height:1.4} .report-gen-btn{width:100%;background:var(--green);color:#fff;border:none;border-radius:7px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;transition:opacity 0.15s} .report-gen-btn:hover{opacity:0.88} .report-spin{width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 14px} .rpt-section{margin-bottom:18px} .rpt-section-title{font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);border-bottom:1px solid var(--green-dim);padding-bottom:4px;margin-bottom:10px} .rpt-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px} .rpt-kpi{background:var(--bg);border-radius:6px;padding:8px 10px} .rpt-kpi-label{font-size:10px;color:var(--muted);margin-bottom:2px} .rpt-kpi-val{font-size:15px;font-weight:700;color:#000} .rpt-kpi-delta{font-size:10px;color:var(--green)} .rpt-risk{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:0.5px solid var(--border)} .rpt-risk:last-child{border-bottom:none} .rpt-risk-dot{width:7px;height:7px;border-radius:50%;margin-top:5px;flex-shrink:0} .rpt-risk-text{font-size:12px;color:#333;line-height:1.55} .rpt-rec{display:flex;align-items:flex-start;gap:8px;padding:5px 0} .rpt-rec-num{width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .rpt-rec-text{font-size:12px;color:#333;line-height:1.55} .rpt-ai-box{background:var(--bg);border-radius:8px;padding:14px 16px;font-size:13px;line-height:1.7;color:var(--text);min-height:80px} .rpt-footer{border-top:1px solid var(--border);padding:12px 20px;display:flex;justify-content:space-between;align-items:center;background:#fafcfa} .rpt-pdf-btn{background:var(--green);color:#fff;border:none;border-radius:7px;padding:8px 18px;font-size:12px;font-weight:700;cursor:pointer;transition:opacity 0.15s} .rpt-pdf-btn:hover{opacity:0.88} /* ── NAV TABS ── */ .nav-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,0.1);padding:0 20px;background:var(--green-dark);overflow-x:auto;overflow-y:hidden;gap:2px} .nav-tab{padding:9px 15px;font-size:11px;font-weight:500;color:rgba(255,255,255,0.45);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all 0.15s} .nav-tab:hover{color:rgba(255,255,255,0.8)} .nav-tab.active{color:#fff;border-bottom-color:var(--ent-bright,#4ecf4e);font-weight:700} /* ── SECTIONS ── */ .section{display:none;padding:20px 24px;max-width:1600px;margin:0 auto} /* Nur der GL-Montage-Reiter nutzt die breitere Ansicht (DC+AC nebeneinander); alle anderen Reiter bleiben 1600px (Erik 2026-07-01) */ #sec-montage2{max-width:1850px} /* Cockpit 6.0: 4. Spalte (senkrechte Zielstellungs-Säule) braucht Platz (Erik 2026-07-03) */ #sec-cockpit6{max-width:1850px} .section.active{display:block} /* ── KPI CARDS ── */ .kpi-row{display:grid;gap:10px;margin-bottom:16px} .kpi-5{grid-template-columns:repeat(5,minmax(0,1fr))} .kpi-4{grid-template-columns:repeat(4,minmax(0,1fr))} .kpi-3{grid-template-columns:repeat(3,minmax(0,1fr))} .kpi-2{grid-template-columns:repeat(2,minmax(0,1fr))} .kpi-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:12px 14px;position:relative;overflow:hidden} .kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--border));border-radius:8px 8px 0 0} .kpi-label{font-size:9px;color:var(--muted);letter-spacing:0.09em;text-transform:uppercase;margin-bottom:5px;font-weight:700;margin-top:2px} .kpi-value{font-size:21px;font-weight:700;line-height:1.1;margin-bottom:3px;color:#000} .kpi-value.sm{font-size:16px} .kpi-delta{font-size:10px;color:#888} .kpi-delta.up{color:var(--green);font-weight:600} .kpi-delta.down{color:var(--red);font-weight:600} .kpi-delta.warn{color:var(--amber);font-weight:600} /* ── SECTION HEADER ── */ .sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--ent,var(--border))} .sec-title{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--ent-ink,var(--muted))} .sec-note{font-size:11px;color:var(--muted)} /* ── CHART CARDS ── */ .chart-card{background:#fff;border:1px solid var(--border);border-top:3px solid var(--ent,var(--border));border-radius:8px;padding:14px 16px} .chart-card+.chart-card{margin-top:10px} /* ── Ampel-KPI-Karte (Marketing / Cockpit 2.0) ── */ .ampel-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-bottom:14px} .ampel-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:15px 16px 15px 20px;position:relative;overflow:hidden} .ampel-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:6px;background:var(--ampel,#b8c2bd)} .ampel-head{display:flex;align-items:center;gap:8px;margin-bottom:7px} .ampel-dot{width:11px;height:11px;border-radius:50%;background:var(--ampel,#b8c2bd);flex-shrink:0} .ampel-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .ampel-value{font-size:25px;font-weight:800;color:var(--text);line-height:1.1} .ampel-value small{font-size:13px;font-weight:600;color:var(--muted)} .ampel-sub{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45} .mkt-note{background:#fff;border:1px solid var(--border);border-left:5px solid var(--ent);border-radius:10px;padding:14px 16px;font-size:13px;line-height:1.6;color:var(--text)} /* Cockpit 2.0 — 5 Bereiche, je 2 KPIs untereinander */ .ck2-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));margin-bottom:14px} .ck2-bereich-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ent-ink);margin-bottom:8px;padding-bottom:5px;border-bottom:2px solid var(--ent)} .ck2-cards{display:flex;flex-direction:column;gap:10px} /* Cockpit 2.0 — Matrix: Spalten = Bereiche, Zeilen = Monat / Hochrechnung / Momentum, mit durchgezogenen Trennlinien */ .ck2-matrix{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 14px;align-items:start;margin-bottom:14px} .ck2-col-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ent-ink);padding-bottom:6px;border-bottom:2px solid var(--ent)} .ck2-divider{grid-column:1/-1;border-top:1px solid var(--border);height:0;margin:2px 0} @media(max-width:1100px){#ck2-body{overflow-x:auto}.ck2-matrix{min-width:820px}} /* Cockpit 2.0 — Redesign: Jahresumsatz-Block oben + 4 Zeilen (Metrik links · Chart rechts) */ .ck2-rows{display:flex;flex-direction:column;gap:12px} .ck2-row{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:stretch} .ck2-row>.ampel-card{display:flex;flex-direction:column;justify-content:center} .ck2-row>.chart-card{margin:0;display:flex;flex-direction:column} .ck2-row>.chart-card .chart-wrap{flex:1;min-height:140px} .ck2-jahr{background:#fff;border:1px solid var(--border);border-left:5px solid var(--ent);border-radius:10px;padding:12px 16px;margin-bottom:14px} .ck2-jahr-title{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ent-ink);margin-bottom:10px} .ck2-jahr-kpis{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:12px} .ck2-jahr-kpi .l{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .ck2-jahr-kpi .v{font-size:19px;font-weight:800;color:#1f2937;line-height:1.15} @media(max-width:820px){.ck2-row{grid-template-columns:1fr}} .chart-title{font-size:12px;font-weight:700;color:#111;margin-bottom:2px} .chart-sub{font-size:11px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .leg{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted)} .leg-dot{width:8px;height:8px;border-radius:2px;display:inline-block} .chart-wrap{position:relative;width:100%} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px} .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px} .mb-12{margin-bottom:12px} /* ── FUNNEL ── */ .funnel{display:flex;align-items:stretch;gap:0;margin-bottom:16px} .funnel-step{flex:1;background:#fff;border:1px solid var(--border);border-radius:0;padding:16px;text-align:center;position:relative;box-shadow:0 1px 4px rgba(0,0,0,0.04)} .funnel-step:first-child{border-radius:10px 0 0 10px} .funnel-step:last-child{border-radius:0 10px 10px 0} .funnel-step::after{content:'→';position:absolute;right:-14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--muted);z-index:1} .funnel-step:last-child::after{display:none} .funnel-label{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px} .funnel-value{font-size:24px;font-weight:700;color:#000;margin-bottom:4px} .funnel-rate{font-size:13px;font-weight:600;margin-bottom:2px} .funnel-sub{font-size:11px;color:var(--muted)} /* ── TERMINE ── */ .event-list{display:flex;flex-direction:column;gap:6px;max-height:380px;overflow-y:auto} .event-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg);border-radius:7px;border-left:3px solid var(--green)} .event-item.today{border-left-color:var(--amber);background:#fffbeb} .event-item.overdue{border-left-color:var(--red);opacity:0.7} .event-date{font-size:11px;color:var(--muted);min-width:110px;font-weight:600} .event-name{font-size:12px;font-weight:500;color:#000;flex:1} /* ── BERATER CARDS ── */ .berater-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px} .berater-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,0.04)} .berater-name{font-size:14px;font-weight:700;color:#000;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)} .berater-stat{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .berater-stat-label{font-size:11px;color:var(--muted)} .berater-stat-value{font-size:13px;font-weight:700;color:#000} /* ── MODAL ── */ .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;align-items:center;justify-content:center} .modal-overlay.open{display:flex} .modal{background:#fff;border-radius:14px;padding:28px 32px;width:520px;max-height:85vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,0.15)} .modal h2{font-size:18px;font-weight:700;margin-bottom:4px} .modal-sub{font-size:12px;color:var(--muted);margin-bottom:20px;line-height:1.7} .modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .fg label{display:block;font-size:10px;color:var(--muted);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;font-weight:600} .fg input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:8px 11px;color:var(--text);font-size:13px;outline:none;transition:border-color 0.2s} .fg input:focus{border-color:var(--green)} .modal-actions{display:flex;gap:10px;justify-content:flex-end} .btn-ghost{background:transparent;border:1px solid var(--border);border-radius:6px;padding:8px 16px;color:var(--muted);font-size:12px;cursor:pointer} .month-selector{display:flex;gap:5px;margin-bottom:16px;flex-wrap:wrap} .month-btn{background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:4px 9px;color:var(--muted);font-size:11px;cursor:pointer;transition:all 0.15s} .month-btn:hover,.month-btn.active{border-color:var(--green);color:var(--green)} /* ── MISC ── */ .loading-state{display:flex;align-items:center;justify-content:center;height:100px;color:var(--muted);font-size:13px;gap:8px} .spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0} @keyframes spin{to{transform:rotate(360deg)}} .tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600} .tag-green{background:var(--green-dim);color:var(--green)} .tag-red{background:var(--red-dim);color:var(--red)} .tag-amber{background:var(--amber-dim);color:var(--amber)} .tag-blue{background:var(--blue-dim);color:var(--blue)} footer{border-top:1px solid var(--border);padding:12px 24px;display:flex;justify-content:space-between;font-size:11px;color:rgba(0,0,0,0.2);margin-top:24px} @media(max-width:1000px){.kpi-5,.kpi-4{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-3,.berater-grid{grid-template-columns:1fr}} /* ── UNTERNEHMENS-SWITCHER ── */ .company-switcher{position:relative;display:inline-flex;align-items:center} .company-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:7px;padding:5px 10px 5px 8px;cursor:pointer;transition:background .15s;color:#fff} .company-btn:hover{background:rgba(255,255,255,0.14)} .company-logo{height:18px;width:auto;object-fit:contain;flex-shrink:0} .company-name{font-size:11px;font-weight:700;color:#fff;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis} .company-arrow{opacity:0.5;flex-shrink:0;transition:transform .2s} .company-arrow.open{transform:rotate(180deg)} .company-dropdown{position:absolute;top:calc(100% + 6px);left:0;background:#1a3a1a;border:1px solid rgba(78,207,78,0.25);border-radius:8px;min-width:220px;z-index:999;box-shadow:0 8px 32px rgba(0,0,0,0.4);overflow:hidden;display:none} .company-dropdown.open{display:block} .company-dropdown-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .12s;border-bottom:1px solid rgba(255,255,255,0.05)} .company-dropdown-item:last-child{border-bottom:none} .company-dropdown-item:hover{background:rgba(78,207,78,0.12)} .company-dropdown-item.active{background:rgba(78,207,78,0.18)} .company-dropdown-item img{height:16px;width:auto;object-fit:contain;flex-shrink:0} .company-dropdown-item .item-initials{width:22px;height:16px;background:rgba(78,207,78,0.3);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;color:#4ecf4e;flex-shrink:0} .company-dropdown-item span{font-size:12px;color:rgba(255,255,255,0.85);font-weight:500} .company-dropdown-item.active span{color:#fff;font-weight:700} /* ── UNTERNEHMENS-SEKTIONEN ── */ .company-section{display:none} .company-section.active{display:block} /* ── TAB-SHELL (leere Inhalte) ── */ .tab-shell{padding:24px 20px;max-width:1600px;margin:0 auto} /* Alle Gesellschafts-Reiter: zentriert + gepolstert wie GL (einheitlich 1600px) */ #section-gruppe .tab-content, #section-ht .tab-content, #section-dach .tab-content, #section-wf .tab-content{max-width:1600px;margin:0 auto;padding:20px 24px 32px} .shell-header{margin-bottom:24px} .shell-title{font-size:18px;font-weight:700;color:var(--ent-ink,var(--text));margin-bottom:4px} .shell-sub{font-size:12px;color:var(--muted)} .shell-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px} .shell-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:20px;min-height:100px;position:relative;overflow:hidden} .shell-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ent,var(--green))} .shell-card-label{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px} .shell-card-value{font-size:28px;font-weight:700;color:var(--text)} .shell-card-sub{font-size:11px;color:var(--muted);margin-top:4px} .shell-placeholder{background:var(--surface);border:1px dashed var(--border);border-radius:10px;padding:32px;text-align:center;color:var(--muted);font-size:12px} .shell-placeholder-icon{font-size:28px;margin-bottom:8px;opacity:0.4} .shell-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} @media(max-width:768px){.shell-row{grid-template-columns:1fr}} /* ── QS TAB ── */ .qs-stars{display:flex;gap:2px;color:#f59e0b;font-size:18px} .qs-rating-big{font-size:36px;font-weight:800;color:var(--text);line-height:1} .qs-rating-sub{font-size:11px;color:var(--muted);margin-top:2px} /* ── TEAM TAB ── */ .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px} .team-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px} .team-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--green-dim)} .team-avatar-fb{width:56px;height:56px;border-radius:50%;background:var(--green-dim);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--green);border:2px solid var(--green-dim)} .team-name{font-size:13px;font-weight:700;color:var(--text)} .team-role{font-size:11px;color:var(--muted)} .team-salary{font-size:11px;color:var(--green);font-weight:600;margin-top:2px} .team-since{font-size:10px;color:var(--muted)} /* ── ORGANIGRAMM (Hensel-Gruppe) ── */ .org-wrap{overflow-x:auto;padding:20px 0} .org-company{min-width:180px;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;flex-shrink:0} .org-company-header{background:var(--green-dark);padding:10px 14px;font-size:11px;font-weight:700;color:#fff;letter-spacing:0.05em} .org-company-body{padding:10px} .org-person{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:6px;transition:background .12s} .org-person:hover{background:var(--green-dim)} .org-person-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1.5px solid var(--border);flex-shrink:0} .org-person-fb{width:28px;height:28px;border-radius:50%;background:var(--green-dim);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--green);border:1.5px solid var(--border);flex-shrink:0} .org-person-name{font-size:11px;font-weight:600;color:var(--text);line-height:1.2} .org-person-role{font-size:9px;color:var(--muted);line-height:1.2} /* ── TAKT-BLOCK (AC/DC/Vertrieb) ── */ .takt{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px} .takt-head{display:flex;align-items:center;justify-content:space-between;padding:0;border-bottom:2px solid var(--border)} .takt-head .t{font-size:13px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:var(--text);padding:14px 18px;border-left:5px solid var(--red);background:#fafcfa} .takt-head .ampel{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;padding-right:18px;text-transform:uppercase;letter-spacing:0.03em} .takt-dot{width:12px;height:12px;border-radius:50%} .takt-dot.rot{background:var(--red);box-shadow:0 0 0 4px rgba(192,32,32,.13)} .takt-dot.amber{background:var(--amber);box-shadow:0 0 0 4px rgba(184,106,0,.13)} .takt-dot.gruen{background:var(--green);box-shadow:0 0 0 4px rgba(26,122,26,.13)} .takt-body{display:grid;grid-template-columns:1fr 1fr;gap:0} .takt-cell{padding:16px 18px;border-right:1px solid var(--border)} .takt-cell:last-child{border-right:none} .takt-celltitle{font-size:11px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--text);margin-bottom:11px;padding-bottom:6px;border-bottom:1px solid var(--border)} .takt-fillrow{display:flex;align-items:flex-end;gap:18px} .takt-fillnum{font-size:46px;font-weight:800;line-height:.9} .takt-fillnum span{font-size:24px} .takt-fillside{padding-bottom:5px} .takt-fillsub{font-size:11px;color:var(--muted);line-height:1.5} .takt-bar{height:8px;background:var(--bg);border-radius:4px;margin-top:13px;overflow:hidden;position:relative} .takt-bar .fg{height:100%;border-radius:4px} .takt-bar .soll{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--text);opacity:.6} .takt-kv{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0} .takt-kv+.takt-kv{border-top:1px dashed var(--border)} .takt-kv .k{font-size:11px;color:var(--muted)} .takt-kv .v{font-size:16px;font-weight:800} .takt-verlauf{padding:16px 18px;border-top:1px solid var(--border)} .takt-months{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:stretch} .takt-month{border:1px solid var(--border);border-radius:8px;overflow:hidden;display:flex;flex-direction:column} .takt-month.platzhalter{opacity:.4;border-style:dashed;background:#f7faf7} .takt-month.platzhalter .tm-hd{background:#f2f5f2} .takt-month.platzhalter .tm-name{color:var(--muted)} .takt-month.ok{border-color:#bcdcbc} .takt-month.miss{border-color:#e8c4c4} .takt-month.laufend{border-style:dashed;opacity:.92} .tm-hd{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px} .tm-hd.ok{background:#eef7ee} .tm-hd.miss{background:#fbeeee} .tm-toprow{display:flex;justify-content:space-between;align-items:baseline} .tm-name{text-transform:uppercase;letter-spacing:0.05em;font-size:10px;font-weight:600} .tm-hd.ok .tm-name{color:var(--green)} .tm-hd.miss .tm-name{color:var(--red)} .tm-avg{font-size:11px;font-weight:400;color:var(--muted)} .tm-sum{font-size:16px;font-weight:600;line-height:1.05;color:var(--text)} .tm-sum small{font-size:10px;font-weight:400;color:var(--muted);letter-spacing:0.03em} .tm-bars{display:flex;align-items:flex-end;gap:2px;height:72px;padding:8px 10px 18px;background:#fcfdfc;position:relative;flex:1} .tm-sollline{position:absolute;left:6px;right:6px;border-top:1.5px dashed #444;opacity:.65;z-index:2} .tm-sollline::after{content:'Soll';position:absolute;right:0;top:-12px;font-size:7px;color:#444;font-weight:700} .tm-wbar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative} .tm-wbar .wb{width:100%;border-radius:2px 2px 0 0;min-height:2px} .tm-wbar .wsoll{position:absolute;left:1px;right:1px;border-top:1.5px dashed #777;opacity:.55;z-index:2;pointer-events:none} .tm-wbar .wn{font-size:7px;color:var(--muted);margin-top:2px} .takt-legend{display:flex;gap:18px;margin-top:12px;font-size:10px;color:var(--muted);align-items:center;flex-wrap:wrap} .takt-legend span{display:flex;align-items:center;gap:5px} .takt-lgbox{width:11px;height:11px;border-radius:2px} .takt-istsoll{display:flex;gap:10px;margin-top:11px} .takt-istsoll .box{flex:1;border:1px solid var(--border);border-radius:6px;padding:7px 10px;text-align:center} .takt-istsoll .box .lbl{font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted)} .takt-istsoll .box .val{font-size:20px;font-weight:800;line-height:1.1;margin-top:2px} .takt-istsoll .box.ist{background:#fafcfa} .takt-istsoll .box.diff{background:#fbf3f3} .takt-rest-vis{margin-top:9px;font-size:11px;color:var(--muted);line-height:1.6} .takt-rest-vis b{color:var(--text);font-size:13px} /* Statusbar-Hover (ersetzt entfernte onmouseenter/leave-Inline-Handler — Phase 3/CSP) */ #statusbar-dc:hover, #statusbar-ac:hover, #statusbar-mono:hover { background: rgba(255,255,255,0.05); } /* ===== Leaflet 1.9.x – Kern-CSS (lokal wegen strikter CSP; CircleMarker = keine Marker-Bilder nötig) ===== */ .leaflet-container{position:relative;overflow:hidden;width:100%;height:100%;background:#dfe3e6;font:12px/1.5 system-ui,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:none;} .leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0;} .leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;} .leaflet-tile{filter:inherit;visibility:hidden;} .leaflet-tile-loaded{visibility:inherit;} .leaflet-zoom-box{width:0;height:0;box-sizing:border-box;z-index:800;} .leaflet-pane{z-index:400;} .leaflet-tile-pane{z-index:200;} .leaflet-overlay-pane{z-index:400;} .leaflet-shadow-pane{z-index:500;} .leaflet-marker-pane{z-index:600;} .leaflet-tooltip-pane{z-index:650;} .leaflet-popup-pane{z-index:700;} .leaflet-map-pane canvas{z-index:100;} .leaflet-map-pane svg{z-index:200;} .leaflet-overlay-pane svg{-moz-user-select:none;} .leaflet-control{position:relative;z-index:800;pointer-events:visiblePainted;pointer-events:auto;float:left;clear:both;} .leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none;} .leaflet-top{top:0;}.leaflet-right{right:0;}.leaflet-bottom{bottom:0;}.leaflet-left{left:0;} .leaflet-control.leaflet-control-attribution,.leaflet-right .leaflet-control{float:right;} .leaflet-top .leaflet-control{margin-top:10px;} .leaflet-bottom .leaflet-control{margin-bottom:10px;} .leaflet-left .leaflet-control{margin-left:10px;} .leaflet-right .leaflet-control{margin-right:10px;} .leaflet-container .leaflet-control-zoom{border:none;} .leaflet-bar{box-shadow:0 1px 5px rgba(0,0,0,.4);border-radius:4px;overflow:hidden;} .leaflet-bar a{background:#fff;border-bottom:1px solid #ccc;width:26px;height:26px;line-height:26px;display:block;text-align:center;text-decoration:none;color:#333;font:bold 18px 'Lucida Console',Monaco,monospace;} .leaflet-bar a:last-child{border-bottom:none;} .leaflet-bar a:hover{background:#f4f4f4;} .leaflet-control-attribution{background:rgba(255,255,255,.75);margin:0;padding:0 5px;color:#333;font-size:10px;} .leaflet-control-attribution a{color:#0078A8;text-decoration:none;} .leaflet-popup{position:absolute;text-align:center;margin-bottom:20px;} .leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:10px;background:#fff;color:#222;box-shadow:0 3px 14px rgba(0,0,0,.4);} .leaflet-popup-content{margin:12px 16px;line-height:1.4;font-size:12px;min-width:180px;} .leaflet-popup-content p{margin:4px 0;} .leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-left:-20px;overflow:hidden;pointer-events:none;} .leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;pointer-events:auto;transform:rotate(45deg);background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.4);} .leaflet-popup-close-button{position:absolute;top:0;right:0;width:20px;height:16px;padding:4px 4px 0 0;text-align:center;font:16px/14px Tahoma,sans-serif;color:#999;text-decoration:none;background:transparent;} .leaflet-popup-close-button:hover{color:#333;} .leaflet-container a{color:#0078A8;} .leaflet-zoom-animated{transform-origin:0 0;} .leaflet-interactive{cursor:pointer;} .leaflet-grab{cursor:grab;} .leaflet-dragging .leaflet-grab{cursor:grabbing;}