/* =========================================================================
   BS-AUTOHANDEL — Design System
   Dark / Orange "Performance Showroom" aesthetic
   Fonts: Saira Condensed (display) + Hanken Grotesk (body)
   ========================================================================= */

/* ----------------------------- Tokens ---------------------------------- */
:root{
  /* Surfaces */
  --bg:        #0a0a0c;
  --bg-2:      #0d0d11;
  --surface:   #141419;
  --surface-2: #1a1a21;
  --surface-3: #21212b;
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);

  /* Text */
  --text:      #f3f3f5;
  --muted:     #a6a6b1;
  --dim:       #74747e;

  /* Brand */
  --brand:      #ff6a00;
  --brand-2:    #ff9233;
  --brand-deep: #e85d00;
  --brand-ink:  #160a00;
  --glow:       rgba(255,106,0,.45);
  --glow-soft:  rgba(255,106,0,.18);

  /* States */
  --ok:     #34d399;
  --danger: #f87171;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 10px 30px -12px rgba(0,0,0,.7);
  --sh-3: 0 30px 60px -20px rgba(0,0,0,.8);
  --sh-glow: 0 12px 40px -8px var(--glow);

  /* Type */
  --font-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(16px, 4vw, 28px);
  --header-h: 76px;

  /* Texture */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----------------------------- Reset ----------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.intro-active,html.intro-active body{ overflow:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:16px;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--brand); color:var(--brand-ink); }

/* page atmosphere: grain + ambient glow */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--grain); background-size:160px 160px;
  opacity:.05; mix-blend-mode:overlay;
}
.ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.ambient::before,.ambient::after{
  content:""; position:absolute; border-radius:50%; filter:blur(90px);
}
.ambient::before{
  width:60vw; height:60vw; top:-22vw; left:-12vw;
  background:radial-gradient(closest-side, var(--glow-soft), transparent 70%);
}
.ambient::after{
  width:45vw; height:45vw; right:-15vw; bottom:-18vw;
  background:radial-gradient(closest-side, rgba(90,120,200,.10), transparent 70%);
}

/* ----------------------------- Type ------------------------------------ */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.02; letter-spacing:.01em; margin:0; }
.display{
  font-weight:800;
  font-size:clamp(2.6rem, 7vw, 5.4rem);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.005em;
}
h2.section-title{
  font-weight:800;
  font-size:clamp(2rem, 4.6vw, 3.2rem);
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brand-2);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--brand),transparent); }
.lead{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.18rem); max-width:60ch; }
.text-grad{
  background:linear-gradient(100deg, var(--brand) 10%, var(--brand-2) 60%, #ffd0a3 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ----------------------------- Layout ---------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); position:relative; z-index:1; }
.section{ padding:clamp(64px, 10vw, 130px) 0; position:relative; z-index:1; }
.section + .section{ border-top:1px solid var(--line); }
.section-head{ max-width:760px; margin-bottom:clamp(34px,5vw,56px); }
.section-head .lead{ margin-top:14px; }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }

/* ----------------------------- Buttons --------------------------------- */
.btn{
  --pad-y:14px; --pad-x:24px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:var(--pad-y) var(--pad-x);
  border:0; border-radius:var(--pill); cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
  color:var(--brand-ink);
  background:linear-gradient(120deg, var(--brand), var(--brand-2));
  box-shadow:var(--sh-glow);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
  isolation:isolate;
}
.btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(120deg, var(--brand-2), var(--brand));
  opacity:0; transition:opacity .25s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 50px -10px var(--glow); }
.btn:hover::after{ opacity:1; }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.1em; height:1.1em; }

.btn.ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line-strong); box-shadow:none;
}
.btn.ghost::after{ background:rgba(255,255,255,.06); }
.btn.ghost:hover{ border-color:var(--brand); box-shadow:0 12px 30px -16px var(--glow); color:#fff; }

.btn.sm{ --pad-y:10px; --pad-x:16px; font-size:.92rem; }
.btn.block{ width:100%; }

.linkarrow{ display:inline-flex; align-items:center; gap:.4em; color:var(--brand-2); font-weight:700; }
.linkarrow svg{ width:18px; height:18px; transition:transform .25s; }
.linkarrow:hover svg{ transform:translateX(4px); }

/* ----------------------------- Header ---------------------------------- */
.site-header{
  position:sticky; top:0; z-index:200;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(10,10,12,.55);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, height .3s;
}
.site-header.scrolled{
  height:64px;
  background:rgba(8,8,10,.85);
  border-bottom-color:var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:38px; width:auto; filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); transition:height .3s; }
.site-header.scrolled .brand img{ height:32px; }
.brand b{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:.04em; text-transform:uppercase; }
.brand b span{ color:var(--brand); }

.nav{ display:flex; align-items:center; gap:6px; }
.nav a.navlink{
  position:relative; padding:10px 14px; border-radius:10px;
  color:var(--muted); font-weight:600; font-size:.95rem; transition:color .2s;
}
.nav a.navlink::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.nav a.navlink:hover,.nav a.navlink.active{ color:#fff; }
.nav a.navlink:hover::after,.nav a.navlink.active::after{ transform:scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--muted); background:rgba(255,255,255,.02);
  transition:color .2s, border-color .2s, transform .2s;
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn:hover{ color:var(--brand); border-color:var(--brand); transform:translateY(-1px); }

.burger{
  display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-strong);
  background:rgba(255,255,255,.02); cursor:pointer; position:relative;
}
.burger span,.burger span::before,.burger span::after{
  content:""; position:absolute; left:50%; top:50%; width:20px; height:2px; background:var(--text);
  transform:translate(-50%,-50%); transition:.3s;
}
.burger span::before{ transform:translate(-50%,-7px); }
.burger span::after{  transform:translate(-50%,5px); }
.burger.open span{ background:transparent; }
.burger.open span::before{ transform:translate(-50%,-50%) rotate(45deg); top:0; }
.burger.open span::after{ transform:translate(-50%,-50%) rotate(-45deg); top:0; }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:190;
  background:var(--bg-2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  padding:calc(var(--header-h) + 20px) 28px 28px; display:flex; flex-direction:column; gap:6px;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ padding:14px 6px; font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); }
.mobile-nav a:hover{ color:var(--brand); }
.mobile-nav .btn{ margin-top:14px; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); z-index:180; opacity:0; visibility:hidden; transition:.3s; }
.scrim.open{ opacity:1; visibility:visible; }

/* ----------------------------- Hero ------------------------------------ */
.hero{ position:relative; padding:clamp(70px,12vw,150px) 0 clamp(60px,9vw,110px); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 78% 8%, var(--glow-soft), transparent 60%),
    radial-gradient(70% 60% at 10% 100%, rgba(255,106,0,.10), transparent 60%);
}
/* faint technical grid */
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; gap:40px; align-items:center; }
@media(min-width:980px){ .hero-grid{ grid-template-columns:1.15fr .85fr; gap:54px; } }

.hero h1{ margin-top:18px; }
.hero .lead{ margin-top:22px; font-size:clamp(1.05rem,1.6vw,1.28rem); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

/* live status chip */
.status-chip{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:var(--pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  font-size:.86rem; font-weight:600; color:var(--muted);
}
.status-chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:pulse 2s infinite; }
.status-chip b{ color:var(--text); font-family:var(--font-display); font-weight:800; font-size:1rem; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.6);} 70%{ box-shadow:0 0 0 9px rgba(52,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(52,211,153,0);} }

/* hero visual card */
.hero-visual{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(160deg, var(--surface-2), var(--surface));
  box-shadow:var(--sh-3); aspect-ratio:4/3;
  display:grid; place-items:center;
}
.hero-visual::before{ /* orange sweep */
  content:""; position:absolute; inset:-2px; z-index:0; opacity:.9;
  background:radial-gradient(80% 60% at 75% 20%, var(--glow-soft), transparent 60%);
}
.hero-visual .logo-xl{ width:62%; max-width:360px; position:relative; z-index:1; filter:drop-shadow(0 20px 50px rgba(0,0,0,.6)); animation:floaty 6s ease-in-out infinite; }
.hero-visual .ring{
  position:absolute; z-index:0; border:1px solid var(--line-strong); border-radius:50%; opacity:.35;
}
.hero-visual .ring.r1{ inset:14%; }
.hero-visual .ring.r2{ inset:4%; border-style:dashed; animation:spin 40s linear infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes spin{ to{ transform:rotate(360deg);} }
.hero-visual .tag-float{
  position:absolute; z-index:2; bottom:18px; left:18px; right:18px;
  display:flex; gap:10px; flex-wrap:wrap;
}
.tag-float .mini{
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border-radius:var(--pill);
  background:rgba(10,10,12,.7); border:1px solid var(--line); backdrop-filter:blur(6px);
  font-size:.8rem; font-weight:600; color:var(--text);
}
.tag-float .mini svg{ width:15px; height:15px; color:var(--brand); }

/* ----------------------------- Trust strip ----------------------------- */
.trust{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}
.trust .wrap{ display:grid; gap:6px 28px; padding-block:34px; grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .trust .wrap{ grid-template-columns:repeat(4,1fr); } }
.stat{ text-align:center; padding:10px; }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.1rem,4vw,3rem); line-height:1; color:#fff; }
.stat .num .text-grad{ display:inline-block; }
.stat .label{ margin-top:8px; color:var(--muted); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }

/* ----------------------------- Service cards --------------------------- */
.cards{ display:grid; gap:20px; }
@media(min-width:760px){ .cards.three{ grid-template-columns:repeat(3,1fr); } .cards.two{ grid-template-columns:repeat(2,1fr); } }

.card{
  position:relative; padding:28px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.card::before{ /* top accent line */
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--sh-2); }
.card:hover::before{ transform:scaleX(1); }
.card .ic{
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:18px;
  background:radial-gradient(120% 120% at 30% 20%, rgba(255,106,0,.25), rgba(255,106,0,.06));
  border:1px solid rgba(255,106,0,.3); color:var(--brand-2);
}
.card .ic svg{ width:26px; height:26px; }
.card h3{ font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:12px; }
.card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.card ul li{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); }
.card ul li svg{ width:18px; height:18px; color:var(--brand); flex:none; margin-top:3px; }

/* ----------------------------- Why / split ----------------------------- */
.split{ display:grid; gap:40px; align-items:center; }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:60px; } }
.feature-list{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:18px; }
.feature-list li{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; }
.feature-list .fi{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg, rgba(255,106,0,.2), rgba(255,106,0,.05));
  border:1px solid rgba(255,106,0,.28); color:var(--brand-2);
}
.feature-list .fi svg{ width:22px; height:22px; }
.feature-list h4{ font-family:var(--font-body); font-weight:700; font-size:1.08rem; color:#fff; margin-bottom:3px; }
.feature-list p{ margin:0; color:var(--muted); font-size:.95rem; }

.media-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden; min-height:340px;
  border:1px solid var(--line); background:linear-gradient(160deg, var(--surface-2), #0f0f13);
  display:grid; place-items:center; box-shadow:var(--sh-2);
}
.media-card::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 70% 20%, var(--glow-soft), transparent 60%); }
.media-card img{ width:60%; max-width:300px; position:relative; z-index:1; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.quote{
  position:absolute; z-index:2; left:24px; right:24px; bottom:24px; padding:18px 20px; border-radius:var(--r);
  background:rgba(10,10,12,.7); border:1px solid var(--line); backdrop-filter:blur(8px);
}
.quote p{ margin:0; font-family:var(--font-display); font-size:1.3rem; line-height:1.15; }
.quote span{ color:var(--brand-2); }

/* ===========================  VEHICLES  ================================= */
.vehicles-section{ position:relative; }

/* toolbar (search + sort + count) */
.veh-toolbar{
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  margin-bottom:26px; padding:16px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line);
}
.veh-toolbar .left{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.veh-count{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:.02em; }
.veh-count b{ color:var(--brand); }
.field{ position:relative; display:flex; align-items:center; }
.field svg{ position:absolute; left:14px; width:18px; height:18px; color:var(--dim); pointer-events:none; }
.input,.select{
  background:#0c0c10; border:1px solid var(--line-strong); color:var(--text);
  padding:12px 14px; border-radius:var(--pill); font:inherit; font-size:.95rem; min-width:0;
  transition:border-color .2s, box-shadow .2s;
}
.input{ padding-left:42px; min-width:220px; }
.input::placeholder{ color:var(--dim); }
.input:focus,.select:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--glow-soft); outline:none; }
.select{ appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a6a6b1' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }

.auto-grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); }

.auto-card{
  position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.auto-card:hover{ transform:translateY(-6px); border-color:rgba(255,106,0,.55); box-shadow:var(--sh-2), 0 0 0 1px rgba(255,106,0,.2); }
.auto-figure{ position:relative; aspect-ratio:16/11; overflow:hidden; background:#0c0c10; }
.auto-thumb{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.auto-card:hover .auto-thumb{ transform:scale(1.07); }
.auto-figure::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(8,8,10,.65)); }
.auto-figure .shine{ position:absolute; top:0; left:-60%; width:50%; height:100%; transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); transition:left .7s; }
.auto-card:hover .auto-figure .shine{ left:130%; }

.badge-new{
  position:absolute; z-index:3; top:12px; left:12px; padding:5px 12px; border-radius:var(--pill);
  background:linear-gradient(120deg,var(--brand),var(--brand-2)); color:var(--brand-ink);
  font-family:var(--font-display); font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:0 6px 16px -4px var(--glow);
}
.badge-photos{
  position:absolute; z-index:3; bottom:12px; right:12px; padding:5px 10px; border-radius:var(--pill);
  background:rgba(10,10,12,.72); border:1px solid var(--line); backdrop-filter:blur(6px);
  display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600; color:#fff;
}
.badge-photos svg{ width:14px; height:14px; }

.auto-body{ display:flex; flex-direction:column; gap:12px; padding:18px; flex:1; }
.auto-title{ font-size:1.32rem; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; }
.auto-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--pill);
  background:#0d0d12; border:1px solid var(--line); font-size:.8rem; color:var(--muted);
}
.chip svg{ width:14px; height:14px; color:var(--brand); opacity:.9; }
.auto-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:6px; }
.auto-price{ font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:#fff; letter-spacing:.01em; }
.auto-price small{ font-family:var(--font-body); font-weight:600; font-size:.72rem; color:var(--dim); display:block; letter-spacing:.1em; text-transform:uppercase; }
.auto-actions{ display:grid; grid-template-columns:1fr auto; gap:8px; }

/* skeleton loaders */
.skeleton{ pointer-events:none; }
.skeleton .auto-figure,.skeleton .sk-line{ background:linear-gradient(100deg,#16161c 30%,#20202a 50%,#16161c 70%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
.skeleton .sk-line{ height:14px; border-radius:6px; margin:8px 0; }
.skeleton .sk-line.lg{ height:24px; width:70%; }
.skeleton .sk-line.sm{ width:40%; }
@keyframes shimmer{ 0%{ background-position:200% 0;} 100%{ background-position:-200% 0;} }

.notice{
  grid-column:1/-1; text-align:center; padding:48px 24px; border-radius:var(--r-lg);
  border:1px dashed var(--line-strong); color:var(--muted); background:rgba(255,255,255,.02);
}
.notice.error{ border-color:rgba(248,113,113,.4); color:#fecaca; background:rgba(248,113,113,.07); }
.notice h3{ font-family:var(--font-display); color:#fff; font-size:1.4rem; margin-bottom:8px; text-transform:uppercase; }
.notice .btn{ margin-top:18px; }

/* ===========================  DETAIL PAGE  ============================== */
.detail-wrap{ padding-block:clamp(28px,5vw,56px); }
.crumbs{ display:flex; align-items:center; gap:8px; color:var(--dim); font-size:.88rem; margin-bottom:22px; }
.crumbs a:hover{ color:var(--brand-2); }
.crumbs svg{ width:14px; height:14px; }

.detail{ display:grid; gap:30px; align-items:start; }
@media(min-width:940px){ .detail{ grid-template-columns:1.25fr .75fr; gap:40px; } }

.gallery{ position:sticky; top:90px; }
.gallery-main{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#0c0c10; aspect-ratio:4/3; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-main .nav{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line-strong); cursor:pointer;
  background:rgba(10,10,12,.6); backdrop-filter:blur(6px); color:#fff; transition:.2s;
}
.gallery-main .nav:hover{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.gallery-main .nav.prev{ left:14px; } .gallery-main .nav.next{ right:14px; }
.gallery-main .nav svg{ width:22px; height:22px; }
.gallery-main .counter{ position:absolute; bottom:14px; right:14px; padding:5px 12px; border-radius:var(--pill); background:rgba(10,10,12,.7); border:1px solid var(--line); font-size:.8rem; font-weight:600; }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:10px; margin-top:12px; }
.thumbs button{ padding:0; border:2px solid transparent; border-radius:12px; overflow:hidden; cursor:pointer; aspect-ratio:4/3; background:#0c0c10; }
.thumbs button img{ width:100%; height:100%; object-fit:cover; opacity:.6; transition:.2s; }
.thumbs button:hover img{ opacity:.85; }
.thumbs button.active{ border-color:var(--brand); }
.thumbs button.active img{ opacity:1; }

.detail-panel{ display:flex; flex-direction:column; gap:20px; }
.price-box{
  border-radius:var(--r-lg); padding:24px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); position:relative; overflow:hidden;
}
.price-box::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 90% 0%, var(--glow-soft), transparent 60%); }
.price-box > *{ position:relative; z-index:1; }
.detail h1{ font-size:clamp(1.8rem,3.4vw,2.6rem); text-transform:uppercase; line-height:1; }
.detail .sub{ color:var(--muted); margin-top:8px; }
.price-tag{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.2rem,5vw,3rem); color:#fff; margin-top:16px; line-height:1; }
.price-tag .vat{ display:block; font-family:var(--font-body); font-size:.78rem; font-weight:600; color:var(--dim); letter-spacing:.06em; margin-top:6px; }
.detail-actions{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }

.specs{ border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; }
.specs h3{ padding:16px 20px; background:rgba(255,255,255,.02); border-bottom:1px solid var(--line); font-size:1.2rem; text-transform:uppercase; letter-spacing:.04em; }
.specs dl{ margin:0; display:grid; grid-template-columns:1fr 1fr; }
.specs .spec{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); }
.specs .spec:nth-child(odd){ border-right:1px solid var(--line); }
.specs .spec svg{ width:20px; height:20px; color:var(--brand); flex:none; }
.specs .spec .k{ display:block; font-size:.74rem; color:var(--dim); text-transform:uppercase; letter-spacing:.08em; }
.specs .spec .v{ font-weight:700; color:#fff; font-size:.98rem; }

.desc-box{ border-radius:var(--r-lg); border:1px solid var(--line); padding:22px; background:var(--surface); }
.desc-box h3{ font-size:1.2rem; text-transform:uppercase; margin-bottom:10px; }
.desc-box p{ color:var(--muted); white-space:pre-line; margin:0; }

/* ===========================  CONTACT  ================================= */
.contact-grid{ display:grid; gap:30px; align-items:start; }
@media(min-width:900px){ .contact-grid{ grid-template-columns:.85fr 1.15fr; gap:44px; } }
.contact-info{ display:flex; flex-direction:column; gap:14px; }
.contact-item{
  display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:var(--r);
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line);
  transition:border-color .2s, transform .2s;
}
.contact-item:hover{ border-color:var(--line-strong); transform:translateX(3px); }
.contact-item .ci{
  width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(255,106,0,.2), rgba(255,106,0,.05)); border:1px solid rgba(255,106,0,.28); color:var(--brand-2);
}
.contact-item .ci svg{ width:22px; height:22px; }
.contact-item .k{ font-size:.74rem; color:var(--dim); text-transform:uppercase; letter-spacing:.1em; }
.contact-item .v{ font-weight:700; color:#fff; }
.contact-item a.v:hover{ color:var(--brand-2); }

.map-embed{ margin-top:6px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); }
.map-embed iframe{ width:100%; height:240px; border:0; display:block; filter:grayscale(.3) contrast(1.05); }

.form-card{
  border-radius:var(--r-lg); padding:clamp(22px,3vw,34px);
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line);
}
.form-grid{ display:grid; gap:16px; }
@media(min-width:620px){ .form-grid{ grid-template-columns:1fr 1fr; } .form-grid .col-2{ grid-column:1/-1; } }
.form-field label{ display:block; font-size:.82rem; font-weight:600; color:var(--muted); margin-bottom:7px; letter-spacing:.04em; text-transform:uppercase; }
.form-field input,.form-field textarea{
  width:100%; background:#0c0c10; border:1px solid var(--line-strong); color:var(--text);
  padding:13px 15px; border-radius:var(--r-sm); font:inherit; transition:border-color .2s, box-shadow .2s;
}
.form-field textarea{ min-height:140px; resize:vertical; }
.form-field input:focus,.form-field textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--glow-soft); }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }
.form-note{ color:var(--dim); font-size:.86rem; }
.form-note a{ color:var(--brand-2); }
.alert{ display:none; padding:13px 16px; border-radius:var(--r-sm); font-size:.95rem; }
.alert.show{ display:block; }
.alert.ok{ background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.4); color:#bbf7d0; }
.alert.bad{ background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.4); color:#fecaca; }

/* ----------------------------- Footer ---------------------------------- */
.site-footer{ position:relative; z-index:1; border-top:1px solid var(--line); padding:clamp(48px,7vw,80px) 0 36px; background:linear-gradient(180deg, transparent, rgba(255,106,0,.03)); }
.footer-grid{ display:grid; gap:32px; }
@media(min-width:760px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } }
.footer-brand img{ height:50px; margin-bottom:14px; }
.footer-brand p{ color:var(--muted); max-width:38ch; }
.footer-col h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:1.05rem; margin-bottom:16px; color:#fff; }
.footer-col a,.footer-col span{ display:block; color:var(--muted); padding:6px 0; transition:color .2s; }
.footer-col a:hover{ color:var(--brand-2); }
.footer-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; color:var(--dim); font-size:.86rem; }
.footer-bottom .socials{ display:flex; gap:10px; }

/* ===========================  POPUP / TOAST  =========================== */
.popup-overlay{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(5,5,7,.74); backdrop-filter:blur(6px); }
.popup-overlay.show{ display:flex; animation:fade .25s ease; }
.popup-inner{ width:100%; max-width:520px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line-strong);
  box-shadow:var(--sh-3); animation:popin .3s cubic-bezier(.2,.9,.3,1.2); }
.popup-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); }
.popup-header .t{ display:flex; flex-direction:column; }
.popup-header .t small{ color:var(--brand-2); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:.72rem; }
.popup-header .t b{ font-family:var(--font-display); font-size:1.4rem; text-transform:uppercase; line-height:1; }
.popup-close{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:transparent; color:var(--muted); font-size:20px; cursor:pointer; transition:.2s; }
.popup-close:hover{ color:#fff; border-color:var(--brand); transform:rotate(90deg); }
.popup-content{ padding:22px; }
.popup-content .form-field{ margin-bottom:14px; }
@keyframes popin{ from{ transform:translateY(18px) scale(.97); opacity:0;} to{ transform:none; opacity:1;} }
@keyframes fade{ from{ opacity:0;} to{ opacity:1;} }
@media(max-width:560px){
  .popup-overlay{ padding:0; align-items:stretch; }
  .popup-inner{ max-width:none; border-radius:0; border:0; display:flex; flex-direction:column; }
  .popup-content{ flex:1; overflow:auto; }
}

.toast{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%); z-index:1100;
  padding:14px 20px; border-radius:var(--r); font-weight:600; min-width:260px; text-align:center;
  background:rgba(20,20,25,.95); border:1px solid var(--line-strong); box-shadow:var(--sh-2);
  transition:transform .4s cubic-bezier(.2,.9,.3,1.2); }
.toast.show{ transform:translate(-50%,0); }
.toast.ok{ border-color:rgba(52,211,153,.5); color:#bbf7d0; }
.toast.bad{ border-color:rgba(248,113,113,.5); color:#fecaca; }

/* ===========================  INTRO ANIMATION  ========================= */
html.no-intro #intro{ display:none !important; }
#intro{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 40%, #131217 0%, #060608 70%);
  display:grid; place-items:center;
  transition:opacity .7s ease, transform .7s ease;
}
#intro.is-leaving{ opacity:0; transform:scale(1.05); pointer-events:none; }

/* garage doors */
.intro__door{ position:absolute; top:0; bottom:0; width:50.5%; z-index:2;
  background:
    repeating-linear-gradient(90deg, #15151b 0 22px, #101015 22px 24px),
    linear-gradient(180deg, #1a1a20, #0c0c10);
  box-shadow:inset 0 0 80px rgba(0,0,0,.7);
  animation:door-open 1.15s .35s cubic-bezier(.7,0,.2,1) forwards;
}
.intro__door::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,106,0,.06)); }
.intro__door--l{ left:0; transform-origin:left; }
.intro__door--r{ right:0; transform-origin:right; }
.intro__door--l{ animation-name:door-open-l; }
.intro__door--r{ animation-name:door-open-r; }
@keyframes door-open-l{ to{ transform:translateX(-102%); } }
@keyframes door-open-r{ to{ transform:translateX(102%); } }

/* light beam sweep */
.intro__beam{ position:absolute; top:0; bottom:0; left:-30%; width:30%; z-index:3; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,140,40,.18), transparent); filter:blur(8px);
  animation:beam 1.1s .15s ease-out forwards; }
@keyframes beam{ to{ left:130%; opacity:0; } }

/* center stage */
.intro__stage{ position:relative; z-index:1; text-align:center; padding:20px;
  animation:stage-out 0; }
.intro__welcome{ font-family:var(--font-body); font-weight:700; letter-spacing:.42em; text-transform:uppercase;
  font-size:.8rem; color:var(--brand-2); opacity:0; transform:translateY(8px);
  animation:rise .6s 1.25s ease forwards; }
.intro__logo{ width:min(64vw,420px); margin:14px auto 0; opacity:0; transform:scale(.6);
  filter:drop-shadow(0 0 40px rgba(255,106,0,0));
  animation:logo-pop 1s 1.05s cubic-bezier(.2,.9,.25,1.25) forwards; }
.intro__line{ width:0; height:2px; margin:18px auto 0; background:linear-gradient(90deg, transparent, var(--brand), transparent);
  animation:line-grow .7s 1.7s ease forwards; }
.intro__tag{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  font-size:clamp(1.1rem,3vw,1.7rem); margin-top:14px; color:#fff; opacity:0; transform:translateY(10px);
  animation:rise .7s 1.95s ease forwards; }
@keyframes logo-pop{
  0%{ opacity:0; transform:scale(.6); filter:drop-shadow(0 0 0 rgba(255,106,0,0)); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:scale(1); filter:drop-shadow(0 0 45px rgba(255,106,0,.45)); }
}
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }
@keyframes line-grow{ to{ width:min(60vw,320px); } }

.intro__skip{ position:absolute; z-index:5; top:22px; right:22px; padding:10px 18px; border-radius:var(--pill);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03); color:var(--muted);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-weight:700; cursor:pointer;
  display:inline-flex; gap:.4em; align-items:center; transition:.2s; opacity:0; animation:rise .5s 1.4s ease forwards; }
.intro__skip:hover{ color:#fff; border-color:var(--brand); }
.intro__skip span{ color:var(--brand); }

/* ----------------------------- Reveals --------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ----------------------------- Responsive ------------------------------ */
@media(max-width:900px){
  .nav, .nav-actions .icon-btn--insta{ display:none; }
  .burger{ display:block; }
  .nav-actions{ gap:8px; }
}
@media(max-width:560px){
  .veh-toolbar{ flex-direction:column; align-items:stretch; }
  .veh-toolbar .left{ justify-content:space-between; }
  .input{ min-width:0; width:100%; }
  .specs dl{ grid-template-columns:1fr; }
  .specs .spec:nth-child(odd){ border-right:0; }
  .auto-actions{ grid-template-columns:1fr; }
}

/* ===========================  MOBILE: Galerie nicht mitscrollen  ======= */
/* Am Desktop bleibt die Galerie sichtbar (sticky); am Handy/Tablet steht
   sie normal oben und scrollt weg, damit die Beschreibung lesbar ist. */
@media (max-width: 939px){
  .gallery{ position: static; top: auto; }
}

/* ===========================  LIGHTBOX (Vollbild)  ===================== */
.lightbox{ position:fixed; inset:0; z-index:3000; display:none; background:rgba(4,4,6,.97); }
.lightbox.show{ display:block; animation:fade .2s ease; }
.lb-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:18px; touch-action:pan-y; cursor:zoom-out; }
.lb-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px;
  user-select:none; -webkit-user-drag:none; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lb-close{ position:absolute; top:14px; right:14px; z-index:2; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line-strong); background:rgba(20,20,25,.6); backdrop-filter:blur(6px);
  color:#fff; font-size:26px; line-height:1; cursor:pointer; transition:.2s; }
.lb-close:hover{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); transform:rotate(90deg); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--line-strong); background:rgba(20,20,25,.55);
  backdrop-filter:blur(6px); color:#fff; cursor:pointer; transition:.2s; }
.lb-nav:hover{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); }
.lb-nav svg{ width:26px; height:26px; }
.lb-prev{ left:16px; } .lb-next{ right:16px; }
.lb-counter{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2;
  padding:7px 16px; border-radius:var(--pill); background:rgba(20,20,25,.7); border:1px solid var(--line);
  font-size:.85rem; font-weight:600; color:#fff; }
@media (max-width:760px){
  .lb-nav{ display:none; }     /* am Handy per Wischen statt Pfeilen */
  .lb-stage{ padding:10px; }
}

/* =========================================================================
   COOKIE-CONSENT  ·  Banner, Modal, Schalter, Embed-Platzhalter
   ========================================================================= */

/* ---- Embed-Platzhalter (z. B. Google Maps vor Einwilligung) ---- */
.embed-block{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center;
  padding:24px; background:
    radial-gradient(120% 120% at 50% 0%, var(--surface-2), var(--surface));
  border:1px dashed var(--line-strong); border-radius:inherit;
}
.embed-block svg{ width:34px; height:34px; color:var(--brand); opacity:.9; }
.embed-block__title{ font-family:var(--font-display); font-weight:700;
  font-size:1.1rem; color:var(--text); margin:0; }
.embed-block__txt{ color:var(--muted); font-size:.9rem; max-width:34ch; margin:0; }
.embed-block .btn{ margin-top:4px; }
.embed-block__note{ color:var(--dim); font-size:.78rem; margin:2px 0 0; }

/* ---- Banner ---- */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  padding:0 var(--gutter) max(14px, env(safe-area-inset-bottom));
  transform:translateY(120%); transition:transform .42s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.cc-banner.show{ transform:translateY(0); }
.cc-banner__in{
  pointer-events:auto; max-width:var(--maxw); margin:0 auto 14px;
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  justify-content:space-between;
  background:rgba(18,18,23,.92); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); padding:20px 22px;
}
.cc-banner__text{ flex:1 1 460px; }
.cc-banner__text h3{ font-family:var(--font-display); font-weight:700;
  font-size:1.18rem; margin:0 0 6px; color:var(--text); }
.cc-banner__text p{ margin:0; color:var(--muted); font-size:.92rem; line-height:1.55; }
.cc-banner__text a{ color:var(--brand-2); text-decoration:underline;
  text-underline-offset:2px; }
.cc-banner__btns{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---- Modal ---- */
.cc-modal{ position:fixed; inset:0; z-index:1300; display:flex;
  align-items:center; justify-content:center; padding:var(--gutter);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.cc-modal.show{ opacity:1; visibility:visible; }
.cc-modal__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px); }
.cc-modal__panel{
  position:relative; width:min(620px,100%); max-height:88vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-lg); box-shadow:var(--sh-3); padding:30px;
  transform:translateY(14px) scale(.98); transition:transform .32s cubic-bezier(.22,1,.36,1); }
.cc-modal.show .cc-modal__panel{ transform:none; }
.cc-modal__close{ position:absolute; top:14px; right:16px; width:36px; height:36px;
  border:1px solid var(--line); border-radius:50%; background:var(--surface-2);
  color:var(--muted); font-size:1.4rem; line-height:1; cursor:pointer; }
.cc-modal__close:hover{ color:#fff; border-color:var(--brand); }
.cc-modal__panel h3{ font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; margin:0 0 8px; color:var(--text); }
.cc-modal__lead{ color:var(--muted); font-size:.92rem; line-height:1.55; margin:0 0 22px; }
.cc-rows{ display:flex; flex-direction:column; gap:14px; }
.cc-row{ display:flex; gap:16px; align-items:flex-start;
  padding:16px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); }
.cc-row__txt h4{ margin:0 0 4px; font-size:1rem; color:var(--text); }
.cc-row__txt h4 em{ color:var(--dim); font-style:normal; font-weight:500; font-size:.82rem; }
.cc-row__txt p{ margin:0; color:var(--muted); font-size:.86rem; line-height:1.5; }

/* Schalter */
.cc-switch{ flex:0 0 auto; cursor:pointer; }
.cc-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cc-track{ display:block; width:46px; height:26px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--line-strong);
  position:relative; transition:background .2s, border-color .2s; }
.cc-thumb{ position:absolute; top:2px; left:2px; width:20px; height:20px;
  border-radius:50%; background:var(--muted); transition:transform .22s, background .2s; }
.cc-switch input:checked + .cc-track{ background:var(--brand);
  border-color:var(--brand); }
.cc-switch input:checked + .cc-track .cc-thumb{ transform:translateX(20px); background:#fff; }
.cc-switch input:disabled + .cc-track{ opacity:.7; cursor:not-allowed; }
.cc-modal__btns{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.cc-modal__links{ margin:18px 0 0; font-size:.84rem; color:var(--dim); text-align:center; }
.cc-modal__links a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.cc-modal__links a:hover{ color:var(--brand-2); }

@media (max-width:640px){
  .cc-banner__btns{ width:100%; }
  .cc-banner__btns .btn{ flex:1 1 auto; justify-content:center; }
  .cc-modal__panel{ padding:24px 18px; }
}

/* =========================================================================
   RECHTSTEXTE  ·  Impressum / Datenschutz / Cookie-Richtlinie
   ========================================================================= */
.legal{ padding:calc(var(--header-h) + 48px) 0 80px; }
.legal .wrap{ max-width:880px; }
.legal__head{ margin-bottom:40px; }
.legal__head .eyebrow{ margin-bottom:10px; }
.legal__head h1{ font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,5vw,3rem); line-height:1.05; margin:0 0 12px; color:var(--text); }
.legal__head p{ color:var(--muted); max-width:60ch; }
.legal__updated{ display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  font-size:.85rem; color:var(--dim); }

.legal-body h2{ font-family:var(--font-display); font-weight:700;
  font-size:1.5rem; color:var(--text); margin:38px 0 12px;
  padding-top:22px; border-top:1px solid var(--line); }
.legal-body h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.legal-body h3{ font-size:1.08rem; color:var(--text); margin:22px 0 8px; }
.legal-body p, .legal-body li{ color:var(--muted); line-height:1.7; font-size:.96rem; }
.legal-body p{ margin:0 0 14px; }
.legal-body ul{ margin:0 0 16px; padding-left:22px; }
.legal-body li{ margin:0 0 7px; }
.legal-body a{ color:var(--brand-2); text-decoration:underline; text-underline-offset:2px; }
.legal-body strong{ color:var(--text); font-weight:600; }
.legal-body .todo{ color:var(--brand-2); font-weight:600;
  background:var(--glow-soft); padding:1px 7px; border-radius:6px; }
.legal-card{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:22px 24px; margin:0 0 16px; }
.legal-card p{ margin:0 0 6px; }
.legal-card p:last-child{ margin:0; }
.legal-body table.legal-tbl{ width:100%; border-collapse:collapse; margin:0 0 20px;
  font-size:.9rem; }
.legal-tbl th, .legal-tbl td{ text-align:left; padding:10px 12px;
  border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
.legal-tbl th{ color:var(--text); font-weight:600; background:var(--surface-2); }
.legal-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 36px; }
.legal-toc a{ font-size:.85rem; padding:7px 13px; border-radius:var(--pill);
  background:var(--surface-2); border:1px solid var(--line); color:var(--muted);
  text-decoration:none; }
.legal-toc a:hover{ border-color:var(--brand); color:#fff; }

/* Footer: Rechts-Links unten */
.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal a{ color:var(--dim); font-size:.85rem; text-decoration:none; }
.footer-legal a:hover{ color:var(--brand-2); }

/* Datenschutz-Checkbox im Kontaktformular */
.form-consent{ margin-top:2px; }
.consent-check{ display:flex; gap:11px; align-items:flex-start; cursor:pointer;
  font-size:.86rem; color:var(--muted); line-height:1.5; }
.consent-check input{ flex:0 0 auto; width:18px; height:18px; margin-top:2px;
  accent-color:var(--brand); cursor:pointer; }
.consent-check a{ color:var(--brand-2); text-decoration:underline; text-underline-offset:2px; }
.consent-check.invalid span{ color:var(--danger); }