/* Giulietta – Gestaltung
   Idee: italienischer Karosseriebau. Weinroter Lack als einziger kräftiger Akzent, Messing für feine Details,
   Grafit für die Seitenleiste, kühles Porzellan als Grund. Überschriften in Bodoni (Parma, 18. Jh.),
   Text in Figtree. Der Schriftzug „Giulietta“ ist das eine auffällige Element – alles andere bleibt ruhig. */
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/bodoni-moda-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/bodoni-moda-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/bodoni-moda-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/bodoni-moda-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:italic;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#eceef1; --surface:#ffffff; --surface-2:#f6f7f9; --surface-3:#eef0f3;
  --line:#e2e4e9; --line-2:#cdd1d8;
  --fg:#1c1d22; --fg-2:#3a3c45; --muted:#6b6e78;
  --accent:#7b1e3a; --accent-2:#5f1529; --accent-fg:#ffffff; --accent-weak:#f4e7eb;
  --gold:#b08d4c;
  --ok:#1f7a4a; --ok-weak:#e3f3ea; --warn:#a6620d; --warn-weak:#fbf0df; --bad:#d0342c; --bad-weak:#fde8e6;
  --side:#211f24; --side-fg:#c8c3c6; --side-act:#ffffff; --side-hover:rgb(255 255 255 / .06);
  --sh-1:0 1px 2px rgb(28 29 34 / .04),0 2px 8px rgb(28 29 34 / .05);
  --sh-2:0 14px 40px rgb(28 29 34 / .16),0 3px 10px rgb(28 29 34 / .06);
  --r:12px; --r-sm:8px;
  --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121114; --surface:#1b1a1e; --surface-2:#211f24; --surface-3:#28262c;
  --line:#2e2c33; --line-2:#3c3942;
  --fg:#eeeaec; --fg-2:#cfc9cd; --muted:#9a949a;
  --accent:#d97a93; --accent-2:#e696aa; --accent-fg:#1a0d12; --accent-weak:rgb(217 122 147 / .15);
  --gold:#c9a764; --bad:#f07a70; --bad-weak:rgb(240 122 112 / .14);
  --side:#0e0d10; --side-fg:#aaa3a8;
  --sh-1:0 1px 2px rgb(0 0 0 / .45); --sh-2:0 14px 40px rgb(0 0 0 / .55)}}
:root[data-theme="dark"]{
  --bg:#121114; --surface:#1b1a1e; --surface-2:#211f24; --surface-3:#28262c;
  --line:#2e2c33; --line-2:#3c3942;
  --fg:#eeeaec; --fg-2:#cfc9cd; --muted:#9a949a;
  --accent:#d97a93; --accent-2:#e696aa; --accent-fg:#1a0d12; --accent-weak:rgb(217 122 147 / .15);
  --gold:#c9a764; --bad:#f07a70; --bad-weak:rgb(240 122 112 / .14);
  --side:#0e0d10; --side-fg:#aaa3a8;
  --sh-1:0 1px 2px rgb(0 0 0 / .45); --sh-2:0 14px 40px rgb(0 0 0 / .55)}

body{font-size:15px;letter-spacing:.003em}

/* ---- Schriftzug ---- */
.brand{flex-direction:column;align-items:flex-start;gap:2px;padding:4px 10px 14px;margin-bottom:6px;border-bottom:1px solid rgb(255 255 255 / .08)}
.g-mark{font-family:var(--display);font-style:italic;font-weight:600;font-size:34px;line-height:1;letter-spacing:-.01em;color:#fff;position:relative;padding-bottom:7px}
.g-mark::after{content:"";position:absolute;left:2px;bottom:0;width:46px;height:1.5px;background:var(--gold)}
.brand small{font-size:11.5px;letter-spacing:.04em;color:var(--side-fg);margin-top:6px}
.topbar .g-mark{font-size:24px;padding-bottom:0}.topbar .g-mark::after{display:none}

/* ---- Seitenleiste ---- */
.nav2 button{font-weight:500}
.n2-h{text-transform:none!important;letter-spacing:0!important;font-size:14.5px!important;font-weight:650!important}
.n2-s{opacity:.6}
.nav2 .n2-top[aria-current="page"],.nav2 .n2-items button[aria-current="page"]{background:rgb(255 255 255 / .07);color:#fff}
.nav2 .n2-top[aria-current="page"]::before,.nav2 .n2-items button[aria-current="page"]::before{background:var(--gold);width:2px}
.n2-g.act .n2-h{color:#fff!important}
.n2-g.act .n2-h .i{color:var(--gold);opacity:1}
.nav2 .badge{background:var(--accent);box-shadow:0 0 0 1.5px var(--side)}

/* ---- Überschriften ---- */
.view-head h1{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-.005em;line-height:1.05}
.view-head .sub{font-size:14.5px;margin-top:6px}
.drawer-head h3,.akte-head h3{font-family:var(--display);font-weight:600;letter-spacing:-.005em}
.panel-head h2,.panel h2,.fgroup h4{letter-spacing:0}

/* ---- Kennzahlen: Zahl in Bodoni, Beschriftung ruhig, ohne Großbuchstaben ---- */
.kpi{border-radius:14px;padding:15px 18px 14px}
.kpi::before{width:3px;background:var(--line-2)}
.kpi:has(b.warn)::before{background:var(--gold)}
.kpi span{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--muted)}
.kpi b{font-family:var(--display);font-weight:600;font-size:34px;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}

/* ---- Knöpfe und Auswahl ---- */
.btn{border-radius:999px;padding:9px 17px;font-weight:600}
.btn.small{border-radius:999px}
.btn.primary{box-shadow:0 1px 0 rgb(255 255 255 / .12) inset,0 2px 6px rgb(123 30 58 / .22)}
.btn.primary:disabled{box-shadow:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-weak)!important}
:focus-visible{outline-color:var(--accent)}

/* ---- Flächen ---- */
.panel,.fgroup,.st-day,.au-day,.kpi{border-color:var(--line)}
.st-day{border-radius:14px}

/* ---- Anmeldung ---- */
.hero .g-mark{font-size:clamp(64px,8vw,112px);padding-bottom:18px;color:#fff}
.hero .g-mark::after{width:96px;height:2px;bottom:4px}
/* Demo-Hinweis */
.demo-band{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--accent-weak);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);color:var(--fg-2);border-radius:12px;padding:8px 10px 8px 14px;margin-bottom:12px;font-size:13.5px}
.demo-band b{color:var(--accent)}
/* Vorgang abschließen */
.abs-hero{display:flex;flex-direction:column;gap:4px;border-radius:14px;padding:14px 16px;margin-bottom:14px;border:1px solid var(--line)}
.abs-hero b{font-family:var(--display);font-size:22px;font-weight:600}
.abs-hero span{color:var(--fg-2);font-size:14px}
.abs-hero.ok{background:var(--ok-weak);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}.abs-hero.ok b{color:var(--ok)}
.abs-hero.bad{background:var(--warn-weak);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}.abs-hero.bad b{color:var(--warn)}
.abs-l{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.abs-l li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}.abs-l li:first-child{border-top:0}
.abs-l li div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.abs-l li small{color:var(--muted);font-size:13px}
.abs-i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:none;font-size:14px}
.abs-i.ok{background:var(--ok-weak);color:var(--ok)}.abs-i.bad{background:var(--bad-weak);color:var(--bad)}.abs-i.warn{background:var(--warn-weak);color:var(--warn)}
.abs-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.abs-done{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;background:var(--ok-weak);border-radius:12px;padding:10px 12px}
.abs-done b{color:var(--ok)}.abs-done span{flex:1;min-width:140px;font-size:13px;color:var(--fg-2)}
/* HU-Bericht */
.hu-ov .scrim{position:fixed;inset:0;background:rgb(20 18 24 / .45);z-index:60}
.hu-ov .drawer{position:fixed;z-index:61;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;height:auto!important;max-height:calc(100dvh - 24px);border-radius:16px!important;border:1px solid var(--line)!important}
.hu-ov .hu-my{margin-top:12px}
.tchk input:disabled+span,.trow input:disabled{opacity:.35;cursor:not-allowed}
/* Tablet: Fahrzeugakte über die ganze Breite, Reiter wischbar, ruhigerer Kopf */
@media (min-width:761px) and (max-width:1279px){
  .drawer.akte{left:0!important}
  .akte-grid{grid-template-columns:300px minmax(0,1fr)}
  .akte-side{padding:12px}
  .akte-head h3{font-size:22px}
  .akte-main .drawer-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
  .akte-main .drawer-tabs::-webkit-scrollbar{display:none}
  .akte-main .drawer-tabs button{flex:none}
  .stepbar .stepper button{font-size:12px}
}
@media (min-width:761px) and (max-width:1023px){
  .akte-body{overflow-y:auto}
  .akte-grid{grid-template-columns:minmax(0,1fr);height:auto}
  .akte-side,.akte-main{overflow:visible}
  .akte-side{border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .akte-side>*{grid-column:auto}
}
.dv-bar{background:var(--side)!important}
/* Hilfe & Handbuch */
html.hb-lock,html.hb-lock body{overflow:hidden}
#hb{position:fixed;inset:0;z-index:900;display:none;flex-direction:column;background:var(--bg)}
#hb.on{display:flex}
.hb-bar{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;background:var(--side);color:#fff;flex-wrap:wrap}
.hb-t{font-family:var(--display);font-style:italic;font-weight:600;font-size:24px;flex:1;min-width:140px}
.hb-bar input{flex:1 1 260px;max-width:420px;min-height:42px;border-radius:999px;border:0;padding:0 16px;font:inherit;background:rgb(255 255 255 / .1);color:#fff}
.hb-bar input::placeholder{color:rgb(255 255 255 / .6)}
.hb-b{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgb(255 255 255 / .22);background:rgb(255 255 255 / .08);color:#fff;font:600 14px/1 var(--body);cursor:pointer}
.hb-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hb-back{background:var(--gold);border-color:transparent;color:#1b1205}
.hb-wrap{flex:1;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr)}
.hb-nav{overflow-y:auto;padding:14px 10px;border-right:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;gap:2px}
.hb-nav button{border:0;background:none;text-align:left;padding:10px 12px;border-radius:10px;font:500 15px/1.3 var(--body);color:var(--fg-2);cursor:pointer}
.hb-nav button:hover{background:var(--surface-3)}.hb-nav button[aria-current="true"]{background:var(--accent-weak);color:var(--accent);font-weight:700}
.hb-main{overflow-y:auto;padding:26px clamp(18px,4vw,56px) 60px}
.hb-c{max-width:740px;margin-bottom:34px}
.hb-c h2{font-family:var(--display);font-weight:600;font-size:34px;margin:0;line-height:1.1}
.hb-r{color:var(--muted);font-size:13.5px;margin:6px 0 14px}
.hb-c h4{font-size:16px;margin:20px 0 6px}
.hb-c p,.hb-c li,.hb-c dd{font-size:16px;line-height:1.6;color:var(--fg-2)}
.hb-c li{margin:4px 0}.hb-c dt{font-weight:700;margin-top:12px;font-size:16px}.hb-c dd{margin:2px 0 0}
.hb-c mark{background:color-mix(in srgb,var(--gold) 35%,transparent);color:inherit;border-radius:3px;padding:0 2px}
@media (max-width:760px){.hb-wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.hb-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}.hb-nav button{flex:none;white-space:nowrap}.hb-c h2{font-size:28px}.hb-t{font-size:20px}}
/* Lead-Detail: Status oben, Kontakt + Verlauf links, Kunde + Anfrage rechts */
.drawer.ld .drawer-body.ld-body{padding-top:18px}
.ld-act{display:flex;gap:6px;flex-wrap:wrap}
.ld-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.ld-main,.ld-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.ld-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--sh-1)}
.ld-card h4{margin:0;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:0;text-transform:none;color:var(--fg)}
.ld-card label{margin:0}
.ld-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ld-pipe{display:flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--surface-2)}
.ld-pipe button{flex:1;border:0;background:none;padding:10px 6px;font:600 14px/1.1 var(--body);color:var(--fg-2);cursor:pointer;border-left:1px solid var(--line);min-width:0}
.ld-pipe button:first-child{border-left:0}
.ld-pipe button[aria-pressed="true"]{background:var(--stage);color:#fff}
.ld-typ{display:flex;flex-wrap:wrap;gap:6px}
.ld-typ button{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:7px 13px;font:600 13.5px/1 var(--body);color:var(--fg-2);cursor:pointer}
.ld-typ button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.ld-card textarea{min-height:84px}
.ld-veh{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:6px;background:var(--surface-2);text-align:left;cursor:pointer;font:inherit;color:inherit}
.ld-veh img{width:84px;height:52px;object-fit:cover;border-radius:8px;flex:none}
.ld-veh span{display:flex;flex-direction:column;min-width:0}.ld-veh b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ld-veh small{color:var(--muted);font-size:12.5px}
.ld-tg{display:flex;gap:8px;flex-wrap:wrap}
.ld-sw{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:999px;padding:7px 14px 7px 8px;cursor:pointer;font-weight:600;font-size:14px;color:var(--fg-2)}
.ld-sw input{appearance:none;-webkit-appearance:none;width:34px!important;height:20px!important;min-height:0!important;border-radius:999px;background:var(--line-2);position:relative;margin:0;padding:0!important;border:0!important;cursor:pointer;transition:background .15s}
.ld-sw input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgb(0 0 0 / .25)}
.ld-sw input:checked{background:var(--accent)}.ld-sw input:checked::after{transform:translateX(14px)}
.ld-sw:has(input:checked){border-color:var(--accent);color:var(--accent)}
.ld-hist{display:flex;flex-direction:column}
.ld-h{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding-bottom:14px;position:relative}
.ld-h i{width:10px;height:10px;border-radius:50%;background:var(--gold);margin-top:5px;box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.ld-h::before{content:"";position:absolute;left:4.5px;top:18px;bottom:0;width:1px;background:var(--line-2)}
.ld-h:last-of-type::before{display:none}
.ld-h b{font-size:14.5px}.ld-h small{display:block;color:var(--muted);font-size:12.5px}.ld-h p{margin:4px 0 0;font-size:14.5px;white-space:pre-wrap}
.ld-meta{margin:4px 0 0}
.ld-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ld-foot #l_msg .notice{margin:0}
@media (max-width:1000px){.ld-grid{grid-template-columns:minmax(0,1fr)}.ld-grid.neu .ld-side{order:-1}}
@media (max-width:560px){.ld-2{grid-template-columns:1fr}.ld-pipe{flex-wrap:wrap;border-radius:14px}.ld-pipe button{flex:1 1 30%;border-top:1px solid var(--line)}}