/* ================================================================
   FAHRZEUG-KONTAKT — Design System
   Ästhetik: Professionell · Minimalistisch · Tool-Grade Dark
   Keine externen CDNs. Kein Framework. Lokale Fonts.
================================================================ */

/* ── Lokale Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: "AppSans";
  src: url("../fonts/AppSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "AppSans";
  src: url("../fonts/AppSans-Medium.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "AppSans";
  src: url("../fonts/AppSans-Bold.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --c-bg:        #0a0a0a;
  --c-bg-1:      #111111;
  --c-bg-2:      #161616;
  --c-bg-3:      #1c1c1c;
  --c-bg-4:      #222222;

  --c-line:      rgba(255,255,255,0.07);
  --c-line-2:    rgba(255,255,255,0.12);

  --c-text:      #f0f0f0;
  --c-text-2:    #888888;
  --c-text-3:    #444444;

  --c-acc:       #e8e8e8;      /* Haupt-Akzent: fast-weiß */
  --c-acc-dim:   rgba(232,232,232,0.06);

  --c-ok:        #4ade80;
  --c-ok-dim:    rgba(74,222,128,0.08);
  --c-warn:      #facc15;
  --c-warn-dim:  rgba(250,204,21,0.08);
  --c-err:       #f87171;
  --c-err-dim:   rgba(248,113,113,0.08);

  --r-sm:   6px;
  --r:      10px;
  --r-lg:   14px;
  --r-xl:   18px;

  --sh:     0 4px 20px rgba(0,0,0,0.6);
  --sh-lg:  0 16px 48px rgba(0,0,0,0.7);

  --ease:   cubic-bezier(0.4,0,0.2,1);
  --t:      180ms;
  --t-slow: 300ms;
}

/* ── Reset ────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { background:var(--c-bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:"AppSans",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}
.site-footer { margin-top:48px; }
img { display:block; max-width:100%; }
a   { color:var(--c-acc); text-decoration:none; transition:opacity var(--t) var(--ease); }
a:hover { opacity:.7; }
h1,h2,h3,h4 { font-weight:700; line-height:1.15; letter-spacing:-0.025em; color:var(--c-text); }
ul { list-style:none; }
button,input,textarea,select { font-family:inherit; }
button { cursor:pointer; }

/* ── Utility ──────────────────────────────────────────────────── */
.container { width:min(1080px, calc(100% - 32px)); margin-inline:auto; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }

/* ── Flash / Alert ────────────────────────────────────────────── */
.flash {
  padding:12px 16px; border-radius:var(--r); font-size:13px; font-weight:500;
  margin-bottom:18px; border:1px solid; line-height:1.5;
  animation:slideDown var(--t-slow) var(--ease);
}
.flash-success { background:var(--c-ok-dim);   border-color:rgba(74,222,128,.15);  color:var(--c-ok);   }
.flash-error   { background:var(--c-err-dim);  border-color:rgba(248,113,113,.15); color:var(--c-err);  }
.flash-info    { background:var(--c-acc-dim);  border-color:var(--c-line-2);       color:var(--c-text); }
.flash-warning { background:var(--c-warn-dim); border-color:rgba(250,204,21,.15);  color:var(--c-warn); }

/* ── Nav ──────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  height:56px; display:flex; align-items:center;
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--c-line);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:min(1080px,calc(100% - 32px)); margin-inline:auto;
}
.nav-logo {
  display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:700; color:var(--c-text); letter-spacing:-0.02em;
  text-decoration:none;
}
.nav-logo-mark {
  width:26px; height:26px; border:1px solid var(--c-line-2); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-link {
  font-size:13px; font-weight:500; color:var(--c-text-2);
  padding:6px 12px; border-radius:var(--r-sm);
  transition:all var(--t) var(--ease); text-decoration:none;
}
.nav-link:hover,.nav-link.active { color:var(--c-text); background:rgba(255,255,255,.05); opacity:1; }
.nav-btn {
  font-size:13px; font-weight:600; color:var(--c-bg);
  background:var(--c-text); padding:7px 14px; border-radius:var(--r-sm);
  border:none; transition:all var(--t) var(--ease); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.nav-btn:hover { background:var(--c-acc); opacity:1; }
.nav-btn--ghost {
  background:transparent;
  color:var(--c-text-2);
  border:1px solid var(--c-line);
}
.nav-btn--ghost:hover { background:rgba(255,255,255,.06); color:var(--c-text); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 18px; border-radius:var(--r); font-size:14px; font-weight:600;
  letter-spacing:-0.01em; border:1px solid transparent;
  transition:all var(--t) var(--ease); cursor:pointer; text-decoration:none;
  white-space:nowrap; user-select:none;
}
.btn:disabled { opacity:.38; cursor:not-allowed; pointer-events:none; }

.btn-primary {
  background:var(--c-text); color:var(--c-bg); border-color:var(--c-text);
}
.btn-primary:hover { background:var(--c-acc); border-color:var(--c-acc); opacity:1; }

.btn-ghost {
  background:transparent; color:var(--c-text-2); border-color:var(--c-line);
}
.btn-ghost:hover { color:var(--c-text); border-color:var(--c-line-2); background:rgba(255,255,255,.04); opacity:1; }

.btn-danger {
  background:var(--c-err-dim); color:var(--c-err); border-color:rgba(248,113,113,.2);
}
.btn-danger:hover { background:rgba(248,113,113,.14); opacity:1; }

.btn-ok {
  background:var(--c-ok-dim); color:var(--c-ok); border-color:rgba(74,222,128,.2);
}
.btn-ok:hover { background:rgba(74,222,128,.14); opacity:1; }

.btn-lg  { padding:13px 22px; font-size:15px; border-radius:var(--r-lg); }
.btn-sm  { padding:6px 12px; font-size:12px; border-radius:var(--r-sm); }
.btn-full { width:100%; }

/* ── Forms ────────────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:11px; font-weight:700; color:var(--c-text-2);
  margin-bottom:7px; letter-spacing:0.06em; text-transform:uppercase;
}
.form-input {
  width:100%; background:var(--c-bg-2); border:1px solid var(--c-line);
  border-radius:var(--r); padding:11px 14px; font-size:14px; color:var(--c-text);
  transition:all var(--t) var(--ease); outline:none; appearance:none;
}
.form-input::placeholder { color:var(--c-text-3); }
.form-input:hover { border-color:var(--c-line-2); }
.form-input:focus { border-color:rgba(255,255,255,.28); background:var(--c-bg-3); box-shadow:0 0 0 3px rgba(255,255,255,.04); }
textarea.form-input { resize:vertical; min-height:90px; }
.form-hint  { font-size:12px; color:var(--c-text-3); margin-top:5px; line-height:1.5; }
.form-error { font-size:12px; color:var(--c-err); margin-top:5px; display:flex; align-items:center; gap:4px; }

/* ── Cards ────────────────────────────────────────────────────── */
.card {
  background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl);
  padding:22px; transition:border-color var(--t) var(--ease);
}
.card:hover { border-color:var(--c-line-2); }
.card-title { font-size:14px; font-weight:700; color:var(--c-text); letter-spacing:-.01em; }

/* ── Divider ──────────────────────────────────────────────────── */
.divider { display:flex; align-items:center; gap:12px; margin:18px 0; font-size:12px; color:var(--c-text-3); }
.divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--c-line); }

/* ── Pills / Badges ───────────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:100px; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
}
.pill::before { content:""; width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.pill-open     { background:var(--c-acc-dim); color:var(--c-acc); border:1px solid var(--c-line-2); }
.pill-open::before { background:var(--c-acc); animation:blink 1.6s infinite; }
.pill-resolved { background:var(--c-ok-dim);   color:var(--c-ok);   border:1px solid rgba(74,222,128,.15); }
.pill-resolved::before { background:var(--c-ok); }
.pill-expired  { background:var(--c-warn-dim);  color:var(--c-warn); border:1px solid rgba(250,204,21,.15); }
.pill-expired::before  { background:var(--c-warn); }
.pill-blocked  { background:var(--c-err-dim);   color:var(--c-err);  border:1px solid rgba(248,113,113,.15); }
.pill-blocked::before  { background:var(--c-err); }

/* ── Auth Pages ───────────────────────────────────────────────── */
.auth-page {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:40px 16px;
  background:var(--c-bg);
}
.auth-box { width:100%; max-width:400px; }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-logo-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--c-line-2); border-radius:var(--r-lg);
  font-size:20px; margin-bottom:12px;
}
.auth-logo h1 { font-size:20px; font-weight:800; margin-bottom:4px; }
.auth-logo p  { font-size:13px; color:var(--c-text-3); }
.auth-card {
  background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl);
  padding:28px; box-shadow:var(--sh); margin-bottom:14px;
}
.auth-card h2 { font-size:17px; margin-bottom:22px; }
.auth-footer  { text-align:center; font-size:13px; color:var(--c-text-3); }

/* ── Landing Hero ─────────────────────────────────────────────── */
.hero-section {
  padding:90px 0 70px; position:relative; overflow:hidden;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--c-text-2); border:1px solid var(--c-line); padding:5px 12px;
  border-radius:100px; margin-bottom:22px;
}
.hero-dot { width:6px; height:6px; background:var(--c-ok); border-radius:50%; animation:blink 1.6s infinite; }
.hero-title {
  font-size:clamp(38px,6vw,64px); font-weight:800; letter-spacing:-.04em;
  line-height:1.03; margin-bottom:18px; color:var(--c-text);
}
.hero-sub {
  font-size:17px; color:var(--c-text-2); line-height:1.65;
  max-width:520px; margin-bottom:32px;
}
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; }

/* ── Feature Grid ─────────────────────────────────────────────── */
.feature-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px; background:var(--c-line); border-radius:var(--r-xl); overflow:hidden;
}
.feature-item {
  background:var(--c-bg-1); padding:30px 26px;
  transition:background var(--t) var(--ease);
}
.feature-item:hover { background:var(--c-bg-2); }
.feature-icon  { font-size:24px; margin-bottom:14px; display:block; line-height:1; }
.feature-title { font-size:15px; font-weight:700; margin-bottom:8px; }
.feature-text  { font-size:13px; color:var(--c-text-2); line-height:1.65; }

/* ── Dashboard ────────────────────────────────────────────────── */
.dashboard-page { min-height:100vh; display:flex; flex-direction:column; }
.dashboard-page > .container { flex:1; }
.page-header    { padding:28px 0 22px; border-bottom:1px solid var(--c-line); margin-bottom:28px; }
.page-header-inner { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.page-title    { font-size:22px; font-weight:800; letter-spacing:-.03em; margin-bottom:3px; }
.page-subtitle { font-size:13px; color:var(--c-text-3); }
.main-content  { padding-bottom:80px; }

/* ── Vehicle Cards ────────────────────────────────────────────── */
.vehicle-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.vehicle-card {
  background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl);
  padding:20px; transition:all var(--t) var(--ease);
  display:flex; flex-direction:column; gap:14px;
}
.vehicle-card:hover { border-color:var(--c-line-2); }
.vehicle-card--alarm {
  border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.03);
  animation:pulseAlarm 2.2s ease-in-out infinite;
}
.vehicle-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.vehicle-plate { font-size:21px; font-weight:800; letter-spacing:.03em; color:var(--c-text); font-variant-numeric:tabular-nums; }
.vehicle-name  { font-size:12px; color:var(--c-text-3); margin-top:3px; }
.vehicle-card-btns { display:flex; gap:7px; flex-wrap:wrap; }
.alarm-row {
  display:flex; align-items:center; gap:8px;
  background:var(--c-err-dim); border:1px solid rgba(248,113,113,.2);
  border-radius:var(--r); padding:9px 12px; font-size:12px; font-weight:600; color:var(--c-err);
}

/* ── Empty State ──────────────────────────────────────────────── */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:80px 24px; gap:14px;
  border:1px dashed var(--c-line); border-radius:var(--r-xl);
}
.empty-icon  { font-size:40px; opacity:.3; line-height:1; }
.empty-title { font-size:18px; font-weight:700; }
.empty-text  { font-size:14px; color:var(--c-text-3); max-width:300px; line-height:1.6; }

/* ── Scanner Page ─────────────────────────────────────────────── */
.scan-page { min-height:100vh; background:var(--c-bg); display:flex; flex-direction:column; }
.scan-header {
  padding:14px 18px; border-bottom:1px solid var(--c-line);
  display:flex; flex-direction:column; gap:3px;
}
.scan-header-title { font-size:16px; font-weight:700; letter-spacing:-.02em; }
.scan-header-sub   { font-size:12px; color:var(--c-text-3); display:flex; align-items:center; gap:8px; }
.anon-badge {
  display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--c-ok);
  background:var(--c-ok-dim); border:1px solid rgba(74,222,128,.15);
  padding:2px 8px; border-radius:100px;
}
.scan-main { flex:1; padding:20px 18px; max-width:520px; margin-inline:auto; width:100%; }
.scan-section-label {
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--c-text-3); margin-bottom:12px;
}

/* Topic Grid */
.topic-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.topic-btn {
  background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:16px 12px; text-align:center; cursor:pointer;
  transition:all var(--t) var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none;
}
.topic-btn:hover,.topic-btn:focus-visible { border-color:var(--c-line-2); background:var(--c-bg-2); }
.topic-btn.selected {
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22);
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
}
.topic-btn-icon  { font-size:26px; line-height:1; }
.topic-btn-label { font-size:13px; font-weight:700; color:var(--c-text); letter-spacing:-.01em; }
.topic-btn-sub   { font-size:10px; color:var(--c-text-3); }
.topic-btn-full  { grid-column:span 2; }

/* Freitext */
.scan-free-text { display:none; flex-direction:column; gap:7px; margin-bottom:12px; animation:fadeIn var(--t) var(--ease); }
.scan-free-text.visible { display:flex; }
.char-counter { font-size:11px; color:var(--c-text-3); text-align:right; }

/* Send area */
.scan-send-area { display:none; flex-direction:column; gap:10px; animation:slideUp var(--t-slow) var(--ease); }
.scan-send-area.visible { display:flex; }
.btn-scan-send {
  width:100%; padding:18px; font-size:16px; font-weight:800; letter-spacing:-.02em;
  border-radius:var(--r-lg); background:var(--c-text); color:var(--c-bg);
  border:none; cursor:pointer; transition:all var(--t) var(--ease);
  touch-action:manipulation;
}
.btn-scan-send:hover { background:var(--c-acc); transform:translateY(-1px); }
.btn-scan-send:active { transform:translateY(0); }
.scan-disclaimer { font-size:11px; color:var(--c-text-3); text-align:center; line-height:1.5; }

/* Scan status */
.scan-status {
  display:none; flex-direction:column; align-items:center;
  gap:14px; padding:60px 24px; text-align:center; animation:fadeIn var(--t) var(--ease);
}
.scan-status.visible { display:flex; }
.scan-status-icon   { font-size:44px; animation:pulse 1.6s ease-in-out infinite; }
.scan-status-title  { font-size:17px; font-weight:700; }
.scan-status-text   { font-size:13px; color:var(--c-text-2); line-height:1.65; max-width:280px; }

/* ── Chat Page ────────────────────────────────────────────────── */
.chat-page { min-height:100vh; display:flex; flex-direction:column; background:var(--c-bg); }
.chat-topbar {
  position:sticky; top:0; z-index:10;
  background:rgba(10,10,10,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line); padding:10px 16px;
  display:flex; align-items:center; gap:10px;
}
.chat-topbar-info { flex:1; min-width:0; }
.chat-topbar-title { font-size:14px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-topbar-sub   { font-size:11px; color:var(--c-text-3); display:flex; align-items:center; gap:7px; margin-top:1px; }
.chat-timer {
  font-size:11px; font-weight:700; color:var(--c-warn);
  background:var(--c-warn-dim); border:1px solid rgba(250,204,21,.15);
  padding:2px 8px; border-radius:100px; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.chat-messages {
  flex:1; padding:16px; display:flex; flex-direction:column; gap:8px;
  overflow-y:auto; max-width:600px; margin-inline:auto; width:100%;
}
.bubble {
  max-width:80%; padding:10px 14px; border-radius:16px;
  font-size:14px; line-height:1.5; word-break:break-word;
}
.bubble-scanner {
  align-self:flex-end; background:var(--c-bg-4); border:1px solid var(--c-line-2);
  color:var(--c-text); border-radius:16px 16px 3px 16px;
}
.bubble-owner {
  align-self:flex-start; background:var(--c-text); color:var(--c-bg);
  border-radius:16px 16px 16px 3px; font-weight:500;
}
.bubble-system {
  align-self:center; background:transparent; border:1px dashed var(--c-line);
  color:var(--c-text-3); font-size:11px; text-align:center;
  border-radius:var(--r); max-width:90%; padding:7px 12px;
}
.bubble-quickreply {
  align-self:center; background:var(--c-ok-dim); border:1px solid rgba(74,222,128,.18);
  color:var(--c-ok); font-size:11px; text-align:center; font-weight:600;
  border-radius:var(--r); max-width:90%; padding:7px 12px;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.bubble-time { font-size:10px; opacity:.4; margin-top:3px; text-align:right; }
.bubble-owner .bubble-time { color:var(--c-bg); text-align:left; }
.typing-indicator {
  align-self:flex-start; padding:10px 14px; background:var(--c-bg-3);
  border:1px solid var(--c-line); border-radius:16px 16px 16px 3px;
  display:flex; gap:4px; align-items:center;
}
.typing-dot {
  width:5px; height:5px; background:var(--c-text-3); border-radius:50%;
  animation:typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.15s; }
.typing-dot:nth-child(3) { animation-delay:.30s; }
.chat-footer {
  border-top:1px solid var(--c-line); background:rgba(10,10,10,.96);
  backdrop-filter:blur(12px); padding:10px 14px;
  max-width:600px; margin-inline:auto; width:100%;
}
.chat-resolve-row { margin-bottom:9px; }
.chat-input-row   { display:flex; gap:8px; align-items:flex-end; }
.chat-input {
  flex:1; background:var(--c-bg-2); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:10px 14px; font-size:14px; color:var(--c-text);
  resize:none; outline:none; min-height:42px; max-height:110px;
  transition:all var(--t) var(--ease); line-height:1.4;
}
.chat-input:focus { border-color:var(--c-line-2); background:var(--c-bg-3); }
.chat-send-btn {
  width:42px; height:42px; background:var(--c-text); border:none;
  border-radius:var(--r); color:var(--c-bg); font-size:16px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all var(--t) var(--ease);
}
.chat-send-btn:hover { background:var(--c-acc); opacity:1; }
.chat-closed-box {
  margin:0 14px 14px; padding:18px 20px;
  background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl);
  text-align:center; max-width:600px; margin-inline:auto; width:calc(100% - 28px);
}
.chat-closed-box h3 { font-size:15px; color:var(--c-text-2); margin-bottom:5px; }
.chat-closed-box p  { font-size:13px; color:var(--c-text-3); }

/* ── Vehicle Detail ───────────────────────────────────────────── */
.vehicle-detail-grid { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.qr-showcase {
  background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl);
  padding:36px; text-align:center;
}
.qr-white-box {
  background:#fff; border-radius:var(--r-lg); padding:20px;
  display:inline-block; margin-bottom:20px;
}
.qr-white-box img { display:block; width:220px; height:220px; image-rendering:pixelated; }
.qr-white-box canvas { display:block !important; }
.qr-label { font-size:15px; font-weight:700; margin-bottom:5px; }
.qr-sub   { font-size:12px; color:var(--c-text-3); margin-bottom:20px; }
.qr-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.vehicle-manage-card {
  background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl); padding:22px;
}
.vehicle-manage-card h3 {
  font-size:14px; font-weight:700; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid var(--c-line);
}
.manage-actions { display:flex; flex-direction:column; gap:9px; }

/* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:all var(--t) var(--ease);
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  background:var(--c-bg-2); border:1px solid var(--c-line-2); border-radius:var(--r-xl);
  padding:28px; max-width:400px; width:100%; box-shadow:var(--sh-lg);
  transform:scale(.96) translateY(16px); transition:transform var(--t-slow) var(--ease);
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal h3 { font-size:17px; margin-bottom:10px; }
.modal p  { font-size:13px; color:var(--c-text-2); line-height:1.6; margin-bottom:22px; }
.modal-actions { display:flex; gap:9px; justify-content:flex-end; }

/* ── Toast ────────────────────────────────────────────────────── */
.toast-container {
  position:fixed; top:66px; right:18px; z-index:300;
  display:flex; flex-direction:column; gap:7px; pointer-events:none;
}
.toast {
  background:var(--c-bg-3); border:1px solid var(--c-line-2); border-radius:var(--r);
  padding:11px 16px; font-size:13px; font-weight:500; color:var(--c-text);
  box-shadow:var(--sh); max-width:300px; pointer-events:all;
  animation:slideInRight var(--t-slow) var(--ease), fadeOut .28s var(--ease) 3.7s forwards;
}

/* ── Spinner ──────────────────────────────────────────────────── */
.spinner {
  display:inline-block; width:15px; height:15px;
  border:2px solid rgba(0,0,0,.2); border-top-color:var(--c-bg);
  border-radius:50%; animation:spin .6s linear infinite;
}

/* ── Section Step ─────────────────────────────────────────────── */
.step-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:1px solid var(--c-line-2); border-radius:var(--r-sm);
  font-size:14px; font-weight:800; color:var(--c-text-2); margin-bottom:18px;
}

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes fadeIn     { from{opacity:0} to{opacity:1} }
@keyframes slideDown  { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp    { from{opacity:0;transform:translateY(14px)}  to{opacity:1;transform:translateY(0)} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeOut    { from{opacity:1} to{opacity:0;transform:translateY(-6px)} }
@keyframes pulseAlarm { 0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,0)} 50%{box-shadow:0 0 0 5px rgba(248,113,113,.12)} }
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes pulse      { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes typingBounce{ 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-4px);opacity:1} }

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:768px){
  .vehicle-detail-grid { grid-template-columns:1fr; }
  .vehicle-grid { grid-template-columns:1fr; }
  .nav-links .nav-link { display:none; }
  .nav-links .nav-link--keep { display:inline-flex; }
  .hero-section { padding:52px 0 42px; }
  .hero-title { font-size:36px; }
}
@media(max-width:480px){
  .topic-grid { gap:7px; }
  .topic-btn  { padding:14px 10px; }
  .topic-btn-icon { font-size:22px; }
  .topic-btn-label { font-size:12px; }
  .auth-card { padding:22px; }
}


/* ── 2026 UI Polish Overrides ───────────────────────────── */
:root {
  --c-bg:        #071114;
  --c-bg-1:      #0d1a1f;
  --c-bg-2:      #12242a;
  --c-bg-3:      #173139;
  --c-line:      rgba(137, 221, 196, 0.10);
  --c-line-2:    rgba(137, 221, 196, 0.22);
  --c-text:      #f5fffd;
  --c-text-2:    #c2d6d2;
  --c-text-3:    #7d9791;
  --c-acc:       #8df0ce;
  --c-acc-dim:   rgba(141, 240, 206, 0.08);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 10%, rgba(141,240,206,.12), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(73,182,255,.12), transparent 24%),
    radial-gradient(circle at 80% 80%, rgba(98,255,173,.07), transparent 22%);
  z-index: -1;
}
.nav, .chat-topbar { background: rgba(7,17,20,.82); border-bottom-color: rgba(141,240,206,.10); }
.nav-logo-mark, .auth-logo-mark { background: linear-gradient(135deg, rgba(141,240,206,.18), rgba(73,182,255,.14)); }
.btn-primary, .nav-btn, .chat-send-btn {
  background: linear-gradient(135deg, #8df0ce, #74d7ff);
  color: #071114;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(65, 199, 172, 0.18);
}
.btn-primary:hover, .nav-btn:hover, .chat-send-btn:hover { filter: brightness(1.03); opacity: 1; }
.card, .auth-card, .vehicle-card, .feature-item, .empty-state {
  background: linear-gradient(180deg, rgba(13,26,31,.96), rgba(9,20,24,.96));
  box-shadow: 0 20px 44px rgba(0,0,0,.28);
}
.hero-title {
  background: linear-gradient(135deg, #ffffff 0%, #d8fff4 55%, #8df0ce 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-eyebrow, .pill-open { box-shadow: 0 0 0 1px rgba(141,240,206,.12) inset; }
.vehicle-card--alarm { border-color: rgba(250,204,21,.25); box-shadow: 0 18px 44px rgba(250,204,21,.08); }
.alarm-row { background: rgba(250,204,21,.08); border-color: rgba(250,204,21,.14); }
.qr-white-box { box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.bubble-scanner { background: linear-gradient(135deg, #8df0ce, #74d7ff); color: #071114; }
.bubble-owner { background: #12242a; }
.page-title, .auth-logo h1, .auth-card h2 { letter-spacing: -.03em; }
.form-input:focus { box-shadow: 0 0 0 3px rgba(141,240,206,.11); border-color: rgba(141,240,206,.28); }


/* v3 fixes */
.chat-topbar { align-items:flex-start; }
.chat-topbar-sub { flex-wrap:wrap; row-gap:6px; }
.chat-page { padding-bottom: calc(env(safe-area-inset-bottom, 0px)); }
.chat-footer { position:sticky; bottom:0; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
.chat-input-row { position:relative; }
.chat-input { padding-right:52px; }
.chat-send-btn { flex:0 0 42px; }
.chat-list-cards { display:flex; flex-direction:column; gap:14px; }
.chat-list-card { display:flex; gap:14px; justify-content:space-between; align-items:flex-start; background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl); padding:18px; }
.chat-list-title { font-weight:700; font-size:15px; margin-bottom:6px; }
.chat-list-meta { color:var(--c-text-3); font-size:12px; margin-bottom:8px; }
.chat-list-preview { color:var(--c-text-2); line-height:1.6; }
.pwa-cards { display:grid; gap:14px; margin-top:12px; }
.pwa-card { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--c-bg-1); border:1px solid var(--c-line); border-radius:var(--r-xl); padding:18px; }
.pwa-card-title { font-weight:700; margin-bottom:4px; }
.pwa-card-text { color:var(--c-text-3); font-size:13px; line-height:1.55; }
.pdf-page { min-height:100vh; padding:24px 0 60px; }
.pdf-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 10px; }
.pdf-back-row { margin-top:10px; }
@media (max-width: 767px) {
  .chat-topbar { padding:14px 14px 10px; }
  .chat-topbar-title { font-size:13px; }
  .chat-messages { padding:14px; padding-bottom:10px; }
  .bubble { max-width:86%; }
  .chat-list-card, .pwa-card { flex-direction:column; align-items:stretch; }
}

.pdf-actions .btn { min-width: 220px; justify-content:center; }
.pdf-back-row .btn { min-width: 220px; justify-content:center; }
.mobile-logout-row { display:none; margin-top:14px; }
@media (max-width: 767px) {
  .mobile-logout-row { display:flex; }
}


/* ── Brand Refresh v6 ───────────────────────────────────────── */
:root {
  --c-bg: #061116;
  --c-bg-1: #0b1a21;
  --c-bg-2: #10242d;
  --c-bg-3: #14303b;
  --c-bg-4: #183a46;
  --c-line: rgba(132, 227, 229, 0.12);
  --c-line-2: rgba(132, 227, 229, 0.24);
  --c-text: #ecfffe;
  --c-text-2: #9bb5bb;
  --c-text-3: #61808a;
  --c-acc: #84e3e5;
  --c-acc-dim: rgba(132,227,229,0.10);
}
body {
  background:
    radial-gradient(1200px 500px at 50% -20%, rgba(132,227,229,0.08), transparent 60%),
    linear-gradient(180deg, #071318 0%, #061116 100%);
}
.nav {
  background: rgba(6,17,22,.86);
  border-bottom: 1px solid rgba(132,227,229,0.14);
}
.nav-logo { gap: 12px; font-size: 15px; }
.nav-logo-mark {
  width: 34px; height: 34px; padding: 0; overflow: hidden;
  border-radius: 10px; border: 1px solid rgba(132,227,229,0.24);
  background: rgba(132,227,229,0.07);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.nav-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.hero-section {
  padding: 78px 0 52px;
}
.hero-title {
  max-width: 11ch;
  background: linear-gradient(180deg, #ecfffe 0%, #b8fbfb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { max-width: 680px; }
.hero-eyebrow {
  border: 1px solid rgba(132,227,229,0.18);
  background: rgba(132,227,229,0.06);
  color: var(--c-acc);
}
.feature-item, .card, .chat-list-card {
  background: linear-gradient(180deg, rgba(132,227,229,0.04), rgba(255,255,255,0.015));
  border-color: rgba(132,227,229,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.btn-primary {
  background: linear-gradient(135deg, #84e3e5 0%, #9cf6d5 100%);
  color: #052228;
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(132,227,229,0.18);
}
.btn-primary:hover { filter: brightness(1.03); }
.btn-ghost:hover { background: rgba(132,227,229,0.08); }
.site-footer {
  border-top: 1px solid var(--c-line);
  background: rgba(7,19,24,.75);
  backdrop-filter: blur(12px);
}
.site-footer-inner {
  width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: 22px 0 32px;
  display: flex; justify-content: space-between; gap: 14px; align-items: center; flex-wrap: wrap;
  color: var(--c-text-3); font-size: 12px;
}
.site-footer a { color: var(--c-text-2); }
.powered-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border: 1px solid var(--c-line); border-radius: 999px;
  background: rgba(132,227,229,0.04);
}
.powered-link:hover { opacity: 1; border-color: var(--c-line-2); background: rgba(132,227,229,0.08); }
.brand-chip {
  display: inline-flex; align-items: center; gap: 8px;
}
.brand-chip img {
  width: 18px; height: 18px; border-radius: 5px; object-fit: cover;
}
.logo-hero {
  width: 72px; height: 72px; margin-bottom: 20px; border-radius: 20px;
  border: 1px solid rgba(132,227,229,0.24);
  box-shadow: 0 16px 42px rgba(0,0,0,.30);
}
@media (max-width: 720px) {
  .site-footer-inner { flex-direction: column; align-items: flex-start; }
}


/* ── Final polish v7 ───────────────────────────────────────── */
.chat-page { min-height: 100svh; }
.chat-topbar { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.chat-messages {
  min-height: 0;
  padding-top: 18px;
  padding-bottom: 24px;
  scroll-padding-top: 84px;
  scroll-padding-bottom: 120px;
}
.chat-footer {
  position: sticky;
  bottom: 0;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(0,0,0,.16);
}
.chat-input { min-height: 48px; }
.site-footer { margin-top: 56px; }
@media (max-width: 767px) {
  .chat-page { min-height: 100dvh; }
  .chat-topbar { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .chat-messages {
    padding-top: 18px;
    padding-bottom: 16px;
  }
  .chat-footer { width: 100%; max-width: 100%; }
}


/* v8 overrides */
.site-footer { background: rgba(7,19,24,.92); }
.site-footer-inner { justify-content: center; text-align: center; }
.site-footer-copy { opacity: .85; }
.powered-link { border-radius: 12px; padding: 10px 14px; }
.brand-chip { gap: 0; }
.chat-topbar-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.pdf-back-row { margin-top: 12px; }
@media (max-width: 767px) {
  .site-footer-inner { align-items:center; }
  .chat-topbar { align-items:flex-start; }
  .chat-topbar-actions { width:100%; margin-top:10px; }
}

/* ── Stability fixes v9 ─────────────────────────────────────── */
.site-footer-chat-hide, .chat-page .site-footer { display:none !important; }
.chat-page { --chat-footer-offset: 128px; }
.chat-topbar {
  align-items:flex-start;
  gap:12px;
  padding:14px 16px 12px;
}
.chat-topbar-info { display:flex; flex-direction:column; gap:8px; }
.chat-topbar-title {
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  line-height:1.25;
  font-size:15px;
}
.chat-topbar-sub {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  line-height:1.4;
}
.chat-topbar-actions { margin-left:auto; align-self:flex-start; }
.chat-topbar-actions .btn { min-width:0; }
.chat-messages {
  padding-top:12px;
  padding-bottom:calc(var(--chat-footer-offset) + 24px);
  scroll-behavior:smooth;
}
.bubble {
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.bubble .bubble-body { white-space:pre-wrap; }
.bubble-owner {
  background:#e9f4f5;
  color:#071114;
  font-weight:600;
}
.bubble-owner .bubble-time,
.bubble-scanner .bubble-time { opacity:.72; color:rgba(7,17,20,.62); }
.bubble-scanner .bubble-time { color:rgba(255,255,255,.62); }
.chat-footer {
  position:sticky;
  bottom:0;
  z-index:8;
  background:rgba(6,17,22,.96);
}
.chat-input {
  background:#11303a;
  color:#f4fffe;
}
.chat-input::placeholder { color:rgba(236,255,254,.58); }
.chat-resolve-row { margin-bottom:10px; }
.chat-resolve-row .btn-full { width:100%; }
@media (max-width: 767px) {
  .chat-topbar {
    flex-direction:column;
    align-items:stretch;
  }
  .chat-topbar-actions {
    width:100%;
    margin-left:0;
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .chat-topbar-actions .btn { justify-content:center; }
  .chat-topbar-sub { font-size:12px; }
  .chat-messages { padding-left:12px; padding-right:12px; }
  .bubble { max-width:92%; font-size:15px; }
  .toast-container {
    left:12px; right:12px; top:auto; bottom:calc(var(--chat-footer-offset) + 12px);
  }
  .toast { max-width:none; }
}

@media (max-width: 767px) {
  .chat-topbar-actions {
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .chat-topbar-sub .pill { margin-bottom:4px; }
  .chat-footer { padding-top:10px; }
  .site-footer { padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* ── PWA Sticky Install Banner ─────────────────────────────── */
#pwa-sticky-banner{position:fixed;bottom:0;left:0;right:0;z-index:999;background:#0f2233;border-top:2px solid #1e90ff33;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:0 -6px 32px rgba(0,0,0,.6);}
#pwa-sticky-banner .pwa-banner-label{font-size:14px;font-weight:700;color:#f0f6ff;flex:1;min-width:120px;letter-spacing:-.01em;}
#pwa-sticky-banner .pwa-banner-actions{display:flex;gap:8px;flex-wrap:wrap;}
#pwa-sticky-banner #pwa-sticky-install{background:#1d6aff;color:#fff;border:none;font-size:13px;font-weight:700;padding:9px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;}
#pwa-sticky-banner #pwa-sticky-notify{background:#fff;color:#0a0f1a;border:none;font-size:13px;font-weight:700;padding:9px 16px;border-radius:9px;cursor:pointer;white-space:nowrap;}
#pwa-sticky-dismiss{background:none;border:none;color:#6b8aaa;font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;margin-left:auto;flex-shrink:0;}
@media(max-width:480px){
  #pwa-sticky-banner{flex-direction:column;align-items:stretch;gap:10px;}
  #pwa-sticky-banner .pwa-banner-label{font-size:15px;}
  #pwa-sticky-banner .pwa-banner-actions{flex-direction:column;}
  #pwa-sticky-banner #pwa-sticky-install,#pwa-sticky-banner #pwa-sticky-notify{padding:12px 16px;font-size:14px;text-align:center;}
  #pwa-sticky-dismiss{position:absolute;top:12px;right:12px;}
}
/* ── Read receipts (Häkchen) ──────────────────────────────── */
.bubble-time { display:flex; align-items:center; gap:4px; }
.tick { font-size:11px; color:rgba(255,255,255,0.35); letter-spacing:-2px; flex-shrink:0; }
.tick-read { color:#53bdeb; }

/* ── iOS Zoom Fix: inputs must be ≥16px font-size on iOS ─────── */
@supports (-webkit-touch-callout: none) {
  .form-input, .chat-input, textarea, input[type="text"],
  input[type="email"], input[type="password"], input[type="tel"],
  input[type="number"], select {
    font-size: 16px !important;
  }
}

/* ── Onboarding Wizard ───────────────────────────────────────── */
#pwa-onboarding{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s ease;}
@media(min-width:480px){#pwa-onboarding{align-items:center;}}
.ob-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);}
.ob-card{position:relative;z-index:1;background:#0f1f28;border:1px solid rgba(255,255,255,.15);border-radius:24px 24px 0 0;width:100%;max-width:480px;padding:32px 24px 40px;max-height:92vh;overflow-y:auto;}
@media(min-width:480px){.ob-card{border-radius:24px;}}
.ob-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.08);border:none;color:#fff;font-size:16px;cursor:pointer;padding:6px 10px;line-height:1;border-radius:8px;}
.ob-logo{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#84e0e0;margin-bottom:12px;}
.ob-title{font-size:22px;font-weight:900;letter-spacing:-.04em;margin-bottom:22px;color:#ffffff;line-height:1.2;}
.ob-tabs{display:flex;gap:8px;margin-bottom:26px;}
.ob-tab-btn{flex:1;padding:10px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;}
.ob-tab-active{background:#84e0e0;color:#000;border-color:#84e0e0;}
.ob-step{display:flex;gap:14px;margin-bottom:24px;}
.ob-step-num{flex-shrink:0;width:30px;height:30px;background:#84e0e0;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;margin-top:1px;}
.ob-step-title{font-size:16px;font-weight:800;margin-bottom:5px;color:#ffffff;}
.ob-step-text{font-size:14px;color:rgba(255,255,255,.75);line-height:1.6;margin-bottom:12px;}
.ob-step-hint{font-size:13px;color:rgba(255,255,255,.45);margin:6px 0 0;line-height:1.5;}
.ob-ios-steps{margin:10px 0 0;padding-left:20px;font-size:14px;color:rgba(255,255,255,.75);line-height:2.4;}
.ob-ios-steps li{margin-bottom:2px;}
.ob-share-icon{font-size:18px;vertical-align:middle;}
.ob-btn{display:block;width:100%;padding:14px 16px;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;border:none;margin-top:12px;text-align:center;letter-spacing:-.01em;}
.ob-btn-primary{background:#84e0e0;color:#000;}
.ob-btn-ghost{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);font-size:13px;margin-top:18px;}
.ob-done{font-size:14px;color:#4ade80;font-weight:700;margin-top:10px;}

/* ── Tick contrast fix ───────────────────────────────────────── */
.tick { font-size:12px;color:rgba(255,255,255,.45);letter-spacing:-1px;flex-shrink:0;margin-left:3px; }
.tick-read { color:#53bdeb; }