/* ============================================================================
 * KFZMaster Frontend-Dashboard – „Premium Dark" Design-System
 * Kunde / Mitarbeiter / Inhaber. Vanilla, DSGVO-konform (keine externen CDNs).
 * Themes über [data-theme] am .kfzm-dash-Container (Default: dark).
 * Markenakzent #E1121C. Self-hosted Fonts (Space Grotesk + Roboto).
 * ========================================================================== */

/* ── Self-hosted Fonts ───────────────────────────────────────────────────── */
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/roboto-500.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/space-grotesk-700.woff2') format('woff2'); }

/* ── Tokens (Default = Dark) ─────────────────────────────────────────────── */
.kfzm-dash {
	--bg:#0a0b0d; --bg-2:#101216; --panel:#15181d; --panel-2:#1b1f25; --elev:#22272f;
	--line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
	--ink:#eef1f5; --ink-2:#aab2bd; --muted:#7e8896;
	--acc:#e1121c; --acc-2:#ff3b43; --acc-ink:#fff; --acc-soft:rgba(225,18,28,.14);
	--ok:#34d27b; --ok-bg:rgba(52,210,123,.14);
	--warn:#f5a524; --warn-bg:rgba(245,165,36,.15);
	--bad:#ff5a5c; --bad-bg:rgba(255,90,92,.15);
	--info:#5b9dff; --info-bg:rgba(91,157,255,.15);
	--radius:18px; --radius-md:14px; --radius-sm:10px; --pill:999px;
	--shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.32);
	--shadow-sm:0 1px 2px rgba(0,0,0,.4);
	--shadow-acc:0 8px 26px rgba(225,18,28,.40);
	--ring:0 0 0 3px rgba(225,18,28,.35);
	--font-display:'Space Grotesk','Roboto',system-ui,sans-serif;
	--font-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
	--ease:cubic-bezier(.4,0,.2,1); --dur:.18s; --dur-2:.32s;
	--side-w:250px;
}
.kfzm-dash[data-theme="light"] {
	--bg:#eef1f4; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#f6f8fa; --elev:#ffffff;
	--line:#e6e9ee; --line-2:#d4dae1;
	--ink:#161a1f; --ink-2:#48515b; --muted:#727c89;
	--acc:#e1121c; --acc-2:#b3201a; --acc-ink:#fff; --acc-soft:rgba(225,18,28,.10);
	--ok:#1a7f43; --ok-bg:#e6f6ec; --warn:#9a6a05; --warn-bg:#fdf2dd; --bad:#c62828; --bad-bg:#fdeceb; --info:#1f5fbf; --info-bg:#e8f0fe;
	--shadow:0 1px 2px rgba(16,24,32,.06), 0 10px 28px rgba(16,24,32,.10);
	--shadow-sm:0 1px 2px rgba(16,24,32,.06);
	--shadow-acc:0 8px 24px rgba(225,18,28,.22);
}

/* ── Frame ───────────────────────────────────────────────────────────────── */
.kfzm-dash {
	font-family:var(--font-body); color:var(--ink); background:var(--bg);
	border:1px solid var(--line); border-radius:var(--radius);
	max-width:1200px; margin:24px auto; min-height:80vh; overflow:hidden;
	font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ── Vollbild-App: Portalseite vom Website-Chrome abkoppeln ──────────────────
 * Gesetzt über die Body-Klasse „kfzm-portal" (KFZM_Dashboard::body_class).
 * Header/Footer werden bewusst NICHT mehr per CSS ausgeblendet – das löst der
 * Betreiber sauber über Divi (Blank-Page-Template / Theme-Builder-Zuweisung),
 * damit kein leerer grauer Balken vom display:none-Wrapper übrig bleibt.
 * Hier nur noch: global injizierten WhatsApp-Float ausblenden (überlebt jedes
 * Template), weißen Seitenrand entfernen und das Dashboard randlos machen.
 * ========================================================================== */
body.kfzm-portal { background:#0a0b0d; margin:0; }
body.kfzm-portal a.floating-whatsapp { display:none !important; }
body.kfzm-portal #page-container,
body.kfzm-portal #et-main-area,
body.kfzm-portal #main-content,
body.kfzm-portal .entry-content { padding:0 !important; margin:0 !important; }
body.kfzm-portal .kfzm-dash {
	max-width:none; margin:0; min-height:100vh; min-height:100dvh;
	border:0; border-radius:0;
}
body.kfzm-portal .kfzm-app { min-height:100vh; min-height:100dvh; }

.kfzm-dash *, .kfzm-dash *::before, .kfzm-dash *::after { box-sizing:border-box; }
.kfzm-dash ::selection { background:var(--acc-soft); }
/* Sichtbarer Tastatur-Fokus (a11y) – nur bei Keyboard-Nutzung */
.kfzm-dash :focus-visible, .kfzm-modal :focus-visible, .kfzm-toast :focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:8px; }
.kfzm-side-item:focus-visible, .kfzm-bottom-item:focus-visible { outline-offset:-2px; }
.kfzm-dash :focus:not(:focus-visible) { outline:none; }

/* ── App-Shell: Sidebar + Main + Bottom-Nav ──────────────────────────────── */
.kfzm-app { display:grid; grid-template-columns:var(--side-w) 1fr; min-height:80vh; }

.kfzm-sidebar {
	display:flex; flex-direction:column; gap:6px; padding:18px 14px;
	background:var(--bg-2); border-right:1px solid var(--line);
	position:sticky; top:0; align-self:start; max-height:100vh; overflow-y:auto;
}
.kfzm-side-brand { display:flex; align-items:center; gap:10px; padding:8px 10px 16px; }
.kfzm-brandmark { width:30px; height:30px; border-radius:9px; background:var(--acc); display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-acc); flex:0 0 auto; }
.kfzm-brandmark svg { width:18px; height:18px; }
.kfzm-brand { font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.02em; color:var(--ink); }
.kfzm-brand b { color:var(--acc); }

.kfzm-side-nav { display:flex; flex-direction:column; gap:3px; }
.kfzm-side-section { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); padding:14px 13px 5px; }
.kfzm-side-section:first-child { padding-top:4px; }
.kfzm-side-item {
	appearance:none; border:0; background:transparent; cursor:pointer; text-align:left;
	display:flex; align-items:center; gap:12px; width:100%;
	padding:11px 13px; border-radius:var(--radius-sm); color:var(--ink-2);
	font:600 14.5px/1 var(--font-body); transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kfzm-side-item .kfzm-ic { color:var(--muted); transition:color var(--dur) var(--ease); }
.kfzm-side-item:hover { background:var(--panel); color:var(--ink); }
.kfzm-side-item:hover .kfzm-ic { color:var(--ink); }
.kfzm-side-item.is-active { background:var(--acc-soft); color:var(--acc); }
.kfzm-side-item.is-active .kfzm-ic { color:var(--acc); }
.kfzm-side-foot { margin-top:auto; display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.kfzm-side-userrow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 6px; }

/* Topbar (Titel + mobile Brand) */
.kfzm-main { display:flex; flex-direction:column; min-width:0; background:var(--bg); }
.kfzm-topbar {
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:16px 22px; border-bottom:1px solid var(--line);
	position:sticky; top:0; z-index:20; background:var(--bg); backdrop-filter:saturate(140%) blur(8px);
}
.kfzm-topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.kfzm-topbar-title { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.01em; }
.kfzm-topbar-mbrand { display:none; align-items:center; gap:9px; }
.kfzm-topbar-right { display:flex; align-items:center; gap:8px; }

.kfzm-dash-content { padding:22px; animation:kfzm-fade var(--dur-2) var(--ease); }
@keyframes kfzm-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
/* Überschriften nicht unter die klebende Topbar rutschen (Anker/Deep-Link). */
.kfzm-dash-content > h2, .kfzm-dash-content > h3, .kfzm-daygroup { scroll-margin-top:84px; }

/* ── Wochen-Leiste (Mitarbeiter: Termine → Woche) ─────────────────────────── */
.kfzm-weekstrip { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:14px 0 18px; }
.kfzm-weekday {
	appearance:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px;
	padding:11px 4px 10px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--panel); color:var(--ink-2);
	transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kfzm-weekday:hover { border-color:var(--line-2); transform:translateY(-1px); }
.kfzm-weekday-dow { font:600 11px/1 var(--font-body); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.kfzm-weekday-num { font:700 19px/1 var(--font-display); color:var(--ink); }
.kfzm-weekday-cnt {
	min-width:22px; height:20px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center;
	font:700 12px/1 var(--font-body); background:var(--acc-soft); color:var(--acc);
}
.kfzm-weekday-cnt.is-none { background:transparent; color:var(--muted); font-weight:500; }
.kfzm-weekday-cnt.is-pend { background:var(--acc); color:#fff; box-shadow:0 0 0 3px var(--acc-soft); }
.kfzm-weekday.is-today { border-color:var(--line-2); }
.kfzm-weekday.is-today .kfzm-weekday-num { color:var(--acc); }
.kfzm-weekday.is-active { background:var(--acc-soft); border-color:var(--acc); }
.kfzm-weekday.is-active .kfzm-weekday-num { color:var(--acc); }
.kfzm-weekday:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
@media (max-width:560px) {
	.kfzm-weekstrip { gap:5px; }
	.kfzm-weekday { padding:9px 2px 8px; border-radius:var(--radius-sm); }
	.kfzm-weekday-num { font-size:16px; }
	.kfzm-weekday-cnt { min-width:19px; height:18px; font-size:11px; }
}

/* Wochen-Tabelle (Mitarbeiter/Inhaber): Spalten Mo–Sa mit kompakten Termin-Kacheln. */
.kfzm-weekgrid { display:grid; grid-template-columns:repeat(7, minmax(150px, 1fr)); gap:10px; overflow-x:auto; padding-bottom:6px; align-items:start; }
.kfzm-weekcol { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); display:flex; flex-direction:column; min-width:150px; }
.kfzm-weekcol.is-today { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset; }
.kfzm-weekcol-head { display:flex; align-items:baseline; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg-2); border-radius:var(--radius-md) var(--radius-md) 0 0; z-index:1; }
.kfzm-weekcol-dow { font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.05em; color:var(--ink); }
.kfzm-weekcol.is-today .kfzm-weekcol-dow { color:var(--acc); }
.kfzm-weekcol-date { color:var(--muted); font-size:12px; }
.kfzm-weekcol-cnt { margin-left:auto; background:var(--acc); color:var(--acc-ink); border-radius:var(--pill); font-size:11px; line-height:1; padding:3px 8px; font-weight:700; }
.kfzm-weekcol-body { display:flex; flex-direction:column; gap:8px; padding:10px; }
.kfzm-weekcol-empty { color:var(--muted); text-align:center; padding:10px 0; font-size:13px; }
.kfzm-apptile { display:flex; flex-direction:column; gap:2px; text-align:left; width:100%; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--muted); border-radius:var(--radius-sm); padding:8px 10px; cursor:pointer; font:inherit; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.kfzm-apptile:hover { transform:translateY(-1px); border-color:var(--line-2); }
.kfzm-apptile:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.kfzm-apptile-time { font-weight:700; font-size:13px; }
.kfzm-apptile-who { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kfzm-apptile-sub { font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kfzm-apptile-pend { font-size:11px; color:var(--warn); font-weight:600; }
.kfzm-apptile[data-status="geplant"] { border-left-color:var(--acc); }
.kfzm-apptile[data-status="wartet_teile"] { border-left-color:var(--warn); }
.kfzm-apptile[data-status="in_arbeit"] { border-left-color:#5b9dff; }
.kfzm-apptile[data-status="abholbereit"] { border-left-color:var(--ok); }
.kfzm-apptile[data-status="abgeschlossen"] { border-left-color:var(--muted); }

/* Aufklappbare Neuanlage (Kunde/Fahrzeug) im Schnell-Termin-Formular. */
.kfzm-collapse { border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-2); margin:4px 0 2px; }
.kfzm-collapse-sum { display:flex; align-items:center; gap:8px; padding:11px 14px; cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink-2); list-style:none; user-select:none; }
.kfzm-collapse-sum::-webkit-details-marker { display:none; }
.kfzm-collapse-sum .kfzm-ic { color:var(--acc); }
.kfzm-collapse[open] .kfzm-collapse-sum { border-bottom:1px solid var(--line); }
.kfzm-apptcreate .kfzm-inlineactions, .kfzm-apptcreate .kfzm-inlinecreate { margin:10px 14px; }
.kfzm-apptcust-hint { margin:-4px 0 8px; font-size:12.5px; }

/* Deep-Link-Hervorhebung einer Termin-Karte (Kunden-Ansicht). */
.kfzm-card--focus { animation:kfzm-focuspulse 1.6s var(--ease); }
@keyframes kfzm-focuspulse {
	0% { box-shadow:0 0 0 0 var(--acc-soft); }
	22% { box-shadow:0 0 0 4px var(--acc-soft); border-color:var(--acc); }
	100% { box-shadow:0 0 0 0 transparent; }
}
@media (prefers-reduced-motion:reduce) {
	.kfzm-weekday { transition:none; }
	.kfzm-apptile { transition:none; }
	.kfzm-card--focus { animation:none; }
}

/* Bottom-Nav (mobil) */
.kfzm-bottomnav { display:none; }

/* Theme-Toggle + Icon-Buttons */
.kfzm-iconbtn {
	appearance:none; border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2);
	width:40px; height:40px; border-radius:11px; display:grid; place-items:center; cursor:pointer;
	transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kfzm-iconbtn:hover { color:var(--ink); border-color:var(--acc); }
.kfzm-ic { display:inline-block; width:20px; height:20px; flex:0 0 auto; vertical-align:middle; }
.kfzm-ic--sm { width:16px; height:16px; }

/* ── Typo / Sektionen ────────────────────────────────────────────────────── */
.kfzm-h2 { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.01em; margin:4px 0 16px; }
.kfzm-section { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:26px 0 11px; font-weight:700; }
.kfzm-muted { color:var(--muted); font-size:13.5px; }
.kfzm-greeting { font-family:var(--font-display); font-weight:700; font-size:26px; letter-spacing:-.02em; margin:2px 0 2px; }
.kfzm-greeting-sub { color:var(--ink-2); margin:0 0 18px; }

/* Theme-CSS-Leaks neutralisieren (sonst „kleben" Schriften im Dark Mode an der
 * dunklen Theme-Farbe). Container-Klasse verdoppelt → schlägt typische Theme-Regeln
 * wie `.entry-content h2/p/span{color:…}`. Unklassierte Textknoten erben die
 * korrekte Eltern-Farbe; Buttons/Pills/Badges behalten ihre eigene Farbe. */
.kfzm-dash.kfzm-dash h1, .kfzm-dash.kfzm-dash h2, .kfzm-dash.kfzm-dash h3, .kfzm-dash.kfzm-dash h4,
.kfzm-dash.kfzm-dash strong, .kfzm-dash.kfzm-dash .kfzm-topbar-title, .kfzm-dash.kfzm-dash .kfzm-hero-main,
.kfzm-dash.kfzm-dash .kfzm-tile-num, .kfzm-dash.kfzm-dash .kfzm-possum, .kfzm-dash.kfzm-dash .kfzm-modal-title { color:var(--ink); }
.kfzm-dash.kfzm-dash :where(p,span,div,li,small,b,em,td,th,label):not([class]) { color:inherit; }
.kfzm-dash.kfzm-dash .kfzm-section, .kfzm-dash.kfzm-dash .kfzm-muted { color:var(--muted); }
.kfzm-dash.kfzm-dash .kfzm-greeting-sub, .kfzm-dash.kfzm-dash .kfzm-card-meta, .kfzm-dash.kfzm-dash .kfzm-tl-labels,
.kfzm-dash.kfzm-dash .kfzm-dash-reg, .kfzm-dash.kfzm-dash .kfzm-field-label { color:var(--ink-2); }
/* Panel-Wrapper auf Grundfarbe – damit unklassierte Inhaltszeilen (z. B. Arbeits-
 * beschreibungen) sicher erben, auch wenn das Theme `div{color}` setzt. */
.kfzm-dash.kfzm-dash .kfzm-card, .kfzm-dash.kfzm-dash .kfzm-row, .kfzm-dash.kfzm-dash .kfzm-kpi,
.kfzm-dash.kfzm-dash .kfzm-tile, .kfzm-dash.kfzm-dash .kfzm-hero, .kfzm-dash.kfzm-dash .kfzm-modal,
.kfzm-dash.kfzm-dash .kfzm-toast, .kfzm-dash.kfzm-dash .kfzm-pwa-hint, .kfzm-dash.kfzm-dash .kfzm-slot { color:var(--ink); }

/* ── Karten ──────────────────────────────────────────────────────────────── */
.kfzm-card {
	border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px;
	margin-bottom:13px; background:var(--panel); box-shadow:var(--shadow-sm);
}
.kfzm-card--row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.kfzm-card--click { cursor:pointer; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.kfzm-card--click:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-2); }
.kfzm-card h3 { margin:0 0 8px; font-size:16px; font-weight:700; font-family:var(--font-display); letter-spacing:-.01em; }
.kfzm-card-meta { display:flex; flex-wrap:wrap; gap:5px 16px; color:var(--ink-2); font-size:14px; align-items:center; }
.kfzm-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.kfzm-row:last-child { border-bottom:0; }

/* ── Badges / Ampel-Pills ────────────────────────────────────────────────── */
.kfzm-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--pill); font-size:12px; font-weight:700; background:var(--panel-2); color:var(--ink-2); border:1px solid var(--line); }
.kfzm-badge--paid, .kfzm-pill--ok { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.kfzm-badge--open, .kfzm-pill--warn { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.kfzm-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--pill); font-size:12.5px; font-weight:700; background:var(--panel-2); color:var(--ink-2); border:1px solid var(--line); }
.kfzm-pill--bad { background:var(--bad-bg); color:var(--bad); border-color:transparent; }
.kfzm-pill--info { background:var(--info-bg); color:var(--info); border-color:transparent; }
.kfzm-dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.kfzm-dot--pulse { box-shadow:0 0 0 0 currentColor; animation:kfzm-pulse 1.8s infinite; }
@keyframes kfzm-pulse { 0%{ box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.kfzm-btn {
	appearance:none; border:1px solid var(--acc); background:var(--acc); color:var(--acc-ink);
	padding:10px 17px; border-radius:11px; font:600 14px/1 var(--font-body); cursor:pointer;
	display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
	transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kfzm-btn:hover { box-shadow:var(--shadow-acc); transform:translateY(-1px); }
.kfzm-btn:active { transform:translateY(0) scale(.98); }
.kfzm-btn:disabled { opacity:.5; cursor:default; box-shadow:none; transform:none; }
.kfzm-btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.kfzm-btn--ghost:hover { background:var(--panel-2); border-color:var(--acc); box-shadow:none; color:var(--acc); }
.kfzm-btn--danger { background:transparent; color:var(--bad); border-color:color-mix(in srgb,var(--bad) 45%,transparent); }
.kfzm-btn--danger:hover { background:var(--bad-bg); box-shadow:none; }
.kfzm-actions { display:flex; flex-wrap:wrap; gap:7px; }
.kfzm-actions .kfzm-btn { padding:8px 13px; font-size:13px; }
.kfzm-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }

/* ── Formulare ───────────────────────────────────────────────────────────── */
.kfzm-form { display:flex; flex-direction:column; gap:15px; max-width:660px; }
/* Zusammengehörige Kurzfelder zweispaltig (Desktop), gestapelt auf Mobil. */
.kfzm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
@media (max-width:640px) { .kfzm-form-grid { grid-template-columns:1fr; } }
.kfzm-field, .kfzm-reqform .kfzm-field { display:flex; flex-direction:column; gap:6px; }
.kfzm-field-label { font-size:12.5px; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.03em; }
.kfzm-input {
	width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:11px;
	font-size:15px; background:var(--bg-2); color:var(--ink); font-family:inherit; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kfzm-input::placeholder { color:var(--muted); }
.kfzm-input:focus { outline:none; border-color:var(--acc); box-shadow:var(--ring); }
.kfzm-input[type="color"] { padding:5px; height:44px; }
textarea.kfzm-input { resize:vertical; }
.kfzm-checkrow { display:flex; gap:11px; align-items:center; font-size:14.5px; color:var(--ink); cursor:pointer; }
/* Gebrandete Checkbox (kein nativer Box-Look). */
.kfzm-checkrow input[type="checkbox"] {
	appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative; cursor:pointer;
	width:22px; height:22px; border:2px solid var(--line-2); border-radius:7px; background:var(--bg-2);
	transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kfzm-checkrow input[type="checkbox"]:hover { border-color:var(--acc); }
.kfzm-checkrow input[type="checkbox"]:checked { background:var(--acc); border-color:var(--acc); }
.kfzm-checkrow input[type="checkbox"]:checked::after {
	content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
	border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(42deg); animation:kfzm-checkpop .26s var(--ease);
}
.kfzm-checkrow input[type="checkbox"]:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
/* Switch-Variante (Schieber) für Ein/Aus-Zeilen. */
.kfzm-switchrow input[type="checkbox"] {
	width:44px; height:26px; border-radius:var(--pill); border:1px solid var(--line-2); background:var(--panel-2);
}
.kfzm-switchrow input[type="checkbox"]::after {
	content:""; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:18px; height:18px; border-radius:50%;
	background:var(--muted); border:0; transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kfzm-switchrow input[type="checkbox"]:checked { background:var(--acc); border-color:var(--acc); }
.kfzm-switchrow input[type="checkbox"]:checked::after { background:#fff; transform:translate(18px,-50%); animation:none; border-width:0; width:18px; height:18px; left:3px; top:50%; }
.kfzm-uploadrow { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:12px; }

/* Öffnungszeiten-Raster (Tag · Offen · Von · Bis · Pause von · Pause bis) */
.kfzm-hours-head, .kfzm-hours-row { display:grid; grid-template-columns:46px 52px 1fr 1fr 1fr 1fr; gap:8px; align-items:center; }
.kfzm-hours-head { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; margin-bottom:8px; }
.kfzm-hours-row { padding:7px 0; border-top:1px solid var(--line); }
.kfzm-hours-day { font-weight:700; color:var(--ink); }
.kfzm-hours-row input[type="checkbox"] {
	appearance:none; -webkit-appearance:none; position:relative; cursor:pointer;
	width:22px; height:22px; border:2px solid var(--line-2); border-radius:7px; background:var(--bg-2);
}
.kfzm-hours-row input[type="checkbox"]:checked { background:var(--acc); border-color:var(--acc); }
.kfzm-hours-row input[type="checkbox"]:checked::after { content:""; position:absolute; left:6px; top:2px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(42deg); }

/* ── Gebrandetes Zeitfeld (HH:MM) ─────────────────────────────────────────── */
.kfzm-timefield { display:flex; align-items:center; gap:5px; }
.kfzm-timefield .kfzm-timepart { flex:1 1 0; min-width:0; }
.kfzm-timefield .kfzm-fselect-btn { padding:9px 8px; gap:4px; }
.kfzm-timesep { color:var(--muted); font-weight:700; flex:0 0 auto; }

/* ── Gebrandeter Farbwähler (Palette) ─────────────────────────────────────── */
.kfzm-colorfield { position:relative; }
.kfzm-colorfield-btn { width:100%; display:flex; align-items:center; gap:10px; padding:9px 13px; border:1px solid var(--line-2); border-radius:11px; background:var(--bg-2); color:var(--ink); font:inherit; font-size:15px; cursor:pointer; }
.kfzm-colorfield-btn:hover { border-color:var(--acc); }
.kfzm-colorfield.is-open .kfzm-colorfield-btn { border-color:var(--acc); box-shadow:var(--ring); }
.kfzm-colorfield-sw { width:24px; height:24px; border-radius:7px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.kfzm-colorfield-lbl { flex:1 1 auto; font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.kfzm-colorpop { position:absolute; z-index:45; top:calc(100% + 6px); left:0; padding:12px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-md); box-shadow:var(--shadow); animation:kfzm-fade var(--dur) var(--ease); }
.kfzm-colorgrid { display:grid; grid-template-columns:repeat(6,30px); gap:8px; }
.kfzm-swatch { width:30px; height:30px; border-radius:9px; border:2px solid transparent; cursor:pointer; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); transition:transform var(--dur) var(--ease); }
.kfzm-swatch:hover { transform:scale(1.12); }
.kfzm-swatch.is-sel { border-color:var(--ink); }
.kfzm-swatch-ck { width:16px; height:16px; color:#fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
@media (max-width:640px) {
  .kfzm-hours-head { display:none; }
  .kfzm-hours-row { grid-template-columns:40px 44px 1fr 1fr; row-gap:6px; }
  .kfzm-hours-row input[type="time"]:nth-child(5) { grid-column:3; }
  .kfzm-hours-row input[type="time"]:nth-child(6) { grid-column:4; }
}

/* Platzhalter-Hilfe + Mail-Vorlagen */
.kfzm-ph-list { display:flex; flex-wrap:wrap; gap:7px; }
.kfzm-ph-item { font-family:monospace; font-size:12.5px; padding:3px 9px; border-radius:var(--pill); background:var(--panel); border:1px solid var(--line-2); color:var(--ink-2); cursor:help; }
.kfzm-mailtpl { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.kfzm-mailtpl:first-of-type { border-top:0; padding-top:0; }
.kfzm-mailtpl h3 { margin:0 0 10px; font-size:15px; }

.kfzm-msg, .kfzm-reqmsg { margin:2px 0 0; font-size:14px; min-height:1px; }
.kfzm-msg.is-err, .kfzm-reqmsg.is-err { color:var(--bad); }
.kfzm-msg.is-ok, .kfzm-reqmsg.is-ok { color:var(--ok); }

/* ── Status / Empty ──────────────────────────────────────────────────────── */
.kfzm-busy, .kfzm-empty { padding:18px 2px; color:var(--muted); }
.kfzm-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:46px 18px; }
.kfzm-empty .kfzm-ic { width:40px; height:40px; color:var(--line-2); }

/* ── Termin-Slots ────────────────────────────────────────────────────────── */
.kfzm-slots { display:flex; flex-wrap:wrap; gap:8px; }
.kfzm-slot { appearance:none; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); padding:9px 14px; border-radius:10px; font-size:14px; cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.kfzm-slot:hover { border-color:var(--acc); }
.kfzm-slot:active { transform:scale(.96); }
.kfzm-slot.is-sel { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:var(--shadow-acc); }
.kfzm-slot.is-out { opacity:.4; cursor:not-allowed; text-decoration:line-through; }

/* ── Rechnungs-Positionen ────────────────────────────────────────────────── */
.kfzm-positions { display:flex; flex-direction:column; gap:8px; }
.kfzm-poshead, .kfzm-posrow { display:grid; grid-template-columns:150px 1fr 68px 104px 90px 74px 38px; gap:6px; align-items:center; }
.kfzm-poshead { padding:0 2px 2px; }
.kfzm-poshead span { font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); }
.kfzm-poshead span:last-child, .kfzm-poshead span:nth-child(3), .kfzm-poshead span:nth-child(5), .kfzm-poshead span:nth-child(6) { text-align:right; }
.kfzm-poscell { min-width:0; }
.kfzm-poscell-lbl { display:none; }
.kfzm-posrow .kfzm-input { padding:9px; font-size:14px; }
.kfzm-num { text-align:right; }
.kfzm-possum { margin-top:12px; font-weight:700; text-align:right; font-family:var(--font-display); font-size:16px; }

/* ── KPIs + Charts ───────────────────────────────────────────────────────── */
.kfzm-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:16px; }
.kfzm-kpi { border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; background:var(--panel); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.kfzm-kpi::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--acc),transparent); }
.kfzm-kpi-title { font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px; }
.kfzm-kpi-row { font-size:14px; color:var(--ink-2); }
.kfzm-kpi-profit { margin-top:10px; font-size:22px; font-weight:800; color:var(--ok); font-family:var(--font-display); }
.kfzm-kpi-profit.is-neg { color:var(--bad); }
.kfzm-chart { width:100%; height:auto; display:block; aspect-ratio:600 / 200; }
.kfzm-chart-lbl { font-size:11px; fill:var(--muted); }

/* ── Hero / Stat-Tiles (Übersicht) ───────────────────────────────────────── */
.kfzm-hero { border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 22px; background:linear-gradient(150deg, var(--panel), var(--panel-2)); position:relative; overflow:hidden; margin-bottom:16px; }
.kfzm-hero::before { content:""; position:absolute; right:-40px; top:-40px; width:170px; height:170px; background:radial-gradient(circle, var(--acc-soft), transparent 70%); pointer-events:none; }
/* Abholbereit-Hero (Erfolg/Grün). */
.kfzm-hero--ready { border-color:color-mix(in srgb,var(--ok) 45%,transparent); background:linear-gradient(150deg, var(--ok-bg), var(--panel)); }
.kfzm-hero--ready::before { background:radial-gradient(circle, var(--ok-bg), transparent 70%); }
.kfzm-hero--ready .kfzm-hero-label { color:var(--ok); }
.kfzm-hero-label { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; }
.kfzm-hero-main { font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:-.01em; margin:6px 0 4px; }
.kfzm-hero-cd { color:var(--acc); font-weight:700; }
.kfzm-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.kfzm-tile { border:1px solid var(--line); border-radius:var(--radius-md); padding:15px 16px; background:var(--panel); display:flex; flex-direction:column; gap:6px; }
.kfzm-tile-ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--acc-soft); color:var(--acc); }
.kfzm-tile-num { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.01em; }
.kfzm-tile-cap { font-size:12.5px; color:var(--muted); }
.kfzm-quick { display:flex; flex-wrap:wrap; gap:9px; }

/* ── Termin-Timeline ─────────────────────────────────────────────────────── */
.kfzm-timeline { display:flex; align-items:center; gap:0; margin:6px 0 2px; }
.kfzm-tl-step { display:flex; align-items:center; gap:0; flex:1; }
.kfzm-tl-step:last-child { flex:0 0 auto; }
.kfzm-tl-dot { width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--panel-2); border:2px solid var(--line-2); color:var(--muted); }
.kfzm-tl-dot .kfzm-ic { width:12px; height:12px; }
.kfzm-tl-line { height:2px; flex:1; background:var(--line-2); }
.kfzm-tl-step.is-done .kfzm-tl-dot { background:var(--ok); border-color:var(--ok); color:#fff; }
.kfzm-tl-step.is-done .kfzm-tl-line { background:var(--ok); }
.kfzm-tl-step.is-current .kfzm-tl-dot { background:var(--acc); border-color:var(--acc); color:#fff; }
.kfzm-tl-labels { display:flex; justify-content:space-between; margin-top:6px; font-size:11px; color:var(--muted); }

/* ── Audit-Banner ────────────────────────────────────────────────────────── */
.kfzm-auditbanner { display:flex; align-items:center; gap:9px; padding:13px 16px; border-radius:12px; font-weight:700; margin-bottom:14px; }
.kfzm-auditbanner.is-ok { background:var(--ok-bg); color:var(--ok); }
.kfzm-auditbanner.is-bad { background:var(--bad-bg); color:var(--bad); }

/* ── Sub-Navigation (Stammdaten) ─────────────────────────────────────────── */
.kfzm-subnav { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.kfzm-subtab { appearance:none; border:1px solid var(--line-2); background:var(--panel); border-radius:var(--pill); padding:8px 17px; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:all var(--dur) var(--ease); }
.kfzm-subtab:hover { border-color:var(--acc); color:var(--ink); }
.kfzm-subtab.is-active { background:var(--acc); border-color:var(--acc); color:#fff; }

/* ── Werkstatt-Planungsboard (Kanban, Status-Spalten + Drag) ─────────────── */
.kfzm-board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
.kfzm-board-col { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-md); padding:10px; display:flex; flex-direction:column; gap:8px; min-height:120px; scroll-snap-align:start; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.kfzm-board-col.is-over { border-color:var(--acc); background:var(--acc-soft); }
.kfzm-board-colhead { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:2px 4px 8px; border-bottom:1px solid var(--line); }
.kfzm-board-colname { font-weight:700; font-size:13px; font-family:var(--font-display); letter-spacing:-.01em; }
.kfzm-board-cnt { min-width:22px; height:20px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center; font:700 12px/1 var(--font-body); background:var(--panel-2); color:var(--muted); }
.kfzm-board-colbody { display:flex; flex-direction:column; gap:8px; min-height:40px; }
.kfzm-board-card { background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:11px 12px; display:flex; flex-direction:column; gap:5px; cursor:grab; box-shadow:var(--shadow-sm); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.kfzm-board-card:hover { border-color:var(--acc); transform:translateY(-1px); box-shadow:var(--shadow); }
.kfzm-board-card.is-drag { opacity:.5; cursor:grabbing; }
.kfzm-board-time { font:700 13px/1 var(--font-display); color:var(--acc); }
.kfzm-board-title { font-weight:700; font-size:14px; }
.kfzm-board-sub { font-size:12.5px; color:var(--muted); }
.kfzm-board-card .kfzm-statussel { margin-top:3px; }
.kfzm-board-card .kfzm-statussel .kfzm-fselect-btn { padding:5px 9px; font-size:12px; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.kfzm-toasts { position:fixed; right:18px; bottom:18px; z-index:99999; display:flex; flex-direction:column; gap:10px; max-width:min(360px,92vw); }
.kfzm-toast { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; border-radius:13px; background:var(--elev); color:var(--ink); border:1px solid var(--line-2); box-shadow:var(--shadow); font-size:14.5px; animation:kfzm-toast-in var(--dur-2) var(--ease); }
.kfzm-toast .kfzm-ic { margin-top:1px; flex:0 0 auto; }
.kfzm-toast--ok { border-left:4px solid var(--ok); } .kfzm-toast--ok .kfzm-ic { color:var(--ok); }
.kfzm-toast--err { border-left:4px solid var(--bad); } .kfzm-toast--err .kfzm-ic { color:var(--bad); }
.kfzm-toast--info { border-left:4px solid var(--info); } .kfzm-toast--info .kfzm-ic { color:var(--info); }
.kfzm-toast.is-out { animation:kfzm-toast-out var(--dur-2) var(--ease) forwards; }
@keyframes kfzm-toast-in { from { opacity:0; transform:translateX(20px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes kfzm-toast-out { to { opacity:0; transform:translateX(20px) scale(.96); } }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.kfzm-modal-overlay { position:fixed; inset:0; z-index:99998; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); animation:kfzm-fade var(--dur) var(--ease); }
.kfzm-modal { width:min(440px,100%); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; animation:kfzm-modal-in var(--dur-2) var(--ease); }
@keyframes kfzm-modal-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
.kfzm-modal-title { font-family:var(--font-display); font-weight:700; font-size:19px; margin:0 0 8px; }
.kfzm-modal-text { color:var(--ink-2); margin:0 0 18px; }
.kfzm-modal-actions { display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; }

/* ── Unterschrift-Pad (Einlagerungsbeleg) ────────────────────────────────── */
.kfzm-modal--wide { width:min(620px,100%); }
.kfzm-sigpad { margin:4px 0 18px; border:2px dashed var(--line-2); border-radius:12px; background:#fff; padding:6px; touch-action:none; }
.kfzm-sigcanvas { display:block; width:100%; height:200px; border-radius:8px; cursor:crosshair; touch-action:none; }

/* ── Command-Palette (globale Suche) ─────────────────────────────────────── */
.kfzm-palette-ov { align-items:flex-start; padding-top:12vh; }
.kfzm-palette { width:min(560px,100%); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; animation:kfzm-modal-in var(--dur-2) var(--ease); }
.kfzm-palette-head { display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--line); }
.kfzm-palette-head .kfzm-ic { color:var(--muted); flex:0 0 auto; }
.kfzm-palette-input { flex:1 1 auto; border:0; background:transparent; color:var(--ink); font:inherit; font-size:17px; outline:none; }
.kfzm-palette-input::placeholder { color:var(--muted); }
.kfzm-palette-list { max-height:52vh; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:3px; }
.kfzm-palette-item { display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:11px 13px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--ink); cursor:pointer; font:inherit; position:relative; overflow:hidden; }
.kfzm-palette-item:hover, .kfzm-palette-item:focus-visible { background:var(--acc-soft); }

/* ── Skeletons ───────────────────────────────────────────────────────────── */
.kfzm-skel { border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:13px; background:var(--panel); }
.kfzm-skel-line { height:13px; border-radius:7px; margin:9px 0; background:linear-gradient(90deg,var(--panel-2) 25%,var(--elev) 37%,var(--panel-2) 63%); background-size:400% 100%; animation:kfzm-shimmer 1.4s ease infinite; }
.kfzm-skel-line.w70 { width:70%; } .kfzm-skel-line.w40 { width:40%; } .kfzm-skel-line.w90 { width:90%; }
@keyframes kfzm-shimmer { 0%{ background-position:100% 0; } 100%{ background-position:0 0; } }

/* ── PWA-Install-Hinweis ─────────────────────────────────────────────────── */
.kfzm-pwa-hint { display:flex; align-items:center; gap:12px; padding:13px 16px; margin-bottom:16px; border:1px solid var(--line-2); border-radius:var(--radius-md); background:var(--panel-2); }
.kfzm-pwa-hint .kfzm-ic { color:var(--acc); flex:0 0 auto; }
.kfzm-pwa-hint .kfzm-pwa-x { margin-left:auto; }

/* ── Login / Registrierung (PHP-Ansichten) ──────────────────────────────── */
.kfzm-dash--login, .kfzm-dash--note { max-width:440px; min-height:auto; margin:48px auto; padding:30px; }
.kfzm-dash--login h2 { font-family:var(--font-display); margin-top:0; }
.kfzm-dash--login label { display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
.kfzm-dash--login input[type="text"], .kfzm-dash--login input[type="password"], .kfzm-dash--login input[type="email"] {
	width:100%; padding:11px 13px; border:1px solid var(--line-2); border-radius:11px; background:var(--bg-2); color:var(--ink); font-size:15px; margin-bottom:14px;
}
.kfzm-dash--login input:focus { outline:none; border-color:var(--acc); box-shadow:var(--ring); }
.kfzm-dash--login .button, .kfzm-dash--login input[type="submit"] {
	width:100%; padding:12px 16px; border:1px solid var(--acc); background:var(--acc); color:#fff; border-radius:11px; font-weight:600; font-size:15px; cursor:pointer;
}
.kfzm-dash--login .button:hover, .kfzm-dash--login input[type="submit"]:hover { box-shadow:var(--shadow-acc); }
.kfzm-dash-reg { margin-top:16px; font-size:14px; color:var(--ink-2); }
.kfzm-dash-reg a { color:var(--acc); text-decoration:none; font-weight:600; }
.kfzm-dash-reg a:hover { text-decoration:underline; }
.kfzm-reqform { display:flex; flex-direction:column; gap:14px; }

/* ── Landingpage (ausgeloggt): Hero + Login-Karte ───────────────────────────
 * Vollflächig auf der Portalseite; Designsystem identisch zum Dashboard.
 * Signatur: dezente Tread-Textur + roter Glow + präzise rote Akzentstriche.
 * ========================================================================== */
.kfzm-dash.kfzm-landing {
	display:grid; place-items:center; overflow:hidden; position:relative;
	padding:clamp(28px,5vw,64px) 20px; background:var(--bg);
}
.kfzm-dash.kfzm-landing::before {
	content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
	background:
		radial-gradient(820px 460px at 82% -12%, rgba(225,18,28,.13), transparent 62%),
		radial-gradient(640px 420px at 8% 110%, rgba(91,157,255,.06), transparent 60%),
		repeating-linear-gradient(118deg, rgba(255,255,255,.022) 0 2px, transparent 2px 24px);
}
.kfzm-landing-inner {
	position:relative; z-index:1; width:100%; max-width:1060px;
	display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(30px,5vw,68px); align-items:center;
}

/* Hero */
.kfzm-landing-eyebrow {
	display:inline-flex; align-items:center; gap:11px;
	font:700 12px/1 var(--font-body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2);
}
.kfzm-landing-eyebrow::before { content:""; width:30px; height:3px; border-radius:2px; background:var(--acc); box-shadow:var(--shadow-acc); }
.kfzm-landing-hero h1 {
	font-family:var(--font-display); font-weight:700; margin:20px 0 0; color:var(--ink);
	font-size:clamp(34px,5.2vw,58px); line-height:1.02; letter-spacing:-.025em;
}
.kfzm-landing-hero h1 b { color:var(--acc); font-weight:700; }
.kfzm-landing-sub { margin:18px 0 0; max-width:46ch; font-size:clamp(15px,1.5vw,17px); line-height:1.6; color:var(--ink-2); }
.kfzm-benefits { list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.kfzm-benefit { display:flex; gap:14px; align-items:flex-start; }
.kfzm-benefit-ic { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--panel); border:1px solid var(--line); color:var(--acc); }
.kfzm-benefit-ic svg { width:21px; height:21px; }
.kfzm-benefit-txt { display:flex; flex-direction:column; }
.kfzm-benefit-t { font:700 15.5px/1.25 var(--font-display); color:var(--ink); }
.kfzm-benefit-d { margin-top:3px; font-size:13.5px; line-height:1.5; color:var(--muted); }
.kfzm-landing-trust { display:flex; align-items:center; gap:9px; margin:30px 0 0; font-size:12.5px; color:var(--muted); }
.kfzm-landing-trust svg { width:16px; height:16px; flex:0 0 auto; color:var(--ink-2); }

/* Login-Karte */
.kfzm-landing-auth { width:100%; }
.kfzm-authcard {
	position:relative; overflow:hidden; background:var(--bg-2); border:1px solid var(--line);
	border-radius:var(--radius); box-shadow:var(--shadow); padding:clamp(24px,3vw,34px);
}
.kfzm-authcard::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--acc),var(--acc-2)); }
.kfzm-authcard-brand { display:flex; align-items:center; gap:11px; }
.kfzm-authcard h2 { font-family:var(--font-display); font-weight:700; font-size:23px; letter-spacing:-.01em; margin:18px 0 4px; color:var(--ink); }
.kfzm-authcard-hint { margin:0 0 18px; font-size:13.5px; color:var(--muted); }
.kfzm-authcard label { display:block; font:600 12.5px/1 var(--font-body); color:var(--ink-2); margin-bottom:7px; }
.kfzm-authcard p { margin:0 0 14px; }
.kfzm-authcard input[type="text"], .kfzm-authcard input[type="email"], .kfzm-authcard input[type="password"] {
	width:100%; padding:12px 13px; border:1px solid var(--line-2); border-radius:11px; background:var(--bg); color:var(--ink); font-size:15px;
}
.kfzm-authcard input:focus { outline:none; border-color:var(--acc); box-shadow:var(--ring); }
.kfzm-authcard .login-remember { font-size:13px; color:var(--ink-2); }
.kfzm-authcard .login-remember label { display:flex; align-items:center; gap:8px; margin:0; font-weight:500; }
.kfzm-authcard .login-remember input { width:auto; margin:0; }
.kfzm-authcard .login-submit { margin-bottom:0; }
.kfzm-authcard input[type="submit"], .kfzm-authcard .button {
	width:100%; padding:13px 16px; border:1px solid var(--acc); background:var(--acc); color:#fff;
	border-radius:11px; font:700 15px/1 var(--font-body); cursor:pointer;
	transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kfzm-authcard input[type="submit"]:hover, .kfzm-authcard .button:hover { box-shadow:var(--shadow-acc); transform:translateY(-1px); }
.kfzm-authcard-links { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:13.5px; }
.kfzm-authcard-links a { color:var(--ink-2); text-decoration:none; font-weight:600; }
.kfzm-authcard-links a:hover { color:var(--acc); }

@media (max-width:880px) {
	.kfzm-landing-inner { grid-template-columns:1fr; gap:30px; max-width:460px; }
	.kfzm-landing-auth { order:-1; }            /* Login zuerst auf dem Handy */
	.kfzm-landing-hero h1 { font-size:clamp(30px,9vw,42px); }
	.kfzm-benefits { margin-top:24px; }
}
@media (prefers-reduced-motion:reduce) {
	.kfzm-authcard input[type="submit"]:hover, .kfzm-authcard .button:hover { transform:none; }
}

/* ── Responsive: Tablet/Handy ────────────────────────────────────────────── */
@media (max-width:880px) {
	.kfzm-dash { margin:0; border-radius:0; border-left:0; border-right:0; min-height:100vh; }
	.kfzm-app { grid-template-columns:1fr; }
	.kfzm-sidebar { display:none; }
	.kfzm-topbar-mbrand { display:flex; }
	.kfzm-dash-content { padding:18px 16px calc(78px + env(safe-area-inset-bottom)); }
	.kfzm-bottomnav {
		display:flex; position:fixed; left:0; right:0; bottom:0; z-index:999;
		justify-content:space-around; gap:2px; padding:8px 6px calc(8px + env(safe-area-inset-bottom));
		background:var(--bg-2); backdrop-filter:saturate(160%) blur(12px);
		border-top:1px solid var(--line); isolation:isolate;
	}
	/* Solides Fallback, falls backdrop-filter fehlt – kein Durchklicken auf dahinter liegende Logos/Footer. */
	@supports not (backdrop-filter:blur(1px)) { .kfzm-bottomnav { background:var(--bg-2); } }
	.kfzm-bottom-item { appearance:none; border:0; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 8px; border-radius:10px; color:var(--muted); font:600 10.5px/1.1 var(--font-body); min-width:56px; }
	.kfzm-bottom-item .kfzm-ic { width:22px; height:22px; }
	.kfzm-bottom-item.is-active { color:var(--acc); }
	/* Positionen mobil: beschriftete Feld-Karte statt gequetschtem Mini-Grid. */
	.kfzm-poshead { display:none; }
	.kfzm-posrow { grid-template-columns:1fr 1fr; gap:11px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px; background:var(--panel-2); }
	.kfzm-poscell { display:flex; flex-direction:column; gap:5px; }
	.kfzm-poscell-lbl { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); }
	.kfzm-posrow .kfzm-poscell:nth-child(1), .kfzm-posrow .kfzm-poscell:nth-child(2) { grid-column:1 / -1; }
	.kfzm-posrow .kfzm-num { text-align:left; }
	.kfzm-posdel { grid-column:1 / -1; width:100%; justify-content:center; }
	.kfzm-card--row { flex-direction:column; align-items:stretch; }
	.kfzm-h2 { font-size:21px; }
	.kfzm-toasts { left:12px; right:12px; bottom:calc(86px + env(safe-area-inset-bottom)); max-width:none; }
	.kfzm-input, .kfzm-slot, .kfzm-dash--login input { font-size:16px; } /* iOS-Zoom verhindern */
}

/* Installiert (standalone): randlos */
@media (display-mode:standalone) {
	.kfzm-dash { margin:0; border-radius:0; border:0; }
}

/* ── Ausklappbare Karte ──────────────────────────────────────────────────── */
.kfzm-xcard { padding:0; overflow:hidden; }
.kfzm-xhead { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; background:transparent; border:0; cursor:pointer; text-align:left; padding:15px 18px; color:inherit; font:inherit; }
.kfzm-xhead-main { display:flex; flex-direction:column; gap:7px; min-width:0; }
.kfzm-xhead-main h3 { margin:0; font-size:16px; font-weight:700; font-family:var(--font-display); letter-spacing:-.01em; }
.kfzm-xchev { flex:0 0 auto; color:var(--muted); transition:transform var(--dur) var(--ease); }
.kfzm-xcard.is-open .kfzm-xchev { transform:rotate(90deg); color:var(--acc); }
.kfzm-xhead:hover { background:var(--panel-2); }
.kfzm-xbody { padding:2px 18px 18px; border-top:1px solid var(--line); }
.kfzm-postable { display:flex; flex-direction:column; margin:12px 0; }
.kfzm-posline { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); }
.kfzm-posline:last-child { border-bottom:0; }
.kfzm-posline-sum { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.kfzm-xsums { display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:flex-end; padding:10px 0; border-top:1px solid var(--line-2); font-variant-numeric:tabular-nums; }
.kfzm-xsums-total { font-weight:800; font-family:var(--font-display); color:var(--acc); }

/* ── Segmented-Control / Sub-Tabs ────────────────────────────────────────── */
.kfzm-seg { display:inline-flex; gap:4px; padding:4px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--pill); margin-bottom:12px; flex-wrap:wrap; }
.kfzm-seg-item { appearance:none; border:0; background:transparent; color:var(--ink-2); padding:7px 15px; border-radius:var(--pill); font-size:13px; font-weight:700; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.kfzm-seg-item:hover { color:var(--ink); }
.kfzm-seg-item.is-active { background:var(--acc); color:#fff; box-shadow:var(--shadow-acc); }
.kfzm-doclist { display:flex; flex-direction:column; }
.kfzm-doc-name { display:inline-flex; align-items:center; gap:9px; min-width:0; }
.kfzm-doc-name .kfzm-ic { flex:0 0 auto; width:18px; height:18px; color:var(--muted); }
.kfzm-doc-name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Filter-Panel ────────────────────────────────────────────────────────── */
.kfzm-filterpanel { margin-bottom:14px; }
.kfzm-filtergrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px 14px; margin-bottom:14px; }
.kfzm-quarters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.kfzm-quarters .kfzm-seg-item { border:1px solid var(--line-2); }

/* ── Hinweis-Banner / Tagesgruppe (Termine) ──────────────────────────────── */
.kfzm-notice { display:flex; align-items:center; gap:11px; border-color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--panel)); }
.kfzm-notice .kfzm-ic { flex:0 0 auto; color:var(--warn); }
.kfzm-daygroup { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.02em; text-transform:uppercase; color:var(--muted); margin:16px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
/* Kurze Hervorhebung des Tages-Blocks, wenn die Wochenleiste dorthin scrollt. */
.kfzm-daygroup--focus { animation:kfzm-daypulse 1.6s var(--ease); }
@keyframes kfzm-daypulse {
	0% { color:var(--acc); border-bottom-color:var(--acc); }
	22% { color:var(--acc); border-bottom-color:var(--acc); }
	100% { color:var(--muted); border-bottom-color:var(--line); }
}
@media (prefers-reduced-motion:reduce) { .kfzm-daygroup--focus { animation:none; } }

/* ── Buchungs-Kalender ───────────────────────────────────────────────────── */
.kfzm-cal { margin-top:8px; }
.kfzm-cal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.kfzm-cal-title { font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.01em; text-transform:capitalize; }
.kfzm-cal-wd { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.kfzm-cal-wd span { text-align:center; font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.kfzm-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.kfzm-cal-cell { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; appearance:none; border:1px solid var(--line); background:var(--bg-2); color:var(--ink); border-radius:11px; font-size:14px; font-weight:600; cursor:pointer; position:relative; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); font-variant-numeric:tabular-nums; }
.kfzm-cal-cell.is-empty { border:0; background:transparent; cursor:default; }
.kfzm-cal-cell:not(.is-out):not(.is-empty):hover { border-color:var(--acc); transform:translateY(-1px); }
.kfzm-cal-cell.is-out { opacity:.32; cursor:not-allowed; text-decoration:line-through; }
.kfzm-cal-cell.is-today { box-shadow:inset 0 0 0 1.5px var(--line-2); }
.kfzm-cal-cell.is-sel { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:var(--shadow-acc); }
.kfzm-cal-cell::after { content:""; position:absolute; bottom:6px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:transparent; }
.kfzm-cal-cell.occ-low::after { background:var(--ok); }
.kfzm-cal-cell.occ-mid::after { background:var(--warn); }
.kfzm-cal-cell.occ-hi::after  { background:var(--bad); }
.kfzm-cal-cell.is-sel::after { background:rgba(255,255,255,.8); }
.kfzm-cal-slots { margin-top:16px; }
.kfzm-cal-slots-h { font-weight:700; margin-bottom:10px; font-size:14px; }
.kfzm-cal-cell.in-range { background:var(--acc-soft); border-color:var(--acc-soft); color:var(--ink); }
.kfzm-cal--inline { margin:4px 0 2px; }

/* ── Datumsfeld (klickbarer Kalender statt nativem input[type=date]) ──────── */
.kfzm-datefield { position:relative; }
.kfzm-datefield-btn { width:100%; display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line-2); border-radius:11px; background:var(--bg-2); color:var(--ink); font:inherit; cursor:pointer; text-align:left; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.kfzm-datefield-btn:hover { border-color:var(--acc); }
.kfzm-datefield.is-open .kfzm-datefield-btn { border-color:var(--acc); box-shadow:var(--ring); }
.kfzm-datefield-ic { width:18px; height:18px; color:var(--muted); flex:0 0 auto; }
.kfzm-datefield.is-empty .kfzm-datefield-lbl { color:var(--muted); }
.kfzm-datefield:not(.is-empty) .kfzm-datefield-btn { padding-right:40px; }
.kfzm-datefield-clr { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:26px; height:26px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; transition:color var(--dur) var(--ease), background var(--dur) var(--ease); }
.kfzm-datefield-clr:hover { color:var(--bad); background:var(--panel-2); }
.kfzm-datepop { position:absolute; z-index:40; top:calc(100% + 6px); left:0; min-width:288px; max-width:340px; max-height:min(360px,70vh); overflow:auto; padding:14px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-md); box-shadow:var(--shadow); }
/* Nach oben aufklappen, wenn unten kein Platz ist (z. B. HU-/Inspektions-Datum unten im Formular). */
.kfzm-datepop.is-up { top:auto; bottom:calc(100% + 6px); }
@media (max-width:520px){ .kfzm-datepop { left:0; right:0; min-width:0; } }

/* ── Gebrandeter Dropdown (Ersatz für natives <select>) ──────────────────── */
.kfzm-fselect { position:relative; }
.kfzm-fselect-btn {
	width:100%; display:flex; align-items:center; gap:10px; padding:11px 13px;
	border:1px solid var(--line-2); border-radius:11px; background:var(--bg-2); color:var(--ink);
	font:inherit; font-size:15px; cursor:pointer; text-align:left;
	transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kfzm-fselect-btn:hover { border-color:var(--acc); }
.kfzm-fselect.is-open .kfzm-fselect-btn { border-color:var(--acc); box-shadow:var(--ring); }
.kfzm-fselect-lbl { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kfzm-fselect-chev { width:18px; height:18px; color:var(--muted); flex:0 0 auto; transition:transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.kfzm-fselect.is-open .kfzm-fselect-chev { transform:rotate(180deg); color:var(--acc); }
.kfzm-fselect-pop {
	position:absolute; z-index:45; top:calc(100% + 6px); left:0; right:0; max-height:280px; overflow-y:auto;
	padding:6px; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-md); box-shadow:var(--shadow);
	animation:kfzm-fade var(--dur) var(--ease);
}
.kfzm-fselect-item {
	display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
	padding:9px 11px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--ink); cursor:pointer; font:inherit; font-size:14.5px;
}
.kfzm-fselect-item:hover { background:var(--panel-2); }
.kfzm-fselect-item.is-sel { color:var(--acc); font-weight:700; }
.kfzm-fselect-ck { width:16px; height:16px; color:var(--acc); flex:0 0 auto; }
/* In dichten Rechnungs-/Angebots-Positionen kompakter. */
.kfzm-posrow .kfzm-fselect-btn { padding:9px; font-size:14px; }

/* ── Combobox (durchsuchbare Auswahl, z. B. Kunde) ───────────────────────── */
.kfzm-combo { position:relative; }
.kfzm-combo-list { position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; max-height:280px; overflow-y:auto; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-md); box-shadow:var(--shadow); padding:6px; }
.kfzm-combo-item { display:flex; flex-direction:column; gap:2px; width:100%; text-align:left; padding:9px 11px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--ink); cursor:pointer; font:inherit; }
.kfzm-combo-item:hover { background:var(--panel-2); }
.kfzm-combo-name { font-weight:600; }
.kfzm-combo-sub { font-size:12.5px; color:var(--muted); }
.kfzm-combo-empty { padding:11px; color:var(--muted); font-size:14px; }

/* ── Inline-Status-Auswahl in Listen (gebrandeter Dropdown) ──────────────── */
.kfzm-statussel { width:auto; min-width:150px; }
.kfzm-statussel .kfzm-fselect-btn { padding:6px 11px; border-radius:var(--pill); font-size:12.5px; font-weight:700; background:var(--panel-2); }
.kfzm-fselect.is-disabled { opacity:.55; pointer-events:none; }

/* ── Wochen-Navigation (Termine) ─────────────────────────────────────────── */
.kfzm-weeknav { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:6px 0 14px; }
.kfzm-weeknav-title { font-family:var(--font-display); font-weight:700; font-size:15px; min-width:170px; text-align:center; }
.kfzm-weeknav-today { margin-left:auto; }
.kfzm-rangepick { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.kfzm-rangepick-info { font-weight:700; color:var(--acc); font-family:var(--font-display); }

/* ── Weltkugel-/Website-Link bei Lieferanten ─────────────────────────────── */
.kfzm-card--row h3 { display:flex; align-items:center; gap:9px; }
.kfzm-weblink { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px; border:1px solid var(--line-2); color:var(--muted); transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.kfzm-weblink:hover { color:var(--acc); border-color:var(--acc); }
.kfzm-weblink .kfzm-ic { width:16px; height:16px; }

/* ── Benachrichtigungen (Glocke + Panel) ─────────────────────────────────── */
.kfzm-bell { position:relative; }
.kfzm-bell-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--acc); color:#fff; font:700 11px/18px var(--font-body); text-align:center; box-shadow:0 0 0 2px var(--bg-2); }
.kfzm-notifpanel { max-width:440px; }
.kfzm-notiflist { display:flex; flex-direction:column; gap:8px; max-height:60vh; overflow-y:auto; margin:6px 0 12px; }
.kfzm-notifitem { display:flex; flex-direction:column; gap:4px; text-align:left; width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-2); color:inherit; cursor:pointer; font:inherit; transition:border-color var(--dur) var(--ease); }
.kfzm-notifitem:hover { border-color:var(--acc); }
.kfzm-notifitem.is-unread { border-left:3px solid var(--acc); background:var(--acc-soft); }
.kfzm-notifitem-msg { font-size:14px; font-weight:500; }
.kfzm-notifitem-time { font-size:12px; color:var(--muted); }

/* ── Serviceheft-Timeline (Fahrzeug-Historie) ────────────────────────────── */
.kfzm-svctl { padding-top:6px; padding-bottom:6px; }
.kfzm-svc-ev { display:flex; gap:14px; position:relative; padding:10px 0; }
.kfzm-svc-ev::before { content:""; position:absolute; left:17px; top:34px; bottom:-10px; width:2px; background:var(--line); }
.kfzm-svc-ev:last-child::before { display:none; }
.kfzm-svc-dot { width:36px; height:36px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; border:2px solid var(--line-2); background:var(--panel-2); color:var(--muted); z-index:1; }
.kfzm-svc-dot .kfzm-ic { width:18px; height:18px; }
.kfzm-svc-dot--rechnung { border-color:var(--acc); color:var(--acc); background:var(--acc-soft); }
.kfzm-svc-dot--termin { border-color:var(--info); color:var(--info); background:var(--info-bg); }
.kfzm-svc-body { display:flex; flex-direction:column; gap:5px; min-width:0; padding-top:2px; }
.kfzm-svc-date { font-size:12px; color:var(--muted); font-weight:600; }
.kfzm-svc-title { font-weight:700; font-family:var(--font-display); letter-spacing:-.01em; }
.kfzm-svc-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* ── Aufklappbare Verlaufs-Liste (KM / Arbeiten) ─────────────────────────── */
.kfzm-histlist { display:flex; flex-direction:column; }
.kfzm-histrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.kfzm-histrow:last-child { border-bottom:0; }
.kfzm-histrow-main { min-width:0; }
.kfzm-histright { font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; font-family:var(--font-display); }

/* ── Terminvorschlag (pending) + auffällige Vorschlagskarte ──────────────── */
.kfzm-pending { display:flex; align-items:center; gap:8px; margin-top:9px; padding:8px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:600; color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, var(--panel)); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.kfzm-pending .kfzm-ic { width:16px; height:16px; flex:0 0 auto; }
.kfzm-proposal { border:1.5px solid var(--acc); background:linear-gradient(180deg, var(--acc-soft), var(--panel) 60%); box-shadow:var(--shadow); }
.kfzm-proposal-head { display:flex; align-items:center; gap:9px; font-weight:800; font-family:var(--font-display); color:var(--acc); text-transform:uppercase; letter-spacing:.03em; font-size:13px; }
.kfzm-proposal-head .kfzm-ic { width:18px; height:18px; }
.kfzm-proposal-when { font-family:var(--font-display); font-weight:800; font-size:23px; letter-spacing:-.01em; margin:8px 0 2px; }

/* ── Kontaktkarte (Kundendatei) ──────────────────────────────────────────── */
.kfzm-contactcard { display:flex; flex-direction:column; gap:12px; }
.kfzm-contactrow { display:flex; flex-wrap:wrap; gap:9px; }
.kfzm-pill--link { text-decoration:none; cursor:pointer; }
.kfzm-pill--link:hover { border-color:var(--acc); color:var(--acc); }
.kfzm-kv { padding:7px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.kfzm-kv:last-child { border-bottom:0; }
.kfzm-switchrow { justify-content:space-between; padding:6px 0; }

/* ── Mobile-Feinschliff / Premium ────────────────────────────────────────── */
@media (max-width:880px) {
	.kfzm-actions { width:100%; }
	.kfzm-card--row .kfzm-actions .kfzm-btn { flex:1 1 auto; justify-content:center; }
	.kfzm-card--click .kfzm-ic { align-self:flex-end; }
	.kfzm-weeknav { gap:8px; }
	.kfzm-weeknav-title { min-width:0; flex:1 1 auto; font-size:14px; }
	.kfzm-weeknav-today { margin-left:0; width:100%; order:3; }
	.kfzm-contactrow .kfzm-pill { flex:1 1 auto; justify-content:center; }
	.kfzm-proposal-when { font-size:20px; }
	.kfzm-cal-grid { gap:4px; }
	.kfzm-cal-cell { border-radius:9px; font-size:13px; }
	.kfzm-statussel { width:100%; }
	.kfzm-seg { width:100%; justify-content:space-between; }
	.kfzm-seg-item { flex:1 1 auto; text-align:center; }
}
@media (max-width:420px) {
	.kfzm-dash-content { padding-left:13px; padding-right:13px; }
	.kfzm-h2 { font-size:19px; }
	.kfzm-slots { gap:6px; }
}

/* ── Klick-Feedback: Ripple + Press-Scale + Erfolg + Fehler-Shake ─────────── */
.kfzm-ripple {
	position:absolute; border-radius:50%; pointer-events:none; z-index:0;
	background:currentColor; opacity:.18; transform:scale(0);
	animation:kfzm-ripple .5s var(--ease) forwards;
}
/* Ripple-Hosts müssen den Kreis beschneiden (bewusst nur Elemente OHNE äußeren Glow). */
.kfzm-side-item, .kfzm-bottom-item, .kfzm-fselect-item, .kfzm-subtab,
.kfzm-combo-item, .kfzm-notifitem { position:relative; overflow:hidden; }
/* Inhalt der Ripple-Hosts über den Ripple heben – aber NICHT den Ripple selbst:
 * sonst kippt diese Regel den (gleich spezifischen, aber früher notierten) Ripple
 * von position:absolute auf relative, er kommt in den Fluss und bläht das geklickte
 * Element für die Dauer der Animation auf ~1,4× seiner Breite auf (das „Riesen"-Bug). */
.kfzm-side-item > *:not(.kfzm-ripple), .kfzm-bottom-item > *:not(.kfzm-ripple), .kfzm-fselect-item > *:not(.kfzm-ripple), .kfzm-notifitem > *:not(.kfzm-ripple), .kfzm-combo-item > *:not(.kfzm-ripple) { position:relative; z-index:1; }
@keyframes kfzm-ripple { to { transform:scale(1); opacity:0; } }

/* Press-Scale für Elemente mit Glow/Auswahl (Ripple-frei). */
.kfzm-iconbtn:active, .kfzm-weekday:active, .kfzm-seg-item:active, .kfzm-cal-cell:not(.is-out):not(.is-empty):active { transform:scale(.96); }
.kfzm-card--click:active { transform:scale(.99); }

/* Erfolgs-Puls am Speichern-Button (animierter Haken zieht sich nach). */
.kfzm-btn.is-done { background:var(--ok); border-color:var(--ok); box-shadow:0 8px 22px rgba(52,210,123,.4); }
.kfzm-btn.is-done .kfzm-ic { animation:kfzm-checkpop .42s var(--ease); }
@keyframes kfzm-checkpop { 0%{ transform:scale(.3); opacity:0; } 55%{ transform:scale(1.25); } 100%{ transform:scale(1); opacity:1; } }

/* Erfolgs-Toast: Haken zeichnet sich ein. */
.kfzm-toast--ok .kfzm-ic path { stroke-dasharray:24; stroke-dashoffset:24; animation:kfzm-draw .5s var(--ease) .05s forwards; }
@keyframes kfzm-draw { to { stroke-dashoffset:0; } }

/* Fehler-Shake (Formular-Meldung / ungültiges Feld). */
.kfzm-shake { animation:kfzm-shake .42s var(--ease); }
@keyframes kfzm-shake { 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(3px); } }
.kfzm-input.is-invalid { border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg); }

/* ── Seiten-Nummerierung (Pagination) ────────────────────────────────────── */
.kfzm-pager { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin:18px 0 4px; }
.kfzm-pager-num, .kfzm-pager-nav { min-width:38px; height:38px; padding:0 10px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); border-radius:10px; font:inherit; font-weight:600; cursor:pointer; font-variant-numeric:tabular-nums; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.kfzm-pager-num:hover:not(.is-active), .kfzm-pager-nav:hover:not(:disabled) { border-color:var(--acc); }
.kfzm-pager-num.is-active { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:var(--shadow-acc); }
.kfzm-pager-nav:disabled { opacity:.4; cursor:default; }
.kfzm-pager-ell { color:var(--muted); padding:0 2px; }

/* ── Schadensaufnahme je Rad (Reifen) ────────────────────────────────────── */
.kfzm-dmgmatrix { margin:6px 0 4px; }
.kfzm-dmg-group { margin-top:10px; border:1px solid var(--line-2); border-radius:11px; background:var(--bg-2); overflow:hidden; }
.kfzm-dmg-title { display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:700; font-size:13.5px; padding:11px 13px; color:var(--ink); cursor:pointer; list-style:none; user-select:none; }
.kfzm-dmg-title::-webkit-details-marker { display:none; }
.kfzm-dmg-title::after { content:"▾"; color:var(--muted); font-size:12px; transition:transform var(--dur) var(--ease); margin-left:auto; }
.kfzm-dmg-group[open] > .kfzm-dmg-title::after { transform:rotate(180deg); }
.kfzm-dmg-title:hover { background:var(--panel); }
.kfzm-dmg-count { font:700 11px/1 var(--font-body); padding:3px 8px; border-radius:999px; background:var(--panel-2); color:var(--muted); }
.kfzm-dmg-count.is-on { background:var(--acc-soft); color:var(--acc); }
.kfzm-dmg-body { padding:4px 13px 10px; }
.kfzm-dmg-row { display:grid; grid-template-columns:120px 1fr; gap:10px; align-items:start; padding:7px 0; border-bottom:1px solid var(--line); }
.kfzm-dmg-row:last-child { border-bottom:0; }
.kfzm-dmg-pos { font-size:13px; color:var(--muted); padding-top:4px; }
.kfzm-dmg-chips { display:flex; flex-wrap:wrap; gap:6px; }
.kfzm-chip { padding:6px 11px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); border-radius:999px; font:inherit; font-size:12.5px; cursor:pointer; transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.kfzm-chip:hover { border-color:var(--acc); }
.kfzm-chip.is-on { background:var(--acc); border-color:var(--acc); color:#fff; }
.kfzm-chip:active { transform:scale(.96); }
@media (max-width:560px){ .kfzm-dmg-row { grid-template-columns:1fr; gap:4px; } .kfzm-dmg-pos { padding-top:0; } }

/* ── Tag-/Chip-Editor (z. B. Schadensarten in den Einstellungen) ─────────── */
.kfzm-tageditor { display:flex; flex-direction:column; gap:10px; margin:2px 0 6px; }
.kfzm-tagchips { display:flex; flex-wrap:wrap; gap:7px; }
.kfzm-tag { display:inline-flex; align-items:center; gap:7px; padding:5px 6px 5px 12px; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); border-radius:999px; font-size:13px; }
.kfzm-tag-x { width:20px; height:20px; border:0; border-radius:50%; background:var(--panel-2); color:var(--muted); font-size:12px; line-height:1; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.kfzm-tag-x:hover { background:var(--acc); color:#fff; }

/* ── Inline-Neuanlage (Kunde/Fahrzeug direkt im Termin) ──────────────────── */
.kfzm-inlineactions { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 6px; }
.kfzm-btn--sm { padding:7px 11px; font-size:13px; min-height:36px; }
.kfzm-inlinecreate { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:11px; margin:0 0 8px; background:var(--bg-2); border:1px dashed var(--line-2); border-radius:11px; }
.kfzm-inlinecreate .kfzm-input { flex:1 1 150px; min-width:120px; }
.kfzm-inlinecreate .kfzm-field { flex:1 1 150px; min-width:140px; gap:4px; }
.kfzm-inlinecreate .kfzm-field-label { font-size:11px; }

/* ── Logo-Upload (Einstellungen → Rechnung/Angebot) ──────────────────────── */
.kfzm-logoprev { display:flex; align-items:center; justify-content:center; min-height:72px; padding:12px; margin:2px 0 4px; background:var(--bg-2); border:1px dashed var(--line-2); border-radius:11px; }
.kfzm-logoimg { max-height:80px; max-width:240px; object-fit:contain; }

/* ── Prominente Fahrzeugdaten (Fahrzeug-Detailansicht) ───────────────────── */
.kfzm-vehdata { display:flex; flex-direction:column; gap:13px; margin-top:-6px; }
.kfzm-vehdata-pills { display:flex; flex-wrap:wrap; gap:8px; }
.kfzm-vehdata-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 18px; }
.kfzm-vehdata-item { display:flex; flex-direction:column; gap:3px; min-width:0; }
.kfzm-vehdata-label { font:700 10.5px/1 var(--font-body); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.kfzm-vehdata-val { font:700 16px/1.2 var(--font-display); letter-spacing:-.01em; color:var(--ink); word-break:break-word; }
@media (max-width:560px) { .kfzm-vehdata-grid { grid-template-columns:1fr 1fr; } }

/* ── Neukunden: Nav-Badge + Karten ───────────────────────────────────────── */
.kfzm-navbadge {
	min-width:18px; height:18px; padding:0 5px; border-radius:9px;
	display:inline-flex; align-items:center; justify-content:center;
	font:800 11px/1 var(--font-body); background:var(--acc); color:#fff;
}
.kfzm-side-item .kfzm-navbadge { margin-left:auto; }
.kfzm-bottom-item { position:relative; }
.kfzm-bottom-item .kfzm-navbadge { position:absolute; top:0; right:6px; box-shadow:0 0 0 2px var(--bg-2); }
.kfzm-regcard { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.kfzm-regcard-info { min-width:0; display:flex; flex-direction:column; gap:3px; }
.kfzm-regcard-plate { font:700 13.5px/1.2 var(--font-display); color:var(--acc); letter-spacing:.01em; }
.kfzm-regcard .kfzm-actions { flex:0 0 auto; }

/* ── Selbst-Registrierung: 2-spaltige Kurzfelder ─────────────────────────── */
.kfzm-signup-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
@media (max-width:480px) { .kfzm-signup-grid { grid-template-columns:1fr; } }

/* ── prefers-reduced-motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
	.kfzm-dash *, .kfzm-dash *::before, .kfzm-dash *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
	.kfzm-card--click:hover, .kfzm-btn:hover { transform:none; }
}