/* ============================================================
   auto.barankauf.de - Yildirim Handels GmbH
   Global stylesheet (Tokens aus style-specs.md)
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Jost";
  src: url("./fonts/jost/jost-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("./fonts/jost/jost-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("./fonts/jost/jost-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("./fonts/fira-sans/fira-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fira Sans";
  src: url("./fonts/fira-sans/fira-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Material system pulled from the dealership buildings:
     anthracite metal cladding · raw concrete plinth · cobalt signage.
     Neutrals are warm-neutral (NO blue tint). Blue + white are the
     only accents, used like the building's signage: filled, not outlined.
     Light concrete is the page base; anthracite/ink are the dark sections. */

  /* Cobalt signage */
  --signage-blue: #014679;        /* the sign blue: CTAs, tags, numbers */
  --signage-blue-hi: #0A5C97;     /* hover/active */
  --signage-blue-deep: #013559;
  --signage-blue-bright: #3E8BCB; /* legible cobalt for accents on dark surfaces */

  /* Concrete (light surfaces) */
  --concrete: #F6F6F4;            /* page base + section--light */
  --concrete-panel: #FCFCFB;      /* elevated cards/forms on light */
  --concrete-line: #E4E3DF;       /* hairline seams on light */

  /* Anthracite cladding + steel (dark surfaces) */
  --anthracite: #25282A;          /* section--dark: the metal cladding */
  --anthracite-panel: #3D4246;    /* elevated panels on dark */
  --ink: #17181A;                 /* steel/structure: header, footer, deep */
  --steel-line: #45494D;          /* hairline seams on dark */

  /* Text */
  --color-text-on-light: #1B1D1F; /* primary text on concrete */
  --color-text-muted-light: #5C6064;
  --color-text-on-dark: #ECEAE4;  /* primary text on anthracite */
  --color-text-muted-dark: #AEB0AC;

  /* Legacy aliases: keep old component rules working, remapped to the new system */
  --color-primary: var(--signage-blue);
  --color-primary-dark: var(--signage-blue-deep);
  --color-primary-deep: var(--ink);
  --color-surface: var(--concrete);
  --color-surface-2: var(--concrete-panel);
  --color-surface-dark: var(--anthracite);
  --color-accent: var(--signage-blue);
  --color-accent-hover: var(--signage-blue-hi);
  --color-border: var(--concrete-line);
  --color-border-dark: var(--steel-line);

  --font-display: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
  --font-body: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  --fs-h1: clamp(2.1rem, 1.5rem + 2.8vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-mega: clamp(4rem, 2rem + 9vw, 9rem);
  --lh-display: 1.32;
  --lh-body: 1.6;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  --radius: 0;
  --transition-default: 200ms ease;
  --transition-slow: 320ms ease;

  --maxw: 1200px;
  --header-h: 63px;        /* sticky header: 38px logo + 0.75rem*2 padding + 1px border */
}

/* On phones the section-rhythm tokens (used for vertical section padding and the
   hero) are too tall — 8rem/5rem reads as desktop spacing on a small screen.
   Scale just these two down here. The larger grid gaps that also use --space-xl
   live inside min-width media queries, so they're untouched by this override. */
@media (max-width: 760px) {
  :root {
    --space-2xl: 4rem;
    --space-xl: 3rem;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter keeps the scrollbar's space reserved even on pages short
   enough not to scroll, so the centred layout (incl. the sticky nav) doesn't
   shift sideways by the scrollbar width when navigating between pages. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-on-light);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
p { max-width: 68ch; }

/* Breathing room between a heading and the body copy that follows it.
   :where() keeps specificity at 0 so component/inline rules still override. */
:where(h1, h2, h3, h4) + p,
:where(h1, h2, h3, h4) + ul,
:where(h1, h2, h3, h4) + ol { margin-top: 0.8rem; }

/* Signage tag: a filled cobalt block with white text, modelled on the
   building's wayfinding signs. Hugs its content (inline-flex). */
.eyebrow {
  display: inline-flex; align-items: center; vertical-align: middle;
  width: max-content; max-width: 100%;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--signage-blue);
  padding: 0.55rem 0.9rem; margin-bottom: var(--space-md);
}

/* ---------- Layout utilities ---------- */
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--space-2xl); }
/* Startseite: engere Sektionsabstände */
.page-home .section { padding-block: var(--space-xl); }
.page-home .section--compact { padding-block: var(--space-lg); }
.section--compact { padding-block: var(--space-xl); }
.section--roomy { padding-block: calc(var(--space-2xl) + 3rem); }
/* Collapse the doubled gap when two same-color accent sections are adjacent */
.section--accent + .section--accent { padding-block-start: 0; }
.section--dark { background: var(--anthracite); color: var(--color-text-on-dark); }
.section--deep { background: var(--ink); color: var(--color-text-on-dark); }
.section--accent { background: var(--signage-blue); color: #fff; }
.section--light { background: var(--concrete); }
/* Full-bleed photo section: cover image + readable cobalt/ink overlay, light text */
.section--photo { position: relative; isolation: isolate; overflow: hidden; color: var(--color-text-on-dark); }
.section--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(23,24,26,0.92) 0%, rgba(23,24,26,0.78) 45%, rgba(15,95,166,0.55) 100%), var(--photo) center / cover no-repeat;
}
/* Subtle scroll-linked zoom (Ken Burns). Driven from JS via --photo-scale so it
   works in every browser (Safari/Firefox lack animation-timeline: view()).
   Falls back to a static, unscaled image when JS/scroll-zoom is unavailable. */
.section--photo::before {
  transform: scale(var(--photo-scale, 1));
  will-change: transform;
}
.section--photo .muted { color: var(--color-text-muted-dark); }
.section--photo .textlink { color: #fff; border-bottom-color: var(--signage-blue-hi); }
.section--photo .textlink:hover { color: #fff; border-bottom-color: #fff; }
.section--dark p, .section--deep p, .section--accent p, .section--photo p { color: var(--color-text-on-dark); }
.section--accent p { color: rgba(255, 255, 255, 0.92); }
.section--dark .muted, .section--deep .muted { color: var(--color-text-muted-dark); }
.section--accent .muted { color: rgba(255, 255, 255, 0.82); }
.muted { color: var(--color-text-muted-light); }

/* Signage tag inverts on cobalt sections (white block, blue text) */
.section--accent .eyebrow { background: #fff; color: var(--signage-blue); }
.section-head { max-width: 60ch; margin-bottom: var(--space-lg); }
/* Heading + side action: stacks on mobile (button under the copy), splits into
   text | button only once there's room. */
.section-head--split { max-width: none; }
.section-head--split > .btn { margin-top: var(--space-md); }
@media (min-width: 760px) {
  .section-head--split { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-lg); }
  .section-head--split > .btn { margin-top: 0; justify-self: end; }
}

.grid { display: grid; gap: var(--space-md); }

/* Architectural ruled grid with hairline seams (cladding panels).
   The 1px gap + outer border + per-cell background paint the seams.
   Pair with .grid--3 or .grid--4 for column count. */
.grid--ruled {
  grid-template-columns: 1fr; gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
}
.grid--ruled > * { background: var(--concrete); margin: 0; }
.section--dark .grid--ruled, .section--deep .grid--ruled { background: var(--ink); border-color: var(--ink); }
.section--dark .grid--ruled > *, .section--deep .grid--ruled > * { background: var(--anthracite-panel); }
.section--accent .grid--ruled { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.35); }
.section--accent .grid--ruled > * { background: var(--signage-blue); }
@media (min-width: 600px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* cards/cells in a ruled grid drop their own chrome so only the seams show */
.grid--ruled > .card { border: 0; }
.grid--ruled > .card:hover { border-left: 0; }

/* Uniform service cells (Leistungen overview) */
.leistung { padding: var(--space-lg); }
.leistung .card__icon { margin-bottom: var(--space-sm); }
.leistung h3 { margin: 0 0 0.6rem; font-size: 1.35rem; }
.leistung > p { margin-bottom: 1.15rem; color: var(--color-text-muted-light); }
.section--dark .leistung > p { color: var(--color-text-muted-dark); }
.leistung .checklist { gap: 0.6rem; }
.leistung .checklist li { font-size: var(--fs-small); }

.split { display: grid; gap: var(--space-lg); align-items: center; }
.split--top { align-items: start; }
/* Beat .hero__inner's flex so the grid applies at every width. On mobile this is
   a single-column grid (items stretch full-width); the columns kick in at 900px.
   Without this, .hero__inner's flex + .split's align-items:center collapses the
   children to content width on mobile. */
.hero__inner.split { display: grid; }
@media (min-width: 900px) {
  .split--6040 { grid-template-columns: 1.5fr 1fr; }
  .split--4060 { grid-template-columns: 1fr 1.5fr; }
  .split--5545 { grid-template-columns: 1.22fr 1fr; }
  .split--5050 { grid-template-columns: 1fr 1fr; }
  .split--7030 { grid-template-columns: 2fr 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.6rem; border-radius: var(--radius);
  transition: color var(--transition-default), border-color var(--transition-default);
  border: 2px solid transparent;
}
/* Hover fill sweeps in from the left. The pseudo sits above the button's own
   background (z-index:-1, isolated stacking context) but behind the label.
   inset:-2px makes it cover the full border box (no overflow:hidden, which
   would clip it back to the padding box and leave a 2px ring around the fill). */
.btn::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  background: var(--btn-fill, var(--signage-blue-hi));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--transition-default);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

.btn--primary { background: var(--signage-blue); color: #fff; --btn-fill: var(--signage-blue-hi); }
.btn--ghost { background: transparent; color: var(--color-text-on-dark); border-color: rgba(255,255,255,0.45); --btn-fill: rgba(255,255,255,0.16); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: #fff; color: #fff; }
.btn--outline { background: transparent; color: var(--signage-blue); border-color: var(--signage-blue); --btn-fill: var(--signage-blue); }
.btn--outline:hover, .btn--outline:focus-visible { color: #fff; }
.section--dark .btn--outline, .section--deep .btn--outline { color: #fff; border-color: rgba(255,255,255,0.45); --btn-fill: #fff; }
.section--dark .btn--outline:hover, .section--deep .btn--outline:hover, .section--dark .btn--outline:focus-visible, .section--deep .btn--outline:focus-visible { color: var(--ink); border-color: #fff; }
.section--accent .btn--primary { background: #fff; color: var(--signage-blue); --btn-fill: var(--ink); }
.section--accent .btn--primary:hover, .section--accent .btn--primary:focus-visible { color: #fff; }

/* Text links: no resting underline — the distinct color signals they're
   clickable; an underline wipes in from the left on hover. */
.textlink { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 600; color: var(--signage-blue); padding-bottom: 2px; }
.textlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--transition-default);
}
.textlink:hover, .textlink:focus-visible { color: var(--signage-blue-hi); }
.textlink:hover::after, .textlink:focus-visible::after { transform: scaleX(1); }
.section--dark .textlink, .section--deep .textlink, .section--accent .textlink { color: #fff; }
.section--dark .textlink:hover, .section--dark .textlink:focus-visible,
.section--deep .textlink:hover, .section--deep .textlink:focus-visible,
.section--accent .textlink:hover, .section--accent .textlink:focus-visible { color: #fff; }
/* External link: always visible (persistent underline + icon), brighter on dark */
.textlink--ext { display: inline-flex; align-items: center; gap: 0.35em; }
.textlink--ext svg { flex: none; }
.section--dark .textlink--ext, .section--deep .textlink--ext, .section--accent .textlink--ext { color: var(--signage-blue-bright); }
.section--dark .textlink--ext:hover, .section--dark .textlink--ext:focus-visible,
.section--deep .textlink--ext:hover, .section--deep .textlink--ext:focus-visible,
.section--accent .textlink--ext:hover, .section--accent .textlink--ext:focus-visible { color: #fff; }
/* Arrow link: a small leading arrow that nudges right on hover */
.textlink--arrow { display: inline-flex; align-items: center; gap: 0.45em; }
.textlink--arrow svg { flex: none; transition: transform var(--transition-default); }
.textlink--arrow:hover svg, .textlink--arrow:focus-visible svg { transform: translateX(3px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-primary-deep); color: #fff;
  border-bottom: 1px solid var(--color-border-dark);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: 0.75rem; }
.nav__logo { display: flex; align-items: center; gap: 0.65rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.nav__logo img { height: 38px; width: auto; filter: brightness(0) invert(1); }
.nav__links { display: none; gap: 1.4rem; align-items: center; }
.nav__links a { position: relative; font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; color: var(--color-text-muted-dark); padding-block: 0.3rem; transition: color var(--transition-default); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--transition-default);
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a[aria-current="page"] { color: #fff; }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__dropdown { position: relative; display: none; align-items: center; }
.nav__dropdown-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem;
  color: var(--color-text-muted-dark); background: none; padding-block: 0.3rem; cursor: pointer;
  transition: color var(--transition-default);
}
.nav__dropdown-caret { transition: transform var(--transition-default); }
.nav__dropdown-toggle::after {
  content: ""; position: absolute; left: 0; right: 1.05rem; bottom: 0; height: 1px;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--transition-default);
}
.nav__dropdown-toggle:hover, .nav__dropdown-toggle:focus-visible,
.nav__dropdown.is-active > .nav__dropdown-toggle { color: #fff; }
.nav__dropdown.is-active > .nav__dropdown-toggle::after { transform: scaleX(1); }
.nav__dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem;
  background: var(--color-primary-deep); border: 1px solid var(--color-border-dark);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition-default), transform var(--transition-default), visibility var(--transition-default);
  z-index: 60;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu,
.nav__dropdown.open .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown:hover .nav__dropdown-caret,
.nav__dropdown:focus-within .nav__dropdown-caret,
.nav__dropdown.open .nav__dropdown-caret { transform: rotate(180deg); }
.nav__dropdown-menu a { padding: 0.55rem 0.7rem; white-space: nowrap; }
.nav__dropdown-menu a::after { content: none; }
.nav__dropdown-menu a:hover, .nav__dropdown-menu a:focus-visible,
.nav__dropdown-menu a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.07); }
.nav__cta { display: none; padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.nav__toggle { display: inline-flex; flex-direction: column; gap: 5px; background: none; padding: 8px; }
.nav__toggle span { width: 26px; height: 2px; background: #fff; transform-origin: center; transition: transform var(--transition-default), opacity var(--transition-default); }
/* Hamburger morphs into an X when open. Driven by the button's aria-expanded
   state (JS already toggles it), so no extra class is needed. The 7px shifts
   move the top/bottom bars onto the middle bar's centre before they rotate. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu reveal: collapse height + fade rather than an instant display
   swap. visibility (delayed on close) keeps the links out of the tab order
   while the menu is shut. */
/* Overlay, not in-flow: anchored to the bottom of the header bar so opening it
   floats over the page instead of pushing content down. The sticky header is a
   positioned ancestor, so top:100% sits just under the nav bar. padding-inline
   matches the .container gutter (1.25rem) so links line up with the logo. */
.nav__mobile {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--color-primary-deep);
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  padding-inline: 1.25rem; padding-block: 0;
  border-top: 1px solid transparent; box-shadow: 0 18px 30px rgba(0, 0, 0, 0);
  transition: max-height var(--transition-slow), opacity var(--transition-default),
              padding var(--transition-slow), box-shadow var(--transition-slow),
              visibility 0s linear var(--transition-slow);
}
.nav__mobile.open {
  max-height: 30rem; opacity: 1; visibility: visible;
  padding-block: var(--space-sm) var(--space-md); border-top-color: var(--color-border-dark);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
  transition: max-height var(--transition-slow), opacity var(--transition-default),
              padding var(--transition-slow), box-shadow var(--transition-slow),
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .nav__toggle span, .nav__mobile { transition: none; }
}
.nav__mobile a { padding: 0.7rem 0.25rem; color: var(--color-text-on-dark); font-family: var(--font-display); font-weight: 500; border-bottom: 1px solid var(--color-border-dark); }
.nav__mobile .btn { margin-top: var(--space-sm); justify-content: center; }
@media (min-width: 1024px) {
  .nav__links, .nav__cta { display: flex; }
  .nav__dropdown { display: flex; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--color-surface-dark); color: var(--color-text-on-dark); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; z-index: 0; }
.hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(10,10,12,0.85) 0%, rgba(10,10,12,0.30) 45%, rgba(10,10,12,0.10) 100%); transform: translateZ(0); }
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; padding-block: var(--space-2xl) var(--space-xl); }
/* Small framed brand reel, floated into the top-right of the hero. The hero
   text sits bottom-left, so this corner stays clear at full viewport height. */
.hero__reel { position: absolute; z-index: 3; top: var(--space-md); right: max(1.25rem, calc((100% - var(--maxw)) / 2)); width: clamp(150px, 23vw, 290px); margin: 0; background: var(--ink); border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 8px 24px rgba(0,0,0,0.32); overflow: hidden; }
.hero__reel-video { display: block; width: 100%; aspect-ratio: 640 / 352; object-fit: cover; }
/* "Showreel" label, top-left of the reel over a soft scrim for legibility */
.hero__reel-caption { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; padding: 0.5rem 0.7rem 1.3rem; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: linear-gradient(to bottom, rgba(10,10,12,0.72), rgba(10,10,12,0)); pointer-events: none; }
/* Play/pause control, centred over the reel. It stays hidden while the video
   plays and only appears when the video is paused; on hover-capable (desktop)
   screens it also appears while the reel is hovered/focused. Tapping the video
   itself toggles play/pause (see main.js). */
.hero__reel-toggle { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; background: rgba(10,10,12,0.5); color: #fff; cursor: pointer; opacity: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.hero__reel-toggle.is-paused { opacity: 1; }
.hero__reel-toggle:hover, .hero__reel-toggle:focus-visible { background: rgba(10,10,12,0.7); border-color: #fff; }
.hero__reel-toggle-icon { display: none; fill: currentColor; }
.hero__reel-toggle-icon--pause { display: block; }
.hero__reel-toggle.is-paused .hero__reel-toggle-icon--pause { display: none; }
.hero__reel-toggle.is-paused .hero__reel-toggle-icon--play { display: block; }
@media (hover: hover) {
  .hero__reel:hover .hero__reel-toggle, .hero__reel:focus-within .hero__reel-toggle { opacity: 1; }
}
/* Full-screen, bottom-anchored layout only for the homepage image hero */
.hero:has(.hero__media) .hero__inner { justify-content: flex-end; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); padding-block: var(--space-xl) var(--space-lg); }
/* The Fahrzeuge stock list (light widget section) sits under the dark text
   hero; its own section padding sets the gap at the dark→light seam. */
/* minmax(0,1fr) caps the mobile single-column track at the container width.
   Without it the track grows to the eyebrow's max-content width, pushing the
   eyebrow + paragraph past the hero's clipped edge (text gets cut off). */
.hero__content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: start; }
@media (min-width: 900px) {
  .hero__content { grid-template-columns: 1.4fr 1fr; column-gap: var(--space-xl); row-gap: 0; }
  .hero .eyebrow { grid-column: 1; grid-row: 1; }
  .hero h1 { grid-column: 1; grid-row: 2; }
  .hero__col { grid-column: 2; grid-row: 2; }
}
.hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.2; max-width: 18ch; text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
/* Paragraph + CTAs share one column so the links sit directly below the copy,
   not at the bottom of the (taller) h1 row. */
.hero__col { display: flex; flex-direction: column; gap: var(--space-md); align-items: start; }
.hero p { color: var(--color-text-on-dark); font-size: 1.15rem; max-width: 48ch; text-shadow: 0 1px 16px rgba(0,0,0,0.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.hero__cta .textlink { color: #fff; text-shadow: 0 1px 16px rgba(0,0,0,0.4); }
.hero__cta .textlink:hover, .hero__cta .textlink:focus-visible { color: #fff; }
/* On mobile the eyebrow's own bottom margin doubles up with the hero grid's
   row gap; drop it so only the gap sets the spacing below the tag. */
@media (max-width: 899px) {
  .hero .eyebrow { margin-bottom: 0; }
}

/* Staggered fade + slide-up for the hero text on load */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__content > .eyebrow,
.hero__content > h1,
.hero__content > .hero__col {
  animation: hero-rise 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero__content > .eyebrow { animation-delay: 120ms; }
.hero__content > h1 { animation-delay: 280ms; }
.hero__content > .hero__col { animation-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .btn::before, .textlink::after, .nav__links a::after { transition: none; }
  .hero__content > .eyebrow,
  .hero__content > h1,
  .hero__content > .hero__col { animation: none; }
}

/* ---------- Quicksearch ---------- */
.quicksearch { background: var(--color-surface-2); border: 1px solid var(--color-border); margin-top: calc(-1 * var(--space-lg)); position: relative; z-index: 5; box-shadow: 0 1px 0 var(--color-border); }
.quicksearch__inner { display: grid; gap: var(--space-sm); padding: var(--space-md); }
.quicksearch label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--color-text-muted-light); display: block; margin-bottom: 0.3rem; }
.quicksearch select, .quicksearch input { width: 100%; padding: 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-body); background: var(--color-surface); color: var(--color-text-on-light); }
@media (min-width: 900px) { .quicksearch__inner { grid-template-columns: repeat(3, 1fr) auto; align-items: end; } }

/* ---------- Cards / tiles ---------- */
.card { position: relative; overflow: hidden; isolation: isolate; background: var(--concrete-panel); border: 1px solid var(--color-border); padding: var(--space-md); border-left: 3px solid transparent; transition: border-color var(--transition-default), background var(--transition-default), color var(--transition-default); }
.card:hover { border-left-color: var(--signage-blue); }
.card__icon { color: var(--signage-blue); margin-bottom: var(--space-sm); font-size: 1.4rem; transition: color var(--transition-default); }
.card__icon svg { display: block; width: 1.75rem; height: 1.75rem; }
.section--dark .card__icon, .section--deep .card__icon { color: var(--signage-blue-bright); }
.section--accent .card__icon { color: #fff; }
.section--dark .card { background: var(--anthracite-panel); border-color: var(--steel-line); }
/* ruled-grid cards: no own border, hover lifts the panel instead */
.grid--ruled > .card:hover { background: var(--concrete-panel); }
.section--dark .grid--ruled > .card:hover { background: var(--steel-line); }
.section--accent .grid--ruled > .card:hover { background: var(--signage-blue); }
.section--accent .grid--ruled > .card { color: #fff; }
.section--accent .grid--ruled > .card .badge { background: #fff; color: var(--signage-blue); }

/* Direction-aware hover fill: a cobalt panel that slides in from the edge the
   cursor enters and out toward the edge it leaves. JS sets --fill-x/--fill-y;
   it's parked just below the card by default. Sits under the text (z-index:-1
   within the card's own stacking context via isolation). */
.card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--signage-blue);
  transform: translate(var(--fill-x, 0%), var(--fill-y, 101%));
  transition: transform var(--transition-slow);
}
/* On the cobalt section the cards are already signage-blue, so the cobalt fill
   would be invisible. Sweep in a deeper blue instead for a readable effect. */
.section--accent .card::before { background: var(--signage-blue-deep); }
.card.card--no-anim::before { transition: none; }
/* Statische Info-Cards: kein Hover-Fill, Rahmen und Farben bleiben konstant */
.card--static::before { content: none; }
.card--static:hover { border-left-color: transparent; }
.card--static:hover h3, .card--static:hover .card__icon { color: inherit; }
.card:hover h3, .card:hover .card__icon { color: #fff; }

/* ---------- Showroom: Leistungen über Foto, Cards als Milchglas ----------
   Vollflächiges Foto mit dunklem Overlay, darauf schweben die Cards als
   einzelne Milchglas-Kacheln (backdrop-filter). Das Seam-Grid wird aufgelöst,
   damit das Foto zwischen den Kacheln sichtbar bleibt. */
.section--showroom { position: relative; isolation: isolate; overflow: hidden; }
.section--showroom::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(23,24,26,0.84) 0%, rgba(23,24,26,0.72) 100%),
    var(--photo) center / cover no-repeat;
}
/* Hairline-Seams entfernen: Cards stehen frei mit Abstand */
.section--showroom .grid--ruled {
  background: transparent; border: 0; gap: var(--space-md);
}
/* Milchglas-Kacheln: durchscheinend + unscharfer Hintergrund, Text bleibt lesbar */
.section--showroom .grid--ruled > .card {
  background: rgba(22, 24, 27, 0.42);
  -webkit-backdrop-filter: blur(5px) saturate(115%);
  backdrop-filter: blur(5px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.section--showroom .grid--ruled > .card:hover { background: rgba(22, 24, 27, 0.42); }
/* Fallback ohne backdrop-filter-Support: etwas deckenderes Panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .section--showroom .grid--ruled > .card { background: rgba(22, 24, 27, 0.74); }
  .section--showroom .grid--ruled > .card:hover { background: rgba(22, 24, 27, 0.74); }
}
/* Mobil: 2 kompakte Spalten statt einer langen Einer-Spalte, damit das Foto
   weniger verdeckt wird. Cards mit kleinerem Padding/Typo; lange Wörter
   (z. B. „Kommissionsverkauf") dürfen umbrechen. */
@media (max-width: 599px) {
  .section--showroom .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .section--showroom .grid--ruled { gap: var(--space-sm); }
  .section--showroom .grid--ruled > .card { padding: var(--space-sm); }
  .section--showroom .card__icon { margin-bottom: 0.5rem; }
  .section--showroom .card__icon svg { width: 1.5rem; height: 1.5rem; }
  .section--showroom .card h3 {
    font-size: 1.05rem; line-height: 1.2; margin-bottom: 0.35rem;
    -webkit-hyphens: auto; hyphens: auto;
  }
  .section--showroom .card p { font-size: var(--fs-small); }
}

/* Client/reference wall: name-only cells, vertically centered, uniform height.
   Inherits the direction-aware cobalt fill from .card. */
.card--client { display: flex; align-items: center; min-height: 6.5rem; text-decoration: none; }
.card--client[hidden] { display: none; }
/* Filtered client grid: keep the container/seams transparent so empty tracks
   (after filtering) blend into the section instead of showing the seam color. */
#clientGrid { background: transparent; border-color: transparent; }
.card--client h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; padding-right: 1.5rem; }
a.card--client { cursor: pointer; }
/* "opens in new tab" glyph: fades in top-right on hover, white over the cobalt fill */
a.card--client::after {
  content: ""; position: absolute; top: 0.85rem; right: 0.85rem; width: 1rem; height: 1rem;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translate(-3px, 3px);
  transition: opacity var(--transition-default), transform var(--transition-default);
}
a.card--client:hover::after { opacity: 1; transform: translate(0, 0); }

/* Client filter: a single thin field on the dark section, plus empty state */
/* Underline search: icon + transparent input over a single bottom rule.
   Match the first grid cell width at each breakpoint (mirrors .grid--4). */
.client-search {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; margin: var(--space-md) 0;
  border-bottom: 1px solid var(--steel-line);
  transition: border-color var(--transition-default);
}
@media (min-width: 600px) { .client-search { width: calc((100% - 1px) / 2); } }
@media (min-width: 960px) { .client-search { width: calc((100% - 3px) / 4); } }
.client-search:focus-within { border-bottom-color: var(--signage-blue-bright); }
.client-search__icon { flex: none; color: var(--color-text-muted-dark); }
.client-search input {
  flex: 1; min-width: 0; padding: 0.6rem 0; font-family: var(--font-body); font-size: 1rem;
  color: var(--color-text-on-dark); background: transparent; border: none;
}
.client-search input::placeholder { color: var(--color-text-muted-dark); }
.client-search input:focus-visible { outline: none; }
.client-search__empty { margin-top: var(--space-md); }

/* USP pills */
.pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-md); }
.pill { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); padding: 0.45rem 0.9rem; background: rgba(23,24,26,0.06); border: 1px solid rgba(23,24,26,0.12); color: var(--color-text-muted-light); }
.hero .pill, .section--dark .pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: var(--color-text-muted-dark); }
.section--accent .pill { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); color: #fff; }

/* Light hero variant: concrete base + dark text so the (now light) Ankauf
   inquiry widget on the right blends in instead of floating on dark. */
.hero--light { background: var(--concrete); color: var(--color-text-on-light); }
.hero--light h1 { color: var(--color-text-on-light); text-shadow: none; }
.hero--light p { color: var(--color-text-muted-light); text-shadow: none; }
.hero--light .pill { background: rgba(23,24,26,0.06); border-color: rgba(23,24,26,0.12); color: var(--color-text-muted-light); }

/* Badge: a small filled cobalt sign */
.badge { display: inline-block; background: var(--signage-blue); color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-small); padding: 0.32rem 0.7rem; }

/* Benefit checklist: square signage-blue check blocks for USP/feature columns */
.checklist { display: grid; gap: 0.85rem; }
.checklist li { position: relative; padding-left: 2.1rem; font-family: var(--font-display); font-weight: 600; line-height: 1.4; }
.checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.05em;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; font-size: 0.85rem; font-weight: 700;
  background: var(--signage-blue); color: #fff;
}
.section--accent .checklist li::before { background: #fff; color: var(--signage-blue); }
.section--dark .checklist li::before, .section--deep .checklist li::before { background: #fff; color: var(--ink); }

/* Mega number */
.mega { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-mega); line-height: 1; color: var(--color-accent); }
.mega--outline { color: transparent; -webkit-text-stroke: 2px var(--color-accent); }

/* Timeline / process */
.steps { display: grid; gap: var(--space-md); counter-reset: step; }
@media (min-width: 800px) { .steps--row { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-lg); } }
.step { position: relative; padding-top: calc(1.5rem + var(--space-md)); border-top: 3px solid var(--ink); }
.section--dark .step, .section--accent .step { border-top-color: rgba(255,255,255,0.45); }
.step__num {
  position: absolute; left: 0; top: 0; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: #fff; background: var(--signage-blue);
}
.section--accent .step__num { color: var(--signage-blue); background: #fff; }
.section--dark .step__num { color: var(--ink); background: #fff; }
.step h3 { margin-bottom: 0.4rem; }

/* Process timeline: sticky heading + scroll-filled connector with appearing steps */
.process { display: grid; gap: var(--space-lg); }
@media (min-width: 900px) {
  .process { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); align-items: start; }
  .process__aside { position: sticky; top: 96px; }
}
.process__aside .section-head { margin-bottom: 0; max-width: 36ch; }

.process__steps { position: relative; }
.process__track {
  position: absolute; top: 1.5rem; bottom: 1.5rem; left: calc(1.5rem - 1px);
  width: 2px; background: var(--concrete-line); z-index: 0;
}
.process__fill {
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: var(--signage-blue); transition: height 120ms linear;
}
.process__list { list-style: none; display: grid; gap: var(--space-lg); }
.pstep { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-sm); align-items: start; }
.pstep__num {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; line-height: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted-light); background: var(--concrete-panel);
  box-shadow: inset 0 0 0 2px var(--concrete-line);
  transition: color var(--transition-default), background var(--transition-default), box-shadow var(--transition-default);
}
.pstep__body { padding-top: 0.35rem; }
.pstep__body h3 { margin-bottom: 0.3rem; }
.pstep.is-active .pstep__num { color: #fff; background: var(--signage-blue); box-shadow: inset 0 0 0 2px var(--signage-blue); }

/* Cobalt accent section: invert the timeline to white-on-blue */
.section--accent .process__track { background: rgba(255,255,255,0.22); }
.section--accent .process__fill { background: #fff; }
.section--accent .pstep__num { color: rgba(255,255,255,0.7); background: var(--signage-blue-deep); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }
.section--accent .pstep.is-active .pstep__num { color: var(--signage-blue); background: #fff; box-shadow: inset 0 0 0 2px #fff; }

/* Dark section: timeline on anthracite */
.section--dark .process__track { background: var(--steel-line); }
.section--dark .process__fill { background: var(--signage-blue-bright); }
.section--dark .pstep__num { color: var(--color-text-muted-dark); background: var(--anthracite-panel); box-shadow: inset 0 0 0 2px var(--steel-line); }
.section--dark .pstep.is-active .pstep__num { color: #fff; background: var(--signage-blue); box-shadow: inset 0 0 0 2px var(--signage-blue); }
.js .pstep__body { opacity: 0; transform: translateY(16px); transition: opacity 500ms ease, transform 500ms ease; }
.js .pstep.is-active .pstep__body { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .pstep__body { opacity: 1; transform: none; transition: none; }
  .process__fill { transition: none; }
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { border: 1px solid var(--ink); padding: 0.4rem 0.85rem; font-size: var(--fs-small); font-family: var(--font-display); font-weight: 500; }
.section--dark .chip { border-color: var(--steel-line); }
.section--accent .chip { border-color: rgba(255,255,255,0.5); color: #fff; }

/* Einzugsgebiet-Karte (custom SVG) */
.geomap { display: grid; gap: var(--space-lg); align-items: start; }
@media (min-width: 760px) { .geomap { grid-template-columns: 0.82fr 1.18fr; gap: var(--space-xl); } }
/* On desktop the intro sticks while the taller map column scrolls past. */
@media (min-width: 760px) { .geomap__intro { position: sticky; top: calc(var(--header-h) + var(--space-lg)); } }
.geomap__intro h2 { margin: 0; }
.geomap__intro p { margin-top: 1rem; max-width: 42ch; }
.geomap__hint { font-size: var(--fs-small); color: rgba(255,255,255,0.72); }
.geomap__cta { margin-top: var(--space-md); color: rgba(255,255,255,0.82); }
.geomap__btn { margin-top: var(--space-md); }
.geomap__figure {
  margin: 0;
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
  background: radial-gradient(125% 95% at 38% 26%, #0d3e69 0%, #08263f 56%, #051726 100%);
}
.geomap__svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; overflow: visible; }

/* Gemeinde-Flächen: helle Blaufüllung über dem dunklen Verlauf, dünne Trennlinien */
.geomap__cell {
  fill: rgba(120, 180, 235, 0.11);
  stroke: rgba(150, 200, 245, 0.34);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.geomap__cells { filter: drop-shadow(0 0 14px rgba(62, 139, 203, 0.28)); }

/* Ankaufsorte: leuchtender Punkt + Beschriftung (immer sichtbar) */
.geomap__glow { fill: var(--signage-blue-bright); opacity: 0.55; }
.geomap__dot { fill: #eaf4ff; stroke: var(--signage-blue-bright); stroke-width: 2; }
.geomap__name {
  fill: #fff; font-family: var(--font-display); font-weight: 600; font-size: 27px;
  dominant-baseline: middle;
  paint-order: stroke; stroke: rgba(5, 23, 38, 0.6); stroke-width: 3px;
}
.geomap__city.is-hq .geomap__glow { fill: #7cbcf0; opacity: 0.7; animation: geoglow 2.8s ease-in-out infinite; }
.geomap__city.is-hq .geomap__dot { fill: #fff; r: 8; }
.geomap__city.is-hq .geomap__name { font-weight: 700; }
@keyframes geoglow { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) { .geomap__city.is-hq .geomap__glow { animation: none; } }

/* Reviews slider */
.reviews-nav { display: flex; justify-content: flex-end; gap: 0.6rem; margin-bottom: var(--space-sm); }
.reviews-nav__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 1.25rem; color: #fff; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid var(--color-border-dark);
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.reviews-nav__btn:hover { background: var(--signage-blue); border-color: var(--signage-blue); }
.reviews-nav__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.reviews-nav__btn:disabled { opacity: 0.35; cursor: default; background: rgba(255,255,255,0.06); border-color: var(--color-border-dark); }
.reviews { display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-sm); scroll-snap-type: x mandatory; }
.review { min-width: min(85%, 360px); scroll-snap-align: start; background: rgba(255,255,255,0.05); border: 1px solid var(--color-border-dark); padding: var(--space-md); }
/* Desktop: cards are exactly one third of the row. */
@media (min-width: 761px) {
  .review { min-width: 0; flex: 0 0 calc((100% - 2 * var(--space-md)) / 3); }
}
.review__stars { color: var(--color-accent); letter-spacing: 2px; }
.review__avatar { width: 44px; height: 44px; background: var(--signage-blue); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.review__avatar + div { line-height: 1.25; }

/* Award/certificate scans below the reviews: framed on white so the document
   scans read cleanly against the dark section. */
.awards-head { margin-top: var(--space-lg); }
.awards-head + .awards { margin-top: var(--space-md); }
.awards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.award { background: #fff; padding: 0.9rem; border: 1px solid var(--color-border-dark); display: flex; }
.award img { width: 100%; height: 340px; object-fit: contain; object-position: center; }
@media (max-width: 1000px) {
  .awards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .awards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* Comparison table */
.compare { width: 100%; border-collapse: collapse; }
.compare th, .compare td { text-align: left; padding: 0.9rem 1rem; border-bottom: 1px solid var(--color-border-dark); }
.compare th { font-family: var(--font-display); }
.compare td:first-child { color: var(--signage-blue); font-weight: 600; }
.section--dark .compare td:first-child { color: #fff; }
.section--accent .compare { color: #fff; }
.section--accent .compare td:first-child { color: #fff; font-weight: 700; }
.section--accent .compare th, .section--accent .compare td { border-bottom-color: rgba(255,255,255,0.32); }

/* FAQ — two-column: title left, questions right */
.faq { display: grid; gap: var(--space-md); }
.faq .section-head { margin-bottom: 0; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 1fr 1.6fr; gap: var(--space-xl); align-items: start; }
}

/* Accordion */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__q { width: 100%; text-align: left; background: none; padding: 1.1rem 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-text-on-light); display: flex; justify-content: space-between; gap: 1rem; }
.accordion__q::after {
  content: ""; flex: none; align-self: center;
  width: 0.95rem; height: 0.95rem;
  background-color: var(--color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1%201.5%206%206.5%2011%201.5'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--transition-default);
}
.accordion__item.open .accordion__q::after { transform: rotate(180deg); }
.accordion__a { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.accordion__item.open .accordion__a { max-height: 320px; }
.accordion__a p { padding-bottom: 1.1rem; }

/* Mediabox placeholder */
.mediabox { position: relative; background: var(--concrete-panel); border: 1px solid var(--color-border); aspect-ratio: 4/3; display: grid; place-items: center; color: var(--color-text-muted-light); overflow: hidden; }
.section--dark .mediabox, .section--deep .mediabox { background: var(--anthracite-panel); border-color: var(--steel-line); color: var(--color-text-muted-dark); }
.mediabox span { font-size: var(--fs-small); padding: var(--space-md); text-align: center; letter-spacing: 0.04em; text-transform: uppercase; }
/* Absolute so the image fills the aspect-ratio box instead of dictating its height */
.mediabox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hochformat-Variante für Porträts */
.mediabox--portrait { aspect-ratio: 4/5; width: 100%; max-width: 320px; margin-inline: auto; }

/* Kompakte Inhaber-Kennung (z. B. neben der Karte) */
.owner-tag { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.5rem; }
.owner-tag img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: top; flex: 0 0 auto; border: 1px solid var(--color-border); }
.owner-tag__text strong { display: block; font-weight: 600; }
.owner-tag__text span { display: block; font-size: var(--fs-small); margin-top: 0.1rem; }

/* Strukturierte Kontaktangaben (Icon + Label + Wert) – wie im Footer, für helle Sektionen */
.contact-card { display: grid; gap: var(--space-md); margin-top: 1.25rem; }
.contact-card__item { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; }
.contact-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; background: rgba(62, 139, 203, 0.14); }
.contact-card__icon svg { fill: var(--signage-blue-bright); }
.contact-card__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.15rem; }
.contact-card__item p { font-size: 0.92rem; line-height: 1.5; }

/* Ankauf-Teaser: Text links, Bild rechts (zentriert) */
.ankauf-teaser__media { aspect-ratio: 1/1; }
.ankauf-teaser__media img { object-position: center top; }

/* Blue curtain reveal: covers the image, slides up out of view on scroll-in */
.js .reveal.mediabox--curtain { opacity: 1; transform: none; }
.js .mediabox--curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--signage-blue);
  transform: translateY(0);
  transition: transform 760ms cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: 500ms;
}
.js .mediabox--curtain.is-visible::after { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) {
  .js .mediabox--curtain::after { display: none; }
}

/* Staggered fade + slide-up for the Ankauf text block's children */
.js .reveal.ankauf-teaser__text { opacity: 1; transform: none; }
.js .ankauf-teaser__text > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.js .ankauf-teaser__text.is-visible > * { opacity: 1; transform: none; }
.js .ankauf-teaser__text.is-visible > :nth-child(1) { transition-delay: 120ms; }
.js .ankauf-teaser__text.is-visible > :nth-child(2) { transition-delay: 240ms; }
.js .ankauf-teaser__text.is-visible > :nth-child(3) { transition-delay: 360ms; }
.js .ankauf-teaser__text.is-visible > :nth-child(4) { transition-delay: 480ms; }
@media (prefers-reduced-motion: reduce) {
  .js .ankauf-teaser__text > * { opacity: 1; transform: none; transition: none; }
}

/* Map embed */
.mapbox { width: 100%; aspect-ratio: 16/10; border: 0; filter: grayscale(0.15); }
/* In 50/50-Sektionen füllt die Karte die volle Höhe der Kontaktspalte (Überschrift + CTA) */
.map-frame { align-self: stretch; display: flex; }
.map-frame .mapbox { flex: 1; height: 100%; min-height: 420px; aspect-ratio: auto; }

/* Forms */
.form__heading { margin-bottom: var(--space-sm); }
.form { display: grid; gap: var(--space-md); background: var(--color-surface-2); border: 1px solid var(--color-border); padding: var(--space-md); }
/* .form sets display:grid, which would override the [hidden] attribute's
   display:none — restore it so the form can be hidden after submit. */
.form[hidden] { display: none; }
/* Spam-Honeypot: off-screen statt display:none, damit naive Bots das Feld
   sehen und ausfüllen, echte Nutzer (und Screenreader) es aber nicht. */
.hp-field { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.section--dark .form { color: var(--color-text-on-light); }
.form label { display: block; margin-bottom: 0.45rem; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); color: var(--color-text-muted-light); }
.form input, .form select, .form textarea { width: 100%; padding: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-body); font-size: 1rem; background: var(--color-surface); color: var(--color-text-on-light); transition: border-color var(--transition-default), box-shadow var(--transition-default); }
.form input::placeholder, .form textarea::placeholder { color: var(--color-text-muted-light); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: none; border-color: var(--signage-blue); box-shadow: 0 0 0 3px rgba(1, 70, 121, 0.16); }
.form textarea { min-height: 140px; resize: vertical; }
.form .form__row { display: grid; gap: var(--space-md); }
@media (min-width: 700px) { .form .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form button[type="submit"] { justify-content: center; margin-top: 0.25rem; }
.form__note { font-size: var(--fs-small); color: var(--color-text-muted-light); margin-top: -0.5rem; }

/* ALTCHA laeuft unsichtbar: der Proof-of-Work wird automatisch beim Laden
   geloest (auto="onload") und braucht keine Nutzer-Interaktion. Das Element
   bleibt im DOM (nur visuell versteckt, nicht display:none), damit der Worker
   weiterlaeuft und die Loesung liefert. */
.form altcha-widget {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Inline thank-you panel shown after the contact form is submitted (no
   backend yet — see main.js). Mirrors the form's surface so it slots in. */
.form-success { background: var(--color-surface-2); border: 1px solid var(--color-border); padding: var(--space-lg); text-align: center; }
.form-success:focus-visible { outline: none; }
.form-success__icon { width: 56px; height: 56px; margin: 0 auto var(--space-sm); border-radius: 50%; display: grid; place-items: center; background: rgba(46, 125, 50, 0.14); color: #2e7d32; }
.form-success h3 { margin: 0 0 0.6rem; }
.form-success p { color: var(--color-text-muted-light); margin: 0 auto; max-width: 42ch; }
.form-success__hint { margin-top: 0.9rem !important; font-size: var(--fs-small); }

/* Segmented control: pick Telefon vs E-Mail; the field below adapts (type/keyboard) */
.segmented { display: inline-flex; border: 1px solid var(--signage-blue); margin-bottom: 0.6rem; }
.segmented__btn {
  padding: 0.45rem 1rem; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  background: transparent; color: var(--signage-blue); line-height: 1;
  transition: background var(--transition-default), color var(--transition-default);
}
.segmented__btn + .segmented__btn { border-left: 1px solid var(--signage-blue); }
.segmented__btn.is-active { background: var(--signage-blue); color: #fff; }
.segmented__btn:focus-visible { outline: 2px solid var(--signage-blue); outline-offset: 2px; }

/* Contact list */
.contact-list { display: grid; gap: var(--space-sm); }
.contact-list a { font-weight: 500; }

/* Icon-led contact methods: blue glyph + dark text, all rows uniform */
.contact-line { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--color-text-on-light); transition: color var(--transition-default); }
.contact-line svg { flex: none; fill: var(--signage-blue); transition: fill var(--transition-default); }
.contact-line:hover, .contact-line:focus-visible { color: var(--signage-blue-hi); }
.contact-line:hover svg, .contact-line:focus-visible svg { fill: var(--signage-blue-hi); }

/* Grouped contact details: small labelled blocks (Adresse · Erreichbar · Öffnungszeiten) */
.contact-groups { display: grid; gap: var(--space-lg); }
.contact-group__label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted-light);
  margin-bottom: 0.7rem;
}

/* Benefits: stacked feature rows divided by hairline seams (cladding panels) */
.benefits { display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.section--dark .benefits, .section--deep .benefits { background: var(--ink); border-color: var(--ink); }
.benefit { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding: 1.1rem var(--space-md); background: var(--concrete); }
.section--dark .benefit, .section--deep .benefit { background: var(--anthracite-panel); }
.benefit__desc { margin-top: 0.3rem; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-muted-light); }
.section--dark .benefit__desc, .section--deep .benefit__desc { color: var(--color-text-muted-dark); }
.benefit__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none;
  font-size: 0.95rem; font-weight: 700;
  background: var(--signage-blue); color: #fff;
}
.section--dark .benefit__icon, .section--deep .benefit__icon { background: #fff; color: var(--ink); }
.benefit__title { font-size: 1.05rem; font-weight: 600; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 24ch; margin-inline: auto; }
.cta-band .btn { margin-top: var(--space-md); }
.cta-band--divided { padding-top: var(--space-2xl); }
.cta-band--divided::before { content: ""; display: block; width: 72px; height: 4px; margin: 0 auto var(--space-lg); background: var(--signage-blue); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-primary-deep); color: var(--color-text-on-dark); padding-block: var(--space-xl) var(--space-lg); }
.site-footer img { filter: brightness(0) invert(1); }
.footer__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); } }
.footer__grid h4 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-md); color: #fff; }
.footer__grid h4::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 0.6rem; background: var(--signage-blue-bright); }
.footer__grid p.muted { max-width: 34ch; }
.footer__grid a { transition: color var(--transition-default); }
.footer__grid a:hover { color: var(--signage-blue-bright); }
.footer__grid .contact-list { display: grid; gap: 0.7rem; }
.footer__grid .muted { color: var(--color-text-muted-dark); }
/* Footer contact: icon + small label per detail, mirroring the Kontakt page groups */
.footer__contact { display: grid; gap: var(--space-md); }
.footer__contact-item { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; }
.footer__contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: none; background: rgba(62, 139, 203, 0.14); }
.footer__contact-icon svg { fill: var(--signage-blue-bright); }
.footer__contact-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 0.15rem; }
.footer__contact-item p { font-size: 0.92rem; line-height: 1.5; color: var(--color-text-muted-dark); }
.footer__contact-item a { color: var(--color-text-muted-dark); }
.footer__social { display: flex; gap: 0.7rem; margin-top: var(--space-md); }
.footer__social a { width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-text-muted-dark); border: 1px solid var(--color-border-dark); transition: color var(--transition-default), border-color var(--transition-default), background-color var(--transition-default); }
.footer__social a:hover { color: #fff; border-color: var(--signage-blue-bright); background: var(--signage-blue); }
.footer__bottom { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between; align-items: center; margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border-dark); font-size: var(--fs-small); color: var(--color-text-muted-dark); }
.inception { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; font-family: var(--font-display); border: 1px solid var(--color-border-dark); transition: color var(--transition-default), border-color var(--transition-default); }
.inception strong { color: #fff; }
.inception:hover, .inception:focus-visible { color: #fff; border-color: var(--signage-blue-bright); }
.site-footer .inception__logo { height: 20px; width: auto; flex: none; filter: none; }
/* Hover preview: kleine Vorschau der Inception-Media-Website */
.inception__preview { position: absolute; right: 0; bottom: calc(100% + 0.8rem); width: min(340px, 80vw); padding: 6px; background: var(--color-primary-deep); border: 1px solid var(--color-border-dark); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--transition-default), transform var(--transition-default), visibility var(--transition-default); pointer-events: none; }
.site-footer .inception__preview img { display: block; width: 100%; height: auto; filter: none; }
.inception:hover .inception__preview, .inception:focus-visible .inception__preview { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .inception__preview { transition: opacity var(--transition-default); transform: none; } }

/* ---------- Reveal animation (JS-gated: ohne JS bleibt alles sichtbar) ---------- */
.js .reveal { opacity: 0; transform: translateY(44px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Legal pages ---------- */
.legal { max-width: 820px; }
.legal h1 { margin-bottom: var(--space-md); }
.legal h2 { margin-top: var(--space-lg); font-size: var(--fs-h3); }
.legal h3 { margin-top: var(--space-md); font-size: 1.15rem; }
.legal h4 { margin-top: var(--space-sm); font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.legal p, .legal ul { margin-top: var(--space-sm); max-width: none; }
.legal ul { list-style: disc; padding-left: 1.4rem; }
.legal li { margin-top: 0.35rem; }
.legal a { color: var(--color-primary); text-decoration: underline; }
.legal a:hover { color: var(--color-accent-hover); }

/* ---------- Skip link ---------- */
.skip { position: absolute; left: -999px; top: 0; background: var(--signage-blue); color: #fff; padding: 0.6rem 1rem; z-index: 100; }
.skip:focus { left: 0; }

/* ---------- AC24/Autegro Bestandswidget ---------- */
/* Das Widget rendert im hellen Theme; die Sektion bleibt hell (section--light).
   Direkt unter dem dunklen Text-Hero den Abstand nach oben verkleinern. */
.hero + #bestand { padding-top: var(--space-md); }

/* ---------- Cookie-Consent & Karten-Gate ---------- */
/* Google Maps lädt erst nach Einwilligung. Bis dahin liegt dieser Platzhalter
   über dem (quellenlosen) iframe; nichts wird an Google übertragen. */
.map-embed { position: relative; }
.map-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.9rem; text-align: center;
  padding: 1.5rem; background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.map-consent[hidden] { display: none; }
.map-consent p { margin: 0; max-width: 34ch; color: var(--color-text-muted-light); font-size: 0.92rem; line-height: 1.45; }
.map-consent__note { font-size: 0.82rem; }

/* Schmaler Hinweis unten links; auf Mobil über die volle Breite. */
.cookie-banner {
  position: fixed; left: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px);
  z-index: 1000; width: min(340px, calc(100vw - 24px));
  background: var(--ink); color: var(--color-text-on-dark);
  border: 1px solid var(--steel-line); border-radius: 12px;
  padding: 1.1rem 1.15rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { margin: 0 0 0.9rem; font-size: 0.86rem; line-height: 1.5; color: var(--color-text-muted-dark); }
.cookie-banner__text a { color: var(--color-text-on-dark); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.6rem; }
.cookie-banner__actions .btn { flex: 1; padding-inline: 0.6rem; font-size: 0.85rem; }

/* "Cookie-Einstellungen"-Link, der den Hinweis erneut öffnet (im Footer). */
.cookie-settings-link {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: inherit; cursor: pointer; text-align: left;
}
.cookie-settings-link:hover { color: var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
  .cookie-banner { animation: cookie-in 0.3s ease both; }
}
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }