/* Angleichung der Portalseiten (Dashboard, Forecast, Mein Bereich, Services, Deal Sheet) an das CRM.
   UX-Durchsicht 06.11.2026, Pakete 1 und 2: gleicher Seitenkopf, gleiche Karten, gleiche Maße, Lime nur für die eine
   Hauptaktion einer Seite. Wird nach den Seitenstilen geladen und überschreibt sie. Nur Variablen aus theme.css. */

body { font: 400 var(--fs-14)/1.5 var(--sans); }

/* Seitenkopf: Krümelpfad statt grüner Pille, kein zweites Logo (das Logo steht im Menü) */
.top .logo, .top img.logo-dark, .top img.logo-light { display: none !important; }
.top > div:first-child { display: flex; flex-direction: row-reverse; align-items: center; gap: 8px; }
.top .back { margin-left: 0; font-size: var(--fs-13); color: var(--muted); text-decoration: none; }
.top .back::after { content: "/"; margin-left: 8px; color: var(--muted); }
.top .back:hover { color: var(--accent-text); }
.top .pill, .hero .pill { background: transparent; color: var(--text-2); padding: 0; border-radius: 0; text-transform: none;
  letter-spacing: 0; font-size: var(--fs-13); font-weight: 500; }
.top .sync { font-size: var(--fs-12); }
h1 { font-size: var(--fs-40) !important; font-weight: 600 !important; letter-spacing: -0.01em; line-height: 1.1; }
h2 { font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.005em; }
.head, .hero { margin-top: 24px; }
.sub { color: var(--muted); }

/* Karten wie im CRM: neutraler Rand, weicher Schatten, eine Rundung */
.card, .kpis, .tbl, .mbar { border: 1px solid var(--accent-soft-line) !important; border-radius: var(--r-karte) !important; background: var(--card);
  box-shadow: var(--shadow-karte); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.mbar { border-radius: var(--r-kachel) !important; box-shadow: none; }
.kpi { background: var(--card) !important; }
.kpi .v { font-size: var(--fs-28); font-variant-numeric: tabular-nums; }
.kpi .l, .kpi .s { color: var(--muted); }
/* Grünakzente in Forecast und Dashboard bleiben (Connor, 06.11.2026): die Kennzahl im Fokus als Lime-Fläche */
.kpi.hl { background: var(--accent-fill) !important; color: var(--on-accent) !important; }
.kpi.hl .l, .kpi.hl .s, .kpi.hl .v { color: var(--on-accent) !important; }

/* Auswahl und Reiter: gewählt in Lime wie bisher, Rahmen mit genug Kontrast */
.nav, .seg { border-color: var(--control-line) !important; }
.nav button.on, .seg button.on, .seg button[aria-pressed="true"], .chip.on, .steps span.on {
  background: var(--accent-fill) !important; color: var(--on-accent) !important; }
.subnav button.on { background: var(--chip); border-color: var(--control-line); color: var(--text); }
select, .sel, .custom input, .arrows button { border-color: var(--control-line) !important; }

/* Aktionen in Listen und Statusmarken: Kontur statt Lime-Fläche */
.tag[style*="accent-fill"], a.tag[style*="accent-fill"], button.tag[style*="accent-fill"], span.tag[style*="accent-fill"] {
  background: transparent !important; color: var(--accent-text) !important; border: 1px solid var(--accent-line) !important; }
span.tag[style*="accent-fill"] { background: var(--accent-fill) !important; color: var(--on-accent) !important; border-color: var(--accent-edge) !important; }
.tag { border-color: var(--control-line); }
.btn.primary, .gate a, .gate .btn { border: 1px solid var(--accent-edge); }

/* Rundungen und Zahlen */
.seg, .nav, .seg button, .nav button, .subnav button, select, .sel, .tag { border-radius: var(--r-pille); }
.num, .v, td, .grid .num { font-variant-numeric: tabular-nums; }

/* Bewegung wie im CRM */
.card, .kpi, .tag, .nav button, .seg button, .subnav button, select, .sel, a, button {
  transition: background-color var(--dauer) ease, border-color var(--dauer) ease, color var(--dauer) ease, box-shadow var(--dauer) ease, transform var(--dauer) ease; }
.wrap > *, #app > * { animation: angleich-ein 220ms ease-out both; }
@keyframes angleich-ein { from { opacity: 0.4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
:is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Grünakzente in Dashboard und Forecast nachgeschärft (Connor, 06.11.2026) */
.card, .kpis { box-shadow: var(--shadow-karte); }
/* Dashboard: die vier Kacheln sind einzelne Karten. Kein Rahmen um die Reihe, kein grüner Strich über die Ecken,
   Grün nur in Zahl und Balken (Connor, 09.11.2026) */
.kpis:has(> .card) { border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }
.kpis > .card.kpi { border: 1px solid var(--accent-soft-line) !important; }
.kpis > .card.kpi:hover { border-color: var(--accent-line) !important; }
.kpi .name span { padding: 2px 10px; border: 1px solid var(--control-line); border-radius: var(--r-pille); color: var(--text-2); white-space: nowrap; }
.kpi .v { color: var(--accent-text); }
.bar i.done { background: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.bar i { background: rgba(var(--accent-rgb), 0.45); }
h1 + .sub, .hero .sub { color: var(--text-2); }