/* CasoMotors — Auto Reparatur & Aufbereitung (mobiler Service) */

@font-face {
  font-family: "Italiana";
  src: url("../fonts/Italiana-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Gold-Kupfer-Palette, aus dem Logo entnommen, leicht Richtung Gold verschoben */
  --copper-900: #2f1f0f;
  --copper-700: #7d4b1f;
  --copper-600: #ab692c;
  --copper-500: #cc8b3e;
  --copper-400: #e0a458;
  --copper-200: #f3d7a2;
  --silver: #b9b3ac;

  --bg: #0b0908;
  --bg-elevated: #141110;
  --bg-elevated-2: #1c1714;
  --bg-elevated-3: #241d18;

  --text: #f3ece2;
  --text-muted: rgba(243, 236, 226, 0.66);
  --text-faint: rgba(243, 236, 226, 0.42);
  --line: rgba(243, 236, 226, 0.1);
  --line-strong: rgba(243, 236, 226, 0.18);

  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --breite: 1240px;
  --kopf-hoehe: 72px;
  --kopf-hoehe-gross: 108px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 12px);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2 {
  font-family: "Italiana", "Geist", serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-family: "Geist", "Manrope", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

.breite {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 24px;
}

.sprite-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ikon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* ---------- Kupfer-Textelemente ---------- */

.kupfer-text {
  /* Kupfer nur als Kontur, nicht als Fuellung (Wunsch von Marcel) */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--copper-500);
  paint-order: stroke fill;
}

@supports not (-webkit-text-stroke: 1px black) {
  .kupfer-text {
    color: var(--copper-500);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--copper-400);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--copper-500);
}

/* ---------- Buttons ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  white-space: nowrap;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
}

.knopf:active {
  transform: scale(0.97);
}

.knopf-primaer {
  background: transparent;
  border: 1px solid rgba(224, 164, 88, 0.55);
  color: var(--copper-200);
}

.knopf-primaer:hover {
  background: var(--copper-500);
  border-color: var(--copper-500);
  color: #150d07;
}

.knopf-sekundaer {
  background: rgba(243, 236, 226, 0.04);
  border: 1px solid var(--line-strong);
  color: var(--text);
}

.knopf-sekundaer:hover {
  border-color: var(--copper-500);
  color: var(--copper-200);
  background: rgba(204, 139, 62, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .knopf:hover,
  .knopf:active {
    transform: none;
  }
}

/* ---------- Sichtbarkeit / Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.ist-sichtbar {
  opacity: 1;
  transform: none;
}

.reveal-verzoegert-1 { transition-delay: 0.08s; }
.reveal-verzoegert-2 { transition-delay: 0.16s; }
.reveal-verzoegert-3 { transition-delay: 0.24s; }
.reveal-verzoegert-4 { transition-delay: 0.32s; }
.reveal-verzoegert-5 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ================= Header ================= */

.kopf {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  background: rgba(11, 9, 8, 0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.kopf.ist-gescrollt {
  border-bottom-color: var(--line);
  background: rgba(11, 9, 8, 0.86);
}

.kopf-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.kopf-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kopf-logo img {
  height: 34px;
  width: auto;
}

.kopf-logo-text {
  font-family: "Geist", sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.kopf-logo-text span {
  color: var(--copper-400);
}

/* Startseiten-Variante nach Referenz: Burger links, Emblem mittig, Termin-Link rechts.
   Schwebt anfangs ohne Balken ueber dem Bild. */
.kopf--zentriert {
  height: var(--kopf-hoehe-gross);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.kopf--zentriert.ist-gescrollt {
  height: var(--kopf-hoehe);
  background: rgba(11, 9, 8, 0.86);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.kopf--zentriert .kopf-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.kopf--zentriert .menu-knopf {
  justify-self: start;
}

.kopf--zentriert .kopf-logo {
  justify-self: center;
}

.kopf--zentriert .kopf-logo img {
  height: clamp(52px, 6.2vw, 84px);
  width: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
  transition: height 0.4s var(--ease);
}

.kopf--zentriert.ist-gescrollt .kopf-logo img {
  height: 46px;
}

.kopf-cta {
  justify-self: end;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.kopf-cta:hover {
  color: var(--copper-400);
}

/* Auf schmalen Screens traegt das Menue den Kontakt-Link; der Header bleibt ruhig */
@media (max-width: 640px) {
  .kopf-cta {
    display: none;
  }

  .kopf--zentriert .kopf-logo img {
    height: 56px;
  }
}

.hauptnav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.hauptnav a:not(.knopf) {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
  transition: color 0.25s var(--ease);
  position: relative;
}

.hauptnav a:not(.knopf)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--copper-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}

.hauptnav a:not(.knopf):hover {
  color: var(--text);
}

.hauptnav a:not(.knopf):hover::after {
  transform: scaleX(1);
}

.menu-knopf {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
}

.menu-linie {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--copper-400);
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}

.menu-linie:last-child {
  width: 16px;
}

.menu-knopf:hover .menu-linie {
  width: 26px;
  background: var(--copper-200);
}

.hauptnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(var(--kopf-hoehe-gross) + 8px);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background: rgba(11, 9, 8, 0.97);
  border-bottom: 1px solid var(--line);
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 28px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  z-index: -1;
}

.hauptnav.ist-offen {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.hauptnav a:not(.knopf) {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

/* ================= Buehne & Hero (Referenz: Hispano Suiza) ================= */

/* Die Buehne traegt das Ringlicht-Bild; es laeuft hinter der Vertrauensleiste
   weiter und blendet nach unten in den Seitengrund aus. */
.buehne {
  position: relative;
  isolation: isolate;
}

.buehne-hintergrund {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image: url("../assets/bilder/hero-ringe.webp");
  background-size: cover;
  background-position: center 38%;
}

/* animierte Lichter: laeuft nur, wenn main.js die Quelle setzt (Desktop, keine Reduced-Motion) */
.buehne-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.buehne-video.ist-bereit {
  opacity: 1;
}

/* Abdunkelung liegt ueber Bild UND Video */
.buehne-hintergrund::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 6, 5, 0.62) 0%, rgba(7, 6, 5, 0.18) 22%, rgba(7, 6, 5, 0.12) 55%, rgba(11, 9, 8, 0.86) 86%, var(--bg) 100%);
}

@media (max-width: 640px) {
  .buehne-hintergrund {
    background-image: url("../assets/bilder/hero-ringe-klein.webp");
  }

  .buehne-hintergrund::after {
    background: linear-gradient(180deg, rgba(7, 6, 5, 0.62) 0%, rgba(7, 6, 5, 0.2) 22%, rgba(7, 6, 5, 0.16) 55%, rgba(11, 9, 8, 0.88) 86%, var(--bg) 100%);
  }
}

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--kopf-hoehe-gross);
  overflow: hidden;
}

.hero-inner {
  width: 100%;
  max-width: 1160px;
  padding: 0 24px 48px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 22px;
}

/* Kicker wie "WELCOME TO THE": klein, gesperrt, warmweiss */
.hero-kicker {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.44em;
  /* die Sperrung haengt rechts ueber; kleiner Ausgleich, damit die Zeile mittig wirkt */
  margin-right: -0.44em;
  color: #efe7da;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

/* Grosse Zeile in Italiana, wie "HOUSE OF PIONEERS" */
.hero-inner h1 {
  font-size: clamp(52px, 8.6vw, 124px);
  letter-spacing: 0.06em;
  margin-right: -0.06em;
  line-height: 1.02;
  color: #e9e0d1;
  text-shadow: 0 4px 34px rgba(0, 0, 0, 0.55);
}

/* Knopfzeile im CTA-Banner */
.cta-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 2px;
}

/* Vertrauensleiste liegt auf dem auslaufenden Bild */
.buehne .vertrauensleiste {
  background: rgba(11, 9, 8, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}

.buehne .vertrauens-punkt {
  /* fast deckend: darunter liegt das helle Gap-Raster des Grids, das sonst durchscheint */
  background: rgba(13, 10, 9, 0.88);
}

@media (max-width: 900px) {
  .hero-inner {
    padding: 0 20px 40px;
    gap: 18px;
  }

  .hero-kicker {
    font-size: 11px;
    letter-spacing: 0.36em;
    margin-right: -0.36em;
  }
}

@media (max-width: 640px) {
  .hero-inner {
    padding: 0 16px 32px;
  }

  .hero-inner h1 {
    font-size: clamp(40px, 12vw, 64px);
  }
}

/* ================= Sektion-Grundlagen ================= */

section {
  position: relative;
}

.sektion {
  padding: 108px 0;
}

@media (max-width: 720px) {
  .sektion {
    padding: 72px 0;
  }
}

.sektion-kopf {
  max-width: 640px;
  margin-bottom: 56px;
  display: grid;
  gap: 16px;
}

.sektion-kopf h2 {
  font-size: clamp(27px, 3.2vw, 38px);
}

.sektion-kopf p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(6, 5, 4, 0.92);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.lightbox.ist-offen {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 86vh;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.lightbox-schliessen {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}


/* ================= FAQ ================= */

.faq-liste {
  max-width: 820px;
}

.faq-eintrag {
  border-bottom: 1px solid var(--line);
}

.faq-frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  text-align: left;
  font-family: "Geist", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.faq-frage .ikon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--copper-400);
  transition: transform 0.3s var(--ease);
}

.faq-eintrag[data-offen="true"] .faq-frage .ikon {
  transform: rotate(180deg);
}

.faq-antwort {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}

.faq-eintrag[data-offen="true"] .faq-antwort {
  grid-template-rows: 1fr;
}

.faq-antwort-inner {
  overflow: hidden;
}

.faq-antwort p {
  padding-bottom: 24px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 65ch;
}

/* ================= Footer ================= */

.fuss {
  border-top: 1px solid var(--line);
  padding: 72px 0 28px;
}

.fuss-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.fuss-marke {
  display: grid;
  gap: 18px;
}

.fuss-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fuss-logo img {
  height: 30px;
}

.fuss-logo-text {
  font-family: "Geist", sans-serif;
  font-size: 17px;
  font-weight: 600;
}

.fuss-marke p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 38ch;
}

.fuss-social {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.fuss-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.fuss-social a:hover {
  border-color: var(--copper-500);
  color: var(--copper-400);
}

.fuss-spalte h4 {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-faint);
  margin-bottom: 18px;
}

.fuss-spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.fuss-spalte a,
.fuss-spalte span {
  font-size: 14.5px;
  color: var(--text-muted);
}

.fuss-spalte a:hover {
  color: var(--copper-400);
}

.fuss-unten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-faint);
  flex-wrap: wrap;
}

.fuss-unten-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .fuss-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ================= Floating WhatsApp ================= */

.schweb-knopf {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: linear-gradient(135deg, var(--copper-600), var(--copper-400));
  color: #150d07;
  box-shadow: 0 10px 28px -8px rgba(204, 139, 62, 0.6);
  transition: transform 0.3s var(--ease);
}

.schweb-knopf:hover {
  transform: scale(1.08);
}

/* ================= Rechtsseiten (Impressum/Datenschutz) ================= */

.rechts-inhalt {
  padding: calc(var(--kopf-hoehe) + 64px) 0 96px;
  max-width: 820px;
}

.rechts-inhalt h1 {
  font-size: clamp(27px, 3.2vw, 38px);
  margin-bottom: 32px;
}

.rechts-inhalt h2 {
  font-size: 20px;
  text-transform: none;
  margin-top: 40px;
  margin-bottom: 14px;
}

.rechts-inhalt p,
.rechts-inhalt li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

.rechts-inhalt a {
  color: var(--copper-400);
}

.rechts-inhalt ul {
  padding-left: 20px;
  display: grid;
  gap: 6px;
}

.rechts-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--text-muted);
}

.rechts-zurueck:hover {
  color: var(--copper-400);
}

/* ================= Intro / Pre-Website ================= */

body.intro-aktiv {
  overflow: hidden;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 1;
  transition: opacity 1.1s var(--ease);
}

.intro-bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s var(--ease), transform 2.4s var(--ease);
}

.intro-bild img,
.intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: brightness(1.35) contrast(1.05);
}

.intro.ist-bereit .intro-bild {
  opacity: 1;
  transform: scale(1);
}

.intro-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(65% 60% at 50% 58%, rgba(11, 9, 8, 0) 30%, rgba(11, 9, 8, 0.55) 78%),
    linear-gradient(0deg, var(--bg) 0%, rgba(11, 9, 8, 0.1) 22%, rgba(11, 9, 8, 0.05) 55%, rgba(11, 9, 8, 0.35) 100%);
}

.intro-inhalt {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 24px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.2s var(--ease) 0.3s, transform 1.2s var(--ease) 0.3s;
}

.intro.ist-bereit .intro-inhalt {
  opacity: 1;
  transform: none;
}

.intro-logo {
  width: min(72vw, 340px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5));
}

.intro-zeile {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

.intro-skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.8s, border-color 0.25s var(--ease), color 0.25s var(--ease);
}

.intro.ist-bereit .intro-skip {
  opacity: 1;
}

.intro-skip:hover {
  border-color: var(--copper-500);
  color: var(--copper-200);
}

.intro.ist-weg {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .intro {
    transition: opacity 0.4s linear;
  }
  .intro-bild,
  .intro-inhalt,
  .intro-skip {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ================= Vorher/Nachher Beispiele ================= */

.vn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.vn-karte {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}

.vn-vergleich {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
}

.vn-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.vn-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vn-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  backdrop-filter: blur(6px);
}

.vn-tag--vorher {
  background: rgba(11, 9, 8, 0.6);
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
}

.vn-tag--nachher {
  background: linear-gradient(135deg, var(--copper-600), var(--copper-400));
  color: #150d07;
}

.vn-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
}

.vn-info h3 {
  font-size: 18px;
  text-transform: none;
  font-weight: 600;
}

.vn-beispiel-badge {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  color: var(--text-faint);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
}

@media (max-width: 720px) {
  .vn-grid {
    grid-template-columns: 1fr;
  }
}


/* ================= Helle Sektionen ================= */

.sektion--hell {
  background: #f5f2ec;
  color: #201914;
}

.sektion--hell h2,
.sektion--hell h3 {
  color: #201914;
}

.sektion--hell p {
  color: rgba(32, 25, 20, 0.72);
}

.sektion-kopf--zentriert {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  justify-items: center;
}


/* ================= Vertrauensleiste ================= */

.vertrauensleiste {
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}

.vertrauensleiste-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}

.vertrauens-punkt {
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
}

.vertrauens-punkt .ikon {
  font-size: 26px;
  color: var(--copper-400);
  flex-shrink: 0;
}

.vertrauens-punkt strong {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
}

.vertrauens-punkt span {
  display: block;
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 2px;
}

@media (max-width: 900px) {
  .vertrauensleiste-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .vertrauensleiste-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= USP Banner ================= */

.usp-banner {
  position: relative;
  min-height: 66vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.usp-banner-bild {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.usp-banner-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.usp-banner-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, var(--bg) 4%, rgba(11, 9, 8, 0.45) 46%, rgba(11, 9, 8, 0.15) 75%),
    linear-gradient(180deg, rgba(11, 9, 8, 0.55) 0%, rgba(11, 9, 8, 0.05) 30%);
}

.usp-banner-inhalt {
  width: 100%;
  max-width: 640px;
  padding: 0 24px 64px;
  display: grid;
  gap: 14px;
  margin-left: max(24px, calc((100vw - var(--breite)) / 2));
}

.usp-banner-inhalt h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}

.usp-banner-inhalt p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 46ch;
}

@media (max-width: 640px) {
  .usp-banner {
    min-height: 56vh;
  }
  .usp-banner-inhalt {
    margin-left: 0;
    padding: 0 20px 48px;
  }
}

/* ================= Leistungen Bento ================= */

.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 16px;
}

.leistung-kachel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  border: 1px solid var(--line);
  background: var(--bg-elevated);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.leistung-kachel:hover {
  border-color: var(--line-strong);
  transform: translateY(-4px);
}

.leistung-kachel--gross {
  grid-column: span 3;
  grid-row: span 2;
}

.leistung-kachel--mittel {
  grid-column: span 3;
  grid-row: span 1;
}

.leistung-kachel--klein {
  grid-column: span 2;
  grid-row: span 1;
}

.leistung-kachel-bild {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.leistung-kachel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.leistung-kachel:hover .leistung-kachel-bild img {
  transform: scale(1.06);
}

.leistung-kachel-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 9, 8, 0.92) 10%, rgba(11, 9, 8, 0.35) 65%, rgba(11, 9, 8, 0.15) 100%);
}

.leistung-kachel-inhalt {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.leistung-kachel-ikon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--copper-700), var(--copper-500));
  color: #150d07;
  font-size: 21px;
  margin-bottom: 4px;
}

.leistung-kachel h3 {
  font-size: 19px;
  font-weight: 600;
}

.leistung-kachel--gross h3 {
  font-size: 24px;
}

.leistung-kachel p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 30ch;
}

.leistung-kachel--akzent {
  background: linear-gradient(135deg, var(--copper-600), var(--copper-400));
  border-color: transparent;
  color: #150d07;
}

.leistung-kachel--akzent:hover {
  border-color: transparent;
  transform: translateY(-4px);
}

.leistung-kachel--akzent h3 {
  color: #150d07;
}

.leistung-kachel--akzent p {
  color: rgba(21, 13, 7, 0.72);
}

.leistung-kachel-ikon--dunkel {
  background: rgba(21, 13, 7, 0.14);
  color: #150d07;
}

.leistung-kachel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}

.leistung-kachel-link .ikon {
  font-size: 13px;
  transition: transform 0.25s var(--ease);
}

.leistung-kachel--akzent:hover .leistung-kachel-link .ikon {
  transform: translateX(3px);
}

@media (max-width: 980px) {
  .leistungen-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 190px;
  }
  .leistung-kachel--gross,
  .leistung-kachel--mittel,
  .leistung-kachel--klein {
    grid-column: span 1;
    grid-row: span 1;
  }
  .leistung-kachel--gross {
    grid-row: span 2;
  }
}

@media (max-width: 560px) {
  .leistungen-grid {
    grid-template-columns: 1fr;
  }
  .leistung-kachel--gross,
  .leistung-kachel--mittel,
  .leistung-kachel--klein {
    grid-row: span 1;
    min-height: 190px;
  }
}

/* ================= Ablauf ================= */

.ablauf-sektion {
  background: var(--bg-elevated);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.ablauf-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.ablauf-schritt {
  position: relative;
  padding: 8px 36px 8px 0;
}

.ablauf-schritt:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 0;
  width: 1px;
  height: calc(100% - 40px);
  background: var(--line);
}

.ablauf-zahl {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--copper-400);
  margin-bottom: 18px;
  display: block;
}

.ablauf-schritt h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.ablauf-schritt p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 34ch;
}

@media (max-width: 820px) {
  .ablauf-liste {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ablauf-schritt:not(:last-child)::after {
    display: none;
  }
}

/* ================= Über uns Kapitel ================= */

.ueberuns {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: 640px;
}

.ueberuns-bild {
  position: relative;
  overflow: hidden;
}

.ueberuns-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%);
  mask-image: linear-gradient(90deg, transparent, black 12%);
}

.ueberuns-inhalt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 80px 64px;
  background: var(--bg-elevated);
}

.ueberuns-inhalt h2 {
  font-size: clamp(27px, 3.2vw, 38px);
}

.ueberuns-inhalt p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 46ch;
}

.ueberuns-fakten {
  display: grid;
  gap: 16px;
  margin-top: 8px;
}

.ueberuns-fakt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ueberuns-fakt .ikon {
  font-size: 20px;
  color: var(--copper-400);
  margin-top: 2px;
  flex-shrink: 0;
}

.ueberuns-fakt strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}

.ueberuns-fakt span {
  display: block;
  font-size: 13.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

@media (max-width: 980px) {
  .ueberuns {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .ueberuns-bild {
    height: 340px;
  }
  .ueberuns-bild img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .ueberuns-inhalt {
    padding: 56px 24px;
  }
}

/* ================= Warum wir (helle Sektion) ================= */

.warum-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(32, 25, 20, 0.12);
  border: 1px solid rgba(32, 25, 20, 0.12);
  border-radius: var(--radius);
  overflow: hidden;
}

.warum-punkt {
  background: #fdfbf7;
  padding: 34px 32px;
  display: grid;
  gap: 10px;
}

.warum-zahl {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--copper-600);
}

.warum-punkt h3 {
  font-size: 19px;
}

.warum-punkt p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 40ch;
}

@media (max-width: 720px) {
  .warum-liste {
    grid-template-columns: 1fr;
  }
}

/* ================= Galerie ================= */

.galerie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 170px;
  gap: 14px;
}

.galerie-grid button {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
  padding: 0;
}

.galerie-grid button:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.galerie-grid button:nth-child(4) {
  grid-column: span 2;
}

.galerie-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.galerie-grid button:hover img {
  transform: scale(1.05);
}

@media (max-width: 820px) {
  .galerie-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }
  .galerie-grid button:nth-child(1) {
    grid-column: span 2;
  }
  .galerie-grid button:nth-child(4) {
    grid-column: span 1;
  }
}

/* ================= CTA Banner ================= */

.cta-banner {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  padding: 76px 56px;
  text-align: center;
  display: grid;
  gap: 22px;
  justify-items: center;
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(204, 139, 62, 0.18), transparent 60%),
    var(--bg-elevated);
  border: 1px solid var(--line);
}

.cta-banner h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  max-width: 20ch;
}

.cta-banner p {
  font-size: 15.5px;
  color: var(--text-muted);
  max-width: 50ch;
}

@media (max-width: 720px) {
  .cta-banner {
    padding: 56px 24px;
  }
}

/* ================= Anpassungen helle Sektionen ================= */

/* Vorher/Nachher auf hellem Grund */
.sektion--hell .vn-karte {
  background: #fdfbf7;
  border-color: rgba(32, 25, 20, 0.12);
}

.sektion--hell .vn-vergleich {
  background: rgba(32, 25, 20, 0.12);
}

.sektion--hell .vn-beispiel-badge {
  color: rgba(32, 25, 20, 0.55);
  border-color: rgba(32, 25, 20, 0.25);
}

.sektion--hell .vn-tag--vorher {
  background: rgba(245, 242, 236, 0.85);
  color: rgba(32, 25, 20, 0.75);
  border: 1px solid rgba(32, 25, 20, 0.2);
}


/* ---- BOCK STUDIO Credit ---- */
.bs-credit{color:inherit;opacity:.62;text-decoration:none}
.bs-credit:hover,.bs-credit:focus-visible{opacity:1;text-decoration:underline}