/* =========================================================
   L&W Fahrzeugtechnik — Designrichtung "Signal"
   Eine Schriftfamilie (Sora), weiche Ecken (16/12/8),
   Hierarchie über Größe und Gewicht statt Schriftwechsel.
   ========================================================= */

/* ---------- 1. Schrift ---------- */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  --ink: #09090b;
  --carbon: #15151a;
  --carbon-2: #1c1c22;
  --fog: #fafafa;
  --smoke: #a1a1aa;
  /* 5,9:1 auf --ink. Der fruehere Wert #71717a kam nur auf 4,12:1 und
     riss damit WCAG 1.4.3 (AA, 4,5:1) fuer normalen Text. */
  --smoke-dim: #8b8b94;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);

  --ember: #e02424;
  --ember-hot: #ef4444;
  --ember-text: #f36565;
  --ember-soft: rgba(224, 36, 36, 0.13);

  --font: "Sora", system-ui, -apple-system, sans-serif;

  /* Radien: vier Stufen, mehr braucht die Seite nicht. Dazu 2px fuer
     Knoepfe (Hausregel „kaum Radien") und 999px/50% fuer Pillen und
     Kreise. Alles andere ist ein Ausreisser. */
  --r-l: 20px;
  --r: 16px;
  --r-m: 12px;
  --r-s: 8px;

  /* Schatten in einer Familie: gleiche Richtung, gleiche Haerte.
     Sonderfaelle (roter Schein am Knopf, gruener Ring) bleiben lokal. */
  --kante: inset 0 0 0 1px var(--line);
  --kante-hell: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --schatten-karte: 0 24px 48px -24px rgba(0, 0, 0, 0.9);
  --schatten-hoch: 0 34px 64px -34px rgba(0, 0, 0, 0.9);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* federnd, für Knöpfe die sich beim Drücken wehren */
  --ease-feder: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shell: 1360px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 82px;
}

/* ---------- 3. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--smoke);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg,
video,
picture,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--fog);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Lange deutsche Komposita („Gruppenfreistellungsverordnung",
   „Datenschutzerklärung") passen auf schmalen Handys nicht in eine Zeile
   und schoben die Seite seitlich breiter. overflow-wrap ist das
   Sicherheitsnetz und greift nur, wenn ein Wort wirklich nicht passt.
   KEIN hyphens:auto — zusammen mit text-wrap:balance trennte der Browser
   auch Woerter, die passen („Achsver-messung"), nur um Zeilen auszugleichen.
   Die wenigen wirklich zu langen Woerter tragen ­ im Text. */
h1, h2, h3, h4, p, li, dd, summary, td, th {
  overflow-wrap: break-word;
}


ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--ember);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--ember-hot);
  outline-offset: 3px;
}

/* ---------- 4. Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(4.5rem, 8vw, 8rem);
}

.band {
  border-block: 1px solid var(--line);
  background: var(--carbon);
}

/* Ueberschriftsblock: eine Breite fuer alle Abschnitte, damit die
   Zeilenlaenge ueberall gleich laeuft. */
/* Vertikaler Rhythmus in den Abschnitten. Vorher standen die Abstaende
   als Inline-Styles im Markup: viermal 1,5rem, zweimal 1,25rem, einmal
   1rem — dieselbe Beziehung, drei Werte. Jetzt eine Regel. */
.eyebrow + .h2,
.eyebrow + h1,
.eyebrow + h2 {
  margin-top: 0.875rem;
}

.h2 + .lead,
h2 + .lead,
h1 + .lead {
  margin-top: 1.5rem;
}

.lead + .lead {
  margin-top: 1rem;
}

.lead + .chips,
.lead + .svc__more,
.chips + .svc__more {
  margin-top: 1.75rem;
}

/* Abschnitts-Varianten. Diese drei Abstaende standen vorher als
   Inline-Styles in den Generatoren — je dreimal derselbe Wert.
   .section--tight trug sogar eine Klasse, die es im CSS nie gab. */
.callback__hinweis {
  margin: 0.6rem auto 0;
  text-align: center;
}

.callback__hinweis a {
  /* Nicht --ember: das kommt auf Schwarz nur auf 4,21:1. */
  color: var(--ember-text);
}

.section--tight {
  padding-top: 0;
}

.section--erste {
  padding-top: 3.5rem;
}

.hinweis--abgesetzt {
  margin-top: 2.5rem;
}

.mb-head {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
  max-width: 44rem;
}

/* ---------- 5. Typo-Bausteine ---------- */
.spec {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
  color: var(--ember-text);
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--ember);
  flex: none;
}

.h2 {
  font-size: clamp(2rem, 3.6vw, 3.4rem);
}

.h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
  line-height: 1.75;
  color: var(--smoke);
  max-width: 48ch;
}

.muted {
  color: var(--smoke);
}

.text-ember {
  color: var(--ember-text);
}

/* Akzentwort — dezenter Unterstrich statt Balken */
.sweep {
  position: relative;
  display: inline-block;
  color: var(--ember-text);
}

/* ---------- 6. Buttons ---------- */
/* Knopf-System: drei Hoehen (44 / 52 / 60), sonst nichts. Vorher standen
   44, 46, 51 und 64 nebeneinander — dieselbe Familie, aber vier Groessen. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 0;
  border-radius: var(--r-s);
  /* Verlauf statt Flaeche, dazu ein Lichtsaum an der Oberkante und ein
     roter Schein darunter — der Knopf sitzt damit im Bild statt darauf. */
  background: linear-gradient(180deg, #ea2f2f, #c81c1c);
  color: #fff;
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 28px -14px rgba(224, 36, 36, 0.75);
  transition: transform 160ms var(--ease-out), background 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out), border-color 200ms ease, color 200ms ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.btn--lg {
  min-height: 60px;
  padding: 0 2rem;
  font-size: 1rem;
  border-radius: var(--r-m);
}

.btn--block {
  width: 100%;
}

.btn--ghost {
  background: transparent;
  color: var(--fog);
  border: 1px solid var(--line-strong);
  /* erbt sonst Lichtsaum und roten Schein von .btn */
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: linear-gradient(180deg, #f24444, #d32020);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 16px 34px -14px rgba(224, 36, 36, 0.85);
  }
  .btn--ghost:hover,
  .btn--rand:hover {
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
  .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--fog);
  }
}

.link-fade {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--smoke);
  transition: color 200ms ease;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 1.75rem;
  color: var(--fog);
  font-size: 0.9rem;
  font-weight: 500;
}

.arrow-link svg {
  transition: transform 320ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .link-fade:hover {
    color: var(--fog);
  }
  .arrow-link:hover svg {
    transform: translateY(3px);
  }
}

/* ---------- 7. Kopfleiste ---------- */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color 320ms ease, border-color 320ms ease;
}

.header[data-stuck="true"] {
  background: rgba(9, 9, 11, 0.9);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  min-height: var(--header-h);
}

/* Markenblock. Bis zum 31.08.2026 stand neben dem Logo noch
   „Meisterbetrieb / Dresden-Pieschen". Seit dem zweiten Menuepunkt geht
   die Rechnung nicht mehr auf: Die Navigation braucht 691 Pixel, der
   Container ist auf 1360 gedeckelt, damit bleiben je Seitenspalte 302 —
   der Markenblock mit Zusatz war 354 breit und lief in die Navigation.
   Statt an Breakpoints zu schrauben ist der Zusatz raus; das Logo traegt
   den Schriftzug ohnehin selbst und ist dafuer etwas groesser. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  flex: none;
  transition: opacity 320ms ease;
}

.brand img {
  height: 58px;
  width: auto;
  /* Nur ein neutraler Absatz nach unten. Der rote Schein war eine
     Rotquelle zu viel — das Logo trägt sein Rot schon selbst. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7));
  transition: filter 420ms var(--ease-out), transform 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover img {
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.8));
    transform: translateY(-1px);
  }
}

/* Das Logo behält beim Scrollen seine Größe. Vorher fiel es von 54 auf 46
   Pixel, und weil `height` nicht in der Transition steht, sprang es hart —
   dazu rutschte es in der gleich hoch bleibenden Leiste optisch weg.
   Beim Scrollen ändert sich nur noch der Hintergrund der Leiste. */

@media (max-width: 620px) {
  .brand img {
    height: 44px;
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.header__cta {
  justify-self: end;
  flex: none;
  min-height: 44px;
  padding: 0 1.35rem;
  font-size: 0.875rem;
}

/* Dropdown */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav__trigger svg {
  width: 11px;
  height: 11px;
  transition: transform 320ms var(--ease-out);
}

.nav__item[data-open="true"] .nav__trigger {
  color: var(--fog);
}

.nav__item[data-open="true"] .nav__trigger svg {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  z-index: 5;
  width: min(38rem, 80vw);
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: rgba(21, 21, 26, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--schatten-hoch);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity 200ms var(--ease-out), transform 320ms var(--ease-out),
    visibility 320ms;
}

.nav__item[data-open="true"] .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--r-s);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--smoke);
  transition: background-color 200ms ease, color 200ms ease;
}

.dropdown a svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--ember-text);
}

@media (hover: hover) and (pointer: fine) {
  .dropdown a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--fog);
  }
}

/* Burger + Mobilmenü */
.burger {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: transparent;
  cursor: pointer;
}

.burger__box {
  position: relative;
  width: 18px;
  height: 12px;
}

.burger__box i {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--fog);
  transition: transform 320ms var(--ease-drawer), opacity 200ms ease;
}

.burger__box i:nth-child(1) {
  top: 0;
}
.burger__box i:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}
.burger__box i:nth-child(3) {
  bottom: 0;
}

[data-menu-open="true"] .burger__box i:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
[data-menu-open="true"] .burger__box i:nth-child(2) {
  opacity: 0;
}
[data-menu-open="true"] .burger__box i:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 49;
  display: grid;
  /* 'safe center': zentriert, solange der Inhalt passt. Wird er hoeher als
     der Bildschirm, beginnt er oben statt nach oben ueber die Kopfleiste
     hinauszulaufen. Aeltere Browser ohne 'safe' nehmen 'start'. */
  align-content: start;
  align-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* +1rem Luft unter der Kopfleiste: wenn das Menue oben beginnt statt
     zu zentrieren (kleine Schirme, Querformat), klebt der erste Eintrag
     sonst direkt an der Trennlinie. */
  padding: calc(var(--header-h) + 1rem) var(--gutter) 3rem;
  background: rgba(9, 9, 11, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--ease-out), visibility 320ms;
}

[data-menu-open="true"] .menu {
  opacity: 1;
  visibility: visible;
}

[data-menu-open="true"] .header {
  background: rgba(9, 9, 11, 0.98);
  border-bottom-color: var(--line);
}


.menu > a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: clamp(1.6rem, 7vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--fog);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}

.menu > a::before {
  content: attr(data-n);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ember-text);
}

[data-menu-open="true"] .menu > a {
  opacity: 1;
  transform: translateY(0);
}

[data-menu-open="true"] .menu > a:nth-child(1) { transition-delay: 55ms; }
[data-menu-open="true"] .menu > a:nth-child(2) { transition-delay: 95ms; }
[data-menu-open="true"] .menu > a:nth-child(3) { transition-delay: 135ms; }
[data-menu-open="true"] .menu > a:nth-child(4) { transition-delay: 175ms; }
[data-menu-open="true"] .menu > a:nth-child(5) { transition-delay: 215ms; }
[data-menu-open="true"] .menu > a:nth-child(6) { transition-delay: 255ms; }
[data-menu-open="true"] .menu > a:nth-child(7) { transition-delay: 295ms; }
[data-menu-open="true"] .menu > a:nth-child(8) { transition-delay: 335ms; }

.menu__foot {
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-out) 370ms,
    transform 420ms var(--ease-out) 370ms;
}

[data-menu-open="true"] .menu__foot {
  opacity: 1;
  transform: translateY(0);
}

/* Muss HINTER den Grundregeln stehen, sonst gewinnen die (gleiche
   Spezifitaet, spaetere Regel siegt).
   Niedrige Bildschirme (kleine Handys, Querformat): Eintraege kompakter,
   damit Menue und Telefonknopf ohne Scrollen passen. */
@media (max-height: 760px) {
  .menu > a {
    font-size: clamp(1.3rem, 5.6vw, 1.75rem);
    padding-block: 0.55rem;
  }
  .menu__foot {
    margin-top: 1.25rem;
  }
}

/* 1180 statt 1100: bei 1100 blieben je Seitenspalte nur 132 Pixel, der
   Termin-Knopf braucht 148 und lief in die Navigation. */
@media (max-width: 1180px) {
  .nav,
  .header__cta {
    display: none;
  }
  .header__row {
    grid-template-columns: 1fr auto;
  }
  .burger {
    display: grid;
    justify-self: end;
  }
}

@media (min-width: 1181px) {
  .menu {
    display: none;
  }
}

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(880px, calc(100dvh - var(--header-h)));
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3rem));
  /* Die Datenleiste am Fuss ist raus, ihre Inhalte laufen jetzt im
     Markenband mit. Unten reicht deshalb normaler Abstand. */
  padding-bottom: clamp(4rem, 7vw, 7rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media picture {
  display: block;
  height: 100%;
}

/* Vignette: dunkle Ecken, heller Kern. Nimmt dem Standbild das Flache
   und zieht den Blick in die Mitte. Nur ein Verlauf, kein Filter. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Zurueckhaltend: der Hero-Schleier dunkelt schon ab, hier kommt nur
     der Randabfall dazu. Staerkere Werte haben das Bild geschluckt. */
  background:
    /* unten ins Seitenschwarz auslaufen, damit das Bild keine Kante
       gegen den naechsten Abschnitt setzt */
    linear-gradient(to bottom, transparent 62%, rgba(9, 9, 11, 0.55) 84%, var(--ink) 100%),
    radial-gradient(135% 100% at 62% 44%, transparent 48%, rgba(9, 9, 11, 0.28) 84%, rgba(9, 9, 11, 0.55) 100%),
    linear-gradient(200deg, rgba(255, 255, 255, 0.04), transparent 30%);
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Etwas nach links gerückt: so sitzt die Bremsscheibe in der Lücke
     zwischen Überschrift und Rückrufkarte statt hinter der Karte. */
  object-position: 58% center;
}

@media (max-width: 900px) {
  .hero__media video,
  .hero__media img {
    /* Auf schmalen Schirmen zählt die Arbeit am Rad, nicht die Werkstatt */
    object-position: 66% center;
  }
}

/* Verlauf über dem Video. Links dicht genug, dass die Schrift immer
   trägt — das Werkstattbild ist mit einem Mittelwert von 0,10 sehr dunkel
   und wechselt ständig die Helligkeit. */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
      120% 85% at 12% 42%,
      rgba(9, 9, 11, 0.94) 0%,
      rgba(9, 9, 11, 0.72) 38%,
      rgba(9, 9, 11, 0.3) 68%,
      transparent 100%
    ),
    linear-gradient(
      100deg,
      rgba(9, 9, 11, 0.9) 0%,
      rgba(9, 9, 11, 0.58) 46%,
      rgba(9, 9, 11, 0.2) 68%,
      rgba(9, 9, 11, 0.78) 100%
    ),
    linear-gradient(to top, var(--ink) 0%, rgba(9, 9, 11, 0) 26%);
}

/* Feine Filmkörnung — nimmt dem Videomaterial das Glatte */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__grid {
  position: relative;
  z-index: 4;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* Ruhiger: 68 statt 101 Pixel, Gewicht 600 statt 700, weniger Enge.
   Die Betonung läuft über Helligkeit, nicht über Farbe — die zweite
   Zeile steht gedämpft, das Rot bleibt der Handlungsaufforderung. */
.hero__h1 {
  font-size: clamp(2.25rem, 4.6vw, 4.25rem);
  font-weight: 600;
  /* 1,12 statt 1,06: der Schweif der Speed-Linie unter „Meisterwerkstatt"
     braucht ein paar Pixel, sonst schneidet er die Zeile darunter an. */
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--fog);
  text-wrap: balance;
  max-width: 16ch;
}

.hero__h1 > span {
  display: block;
}

.hero__h1 em {
  display: block;
  font-style: normal;
  color: var(--smoke);
}

/* Vorspann im Hero: gedämpft. Das Rot bleibt der Handlung vorbehalten. */
.eyebrow--still {
  color: var(--fog);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow--still::before {
  background: var(--ember);
}

.eyebrow--still::before {
  background: var(--line-strong);
}

/* Rote Linie unter der Überschrift, wächst beim Auftritt mit */
.hero__rule {
  height: 3px;
  width: 0;
  margin: 24px 0 0;
  border-radius: 2px;
  background: var(--ember);
  animation: heroRule 800ms 400ms var(--ease-out) forwards;
}

@keyframes heroRule {
  to {
    width: 88px;
  }
}

.hero__lead {
  margin-top: 24px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--smoke);
  max-width: 46ch;
}

/* Bewertungszeile */

.hero__more {
  margin-top: 32px;
}

/* ---------- 9. Rückruf-Karte ---------- */
/* Doppelrand: aeussere Schale, darin ein abgesetzter Kern. Die Karte lag
   vorher als flache Flaeche im Bild — ohne Kante, ohne Lichtsaum, ohne
   Tiefe. Der Kern ist ein Pseudo-Element, damit das Markup unangetastet
   bleibt (an .callback haengen Formularlogik und Erfolgszustand).
   Kein backdrop-filter: die Karte scrollt mit. */
.callback {
  position: relative;
  isolation: isolate;
  padding: calc(clamp(1.15rem, 1.7vw, 1.5rem) + 6px);
  border-radius: var(--r-l);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 45%, rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 40px 90px -55px rgba(224, 36, 36, 0.5),
    0 30px 70px -35px rgba(0, 0, 0, 0.95);
}

/* Innerer Kern mit eigenem Lichtsaum an der Oberkante */
.callback::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: calc(var(--r-l) - 6px);
  background: linear-gradient(180deg, #17171d, #101014 60%, #0d0d11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Roter Schimmer, der in der oberen Ecke des Kerns sitzt */
.callback::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: calc(var(--r-l) - 6px);
  pointer-events: none;
  background: radial-gradient(90% 60% at 15% 0%, rgba(224, 36, 36, 0.14), transparent 60%);
}

.callback__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fog);
}

.callback__sub {
  margin-top: 0.3rem;
  color: var(--smoke);
  font-size: 0.8125rem;
  font-weight: 400;
}

.callback__fields {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.field__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--smoke);
}

/* Felder liegen im Material, statt darauf: dunkler Verlauf, feiner
   Schattenrand oben. Der Rahmen kommt aus dem box-shadow, damit sich
   beim Fokus nichts in der Groesse aendert. */
.control {
  height: 52px;
  width: 100%;
  padding-inline: 0.95rem;
  border: 0;
  border-radius: var(--r-s);
  background: linear-gradient(180deg, #08080a, #0e0e12);
  color: var(--fog);
  font-size: 0.9rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 2px 4px rgba(0, 0, 0, 0.55);
  transition: box-shadow 200ms var(--ease-out), background 200ms var(--ease-out);
}

.control::placeholder {
  /* Nicht --smoke-dim: auf dem dunkleren Feldgrund kam der Platzhalter
     nur auf 4,09:1. Hell genug fuer AA, aber klar heller Text bleibt
     dem Eingegebenen vorbehalten. */
  color: #8b8b94;
}

.control:focus {
  outline: none;
  background: linear-gradient(180deg, #0a0a0d, #121218);
  box-shadow:
    inset 0 0 0 1px var(--ember),
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 3px var(--ember-soft),
    0 6px 22px -10px rgba(224, 36, 36, 0.45);
}

textarea.control {
  height: auto;
  min-height: 4.5rem;
  padding-block: 0.75rem;
  line-height: 1.6;
  resize: vertical;
}

/* Eigenes Auswahlfeld — die Optionsliste eines nativen <select>
   rendert das Betriebssystem und lässt sich nicht gestalten. */
.cselect {
  position: relative;
}

.cselect__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  cursor: pointer;
}

.cselect__btn svg {
  flex: none;
  color: var(--smoke);
  transition: transform 200ms var(--ease-out);
}

.cselect[data-open="true"] .cselect__btn {
  box-shadow:
    inset 0 0 0 1px var(--ember),
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 3px var(--ember-soft);
}

.cselect[data-open="true"] .cselect__btn svg {
  transform: rotate(180deg);
}

.cselect__list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 17rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-m);
  background: var(--carbon);
  box-shadow: var(--schatten-karte);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
    visibility 200ms;
}

.cselect[data-open="true"] .cselect__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cselect__opt {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-s);
  font-size: 0.9rem;
  color: var(--smoke);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

/* Häkchenplatz, damit die Zeilen nicht springen */
.cselect__opt::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: no-repeat center / contain;
}

.cselect__opt[aria-selected="true"] {
  color: var(--fog);
}

.cselect__opt[aria-selected="true"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f36565' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.cselect__opt[data-active="true"] {
  background: rgba(255, 255, 255, 0.07);
  color: var(--fog);
}

@media (hover: hover) and (pointer: fine) {
  .cselect__opt:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--fog);
  }
}

/* das native Feld bleibt für den Formularversand erhalten */
.cselect select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.control[aria-invalid="true"] {
  border-color: var(--ember);
}

.field__error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--ember-text);
  opacity: 0;
  transition: opacity 200ms ease;
}

.field__error[data-show="true"] {
  opacity: 1;
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--smoke);
  cursor: pointer;
}

.consent input {
  appearance: none;
  flex: none;
  /* 1,5rem = 24px: die Mindestgroesse aus WCAG 2.2 (2.5.8).
     Vorher 1,35rem = 21,6px und damit knapp darunter. */
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-s);
  background: var(--ink);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.consent input:checked {
  background: var(--ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
  border-color: var(--ember);
}

.consent a {
  color: var(--fog);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.callback__note {
  margin-top: 0.65rem;
  text-align: center;
  color: var(--smoke);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Honigtopf: raus aus dem Sichtfeld, nicht display:none —
   manche Bots meiden unsichtbare Felder sonst. */
.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.callback__fehler {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.callback__fehler a {
  color: var(--ember-text);
  white-space: nowrap;
}

.callback__done {
  display: none;
  text-align: center;
  padding-block: 1.75rem 1rem;
}

.callback[data-sent="true"] .callback__form,
.callback[data-sent="true"] .callback__head {
  display: none;
}

.callback[data-sent="true"] .callback__done {
  display: block;
}

.callback__check {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ember);
  color: #fff;
}

@media (max-width: 1000px) {
  .hero {
    min-height: 0;
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .callback {
    max-width: 30rem;
  }
}

/* ---------- 10. Markenband ---------- */

/* ---------- 11. Leistungskarten ---------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.svc {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 320ms ease, transform 420ms var(--ease-out);
}

.svc__media {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
}

.svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.svc__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--carbon) 0%,
    rgba(21, 21, 26, 0.15) 55%,
    transparent 100%
  );
}

.svc__tag {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 1;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  /* Deckende Fläche statt backdrop-filter: zwölf dieser Badges scrollen
     mit und würden sonst bei jedem Bild neu weichgezeichnet werden. */
  background: rgba(9, 9, 11, 0.93);
  color: var(--ember-text);
  font-size: 0.75rem;
  font-weight: 500;
}

.svc__body {
  padding: 1.15rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.svc__title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.svc__title svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--ember-text);
}

.svc__text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--smoke);
}

.svc__more {
  margin-top: auto;
  padding-top: 0.7rem;
  color: var(--ember-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .svc:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
  }
  .svc:hover .svc__media img {
    transform: scale(1.05);
  }
}

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

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

/* ---------- 13. Feature ---------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.feature__media {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.feature__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
}

.chip {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--carbon);
  color: var(--smoke);
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (max-width: 880px) {
  .feature {
    grid-template-columns: 1fr;
  }
  .feature--flip .feature__media {
    order: -1;
  }
}

/* ---------- 14. Ablauf ---------- */
/* Eine Linie zieht sich einmal durch den ganzen Abschnitt und bleibt
   dann stehen: Kachel 1 umranden, Naht zur zweiten, Kachel 2 umranden,
   Naht zur dritten, Kachel 3 umranden. Kein Kreislauf — was gezeichnet
   ist, bleibt rot.

   Je Kachel zwei Pfade, beide beginnen am linken Schienenpunkt und enden
   am rechten: einer ueber den oberen Rand, einer ueber den unteren. Der
   Rahmen schliesst sich also genau dort, wo die naechste Naht ansetzt.
   Die beiden Haelften sind unterschiedlich lang (der Punkt liegt auf
   Hoehe der Ziffernkreise, nicht auf halber Hoehe), laufen aber gleich
   lang — sie starten und treffen sich gemeinsam.

   Ablaufplan: 0—1,8s Kachel 1 · 1,8—2,02s Naht · 2,02—3,82s Kachel 2 ·
   3,82—4,04s Naht · 4,04—5,84s Kachel 3. */
@keyframes spur-ziehen {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Der helle Kopf laeuft der Spur voraus. Bei Versatz 0,02 laege er noch
   vor dem Pfadanfang und wuerde durch die Musterwiederholung am Ende
   auftauchen — deshalb blendet er die ersten und letzten Prozent aus. */
@keyframes kopf-ziehen {
  from {
    stroke-dashoffset: 0.02;
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  to {
    stroke-dashoffset: -0.98;
    opacity: 0;
  }
}

@keyframes naht-ziehen {
  to {
    transform: scaleX(1);
  }
}

.steps {
  position: relative;
}

/* Nur die beiden Luecken zwischen den Kacheln, auf Hoehe der
   Ziffernkreise. Die Breite einer Kachel ist rechenbar: Gesamtbreite
   minus zwei Luecken, geteilt durch drei. */
.steps__rail {
  --kachel: calc((100% - 3rem) / 3);
  position: absolute;
  top: calc(3.25rem - 1px);
  left: 0;
  right: 0;
  height: 2px;
}

.steps__rail i {
  position: absolute;
  top: 0;
  height: 2px;
  width: 1.5rem;
  background: linear-gradient(
    90deg,
    rgba(224, 36, 36, 0.8),
    rgba(255, 140, 140, 1)
  );
  transform: scaleX(0);
  transform-origin: left;
}

.steps__rail i:first-child {
  left: var(--kachel);
}

.steps__rail i:last-child {
  left: calc(var(--kachel) * 2 + 1.5rem);
}

.steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.steps__list li {
  position: relative;
  padding: 1.5rem;
  border-radius: var(--r);
  background: radial-gradient(
      130% 100% at 8% 0%,
      rgba(255, 255, 255, 0.055),
      transparent 58%
    ),
    linear-gradient(180deg, var(--carbon-2), var(--carbon) 64%);
  box-shadow: var(--kante), var(--kante-hell), var(--schatten-karte);
  transition: box-shadow 460ms var(--ease-out);
}

/* Der Rahmen darf ueberstehen: der breite Schein soll nach aussen
   ausbluten. SVG schneidet standardmaessig ab. */
.faden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke-linecap: round;
}

.faden path {
  stroke-dashoffset: 1;
}

/* Der Kopf traegt ein kurzes Muster: bei Versatz 1 laege er durch die
   Musterwiederholung am Pfadanfang und wuerde vor dem Start aufblitzen. */
.faden__glut,
.faden__kopf {
  opacity: 0;
}

.steps[data-seen="true"] .faden__schein,
.steps[data-seen="true"] .faden__spur {
  animation: spur-ziehen 1.8s linear both;
}

.steps[data-seen="true"] .faden__glut,
.steps[data-seen="true"] .faden__kopf {
  animation: kopf-ziehen 1.8s linear both;
}

.steps[data-seen="true"] .steps__list li:nth-child(2) .faden path {
  animation-delay: 2.02s;
}

.steps[data-seen="true"] .steps__list li:nth-child(3) .faden path {
  animation-delay: 4.04s;
}

.steps[data-seen="true"] .steps__rail i {
  animation: naht-ziehen 0.22s linear both;
}

.steps[data-seen="true"] .steps__rail i:first-child {
  animation-delay: 1.8s;
}

.steps[data-seen="true"] .steps__rail i:last-child {
  animation-delay: 3.82s;
}

@media (hover: hover) {
  .steps__list li:hover {
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--kante-hell),
      var(--schatten-hoch);
  }
}

/* Der Ziffernkreis als lackiertes Bauteil: Licht von oben links,
   Schatten unten innen, roter Schein nach aussen. */
.step__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: radial-gradient(
    130% 130% at 32% 22%,
    var(--ember-hot),
    var(--ember) 52%,
    #9f1a1a
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(224, 36, 36, 0.45),
    0 10px 24px -8px rgba(224, 36, 36, 0.7);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.step__title {
  margin-top: 1.15rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.step__text {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--smoke);
}

@media (max-width: 800px) {
  .steps__rail {
    display: none;
  }
  .steps__list {
    grid-template-columns: 1fr;
  }
}

/* ---------- 15. Kundenstimmen ---------- */
.stimmen__herkunft {
  margin-top: 1.1rem;
  max-width: 46ch;
  color: var(--smoke-dim);
  line-height: 1.65;
  text-transform: none;
  letter-spacing: 0;
}


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

/* ---------- 16. FAQ ---------- */
/* Die Fragen stehen links im Raster wie jeder andere Abschnitt, nur die
   Spalte ist schmaler. Vorher war der ganze Abschnitt zentriert und fiel
   damit als einziger aus der Flucht. */
/* Hintergrundbild des Frage-Abschnitts. Zwei Schichten: das Bild selbst
   und darueber ein Verlauf, der links deckt und nach rechts aufmacht —
   die Ueberschrift steht links, das Auto sitzt rechts. */
#faq {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#faq::before,
#faq::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

#faq::after {
  inset: 0;
}

/* Hoehe aus der Breite, nicht aus dem Abschnitt: sonst verschiebt sich
   die Maske, sobald eine Frage aufklappt. */
#faq::before {
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1600 / 876;
}

#faq::before {
  background-image: image-set(
    url("../img/faq-auto.webp") type("image/webp"),
    url("../img/faq-auto.jpg") type("image/jpeg")
  );
  background-repeat: no-repeat;
  /* rechts oben: dort ist die Flaeche neben der Ueberschrift frei,
     weiter unten decken die Karten das Bild ohnehin ab */
  background-position: right top;
  /* nicht cover: das skaliert mit der Abschnittshoehe und laesst das Bild
     beim Aufklappen zoomen. Nur die Breite darf die Groesse bestimmen. */
  background-size: 100% auto;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  opacity: 0.75;
}

#faq::after {
  /* rein waagerecht, damit die Hoehe des Abschnitts nichts aendert.
     Rechts wieder volle Deckung: so laeuft das Bild an der Kante des
     Inhaltsbereichs aus, statt auf breiten Schirmen hart abzubrechen. */
  background: linear-gradient(
    90deg,
    var(--ink) 22%,
    rgba(9, 9, 11, 0.8) 44%,
    rgba(9, 9, 11, 0.26) 68%,
    rgba(9, 9, 11, 0.5) 88%,
    var(--ink) 100%
  );
}

@media (max-width: 860px) {
  /* Auf dem Handy liegt das Auto hinter dem Text statt neben ihm. */
  #faq::before {
    opacity: 0.3;
    background-position: 72% top;
    background-size: 190% auto;
  }
}

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.75rem;
}

/* Jede Spalte stapelt fuer sich. Im Zeilenraster hat eine aufgeklappte
   Karte ihre ganze Zeile gestreckt und daneben eine Luecke gelassen. */
.faq__spalte {
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.qa {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--carbon);
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease;
}

.qa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ember);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms var(--ease-out);
}

.qa[open] {
  border-color: var(--line-strong);
  background: var(--carbon-hoch, var(--carbon));
}

.qa[open]::before {
  transform: scaleY(1);
}

/* Das Symbol benennt das Thema, ohne mit der Frage um Aufmerksamkeit
   zu konkurrieren. Es sitzt im summary und damit immer im Sichtbaren —
   auch bei geschlossener Karte. */
/* Der Ring gehoert nach innen: die Karte hat overflow:hidden und wuerde
   einen aussen liegenden Ring an drei Seiten abschneiden. */
.qa summary:focus-visible {
  outline-offset: -4px;
  border-radius: var(--r-m);
}

.qa__symbol {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  color: var(--fog);
  opacity: 0.22;
  transition: opacity 320ms var(--ease-out), color 320ms var(--ease-out);
}

.qa__symbol svg {
  width: 100%;
  height: 100%;
}

.qa[open] .qa__symbol {
  color: var(--ember);
  opacity: 0.75;
}

.qa summary:hover .qa__symbol {
  opacity: 0.4;
}

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

.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fog);
  transition: color 200ms ease;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa__sign {
  position: relative;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

.qa__sign::before,
.qa__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0;
  height: 2px;
  border-radius: 2px;
  background: var(--ember);
  transform: translateY(-50%);
  transition: transform 320ms var(--ease-drawer), opacity 200ms ease;
}

.qa__sign::after {
  transform: translateY(-50%) rotate(90deg);
}

.qa[open] .qa__sign::after {
  opacity: 0;
  transform: translateY(-50%) rotate(0deg);
}

.qa__body {
  padding: 0 1.35rem 1.35rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--smoke);
  max-width: 62ch;
}

@media (hover: hover) and (pointer: fine) {
  .qa summary:hover {
    color: var(--ember-text);
  }
}

/* ---------- 17. Termin-Block ---------- */
/* ============================================================
   TERMIN — heller Block
   Bewusster Bruch am Seitenende: weisser Grund, schwarze Schrift.
   Die Tokens werden lokal gedreht, damit .lead, .spec, .control und
   die Knoepfe ohne Sonderregeln mitziehen. Vorher lag hier ein
   dunkler Kasten, dessen Beschriftungen nur auf 4,12:1 kamen.
   ============================================================ */
.termin {
  --ink: #121216;
  --carbon: #191920;
  --carbon-2: #202028;
  --fog: #fafafa;
  --smoke: #a1a1aa;
  --smoke-dim: #8b8b94;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --ember-text: #f56565;
  --ember-soft: rgba(224, 36, 36, 0.14);
  --kreis-grund: #2b2b34;

  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  border-radius: var(--r);
  /* eine Stufe heller als der Seitengrund plus Kante: der Abschnitt
     bleibt als eigene Flaeche erkennbar, ohne aufzublenden */
  background: #121216;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  color: #fafafa;
}

.termin__kopf {
  max-width: 44rem;
}

/* keine eigene Groesse mehr — .h2 gilt ueberall gleich */

/* --- Die drei Wege --- */
.wege {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.weg {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1.5rem 1.5rem 1.75rem;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--carbon);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  cursor: pointer;
  transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.weg__kreis {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.85rem;
  border-radius: var(--r-s);
  background: var(--kreis-grund, #101014);
  color: #ffffff;
}

.weg__kreis svg {
  width: 21px;
  height: 21px;
}

.weg--wa .weg__kreis {
  background: #1faa53;
}

.weg__titel {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}

.weg__wert {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fog);
}

.weg__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--smoke);
}

.weg__pfeil {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: var(--smoke-dim);
  transition: transform 420ms var(--ease-out), color 320ms var(--ease-out);
}

.weg__pfeil svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Anrufen ist der schnellste Weg — der einzige mit dem roten Kreis.
   Ein Akzent pro Abschnitt, nicht drei. */
.weg:first-child .weg__kreis {
  background: var(--ember);
}

.weg:first-child {
  border-color: rgba(224, 36, 36, 0.22);
  /* heller als die Nachbarn: hebt den schnellsten Weg heraus, ohne
     dass ein zweiter Akzentton noetig waere */
  background: #1c1c23;
  box-shadow: 0 18px 34px -26px rgba(0, 0, 0, 0.9);
}

@media (hover: hover) and (pointer: fine) {
  .weg:hover {
    background: #1c1c23;
    border-color: rgba(224, 36, 36, 0.45);
    transform: translateY(-3px);
  }
  .weg:hover .weg__kreis {
    transform: scale(1.06);
  }
  .weg:hover .weg__pfeil {
    transform: translate(4px, -1px);
    color: var(--ember);
  }
}

/* Der Kreis bewegt sich mit, statt beim Hover zu springen. */
.weg__kreis {
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}

.weg:active {
  transform: scale(0.99);
}

.weg[aria-expanded="true"] {
  background: #ffffff;
  border-color: var(--line-strong);
}

/* --- WhatsApp-Formular --- */
.wa {
  margin-top: 1rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--carbon);
}

.wa[hidden] {
  display: none;
}

.wa__kopf {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

.wa__kopf strong {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.wa__kopf span {
  font-size: 0.9375rem;
  color: var(--smoke);
}

.wa__felder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.wa__feld--voll {
  grid-column: 1 / -1;
}

.wa__hilfe {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--smoke);
}

.wa textarea.control {
  min-height: 5.5rem;
  resize: vertical;
}

.wa__fuss {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.btn--wa {
  background: #17853f;
  border-color: #17853f;
}

.btn--wa:hover {
  background: #1b9449;
  border-color: #1b9449;
}

.wa__hinweis {
  flex: 1 1 18rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--smoke);
}

.wa__hinweis a {
  color: var(--fog);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Eckdaten --- */
.termin__daten {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.termin__daten dt {
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--smoke);
}

.termin__daten dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fog);
}

.termin__daten dd a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
}

@media (max-width: 980px) {
  .wege {
    grid-template-columns: minmax(0, 1fr);
  }
  .wa__felder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .termin__daten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .wa__felder {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Niedrige Fenster: Die Rueckrufkarte ist der hoechste Block im Hero.
   Auf einem 13-Zoll-Notebook mit Lesezeichenleiste bleiben unter 800 px
   sichtbare Hoehe, dann lief sie unten aus dem Bild. */
@media (min-width: 901px) and (max-height: 880px) {
  .callback {
    padding: calc(1rem + 6px);
  }
  .callback__title {
    font-size: 1.125rem;
  }
  .callback__fields {
    gap: 0.55rem;
    margin-top: 0.9rem;
  }
  .control {
    height: 46px;
  }
  .field__label {
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
  }
  .consent {
    font-size: 0.75rem;
    line-height: 1.45;
  }
  .callback__note {
    margin-top: 0.5rem;
  }
}

/* ---------- 18. Footer ---------- */
.foot {
  border-top: 1px solid var(--line);
  padding-block: 2.75rem 1.75rem;
}

.foot__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.foot__brand img {
  height: 40px;
  width: auto;
  margin-bottom: 0.85rem;
}

.foot__addr {
  font-size: 0.875rem;
  color: var(--smoke);
}

.foot__links {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--smoke);
  transition: color 200ms ease;
}

.foot__bar {
  margin-top: 2.25rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  color: var(--smoke);
  font-size: 0.8125rem;
  font-weight: 400;
}

@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover {
    color: var(--ember-text);
  }
}

@media (max-width: 520px) {
  .foot__links {
    gap: 1.25rem;
  }
}

/* ---------- 19. Mobile Call-Leiste ---------- */
.callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 48;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(9, 9, 11, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 420ms var(--ease-drawer);
}

.callbar[data-show="true"] {
  transform: translateY(0);
}

.callbar .btn {
  flex: 1;
  min-height: 3rem;
}

@media (max-width: 860px) {
  .callbar {
    display: flex;
  }
  body {
    padding-bottom: 4.5rem;
  }
}

/* Fester WhatsApp-Knopf.
   Deckende Flaeche statt backdrop-filter, damit beim Scrollen nichts
   neu weichgezeichnet wird. Auf dem Handy sitzt er ueber der Call-Leiste. */
/* Runder Knopf, nur das Zeichen. Als Pille mit Beschriftung war er
   150 Pixel breit und lag im Hero auf der Rueckrufkarte; als Kreis
   braucht er ein Drittel davon. Ring aussen herum statt harter Kante. */
.wa-knopf {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 47;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #29c163, #1a9b4b);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 0 5px rgba(31, 170, 83, 0.13),
    0 16px 30px -14px rgba(0, 0, 0, 0.9);
  transition: box-shadow 420ms var(--ease-out),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms var(--ease-out);
}

/* Beschriftung bleibt fuer Vorleseprogramme, verschwindet aber optisch */
.wa-knopf__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wa-knopf__zeichen {
  display: grid;
  place-items: center;
}

.wa-knopf__zeichen svg {
  width: 27px;
  height: 27px;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .wa-knopf:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 0 0 9px rgba(31, 170, 83, 0.16),
      0 22px 40px -16px rgba(0, 0, 0, 0.9);
  }
}

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

@media (max-width: 860px) {
  /* ueber der Call-Leiste */
  .wa-knopf {
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }
}

/* ============================================================
   RECHTSTEXTE — Impressum, Datenschutz
   Schmale Lesespalte, ruhige Typografie. Kein Schnickschnack:
   diese Seiten werden gelesen, nicht bewundert.
   ============================================================ */
.recht__spalte {
  /* 38rem statt 46: bei 46 standen 92 Zeichen in einer Zeile, das
     liest sich bei einem Rechtstext zaeh. Jetzt rund 75. */
  max-width: 38rem;
  margin-inline: auto;
}

.recht h1 {
  margin-top: 1.25rem;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--fog);
}

.recht__stand {
  margin-top: 0.75rem;
  color: var(--smoke);
}

.recht__text {
  margin-top: 2.5rem;
}

.recht__text h2 {
  margin-top: 2.75rem;
  margin-bottom: 0.9rem;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fog);
}

.recht__text h2:first-child {
  margin-top: 0;
}

.recht__text h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fog);
}

.recht__text p {
  margin-bottom: 1.1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--smoke);
}

.recht__text a {
  color: var(--fog);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
}

.recht__text a:hover {
  text-decoration-color: var(--ember-hot);
}

.recht__text ul {
  margin: 0 0 1.4rem 1.1rem;
  color: var(--smoke);
  line-height: 1.75;
}

.recht__text li {
  margin-bottom: 0.4rem;
}

/* Anschriften und Kennziffern: enger gesetzt, damit die Zeilen
   als Block lesbar bleiben */
.recht__block {
  padding: 1.1rem 1.35rem;
  border-left: 2px solid var(--ember);
  background: var(--carbon);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  line-height: 1.8;
}

/* ---------- 20. Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal[data-seen="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 21. Vorher/Nachher-Galerie ---------- */
.subhead {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem));
}

.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

.ba-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ba-card__body {
  padding: 1.2rem 1.5rem 1.6rem;
  display: grid;
  gap: 0.3rem;
}

.ba-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.ba-card__meta {
  color: var(--ember-text);
  font-size: 0.8125rem;
  font-weight: 500;
}

.ba-card__note {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--smoke);
}

.ba {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--carbon-2);
  touch-action: pan-y;
  --split: 50%;
}

.ba__layer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.ba__layer--before {
  background: #1b1b21;
}

.ba__layer--after {
  background: #24242c;
  clip-path: inset(0 0 0 var(--split));
}

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

.ba__ph {
  color: var(--smoke-dim);
  text-align: center;
  line-height: 1.8;
  font-size: 0.8125rem;
  font-weight: 500;
  pointer-events: none;
}

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  background: var(--fog);
  transform: translateX(-1px);
  pointer-events: none;
}

.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 2.6rem;
  transform: translate(-50%, -50%);
  border: 2px solid var(--fog);
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.5);
}

.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: none;
}

.ba__tag {
  position: absolute;
  top: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(9, 9, 11, 0.8);
  color: var(--fog);
  font-size: 0.75rem;
  font-weight: 500;
  pointer-events: none;
}

.ba__tag--l {
  left: 0.85rem;
}

.ba__tag--r {
  right: 0.85rem;
}

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

.ba__single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.ba__flag {
  position: absolute;
  left: 0.85rem;
  top: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--ember);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
}

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

/* Schlussblock der Galerie */
.close {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.15rem;
}

.close .eyebrow {
  justify-content: center;
}

.close__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ---------- 22. Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: opacity 200ms ease;
  }
  .menu a,
  .menu__foot {
    transform: none;
    transition: opacity 200ms ease;
  }
  .brands__lane {
    animation: none;
  }
  /* Ohne Bewegung sofort der Endzustand: Rahmen und Naehte fertig
     gezogen, kein laufender Kopf. */
  .faden__schein,
  .faden__spur {
    animation: none;
    stroke-dashoffset: 0;
  }
  .faden__glut,
  .faden__kopf {
    display: none;
  }
  .steps__rail i {
    animation: none;
  }
  .steps__rail i,
  .svc:hover,
  .svc__media img,
  .btn:active {
    transform: none;
  }
  .callbar {
    transition: none;
  }
}

/* ---------- 23. Utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Die Sprungmarke war auch mit Tastaturfokus 1x1 Pixel gross — sehende
   Tastaturnutzer sahen also nichts. Beim Fokus tritt sie jetzt hervor. */
a.sr-only:focus,
button.sr-only:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.7rem 1.15rem;
  overflow: visible;
  clip: auto;
  border-radius: var(--r-s);
  background: var(--fog);
  color: #09090b;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- 26. Ratgeber ---------- */
.artikel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.artikel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
  overflow: hidden;
  transition: border-color 320ms ease, transform 420ms var(--ease-out);
}

.artikel__media {
  aspect-ratio: 8 / 5;
  overflow: hidden;
}

.artikel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.artikel__body {
  padding: 1.15rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.artikel__kat {
  color: var(--ember-text);
  font-size: 0.8125rem;
  font-weight: 600;
}

.artikel__titel {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.artikel__text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--smoke);
}

.artikel__meta {
  margin-top: auto;
  padding-top: 0.85rem;
  color: var(--smoke-dim);
  font-size: 0.8125rem;
}

@media (hover: hover) and (pointer: fine) {
  .artikel:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
  }
  .artikel:hover .artikel__media img {
    transform: scale(1.05);
  }
}

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

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

/* ---------- 27. Artikelseite ---------- */
.beitrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.beitrag__haupt {
  max-width: 44rem;
  min-width: 0;
}

.krumen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-size: 0.8125rem;
  color: var(--smoke);
}

.krumen a {
  color: var(--smoke);
  transition: color 200ms ease;
}

.krumen span[aria-hidden] {
  opacity: 0.5;
}

.beitrag h1 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.12;
}

.beitrag__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.15rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  color: var(--smoke-dim);
  font-size: 0.8125rem;
}

/* Kurzantwort direkt unter der Überschrift — die Snippet-Chance */
.kurzantwort {
  margin: 1.75rem 0;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ember);
  border-radius: var(--r-m);
  background: var(--carbon);
}

.kurzantwort p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--fog);
}

.beitrag__haupt h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.beitrag__haupt h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.beitrag__haupt p {
  margin-bottom: 1.05rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--smoke);
}

.beitrag__haupt p strong,
.beitrag__haupt li strong {
  color: var(--fog);
  font-weight: 600;
}

.beitrag__haupt ul {
  margin: 0 0 1.35rem;
  display: grid;
  gap: 0.6rem;
}

.beitrag__haupt ul li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--smoke);
}

.beitrag__haupt ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--ember);
}

.beitrag__haupt a:not(.btn) {
  color: var(--ember-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tabelle {
  width: 100%;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.tabelle th,
.tabelle td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.tabelle th {
  background: var(--carbon);
  color: var(--fog);
  font-weight: 600;
}

.tabelle td {
  color: var(--smoke);
}

.tabelle tr:last-child td {
  border-bottom: 0;
}

.tabelle-wrap {
  overflow-x: auto;
}

.hinweis {
  margin: 1.5rem 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(224, 36, 36, 0.06);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--smoke);
}

.hinweis strong {
  color: var(--fog);
}

.hinweis a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--ember-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Seitenspalte */
.beitrag__seite {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: 1.25rem;
}

.karte-cta {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
}

.karte-cta h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.karte-cta p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--smoke);
  margin-bottom: 1.15rem;
}

.karte-cta .btn {
  width: 100%;
}

.karte-cta .btn + .btn {
  margin-top: 0.6rem;
}

.inhalt-liste {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.inhalt-liste h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--smoke);
  margin-bottom: 0.85rem;
}

.inhalt-liste ol {
  display: grid;
  gap: 0.55rem;
  counter-reset: nav;
}

.inhalt-liste a {
  display: block;
  padding-block: 0.2rem;
  min-height: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--smoke);
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .inhalt-liste a:hover,
  .krumen a:hover {
    color: var(--ember-text);
  }
}

@media (max-width: 1000px) {
  .beitrag {
    grid-template-columns: 1fr;
  }
  .beitrag__seite {
    position: static;
  }
  .inhalt-liste {
    order: -1;
  }
}

/* Bild im Artikeltext */
.beitrag__bild {
  margin: 2rem 0;
  margin-inline: 0;
}

.beitrag__bild img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
}

.beitrag__bild figcaption {
  margin-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--smoke);
}

/* Titelbild in der Artikelkarte */
.artikel__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--carbon-2);
}

/* ============================================================
   LEISTUNGSSEITEN
   ============================================================ */

/* Dropdown mit zwölf Einträgen: drei Spalten statt zwei */
.dropdown--breit {
  width: min(52rem, 92vw);
  grid-template-columns: repeat(3, 1fr);
}

/* „Schaden & Gutachten" hat drei Eintraege. Zweispaltig ergaebe das eine
   halbleere zweite Zeile, deshalb hier eine Spalte. */
.dropdown--schmal {
  width: min(21rem, 80vw);
  grid-template-columns: minmax(0, 1fr);
}

.dropdown__alle {
  grid-column: 1 / -1;
  margin-top: 0.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  color: var(--ember-text);
  font-weight: 600;
}

/* Leistungskarte: Bild und Titel sind jetzt Links */
.svc__media {
  display: block;
  color: inherit;
}

.svc__title a,
.svc__more a {
  color: inherit;
}

.svc__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.svc__alle {
  margin-top: 2.25rem;
  text-align: center;
}

/* Kopf einer Leistungsseite */
.lhero {
  padding: calc(var(--header-h) + 3.5rem) 0 0;
}

.lhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.lhero__text h1 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lhero__text .lead {
  margin-top: 1.15rem;
  max-width: 34rem;
}

.lhero .chips {
  margin-top: 1.6rem;
}

.lhero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.lhero__media {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--carbon);
}

.lhero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Ablauf als nummerierte Liste im Fließtext */
.ablauf {
  list-style: none;
  margin: 1.9rem 0;
  display: grid;
  gap: 1.1rem;
}

.ablauf li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.02);
}

.ablauf li::before {
  content: none;
}

.ablauf__nr {
  color: var(--ember-text);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}

.ablauf__titel {
  margin: 0 0 0.3rem;
  color: var(--fog);
  font-weight: 600;
}

.ablauf li p:last-child {
  margin: 0;
  font-size: 0.9375rem;
}

/* FAQ auf Unterseiten */
.faq--eng {
  margin: 1.6rem 0 0;
}

/* Querverweise auf andere Leistungen */
.quer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.quer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--carbon);
  transition: border-color 320ms ease, transform 420ms var(--ease-out);
}

.quer__icon svg {
  width: 22px;
  height: 22px;
  color: var(--ember-text);
}

.quer__body {
  display: block;
}

.quer__titel {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fog);
}

.quer__text {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--smoke);
}

@media (hover: hover) and (pointer: fine) {
  .quer:hover {
    border-color: var(--line-strong);
    transform: translateY(-3px);
  }
}

/* Ratgeber-Verweise in der Seitenspalte */
.karte-cta--still {
  background: transparent;
}

.quer-liste {
  list-style: none;
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.7rem;
}

.quer-liste li::before {
  content: none;
}

.quer-liste a {
  display: block;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--smoke);
  border-bottom: 1px solid transparent;
  transition: color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .quer-liste a:hover {
    color: var(--fog);
  }
}

@media (max-width: 1080px) {
  .quer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .lhero {
    padding-top: calc(var(--header-h) + 2rem);
  }

  .lhero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .lhero__media {
    order: -1;
  }
}

@media (max-width: 720px) {
  .quer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ablauf li {
    padding: 0.95rem 1.05rem;
  }
}

/* ============================================================
   KUNDENSTIMMEN
   Links Überschrift und Google-Note, rechts drei Karten, die
   nach rechts auffächern. Die vorderste lässt sich ziehen.
   ============================================================ */
.stimmen {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  /* Überschrift oben bündig mit der Kartenoberkante, nicht mittig zur
     Gesamthöhe — sonst rutscht der Text mit jeder längeren Rezension tiefer. */
  align-items: start;
}

.stimmen__h2 em {
  display: block;
  font-style: normal;
  color: var(--ember-text);
}

/* Google-Note */
.gnote {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
}

.gnote__logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--carbon-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

.gnote__logo svg {
  width: 32px;
  height: 32px;
}

.gnote__wert {
  display: block;
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--smoke);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.gnote__wert strong {
  font-size: 2.125rem;
  font-weight: 700;
  color: var(--fog);
}

.gnote__sterne {
  display: block;
  margin-top: 2px;
  /* dieselbe Farbe wie im Hero: Google-Sterne sind gold, das Hausrot
     bleibt den eigenen Elementen */
  color: #fbbc04;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
}

.gnote__quelle {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--smoke);
}

/* Auffächernder Stapel */
.stapel-raum {
  min-width: 0;
}

/* Alle drei Karten liegen in derselben Rasterzelle. Dadurch gibt die
   längste Rezension die Höhe vor und keine wird unten abgeschnitten —
   eine feste Höhe hatte Lennart Hartmanns Text gekappt. */
.stapel {
  position: relative;
  display: grid;
  touch-action: pan-y;
}

.stapel__k {
  grid-area: 1 / 1;
  /* schmaler als die Spalte, damit der Fächer nach rechts hineinpasst
     statt über den Rand zu schieben */
  justify-self: start;
  width: 76%;
  cursor: grab;
  border-radius: var(--r-l);
  background: linear-gradient(168deg, #1a1a20, #131318);
  box-shadow: var(--kante), var(--schatten-hoch);
  transition: transform 700ms var(--ease-drawer), opacity 460ms var(--ease-out);
}

.stapel__k:active {
  cursor: grabbing;
}

/* Nach rechts gefächert statt gedreht gestapelt.

   Der verborgene Zustand ist der Standard: Karten ab Position 3 liegen
   unsichtbar hinter der dritten und blenden beim Nachruecken auf. So
   sind immer genau drei zu sehen, gleich wie viele Rezensionen im
   Markup stehen. */
.stapel__k {
  transform: translate3d(29%, 0, 0) scale(0.88);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.stapel__k[data-pos="0"] {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
}
.stapel__k[data-pos="1"] {
  transform: translate3d(15%, 0, 0) scale(0.94);
  opacity: 0.62;
  z-index: 2;
}
.stapel__k[data-pos="2"] {
  transform: translate3d(29%, 0, 0) scale(0.88);
  opacity: 0.4;
  z-index: 1;
}

/* Die hinteren Karten tragen nur Silhouette. Kein filter: blur() —
   das wird bei jedem Scrollbild neu gerechnet. Die geringere Deckkraft
   macht den Text ohnehin unlesbar. */
.stapel__k[data-pos="1"] .stapel__kern,
.stapel__k[data-pos="2"] .stapel__kern {
  opacity: 0.55;
}

.stapel__kern {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 34px);
}

.stapel__oben {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.stapel__sterne {
  color: var(--ember-hot);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
}

.stapel__zeichen {
  flex: none;
  width: 42px;
  height: 32px;
  fill: rgba(255, 255, 255, 0.09);
}

.stapel__zitat {
  /* mittig statt oben: die laengste Rezension bestimmt die Hoehe des
     Stapels, kurze Zitate wirken sonst verloren */
  flex: 1;
  display: flex;
  align-items: center;
  margin-top: 22px;
  font-size: 1.25rem;
  line-height: 1.58;
  letter-spacing: -0.012em;
  color: var(--fog);
}

.stapel__wer {
  margin-top: 22px;
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: inset 0 1px 0 var(--line);
}

.stapel__kuerzel {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fog);
  background: linear-gradient(150deg, #6b1414, #3a0d0d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.stapel__name {
  font-size: 1rem;
  font-weight: 600;
}

.stapel__meta {
  font-size: 0.8125rem;
  color: var(--smoke);
}

/* Steuerung mittig unter dem Stapel */
.stapel__steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}

.rundknopf {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: var(--fog);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 420ms var(--ease-feder), background-color 420ms var(--ease-out);
}

.rundknopf svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rundknopf:active {
  transform: scale(0.94);
}

.stapel__zaehler {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--smoke);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  min-width: 4.5rem;
  text-align: center;
}

@media (hover: hover) and (pointer: fine) {
  .rundknopf:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(1.06);
  }
}

@media (max-width: 980px) {
  .stimmen {
    grid-template-columns: minmax(0, 1fr);
  }
  .stapel__k {
    width: 82%;
  }
  .stapel__k[data-pos="1"] {
    transform: translate3d(11%, 0, 0) scale(0.95);
  }
  .stapel__k[data-pos="2"] {
    transform: translate3d(21%, 0, 0) scale(0.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stapel__k {
    transition: none;
  }
}

/* ============================================================
   HERO: Knöpfe, Unterstrich
   ============================================================ */
/* Roter Strich unter „Meisterwerkstatt" — nachgebaut aus der Speed-Linie
   des Logos (Vorlage: Desktop/rge.png, Kontur pixelweise ausgelesen).
   Links laeuft sie spitz an, nach rechts wird sie duenner und zerfaellt
   in drei kurze Segmente.

   Gefuellte Pfade statt stroke: nur so laesst sich die Verjuengung
   abbilden. viewBox 1300 x 92 entspricht dem Original, das
   Seitenverhaeltnis des Wortes bleibt bei jeder Schriftgroesse gleich —
   deshalb ist preserveAspectRatio="none" hier unkritisch. */
.markiert {
  position: relative;
  display: inline-block;
}

.markiert__strich {
  position: absolute;
  left: -0.01em;
  /* viewBox 1300 x 24. Die Hoehe ist bewusst nicht proportional: der
     Schweif haette sonst die Zeile darunter geschnitten. Die Form ist
     dafuer von vornherein flacher gezeichnet. */
  bottom: 0.02em;
  width: calc(100% + 0.02em);
  height: 0.26em;
  overflow: visible;
  fill: var(--ember-hot);
  transform: scaleX(0);
  transform-origin: left center;
  animation: strich-ziehen 900ms cubic-bezier(0.16, 1, 0.3, 1) 520ms forwards;
}

@keyframes strich-ziehen {
  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .markiert__strich {
    animation: none;
    transform: scaleX(1);
  }
}

.unterstrich {
  position: relative;
  color: var(--fog);
  font-weight: 600;
}

.unterstrich::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ember);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ------------------------------------------------------------------
   Knopf-Feinheiten

   Drei Sachen passieren beim Ueberfahren:
   1. Ein Lichtstreif wandert einmal schraeg ueber den roten Knopf.
   2. Der Pfeil im Kreis laeuft in seine Richtung raus und kommt von
      der Gegenseite zurueck.
   3. Der helle Knopf fuellt sich von unten.
   Alles ueber transform und opacity, damit nichts neu gelayoutet wird.
   ------------------------------------------------------------------ */

/* Der Streif braucht eine Kante zum Anschneiden */
.btn {
  overflow: hidden;
  isolation: isolate;
}

.btn::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -35%;
  width: 28%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translate3d(0, 0, 0) skewX(-18deg);
  opacity: 0;
}

/* Der helle Knopf hat keinen Streif, sondern fuellt sich */
.btn--ghost::before,
.btn--rand::before {
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  transform: scaleY(0);
  transform-origin: bottom center;
  opacity: 1;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Pfeil sitzt in einem eigenen Kreis, nicht nackt neben dem Wort */
.btn__kreis {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 30px;
  height: 30px;
  margin-left: 4px;
  margin-right: -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: transform 420ms var(--ease-feder), background-color 320ms ease;
}

.btn__kreis svg {
  width: 15px;
  height: 15px;
}

@keyframes pfeil-quer {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  42% { transform: translate3d(150%, 0, 0); opacity: 0; }
  58% { transform: translate3d(-150%, 0, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes pfeil-hoch {
  0% { transform: translate3d(0, 0, 0); opacity: 1; }
  42% { transform: translate3d(0, 150%, 0); opacity: 0; }
  58% { transform: translate3d(0, -150%, 0); opacity: 0; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes streif-durch {
  0% { transform: translate3d(0, 0, 0) skewX(-18deg); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(460%, 0, 0) skewX(-18deg); opacity: 0; }
}

/* Kein backdrop-filter: der Knopf scrollt mit. */
.btn--rand {
  background: rgba(9, 9, 11, 0.72);
  color: var(--fog);
  box-shadow:
    inset 0 0 0 1px var(--line-strong),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.btn--rand .btn__kreis {
  background: rgba(255, 255, 255, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before {
    animation: streif-durch 900ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .btn--ghost:hover::before,
  .btn--rand:hover::before {
    animation: none;
    transform: scaleY(1);
  }

  .btn:hover .btn__kreis {
    transform: translate3d(3px, -1px, 0) scale(1.06);
    background: rgba(255, 255, 255, 0.26);
  }

  .btn:hover .btn__kreis svg {
    animation: pfeil-quer 620ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Der zweite Knopf zeigt nach unten, also laeuft der Pfeil senkrecht */
  .btn--rand:hover .btn__kreis {
    transform: translate3d(0, 3px, 0) scale(1.06);
    background: rgba(255, 255, 255, 0.2);
  }

  .btn--rand:hover .btn__kreis svg {
    animation: pfeil-hoch 620ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .btn--rand:hover {
    background: rgba(9, 9, 11, 0.72);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* Das Druckgefuehl (.btn:active) steht weiter oben und ist dort schon in
   der reduced-motion-Regel abgedeckt. Hier keine zweite Fassung anlegen,
   sie wuerde die Abschaltung ueberschreiben. */

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .btn__kreis svg {
    animation: none !important;
  }
}

/* Bewertung: eine Zeile, kein Kasten. Die Karte mit Rahmen und Schatten
   war dem Kunden zu laut — das Google-G genuegt als Quellenzeichen. */
.hero__bewertung {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 4px 2px;
  transition: opacity 320ms var(--ease-out);
}

/* Das G braucht hellen Grund, sonst verlieren die vier Farben ihre
   Wirkung. Klein gehalten, es soll nur die Quelle benennen. */
.hero__glogo {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
}

.hero__glogo svg {
  width: 15px;
  height: 15px;
  display: block;
}

.hero__wertung {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 9px;
}

.hero__sterne {
  display: inline-flex;
  gap: 1px;
  font-size: 0.8125rem;
  line-height: 1;
  color: #fbbc04;
}

/* Die Sterne kommen beim Laden nacheinander */
.hero__stern {
  opacity: 0;
  transform: scale(0.4);
  animation: stern-auf 480ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--takt, 0ms) forwards;
}

@keyframes stern-auf {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero__note {
  font-size: 0.875rem;
  color: var(--smoke);
  white-space: nowrap;
}

.hero__note strong {
  color: var(--fog);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* Trennpunkt statt zweiter Zeile */
.hero__quelle::before {
  content: "·";
  margin-right: 9px;
  color: var(--smoke-dim);
}

.hero__quelle {
  color: var(--smoke);
}

@media (hover: hover) and (pointer: fine) {
  .hero__bewertung:hover {
    opacity: 0.78;
  }
}

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


@media (max-width: 620px) {
  .hero__cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ============================================================
   MARKENBAND
   Zehn Wortmarken, kein Raster. Zehn Namen ergeben auf dem Handy
   drei Spalten, vier Zeilen und eine einsame letzte Zeile — ein
   laufendes Band hat auf jeder Breite dieselbe Gestalt.
   Nur Wortmarken, nie Herstellerlogos (§ 23 Nr. 3 MarkenG,
   BGH I ZR 33/10).
   ============================================================ */
/* Das Band ragt in den Hero hinein, statt darunter zu warten. Zusammen
   mit dem weich auslaufenden Bild verzahnen sich die beiden Abschnitte,
   statt aufeinander zu stapeln. */
.brands {
  position: relative;
  z-index: 6;
  margin-top: clamp(-3.5rem, -3vw, -1rem);
  /* oben wie unten derselbe Wert: Beschriftung und Band sollen mittig im
     Abschnitt sitzen, nicht oben kleben */
  padding-block: clamp(2.25rem, 3.6vw, 3.25rem);
  overflow: hidden;
}

/* Beschriftung sitzt dicht ueber dem Band. Sie stand schon einmal
   links daneben — das wirkte wie ein abgetrennter Kasten. */
.brands__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
}

.brands__label::before,
.brands__label::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ember);
}

/* Doppelrand: aeussere Schale mit Haarlinie, innerer Kern mit eigenem
   Lichtsaum. Radien konzentrisch, aber im Rahmen der Hausregel
   „kaum Radien" — 12 aussen, 8 innen. */
.marken {
  position: relative;
  /* gleicher Seitenabstand wie der Rest der Seite, sonst klebt die
     Haarlinie der Schale auf dem Handy am Displayrand */
  width: min(var(--shell), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding: 5px;
  border-radius: var(--r-m);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Roter Schein hinter dem Band. Nur ein Verlauf, kein filter — der
   wuerde bei jedem Scrollbild neu gerechnet werden. */
.marken::before {
  content: "";
  position: absolute;
  inset: -60% -5%;
  pointer-events: none;
  background: radial-gradient(58% 46% at 50% 50%, rgba(224, 36, 36, 0.1), transparent 70%);
}

.marken__kern {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  border-radius: var(--r-s);
  background: linear-gradient(180deg, #121216, #0d0d10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  /* Weiche Kanten statt hartem Schnitt: die Namen tauchen auf und
     verschwinden, statt an einer Linie abgeschnitten zu werden. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marken__spur {
  display: flex;
  width: max-content;
  list-style: none;
  /* Kein gap: die Abstaende sitzen im Innenabstand der Eintraege. Mit
     gap waere die Spurbreite nicht exakt das Doppelte und das Band
     wuerde bei jedem Umlauf springen. */
  animation: marken-lauf 48s linear infinite;
}

/* Angehalten per Schalter (WCAG 2.2.2). animation-play-state statt
   animation: none, damit das Band an Ort und Stelle stehen bleibt
   statt an den Anfang zu springen. */
[data-bewegung="aus"] .marken__spur {
  animation-play-state: paused;
}

/* Bedienmoeglichkeit fuer die Dauerbewegung (WCAG 2.2.2). Steht als
   eigenes Element unter dem Band: darauf wuerde er die Markennamen und
   die weiche Kante verdecken, darunter absolut positioniert wuerde ihn
   das overflow:hidden von .brands abschneiden. */
.brands__steuerung {
  width: min(var(--shell), calc(100% - var(--gutter) * 2));
  margin: 0.6rem auto 0;
  display: flex;
  justify-content: flex-end;
}

.marken__halt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 28px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--smoke-dim);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
}

.marken__halt:hover {
  color: var(--fog);
  border-color: var(--line-strong);
}

/* Zwei Balken = anhalten, Dreieck = fortsetzen. Reine Form, der Name
   steht als Text daneben. */
.marken__halt-symbol {
  width: 8px;
  height: 9px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

[data-bewegung="aus"] .marken__halt-symbol {
  width: 0;
  height: 0;
  border-left: 8px solid currentColor;
  border-right: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}


@keyframes marken-lauf {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Ausserhalb des Sichtfelds laeuft nichts. Gesetzt in main.js, 5e. */
.marken[data-sichtbar="false"] .marken__spur {
  animation-play-state: paused;
}

.marke {
  display: flex;
  align-items: center;
  padding-inline: clamp(1.5rem, 3vw, 2.75rem);
}

/* Trenner im Motiv der Seite: das doppelte Schraegzeichen steht auch
   im Vorspann und in der Datenleiste. */
.marke::after {
  content: "//";
  /* Zweite Deklaration mit leerem Vorlese-Text: Vorleseprogramme sollen
     nicht nach jedem Namen „Schraegstrich Schraegstrich" sagen. Browser,
     die die Schreibweise nicht kennen, behalten die Zeile darueber. */
  content: "//" / "";
  margin-left: clamp(1.5rem, 3vw, 2.75rem);
  margin-right: calc(clamp(1.5rem, 3vw, 2.75rem) * -1);
  font-size: 0.8em;
  color: var(--ember);
  opacity: 0.45;
}

.marke__name {
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--smoke);
  transition: color 420ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  /* Beim Ueberfahren haelt das Band an, damit man einen Namen lesen
     kann, ohne ihm hinterherzuschauen. */
  .marken:hover .marken__spur {
    animation-play-state: paused;
  }
  .marke:hover .marke__name {
    color: var(--fog);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung wird aus dem Band eine ruhige, zentrierte Zeile.
     Die Kopie der Liste faellt weg, sie stuende sonst doppelt da. */
  .marken__kern {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: 1.25rem;
  }
  .marken__spur {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.6rem;
  }
  .marke[aria-hidden="true"] {
    display: none;
  }
  .marke:nth-of-type(10)::after {
    content: none;
  }
}

/* Auf dem iPhone zoomt Safari in jedes Feld unter 16px hinein, sobald man
   es antippt — die Seite springt. Steht bewusst am Dateiende: weiter oben
   gewinnt .control{font-size:0.9rem} bei gleicher Spezifitaet. */
@media (max-width: 768px) {
  .control,
  textarea.control {
    font-size: 1rem;
  }
}

/* ---------- 28. Bewegung beim Scrollen ----------
   Native scroll-driven animations statt Bibliothek oder Scroll-Listener.
   Laeuft auf dem Compositor, kostet kein Skript. Wo der Browser sie nicht
   kennt, bleibt alles wie vorher — nichts haengt davon ab. */

@keyframes bild-drift {
  to {
    transform: translate3d(0, 5%, 0) scale(1.05);
  }
}

@keyframes lese-fortschritt {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.fortschritt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--ember);
  pointer-events: none;
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Das Werkstattbild zieht langsamer weg als der Text davor. Nur 5%
       Versatz — mehr wirkt wie ein Effekt statt wie Tiefe. */
    .hero__media img {
      animation: bild-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    /* Dasselbe fuer das Auto hinter den Fragen. */
    #faq::before {
      animation: bild-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    /* Lesefortschritt an der Unterkante der Kopfleiste. */
    .fortschritt {
      opacity: 1;
      animation: lese-fortschritt linear both;
      animation-timeline: scroll(root);
    }
  }
}