/* ==========================================================================
   Lucare AG — Seitenbausteine
   Baut auf design-system.css auf. Hier steht nur Layout — kein Farbwert,
   keine Schriftdefinition. Farben aendern: ausschliesslich im ":root" von
   design-system.css.

   Aufbau der Seite: dunkles Foto-Hero mit durchscheinender Kopfzeile
   darueber (das Auto braucht dunkle Umgebung), danach durchgehend helle,
   luftige Abschnitte mit weissen Karten. Dunkel kehrt nur zweimal zurueck:
   beim Vertrauensabschnitt und bei der Anfrage.
   ========================================================================== */

/* --- Kopfzeile -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 17, 22, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 78px;
}

/* Wortmarke bewusst als HTML-Text, nicht als Bild: bleibt in jeder Groesse
   scharf, ist durchsuchbar und wird von Screenreadern vorgelesen. */
.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; flex: none; }
.brand__mark { width: 48px; color: var(--text-on-dark); flex: none; transition: color 0.22s var(--ease); }
/* Radnaben tragen den Akzent — der einzige Farbtupfer in der Bildmarke */
.brand__hub { fill: var(--accent-on-dark); transition: fill 0.22s var(--ease); }
.brand__text { line-height: 1.1; }
.brand__name {
  display: block; font-size: 1.12rem; font-weight: 500;
  letter-spacing: 0.24em; color: var(--text-on-dark);
  transition: color 0.22s var(--ease);
}
.brand__sub {
  display: block; font-family: var(--font-mono);
  font-size: 0.57rem; letter-spacing: 0.3em;
  color: var(--accent-on-dark); margin-top: 0.3rem;
  transition: color 0.22s var(--ease);
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav a {
  font-size: 0.92rem; text-decoration: none;
  color: var(--text-on-dark-muted);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-pill);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.header-actions { display: flex; align-items: center; gap: 0.85rem; }

/* Sprachumschalter — die aktive Sprache ist hinterlegt, nicht nur farbig,
   damit sie auch ohne Farbwahrnehmung erkennbar bleibt. */
.lang { display: flex; align-items: center; gap: 0.2rem; flex: none; }
.lang a {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-decoration: none; color: var(--text-on-dark-muted);
  padding: 0.35rem 0.5rem; border-radius: 8px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang a[aria-current="true"] {
  color: var(--text-on-dark);
  background: rgba(242, 244, 247, 0.14);
}
.header-phone {
  font-family: var(--font-mono); font-size: 0.85rem;
  text-decoration: none; color: var(--text-on-dark); white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav-toggle {
  display: none; background: rgba(242, 244, 247, 0.08);
  border: 1px solid var(--line-on-dark); border-radius: var(--radius-pill);
  padding: 0.6rem 0.85rem; color: var(--text-on-dark); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0.25rem;
    background: var(--ink-900);
    border-bottom: 1px solid var(--line-on-dark);
    padding: 0.75rem var(--gutter) 1.5rem;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 0.9rem 1rem; border-radius: var(--radius); }
  .header-phone { display: none; }
}

/* --- Hero -------------------------------------------------------------
   Zwei Ebenen hinter dem Inhalt:
   ::before  das Foto als Band am oberen Rand
   ::after   die Abdunkelung darueber

   Das Foto laeuft NICHT ueber die ganze Herohoehe. Grund: die Rechnerkarte
   macht den Hero sehr hoch, und ein "cover" wuerde das Bild seitlich
   brutal beschneiden. Als Band in Originalproportion bleibt die Komposition
   erhalten, und der Verlauf blendet den unteren Bildrand ins Dunkle.

   Das Foto bekommt nur, wer die Klasse "hero--foto" traegt — also die beiden
   Startseiten. Auf der WEF-Seite waere eine Zuercher Skyline falsch. */
.hero {
  position: relative;
  background-color: var(--ink-900);
  color: var(--text-on-dark);
  padding-block: clamp(3.5rem, 8vw, 7rem);
  isolation: isolate;
}
/* Ohne Foto: nur ein ruhiger dunkler Grund mit leichtem Verlauf */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(14, 17, 22, 0.94) 0%,
    rgba(14, 17, 22, 0.78) 52%,
    rgba(14, 17, 22, 0.55) 100%);
}

/* Mit Foto */
.hero--foto::before {
  inset: 0 0 auto 0;
  z-index: -2;
  height: min(58vw, 880px);
  /* Bewusst ein einfaches url() und kein image-set mit AVIF: image-set mit
     Typangabe wird zwar von allen aktuellen Browsern geparst, aber nicht
     ueberall aufgeloest — getestet, es malte schlicht nichts. Das JPEG ist
     mit 173 KB klein genug und funktioniert garantiert.
     Anderes Foto einsetzen: Datei nach assets/img/hero.jpg legen, fertig. */
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* Abdunkelung: links stark, damit die Schrift steht. Unten laeuft das Foto
   ins Dunkle aus, damit man seine Kante nicht sieht. */
.hero--foto::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(14, 17, 22, 0.50) 0%,
      rgba(14, 17, 22, 0.28) 20%,
      rgba(14, 17, 22, 0.50) 40%,
      rgba(14, 17, 22, 0.96) 56%,
      rgba(14, 17, 22, 1)    64%),
    linear-gradient(90deg,
      rgba(14, 17, 22, 0.88) 0%,
      rgba(14, 17, 22, 0.58) 32%,
      rgba(14, 17, 22, 0.12) 60%,
      rgba(14, 17, 22, 0)    100%);
}
.hero__grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
}
@media (max-width: 1040px) { .hero__grid { grid-template-columns: 1fr; align-items: start; } }

.hero h1 { margin-bottom: 1.6rem; }
.hero h1 em { font-style: normal; color: var(--accent-on-dark); }
.hero__lead {
  font-size: var(--step-1); line-height: 1.55; font-weight: 300;
  color: var(--text-on-dark-muted); max-width: 44ch;
}

/* Icon-Zeilen wie im Referenzdesign, aber ohne zweite Akzentfarbe */
.hero__features { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1.1rem; }
.hero__features li { display: flex; align-items: center; gap: 0.95rem; font-size: 0.98rem; }
.hero__features svg { width: 22px; height: 22px; color: var(--accent-on-dark); flex: none; }


.hero__shotnote {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.7;
  color: var(--text-on-dark-muted); max-width: 52ch;
}
.hero__shotnote strong { color: var(--accent-on-dark); font-weight: 400; }

/* --- Preisrechner: schwebende weisse Karte ---------------------------- */
.calc {
  background: var(--surface-1);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: clamp(1.6rem, 3.2vw, 2.35rem);
}
.calc__head { margin-bottom: 1.75rem; }
.calc__head h2 { font-size: var(--step-2); }
.calc__head p { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.5rem; }

.calc__rows { display: grid; gap: 1.15rem; }
.calc__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 460px) { .calc__row2 { grid-template-columns: 1fr; } }

/* Fahrzeugbild im Rechner. Die Autos sind freigestellt, also kein Kasten und
   kein Beschnitt — der Wagen schwebt auf der weissen Karte.
   height:auto ist zwingend: die width/height-Attribute am img-Tag setzen sonst
   eine feste Hoehe und der Browser ignoriert aspect-ratio. */
.calc__bild img {
  width: 100%; height: auto;
  aspect-ratio: 976 / 543; object-fit: contain;
}

.calc__out { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.calc__price { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.calc__price-label {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted);
}
.calc__price-value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 4.5vw, 2.5rem); font-weight: 500;
  letter-spacing: -0.03em; line-height: 1; color: var(--text);
}
.calc__breakdown {
  list-style: none; padding: 0; margin: 1.25rem 0 0;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.78rem; color: var(--text-muted);
  display: grid; gap: 0.45rem;
}
.calc__breakdown li { display: flex; justify-content: space-between; gap: 1rem; }
.calc__note { font-size: 0.78rem; line-height: 1.6; color: var(--text-muted); margin-top: 1.2rem; }
.calc__cta { margin-top: 1.5rem; }

/* --- Flotte ----------------------------------------------------------- */
.vehicle {
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.vehicle--flip .vehicle__media { order: 2; }
@media (max-width: 880px) {
  .vehicle { grid-template-columns: 1fr; }
  .vehicle--flip .vehicle__media { order: 0; }
}
/* Seitenverhaeltnis der freigestellten Fahrzeugbilder — beim Bildtausch hier
   anpassen, dann springt beim Laden nichts im Layout. */
.vehicle__media { --ar: 976 / 543; }

/* Auf den Fahrzeugseiten steht das Bild im Hero, damit man das Auto ohne
   Scrollen sieht. Der Abschnitt weiter unten kommt dann ohne Bild aus. */
.hero__bild { margin-top: 2.5rem; max-width: 34rem; }
.hero__bild img, .vehicle__media img {
  width: 100%; height: auto;
  aspect-ratio: 976 / 543; object-fit: contain;
}
.vehicle--nurtext { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.vehicle h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.vehicle__kicker {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent);
}
.section--dark .vehicle__kicker { color: var(--accent-on-dark); }
.vehicle p { margin-top: 1rem; }

.specs { list-style: none; padding: 0; margin: 1.75rem 0 0; }
.specs li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.specs li span:first-child {
  font-family: var(--font-mono); font-size: 0.67rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted);
}
.specs li span:last-child { text-align: right; }

/* --- Streckentabelle -------------------------------------------------- */
.tabelle-wrap { overflow-x: auto; background: var(--surface-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.preistabelle { width: 100%; border-collapse: collapse; min-width: 34rem; }
.preistabelle caption {
  caption-side: bottom; padding: 1rem 1.5rem 1.35rem;
  font-size: 0.78rem; color: var(--text-muted); text-align: left;
}
.preistabelle th, .preistabelle td { padding: 0.9rem 1.5rem; text-align: right; }
.preistabelle thead th {
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--line);
}
.preistabelle tbody th {
  text-align: left; font-weight: 500;
}
.preistabelle thead th:first-child { text-align: left; }
.preistabelle tbody tr + tr th, .preistabelle tbody tr + tr td { border-top: 1px solid var(--line); }
.preistabelle tbody tr { transition: background 0.18s var(--ease); }

/* --- Leistungen ------------------------------------------------------- */
.service {
  display: flex; flex-direction: column;
  text-decoration: none;
  background: var(--surface-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(1.5rem, 2.8vw, 2rem);
  transition: box-shadow 0.26s var(--ease), transform 0.26s var(--ease);
}
.service__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--accent); }
.service h3 { margin: 1rem 0 0.65rem; }
.service p { font-size: 0.92rem; color: var(--text-muted); }
.service__more {
  margin-top: 1.4rem; font-size: 0.85rem; font-weight: 500; color: var(--accent);
  transition: color 0.26s var(--ease);
}
.service--wide { grid-column: span 2; }
@media (max-width: 880px) { .service--wide { grid-column: auto; } }

/* --- Vertrauen -------------------------------------------------------- */
.trust {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr));
}
.trust li { padding-top: 1.4rem; border-top: 1px solid var(--line-on-dark); }
.trust h3 { font-size: 1rem; letter-spacing: -0.01em; margin-bottom: 0.55rem; }
.trust p { font-size: 0.91rem; color: var(--text-on-dark-muted); }

/* --- Ablauf ----------------------------------------------------------- */
.steps {
  list-style: none; padding: 0; margin: 0; counter-reset: s;
  display: grid; gap: clamp(1.75rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(245px, 100%), 1fr));
}
.steps li { counter-increment: s; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 1rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.steps h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.steps p { font-size: 0.92rem; color: var(--text-muted); }

/* --- FAQ -------------------------------------------------------------- */
.faq { max-width: var(--container-narrow); }
.faq details {
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin-bottom: 0.75rem;
  transition: box-shadow 0.22s var(--ease);
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.35rem; cursor: pointer;
  font-size: 1rem; font-weight: 500; list-style: none;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 1.25rem;
  color: var(--accent); line-height: 1; flex: none;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 1.35rem 1.4rem; color: var(--text-muted); max-width: 62ch; }

/* --- Anfrage ---------------------------------------------------------- */
.inquiry__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
}
@media (max-width: 960px) { .inquiry__grid { grid-template-columns: 1fr; } }
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: 1fr 1fr; }
.form-grid > .span-2 { grid-column: span 2; }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid > .span-2 { grid-column: auto; }
}
.form-status { font-size: 0.88rem; margin-top: 1rem; }
.form-status[data-state="ok"] { color: var(--accent-on-dark); }
.form-status[data-state="err"] { color: #ff9c8a; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-list { list-style: none; padding: 0; margin: 2.25rem 0 0; display: grid; gap: 1.4rem; }
.contact-list dt {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-on-dark); margin-bottom: 0.3rem;
}
.contact-list a { text-decoration: none; transition: color 0.2s var(--ease); }

/* --- Fusszeile -------------------------------------------------------- */
.site-footer {
  background: var(--ink-900); color: var(--text-on-dark-muted);
  border-top: 1px solid var(--line-on-dark);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: 0.9rem;
}
.site-footer a { text-decoration: none; transition: color 0.2s var(--ease); }
.footer__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.footer__grid h4 {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-on-dark); margin-bottom: 1.1rem;
}
.footer__grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line-on-dark);
  font-family: var(--font-mono); font-size: 0.72rem;
}

/* --- Aktionsleiste auf dem Handy --------------------------------------
   Unterhalb von 720px uebernimmt die feste Leiste am unteren Rand die
   Handlungsaufforderung. Der Knopf in der Kopfzeile fliegt dort raus —
   sonst schiebt Wortmarke plus Knopf die Seite seitlich aus dem Bild. */
.mobile-bar { display: none; }
@media (max-width: 720px) {
  .brand__mark { width: 38px; }
  .brand__name { font-size: 0.98rem; letter-spacing: 0.17em; }
  .brand__sub { font-size: 0.53rem; letter-spacing: 0.25em; }
  .header-actions .btn { display: none; }
  .site-header__inner { min-height: 66px; }

  .mobile-bar {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 120;
    background: rgba(14, 17, 22, 0.9);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line-on-dark);
  }
  .mobile-bar a {
    padding: 1rem 0.4rem; text-align: center;
    font-size: 0.8rem; font-weight: 500; text-decoration: none;
    color: var(--text-on-dark);
    transition: background 0.2s var(--ease);
  }
  .mobile-bar a + a { border-left: 1px solid var(--line-on-dark); }
  .mobile-bar a:last-child { background: var(--accent); color: #ffffff; }
  body { padding-bottom: 3.5rem; }
}

/* ==========================================================================
   AUFHELLEN BEIM UEBERFAHREN — Seitenbausteine
   Ergaenzt die Regeln in design-system.css. Immer dasselbe Prinzip:
   heller werden, leicht anheben, nichts Buntes.
   ========================================================================== */
@media (hover: hover) {
  .brand:hover .brand__name,
  .brand:hover .brand__mark { color: #ffffff; }
  .brand:hover .brand__sub { color: var(--accent-hover); }
  .brand:hover .brand__hub { fill: var(--accent-hover); }

  .nav a:hover { color: #ffffff; background: rgba(242, 244, 247, 0.1); }
  .header-phone:hover { color: var(--accent-on-dark); }
  .lang a:hover { color: #ffffff; background: rgba(242, 244, 247, 0.1); }
  .lang a[aria-current="true"]:hover { background: rgba(242, 244, 247, 0.2); }
  .nav-toggle:hover { background: rgba(242, 244, 247, 0.16); border-color: rgba(242, 244, 247, 0.3); }


  .service:hover { box-shadow: var(--lift); transform: translateY(-4px); }
  .service:hover .service__more { color: var(--accent-hover); }

  .faq details:hover { box-shadow: var(--shadow-2); }
  .faq summary:hover { color: var(--accent); }
  .faq summary:hover::after { color: var(--accent-hover); transform: scale(1.15); }

  .preistabelle tbody tr:hover { background: var(--surface-0); }
  .contact-list a:hover { color: var(--accent-on-dark); }
  .site-footer a:hover { color: #ffffff; }
  .mobile-bar a:hover { background: rgba(242, 244, 247, 0.14); }
  .mobile-bar a:last-child:hover { background: var(--accent-hover); }
}