/* gutachtenoberhausen.de — Ergaenzungen zum Design-System aus css/home.css
   home.css liefert Tokens, Typo, Header, Hero, Timeline, Profil, Karten,
   Auszahlung, Reviews, FAQ, CTA und Footer. Hier stehen nur die Bausteine,
   die diese Seite zusaetzlich braucht: Beschreibungstext auf den
   Fahrzeugkarten, Oeffnungszeiten und Teilen-Leiste im Footer, die
   Partnerzeile sowie die Stadtseiten Duisburg und Essen. */

/* —— Google-Bewertungen: Gesamtnote und Rezensionen in einem Kasten ——
   Ein Block statt Score-Karte plus separatem Karussell. Die Rezensionen sind
   fest im HTML, es wird nichts nachgeladen.

   Die sichtbaren Werte muessen mit dem aggregateRating im JSON-LD der Seite
   uebereinstimmen (dort: ratingValue 5, ratingCount 30) — sonst beanstandet
   Google die strukturierten Daten. Beim Aendern also beides anfassen. */
.gscore {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* —— Kopf: Foto und Gesamtnote ——
   Dunkler Blau-Verlauf wie Hero, Menü und Profilkarte. Der Verlauf liegt auf
   dem Kopf, nicht auf der Textspalte: dadurch kann das Foto schraeg angeschnitten
   werden und das Navy scheint durch die Diagonale — derselbe Winkel wie in
   der Fahrzeug-Collage. */
.gscore__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--brand-dark-grad);
  color: #fff;
}

@media (min-width: 760px) {
  .gscore__head {
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr);
    align-items: stretch;
  }
  /* Schraege Kante zum Navy hin */
  .gscore__visual {
    clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0 100%);
  }
}

/* Die Textspalte braucht nur rund 220 px. Diese Mindesthoehe gibt dem Foto
   mehr Flaeche und zieht den Navy-Bereich daneben mit hoch. */
.gscore__visual {
  position: relative;
  min-height: 18rem;
}
/* Absolut gesetzt, damit das Hochformat nicht seine Eigenhoehe in die
   Grid-Zeile einbringt — sonst wird der Kopf rund 480 px hoch, obwohl der
   Text daneben nur die Haelfte braucht. So gibt die Textspalte die Hoehe vor
   und das Foto fuellt, was uebrig bleibt. */
.gscore__visual picture {
  position: absolute;
  inset: 0;
  display: block;
}
.gscore__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Aus dem Hochformat bleibt im flachen Kopf nur ein Band von rund 46 % der
     Bildhoehe sichtbar. Bei 35 % lag es unterhalb seines Gesichts, deshalb
     weiter nach oben. */
  object-position: center 12%;
}

/* Einspaltig wuerde das Hochformat rund 455 px hoch, die Note faellt damit
   unter die Falz. Deshalb hier ein flacher Anschnitt. */
@media (max-width: 759.98px) {
  .gscore__visual {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}

.gscore__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.4rem;
  /* Links mehr Luft: dort laeuft die schraege Kante des Fotos ein. */
  padding: clamp(1.2rem, 2.2vw, 1.75rem) clamp(1.3rem, 2.4vw, 2rem)
           clamp(1.2rem, 2.2vw, 1.75rem) clamp(1.4rem, 3.4vw, 2.9rem);
}

.gscore__label {
  font-size: 0.76rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-ice);
}

.gscore__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.gscore__value {
  font-size: clamp(2.4rem, 4.4vw, 3.3rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #fff;
}
.gscore__stars {
  font-size: clamp(1rem, 1.9vw, 1.35rem);
  letter-spacing: 0.12em;
  color: var(--star);
}

.gscore__count {
  margin: 0;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.78);
}
.gscore__count strong {
  color: #fff;
}

/* Auf dem Navy traegt Weiss besser als das Akzentblau */
.gscore__cta {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.58rem 1.1rem;
  border-radius: var(--btn-radius);
  background: #fff;
  color: var(--brand);
  font-weight: var(--fw-bold);
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.7);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.gscore__cta::after {
  content: "→";
}
.gscore__cta:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
}

/* —— Rezensionen als ruhiges Raster im selben Kasten ——
   Die 1px-Luecke auf farbigem Grund erzeugt die Trennlinien zwischen den
   Kacheln, ohne dass jede Kachel einen eigenen Rahmen braucht. */
.gscore__reviews {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Ohne 1fr bekommt jede Zeile ihre eigene Hoehe, und die Kacheln waeren je
     nach Textlaenge unterschiedlich hoch. So sind alle gleich. */
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.grev {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  padding: 1.2rem 1.15rem 1.35rem;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}
.grev:hover {
  background: var(--bg-soft);
}

.grev__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.grev__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: var(--fw-bold);
  font-size: 0.9rem;
}
/* Wechsel Blau/Navy wie die Leisten der Fahrzeug-Collage — gibt der Reihe
   einen Rhythmus, ohne dass die Kacheln unruhig werden. */
.grev:nth-child(even) .grev__avatar {
  background: rgba(14, 58, 92, 0.09);
  color: var(--brand);
}
.grev__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.grev__author {
  font-size: 0.92rem;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--ink);
  /* lange Namen sollen die Kachel nicht sprengen */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grev__when {
  font-size: 0.76rem;
  color: var(--muted);
}

.grev__stars {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: var(--star);
}

/* Ohne Begrenzung bestimmt die laengste Rezension die Hoehe aller Kacheln. */
.grev__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gscore__foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.95rem 1.2rem;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

@media (max-width: 1060px) {
  .gscore__reviews {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .gscore__reviews {
    grid-template-columns: minmax(0, 1fr);
  }
  .gscore__foot {
    justify-content: center;
  }
}

/* —— Hero mobil: Foto als Banner statt gefloatet ——
   In home.css floatet das Hero-Foto mobil nach rechts, der Titel fliesst
   links daneben in rund 110 px Restbreite. Das geht dort auf, weil die
   Bottroper Headline nur aus kurzen Woertern besteht. Hier heisst sie
   "Schadengutachten" (ein unteilbares Wort von rund 210 px) und wuerde unter
   das Foto rutschen — es entstuende ein grosses Loch. Deshalb steht das Foto
   mobil ueber dem Text und die Headline bekommt die volle Breite. */
@media (max-width: 1099.98px) {
  .hero__media {
    float: none;
    width: 100%;
    margin: 0 0 1.25rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .hero__media img {
    width: 100%;
    height: clamp(11rem, 38vh, 19rem);
    object-fit: cover;
    object-position: 72% 38%;
    filter: none;
  }
  /* Das Siegel sitzt jetzt auf einem echten Bildbereich und darf sichtbar sein */
  .hero__media-badge {
    display: inline-flex;
  }
}

/* —— Hero: dritter Button ——
   In home.css ist .btn--chat fest ausgeblendet, weil dort ein Chat-Widget
   daran haengt. Hier steht an derselben Stelle der Link aufs Google-Profil,
   deshalb wird die Regel fuer diese Variante wieder aufgehoben. */
.hero .hero__cta .btn--google,
.hero__cta .btn--google {
  display: inline-flex;
}

/* —— Portrait-Kachel auf dem Hero-Foto ——
   Gleiche Parallelogramm-Form wie die Fahrzeug-Collage. Die Kachel haengt an
   der linken Kante der Profilkarte und ragt von dort auf das Fahrzeugfoto.
   Nur ab 1000px, weil die Karte selbst darunter ausgeblendet ist. */
.hero__portrait {
  display: none;
}

/* Erst ab 1300px: darunter schrumpft die Gasse zwischen Vertrauensleiste und
   Karte schneller als die Kachel, weil die Textspalte langsamer schmaler wird
   als die Karte nach links wandert. Gemessen: 1100px -> 74 px Gasse,
   1250px -> 129 px, 1300px -> rund 172 px. Erst ab da bleibt beidseitig Luft.
   Unterhalb der Schwelle behaelt die Karte ihr rundes Foto. */
@media (min-width: 1300px) {
  .hero__portrait {
    --hp-skew: -12deg;
    --hp-unskew: 12deg;
    position: absolute;
    /* An der Oberkante der Karte statt mittig: weiter unten wuerde die Kachel
       auf den Stadtseiten das Kennzeichen im Fahrzeugfoto verdecken, das dort
       das eigentliche Ortssignal ist. */
    top: 0.6rem;
    right: 100%;
    /* Die Kachel muss in die Gasse zwischen Vertrauensleiste und Karte passen.
       Die ist rund 141 px breit, davon gehen durch die Schraege oben und unten
       je etwa 18 px Ueberhang ab. Mehr als gut 100 px Breite bleiben nicht,
       ohne dass sie den Kartentitel ueberdeckt. */
    margin-right: 0.5rem;
    display: block;
    width: clamp(5.5rem, 8vw, 7.5rem);
    aspect-ratio: 5 / 6.6;
    overflow: hidden;
    border-radius: 12px;
    transform: skewX(var(--hp-skew));
    box-shadow: 0 14px 34px -14px rgba(6, 20, 44, 0.7);
  }
  /* Gegengeneigt und seitlich verbreitert, sonst bleiben an den schraegen
     Kanten leere Dreiecke stehen. */
  .hero__portrait-media {
    position: absolute;
    inset: 0 -22%;
    transform: skewX(var(--hp-unskew));
  }
  .hero__portrait-media picture,
  .hero__portrait-media img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .hero__portrait-media img {
    object-fit: cover;
  }

  /* Das runde Foto in der Karte waere daneben ein zweites Portrait derselben
     Person im Abstand von zwei Zentimetern. Die Kachel uebernimmt das. */
  .hero__card > picture {
    display: none;
  }
}

/* —— Fahrzeug-Collage ——
   Vier schraeg angeschnittene Kacheln, die ohne Luecke aneinanderstossen. Die
   Schraege sitzt auf der Kachel; Bild und Beschriftung werden im Inneren mit
   dem gleichen Winkel gegengeneigt, damit Motiv und Text gerade stehen.
   --fleet-skew haelt beide Winkel zusammen, sonst laufen sie beim Anpassen
   der Breakpoints auseinander. */
.fleet-collage {
  --fleet-skew: -12deg;
  --fleet-unskew: 12deg;
  display: grid;
  /* Jede zweite Spalte etwas schmaler, damit Zweirad und Fahrrad nicht nur
     flacher, sondern auch schlanker stehen. */
  grid-template-columns:
    minmax(0, 1.05fr) minmax(0, 0.95fr)
    minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(1.1rem, 2.4vw, 2.1rem);
  /* Die Schraege ragt oben rechts und unten links ueber die Spalten hinaus.
     Der Ueberhang ist halbe Kachelhoehe mal Tangens des Winkels, bei 12 Grad
     und rund 400 px Hoehe also gut 42 px. Der Einzug haelt ihn in der
     Inhaltsbreite. */
  margin-inline: clamp(0rem, 3.4vw, 3.4rem);
}

/* Spalte statt Block: die flacheren Kacheln sollen unten auf einer Linie
   stehen und oben kuerzer sein, nicht umgekehrt. */
.fleet-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.fleet-tile {
  position: relative;
  aspect-ratio: var(--fleet-ratio, 5 / 7);
  overflow: hidden;
  border-radius: 12px;
  transform: skewX(var(--fleet-skew));
  box-shadow: 0 10px 30px -14px rgba(16, 33, 54, 0.45);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Wie in der Vorlage: jede zweite Kachel sitzt etwas flacher, dadurch bekommt
   die Reihe oben eine Zickzack-Kante statt einer glatten Linie.
   Der Wert haengt an der schmaleren Spalte: weil die Hoehe ueber das
   Seitenverhaeltnis aus der Breite faellt, macht ein kleinerer Nenner die
   Kachel doppelt flach, und der Zusammenhang ist nichtlinear, weil die Kachel
   als Flex-Element zusaetzlich auf die Zeilenhoehe schrumpft. Der Wert ist
   deshalb eingemessen, nicht gerechnet: 5/7.54 ergibt rund 3 % Hoehen-
   unterschied bei 9 % Breitenunterschied. Wer die Spaltenbreiten oben
   aendert, muss ihn neu einmessen. */
.fleet-item:nth-child(even) {
  --fleet-ratio: 5 / 7.54;
}

/* Die Kachel darf beim Hover nicht ihre Schraege verlieren, sonst springt sie
   aus der Reihe. Deshalb Skew mitschreiben statt nur translate. */
.fleet-item:hover .fleet-tile {
  transform: skewX(var(--fleet-skew)) translateY(-4px);
  box-shadow: 0 18px 40px -16px rgba(16, 33, 54, 0.55);
}

/* Gegengeneigter Rahmen, seitlich verbreitert: sonst blieben durch die
   Schraege links und rechts leere Dreiecke stehen. Noetig ist halbe
   Kachelhoehe mal Tangens des Winkels; bei 12 Grad sind das rund 14 % der
   Spaltenbreite, 22 % lassen Reserve fuer schmalere Spalten. */
.fleet-tile__media {
  position: absolute;
  inset: 0 -22%;
  transform: skewX(var(--fleet-unskew));
}
.fleet-tile__media picture,
.fleet-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.fleet-tile__media img {
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.fleet-item:hover .fleet-tile__media img {
  transform: scale(1.05);
}

/* Abdunkeln nach unten, damit die Leiste nicht auf hellem Motiv schwimmt */
.fleet-tile::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 55%;
  background: linear-gradient(180deg, rgba(0, 24, 72, 0) 0%, rgba(0, 24, 72, 0.5) 100%);
  pointer-events: none;
}

.fleet-tile__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.85rem 0.7rem;
  background: var(--brand-dark-grad);
  color: #fff;
}
.fleet-item:nth-child(even) .fleet-tile__bar {
  background: var(--brand-dark-grad);
}

/* Gegen-Schraegung stellt die Schrift gerade. text-align zentriert innerhalb
   des Parallelogramms, die optische Mitte wandert dadurch minimal mit der
   Neigung – das ist gewollt, sonst haengt der Text an der schraegen Kante. */
.fleet-tile__bar-inner {
  display: block;
  text-align: center;
  font-size: 0.86rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.25;
  transform: skewX(var(--fleet-unskew));
}

@media (max-width: 999.98px) {
  .fleet-collage {
    --fleet-skew: -9deg;
    --fleet-unskew: 9deg;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    row-gap: 1.6rem;
    /* Zwei Spalten heisst hohe Kacheln, dadurch waechst der schraege Ueberhang
       auf rund 40 px. Mit dem Desktop-Einzug bliebe nur ein Rest von 4 px zum
       Fensterrand, deshalb hier mehr. */
    margin-inline: clamp(0rem, 5.4vw, 3.4rem);
  }
}

/* Schmale Geraete: die Schraege kostet hier nur Bildflaeche und laesst die
   kurze Leiste umbrechen. Kachel steht gerade und flacher. */
@media (max-width: 559.98px) {
  .fleet-collage {
    --fleet-skew: 0deg;
    --fleet-unskew: 0deg;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.4rem;
    margin-inline: 0;
  }
  .fleet-tile {
    aspect-ratio: 16 / 10;
  }
  .fleet-tile__media {
    inset: 0;
  }
}

/* —— Footer: Oeffnungszeiten als zweispaltige Zeilen —— */
.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--line);
}
.footer-hours li:last-child {
  border-bottom: none;
}
.footer-hours span:last-child {
  color: var(--ink);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* —— Footer: Kontaktzeilen mit Symbol —— */
.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.footer-contact svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--accent);
}

.site-footer address {
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

/* —— Footer: Teilen-Leiste —— */
.footer-share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.site-footer .footer-share-list li {
  margin-bottom: 0;
}
.footer-share-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: 0.84rem;
  transition: border-color 0.2s, color 0.2s;
}
.footer-share-list a:hover {
  border-color: var(--accent);
  text-decoration: none;
}
.footer-share-list svg {
  width: 14px;
  height: 14px;
}

/* —— Footer: Partnerseiten —— */
.footer-partner {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  font-size: 0.87rem;
}
.footer-partner__label {
  color: var(--muted);
  font-weight: var(--fw-semibold);
}
.site-footer .footer-partner ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}
.site-footer .footer-partner li {
  margin-bottom: 0;
}
.footer-partner a {
  color: var(--muted);
}

/* —— Stadtseiten: Brotkrumen —— */
.crumbs {
  padding: 0.9rem 0 0;
  font-size: 0.86rem;
  color: var(--muted);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs li + li::before {
  content: "›";
  margin-right: 0.4rem;
  color: var(--line-strong);
}
.crumbs a {
  color: var(--muted);
  text-decoration: none;
}
.crumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* —— Stadtseiten: Stadtteil-Chips —— */
.district-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
.district-list li {
  padding: 0.4rem 0.9rem;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: 0.89rem;
  color: var(--ink-soft);
}

/* —— Stadtseiten: zweispaltiger Fliesstext —— */
.city-copy {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
@media (min-width: 1100px) {
  .city-copy {
    grid-template-columns: 1fr 1fr;
  }
}
.city-copy h3 {
  margin: 0 0 0.5rem;
  font-size: 1.08rem;
}
.city-copy p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}
.city-copy p:last-child {
  margin-bottom: 0;
}

/* —— Stadtseiten: Fakten-Kacheln —— */
.city-facts {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}
@media (min-width: 780px) {
  .city-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}
.city-facts > div {
  padding: 1.2rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.city-facts dt {
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.city-facts dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* —— Standortwechsel: Oberhausen · Duisburg · Essen —— */
.city-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-switch a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.93rem;
  font-weight: var(--fw-semibold);
  transition: border-color 0.2s, color 0.2s, transform 0.15s var(--ease);
}
.city-switch a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.city-switch a[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.city-switch svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

/* ==========================================================================
   Nur Startseite: Bausteine, die die Stadtseiten absichtlich NICHT benutzen.
   Beide Seitentypen teilen dasselbe Design-System, sollen aber nicht wie
   dieselbe Vorlage mit getauschtem Städtenamen wirken. Die Stadtseiten
   behalten Zeitleiste, dunkle Kartenreihe und einspaltige FAQ.
   ========================================================================== */

/* —— Vier Schritte als Symbolkarten (Stadtseiten: .timeline) —— */
.steps-grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: stepcard;
}
@media (min-width: 620px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1080px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.6rem 1.4rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}
.step-card:hover {
  border-color: var(--accent-ice);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Grosse, blasse Ziffer als Hintergrundmarke oben rechts */
.step-card::after {
  counter-increment: stepcard;
  content: counter(stepcard);
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  font-size: 3.4rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--accent);
  opacity: 0.1;
  pointer-events: none;
}
.step-card__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.step-card__icon svg {
  width: 24px;
  height: 24px;
}
.step-card h3 {
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
}
.step-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.step-card .btn {
  margin-top: auto;
  align-self: flex-start;
}
.step-card p + .btn {
  margin-top: 1.1rem;
}

/* —— Schadengutachten als helles Bild-Split (Stadtseiten: .grid-3/.card-dark) —— */
.explain {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}
@media (min-width: 980px) {
  .explain {
    grid-template-columns: 0.85fr 1.15fr;
  }
}
.explain__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.explain__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.explain__stamp {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  margin: 0;
  padding: 0.75rem 0.95rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.explain__stamp strong {
  display: block;
  color: var(--ink);
}

.explain__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.explain__list > li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1.1rem;
  align-items: start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.explain__list > li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.explain__list-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent-ice);
  background: var(--surface);
  color: var(--accent);
}
.explain__list-icon svg {
  width: 21px;
  height: 21px;
}
.explain__list h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}
.explain__list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}
.explain__list a {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: var(--fw-semibold);
  color: var(--accent);
  text-decoration: none;
}
.explain__list a:hover {
  text-decoration: underline;
}

/* —— FAQ zweispaltig (Stadtseiten: einspaltig) —— */
@media (min-width: 980px) {
  .faq--cols .section-head,
  .faq--cols details,
  .faq--cols .faq-more {
    max-width: none;
  }
  .faq--cols__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
    align-items: start;
  }
}

/* —— Kleinigkeiten —— */
.band--tint {
  background: var(--bg-tint);
  border-block: 1px solid var(--line);
}
.section-head--center {
  text-align: center;
}
.section-head--center p {
  margin-inline: auto;
  max-width: 68ch;
}
.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.section-actions--center {
  justify-content: center;
}

/* ==========================================================================
   Kantigere Formen statt Pillen
   Abgerundete Vollformen wirken schablonenhaft. Buttons, Chips und Marker
   bekommen deshalb einen kleinen, gleichmäßigen Radius. Runde Icon-Flächen
   und Fortschrittsbalken bleiben unberührt.
   ========================================================================== */
.site-nav a,
.site-drawer nav a,
.strip li,
.kicker,
.fleet-card__cap span,
.reviews-badge,
.footer-rating,
.footer-share-list a,
.district-list li,
.city-switch a {
  border-radius: 3px;
}
.btn,
.hero .hero__cta .btn {
  border-radius: 4px;
}
.hero__payout-row {
  border-radius: 4px;
}

/* ==========================================================================
   Hero-Textspalte: Kurzzeile mit Haken, darunter die Faktenkarte
   Loest die frueheren zwei Leisten ab. Eigene Klassennamen, damit keine Regel
   aus home.css mehr hineinwirkt: die alten .hero__trust und .hero__features
   kommen im Markup nicht mehr vor.
   ========================================================================== */

/* —— Faktenkarte: sechs Felder, Haarlinien als Raster —— */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: 62rem;
  margin: 0 0 1.9rem;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(16, 33, 54, 0.04),
    0 20px 44px -32px rgba(16, 50, 110, 0.4);
}
.hero__fact {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  margin: 0;
  padding: 1.4rem 1.35rem;
  background: none;
  border: 0;
}
.hero__fact::before {
  content: none;
}
.hero__fact:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--line);
}
.hero__fact:nth-child(n + 4) {
  border-top: 1px solid var(--line);
}
/* Nur das Symbol, ohne Flaeche dahinter. Die Kontakt-Buttons darunter haben
   ihre Symbole in farbigen Feldern, so sind beide Ebenen unterscheidbar. */
.hero__fact-ic {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 0.1rem;
  color: var(--accent);
}
.hero__fact-ic svg {
  width: 24px;
  height: 24px;
}
.hero__fact-tx {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}
.hero__fact-title {
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--brand);
  text-wrap: pretty;
}
.hero__fact-desc {
  font-size: 0.79rem;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

/* Desktop: Kurzzeile, Karte, Buttons. Die Wrapper der Vorlage sind dort
   display:contents, deshalb greift order direkt auf diese drei Elemente. */
@media (min-width: 1100px) {
  /* Beide Reihen gleich hoch: die hoehere Reihe gibt das Mass vor. */
  .hero__facts {
    order: 2;
    grid-auto-rows: 1fr;
  }
  .hero__cta {
    order: 3;
    margin-top: 0;
  }
}

/* Mittlere Breiten: die Textspalte traegt keine drei Spalten mit Beschreibung */
@media (min-width: 1100px) and (max-width: 1499.98px) {
  .hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
  }
  .hero__fact:not(:nth-child(3n + 1)) {
    border-left: 0;
  }
  .hero__fact:nth-child(2n) {
    border-left: 1px solid var(--line);
  }
  .hero__fact:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

/* Mobil: kleine Einzelkarten in zwei Spalten, Symbol im blauen Kreis.
   Auszahlung und das letzte Feld laufen ueber die volle Breite. */
@media (max-width: 1099.98px) {
  .hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    max-width: none;
    margin: 0 0 0.9rem;
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }
  .hero__facts > .hero__fact:nth-child(n) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.05rem 0.75rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 33, 54, 0.05);
  }
  .hero__fact-ic {
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
  }
  .hero__fact-ic svg {
    width: 20px;
    height: 20px;
  }
  .hero__fact-tx {
    align-items: center;
    gap: 0.22rem;
  }
  .hero__fact-title {
    font-size: 0.85rem;
    line-height: 1.25;
  }
  .hero__fact-desc {
    font-size: 0.73rem;
    line-height: 1.4;
  }
  .hero__facts > .hero__fact:last-child {
    grid-column: 1 / -1;
  }
  .hero__facts > .hero__fact--payout:nth-child(n) {
    grid-column: 1 / -1;
    display: block;
    padding: 0;
  }
  /* Im blauen Kreis muss das Kartensymbol weiss sein */
  .hero__facts .hero__fact--payout .hero__fact-ic {
    background: var(--accent);
    color: #fff;
  }
  .hero__fact--payout .hero__fact-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: auto;
    padding: 1.05rem 0.9rem;
    text-align: center;
  }
  .hero__fact-go {
    align-self: center;
    margin-top: 0.15rem;
  }
}

/* —— Auszahlungsfeld ——
   Dritte Zelle der Karte. Gleiche Gestaltung wie die uebrigen Felder, nur ist
   das ganze Feld anklickbar und traegt eine Zeile zur Beispielrechnung. */
.hero__fact--payout {
  display: block;
  padding: 0;
}
.hero__fact-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  height: 100%;
  padding: 1.4rem 1.35rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.16s ease;
}
.hero__fact-link:hover,
.hero__fact-link:focus-visible {
  background: #fbfcfe;
}
/* Kleiner, ruhiger Schalter statt einer unterstrichenen Textzeile. Das ganze
   Feld ist verlinkt, der Schalter zeigt nur, wohin es geht. */
.hero__fact-go {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.36rem;
  margin-top: 0.75rem;
  padding: 0.38rem 0.7rem;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--ink-soft);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.hero__fact-link:hover .hero__fact-go,
.hero__fact-link:focus-visible .hero__fact-go {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line-strong));
}
.hero__fact-chev {
  width: 10px;
  height: 10px;
  opacity: 0.75;
}

/* —— Auszahlungsfeld hervorgehoben ——
   Heller Blauverlauf mit Akzentkante links. Ruhig genug, um neben den weissen
   Feldern nicht zu schreien, aber deutlich als eigener Punkt erkennbar. */
.hero__fact--payout {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #ffffff 0%, var(--accent-soft) 100%);
}
.hero__fact--payout .hero__fact-link {
  position: relative;
  z-index: 1;
}
.hero__fact--payout .hero__fact-ic {
  color: var(--accent);
}
.hero__fact--payout .hero__fact-title {
  font-size: 0.95rem;
  color: var(--brand);
}
.hero__fact--payout .hero__fact-desc {
  color: var(--ink-soft);
}
.hero__fact--payout .hero__fact-link:hover,
.hero__fact--payout .hero__fact-link:focus-visible {
  background: rgba(1, 72, 195, 0.05);
}
/* Strich unter "direkt aufs Konto": leicht ansteigend und ungleich dick, wie
   mit einem Fueller gezogen. Als Hintergrundbild, damit er bei einem Umbruch
   auf beiden Zeilen erscheint. */
.hero__fact--payout .hero__fact-title em {
  font-style: normal;
  padding-bottom: 0.16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7.6C22 5.4 46 4.2 70 3.6c17-.4 33-.6 48-.9' fill='none' stroke='%231f8a5b' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M6 8.6C30 6.8 60 5.6 92 5' fill='none' stroke='%231f8a5b' stroke-width='1.1' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* —— Google-Bewertung unter dem Fliesstext —— */
.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.3rem 0 2.6rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.2;
}
.hero__rating-stars {
  display: inline-flex;
  gap: 0.12rem;
  color: var(--star, #f5a623);
}
.hero__rating-stars svg {
  width: 17px;
  height: 17px;
}
.hero__rating-score {
  font-size: 0.98rem;
  font-weight: var(--fw-bold);
}
.hero__rating-text {
  font-size: 0.85rem;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.hero__rating-g {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.hero__rating-g svg {
  width: 18px;
  height: 18px;
}
.hero__rating:hover .hero__rating-text,
.hero__rating:focus-visible .hero__rating-text {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ==========================================================================
   Kontakt-Buttons im Hero
   Drei gleich breite Schaltflaechen in einer Reihe, buendig mit der Karte
   darueber. Symbol im eigenen Feld, darunter eine zweite Zeile mit dem
   Hinweis, rechts der Pfeil. Die Vorlage blendet Zusatzzeile und Pfeil global
   aus, hier werden sie fuer den Hero wieder eingeschaltet.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero .hero__cta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
    max-width: 62rem;
    margin: 0.6rem 0 3.1rem;
  }
  .hero .hero__cta .btn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: 74px;
    padding: 0.9rem 1.2rem;
    text-align: left;
    border-radius: 6px;
    transition: transform 0.15s var(--ease), background 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  /* Die Vorlage legt eine Lichtkante ueber die obere Haelfte jedes Hero-Buttons.
     Auf den gefuellten Flaechen wirkt sie wie ein Verlauf, deshalb aus. */
  .hero .hero__cta .btn::before {
    content: none;
  }
  .hero .hero__cta .btn__ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 6px;
  }
  .hero .hero__cta .btn__ic svg {
    width: 21px;
    height: 21px;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn__text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
  }
  .hero .hero__cta .btn__label {
    font-size: 1rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.014em;
    white-space: nowrap;
  }
  .hero .hero__cta .btn__sub {
    display: block;
    font-size: 0.78rem;
    font-weight: var(--fw-regular);
    line-height: 1.3;
    letter-spacing: 0;
    opacity: 0.72;
  }
  .hero .hero__cta .btn__chev {
    display: grid;
    place-items: center;
    opacity: 0.45;
  }
  .hero .hero__cta .btn__chev svg {
    width: 14px;
    height: 14px;
  }

  /* Anrufen: flaches dunkles Blau, ohne Verlauf */
  .hero .hero__cta .btn--primary {
    color: #fff;
    background: var(--brand-dark-flat);
    border-color: transparent;
    box-shadow: 0 10px 24px -14px rgba(0, 24, 72, 0.75);
  }
  .hero .hero__cta .btn--primary .btn__ic {
    background: rgba(255, 255, 255, 0.18);
  }
  .hero .hero__cta .btn--primary .btn__ic svg {
    color: #fff;
  }
  .hero .hero__cta .btn--primary:hover {
    background: #002060;
    border-color: transparent;
    box-shadow: 0 15px 30px -14px rgba(0, 24, 72, 0.85);
  }

  /* WhatsApp: Gruen. Direktchat: Navy. Alle drei gefuellt, damit sie sich
     eindeutig von den weissen Feldern der Karte darueber abheben. */
  .hero .hero__cta .btn--wa,
  .hero .hero__cta .btn--direkt {
    color: #fff;
    border-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hero .hero__cta .btn--wa .btn__ic,
  .hero .hero__cta .btn--direkt .btn__ic {
    background: rgba(255, 255, 255, 0.18);
  }
  .hero .hero__cta .btn--wa .btn__ic svg,
  .hero .hero__cta .btn--direkt .btn__ic svg {
    color: #fff;
  }
  .hero .hero__cta .btn--wa {
    background: #25a366;
    box-shadow: 0 10px 24px -14px rgba(37, 163, 102, 0.85);
  }
  .hero .hero__cta .btn--wa:hover {
    color: #fff;
    background: #1f8f58;
    border-color: transparent;
    box-shadow: 0 15px 30px -14px rgba(37, 163, 102, 0.95);
  }
  .hero .hero__cta .btn--direkt {
    background: #00143c;
    box-shadow: 0 10px 24px -14px rgba(0, 20, 60, 0.8);
  }
  .hero .hero__cta .btn--direkt:hover {
    color: #fff;
    background: var(--brand-dark-flat);
    border-color: transparent;
    box-shadow: 0 15px 30px -14px rgba(0, 20, 60, 0.9);
  }
}

/* Mittlere Breiten: die Reihe folgt der Breite der Karte darueber */
@media (min-width: 1100px) and (max-width: 1499.98px) {
  .hero .hero__cta {
    max-width: 44rem;
  }
  .hero .hero__cta .btn {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
  }
  .hero .hero__cta .btn__chev {
    display: none;
  }
  .hero .hero__cta .btn__label {
    font-size: 0.94rem;
  }
  .hero .hero__cta .btn__sub {
    font-size: 0.74rem;
  }
}

/* —— Hero bis zur Unterkante des Bildschirms ——
   Der Kopf ist auf dem Desktop 164 px hoch (36 px Infozeile plus 128 px
   Navigation). Mit dieser Mindesthoehe endet der Hero genau am unteren
   Bildschirmrand, das Foto laeuft bis dorthin durch und der helle Streifen
   des naechsten Abschnitts ist nicht mehr zu sehen. Ist der Inhalt hoeher
   als der Bildschirm, greift die Regel nicht. */
@media (min-width: 1200px) {
  .hero {
    min-height: calc(100vh - 164px);
  }
  .hero__text {
    justify-content: center;
  }
}

/* ==========================================================================
   Mobile Ansicht: Hero als dunkle Bildkarte
   Ueberschrift, Fliesstext und ein Button stehen im Foto, nicht darunter.
   Auf dem Desktop loest sich der Rahmen auf, dort bleibt alles wie bisher.
   Das Foto kommt als Hintergrund und steht pro Seite direkt am Element.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__stage {
    display: contents;
  }
  .hero__stage-cta,
  .hero__stage-hit {
    display: none;
  }
}

@media (max-width: 1099.98px) {
  /* Das <picture> der Vorlage entfaellt, das Foto liegt im Kartenhintergrund */
  .hero .hero__media {
    display: none;
  }
  .hero {
    /* Abstand zum oberen Bildschirmrand (Browser-Chrome beruecksichtigt) */
    --hero-gutter: 0.85rem;
    padding-top: var(--hero-gutter);
    padding-bottom: 0.15rem;
    background: #fff;
  }
  .hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Seitenabstand = oberer Abstand (--hero-gutter) */
    width: calc(100vw - (2 * var(--hero-gutter)));
    max-width: calc(100vw - (2 * var(--hero-gutter)));
    margin-left: calc(50% - 50vw + var(--hero-gutter));
    margin-right: auto;
    margin-bottom: 1rem;
    box-sizing: border-box;
    padding: 1.15rem 1.15rem;
    min-height: clamp(11rem, 28svh, 13rem);
    border-radius: 14px;
    overflow: hidden;
    /* Das Foto steht als background-image direkt am Element, damit die
       Adresse relativ zur Seite aufgeloest wird und nicht relativ zur CSS. */
    background-color: #020c1c;
    /* URL bleibt am Element (inline), gemalt wird nur der ::after-Layer */
    background-size: 0 0;
    background-repeat: no-repeat;
    isolation: isolate;
  }
  /* Foto unskaliert mit cover, nur nach rechts verschoben;
     links weich ausgeblendet (minimaler Transparenz-Verlauf) */
  .hero__stage::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12%;
    width: 100%;
    z-index: -2;
    background-color: #020c1c;
    background-image: inherit;
    background-size: cover;
    background-position: 72% 38%;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 14%,
      #000 36%,
      #000 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      rgba(0, 0, 0, 0.45) 14%,
      #000 36%,
      #000 100%
    );
  }
  /* Links dunkles Blau, einheitlicher Markenverlauf */
  .hero__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      102deg,
      rgba(0, 32, 96, 0.97) 0%,
      rgba(0, 24, 72, 0.95) 26%,
      rgba(2, 10, 24, 0.65) 46%,
      rgba(2, 10, 24, 0) 66%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__stage > * {
    position: relative;
    z-index: 2;
  }
  .hero__stage > .hero__stage-hit {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hero__stage > .hero__stage-hit--gutachten {
    left: 0;
    width: 50%;
  }
  .hero__stage > .hero__stage-hit--about {
    right: 0;
    width: 50%;
  }
  .hero__stage-cta {
    display: none !important;
  }
  .hero__stage h1 {
    margin: 0 0 0.7rem;
    color: #fff;
    font-size: clamp(1.15rem, 5.1vw, 1.38rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 700;
  }
  .hero .hero__stage h1 .hero__br--desk {
    display: inline;
  }
  .hero__stage .hero__eyebrow {
    display: none;
  }
  .hero__stage .hero__accent {
    color: #fff;
  }
  .hero__stage .hero__lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }
  .hero__stage .hero__lead strong,
  .hero__stage .hero__lead-name {
    color: #fff;
  }
  .hero__stage-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0;
    padding: 0.48rem 0.9rem;
    border-radius: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 0.84rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: none;
  }
  .hero__stage-cta svg {
    width: 14px;
    height: 14px;
  }
  .hero__stage-cta:active {
    background: var(--brand-deep);
  }
}

/* Kurze Viewports (Browser-Adressleiste sichtbar): Hero kompakter, Inhalt hoeher */
@media (max-width: 1099.98px) and (max-height: 780px) {
  .hero {
    --hero-gutter: 0.65rem;
    padding-top: var(--hero-gutter);
  }
  .hero__stage {
    padding: 1rem 1.05rem;
    min-height: clamp(9.5rem, 26svh, 11.5rem);
    margin-bottom: 0.85rem;
  }
  .hero__stage h1 {
    margin-bottom: 0.45rem;
    font-size: clamp(1.12rem, 5vw, 1.32rem);
  }
  .hero__stage .hero__lead {
    margin-bottom: 0;
    font-size: 0.76rem;
    line-height: 1.4;
  }
  .hero__stage-cta {
    padding: 0.4rem 0.78rem;
    font-size: 0.78rem;
  }
}

/* Fallback ohne svh-Unterstuetzung */
@supports not (height: 1svh) {
  @media (max-width: 1099.98px) {
    .hero__stage {
      min-height: 11.5rem;
    }
  }
  @media (max-width: 1099.98px) and (max-height: 780px) {
    .hero__stage {
      min-height: 10rem;
    }
  }
}

/* iPhone 14/15 Pro Max Viewport (~430×932): Hero etwas hoeher */
@media (min-width: 420px) and (max-width: 440px) and (min-height: 900px) and (max-height: 960px) {
  .hero__stage {
    padding: 1.35rem 1.2rem;
    min-height: 18.75rem;
  }
  .hero__stage h1 {
    font-size: clamp(1.12rem, 5vw, 1.32rem);
  }
  .hero__stage .hero__lead {
    font-size: 0.78rem;
  }
  .hero__stage-cta {
    font-size: 0.88rem;
    margin-top: 0.35rem;
  }
}

/* Pixel / Galaxy Viewport (~412×915): Hero hoeher */
@media (min-width: 405px) and (max-width: 418px) and (min-height: 900px) and (max-height: 930px) {
  .hero__stage {
    padding: 1.25rem 1.15rem;
    min-height: 17rem;
  }
  .hero__stage h1 {
    font-size: clamp(1.22rem, 5.2vw, 1.48rem);
  }
  .hero__stage .hero__lead {
    font-size: 0.8rem;
  }
  .hero__stage-cta {
    font-size: 0.82rem;
  }
}

/* iPad Portrait (~768×1024): mehr Höhe, gleiche Schriftgrößen wie Handy */
@media (min-width: 750px) and (max-width: 820px) and (min-height: 980px) and (max-height: 1100px) {
  .hero__stage {
    padding: 1.6rem 1.6rem;
    min-height: 24rem;
  }
  .hero__stage-cta {
    padding: 0.62rem 1.15rem;
  }
  .hero__stage-cta svg {
    width: 16px;
    height: 16px;
  }
}

/* iPad Pro Portrait (~1024×1366): Mobile-Layout, ruhige Typo */
@media (min-width: 1000px) and (max-width: 1099.98px) and (min-height: 1280px) {
  .hero__stage {
    padding: 1.8rem 1.8rem;
    min-height: 27.5rem;
  }
  .hero .hero__cta .btn {
    min-height: 5.6rem;
    padding: 1rem 0.95rem;
  }
  .hero .hero__cta .btn__ic svg {
    width: 22px;
    height: 22px;
  }
  .hero .hero__rating {
    padding: 0.85rem 1rem;
  }
}

/* ==========================================================================
   Mobile Ansicht: Reihenfolge und Kontaktbereich nach Entwurf
   Reihenfolge: Bildkarte, Auszahlung, kleine Karten, Bewertung als weisse
   Karte, Kontaktblock. Die dunkle Profilkarte entfaellt auf dem Handy, ihren
   Inhalt tragen Bildkarte und Ueber-mich-Abschnitt.
   ========================================================================== */
.btn__hours {
  display: none;
}
@media (max-width: 1099.98px) {
  .hero__text {
    display: flex;
    flex-direction: column;
  }
  /* Die Vorlage macht aus diesen Wrappern auf dem Handy eigene Kaesten
     (Profilkarte neben den Buttons). Aufgeloest, damit die order-Werte
     direkt auf Auszahlung und Buttons greifen. */
  .hero .hero__actions,
  .hero .hero__after-media,
  .hero .hero__bottom {
    display: contents;
  }
  .hero__stage {
    order: 1;
  }
  .about-teaser {
    order: 2;
  }
  .hero__rating--desk {
    display: none !important;
  }
  /* Die alte Hinweiszeile entfaellt auf dem Handy, die Auszahlungskarte
     in den kleinen Karten sagt dasselbe. */
  a.hero__payout-row {
    display: none;
  }
  .hero__facts {
    display: none;
  }
  .hero__cta {
    order: 5;
  }
  .hero .hero__card,
  .hero .hero__about {
    display: none;
  }

  /* Bewertung: prominent, aber ruhig integriert */
  .hero__rating,
  .about-teaser__grid > .hero__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    width: 100%;
    margin: 0;
    padding: 0.78rem 0.85rem;
    background: #fff;
    border: 1px solid rgba(16, 33, 54, 0.08);
    border-radius: 8px;
    box-shadow: none;
  }
  .hero .hero__rating-stars {
    gap: 0.1rem;
    color: #f5a623;
  }
  .hero .hero__rating-stars svg {
    width: 15px;
    height: 15px;
  }
  .hero .hero__rating-score {
    font-size: 0.92rem;
    font-weight: 700;
    color: #16212e;
    letter-spacing: -0.01em;
  }
  .hero .hero__rating-text {
    font-size: 0.72rem;
    color: #6b7784;
    border-bottom: 0;
    letter-spacing: 0.01em;
  }
  .hero .hero__rating:hover .hero__rating-text,
  .hero .hero__rating:focus-visible .hero__rating-text {
    color: #6b7784;
    border-bottom-color: transparent;
  }
  .hero .hero__rating-g {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
  .hero .hero__rating-g svg {
    width: 16px;
    height: 16px;
  }

  /* Kontaktblock: Telefon primaer, WhatsApp/Direktchat sekundaer */
  .hero .hero__cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    grid-auto-rows: auto;
    gap: 0.55rem;
    width: 100%;
    height: auto;
    margin: 0.55rem 0 1.65rem;
  }
  .hero .hero__cta .btn {
    min-height: 0;
    border-radius: 8px;
  }
  .hero .hero__cta .btn::before {
    content: none;
  }
  .hero .hero__cta .btn__chev {
    display: none;
  }
  .hero .hero__cta .btn--primary {
    grid-column: 2;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.72rem 0.7rem;
    text-align: center;
    background: var(--brand-dark-flat);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 16px -10px rgba(0, 24, 72, 0.55);
  }
  .hero .hero__cta .btn--primary .btn__ic {
    display: grid;
    place-items: center;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
  }
  .hero .hero__cta .btn--primary .btn__ic svg {
    width: 18px;
    height: 18px;
    padding: 0;
    color: #fff;
    background: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn--primary .btn__text {
    display: block;
    font-size: 0.86rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.01em;
    white-space: normal;
  }
  .hero .hero__cta .btn--primary .btn__label,
  .hero .hero__cta .btn--primary .btn__hours {
    display: none;
  }
  .hero .hero__cta .btn--primary .btn__sub {
    display: block;
    font-size: 0.86rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0;
    opacity: 1;
  }

  .hero .hero__cta .btn--wa {
    grid-column: 1;
    grid-row: 1;
  }
  .hero .hero__cta .btn--direkt {
    grid-column: 1;
    grid-row: 2;
  }
  .hero .hero__cta .btn--wa,
  .hero .hero__cta .btn--direkt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.58rem 0.6rem;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none;
  }
  .hero .hero__cta .btn--wa .btn__sub,
  .hero .hero__cta .btn--direkt .btn__sub {
    display: none;
  }
  .hero .hero__cta .btn--wa .btn__ic svg,
  .hero .hero__cta .btn--direkt .btn__ic svg {
    width: 17px;
    height: 17px;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn--wa {
    background: #25a366;
    border: 0;
    color: #fff;
  }
  .hero .hero__cta .btn--wa .btn__ic svg {
    color: #fff;
  }
  .hero .hero__cta .btn--direkt {
    background: #00143c;
    border: 0;
    color: #fff;
  }
  .hero .hero__cta .btn--direkt .btn__ic svg {
    color: #fff;
  }
}

.site-burger {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-burger span,
.site-burger span::before,
.site-burger span::after {
  background: #fff;
}
.site-top.is-scrolled .site-burger {
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-top.is-scrolled .site-burger span,
.site-top.is-scrolled .site-burger span::before,
.site-top.is-scrolled .site-burger span::after {
  background: var(--brand);
}

/* Mobil: aufgeklapptes Menü kompakter, transluzentes Blau */
@media (max-width: 1099.98px) {
  .site-drawer__panel {
    width: min(100%, 280px);
    padding: 0.7rem 0.85rem 0.9rem;
    gap: 0.65rem;
    overflow: hidden;
    isolation: isolate;
    /* Dunkler Blau-Verlauf (einheitlich mit Über mich / CTA / Score) */
    background: var(--brand-dark-grad);
    -webkit-backdrop-filter: blur(16px) saturate(1.35);
    backdrop-filter: blur(16px) saturate(1.35);
    /* Kein Schatten im geschlossenen Zustand — sonst Glow am rechten Rand */
    box-shadow: none;
    color: #fff;
  }
  /* Ganz dezentes Foto-Wasserzeichen hinter den Menüpunkten */
  .site-drawer__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../bilder/menu-watermark.jpg") 85% 42% / cover no-repeat;
    opacity: 0.28;
    mix-blend-mode: soft-light;
    pointer-events: none;
    transform: scaleX(-1);
  }
  .site-drawer__panel > * {
    position: relative;
    z-index: 1;
  }
  .site-drawer.is-open .site-drawer__panel {
    box-shadow: -10px 0 32px rgba(9, 32, 53, 0.45);
  }
  .site-drawer__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin: 0 0 0.35rem;
  }
  .site-drawer__logo {
    display: block;
    line-height: 0;
    margin-right: auto;
  }
  .site-drawer__logo img {
    display: block;
    height: 34px;
    width: auto;
    /* Logo weiß auf dunklem Menü */
    filter: brightness(0) invert(1);
  }
  .site-drawer__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 1.15rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
  }
  .site-drawer nav {
    gap: 0;
    align-items: stretch;
  }
  .site-drawer nav a {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    padding: 0.42rem 0.55rem;
    border-radius: 4px;
    text-align: right;
  }
  .site-drawer nav a:hover,
  .site-drawer nav a:active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }
  .site-drawer__contact {
    margin-top: auto;
    padding: 0.7rem 0.75rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    text-align: right;
  }
  .site-drawer__contact a {
    display: block;
    color: #fff;
    margin-top: 0.28rem;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
  }
  .site-drawer__contact a:first-of-type {
    margin-top: 0.35rem;
  }
  .site-drawer__chat {
    margin-top: 0.4rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.82rem;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .site-drawer__chat:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
  .site-drawer__backdrop {
    background: rgba(4, 16, 40, 0.48);
  }
}

/* Mobil: Menüleiste erst beim Scrollen, Hamburger bleibt sticky */
@media (max-width: 1099.98px) {
  body:not(.legal-page) .site-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
      background 0.22s ease,
      border-color 0.22s ease,
      box-shadow 0.22s ease;
  }
  body:not(.legal-page) .site-top:not(.is-scrolled) .site-top__row {
    justify-content: flex-end;
    min-height: 0;
    padding-block: 0.22rem;
  }
  body:not(.legal-page) .site-top:not(.is-scrolled) .site-logo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }
  body:not(.legal-page) .site-top.is-scrolled {
    background: rgba(255, 255, 255, 0.97);
    border-bottom-color: var(--line);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  body:not(.legal-page) .site-top.is-scrolled .site-logo {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    overflow: visible;
    white-space: normal;
    opacity: 1;
    pointer-events: auto;
  }
  body:not(.legal-page) .site-top.is-scrolled .site-logo img {
    height: 38px;
  }
  body:not(.legal-page) .site-top .site-burger {
    position: relative;
    z-index: 1;
  }
}

/* —— Kleine Ueber-mich-Sektion direkt unter dem Hero (mobil) —— */
.about-teaser {
  display: none;
}
@media (max-width: 1099.98px) {
  .about-teaser {
    display: block;
    margin: 0 0 0.85rem;
    padding: 0;
    background: transparent;
  }
  .about-teaser__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "list"
      "rating"
      "card";
    column-gap: 0;
    row-gap: 0.85rem;
    align-items: start;
  }
  .about-teaser__label {
    display: none;
  }
  .hero .about-teaser h2 {
    display: none;
  }
  .about-teaser__text {
    grid-area: text;
    margin: 0;
    color: var(--brand-dark-flat);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.005em;
  }
  .about-teaser__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    aspect-ratio: 1;
    width: 100%;
    min-height: 0;
    padding: 0.45rem 0.35rem 0.4rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 14px -10px rgba(16, 33, 54, 0.18);
    text-align: center;
  }
  .about-teaser__grid > .about-teaser__card {
    grid-area: card;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    text-align: left;
    padding: 0.72rem 0.9rem;
    background: #fff;
    border: 1px solid rgba(1, 72, 195, 0.16);
    box-shadow: 0 4px 16px -12px rgba(16, 33, 54, 0.22);
  }
  .about-teaser__grid > .about-teaser__card::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -50%;
    width: 36%;
    height: 160%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 0%,
      rgba(1, 72, 195, 0) 42%,
      rgba(1, 72, 195, 0.07) 50%,
      rgba(1, 72, 195, 0.03) 58%,
      transparent 72%
    );
    transform: translateX(-130%) skewX(-16deg);
    animation: about-teaser-glass 6.5s ease-in-out infinite;
  }
  .about-teaser__grid > .about-teaser__card > * {
    position: relative;
    z-index: 1;
  }
  .about-teaser__grid > .about-teaser__card .about-teaser__icon {
    margin-bottom: 0;
    flex: 0 0 auto;
    color: var(--accent-deep);
    width: 1.55rem;
    height: 1.55rem;
  }
  .about-teaser__grid > .about-teaser__card .about-teaser__icon svg {
    width: 1.55rem;
    height: 1.55rem;
  }
  .about-teaser__grid > .about-teaser__card strong {
    flex: 1 1 auto;
    font-size: 0.82rem;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .about-teaser__grid > .about-teaser__card strong em {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7.6C22 5.4 46 4.2 70 3.6c17-.4 33-.6 48-.9' fill='none' stroke='%231f8a5b' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M6 8.6C30 6.8 60 5.6 92 5' fill='none' stroke='%231f8a5b' stroke-width='1.1' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  }
  .about-teaser__grid > .about-teaser__card .about-teaser__hint {
    margin-top: 0;
    flex: 0 0 auto;
    color: var(--accent-deep);
  }
  .about-teaser__icon {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    margin-bottom: 0.15rem;
    color: var(--brand-deep);
  }
  .about-teaser__icon svg {
    width: 1.85rem;
    height: 1.85rem;
  }
  .about-teaser__card strong {
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
  }
  .about-teaser__card strong em {
    font-style: normal;
    padding-bottom: 0.16em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7.6C22 5.4 46 4.2 70 3.6c17-.4 33-.6 48-.9' fill='none' stroke='%231f8a5b' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M6 8.6C30 6.8 60 5.6 92 5' fill='none' stroke='%231f8a5b' stroke-width='1.1' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.42em;
  }
  .about-teaser__card span:last-child {
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.35;
  }
  a.about-teaser__card {
    text-decoration: none;
    color: inherit;
  }
  .about-teaser__card span.about-teaser__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    margin-top: 0.15rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--accent-deep);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: none;
  }
  .about-teaser__card span.about-teaser__hint svg {
    width: 0.65rem;
    height: 0.65rem;
    flex: 0 0 auto;
  }
  .about-teaser__more {
    grid-area: list;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.15rem 0;
    padding: 0.35rem 0;
    list-style: none;
    border: 0;
  }
  .about-teaser__grid > .hero__rating {
    grid-area: rating;
  }
  .about-teaser__more li {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 0.42rem;
    margin: 0;
    color: #4a5560;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-align: center;
  }
  .about-teaser__check {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 0.88rem;
    height: 0.88rem;
    margin-top: 0;
    color: var(--accent-deep);
    opacity: 0.9;
  }
  .about-teaser__check svg {
    width: 0.88rem;
    height: 0.88rem;
  }
}

/* Galaxy A56 u. ä. (~360×780 CSS): Einleitungstext etwas angepasst */
@media (max-width: 400px) {
  .about-teaser__text {
    font-size: 0.8rem;
    line-height: 1.5;
  }
  .hero .about-teaser h2 {
    font-size: clamp(1.05rem, 5.2vw, 1.22rem);
  }
  .hero__stage .hero__lead {
    font-size: 0.74rem;
  }
}

/* iPad Portrait (~768×1024): etwas mehr Luft, gleiche Schrift */
@media (min-width: 750px) and (max-width: 820px) and (min-height: 980px) and (max-height: 1100px) {
  .about-teaser__grid {
    grid-template-columns: 1fr;
    row-gap: 0.7rem;
  }
  .about-teaser__grid > .about-teaser__card {
    padding: 0.95rem 1.05rem;
  }
  .about-teaser__more {
    gap: 0.55rem;
    margin-top: 0.15rem;
  }
  .about-teaser__check,
  .about-teaser__check svg {
    width: 0.95rem;
    height: 0.95rem;
  }
}

/* iPad Pro Portrait (~1024×1366): Layout only */
@media (min-width: 1000px) and (max-width: 1099.98px) and (min-height: 1280px) {
  .about-teaser__grid {
    grid-template-columns: 1fr;
    row-gap: 0.85rem;
  }
  .about-teaser__grid > .about-teaser__card {
    padding: 0.95rem 1.1rem;
  }
  .about-teaser__more {
    gap: 0.6rem;
    margin-top: 0.2rem;
  }
}

/* —— Schaden online melden: Popup wie Direktchat —— */
.claim {
  display: none !important;
}
.claim-popup {
  display: flex;
  align-items: stretch;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 520;
  padding: 0.55rem;
  padding-bottom: max(0.55rem, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.48s linear;
}
.claim-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.claim-popup__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(10, 28, 46, 0.42);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
.claim-popup.is-open .claim-popup__backdrop {
  opacity: 1;
}
.claim-popup__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 48px rgba(10, 28, 46, 0.28);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
.claim-popup.is-open .claim-popup__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.claim-popup:not(.is-open) .claim-popup__panel {
  transition-duration: 0.38s, 0.42s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .claim-popup,
  .claim-popup__backdrop,
  .claim-popup__panel {
    transition: none;
  }
  .claim-popup__panel {
    transform: none;
  }
  .about-teaser__grid > .about-teaser__card::after {
    animation: none;
    display: none;
  }
}

@keyframes about-teaser-glass {
  0%,
  22% {
    transform: translateX(-130%) skewX(-16deg);
    opacity: 0;
  }
  32% {
    opacity: 1;
  }
  62% {
    transform: translateX(290%) skewX(-16deg);
    opacity: 1;
  }
  72%,
  100% {
    transform: translateX(290%) skewX(-16deg);
    opacity: 0;
  }
}
.claim-popup__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 0 0 auto;
  padding: 1.05rem 1.05rem 0.85rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.claim-popup__titles {
  flex: 1 1 auto;
  min-width: 0;
}
.claim-popup__titles h2 {
  margin: 0 0 0.35rem;
  color: #000;
  font-size: clamp(1.2rem, 4.5vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.claim-popup__titles p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}
.claim-popup__close {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  margin: -0.2rem -0.25rem 0 0;
  border: 0;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
}
.claim-popup__close:active {
  background: #d7e3f5;
}
.claim-popup__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.05rem 1.05rem 1.35rem;
}
html.is-claim-open,
html.is-claim-open body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.is-claim-open body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

@media (max-width: 1099.98px) {
  .claim__form {
    display: grid;
    gap: 1.35rem;
  }
  .claim__group {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .claim__legend {
    margin: 0 0 0.7rem;
    padding: 0;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  .claim__opt {
    font-style: normal;
    font-weight: 500;
    color: var(--muted);
  }
  .claim__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    align-items: start;
  }
  .claim__row .claim__field {
    margin: 0;
    min-width: 0;
  }
  .claim__field {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.65rem;
  }
  .claim__field:last-child {
    margin-bottom: 0;
  }
  .claim__label {
    color: var(--ink-soft);
    font-size: 0.74rem;
    font-weight: 600;
  }
  .claim__label em {
    font-style: normal;
    font-weight: 500;
    color: var(--muted);
  }
  .claim__field input {
    box-sizing: border-box;
    width: 100%;
    height: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .claim__field input::placeholder {
    color: #9aa3ad;
  }
  .claim__field input:focus {
    outline: none;
    border-color: var(--accent-deep);
    box-shadow: 0 0 0 3px rgba(1, 58, 159, 0.12);
  }
  .claim__field input.is-invalid {
    border-color: #c0392b;
  }
  .claim__choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    align-items: stretch;
  }
  .claim__card {
    position: relative;
    display: flex;
    margin: 0;
    height: 100%;
    min-width: 0;
    cursor: pointer;
  }
  .claim__card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }
  .claim__card-face {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.2rem;
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 7rem;
    padding: 0.95rem 0.9rem;
    border: 0;
    border-radius: 8px;
    background: var(--chip);
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }
  .claim__card-ic {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-bottom: 0.35rem;
    color: var(--accent-deep);
  }
  .claim__card-ic svg {
    width: 1.55rem;
    height: 1.55rem;
  }
  .claim__card-face strong {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .claim__card-face > span:last-child {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
    max-width: 100%;
  }
  .claim__card input:focus-visible + .claim__card-face {
    box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.22);
  }
  .claim__card input:checked + .claim__card-face {
    border: 0;
    background: var(--brand-dark-grad);
    box-shadow: none;
    color: #fff;
  }
  .claim__card input:checked + .claim__card-face .claim__card-ic,
  .claim__card input:checked + .claim__card-face strong {
    color: #fff;
  }
  .claim__card input:checked + .claim__card-face > span:last-child {
    color: rgba(255, 255, 255, 0.78);
  }
  .claim__contact[hidden] {
    display: none !important;
  }
  .claim__contact {
    margin-top: 0.15rem;
  }
  .claim__row + .claim__row {
    margin-top: 0.65rem;
  }
  .claim__q {
    margin: 0.85rem 0 0.55rem;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
  }
  .claim__q--flush {
    margin-top: 0;
  }
  .claim__seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
  }
  .claim__seg-item {
    position: relative;
    margin: 0;
    cursor: pointer;
  }
  .claim__seg-item + .claim__seg-item {
    border-left: 0;
  }
  .claim__seg-item input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }
  .claim__seg-item span {
    display: grid;
    place-items: center;
    min-height: 2.85rem;
    border: 0;
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: 0.92rem;
    font-weight: 700;
    background: var(--chip);
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }
  .claim__seg-item input:checked + span {
    background: var(--brand-dark-grad);
    color: #fff;
  }
  .claim__seg-item input:focus-visible + span {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.22);
  }
  .claim__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.25rem;
    margin-top: 0.25rem;
    padding: 0.9rem 1.1rem;
    border: 0;
    border-radius: 6px;
    background: var(--accent-deep);
    color: #fff;
    font: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .claim__submit:active {
    background: var(--brand-deep);
  }
  .claim__submit:disabled {
    opacity: 0.72;
    cursor: wait;
  }
  .claim__note {
    margin: 0.55rem 0 0;
    color: var(--muted);
    font-size: 0.74rem;
    text-align: center;
    line-height: 1.4;
  }
  .claim__done {
    display: grid;
    gap: 0.55rem;
    padding: 1.5rem 0.2rem 0.4rem;
    text-align: center;
  }
  .claim__done[hidden] {
    display: none !important;
  }
  .claim__done-ic {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.35rem;
    color: var(--accent-deep);
  }
  .claim__done-ic svg {
    width: 3rem;
    height: 3rem;
  }
  .claim__done h3 {
    margin: 0;
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
  }
  .claim__done p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .claim__form.is-sent {
    display: none;
  }
}

/* ==========================================================================
   Mobil: einheitliche Typo-Skala
   Fliesstext ~0.84rem, Ueberschriften kompakt, einfacher Text nie zu gross.
   ========================================================================== */
@media (max-width: 1099.98px) {
  body {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .section-head {
    margin-bottom: 1.15rem;
  }
  .section-head h2 {
    font-size: clamp(1.18rem, 5vw, 1.4rem);
    line-height: 1.22;
    margin-bottom: 0.45rem;
  }
  .section-head p {
    font-size: 0.84rem;
    line-height: 1.55;
  }
  .kicker {
    font-size: 0.68rem;
    margin-bottom: 0.65rem;
  }

  .profile__role {
    font-size: 0.8rem;
  }
  .profile__lead {
    font-size: 0.86rem;
    line-height: 1.45;
  }
  .profile__text {
    font-size: 0.84rem;
    line-height: 1.55;
  }
  .profile__list li {
    font-size: 0.82rem;
  }
  .profile__card h2 {
    font-size: clamp(1.22rem, 5vw, 1.48rem);
  }

  .explain__list h3 {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }
  .explain__list p {
    font-size: 0.84rem;
    line-height: 1.55;
  }
  .explain__list a {
    font-size: 0.82rem;
    margin-top: 0.35rem;
  }
  .explain__stamp {
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .steps li h3,
  .step-card h3,
  .timeline h3,
  .card-dark h3,
  .fleet-card h3 {
    font-size: 0.86rem;
  }
  .steps li p,
  .step-card p,
  .timeline p,
  .card-dark p,
  .fleet-card p,
  .payout__text p,
  .payout__list li,
  .payout__points li,
  .faq details p,
  .faq-more,
  .cta__card p,
  .gscore__body p,
  .reviews-card p,
  .city-intro p,
  .band .wrap > p:not(.kicker),
  .profile-chip__line,
  .note,
  .note-important {
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .steps-grid {
    gap: 0.75rem;
  }
  .step-card {
    padding: 1rem 0.95rem 0.95rem;
  }
  .step-card::after {
    top: 0.35rem;
    right: 0.65rem;
    font-size: 2.5rem;
  }
  .step-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.6rem;
    border-radius: 10px;
  }
  .step-card__icon svg {
    width: 19px;
    height: 19px;
  }
  .step-card p + .btn {
    margin-top: 0.75rem;
  }
  .step-card .btn {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
  }

  .timeline {
    gap: 0.75rem;
  }
  .timeline li {
    padding: 0.95rem 0.9rem 1rem;
  }
  .timeline__num {
    width: 26px;
    height: 26px;
    margin-bottom: 0.6rem;
    font-size: 0.8rem;
  }
  .faq summary {
    font-size: 0.86rem;
  }

  .grev__author {
    font-size: 0.86rem;
  }
  .grev__when {
    font-size: 0.72rem;
  }
  .grev__text {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .reviews-card__author {
    font-size: 0.86rem;
  }
  .reviews-card__when {
    font-size: 0.72rem;
  }

  .cta__row-text .cta__row-label {
    font-size: 0.92rem;
  }
  .cta__row-text > span {
    font-size: 0.78rem;
  }
  .cta__hours {
    font-size: 0.78rem;
  }

  .site-footer,
  .footer-claim {
    font-size: 0.84rem;
  }
  .footer-grid ul li a,
  .footer-bottom a,
  .footer-bottom p {
    font-size: 0.82rem;
  }

  .hero__fact-title {
    font-size: 0.86rem;
  }
  .hero__fact-desc {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   Desktop-Hero im Stil der Bottrop-Seite
   Foto laeuft wieder als Band bis zur rechten Fensterkante, wird aber nach
   links mit einer schraegen, weissen Blende ausgeblendet und insgesamt
   aufgehellt - es traegt den Hintergrund, statt ihn zu dominieren.
   Links Eyebrow, Ueberschrift, Lead, darunter eine feine Merkmalzeile ueber
   einer Haarlinie und die Kontaktbuttons. Mobil aendert sich nichts.
   ========================================================================== */
@media (min-width: 1100px) {
  :root {
    --content-left: max(clamp(3rem, 6.5vw, 9.5rem), calc((100vw - 100rem) / 2));
    --hero-media-space: clamp(21rem, 40vw, 45rem);
  }
  .hero {
    background: #fff;
  }
  /* Der Hero muss nicht mehr die volle Bildschirmhoehe fuellen: das Band
     wuerde sonst so hoch, dass das Foto stark angeschnitten wird. */
  .hero__text { justify-content: flex-start; }

  /* —— Foto: Band rechts, schraege weisse Blende nach links —— */
  .hero__media {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: clamp(32rem, 52vw, 58rem);
    aspect-ratio: auto;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    isolation: isolate;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% 42%;
    /* heller und ruhiger als das Original, damit die Schrift daneben fuehrt */
    filter: saturate(1) contrast(1.02) brightness(1.01);
  }
  /* —— Diagonale Striche im Markenton, parallel zur Bildkante ——
     Weiche Kanten (0,35 % Verlauf statt harter Stopp) verhindern Treppchen,
     die Laengsmaske laesst die Linien oben und unten auslaufen. */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    /* die Basisregel setzt hier eine Blautoenung mit mix-blend-mode */
    mix-blend-mode: normal;
    opacity: 1;
    background:
      linear-gradient(
        74deg,
        transparent 26.15%,
        rgba(0, 32, 96, 0.8) 26.5%,
        rgba(0, 32, 96, 0.8) 27.05%,
        transparent 27.4%
      ),
      linear-gradient(
        74deg,
        transparent 28.55%,
        rgba(1, 72, 195, 0.5) 28.85%,
        rgba(1, 72, 195, 0.5) 29.1%,
        transparent 29.4%
      ),
      linear-gradient(
        74deg,
        transparent 30.3%,
        rgba(143, 180, 238, 0.55) 30.55%,
        rgba(143, 180, 238, 0.55) 30.72%,
        transparent 30.97%
      );
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.75) 14%,
      #000 34%,
      #000 66%,
      rgba(0, 0, 0, 0.7) 86%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.75) 14%,
      #000 34%,
      #000 66%,
      rgba(0, 0, 0, 0.7) 86%,
      transparent 100%
    );
  }

  .hero__media::after {
    z-index: 2;
    background: linear-gradient(
        74deg,
        #fff 0%,
        #fff 21%,
        rgba(255, 255, 255, 0.86) 24%,
        rgba(255, 255, 255, 0.45) 27.5%,
        rgba(255, 255, 255, 0.16) 31%,
        rgba(255, 255, 255, 0.04) 33.5%,
        rgba(255, 255, 255, 0) 36%
      );
  }

  /* —— Merkmalzeile: keine Box mehr, nur eine Haarlinie darueber —— */
  .hero__facts {
    max-width: 58rem;
    margin: 1.7rem 0 1.8rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    column-gap: 1.6rem;
    row-gap: 1.5rem;
    padding-top: 1.7rem;
    /* gleich hohe Zeilen liessen unter der zweiten Reihe viel Luft stehen */
    grid-auto-rows: auto;
    align-items: start;
  }
  .hero__fact,
  .hero__fact--payout {
    padding: 0;
    background: none;
    border: 0 !important;
  }
  .hero__fact-ic {
    display: inline-grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
  }
  .hero__fact-ic svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  .hero__fact-title {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  /* Der Auszahlungs-Hinweis war ein Button und machte die erste Zeile hoch */
  .hero__fact-go {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
  }
  .hero__fact-desc {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--muted);
  }

  /* —— Buttons: ein gefuellter, zwei ruhige —— */
  .hero .hero__cta .btn {
    min-height: 68px;
    padding: 0.85rem 1.3rem;
    border-radius: 12px;
  }
  .hero .hero__cta .btn--primary {
    background: var(--accent);
    border-color: transparent;
    box-shadow: 0 14px 30px -14px rgba(1, 72, 195, 0.55);
  }
  .hero .hero__cta .btn--primary:hover { background: var(--accent-deep); }
  .hero .hero__cta .btn--direkt {
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line-strong);
    box-shadow: 0 10px 24px -18px rgba(16, 33, 54, 0.5);
  }
  .hero .hero__cta .btn--direkt:hover {
    background: #fff;
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line-strong));
  }

  /* —— Kurzprofil entfaellt in dieser Fassung: das Foto bleibt frei —— */
  .hero__card { display: none; }
  .hero__card--unused {
    top: 50%;
    right: var(--content-left);
    transform: translateY(-50%);
    width: min(18.5rem, 22vw);
    padding: 1.3rem 1.4rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
    box-shadow: 0 24px 50px -30px rgba(9, 28, 62, 0.45);
    color: var(--ink);
  }
  .hero__card-photo { border-color: var(--line); }
  .hero__card-role { color: var(--ink-soft); }
  .hero__card-facts { border-top-color: var(--line); }
  .hero__card-facts li { color: var(--ink-soft); }
  .hero__card-facts li::before {
    border-left-color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .hero__card-link { border-top-color: var(--line); color: var(--accent); }
}

@media (min-width: 1300px) {
  .hero__portrait { display: none; }
  .hero__card > picture { display: block; }
}

@media (min-width: 1200px) {
  .hero { min-height: min(calc(100vh - 164px), 46rem); }
}

/* ==========================================================================
   Feinschliff Desktop-Hero
   ========================================================================== */
@media (min-width: 1100px) {
  /* Hauch von Licht hinter der Textspalte, damit die weisse Flaeche nicht
     voellig flach wirkt. */
  .hero {
    background:
      radial-gradient(70% 60% at 6% 0%, rgba(143, 180, 238, 0.16) 0%, rgba(143, 180, 238, 0) 62%),
      linear-gradient(180deg, #fbfcfe 0%, #fff 42%);
  }

  /* Typografie etwas ruhiger takten */
  .hero__eyebrow { margin-bottom: 0.9rem; }
  .hero h1 { margin-bottom: 1.05rem; }
  .hero__lead { max-width: 46rem; }
  .hero .hero__rating {
    margin: 1.15rem 0 1.15rem;
    padding: 0.5rem 0.9rem 0.5rem 0.55rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 33, 54, 0.04);
  }

  /* Siegel auf dem Foto: kleiner heller Chip, wie er mobil schon existiert */
  .hero__media-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    position: absolute;
    z-index: 3;
    left: 42%;
    bottom: clamp(1.5rem, 3vw, 2.5rem);
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    box-shadow: 0 16px 34px -20px rgba(9, 28, 62, 0.6);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .hero__media-badge svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--accent);
  }

  /* Merkmalzeile: Titel etwas kraeftiger, Icons ruhiger */
  .hero__fact-title { color: var(--ink); }
  .hero__fact-ic {
    border: 1px solid color-mix(in srgb, var(--accent) 14%, #fff);
  }

  /* Buttons: etwas mehr Praesenz fuer den Anruf-Button */
  .hero .hero__cta .btn--primary {
    background: linear-gradient(180deg, #0a55d6 0%, var(--accent) 60%, var(--accent-deep) 100%);
    box-shadow: 0 16px 32px -14px rgba(1, 72, 195, 0.6);
  }
}

/* Markenverlauf als kleines Echo aus dem Abschnitt "Ueber mich" */
@media (min-width: 1100px) {
  .hero__eyebrow-line {
    width: 42px;
    height: 4px;
    background: linear-gradient(90deg, rgba(0, 32, 96, 0.95), var(--accent));
  }
}

/* ==========================================================================
   Version 3: Foto laeuft weit nach links, die Merkmale liegen als breite
   weisse Karte unten im Hero und schieben sich ueber die Bildkante.
   ========================================================================== */
@media (min-width: 1100px) {
  :root {
    /* Nur Ueberschrift, Lead, Bewertung und Buttons brauchen weissen Grund,
       deshalb darf das Foto deutlich weiter nach links reichen. */
    --hero-media-space: clamp(21rem, 48vw, 54rem);
  }
  .hero {
    background:
      radial-gradient(58% 55% at 3% 0%, rgba(143, 180, 238, 0.16) 0%, rgba(143, 180, 238, 0) 62%),
      #fff;
    padding-bottom: clamp(1.5rem, 2.6vw, 2.5rem);
  }
  .hero::before { content: none; }

  .hero__media {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: clamp(34rem, 60vw, 68rem);
    height: auto;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hero__media img { object-position: 42% 40%; }
  .hero__media::after {
    background: linear-gradient(
      74deg,
      #fff 0%,
      #fff 25%,
      rgba(255, 255, 255, 0.88) 28%,
      rgba(255, 255, 255, 0.45) 31.5%,
      rgba(255, 255, 255, 0.16) 35%,
      rgba(255, 255, 255, 0) 39%
    );
  }
  .hero__media::before {
    background:
      linear-gradient(74deg, transparent 30.2%, rgba(0, 32, 96, 0.8) 30.55%, rgba(0, 32, 96, 0.8) 31.1%, transparent 31.45%),
      linear-gradient(74deg, transparent 32.6%, rgba(1, 72, 195, 0.5) 32.9%, rgba(1, 72, 195, 0.5) 33.15%, transparent 33.45%),
      linear-gradient(74deg, transparent 34.3%, rgba(143, 180, 238, 0.55) 34.55%, rgba(143, 180, 238, 0.55) 34.72%, transparent 34.97%);
  }
  .hero__media-badge {
    left: auto;
    right: clamp(1.5rem, 3vw, 3rem);
    top: clamp(1.5rem, 3vw, 2.5rem);
    bottom: auto;
  }

  /* Buttons vor die Karte, Karte ganz nach unten */
  .hero .hero__cta { order: 8; }
  .hero__facts {
    order: 9;
    width: auto;
    max-width: none;
    align-self: stretch;
    /* bis zur rechten Kante des Inhaltsbandes ziehen */
    margin: clamp(1.6rem, 2.6vw, 2.4rem) calc(-1 * (var(--hero-media-space) - var(--content-left))) 0 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
    padding: clamp(1.2rem, 1.8vw, 1.6rem) clamp(1.2rem, 1.8vw, 1.7rem);
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.05),
      0 36px 64px -42px rgba(9, 28, 62, 0.55);
  }
  /* In den schmalen Spalten steht das Symbol ueber dem Text */
  .hero__fact,
  .hero__fact-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
  .hero__fact {
    padding: 0 clamp(0.9rem, 1.3vw, 1.25rem);
  }
  .hero__fact-go { white-space: normal; }
  .hero__fact + .hero__fact {
    border-left: 1px solid var(--line) !important;
  }
  .hero__fact-ic {
    width: 2rem;
    height: 2rem;
  }
  .hero__fact-ic svg { width: 1rem; height: 1rem; }
  .hero__fact-title { font-size: 0.88rem; }
  .hero__fact-desc { font-size: 0.79rem; line-height: 1.4; }
  .hero__fact-go { font-size: 0.76rem; }
}

/* Mittlere Desktopbreiten: die Textspalte ist schmal, deshalb rueckt die
   Bildkante weiter nach rechts und die Buttons stehen zweispaltig. */
@media (min-width: 1100px) and (max-width: 1499.98px) {
  :root { --hero-media-space: clamp(21rem, 53vw, 54rem); }
  .hero__media { width: clamp(30rem, 54vw, 60rem); }
  .hero__media::after {
    background: linear-gradient(
      74deg,
      #fff 0%,
      #fff 30%,
      rgba(255, 255, 255, 0.88) 33%,
      rgba(255, 255, 255, 0.45) 37%,
      rgba(255, 255, 255, 0.16) 41%,
      rgba(255, 255, 255, 0) 45%
    );
  }
  .hero__media::before {
    background:
      linear-gradient(74deg, transparent 35.2%, rgba(0, 32, 96, 0.8) 35.55%, rgba(0, 32, 96, 0.8) 36.1%, transparent 36.45%),
      linear-gradient(74deg, transparent 37.6%, rgba(1, 72, 195, 0.5) 37.9%, rgba(1, 72, 195, 0.5) 38.15%, transparent 38.45%),
      linear-gradient(74deg, transparent 39.3%, rgba(143, 180, 238, 0.55) 39.55%, rgba(143, 180, 238, 0.55) 39.72%, transparent 39.97%);
  }
  .hero .hero__cta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__fact:nth-child(3n + 1) { border-left: 0 !important; }
  .hero__fact:nth-child(n + 4) {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
  }
}


/* ==========================================================================
   Idee D: harte Diagonale (Clip-Kante) statt Verlauf, Merkmalkarte unten
   ========================================================================== */
@media (min-width: 1100px) {
  :root { --hero-media-space: clamp(21rem, 52vw, 58rem); }
  .hero__media {
    width: clamp(34rem, 62vw, 72rem);

  }
  /* Kante mit Schlagschatten: harte Kante plus schmaler Grauverlauf davor.
     Alles im selben 74deg-Raster wie die Streifen, dadurch laufen Kante,
     Schatten und Linien in jeder Fenstergroesse exakt parallel. */
  .hero__media::after {
    background: linear-gradient(
      74deg,
      #ffffff 0%,
      #ffffff 22.4%,
      #eef1f6 23%,
      #d7dde7 23.5%,
      rgba(215, 221, 231, 0) 23.9%
    );
  }
  .hero__media::before {
    background:
      linear-gradient(74deg, transparent 24.05%, rgba(255, 255, 255, 0.85) 24.45%, rgba(255, 255, 255, 0.85) 25.75%, transparent 26.15%),
      linear-gradient(74deg, transparent 27.1%, rgba(143, 180, 238, 0.6) 27.4%, rgba(143, 180, 238, 0.6) 28%, transparent 28.3%);
  }
}

/* Auf 16:9 (1920x1080) soll der Hero ohne Scrollen sitzen */
@media (min-width: 1100px) {
  .hero { padding-bottom: clamp(1rem, 1.6vw, 1.5rem); }
  .hero__facts { margin-top: clamp(1.1rem, 1.8vw, 1.6rem); }
  .hero h1 { margin-bottom: 0.9rem; }
  .hero .hero__rating { margin-top: 0.9rem; }
}

/* Mittlere Breiten: Kante weiter nach rechts, sonst steht der Text im Bild */
@media (min-width: 1100px) and (max-width: 1499.98px) {
  :root { --hero-media-space: clamp(21rem, 56vw, 58rem); }
  .hero__media {
    width: clamp(30rem, 56vw, 60rem);
  }
  .hero__media::after {
    background: linear-gradient(
      74deg,
      #ffffff 0%,
      #ffffff 21.2%,
      #eef1f6 21.8%,
      #d7dde7 22.3%,
      rgba(215, 221, 231, 0) 22.7%
    );
  }
  .hero__media::before {
    background:
      linear-gradient(74deg, transparent 22.45%, rgba(255, 255, 255, 0.85) 22.85%, rgba(255, 255, 255, 0.85) 24.15%, transparent 24.55%),
      linear-gradient(74deg, transparent 25.5%, rgba(143, 180, 238, 0.6) 25.8%, rgba(143, 180, 238, 0.6) 26.4%, transparent 26.7%);
  }
}

/* Siegel im Bild entfaellt */
@media (min-width: 1100px) {
  .hero__media-badge { display: none; }
}

/* Mittlere Breiten: die Textspalte ist schmaler als das laengste Wort der
   Ueberschrift, deshalb dort eine Stufe kleiner setzen. */
@media (min-width: 1100px) and (max-width: 1499.98px) {
  .hero h1 { font-size: clamp(2rem, 3.9vw, 3.2rem); }
  .hero__lead { font-size: 1.04rem; }
}

@media (min-width: 1100px) and (max-width: 1379.98px) {
  .hero h1 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
}

/* ==========================================================================
   Bilderleiste links im Hero
   Ein durchgehendes Band aus sechs Motiven - kein Abstand, keine runden
   Ecken, gerade Kanten. Es laeuft vom oberen bis zum unteren Hero-Rand.
   Ruhig ausgegraut mit Markenlasur, beim Ueberfahren in voller Farbe.
   Erst ab 1900px, darunter reicht der linke Rand nicht.
   ========================================================================== */
.hero__rail { display: none; }

@media (min-width: 1900px) {
  :root {
    /* So breit wie moeglich, aber immer so, dass Band, Luft und Striche in
       den freien linken Rand passen. */
    --rail-gap: 0.6rem;
    --rail-w: min(
      clamp(5rem, 8vw, 14rem),
      calc(var(--content-left) - 2.5rem)
    );
    /* Die Leiste fuellt den Hero komplett - kein Rand oben oder unten. */
    --rail-pad: 0px;
    /* Band sitzt buendig am linken Fensterrand */
    --rail-left: 0px;
  }
  .hero__rail {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: var(--rail-left);
    display: flex;
    flex-direction: column;
    gap: 0;
    width: var(--rail-w);
    padding: var(--rail-pad) 0;
    /* sichtbar, damit die gehoverte Kachel nach rechts herausfahren kann */
    overflow: visible;
    /* Der Platz ober- und unterhalb bleibt leer, damit die wachsende Kachel
       Luft hat - deshalb kein eigener Bandhintergrund. */
    background: transparent;
    box-shadow: none;
  }
  .hero__rail-item {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: block;
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
  .hero__rail-item picture {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform 0.45s var(--ease);
  }
  .hero__rail-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%;
    filter: grayscale(1) contrast(1.04) brightness(0.94);
    opacity: 1;
    transition: filter 0.4s var(--ease), opacity 0.4s var(--ease);
  }
  /* Markenlasur ueber der ruhigen Fassung */
  .hero__rail-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* derselbe dunkelblaue Markenverlauf wie die Karte "Ueber mich",
       nur zurueckhaltender dosiert */
    background: var(--brand-dark-grad);
    opacity: 0.4;
    transition: opacity 0.4s var(--ease);
  }
  /* Haarfeine helle Fuge zwischen den Motiven */
  .hero__rail-item + .hero__rail-item {
    border-top: 1px solid rgba(255, 255, 255, 0.45);
  }

  /* Zwei dezente Senkrechte an der rechten Kante - weiche Kanten und ueber
     die Hoehe auslaufend, wie die Linien am grossen Hero-Foto. */
  .hero__rail-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 42%,
      rgba(0, 0, 0, 0.4) 70%,
      rgba(0, 0, 0, 0.78) 100%
    );
    transition: opacity 0.35s var(--ease);
  }
  .hero__rail-item:hover::before { opacity: 0.85; }
  .hero__rail-item:hover {
    z-index: 3;
    /* Die Kachel waechst nach innen: die oberste nach unten, die unterste
       nach oben - so laeuft nichts unter Kopfzeile oder Folgeabschnitt. */
    transform-origin: left center;
    transform: scale(1.22);
    box-shadow: 0 22px 44px -20px rgba(9, 28, 62, 0.6);
  }
  .hero__rail-item:first-child:hover { transform-origin: left top; }
  .hero__rail-item:last-child:hover { transform-origin: left bottom; }
  .hero__rail-item:hover img { filter: none; opacity: 1; }
  .hero__rail-item:hover::after { opacity: 0.2; }
}

/* ==========================================================================
   Beschriftung der vier Kacheln: Schrittfolge im Bild
   ========================================================================== */
@media (min-width: 1900px) {
  .hero__rail-item::after {
    opacity: 0.44;
  }
  .hero__rail-cap {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 0.6rem 0.6rem 0.65rem;
    color: #fff;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65), 0 2px 12px rgba(0, 0, 0, 0.45);
    transform: translateY(0);
    transition: transform 0.35s var(--ease);
  }
  .hero__rail-cap b {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.4rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
    text-shadow: none;
    transition: background 0.3s var(--ease), color 0.3s var(--ease),
      border-color 0.3s var(--ease);
  }
  .hero__rail-cap::after {
    content: "";
    display: block;
    width: 1.1rem;
    height: 2px;
    margin-top: 0.45rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0.6;
    transition: width 0.4s var(--ease), opacity 0.3s var(--ease);
  }
  .hero__rail-item:hover .hero__rail-cap { transform: translateY(-2px); }
  .hero__rail-item:hover .hero__rail-cap::after { width: 2.6rem; opacity: 1; }
  .hero__rail-item:hover .hero__rail-cap b {
    background: #ffffff;
    border-color: transparent;
    color: #1a1c20;
  }
  .hero__rail-item:hover::after { opacity: 0.2; }
}

/* ==========================================================================
   Desktop: der Telefon-Button weicht der Online-Schadenmeldung
   Die Nummer steht weiterhin gross im Kopf der Seite, deshalb ist der Platz
   im Hero fuer die Online-Meldung besser genutzt. Mobil bleibt alles wie es
   war - dort ist Anrufen der kuerzeste Weg.
   ========================================================================== */
.btn--claim { display: none; }

@media (min-width: 1100px) {
  .hero .hero__cta .btn--primary { display: none; }
  .hero .hero__cta .btn--claim {
    display: inline-flex;
    background: linear-gradient(180deg, #0a55d6 0%, var(--accent) 60%, var(--accent-deep) 100%);
    color: #fff;
  }
  .hero .hero__cta .btn--claim .btn__ic,
  .hero .hero__cta .btn--claim .btn__chev { color: #fff; }
  .hero .hero__cta .btn--claim .btn__sub { color: rgba(255, 255, 255, 0.82); }
  /* Beschriftung darf umbrechen, damit nichts abgeschnitten wird */
  .hero .hero__cta .btn--claim .btn__label,
  .hero .hero__cta .btn--claim .btn__sub {
    white-space: normal;
    line-height: 1.2;
  }
}

/* ==========================================================================
   Kontaktbuttons: einheitliche Hover-Zustaende
   Der weisse Direktchat-Button hat beim Ueberfahren seine Schriftfarbe von
   einer Basisregel geerbt und wurde weiss auf weiss - also unlesbar. Hier
   liegen Flaeche, Rahmen, Schatten und Schriftfarben je Button explizit.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero .hero__cta .btn {
    transition:
      transform 0.22s var(--ease),
      background 0.22s var(--ease),
      border-color 0.22s var(--ease),
      box-shadow 0.22s var(--ease),
      color 0.22s var(--ease);
  }
  .hero .hero__cta .btn:hover { transform: translateY(-2px); }
  .hero .hero__cta .btn:active { transform: translateY(0); }

  /* 1 - Online melden: bleibt blau, wird satter */
  .hero .hero__cta .btn--claim:hover {
    background: linear-gradient(180deg, #0b5ce6 0%, #0a4fcc 55%, var(--accent-deep) 100%);
    box-shadow: 0 22px 40px -16px rgba(1, 72, 195, 0.72);
  }
  .hero .hero__cta .btn--claim:hover .btn__label,
  .hero .hero__cta .btn--claim:hover .btn__ic,
  .hero .hero__cta .btn--claim:hover .btn__chev { color: #fff; }
  .hero .hero__cta .btn--claim:hover .btn__sub { color: rgba(255, 255, 255, 0.92); }

  /* 2 - WhatsApp: dunkleres Gruen, Schrift bleibt weiss */
  .hero .hero__cta .btn--wa:hover {
    background: #1c8a56;
    box-shadow: 0 20px 36px -16px rgba(28, 138, 86, 0.7);
  }
  .hero .hero__cta .btn--wa:hover .btn__label,
  .hero .hero__cta .btn--wa:hover .btn__ic,
  .hero .hero__cta .btn--wa:hover .btn__chev { color: #fff; }
  .hero .hero__cta .btn--wa:hover .btn__sub { color: rgba(255, 255, 255, 0.92); }

  /* 3 - Direktchat: heller Blauton, Schrift bleibt dunkel */
  .hero .hero__cta .btn--direkt .btn__sub { color: var(--muted); }
  .hero .hero__cta .btn--direkt:hover {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line-strong));
    box-shadow: 0 18px 32px -20px rgba(1, 72, 195, 0.55);
    color: var(--ink);
  }
  .hero .hero__cta .btn--direkt:hover .btn__label { color: var(--accent-deep); }
  .hero .hero__cta .btn--direkt:hover .btn__sub { color: var(--ink-soft); }
  .hero .hero__cta .btn--direkt:hover .btn__ic,
  .hero .hero__cta .btn--direkt:hover .btn__chev { color: var(--accent); }

  /* Tastaturbedienung sichtbar machen */
  .hero .hero__cta .btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 3px;
  }
}

/* Direktchat: das Symbol war weiss auf hellem Grund und damit unsichtbar.
   Die milchige Kachel dahinter entfaellt, der Glyph steht dunkel. */
@media (min-width: 1100px) {
  .hero .hero__cta .btn--direkt .btn__ic {
    background: none;
    box-shadow: none;
    color: var(--ink);
  }
  .hero .hero__cta .btn--direkt .btn__ic svg,
  .hero .hero__cta .btn--direkt .btn__chev svg {
    color: inherit;
    fill: currentColor;
  }
  .hero .hero__cta .btn--direkt .btn__chev { color: var(--muted); }
  .hero .hero__cta .btn--direkt:hover .btn__ic { color: var(--accent); }
  .hero .hero__cta .btn--direkt:hover .btn__chev { color: var(--accent); }
}

/* ==========================================================================
   Infozeile ueber dem Menue entfaellt auf dem Desktop
   Der Kopf ist dadurch 128px statt 164px hoch - die Hoehenrechnungen von
   Hero und Bilderleiste haengen an --header-h und ziehen automatisch mit.
   ========================================================================== */
@media (min-width: 1100px) {
  .site-utility { display: none; }
  :root {
    --header-h: 128px;
    /* Standardwerte, damit die Hoehenrechnung auch ohne Bilderleiste gilt */
    --rail-w: 0px;
    --rail-pad: 0px;
  }
  .hero {
    /* Der Hero fuellt das Fenster bis zur Unterkante - der naechste
       Abschnitt wird erst beim Scrollen sichtbar. */
    min-height: max(
      calc(100vh - var(--header-h) - 7rem),
      calc(var(--rail-w) * 16 / 9 * 3 + var(--rail-pad) * 2)
    );
  }
}

@media (min-width: 1900px) {
  :root {
    /* Etwas breiter, damit die drei Kacheln im hoeheren Hero nicht zu
       schmal wirken. */
    --rail-w: min(
      clamp(5rem, 6.6vw, 12rem),
      calc((100vh - var(--header-h) - 1.5rem) * 9 / 16 / 3.2),
      calc(var(--content-left) - 2.5rem)
    );
    --rail-pad: 0px;
  }
}

/* ==========================================================================
   Kontaktbuttons ohne Umrandung, nur mit leichtem Schatten
   ========================================================================== */
@media (min-width: 1100px) {
  .hero .hero__cta .btn,
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa,
  .hero .hero__cta .btn--direkt {
    border: 0;
    box-shadow: 0 1px 2px rgba(16, 33, 54, 0.06), 0 10px 24px -16px rgba(9, 28, 62, 0.45);
  }
  .hero .hero__cta .btn--claim {
    box-shadow: 0 2px 4px rgba(1, 72, 195, 0.18), 0 14px 28px -14px rgba(1, 72, 195, 0.5);
  }
  .hero .hero__cta .btn--wa {
    box-shadow: 0 2px 4px rgba(28, 138, 86, 0.18), 0 14px 28px -14px rgba(28, 138, 86, 0.45);
  }
  .hero .hero__cta .btn--claim:hover {
    box-shadow: 0 4px 8px rgba(1, 72, 195, 0.2), 0 20px 36px -14px rgba(1, 72, 195, 0.58);
  }
  .hero .hero__cta .btn--wa:hover {
    box-shadow: 0 4px 8px rgba(28, 138, 86, 0.2), 0 20px 36px -14px rgba(28, 138, 86, 0.52);
  }
  .hero .hero__cta .btn--direkt:hover {
    border: 0;
    box-shadow: 0 3px 6px rgba(16, 33, 54, 0.08), 0 18px 32px -18px rgba(1, 72, 195, 0.45);
  }
}

/* Beschriftung nur, wenn die Kacheln breit genug dafuer sind.
   Zwischen 1900 und 2150px ist die freie Randspalte zu schmal - dort
   laufen die Bilder ohne Text. */
@media (min-width: 1900px) {
  .hero__rail-cap { display: none; }
}

@media (min-width: 2150px) {
  .hero__rail-cap {
    display: block;
    /* Schriftgroesse waechst mit der Kachelbreite mit */
    font-size: max(0.62rem, calc(var(--rail-w) * 0.082));
  }
  .hero__rail-cap b { font-size: 0.8em; }
}

/* ==========================================================================
   Desktop-Typografie eine Stufe groesser
   Die Textspalte wirkte im breiten Hero zu leer - Lead, Bewertung, Buttons
   und die Merkmalleiste bekommen mehr Groesse.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__eyebrow {
    font-size: 0.86rem;
    letter-spacing: 0.13em;
  }
  .hero__lead {
    max-width: 48rem;
    font-size: 1.22rem;
    line-height: 1.56;
  }
  .hero .hero__rating { padding: 0.6rem 1rem 0.6rem 0.65rem; }
  .hero .hero__rating-score { font-size: 1.06rem; }
  .hero .hero__rating-text { font-size: 0.92rem; }
  .hero .hero__rating-stars svg { width: 19px; height: 19px; }

  .hero .hero__cta .btn { min-height: 74px; }
  .hero .hero__cta .btn .btn__label { font-size: 1.02rem; }
  .hero .hero__cta .btn .btn__sub { font-size: 0.86rem; }
  .hero .hero__cta .btn--claim .btn__label { font-size: 1rem; }

  .hero__fact-ic { width: 2.5rem; height: 2.5rem; }
  .hero__fact-ic svg { width: 1.25rem; height: 1.25rem; }
  .hero__fact-title { font-size: 1.04rem; line-height: 1.28; }
  .hero__fact-desc { font-size: 0.92rem; line-height: 1.45; }
  .hero__facts { padding: clamp(1.35rem, 2vw, 1.85rem) clamp(1.35rem, 2vw, 1.9rem); }
}

/* ==========================================================================
   Flache Schirme (1080p und aehnlich): eine Stufe kleiner, damit der Hero
   ohne Scrollen auf den Bildschirm passt. Gemessen an der Fensterhoehe,
   nicht an der Breite - auf 1440p bleibt die grosse Fassung.
   ========================================================================== */
@media (min-width: 1100px) and (max-height: 1150px) {
  .hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.7rem); }
  .hero__eyebrow { font-size: 0.8rem; margin-bottom: 0.7rem; }
  .hero__lead { font-size: 1.08rem; line-height: 1.5; }
  .hero .hero__rating { margin: 0.9rem 0 0.9rem; padding: 0.5rem 0.9rem 0.5rem 0.6rem; }
  .hero .hero__rating-score { font-size: 1rem; }
  .hero .hero__rating-text { font-size: 0.86rem; }
  .hero .hero__cta .btn { min-height: 66px; padding: 0.7rem 1.15rem; }
  .hero .hero__cta .btn .btn__label { font-size: 0.95rem; }
  .hero .hero__cta .btn .btn__sub { font-size: 0.8rem; }
  .hero__facts {
    margin-top: clamp(1rem, 1.6vw, 1.4rem);
    padding: clamp(1rem, 1.5vw, 1.35rem) clamp(1.1rem, 1.6vw, 1.5rem);
  }
  .hero__fact-ic { width: 2.2rem; height: 2.2rem; }
  .hero__fact-ic svg { width: 1.1rem; height: 1.1rem; }
  .hero__fact-title { font-size: 0.95rem; }
  .hero__fact-desc { font-size: 0.85rem; }
}

/* Die Leiste laeuft kantig durch - keine abgerundeten Aussenecken. */
@media (min-width: 1900px) {
  .hero__rail { border-radius: 0; }
  .hero__rail-item:first-child,
  .hero__rail-item:last-child { border-radius: 0; }
}

/* ==========================================================================
   Mobil: Hero-Bildkarte ohne Rand oben, links und rechts
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero { padding-top: 0; }
  .hero__stage {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    /* Hoehere Bildkarte, damit mehr vom Motiv zu sehen ist */
    min-height: clamp(15rem, 42svh, 20rem);
    /* Das Bild bleibt kantig - die Rundung sitzt in der weissen Flaeche,
       die sich darueber schiebt. */
    border-radius: 0;
  }
  /* Die weisse Flaeche laeuft ueber die volle Fensterbreite und schiebt
     sich mit gerundeter Oberkante ueber das Bild. Der seitliche Einzug des
     Textes (16px aus dem Raster) wird als Innenabstand nachgebildet. */
  .hero .about-teaser {
    position: relative;
    z-index: 2;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -1.25rem;
    padding: 1.4rem 16px 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
  }
}
/* ==========================================================================
   Mobil: keine Trennkante mehr. Das Foto laeuft ueber die volle Breite,
   links legt sich ein weicher schwarzer Verlauf darueber, damit Ueber-
   schrift und Lead sicher lesbar bleiben.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.82) 18%,
      rgba(0, 0, 0, 0.62) 38%,
      rgba(0, 0, 0, 0.32) 58%,
      rgba(0, 0, 0, 0.1) 76%,
      rgba(0, 0, 0, 0) 92%
    );
  }
  .hero__stage::after {
    left: 0;
    width: 100%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ==========================================================================
   Groessere Ueberschrift auf dem Desktop
   ========================================================================== */
@media (min-width: 1100px) {
  .hero h1 {
    font-size: clamp(2.8rem, 6.4vw, 5.4rem);
    line-height: 1.02;
  }
}

/* Flache Schirme: eine Stufe kleiner, aber groesser als bisher */
@media (min-width: 1100px) and (max-height: 1150px) {
  .hero h1 { font-size: clamp(2.5rem, 4.9vw, 4.2rem); }
}

@media (min-width: 1100px) and (max-width: 1499.98px) {
  .hero h1 { font-size: clamp(2.1rem, 4.1vw, 3.4rem); }
}

@media (min-width: 1100px) and (max-width: 1379.98px) {
  .hero h1 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
}

/* Mobil darf "Schadengutachten" an der weichen Trennstelle umbrechen */
@media (max-width: 1099.98px) {
  .hero__stage h1 { hyphens: manual; overflow-wrap: break-word; }
}

/* Mobil: Bildausschnitt nach rechts verschoben, damit das Fahrzeug mit dem
   Schaden im Bild steht und nicht nur der Ausschnitt rechts davon. */
@media (max-width: 1099.98px) {
  .hero__stage::after { background-position: 12% 38%; }
}

/* ==========================================================================
   Vertrauensleiste: seit der Kuerzung auf vier Merkmale lief das Raster noch
   auf sechs Spalten - rechts blieb ein Drittel der Karte leer. Vier gleiche
   Spalten fuellen die Karte jetzt bis zur Kante.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
  .hero__fact {
    padding: 0 clamp(1.1rem, 1.8vw, 1.9rem);
  }
  .hero__fact:first-child { padding-left: 0; }
  .hero__fact:last-child { padding-right: 0; }
  .hero__fact + .hero__fact {
    border-left: 1px solid var(--line) !important;
  }
  /* Die Zeilenumbrueche der Beschreibungen gleichmaessig verteilen */
  .hero__fact-title,
  .hero__fact-desc { text-wrap: pretty; }

}

/* Mittlere Breiten: zwei mal zwei statt einer angebrochenen dritten Spalte */
@media (min-width: 1100px) and (max-width: 1499.98px) {
  .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0 !important;
  }
  .hero__fact:nth-child(even) {
    padding-right: 0;
    border-left: 1px solid var(--line) !important;
  }
  .hero__fact:nth-child(n + 3) {
    margin-top: 1.15rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line);
  }
}

/* ==========================================================================
   Bilderreihe unter "Ueber mich": begutachtete Unfallfahrzeuge, ueber die
   volle Fensterbreite, in derselben Bildsprache wie die Leiste im Hero -
   entsaettigt mit dunkelblauer Markenlasur, beim Hovern in Farbe.
   ========================================================================== */
.crashband {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--brand-dark-flat);
  overflow: hidden;
}
/* Eine Reihe, die sich der Anzahl der Bilder anpasst: auf grossen Schirmen
   stehen alle nebeneinander, auf schmalen brechen sie um. Bewusst ohne
   eigenes Scrollen - sonst haengt das Mausrad ueber der Reihe fest. */
.crashband__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 50%), 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crashband__item {
  position: relative;
  height: clamp(7.5rem, 11vw, 12rem);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
@media (max-width: 699.98px) {
  .crashband__item { height: auto; aspect-ratio: 4 / 3; }
}
.crashband__item picture {
  display: block;
  position: absolute;
  inset: 0;
}
.crashband__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(0.94);
  transform: scale(1);
  transition: filter 0.45s var(--ease), transform 0.6s var(--ease);
}
.crashband__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--brand-dark-grad);
  opacity: 0.42;
  transition: opacity 0.45s var(--ease);
}
/* feine Fugen zwischen den Motiven */
.crashband__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.14);
}
@media (hover: hover) {
  /* gleicher Effekt wie in der Bilderleiste im Hero: die Kachel waechst,
     das erste Bild nach rechts, das letzte nach links. */
  .crashband__item:hover {
    z-index: 3;
    transform: scale(1.22);
    box-shadow: 0 22px 44px -20px rgba(9, 28, 62, 0.6);
  }
  .crashband__item:first-child:hover { transform-origin: left center; }
  .crashband__item:last-child:hover { transform-origin: right center; }
  .crashband__item:hover img { filter: none; }
  .crashband__item:hover::after { opacity: 0.16; }
}

/* ==========================================================================
   Merkmalleiste im selben Stil wie der Direktchat-Button: weiss, ohne
   Umrandung, nur ein leichter Schatten.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__facts {
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 10px 24px -16px rgba(9, 28, 62, 0.45);
  }
  /* Der zusaetzliche Platz im hoeheren Hero verteilt sich gleichmaessig auf
     die Abstaende, statt als Loch ueber der Leiste zu stehen. */
  .hero__text { justify-content: space-between; }
}

/* ==========================================================================
   Feinschliff Desktop-Hero: Inhalt eine Spur kleiner, dafuer mehr Luft zum
   Kopf, zum Folgeabschnitt, zur Bilderleiste und zur Fotokante.
   ========================================================================== */
@media (min-width: 1100px) {
  :root {
    /* Textspalte rueckt von der Bilderleiste weg ... */
    --content-left: max(clamp(3.4rem, 7vw, 10.5rem), calc((100vw - 100rem) / 2 + 1rem));
    /* Fotokante ruecken wir gleichzeitig ein Stueck nach rechts, damit die
       Textspalte durch den groesseren linken Abstand nicht schmaler wird. */
    --hero-media-space: clamp(21rem, 50vw, 56rem);
  }
  .hero__content {
    /* ... und bekommt oben wie unten Abstand zur Kante */
    padding-block: clamp(1rem, 2.2vh, 2.4rem);
  }

  .hero h1 { font-size: clamp(2.6rem, 5.9vw, 4.9rem); }
  .hero__eyebrow { font-size: 0.82rem; }
  .hero__lead {
    max-width: 46rem;
    font-size: 1.14rem;
    line-height: 1.55;
  }
  .hero .hero__rating-score { font-size: 1rem; }
  .hero .hero__rating-text { font-size: 0.88rem; }
  .hero .hero__rating-stars svg { width: 18px; height: 18px; }

  .hero .hero__cta .btn { min-height: 68px; }
  .hero .hero__cta .btn .btn__label { font-size: 0.96rem; }
  .hero .hero__cta .btn .btn__sub { font-size: 0.82rem; }
  .hero .hero__cta .btn--claim .btn__label { font-size: 0.96rem; }

  .hero__fact-ic { width: 2.3rem; height: 2.3rem; }
  .hero__fact-ic svg { width: 1.15rem; height: 1.15rem; }
  .hero__fact-title { font-size: 0.98rem; }
  .hero__fact-desc { font-size: 0.87rem; }
  .hero__facts { padding: clamp(1.2rem, 1.8vw, 1.7rem) clamp(1.2rem, 1.8vw, 1.75rem); }
}

@media (min-width: 1100px) and (max-height: 1150px) {
  .hero h1 { font-size: clamp(2.3rem, 4.5vw, 3.9rem); }
}
@media (min-width: 1100px) and (max-width: 1499.98px) {
  .hero h1 { font-size: clamp(2rem, 3.8vw, 3.15rem); }
}
@media (min-width: 1100px) and (max-width: 1379.98px) {
  .hero h1 { font-size: clamp(1.8rem, 3.3vw, 2.8rem); }
}

/* ==========================================================================
   Abschnitt "Schadengutachten": Foto links, Text rechts schon auf Tablets
   und breiteren Telefonen - bisher standen beide erst ab 980px nebeneinander
   und darunter untereinander.
   ========================================================================== */
@media (min-width: 640px) and (max-width: 979.98px) {
  .explain {
    grid-template-columns: 0.82fr 1.18fr;
    align-items: start;
    gap: clamp(1.1rem, 3vw, 1.9rem);
  }
  .explain__media img { aspect-ratio: 4 / 5; }
  .explain__stamp {
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.74rem;
  }
  .explain__list > li { grid-template-columns: 34px 1fr; gap: 0.8rem; }
  .explain__list-icon { width: 34px; height: 34px; }
  .explain__list-icon svg { width: 17px; height: 17px; }
}

/* ==========================================================================
   Schadengutachten auf dem Desktop: Foto und Textspalte oben buendig, das
   Hochformat nicht mehr turmhoch - vorher stand der Text mittig neben einem
   sehr hohen Bild, mit viel Leerraum darueber und darunter.
   ========================================================================== */
@media (min-width: 980px) {
  .explain {
    /* Die Bildspalte bekommt eine feste Obergrenze - vorher war das Foto
       ueber 750px hoch, waehrend der Text schon nach 500px endete. */
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .explain__media img { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   Flache Fenster: der Hero war dort nicht durch die Mindesthoehe, sondern
   durch den Inhalt selbst zu hoch. Deshalb hier eine kompaktere Stufe.
   ========================================================================== */
@media (min-width: 1100px) and (max-height: 1150px) {
  .hero__content { padding-block: clamp(0.6rem, 1.2vh, 1.4rem); }
  .hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.5rem); line-height: 1.04; }
  .hero__lead { font-size: 1.06rem; line-height: 1.5; }
  .hero .hero__rating { margin-block: 0.7rem; padding: 0.45rem 0.85rem 0.45rem 0.55rem; }
  .hero .hero__cta .btn { min-height: 60px; padding-block: 0.6rem; }
  .hero__facts { padding: clamp(1rem, 1.5vw, 1.35rem) clamp(1.05rem, 1.6vw, 1.45rem); }
  .hero__fact-ic { width: 2.1rem; height: 2.1rem; }
  .hero__fact-ic svg { width: 1.05rem; height: 1.05rem; }
  .hero__fact-title { font-size: 0.94rem; }
  .hero__fact-desc { font-size: 0.84rem; line-height: 1.42; }
}

/* ==========================================================================
   Mobiler Hero, Neuaufbau: erster Bildschirm ist ein Vollbild-Foto mit
   grosser Schlagzeile und den beiden wichtigsten Aktionen. Erst darunter
   beginnt der weisse Inhaltsbereich.
   ========================================================================== */
@media (max-width: 1099.98px) {
  :root {
    /* Hoehe des ersten Bildschirms abzueglich der Kopfleiste */
    --mhero-h: calc(100svh - 3rem);
    /* Platz, den die beiden Buttons unter der Schlagzeile brauchen */
    --mhero-cta: 9.75rem;
    /* Hoehe des Fotobands oben; darunter traegt die dunkelblaue Flaeche */
    --mhero-photo: clamp(14rem, 44svh, 23rem);
  }

  .hero {
    padding-top: 0;
    background: #fff;
  }

  /* Die Buttons werden einzelne Kinder der Textspalte, damit sie sich
     einzeln einsortieren lassen: zwei aufs Foto, zwei darunter. */
  .hero .hero__cta { display: contents; }
  .hero__text { display: flex; flex-direction: column; }

  /* --- Bildbuehne ueber den ganzen ersten Bildschirm --- */
  .hero__stage {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Der Text sitzt mittig in der blauen Flaeche unter dem Foto */
    justify-content: center;
    overflow: visible;
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    min-height: calc(var(--mhero-h) - var(--mhero-cta));
    padding: var(--mhero-photo) 16px 0.85rem;
    border-radius: 0;
  }
  /* Die unsichtbaren Sprungflaechen wuerden jetzt den halben Bildschirm
     abdecken - auf dem Handy fuehren die Buttons durch die Seite. */
  .hero__stage-hit { display: none; }

  /* Foto und Verlauf laufen ueber die Buttons hinweg bis zum Bildschirmende */
  .hero__stage::after {
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--mhero-photo);
    background-color: transparent;
    background-position: 38% 42%;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0 50%,
      rgba(0, 0, 0, 0.62) 72%,
      rgba(0, 0, 0, 0.18) 89%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 0 50%,
      rgba(0, 0, 0, 0.62) 72%,
      rgba(0, 0, 0, 0.18) 89%,
      transparent 100%
    );
  }
  .hero__stage::before {
    z-index: -2;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--mhero-h);
    background:
      radial-gradient(120% 55% at 50% 0%, rgba(1, 46, 122, 0.5) 0%, rgba(0, 20, 58, 0) 72%),
      linear-gradient(180deg, #001a4e 0%, #001338 52%, #010c1f 100%);
  }

  /* --- Typografie auf dem Foto --- */
  .hero__stage .hero__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    margin: 0 0 0.85rem;
    padding: 0.34rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 0.68rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: none;
  }
  .hero__stage .hero__eyebrow-line { display: none; }
  .hero__stage .hero__eyebrow-extra { display: none; }

  .hero__stage h1 {
    margin-bottom: 0.7rem;
    font-size: clamp(1.95rem, 8.2vw, 2.7rem);
    line-height: 1.03;
    letter-spacing: -0.022em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(2, 10, 24, 0.6);
  }
  .hero__stage .hero__lead {
    max-width: 30rem;
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.5;
    color: rgba(238, 244, 252, 0.95);
    text-shadow: 0 1px 12px rgba(2, 10, 24, 0.55);
  }

  /* --- Die beiden Aktionen liegen noch auf dem Foto --- */
  .hero .hero__cta .btn--claim {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
    margin: 0 0 0.6rem;
    padding: 0.85rem 1.1rem;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(180deg, #0a55d6 0%, var(--accent) 60%, var(--accent-deep) 100%);
    box-shadow: 0 10px 26px -12px rgba(1, 72, 195, 0.75);
    color: #fff;
  }
  .hero .hero__cta .btn--claim .btn__label {
    font-size: 1.02rem;
    font-weight: var(--fw-bold);
    color: #fff;
  }
  .hero .hero__cta .btn--claim .btn__sub { color: rgba(255, 255, 255, 0.82); }
  .hero .hero__cta .btn--claim .btn__ic,
  .hero .hero__cta .btn--claim .btn__chev { color: #fff; }
  .hero .hero__cta .btn--claim .btn__chev { margin-left: auto; }
  .hero .hero__cta .btn--primary {
    order: 3;
    margin: 0 0 1rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
  }
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--primary {
    width: 100%;
    min-height: 56px;
  }
  .hero .hero__cta .btn--primary .btn__text {
    display: flex;
    align-items: center;
  }
  .hero .hero__cta .btn--primary .btn__label,
  .hero .hero__cta .btn--primary .btn__hours,
  .hero .hero__cta .btn--primary .btn__chev { display: none; }
  .hero .hero__cta .btn--primary .btn__sub {
    display: block;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: #fff;
  }
  .hero .hero__cta .btn--primary svg { color: #fff; }

  /* --- Ab hier der weisse Bereich --- */
  .hero .about-teaser {
    order: 4;
    margin-top: 0;
  }
  .hero .hero__cta .btn--wa { order: 5; margin-top: 0.75rem; }
  .hero .hero__cta .btn--direkt { order: 6; margin-top: 0.6rem; }
  .hero .hero__cta .btn--wa,
  .hero .hero__cta .btn--direkt { width: 100%; }
}

/* ==========================================================================
   Mobiler Hero, helle Fassung: kleineres Fotoband mit harter Unterkante,
   darunter eine helle Flaeche mit dunkler Schrift. Passt zum Desktop-Hero,
   der ebenfalls weiss ist, und laesst den blauen CTA als lautestes Element
   stehen.
   ========================================================================== */
@media (max-width: 1099.98px) {
  :root {
    --mhero-photo: clamp(10rem, 31svh, 15.5rem);
    --mhero-cta: 9.75rem;
  }

  /* Foto: harte Kante, keine Maske */
  .hero__stage::after {
    height: var(--mhero-photo);
    background-position: 40% 44%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Flaeche darunter: sehr helles Blaugrau, damit sich die weisse Karte
     darunter noch abhebt */
  .hero__stage::before {
    background: linear-gradient(180deg, #eaf0f8 0%, #f4f8fc 62%, #f7fafd 100%);
  }

  /* Kompakter Block: kein Loch mehr zwischen Lead und Buttons */
  .hero__stage {
    justify-content: flex-start;
    min-height: 0;
    padding: calc(var(--mhero-photo) + 1.9rem) 16px 1.15rem;
  }

  /* Schrift auf hellem Grund */
  .hero__stage .hero__accent { color: var(--accent); }
  .hero__stage .hero__eyebrow {
    border-color: transparent;
    background: var(--accent-soft);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--accent-deep);
  }
  .hero__stage h1 {
    color: var(--ink);
    text-shadow: none;
  }
  .hero__stage .hero__lead {
    color: var(--ink-soft);
    text-shadow: none;
  }

  /* Telefon-Button hell wie der Direktchat-Button */
  .hero .hero__cta .btn--primary {
    border: 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 10px 24px -16px rgba(9, 28, 62, 0.45);
  }
  .hero .hero__cta .btn--primary .btn__sub { color: var(--ink); }
  .hero .hero__cta .btn--primary .btn__ic,
  .hero .hero__cta .btn--primary .btn__ic svg { color: var(--accent); }

  /* Die weisse Karte hebt sich jetzt vom hellblauen Hero ab */
  .hero .about-teaser {
    background: #fff;
    box-shadow: 0 -14px 30px -26px rgba(9, 28, 62, 0.5);
  }
}

/* ==========================================================================
   Mobile Aktionen: alle vier Wege stehen zusammen direkt unter dem Text.
   WhatsApp stand vorher weit unter der Info-Karte und war praktisch
   unsichtbar.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero .hero__cta {
    display: grid;
    order: 2;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    width: 100%;
    margin: 0 0 0.2rem;
  }
  .hero .hero__cta .btn--claim {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    min-height: 56px;
  }
  .hero .hero__cta .btn--primary {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    min-height: 50px;
  }
  .hero .hero__cta .btn--wa {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    min-height: 50px;
  }
  .hero .hero__cta .btn--direkt {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
    min-height: 46px;
  }
  .hero .hero__cta .btn--primary,
  .hero .hero__cta .btn--wa,
  .hero .hero__cta .btn--direkt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    border-radius: 14px;
  }
  /* Beschriftungen einzeilig halten */
  .hero .hero__cta .btn--wa .btn__label,
  .hero .hero__cta .btn--direkt .btn__label {
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
  }
  .hero .hero__cta .btn--wa .btn__sub,
  .hero .hero__cta .btn--direkt .btn__sub,
  .hero .hero__cta .btn--wa .btn__chev,
  .hero .hero__cta .btn--direkt .btn__chev { display: none; }
  .hero .hero__cta .btn--direkt {
    border: 0;
    background: #fff;
    color: var(--ink);
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 10px 24px -16px rgba(9, 28, 62, 0.45);
  }
  .hero .hero__cta .btn--direkt .btn__label { color: var(--ink); }
  .hero .hero__cta .btn--direkt .btn__ic,
  .hero .hero__cta .btn--direkt .btn__ic svg { color: var(--accent); }

  .hero .about-teaser { order: 3; margin-top: 1.15rem; }
}

/* ==========================================================================
   Mobile Aktionen schlicht und reduziert: ein Hauptbutton, zwei gleichrangige
   Alternativen daneben, der Direktchat nur noch als leiser Textlink.
   Keine Verlaeufe, keine tiefen Schatten.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero .hero__cta { gap: 0.5rem; }

  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--primary,
  .hero .hero__cta .btn--wa {
    border-radius: 12px;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
  }

  .hero .hero__cta .btn--claim {
    background-color: var(--accent);
    min-height: 54px;
  }
  .hero .hero__cta .btn--claim .btn__label { font-weight: var(--fw-semibold); }

  .hero .hero__cta .btn--primary {
    background-color: #fff;
    border: 1px solid var(--line);
    min-height: 48px;
  }

  .hero .hero__cta .btn--wa {
    background-color: #1f9d5c;
    border: 0;
    min-height: 48px;
  }

  /* Direktchat: kein dritter Button mehr, sondern ein Textlink */
  .hero .hero__cta .btn--direkt {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 0;
    margin: 0.35rem 0 0;
    padding: 0.2rem;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn--direkt .btn__label {
    font-size: 0.88rem;
    font-weight: var(--fw-semibold);
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .hero .hero__cta .btn--direkt .btn__ic,
  .hero .hero__cta .btn--direkt .btn__ic svg {
    width: 15px;
    height: 15px;
    color: var(--accent-deep);
  }
}

/* ==========================================================================
   Mobile Aktionen final: Telefon ist der Hauptweg, Schadenmeldung und
   WhatsApp stehen gleichrangig als leise Alternativen darunter.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--direkt { display: none; }

  /* Telefon primaer */
  .hero .hero__cta .btn--primary {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 54px;
    border: 0;
    background-color: var(--accent);
    background-image: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn--primary .btn__sub {
    font-size: 1.02rem;
    font-weight: var(--fw-semibold);
    color: #fff;
  }
  .hero .hero__cta .btn--primary .btn__ic,
  .hero .hero__cta .btn--primary .btn__ic svg { color: #fff; }

  /* Schadenmeldung und WhatsApp sekundaer */
  .hero .hero__cta .btn--claim {
    grid-column: 1;
    grid-row: 2;
    min-height: 48px;
    border: 1px solid var(--line);
    background-color: #fff;
    background-image: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn--claim .btn__label {
    font-size: 0.92rem;
    font-weight: var(--fw-semibold);
    color: var(--ink);
  }
  .hero .hero__cta .btn--claim .btn__ic,
  .hero .hero__cta .btn--claim .btn__ic svg { color: var(--accent); }
  .hero .hero__cta .btn--claim .btn__sub,
  .hero .hero__cta .btn--claim .btn__chev { display: none; }

  .hero .hero__cta .btn--wa {
    grid-column: 2;
    grid-row: 2;
    min-height: 48px;
    border: 1px solid var(--line);
    background-color: #fff;
    background-image: none;
    box-shadow: none;
  }
  .hero .hero__cta .btn--wa .btn__label {
    font-size: 0.92rem;
    font-weight: var(--fw-semibold);
    color: var(--ink);
  }
  .hero .hero__cta .btn--wa .btn__ic,
  .hero .hero__cta .btn--wa .btn__ic svg { color: #1f9d5c; }
}

/* Sekundaerzeile: zwei exakt gleiche Spalten, Beschriftung darf umbrechen */
@media (max-width: 1099.98px) {
  .hero .hero__cta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa {
    min-height: 52px;
    padding: 0.5rem 0.6rem;
    gap: 0.4rem;
  }
  .hero .hero__cta .btn--claim .btn__text,
  .hero .hero__cta .btn--wa .btn__text { min-width: 0; }
  .hero .hero__cta .btn--claim .btn__label,
  .hero .hero__cta .btn--wa .btn__label {
    font-size: 0.86rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;
  }
}

/* ==========================================================================
   Mobil: Merkmale mit Haken links, Kontaktbuttons rechts - beides in einer
   Reihe direkt unter dem Hero-Text. Die Liste steht jetzt als eigenes
   Element in der Textspalte, deshalb auf dem Desktop ausblenden.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__text > .hero__checks { display: none; }
}

@media (max-width: 1099.98px) {
  .hero__text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0.8rem;
    align-items: start;
  }
  .hero__stage,
  .hero .about-teaser { grid-column: 1 / -1; }

  .hero__text > .hero__checks {
    grid-column: 1;
    order: 2;
    /* Die Farbflaeche der Bildbuehne reicht ueber diese Zeile hinweg und
       liegt als positioniertes Element darueber - deshalb hier anheben. */
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .hero__text > .hero__checks li {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--ink-soft);
    text-align: left;
  }
  .hero__text > .hero__checks .about-teaser__check {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 0.05rem 0 0;
    color: var(--accent);
  }
  .hero__text > .hero__checks .about-teaser__check svg { width: 14px; height: 14px; }

  /* Buttons rechts, alle gleich gross */
  .hero .hero__cta {
    grid-column: 2;
    order: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    margin: 0;
  }
  .hero .hero__cta .btn--primary,
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa {
    grid-column: 1;
    width: 100%;
    min-height: 46px;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
  }
  .hero .hero__cta .btn--primary { grid-row: 1; }
  .hero .hero__cta .btn--claim { grid-row: 2; }
  .hero .hero__cta .btn--wa { grid-row: 3; }
  .hero .hero__cta .btn--primary .btn__sub,
  .hero .hero__cta .btn--claim .btn__label,
  .hero .hero__cta .btn--wa .btn__label {
    font-size: 0.86rem;
    line-height: 1.2;
  }

  .hero .about-teaser { order: 3; margin-top: 1.3rem; }
}

/* Alle drei Kontaktbuttons exakt gleich hoch */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary,
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa {
    height: 54px;
    min-height: 54px;
    padding: 0.4rem 0.65rem;
  }
  .hero .hero__cta .btn--primary .btn__sub,
  .hero .hero__cta .btn--claim .btn__label,
  .hero .hero__cta .btn--wa .btn__label {
    font-size: 0.82rem;
    line-height: 1.2;
  }
}

/* ==========================================================================
   Google-Bewertung steht mobil direkt unter der Reihe aus Merkmalen und
   Buttons. Auf dem Desktop uebernimmt die eigene Fassung im Textblock.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__text > .hero__rating--mob { display: none; }
}

@media (max-width: 1099.98px) {
  .hero__text > .hero__rating--mob {
    grid-column: 1 / -1;
    order: 2;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-self: start;
    justify-self: start;
    margin: 1.05rem 0 0;
    padding: 0.45rem 0.85rem 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
  }
}

/* CTAs: kantiger, ohne Umrandung, nur ein leichter Schatten */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary,
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa {
    border: 0;
    border-radius: 8px;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.07),
      0 8px 20px -14px rgba(9, 28, 62, 0.45);
  }
}

/* Feste Zeilenzuordnung, damit Merkmale und Buttons wirklich nebeneinander
   stehen und die Bewertung darunter landet */
@media (max-width: 1099.98px) {
  .hero__stage { grid-row: 1; grid-column: 1 / -1; }
  .hero__text > .hero__checks { grid-row: 2; grid-column: 1; }
  .hero .hero__cta { grid-row: 2; grid-column: 2; }
  .hero__text > .hero__rating--mob { grid-row: 3; grid-column: 1 / -1; }
  .hero .about-teaser { grid-row: 4; grid-column: 1 / -1; }
}

/* Die helle Flaeche schiebt sich mit gerundeter Oberkante ueber das Foto */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    top: calc(var(--mhero-photo) - 1.35rem);
    height: calc(var(--mhero-h) - var(--mhero-photo) + 1.35rem);
    border-radius: 22px 22px 0 0;
  }
  .hero__stage {
    padding-top: calc(var(--mhero-photo) + 1.5rem);
  }
}

/* Die helle Flaeche liegt jetzt ueber dem Foto, sonst waere die Rundung
   davon verdeckt */
@media (max-width: 1099.98px) {
  .hero__stage::after { z-index: -2; }
  .hero__stage::before { z-index: -1; }
}

/* Fotoband mobil noch eine Stufe flacher */
@media (max-width: 1099.98px) {
  :root { --mhero-photo: clamp(8.5rem, 25svh, 13rem); }
}

/* Die gerundete Oberkante liegt als Milchglas ueber dem Foto: oben
   halbtransparent mit Unschaerfe, nach unten in die volle Flaeche laufend */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    top: calc(var(--mhero-photo) - 2.3rem);
    height: calc(var(--mhero-h) - var(--mhero-photo) + 2.3rem);
    border-radius: 22px 22px 0 0;
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    background: linear-gradient(
      180deg,
      rgba(238, 243, 250, 0.42) 0,
      rgba(238, 243, 250, 0.72) 1.6rem,
      rgba(238, 243, 250, 0.95) 2.9rem,
      #edf2f9 3.8rem,
      #f4f8fc 55%,
      #f7fafd 100%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  }
  .hero__stage { padding-top: calc(var(--mhero-photo) + 1.6rem); }
}

/* ==========================================================================
   Mobiler Hero, Premium-Fassung nach Vorlage
   Foto oben, Milchglaskante, grosse Typografie, Anruf-Karte, Merkmalkarte
   mit Symbolen, zwei Aktionskarten, Bewertungskarte.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__badge { display: none; }
}

@media (max-width: 1099.98px) {
  :root {
    --mhero-photo: clamp(11rem, 33svh, 17rem);
    --m-card: 0 1px 2px rgba(16, 33, 54, 0.05), 0 18px 34px -24px rgba(9, 28, 62, 0.4);
    --m-line: #e4eaf3;
  }

  /* --- Kopfbereich: Menue als blaue Kachel --- */
  .site-burger {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--brand-dark-flat);
    box-shadow: 0 10px 24px -14px rgba(0, 24, 72, 0.8);
  }
  .site-burger span,
  .site-burger span::before,
  .site-burger span::after { background: #fff; }

  /* --- Label oben links auf dem Foto --- */
  .hero__stage .hero__eyebrow {
    position: absolute;
    top: 1rem;
    left: 16px;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-shadow: 0 1px 10px rgba(2, 10, 24, 0.7);
  }

  /* --- Vertrauens-Badge unten links auf dem Foto --- */
  .hero__badge {
    position: absolute;
    left: 0;
    top: calc(var(--mhero-photo) - 4.9rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1rem 0.6rem 0.85rem;
    border-radius: 0 16px 16px 0;
    background: var(--brand-dark-flat);
    box-shadow: 0 16px 30px -20px rgba(0, 20, 58, 0.9);
    color: #fff;
  }
  .hero__badge-ic {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    color: #fff;
  }
  .hero__badge-ic svg { width: 26px; height: 26px; }
  .hero__badge-tx {
    display: block;
    font-size: 0.68rem;
    line-height: 1.28;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(226, 235, 248, 0.85);
  }
  .hero__badge-tx b { display: block; font-weight: var(--fw-bold); color: #fff; }

  /* --- Ueberschrift --- */
  .hero__stage h1 {
    position: relative;
    margin-bottom: 1.35rem;
    padding-bottom: 0.9rem;
    font-size: clamp(2rem, 8.6vw, 2.85rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
  }
  .hero__stage h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3.4rem;
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
  }
  .hero__stage .hero__lead {
    font-size: 1rem;
    line-height: 1.58;
    color: var(--ink-soft);
  }
  .hero__hl { color: var(--accent-deep); font-weight: var(--fw-bold); }

  /* --- Anruf-Karte --- */
  .hero .hero__cta {
    grid-row: 2;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    margin: 1.35rem 0 0;
  }
  .hero .hero__cta .btn--primary {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    height: auto;
    min-height: 78px;
    padding: 0.9rem 1.1rem;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(180deg, #0b53cf 0%, var(--accent) 100%);
    box-shadow: 0 18px 34px -20px rgba(1, 72, 195, 0.85);
  }
  .hero .hero__cta .btn--primary .btn__ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #fff;
  }
  .hero .hero__cta .btn--primary .btn__ic svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
  }
  .hero .hero__cta .btn--primary .btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-width: 0;
  }
  .hero .hero__cta .btn--primary .btn__sub {
    display: block;
    order: 1;
    font-size: 1.06rem;
    font-weight: var(--fw-bold);
    color: #fff;
  }
  .hero .hero__cta .btn--primary .btn__label {
    display: block;
    order: 2;
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: rgba(255, 255, 255, 0.82);
  }
  .hero .hero__cta .btn--primary .btn__hours { display: none; }
  .hero .hero__cta .btn--primary .btn__chev {
    display: block;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.9);
  }
  .hero .hero__cta .btn--primary .btn__chev svg { width: 20px; height: 20px; }

  /* --- Merkmalkarte --- */
  .hero__text > .hero__checks {
    grid-row: 3;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 1.1rem 0 0;
    padding: 0.35rem 0.25rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--m-card);
  }
  .hero__text > .hero__checks li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 0.4rem;
    padding: 1rem 0.7rem;
    text-align: center;
  }
  .hero__text > .hero__checks li:nth-child(odd) {
    border-right: 1px solid var(--m-line);
  }
  .hero__text > .hero__checks li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--m-line);
  }
  .hero__check-ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-deep);
  }
  .hero__check-ic svg { width: 23px; height: 23px; }
  .hero__check-tt {
    font-size: 0.9rem;
    font-weight: var(--fw-bold);
    line-height: 1.22;
    color: var(--ink);
  }
  .hero__check-sub {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--muted);
  }

  /* --- Zwei Aktionskarten --- */
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa {
    grid-row: 4;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "ic tx" "ic sub";
    align-items: center;
    gap: 0.15rem 0.7rem;
    height: auto;
    min-height: 0;
    padding: 1rem;
    border: 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--m-card);
    text-align: left;
  }
  .hero .hero__cta .btn--claim { grid-column: 1; }
  .hero .hero__cta .btn--wa { grid-column: 2; }
  .hero .hero__cta .btn--claim .btn__ic,
  .hero .hero__cta .btn--wa .btn__ic {
    grid-area: ic;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
  }
  .hero .hero__cta .btn--claim .btn__ic { background: var(--accent-soft); color: var(--accent-deep); }
  .hero .hero__cta .btn--wa .btn__ic { background: #e6f6ec; color: #1f9d5c; }
  .hero .hero__cta .btn--claim .btn__ic svg,
  .hero .hero__cta .btn--wa .btn__ic svg { width: 22px; height: 22px; }
  .hero .hero__cta .btn--claim .btn__text,
  .hero .hero__cta .btn--wa .btn__text {
    grid-area: tx;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }
  .hero .hero__cta .btn--claim .btn__label,
  .hero .hero__cta .btn--wa .btn__label {
    font-size: 0.92rem;
    font-weight: var(--fw-bold);
    line-height: 1.22;
    color: var(--ink);
    white-space: normal;
    text-align: left;
  }
  .hero .hero__cta .btn--claim .btn__sub,
  .hero .hero__cta .btn--wa .btn__sub {
    display: block;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--muted);
  }
  .hero .hero__cta .btn--claim .btn__chev,
  .hero .hero__cta .btn--wa .btn__chev {
    display: none;
  }

  /* --- Bewertungskarte --- */
  .hero__text > .hero__rating--mob {
    grid-row: 5;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    justify-self: stretch;
    margin: 0.85rem 0 0;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--m-card);
  }
  .hero__text > .hero__rating--mob .hero__rating-stars svg {
    width: 19px;
    height: 19px;
    color: #f5a623;
  }
  .hero__text > .hero__rating--mob .hero__rating-score {
    font-size: 1.15rem;
    font-weight: var(--fw-bold);
    color: var(--ink);
  }
  .hero__text > .hero__rating--mob .hero__rating-text {
    font-size: 0.82rem;
    color: var(--muted);
  }

  .hero .about-teaser { grid-row: 6; margin-top: 1.6rem; }
}

/* Ab Tablet passen die vier Merkmale in eine Reihe */
@media (min-width: 560px) and (max-width: 1099.98px) {
  .hero__text > .hero__checks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__text > .hero__checks li:nth-child(-n + 2) { border-bottom: 0; }
  .hero__text > .hero__checks li:nth-child(odd) { border-right: 0; }
  .hero__text > .hero__checks li + li { border-left: 1px solid var(--m-line); }
}

/* Korrekturen zur Premium-Fassung */
@media (max-width: 1099.98px) {
  /* Die H1 darf keinen eigenen Positionskontext bilden, sonst haengt das
     Label darin fest statt oben auf dem Foto */
  .hero__stage h1 { position: static; padding-bottom: 0; }
  .hero__stage h1::after {
    content: "";
    position: static;
    display: block;
    width: 3.4rem;
    height: 4px;
    margin: 0.95rem 0 0;
    border-radius: 2px;
    background: var(--accent);
  }

  /* Hervorhebungen im Lead */
  .hero__stage .hero__lead .hero__hl,
  .hero__stage .hero__lead strong {
    color: var(--accent-deep);
    font-weight: var(--fw-bold);
    text-shadow: none;
  }

  /* Aktionsraster: Anrufkarte ueber beide Spalten */
  .hero .hero__cta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
  }
  .hero .hero__cta .btn--primary { grid-column: 1 / -1; grid-row: 1; }
  .hero .hero__cta .btn--claim { grid-column: 1; grid-row: 2; }
  .hero .hero__cta .btn--wa { grid-column: 2; grid-row: 2; }

  /* Aktionskarten: Symbol oben, Text darunter - passt in die halbe Breite */
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.65rem;
    padding: 1rem 0.95rem 1.05rem;
  }
  .hero .hero__cta .btn--claim .btn__label,
  .hero .hero__cta .btn--wa .btn__label { font-size: 0.9rem; }
  .hero .hero__cta .btn--claim .btn__sub,
  .hero .hero__cta .btn--wa .btn__sub { font-size: 0.74rem; }
}

/* Reihenfolge nach Vorlage: Anrufkarte, Merkmale, zwei Aktionskarten,
   Bewertung. Dafuer loesen wir den CTA-Container wieder auf. */
@media (max-width: 1099.98px) {
  .hero .hero__cta { display: contents; }

  .hero .hero__cta .btn--primary {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 1.35rem 0 0;
  }
  .hero__text > .hero__checks { grid-row: 3; margin-top: 1rem; }
  .hero .hero__cta .btn--claim {
    grid-row: 4;
    grid-column: 1;
    margin-top: 0.85rem;
  }
  .hero .hero__cta .btn--wa {
    grid-row: 4;
    grid-column: 2;
    margin-top: 0.85rem;
  }
  .hero__text > .hero__rating--mob { grid-row: 5; margin-top: 0.85rem; }
  .hero .about-teaser { grid-row: 6; }

  /* Bewertungszeile einzeilig halten */
  .hero__text > .hero__rating--mob { gap: 0.45rem; padding: 0.8rem 0.9rem; }
  .hero__text > .hero__rating--mob .hero__rating-stars svg { width: 17px; height: 17px; }
  .hero__text > .hero__rating--mob .hero__rating-score { font-size: 1.05rem; }
  .hero__text > .hero__rating--mob .hero__rating-text { font-size: 0.76rem; }
}

/* Beide Aktionskarten gleich hoch */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa { align-self: stretch; }
}

/* Kein Milchglas, keine gerundete Oberkante der Flaeche - stattdessen ist
   das Foto unten leicht abgerundet, wie in der Vorlage. */
@media (max-width: 1099.98px) {
  .hero__stage::after {
    z-index: -1;
    top: 0;
    height: var(--mhero-photo);
    border-radius: 0 0 26px 26px;
  }
  .hero__stage::before {
    z-index: -2;
    top: 0;
    height: var(--mhero-h);
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    background: linear-gradient(180deg, #eaf0f8 0%, #f4f8fc 58%, #f7fafd 100%);
  }
  .hero__stage { padding-top: calc(var(--mhero-photo) + 1.7rem); }
}

/* Foto mit durchgehend geschwungener Unterkante, dahinter eine zweite,
   hellblaue Rundung, die unten leicht hervorschaut. */
@media (max-width: 1099.98px) {
  .hero { background: #f2f6fb; }

  /* Fotoschicht */
  .hero__stage::after {
    z-index: -1;
    top: 0;
    height: var(--mhero-photo);
    border-radius: 0 0 50% 50% / 0 0 36px 36px;
  }
  /* Hellblaue Rundung dahinter */
  .hero__stage::before {
    z-index: -2;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mhero-photo) + 18px);
    background: #d8e6f8;
    border-radius: 0 0 50% 50% / 0 0 48px 48px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .hero__stage { padding-top: calc(var(--mhero-photo) + 2.2rem); }
}

/* Die Buehne selbst traegt keine Farbe mehr - der Hero-Hintergrund reicht */
@media (max-width: 1099.98px) {
  .hero__stage { background-color: transparent; }
}

/* ==========================================================================
   Fotokante als leichte Schraege mit zwei Akzentlinien - dieselbe Sprache
   wie die Kante am Desktop-Foto. Kante und Linien laufen im selben Winkel
   und derselben Box, dadurch bleiben sie auf jeder Breite parallel.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__stage::after {
    z-index: -2;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mhero-photo) + 40px);
    border-radius: 0;
    -webkit-mask-image: linear-gradient(184deg, #000 0 86%, rgba(0, 0, 0, 0) 86.15%);
    mask-image: linear-gradient(184deg, #000 0 86%, rgba(0, 0, 0, 0) 86.15%);
  }
  .hero__stage::before {
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mhero-photo) + 40px);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(
        184deg,
        rgba(143, 180, 238, 0) 86.6%,
        rgba(143, 180, 238, 0.9) 86.75%,
        rgba(143, 180, 238, 0.9) 87.05%,
        rgba(143, 180, 238, 0) 87.2%
      ),
      linear-gradient(
        184deg,
        rgba(1, 72, 195, 0) 88.4%,
        rgba(1, 72, 195, 0.75) 88.55%,
        rgba(1, 72, 195, 0.75) 88.8%,
        rgba(1, 72, 195, 0) 88.95%
      );
  }
  .hero__stage { padding-top: calc(var(--mhero-photo) + 2.4rem); }
}

/* Linienpaar etwas dezenter und enger beieinander */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background:
      linear-gradient(
        184deg,
        rgba(255, 255, 255, 0) 86.45%,
        rgba(255, 255, 255, 0.85) 86.6%,
        rgba(255, 255, 255, 0.85) 86.85%,
        rgba(255, 255, 255, 0) 87%
      ),
      linear-gradient(
        184deg,
        rgba(143, 180, 238, 0) 87.6%,
        rgba(143, 180, 238, 0.85) 87.75%,
        rgba(143, 180, 238, 0.85) 88%,
        rgba(143, 180, 238, 0) 88.15%
      );
  }
}

/* ==========================================================================
   Zusaetzliche blaue Form hinter dem Foto: gleiche Idee wie die Rundung
   vorher, nur angeschraegt. Sie liegt eine Ebene tiefer als das Foto und
   schaut unterhalb der Schnittkante als Keil hervor.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text { position: relative; }
  .hero__text::before {
    content: "";
    position: absolute;
    z-index: -3;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mhero-photo) + 40px);
    pointer-events: none;
    background: linear-gradient(180deg, #0d3f92 0%, #06265f 100%);
    -webkit-mask-image: linear-gradient(181deg, #000 0 89.6%, rgba(0, 0, 0, 0) 89.75%);
    mask-image: linear-gradient(181deg, #000 0 89.6%, rgba(0, 0, 0, 0) 89.75%);
  }
}

/* Der Keil laeuft ueber die ganze Breite und verjuengt sich sanft */
@media (max-width: 1099.98px) {
  .hero__text::before {
    -webkit-mask-image: linear-gradient(182.6deg, #000 0 90.4%, rgba(0, 0, 0, 0) 90.55%);
    mask-image: linear-gradient(182.6deg, #000 0 90.4%, rgba(0, 0, 0, 0) 90.55%);
  }
}

/* ==========================================================================
   Fotokante, ruhige Fassung: unter der Schraege liegt ein gleichmaessig
   breites Band in Mintblau, oben von einer feinen Linie begrenzt. Band und
   Kante haben denselben Winkel, dadurch bleibt die Breite konstant.
   ========================================================================== */
@media (max-width: 1099.98px) {
  /* Der blaue Keil dahinter entfaellt */
  .hero__text::before { display: none; }

  .hero__stage::before {
    background: linear-gradient(
      184deg,
      rgba(0, 0, 0, 0) 0 86%,
      rgba(118, 186, 193, 0.75) 86.05%,
      rgba(118, 186, 193, 0.75) 86.35%,
      #d3eaec 86.4%,
      #e4f3f4 89.6%,
      rgba(0, 0, 0, 0) 89.7%
    );
  }
}

/* Mintband kraeftiger, damit es als Gestaltungselement liest */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: linear-gradient(
      184deg,
      rgba(0, 0, 0, 0) 0 86%,
      rgba(74, 158, 168, 0.9) 86.05%,
      rgba(74, 158, 168, 0.9) 86.4%,
      #b3dee2 86.45%,
      #cfebed 90.2%,
      rgba(0, 0, 0, 0) 90.3%
    );
  }
}

/* Ohne die feine Linie an der Oberkante - nur das Mintband */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: linear-gradient(
      184deg,
      rgba(0, 0, 0, 0) 0 86%,
      #b3dee2 86.05%,
      #cfebed 90.2%,
      rgba(0, 0, 0, 0) 90.3%
    );
  }
}

/* Kein Farbband mehr - das Foto wirft einfach einen weichen Schatten auf
   die Flaeche darunter. Der Schatten folgt der Maske, also der Schraege. */
@media (max-width: 1099.98px) {
  .hero__stage::before { background: none; }
  .hero__stage::after {
    filter: drop-shadow(0 7px 14px rgba(9, 28, 62, 0.3));
  }
}

/* Der Schatten wird gezeichnet, nicht gefiltert: eine Maske schneidet einen
   drop-shadow wieder weg, deshalb liegt er als weicher Verlauf direkt unter
   der Schnittkante. */
@media (max-width: 1099.98px) {
  .hero__stage::after { filter: none; }
  .hero__stage::before {
    background: linear-gradient(
      184deg,
      rgba(9, 28, 62, 0) 0 86%,
      rgba(9, 28, 62, 0.3) 86.05%,
      rgba(9, 28, 62, 0.15) 87.1%,
      rgba(9, 28, 62, 0.05) 88.4%,
      rgba(9, 28, 62, 0) 89.8%
    );
  }
}

/* Schatten unter der Fotokante kraeftiger und etwas weiter auslaufend */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: linear-gradient(
      184deg,
      rgba(9, 28, 62, 0) 0 86%,
      rgba(9, 28, 62, 0.5) 86.05%,
      rgba(9, 28, 62, 0.3) 87%,
      rgba(9, 28, 62, 0.15) 88.4%,
      rgba(9, 28, 62, 0.05) 90%,
      rgba(9, 28, 62, 0) 91.6%
    );
  }
}

/* ==========================================================================
   Anruf-Karte als stehendes Rechteck rechts neben Ueberschrift und Lead.
   Sie liegt absolut in der Textspalte, deshalb bekommt die Buehne rechts
   einen Freiraum in genau der Kartenbreite.
   ========================================================================== */
@media (max-width: 1099.98px) {
  :root {
    --mcall-w: 8.9rem;
    --mcall-h: 13.5rem;
    --mcall-top: calc(var(--mhero-photo) + 1.9rem);
  }

  .hero__stage {
    padding-right: calc(var(--mcall-w) + 1.9rem);
    min-height: calc(var(--mcall-top) + var(--mcall-h) + 0.6rem);
  }
  .hero__stage h1 {
    font-size: clamp(1.7rem, 7.2vw, 2.35rem);
    hyphens: auto;
  }
  .hero__stage .hero__lead { font-size: 0.95rem; line-height: 1.5; }

  .hero .hero__cta .btn--primary {
    position: absolute;
    grid-area: auto;
    z-index: 2;
    top: var(--mcall-top);
    right: 0;
    width: var(--mcall-w);
    height: var(--mcall-h);
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 1.15rem 0.9rem 1.1rem;
    border-radius: 20px;
    text-align: center;
  }
  .hero .hero__cta .btn--primary .btn__ic {
    width: 54px;
    height: 54px;
  }
  .hero .hero__cta .btn--primary .btn__ic svg { width: 25px; height: 25px; }
  .hero .hero__cta .btn--primary .btn__text {
    align-items: center;
    gap: 0.25rem;
    text-align: center;
  }
  .hero .hero__cta .btn--primary .btn__sub { font-size: 1rem; line-height: 1.2; }
  .hero .hero__cta .btn--primary .btn__label { font-size: 0.8rem; }
  .hero .hero__cta .btn--primary .btn__chev {
    margin: auto 0 0;
    color: #fff;
  }
  .hero .hero__cta .btn--primary .btn__chev svg { width: 24px; height: 24px; }

  /* Die Merkmalkarte rueckt eine Zeile hoch, da die Anrufkarte nicht mehr
     im Raster liegt */
  .hero__text > .hero__checks { grid-row: 2; margin-top: 1.2rem; }
  .hero .hero__cta .btn--claim { grid-row: 3; }
  .hero .hero__cta .btn--wa { grid-row: 3; }
  .hero__text > .hero__rating--mob { grid-row: 4; }
  .hero .about-teaser { grid-row: 5; }
}

/* Feinabstimmung: Ueberschrift zweizeilig ohne Trennstrich, Nummer einzeilig */
@media (max-width: 1099.98px) {
  :root { --mcall-w: 8.2rem; }
  .hero__stage { padding-right: calc(var(--mcall-w) + 1.7rem); }
  .hero__stage h1 {
    font-size: clamp(1.5rem, 6.5vw, 2.1rem);
    hyphens: manual;
  }
  .hero .hero__cta .btn--primary .btn__label {
    font-size: 0.75rem;
    white-space: nowrap;
  }
  .hero .hero__cta .btn--primary .btn__sub { font-size: 0.98rem; }
}

/* Eine Spur kleiner, damit "Schadengutachten" ohne Trennstrich in die Zeile passt */
@media (max-width: 1099.98px) {
  .hero__stage h1 { font-size: clamp(1.42rem, 6.05vw, 2rem); }
}

/* Lieber etwas groesser mit der gewollten Trennung "Schaden-gutachten"
   als klein und einzeilig */
@media (max-width: 1099.98px) {
  .hero__stage h1 { font-size: clamp(1.6rem, 6.8vw, 2.25rem); }
}

/* Zeilenumbruch wie gewuenscht: "Kfz Unfall und" oben, "Schadengutachten"
   in der zweiten Zeile - dafuer eine Stufe kleiner, damit es neben die
   Anrufkarte passt. */
@media (max-width: 1099.98px) {
  .hero__stage h1 {
    font-size: clamp(1.28rem, 5.5vw, 1.8rem);
    line-height: 1.12;
  }
  .hero__stage h1 .hero__br--desk { display: inline; }
}

/* "Schadengutachten" misst bei dieser Schrift rund 10,5 px je Zeichen -
   Kartenbreite und Schriftgrad sind so gewaehlt, dass es sicher in eine
   Zeile passt. */
@media (max-width: 1099.98px) {
  :root { --mcall-w: 7.7rem; }
  .hero__stage { padding-right: calc(var(--mcall-w) + 1.6rem); }
  .hero__stage h1 { font-size: clamp(1.18rem, 5.1vw, 1.68rem); }
  .hero .hero__cta .btn--primary .btn__sub { font-size: 0.92rem; }
  .hero .hero__cta .btn--primary .btn__label { font-size: 0.72rem; }
  .hero .hero__cta .btn--primary .btn__ic { width: 48px; height: 48px; }
  .hero .hero__cta .btn--primary .btn__ic svg { width: 22px; height: 22px; }
}

/* Karte wieder etwas breiter, damit Titel und Nummer sauber hineinpassen */
@media (max-width: 1099.98px) {
  :root { --mcall-w: 8.1rem; }
  .hero__stage { padding-right: calc(var(--mcall-w) + 1.55rem); }
  .hero .hero__cta .btn--primary { padding: 1.1rem 0.65rem 1rem; }
  .hero .hero__cta .btn--primary .btn__sub { font-size: 0.88rem; }
  .hero .hero__cta .btn--primary .btn__label { font-size: 0.7rem; }
}

/* Anruf-Karte: ohne Nummer, mit leichtem Verlauf von hellerem zu etwas
   dunklerem Blau */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary .btn__label { display: none; }
  .hero .hero__cta .btn--primary {
    background: linear-gradient(180deg, #1f66e0 0%, #0a52cf 55%, #0142ac 100%);
  }
  .hero .hero__cta .btn--primary .btn__sub { font-size: 0.95rem; }
}

/* Karte schmaler und mit mehr Abstand zum rechten Bildschirmrand */
@media (max-width: 1099.98px) {
  :root { --mcall-w: 7.2rem; }
  .hero__stage { padding-right: calc(var(--mcall-w) + 2.3rem); }
  .hero .hero__cta .btn--primary {
    right: 10px;
    padding: 1.05rem 0.6rem 0.95rem;
  }
  .hero .hero__cta .btn--primary .btn__sub { font-size: 0.9rem; }
}

/* ==========================================================================
   Anruf-Karte nach Vorlage: Symbol im weissen Kreis, Titel, zweizeilige
   Zusatzzeile und ein langer Pfeil am unteren Rand.
   ========================================================================== */
.btn__note { display: none; }

@media (max-width: 1099.98px) {
  :root { --mcall-w: 8.4rem; }
  .hero__stage { padding-right: calc(var(--mcall-w) + 2.1rem); }
  .hero__stage h1 { font-size: clamp(1.14rem, 4.95vw, 1.62rem); }

  .hero .hero__cta .btn--primary {
    right: 10px;
    padding: 1.15rem 0.7rem 1rem;
    border-radius: 22px;
    gap: 0.9rem;
    background: linear-gradient(180deg, #1a61dd 0%, #0b53d0 52%, #0141a8 100%);
    box-shadow: 0 20px 36px -20px rgba(1, 72, 195, 0.85);
  }
  .hero .hero__cta .btn--primary .btn__note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    line-height: 1.35;
    font-weight: var(--fw-medium, 500);
    color: rgba(255, 255, 255, 0.86);
  }
  .hero .hero__cta .btn--primary .btn__chev { display: none; }
  .hero .hero__cta .btn--primary::after {
    content: "\2192";
    margin-top: auto;
    font-size: 1.45rem;
    line-height: 1;
    color: #fff;
  }
}

/* Zusatzzeile unter den Titel */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary .btn__note { order: 3; }
}

/* Karte schmaler; der Abstand zwischen Lead und Karte entspricht genau dem
   Abstand der Karte zum rechten Bildschirmrand (26px). */
@media (max-width: 1099.98px) {
  :root { --mcall-w: 7.6rem; }
  .hero__stage { padding-right: calc(var(--mcall-w) + 2.25rem); }
  .hero .hero__cta .btn--primary {
    right: 10px;
    padding: 1.1rem 0.5rem 0.95rem;
  }
  .hero .hero__cta .btn--primary .btn__ic { width: 46px; height: 46px; }
  .hero .hero__cta .btn--primary .btn__ic svg { width: 21px; height: 21px; }
  .hero .hero__cta .btn--primary .btn__sub { font-size: 0.85rem; }
  .hero .hero__cta .btn--primary .btn__note { font-size: 0.7rem; }
}

/* Abstand Text -> Karte exakt so gross wie Karte -> Bildschirmrand */
@media (max-width: 1099.98px) {
  .hero__stage { padding-right: calc(var(--mcall-w) + 3.25rem); }
  .hero__stage h1 { font-size: clamp(1.08rem, 4.75vw, 1.55rem); }
}

/* ==========================================================================
   Oben links laeuft ein weicher dunkler Verlauf ins Foto hinein, darauf
   sitzt das Logo in Weiss.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background:
      radial-gradient(
        135% 85% at 0% 0%,
        rgba(2, 10, 24, 0.66) 0%,
        rgba(2, 10, 24, 0.34) 30%,
        rgba(2, 10, 24, 0.12) 48%,
        rgba(2, 10, 24, 0) 66%
      ),
      linear-gradient(
        184deg,
        rgba(9, 28, 62, 0) 0 86%,
        rgba(9, 28, 62, 0.5) 86.05%,
        rgba(9, 28, 62, 0.3) 87%,
        rgba(9, 28, 62, 0.15) 88.4%,
        rgba(9, 28, 62, 0.05) 90%,
        rgba(9, 28, 62, 0) 91.6%
      );
  }

  /* Aus der Textzeile wird das Logo */
  .hero__stage .hero__eyebrow {
    top: 0.85rem;
    left: 16px;
    font-size: 0;
    letter-spacing: 0;
    text-shadow: none;
  }
  .hero__stage .hero__eyebrow::before {
    content: "";
    display: block;
    width: 150px;
    height: 42px;
    background: url("../heiken-kfz-sachverstaendiger-logo.png") no-repeat left center / contain;
    filter: brightness(0) invert(1);
    opacity: 0.96;
  }
  .hero__stage .hero__eyebrow-desk { display: none; }
}

/* Inhalt der Anruf-Karte vertikal mittig */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary { justify-content: center; }
  .hero .hero__cta .btn--primary::after { margin-top: 1.05rem; }
}

/* Unterer Teil der Anruf-Karte dunkler; Symbol, Titel und Zusatzzeile mittig
   im verbleibenden Feld, der Pfeil bleibt fest unten. */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary {
    padding: 1.05rem 0.5rem 2.9rem;
    background: linear-gradient(180deg, #2069e6 0%, #0d55d2 42%, #063a90 82%, #032c6e 100%);
  }
  .hero .hero__cta .btn--primary::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.95rem;
    margin: 0;
    text-align: center;
  }
}

/* Ein einheitliches Seitenmass: links zur Ueberschrift und zum Lead, rechts
   vom Lead zur Karte und von der Karte zum Bildschirmrand - jeweils 16px,
   also buendig mit den Karten darunter. */
@media (max-width: 1099.98px) {
  .hero__stage {
    padding-left: 16px;
    padding-right: calc(var(--mcall-w) + 32px);
  }
  .hero .hero__cta .btn--primary { right: 0; }
}

/* Vertrauens-Badge als kleine Sprechblase: eingerueckt statt am Bildrand,
   oben rechts eckig, die uebrigen Ecken gerundet. */
@media (max-width: 1099.98px) {
  .hero__badge {
    left: 16px;
    padding: 0.6rem 0.95rem 0.6rem 0.8rem;
    border-radius: 16px 0 16px 16px;
  }
}

/* ==========================================================================
   Merkmale in einer Reihe zu viert - auch auf schmalen Telefonen.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.3rem 0.15rem;
  }
  .hero__text > .hero__checks li {
    padding: 0.85rem 0.3rem;
    gap: 0.35rem;
    border: 0;
  }
  .hero__text > .hero__checks li + li {
    border-left: 1px solid var(--m-line);
  }
  .hero__check-ic { width: 36px; height: 36px; }
  .hero__check-ic svg { width: 19px; height: 19px; }
  .hero__check-tt {
    font-size: 0.74rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }
  .hero__check-sub {
    font-size: 0.64rem;
    line-height: 1.25;
  }
}

/* Sprechblase kompakt: drei kurze Zeilen untereinander */
@media (max-width: 1099.98px) {
  .hero__badge {
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem 0.65rem 0.75rem;
    border-radius: 14px 0 14px 14px;
  }
  .hero__badge-ic { width: 22px; height: 22px; }
  .hero__badge-ic svg { width: 22px; height: 22px; }
  .hero__badge-tx {
    font-size: 0.66rem;
    line-height: 1.32;
    letter-spacing: 0.045em;
  }
  .hero__badge-tx b { display: block; }
  .hero__badge-tx > span { display: block; }
}

/* ==========================================================================
   Merkmale neu proportioniert: flaechige Symbole in Dunkelblau statt
   Outline im Kreis, hoehere Felder, ausfuehrlichere Zusatzzeilen.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks {
    padding: 0.2rem 0.1rem;
    border-radius: 22px;
  }
  .hero__text > .hero__checks li {
    padding: 1.25rem 0.4rem 1.3rem;
    gap: 0.55rem;
  }
  .hero__check-ic {
    width: auto;
    height: 28px;
    border-radius: 0;
    background: none;
    color: var(--brand-dark-flat);
  }
  .hero__check-ic svg { width: 28px; height: 28px; }
  .hero__check-tt {
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--ink);
  }
  .hero__check-sub {
    font-size: 0.63rem;
    line-height: 1.32;
    color: var(--muted);
    overflow-wrap: break-word;
  }
}

/* Symbolflaeche fest, damit die Titel aller vier Spalten auf einer Linie
   beginnen */
@media (max-width: 1099.98px) {
  .hero__check-ic {
    display: block;
    width: 28px;
    height: 28px;
  }
  .hero__check-ic svg { display: block; width: 28px; height: 28px; }
}

/* Inhalt der Merkmalspalten oben ausrichten, damit Symbole, Titel und
   Zusatzzeilen ueber alle vier Spalten auf einer Linie liegen */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks li { align-content: start; }
}

/* ==========================================================================
   Bewertung direkt unter die Anruf-Karte, ueber den Merkmalen, in der
   vollen Breite der Merkmalkarte. Ausserdem rueckt der Textblock nach oben,
   sodass die Anruf-Karte leicht ins Hero-Bild ragt.
   ========================================================================== */
@media (max-width: 1099.98px) {
  :root { --mcall-top: calc(var(--mhero-photo) - 1.2rem); }

  .hero__stage { padding-top: calc(var(--mhero-photo) + 0.9rem); }

  .hero__text > .hero__rating--mob { grid-row: 2; margin-top: 1.1rem; }
  .hero__text > .hero__checks { grid-row: 3; margin-top: 0.85rem; }
  .hero .hero__cta .btn--claim,
  .hero .hero__cta .btn--wa { grid-row: 4; }
  .hero .about-teaser { grid-row: 5; }
}

/* Nur dezente dunkelblaue Trenner zwischen den Merkmalen - keine
   durchgehenden Rahmenlinien mehr */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks li,
  .hero__text > .hero__checks li + li { border: 0; }
  .hero__text > .hero__checks li { position: relative; }
  .hero__text > .hero__checks li + li::before {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;
    width: 1px;
    background: rgba(0, 24, 72, 0.16);
  }
}

/* Restliche Rahmen aus der frueheren 2x2-Fassung entfernen */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks li:nth-child(odd),
  .hero__text > .hero__checks li:nth-child(even),
  .hero__text > .hero__checks li:nth-child(-n + 2) {
    border: 0;
  }
  /* H1 wieder etwas tiefer */
  .hero__stage { padding-top: calc(var(--mhero-photo) + 1.75rem); }
}

/* ==========================================================================
   Kopfbereich: Menue ohne Kachel, Logo in Schwarz auf einem weissen
   Verlauf, der nach rechts ins Foto auslaeuft.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .site-burger {
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .site-burger span,
  .site-burger span::before,
  .site-burger span::after {
    background: #fff;
    box-shadow: 0 1px 3px rgba(2, 10, 24, 0.45);
  }

  .hero__stage::before {
    background:
      radial-gradient(
        130% 82% at 0% 0%,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.86) 20%,
        rgba(255, 255, 255, 0.5) 38%,
        rgba(255, 255, 255, 0.18) 52%,
        rgba(255, 255, 255, 0) 66%
      ),
      linear-gradient(
        184deg,
        rgba(9, 28, 62, 0) 0 86%,
        rgba(9, 28, 62, 0.5) 86.05%,
        rgba(9, 28, 62, 0.3) 87%,
        rgba(9, 28, 62, 0.15) 88.4%,
        rgba(9, 28, 62, 0.05) 90%,
        rgba(9, 28, 62, 0) 91.6%
      );
  }

  .hero__stage .hero__eyebrow::before {
    filter: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Die Anruf-Karte steht jetzt in der Bildbuehne selbst. Dadurch kann sie
   ueber beide Textzeilen laufen und ist exakt so hoch wie Ueberschrift und
   Lead zusammen.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__stage > .btn--primary { display: none; }
}

@media (max-width: 1099.98px) {
  .hero__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mcall-w);
    column-gap: 16px;
    align-items: stretch;
    align-content: start;
    min-height: 0;
    padding: calc(var(--mhero-photo) + 1.75rem) 16px 0.9rem;
  }
  .hero__stage h1 { grid-column: 1; grid-row: 1; }
  .hero__stage .hero__lead { grid-column: 1; grid-row: 2; }

  .hero__stage > .btn--primary {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.05rem 0.5rem 2.9rem;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(180deg, #2069e6 0%, #0d55d2 42%, #063a90 82%, #032c6e 100%);
    box-shadow: 0 20px 36px -20px rgba(1, 72, 195, 0.85);
    text-align: center;
  }
  .hero__stage > .btn--primary .btn__ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #fff;
  }
  .hero__stage > .btn--primary .btn__ic svg { width: 21px; height: 21px; color: var(--accent); }
  .hero__stage > .btn--primary .btn__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
  }
  .hero__stage > .btn--primary .btn__sub {
    display: block;
    order: 1;
    font-size: 0.85rem;
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: #fff;
  }
  .hero__stage > .btn--primary .btn__label,
  .hero__stage > .btn--primary .btn__hours,
  .hero__stage > .btn--primary .btn__chev { display: none; }
  .hero__stage > .btn--primary .btn__note {
    display: block;
    order: 3;
    margin-top: 0.15rem;
    font-size: 0.7rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.86);
  }
  .hero__stage > .btn--primary::after {
    content: "\2192";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.95rem;
    font-size: 1.45rem;
    line-height: 1;
    color: #fff;
    text-align: center;
  }
}

/* Karte braucht wieder einen eigenen Positionskontext fuer den Pfeil, und
   die Zusatzzeile muss umbrechen duerfen */
@media (max-width: 1099.98px) {
  .hero__stage > .btn--primary { position: relative; overflow: hidden; }
  .hero__stage > .btn--primary .btn__text { width: 100%; }
  .hero__stage > .btn--primary .btn__note,
  .hero__stage > .btn--primary .btn__sub {
    white-space: normal;
    max-width: 100%;
  }
}

/* Zusatzzeile leichter setzen */
@media (max-width: 1099.98px) {
  .hero__stage > .btn--primary .btn__note { font-weight: 500; }
}

/* Weisser Verlauf hinter dem Logo haerter: laenger deckend, dann in einem
   kurzen Abschnitt ins Bild auslaufend */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background:
      radial-gradient(
        108% 70% at 0% 0%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 42%,
        rgba(255, 255, 255, 0.92) 54%,
        rgba(255, 255, 255, 0.55) 66%,
        rgba(255, 255, 255, 0.16) 76%,
        rgba(255, 255, 255, 0) 84%
      ),
      linear-gradient(
        184deg,
        rgba(9, 28, 62, 0) 0 86%,
        rgba(9, 28, 62, 0.5) 86.05%,
        rgba(9, 28, 62, 0.3) 87%,
        rgba(9, 28, 62, 0.15) 88.4%,
        rgba(9, 28, 62, 0.05) 90%,
        rgba(9, 28, 62, 0) 91.6%
      );
  }
}

/* Verlauf hinter dem Logo deutlich kleiner: reicht knapp ueber das Logo
   hinaus und gibt den Rest des Fotos wieder frei */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background:
      radial-gradient(
        62% 34% at 0% 0%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 46%,
        rgba(255, 255, 255, 0.9) 60%,
        rgba(255, 255, 255, 0.45) 76%,
        rgba(255, 255, 255, 0.12) 88%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(
        184deg,
        rgba(9, 28, 62, 0) 0 86%,
        rgba(9, 28, 62, 0.5) 86.05%,
        rgba(9, 28, 62, 0.3) 87%,
        rgba(9, 28, 62, 0.15) 88.4%,
        rgba(9, 28, 62, 0.05) 90%,
        rgba(9, 28, 62, 0) 91.6%
      );
  }
}

/* Der Verlauf war eine Ellipse mit Mittelpunkt in der Ecke - dadurch nimmt
   seine Hoehe nach rechts stark ab und das Logo lief am rechten Ende aus.
   Breitere, flachere Ellipse mit groesserem deckenden Kern: die Hoehe bleibt
   ueber die Logobreite nahezu gleich. */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background:
      radial-gradient(
        78% 50% at 0% 0%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 60%,
        rgba(255, 255, 255, 0.92) 70%,
        rgba(255, 255, 255, 0.5) 84%,
        rgba(255, 255, 255, 0.14) 93%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(
        184deg,
        rgba(9, 28, 62, 0) 0 86%,
        rgba(9, 28, 62, 0.5) 86.05%,
        rgba(9, 28, 62, 0.3) 87%,
        rgba(9, 28, 62, 0.15) 88.4%,
        rgba(9, 28, 62, 0.05) 90%,
        rgba(9, 28, 62, 0) 91.6%
      );
  }
}

/* ==========================================================================
   Logo kleiner; die weisse Flaeche dahinter ist jetzt ein Rechteck mit
   weichen Kanten statt einer Ellipse. Der Schatten unter der Fotoschraege
   wandert dafuer auf eine eigene Ebene, weil die Bildbuehne ihre Maske
   fuer das Rechteck braucht.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text::before {
    display: block;
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mhero-photo) + 40px);
    pointer-events: none;
    background: linear-gradient(
      184deg,
      rgba(9, 28, 62, 0) 0 86%,
      rgba(9, 28, 62, 0.5) 86.05%,
      rgba(9, 28, 62, 0.3) 87%,
      rgba(9, 28, 62, 0.15) 88.4%,
      rgba(9, 28, 62, 0.05) 90%,
      rgba(9, 28, 62, 0) 91.6%
    );
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__stage::before {
    z-index: -1;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 56%,
      rgba(255, 255, 255, 0.55) 78%,
      rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 196px 82px;
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 54%,
      rgba(0, 0, 0, 0.5) 76%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 54%,
      rgba(0, 0, 0, 0.5) 76%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-size: 196px 82px;
    mask-size: 196px 82px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .hero__stage .hero__eyebrow { top: 0.7rem; }
  .hero__stage .hero__eyebrow::before {
    width: 118px;
    height: 33px;
  }
}

/* Weisse Flaeche hinter dem Logo als Milchglas: halbtransparent mit
   Unschaerfe, damit das Foto durchscheint und die Schrift trotzdem traegt */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.72) 0,
      rgba(255, 255, 255, 0.66) 56%,
      rgba(255, 255, 255, 0.34) 78%,
      rgba(255, 255, 255, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: 196px 82px;
    -webkit-backdrop-filter: blur(9px) saturate(125%);
    backdrop-filter: blur(9px) saturate(125%);
  }
}

/* Milchglas flacher und auch nach unten auslaufend: zwei Masken werden
   verschnitten, dadurch verschwinden rechte und untere Kante weich -
   vorher endete die Unschaerfe unten hart an der Maskengrenze. */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: rgba(255, 255, 255, 0.72);
    background-repeat: no-repeat;
    background-size: 190px 60px;
    -webkit-backdrop-filter: blur(9px) saturate(125%);
    backdrop-filter: blur(9px) saturate(125%);
    -webkit-mask-image:
      linear-gradient(90deg, #000 0, #000 50%, rgba(0, 0, 0, 0.45) 74%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg, #000 0, #000 46%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0) 100%);
    mask-image:
      linear-gradient(90deg, #000 0, #000 50%, rgba(0, 0, 0, 0.45) 74%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(180deg, #000 0, #000 46%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 190px 60px, 190px 60px;
    mask-size: 190px 60px, 190px 60px;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .hero__stage .hero__eyebrow { top: 0.55rem; }
}

/* Glasflaeche etwas hoeher und im hellen Blau des Hero-Hintergrunds */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: rgba(242, 246, 251, 0.76);
    background-repeat: no-repeat;
    background-size: 190px 68px;
    -webkit-mask-size: 190px 68px, 190px 68px;
    mask-size: 190px 68px, 190px 68px;
  }
}

/* Die Schattenebene sass im eingerueckten Textraster und war dadurch links
   und rechts 16px zu kurz - sie gehoert ueber die volle Fensterbreite. */
@media (max-width: 1099.98px) {
  .hero__text::before {
    left: 50%;
    right: auto;
    width: 100vw;
    margin-left: -50vw;
  }
}

/* ==========================================================================
   Logo auf dem Foto: kein Milchglas mehr, weiss eingefaerbt, mit weichem
   Schlagschatten. Groesse wie das Logo in der Menueleiste beim Scrollen.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__stage .hero__eyebrow { top: 0.7rem; }
  .hero__stage .hero__eyebrow::before {
    width: 126px;
    height: 38px;
    filter: brightness(0) invert(1)
      drop-shadow(0 1px 2px rgba(2, 10, 24, 0.55))
      drop-shadow(0 6px 14px rgba(2, 10, 24, 0.4));
    opacity: 1;
  }
}

/* ==========================================================================
   Typografie: Inter als Hausschrift, lokal gehostet (variable Datei,
   Gewichte 100-900). Zuordnung:
     Ueberschriften  800  ExtraBold
     Unterueberschr. 700  Bold
     Fliesstext      400  Regular
     Buttons         600  SemiBold
     kleine Labels   500  Medium
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fw-extrabold: 800;
}

/* Ueberschriften in ExtraBold */
h1,
.hero h1,
.hero__stage h1,
h2,
.section-head h2,
.profile__card h2 {
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.025em;
}

/* Unterueberschriften bleiben Bold */
h3,
h4,
.hero__fact-title,
.hero__check-tt,
.about-teaser__card strong,
.step-card h3 {
  font-weight: var(--fw-bold);
}

/* Buttons SemiBold */
.btn,
.btn__label,
.btn__sub,
.hero__cta .btn {
  font-weight: var(--fw-semibold);
}

/* Kleine Labels Medium */
.kicker,
.hero__eyebrow,
.hero__badge-tx,
.hero__check-sub,
.hero__fact-desc {
  font-weight: var(--fw-medium);
}

/* Dezente Tonung im oberen Bereich des Hero-Fotos, im Dunkelblau der
   Sprechblase - ohne Unschaerfe, nur ein Verlauf nach unten. */
@media (max-width: 1099.98px) {
  .hero__stage::before {
    background: linear-gradient(
      180deg,
      rgba(0, 24, 72, 0.34) 0%,
      rgba(0, 24, 72, 0.2) 26%,
      rgba(0, 24, 72, 0.08) 46%,
      rgba(0, 24, 72, 0) 64%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* H1 groesser und schwerer, Lead eine Spur kleiner */
@media (max-width: 1099.98px) {
  .hero__stage h1 {
    font-size: clamp(1.3rem, 5.6vw, 1.85rem);
    font-weight: 850;
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
  .hero__stage .hero__lead {
    font-size: 0.88rem;
    line-height: 1.5;
  }
}

/* Auch die Display-Schrift der Ueberschriften auf Inter umstellen -
   home.css setzt dafuer eine eigene Variable. */
:root {
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Mit Inter passt eine Stufe mehr in die Zeile */
@media (max-width: 1099.98px) {
  .hero__stage h1 { font-size: clamp(1.35rem, 5.85vw, 1.95rem); }
}

/* "Schadengutachten" bleibt immer ein Wort: keine Trennstelle mehr im
   Markup, kein Umbruch innerhalb des Wortes, und der Schriftgrad ist so
   gewaehlt, dass es auch auf 360px-Geraeten in die Zeile passt. */
@media (max-width: 1099.98px) {
  .hero__stage h1 {
    font-size: clamp(1.3rem, 5.5vw, 1.95rem);
    hyphens: manual;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Sehr schmale Geraete: Karte etwas schmaler, damit die Ueberschrift
   weiterhin einzeilig bleibt */
@media (max-width: 374.98px) {
  :root { --mcall-w: 6.6rem; }
  .hero__stage h1 { font-size: clamp(0.95rem, 5.2vw, 1.95rem); }
}

/* Farbgebung der Ueberschrift: "Kfz Unfall und" im Dunkelblau der
   Sprechblase, nur "Schadengutachten" in Royalblau. */
@media (max-width: 1099.98px) {
  .hero__stage h1 { color: var(--brand-dark-flat); }
  .hero__stage h1 .hero__accent { color: inherit; }
  .hero__stage h1 .hero__accent:last-of-type { color: var(--accent); }
}

/* Akzentstrich unter der Ueberschrift dezenter */
@media (max-width: 1099.98px) {
  .hero__stage h1::after {
    width: 2.4rem;
    height: 2px;
    margin-top: 0.8rem;
    border-radius: 1px;
    background: rgba(1, 72, 195, 0.45);
  }
}

/* Ueberschrift eine Spur groesser - der Wert ist so gewaehlt, dass
   "Schadengutachten" auf allen Breiten einzeilig neben der Karte bleibt
   und sich sonst nichts verschiebt. */
@media (max-width: 1099.98px) {
  .hero__stage h1 { font-size: clamp(1.3rem, 5.85vw, 2.1rem); }
}
@media (max-width: 374.98px) {
  .hero__stage h1 { font-size: clamp(0.95rem, 5.5vw, 2.1rem); }
}

/* Noch eine Stufe groesser: engere Laufweite schafft den noetigen Platz */
@media (max-width: 1099.98px) {
  .hero__stage h1 {
    font-size: clamp(1.3rem, 6.2vw, 2.25rem);
    letter-spacing: -0.045em;
  }
}
@media (max-width: 374.98px) {
  .hero__stage h1 { font-size: clamp(0.95rem, 5.8vw, 2.25rem); }
}

/* Sicherheitsabstand: eine Nuance zurueck, damit die Zeile auf keinem
   Geraet auf Kante steht */
@media (max-width: 1099.98px) {
  .hero__stage h1 { font-size: clamp(1.3rem, 5.95vw, 2.2rem); }
}
@media (max-width: 374.98px) {
  .hero__stage h1 { font-size: clamp(0.95rem, 5.6vw, 2.2rem); }
}

/* Lead eine Stufe groesser, passend zur groesseren Ueberschrift */
@media (max-width: 1099.98px) {
  .hero__stage h1 { margin-bottom: 1.15rem; }
  .hero__stage .hero__lead {
    font-size: 0.96rem;
    line-height: 1.52;
  }
}

/* Gleicher optischer Abstand ueber und unter dem Akzentstrich. Die
   Zeilenhoehe des Leads bringt oben schon Luft mit, deshalb ist der
   Aussenabstand darunter kleiner als darueber. */
@media (max-width: 1099.98px) {
  .hero__stage h1 { margin-bottom: 0.62rem; }
  .hero__stage h1::after { margin-top: 0.82rem; }
}

/* Feinabgleich der beiden Abstaende am Akzentstrich */
@media (max-width: 1099.98px) {
  .hero__stage h1 { margin-bottom: 0.72rem; }
  .hero__stage h1::after { margin-top: 0.72rem; }
}

/* Der Strich rueckt naeher an die Ueberschrift: die H1 bringt durch ihre
   enge Zeilenhoehe weniger Eigenluft mit als der Lead darunter. */
@media (max-width: 1099.98px) {
  .hero__stage h1::after { margin-top: 0.53rem; }
}

/* Letzter Feinschliff: beide Abstaende auf 16px */
@media (max-width: 1099.98px) {
  .hero__stage h1::after { margin-top: 0.63rem; }
  .hero__stage h1 { margin-bottom: 0.63rem; }
}

/* Sprechblase: feinere Strichstaerke, dafuer etwas mehr Laufweite */
@media (max-width: 1099.98px) {
  .hero__badge-tx {
    font-weight: 450;
    letter-spacing: 0.07em;
  }
  .hero__badge-tx b { font-weight: 600; }
}

/* Der Strich sitzt jetzt wirklich mittig: gemessen wird von der Unterkante
   der Schrift einschliesslich der Unterlaenge des "g" bis zur Oberkante der
   ersten Lead-Zeile. */
@media (max-width: 1099.98px) {
  .hero__stage h1::after { margin-top: 0.77rem; }
  .hero__stage h1 { margin-bottom: 0.49rem; }
}

/* Sprechblase zurueckgenommen: rund 15 Prozent kleiner, weiter nach links
   und tiefer, damit sie nicht mit Gesicht und Ueberschrift konkurriert. */
@media (max-width: 1099.98px) {
  .hero__badge {
    left: 8px;
    top: calc(var(--mhero-photo) - 3.95rem);
    gap: 0.45rem;
    padding: 0.5rem 0.75rem 0.5rem 0.6rem;
    border-radius: 12px 0 12px 12px;
    box-shadow: 0 12px 24px -18px rgba(0, 20, 58, 0.8);
  }
  .hero__badge-ic { width: 18px; height: 18px; }
  .hero__badge-ic svg { width: 18px; height: 18px; }
  .hero__badge-tx {
    font-size: 0.56rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }
}

/* Logo 10 Prozent groesser */
@media (max-width: 1099.98px) {
  .hero__stage .hero__eyebrow::before {
    width: 139px;
    height: 42px;
  }
}

/* Merkmale: weniger Text, dafuer lesbare Groessen */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks li {
    padding: 1.3rem 0.3rem 1.35rem;
    gap: 0.5rem;
  }
  .hero__check-tt {
    font-size: 0.84rem;
    line-height: 1.2;
  }
  .hero__check-sub {
    font-size: 0.73rem;
    line-height: 1.3;
  }
}

/* Logo noch einmal 10 Prozent groesser */
@media (max-width: 1099.98px) {
  .hero__stage .hero__eyebrow::before {
    width: 153px;
    height: 46px;
  }
}

/* Logo weitere 15 Prozent groesser */
@media (max-width: 1099.98px) {
  .hero__stage .hero__eyebrow::before {
    width: 176px;
    height: 53px;
  }
}

/* ==========================================================================
   Ruhigerer Hero: Anruf-Button steht als breite Zeile unter dem Text statt
   als hohe Karte daneben. Blau bleibt der Ueberschrift, dem Hauptbutton und
   wenigen Symbolen vorbehalten.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__stage {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    padding-right: 16px;
  }
  .hero__stage h1 {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(1.55rem, 7.2vw, 2.6rem);
  }
  .hero__stage .hero__lead { grid-column: 1; grid-row: 2; }

  .hero__stage > .btn--primary {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    height: auto;
    min-height: 58px;
    margin: 1.3rem 0 0;
    padding: 0.85rem 2.6rem 0.85rem 1.1rem;
    border-radius: 14px;
    background: linear-gradient(180deg, #1560dd 0%, #0b4fc4 100%);
    box-shadow: 0 12px 26px -16px rgba(1, 72, 195, 0.7);
  }
  .hero__stage > .btn--primary .btn__ic { width: 34px; height: 34px; }
  .hero__stage > .btn--primary .btn__ic svg { width: 17px; height: 17px; }
  .hero__stage > .btn--primary .btn__text { flex-direction: row; align-items: center; }
  .hero__stage > .btn--primary .btn__sub { font-size: 1.02rem; }
  .hero__stage > .btn--primary .btn__note { display: none; }
  .hero__stage > .btn--primary::after {
    left: auto;
    right: 1.05rem;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    font-size: 1.25rem;
  }

  /* Hervorhebungen im Lead neutral statt blau */
  .hero__stage .hero__lead .hero__hl,
  .hero__stage .hero__lead strong {
    color: var(--ink);
    font-weight: 700;
  }

  /* Symbolkreis der Schadenmeldung neutral */
  .hero .hero__cta .btn--claim .btn__ic {
    background: #eef1f5;
    color: var(--brand-dark-flat);
  }
}

/* ==========================================================================
   Merkmale minimalistisch: zwei mal zwei Haken mit kurzer Beschriftung,
   ohne Zusatzzeilen und ohne Trennlinien.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.6rem;
    row-gap: 0.9rem;
    padding: 1.15rem 1.1rem 1.2rem;
    border-radius: 20px;
  }
  .hero__text > .hero__checks li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0;
    text-align: left;
    border: 0;
  }
  .hero__text > .hero__checks li + li::before { display: none; }
  .hero__check-ic {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    color: var(--accent);
  }
  .hero__check-ic svg { width: 19px; height: 19px; }
  .hero__check-tt {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
  }
}

/* Linke Spalte etwas breiter, damit "18 Jahre Erfahrung" einzeilig bleibt */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks { grid-template-columns: 1.18fr 0.82fr; }
  .hero__check-ic { width: 17px; height: 17px; }
  .hero__check-ic svg { width: 17px; height: 17px; }
  .hero__check-tt { font-size: 0.87rem; }
}

/* ==========================================================================
   Merkmale ohne Karte: zwei mal zwei Haken mit Titel und kurzer Erklaerung,
   direkt auf der Hero-Flaeche.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks {
    grid-template-columns: 1.12fr 0.88fr;
    column-gap: 0.8rem;
    row-gap: 1.05rem;
    margin-top: 1.35rem;
    padding: 0.2rem 0.15rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .hero__text > .hero__checks li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    padding: 0;
    text-align: left;
  }
  .hero__check-ic {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    color: var(--accent);
  }
  .hero__check-ic svg { width: 18px; height: 18px; }
  .hero__check-tt {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
  }
  .hero__check-sub {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--muted);
  }
}

/* Gleich breite Spalten und linksbuendig */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__text > .hero__checks li { justify-items: start; }
}

/* ==========================================================================
   Vorteile als eine einzige ruhige Karte: vier kurze Begriffe in einer
   Reihe, Haken darueber, keine Trennlinien, keine Zusatzzeilen.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0.3rem;
    row-gap: 0;
    margin-top: 1.3rem;
    padding: 1.05rem 0.7rem 1.1rem;
    border-radius: 20px;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.05),
      0 16px 30px -24px rgba(9, 28, 62, 0.4);
  }
  .hero__text > .hero__checks li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 0;
    text-align: center;
  }
  .hero__check-ic {
    width: 19px;
    height: 19px;
    margin: 0;
    color: var(--accent);
  }
  .hero__check-ic svg { width: 19px; height: 19px; }
  .hero__check-tt {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
  }
}

/* ==========================================================================
   Zurueck zur Fassung ohne Karte: 2x2 mit Haken, Titel und Erklaerzeile,
   direkt auf der Hero-Flaeche.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.8rem;
    row-gap: 1.05rem;
    margin-top: 1.35rem;
    padding: 0.2rem 0.15rem;
    background: none;
    box-shadow: none;
    border-radius: 0;
  }
  .hero__text > .hero__checks li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    justify-items: start;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    padding: 0;
    text-align: left;
  }
  .hero__check-ic {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    color: var(--accent);
  }
  .hero__check-ic svg { width: 18px; height: 18px; }
  .hero__check-tt {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
  }
  .hero__check-sub {
    grid-column: 2;
    grid-row: 2;
    display: block;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--muted);
  }
}

/* ==========================================================================
   Kontaktwege: nur noch Telefon und WhatsApp, direkt untereinander.
   Die Karte "Schaden online melden" entfaellt auf dem Handy.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--claim { display: none; }

  .hero .hero__cta .btn--wa {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    height: auto;
    min-height: 54px;
    margin: 0.6rem 0 0;
    padding: 0.75rem 1.1rem;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 10px 24px -18px rgba(9, 28, 62, 0.45);
    text-align: center;
  }
  .hero .hero__cta .btn--wa .btn__ic {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #e6f6ec;
    color: #1f9d5c;
    display: grid;
    place-items: center;
  }
  .hero .hero__cta .btn--wa .btn__ic svg { width: 17px; height: 17px; }
  .hero .hero__cta .btn--wa .btn__text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
  }
  .hero .hero__cta .btn--wa .btn__label {
    font-size: 0.96rem;
    font-weight: 600;
    color: var(--ink);
  }
  .hero .hero__cta .btn--wa .btn__sub {
    display: none;
  }

  .hero__text > .hero__rating--mob { grid-row: 3; }
  .hero__text > .hero__checks { grid-row: 4; }
  .hero .about-teaser { grid-row: 5; }
}

/* ==========================================================================
   CTAs: Inhalt exakt mittig, WhatsApp neu als ruhiger gruener Button.
   ========================================================================== */
@media (max-width: 1099.98px) {
  /* Symmetrische Innenabstaende, damit die Gruppe wirklich zentriert steht */
  .hero__stage > .btn--primary {
    padding: 0.85rem 2.6rem;
  }

  .hero .hero__cta .btn--wa {
    position: relative;
    justify-content: center;
    gap: 0.6rem;
    min-height: 54px;
    margin-top: 0.6rem;
    padding: 0.75rem 2.6rem;
    border: 0;
    border-radius: 14px;
    background: #e7f6ee;
    box-shadow: none;
  }
  .hero .hero__cta .btn--wa .btn__ic {
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: none;
    color: #128c4a;
  }
  .hero .hero__cta .btn--wa .btn__ic svg { width: 22px; height: 22px; }
  .hero .hero__cta .btn--wa .btn__label {
    font-size: 0.98rem;
    font-weight: 600;
    color: #0f6b3b;
  }
  .hero .hero__cta .btn--wa .btn__chev { display: none; }
  .hero .hero__cta .btn--wa::after {
    content: "\2192";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    color: #128c4a;
  }
}

/* Der weisse Block unter dem Hero (Kurzvorstellung samt Auszahlungs-Kachel)
   entfaellt auf dem Handy komplett. */
@media (max-width: 1099.98px) {
  .hero .about-teaser { display: none; }
}

/* Telefon-Button: die Textbox dehnte sich ueber die ganze Restbreite,
   dadurch stand die Beschriftung links statt mittig. */
@media (max-width: 1099.98px) {
  .hero__stage > .btn--primary .btn__text {
    flex: 0 0 auto;
    justify-content: center;
  }

  /* WhatsApp weiss mit dunkler Schrift */
  .hero .hero__cta .btn--wa {
    background: #fff;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 10px 24px -18px rgba(9, 28, 62, 0.45);
  }
  .hero .hero__cta .btn--wa .btn__label { color: var(--ink); }
  .hero .hero__cta .btn--wa .btn__ic { color: #1f9d5c; }
  .hero .hero__cta .btn--wa::after { color: var(--ink-soft, #43505e); }
  .hero .hero__cta .btn--wa .btn__text { flex: 0 0 auto; }
}

/* Die Textbox hatte noch width:100% aus der Kartenfassung */
@media (max-width: 1099.98px) {
  .hero__stage > .btn--primary .btn__text { width: auto; max-width: none; }
}

/* Der helle Hero-Hintergrund laeuft nach unten in Weiss aus, damit der
   Uebergang zum naechsten Abschnitt nahtlos ist. */
@media (max-width: 1099.98px) {
  .hero {
    background: linear-gradient(
      180deg,
      #f2f6fb 0%,
      #f2f6fb 72%,
      #f7fafd 88%,
      #ffffff 100%
    );
  }
}

/* Bewertungskarte flach: keine Schattenkante mehr */
@media (max-width: 1099.98px) {
  .hero__text > .hero__rating--mob {
    background: #fff;
    box-shadow: none;
    border: 0;
  }
}

/* Claim-Sprechblase im Hero-Bild entfaellt */
@media (max-width: 1099.98px) {
  .hero__badge { display: none; }
}

/* Beide Kontaktbuttons flach: keine Schatten, kein Verlauf */
@media (max-width: 1099.98px) {
  .hero__stage > .btn--primary {
    background: var(--accent);
    box-shadow: none;
  }
  .hero .hero__cta .btn--wa {
    background: #fff;
    box-shadow: none;
  }
}

/* ==========================================================================
   Subtext als kleiner Block: Frage, Kernnutzen, Erklaerung, Signatur.
   ========================================================================== */
.hero__lead-q,
.hero__lead-key,
.hero__lead-body,
.hero__lead-sig { display: block; }

@media (max-width: 1099.98px) {
  .hero__stage .hero__lead { font-size: 0.95rem; }
  .hero__lead-q {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
  }
  .hero__lead-key {
    margin-bottom: 0.6rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
  }
  .hero__lead-body {
    margin-bottom: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .hero__lead-sig {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--muted);
  }
}

/* Reihenfolge angepasst: Frage, Erfahrung, Entscheidung, Signatur */
@media (max-width: 1099.98px) {
  .hero__lead-q { margin-bottom: 0.45rem; }
  .hero__lead-body { margin-bottom: 0.45rem; }
  .hero__lead-key {
    margin-bottom: 0.7rem;
    color: var(--ink);
  }
}

/* ==========================================================================
   Klare Stufenfolge im Subtext statt zweier gleich fetter Zeilen:
     Einstiegsfrage   0,95rem / 600
     Erklaerung       0,95rem / 400
     Kernaussage      1,06rem / 700
     Signatur         0,80rem / 500
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__lead-q {
    margin-bottom: 0.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
  }
  .hero__lead-body {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .hero__lead-key {
    margin-bottom: 0.7rem;
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .hero__lead-sig {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--muted);
  }
}

/* ==========================================================================
   Weniger Gewichtsstufen im Subtext: nur noch eine hervorgehobene Zeile.
   H1 850 -> Kernaussage 600 -> Fliesstext 400 -> Signatur 500 klein.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__lead-q,
  .hero__lead-body {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .hero__lead-q { margin-bottom: 0; }
  .hero__lead-body { margin-bottom: 0.8rem; }
  .hero__lead-key {
    margin-bottom: 0.75rem;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.008em;
    color: var(--ink);
  }
  .hero__lead-sig {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
  }
}

/* ==========================================================================
   Einstiegsfrage groesser; die Kernaussage laeuft im normalen Schnitt, das
   Schluesselwort bekommt einen handgezeichneten Unterstrich (SVG-Kurve, die
   sich mit der Textbreite dehnt).
   ========================================================================== */
.hero__mark {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9.5c34-4.2 68 2.6 102-1.4 34-4 68 1.8 133-1.1' fill='none' stroke='%230148c3' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.42em;
  padding-bottom: 0.22em;
}

@media (max-width: 1099.98px) {
  .hero__lead-q {
    margin-bottom: 0.35rem;
    font-size: 1.16rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .hero__lead-body {
    margin-bottom: 0.85rem;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-soft);
  }
  .hero__lead-key {
    margin-bottom: 0.85rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: 0;
    color: var(--ink);
  }
}

/* Unterstrich wie mit dem Fueller: zwei uebereinanderliegende Kurven, die
   mittig dicker auftragen und an den Enden auslaufen. */
.hero__mark {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9.6c30-3.6 60 1.4 92-0.9 32-2.2 66 1.6 104-1.1' fill='none' stroke='%230148c3' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M26 9.9c26-2.4 54 0.9 84-0.5 18-0.8 38 0.2 56-0.9' fill='none' stroke='%230148c3' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.5em;
  padding-bottom: 0.24em;
}

/* Derselbe Fueller-Strich, den die Seite schon bei "direkt aufs Konto"
   verwendet - leicht ansteigend, ungleich dick, in Gruen. */
.hero__mark {
  font-style: normal;
  padding-bottom: 0.16em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7.6C22 5.4 46 4.2 70 3.6c17-.4 33-.6 48-.9' fill='none' stroke='%231f8a5b' stroke-width='2.7' stroke-linecap='round'/%3E%3Cpath d='M6 8.6C30 6.8 60 5.6 92 5' fill='none' stroke='%231f8a5b' stroke-width='1.1' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.42em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Die unterstrichene Wendung soll nicht ueber zwei Zeilen brechen */
.hero__mark { white-space: nowrap; }

/* Kernaussage in derselben Groesse wie der Fliesstext darueber */
@media (max-width: 1099.98px) {
  .hero__lead-key {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ink-soft);
  }
}

/* Unter der Kernaussage derselbe Trennstrich wie unter der Ueberschrift */
@media (max-width: 1099.98px) {
  .hero__lead-key { margin-bottom: 0.75rem; }
  .hero__lead-key::after {
    content: "";
    display: block;
    width: 2.4rem;
    height: 2px;
    margin: 0.8rem 0 0;
    border-radius: 1px;
    background: rgba(1, 72, 195, 0.45);
  }
}

/* Kein Fueller-Strich mehr unter "Sie entscheiden." - der Trennstrich
   darunter uebernimmt die Betonung */
.hero__mark {
  background-image: none;
  padding-bottom: 0;
}

/* Trennstrich unter der Kernaussage rechtsbuendig */
@media (max-width: 1099.98px) {
  .hero__lead-key::after { margin-left: auto; margin-right: 0; }
}

/* ==========================================================================
   Reihenfolge: Ueberschrift, Text, Merkmale, dann die Buttons.
   Der Telefon-Button steht wieder im CTA-Container, damit die Merkmale
   dazwischen passen.
   ========================================================================== */
@media (min-width: 1100px) {
  .hero__stage > .btn--primary { display: initial; }
}

@media (max-width: 1099.98px) {
  .hero__stage {
    display: block;
    padding-right: 16px;
  }
  .hero__stage h1,
  .hero__stage .hero__lead { grid-column: auto; grid-row: auto; }

  .hero__text > .hero__checks { grid-row: 2; margin-top: 1.3rem; }

  .hero .hero__cta .btn--primary {
    grid-row: 3;
    grid-column: 1 / -1;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    width: 100%;
    height: auto;
    min-height: 58px;
    margin: 1.4rem 0 0;
    padding: 0.85rem 2.6rem;
    border: 0;
    border-radius: 14px;
    background: var(--accent);
    box-shadow: none;
    text-align: center;
  }
  .hero .hero__cta .btn--primary .btn__ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #fff;
  }
  .hero .hero__cta .btn--primary .btn__ic svg { width: 17px; height: 17px; color: var(--accent); }
  .hero .hero__cta .btn--primary .btn__text {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
  }
  .hero .hero__cta .btn--primary .btn__label,
  .hero .hero__cta .btn--primary .btn__hours,
  .hero .hero__cta .btn--primary .btn__note,
  .hero .hero__cta .btn--primary .btn__chev { display: none; }
  .hero .hero__cta .btn--primary .btn__sub {
    display: block;
    font-size: 1.02rem;
    font-weight: 600;
    color: #fff;
  }
  .hero .hero__cta .btn--primary::after {
    content: "\2192";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    color: #fff;
  }

  .hero .hero__cta .btn--wa { grid-row: 4; }
  .hero__text > .hero__rating--mob { grid-row: 5; margin-top: 1rem; }

  /* Haken ohne Kreis, in Dunkelblau */
  .hero__check-ic {
    width: 17px;
    height: 17px;
    color: var(--brand-dark-flat);
  }
  .hero__check-ic svg { width: 17px; height: 17px; }
}

/* Reste der frueheren Kartenpositionierung zuruecksetzen */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    height: auto;
  }
}

/* Pfeil wieder rechts statt mittig (left/bottom aus der Kartenfassung) */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary::after {
    left: auto;
    bottom: auto;
    text-align: right;
  }
}

/* Signaturzeile und der Trennstrich darueber entfallen */
@media (max-width: 1099.98px) {
  .hero__lead-sig { display: none; }
  .hero__lead-key::after { display: none; }
  .hero__lead-key { margin-bottom: 0; }
}

/* Leichter Schatten unter beiden Kontaktbuttons */
@media (max-width: 1099.98px) {
  .hero .hero__cta .btn--primary {
    box-shadow:
      0 1px 2px rgba(9, 28, 62, 0.08),
      0 10px 22px -14px rgba(1, 72, 195, 0.55);
  }
  .hero .hero__cta .btn--wa {
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 10px 22px -16px rgba(9, 28, 62, 0.45);
  }
}

/* Bewertung wie die Buttons: leichter Schatten und Pfeil rechts */
@media (max-width: 1099.98px) {
  .hero__text > .hero__rating--mob {
    position: relative;
    padding-right: 2.6rem;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.06),
      0 10px 22px -16px rgba(9, 28, 62, 0.45);
  }
  .hero__text > .hero__rating--mob::after {
    content: "\2192";
    position: absolute;
    right: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    line-height: 1;
    color: var(--ink-soft);
  }
}

/* Der Hero schnitt mit overflow:hidden den Schatten des letzten Elements ab.
   overflow-x: clip haelt die Bildebenen weiterhin in der Breite fest, laesst
   den Schatten aber nach unten austreten. */
@media (max-width: 1099.98px) {
  .hero {
    overflow-x: clip;
    overflow-y: visible;
    padding-bottom: 0.4rem;
  }
}

/* Fotoband mobil noch etwas flacher */
@media (max-width: 1099.98px) {
  :root { --mhero-photo: clamp(7.5rem, 27svh, 13rem); }
}

/* Namenszeile als eigener Absatz, eine Spur kraeftiger */
.hero__lead-name { display: block; }

@media (max-width: 1099.98px) {
  .hero__lead-name {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
  }
}

/* Farbe der Namenszeile mit ausreichender Spezifitaet setzen */
@media (max-width: 1099.98px) {
  .hero__stage .hero__lead .hero__lead-name {
    color: var(--ink);
    text-shadow: none;
  }
}

/* Etwas mehr Luft zwischen Namenszeile und der Kernaussage */
@media (max-width: 1099.98px) {
  .hero__lead-name { margin-bottom: 0.8rem; }
}

/* Kernaussage haengt direkt am Fliesstext, die Namenszeile steht darunter */
@media (max-width: 1099.98px) {
  .hero__lead-body { margin-bottom: 0.35rem; }
  .hero__lead-key { margin-bottom: 0; }
  .hero__lead-name { margin-top: 0.85rem; margin-bottom: 0; }
}

/* Subtext eine Spur kleiner, damit er auf schmalen Geraeten sicher passt */
@media (max-width: 1099.98px) {
  .hero__lead-q { font-size: 1.08rem; }
  .hero__lead-body { font-size: 0.9rem; line-height: 1.48; }
  .hero__lead-name { font-size: 0.9rem; margin-top: 0.7rem; }
}

/* Die Bewertungskarten sind keine Links mehr - nur die Sammelverweise
   fuehren zu Google. Deshalb auch kein Klick-Cursor. */
article.grev { cursor: default; }
article.grev:hover { background: var(--surface); }

/* Mobiler Subtext, kuerzere Struktur: erste Zeile steht allein.
   Gleiche Schriftstaerke, nur ein eigener Absatzbeginn. */
@media (max-width: 1099.98px) {
  .hero__lead-l1 {
    display: block;
    margin-bottom: 0.3rem;
  }
}

/* ==========================================================================
   Bewertung direkt unter den Subtext, ohne Kartenhintergrund
   Sie steht jetzt als schlichte Zeile unter "Ihr Kfz Gutachter" und schiebt
   Merkmale und Buttons je eine Reihe nach unten.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__rating--mob {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
    justify-self: start;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .hero__text > .hero__rating--mob::after { content: none; }

  .hero__text > .hero__checks { grid-row: 3; margin-top: 1.35rem; }
  .hero .hero__cta .btn--primary { grid-row: 4; }
  .hero .hero__cta .btn--wa { grid-row: 5; }

  .hero__text > .hero__rating--mob .hero__rating-stars svg { width: 17px; height: 17px; }
  .hero__text > .hero__rating--mob .hero__rating-score { font-size: 1.02rem; }
  .hero__text > .hero__rating--mob .hero__rating-text { font-size: 0.8rem; }
}

/* ==========================================================================
   Bewertung und Merkmale mittig, damit beide als ein Block wirken
   Die Spalten richten sich nach dem Inhalt und werden als Paket zentriert.
   Die Texte innerhalb einer Zeile bleiben links am Haken.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__rating--mob {
    justify-content: center;
    justify-self: center;
  }
  .hero__text > .hero__checks {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    column-gap: 0.55rem;
  }
}

/* Sehr schmale Geraete: Bewertungszeile etwas kleiner, damit sie nicht bricht */
@media (max-width: 359.98px) {
  .hero__text > .hero__rating--mob { gap: 0.4rem; }
  .hero__text > .hero__rating--mob .hero__rating-stars svg { width: 15px; height: 15px; }
  .hero__text > .hero__rating--mob .hero__rating-score { font-size: 0.95rem; }
  .hero__text > .hero__rating--mob .hero__rating-text { font-size: 0.72rem; }
  .hero__text > .hero__checks { column-gap: 0.5rem; }
}

/* ==========================================================================
   Dezente Trennlinien zwischen den vier Merkmalen
   Ein feines Kreuz: senkrecht in der Spaltenluecke, waagerecht zwischen den
   Zeilen. Die Linien liegen genau in der Mitte der Luecken, damit sie sich
   in der Mitte treffen. Schrift minimal kleiner, damit die groessere
   Spaltenluecke auf 360px noch passt und die Titel einzeilig bleiben.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks {
    --chk-cgap: 1.15rem;
    --chk-rgap: 1rem;
    column-gap: var(--chk-cgap);
    row-gap: var(--chk-rgap);
  }
  .hero__check-tt { font-size: 0.85rem; }
  .hero__check-sub { font-size: 0.73rem; }
  .hero__text > .hero__checks li {
    position: relative;
    column-gap: 7px;
    grid-template-columns: 17px minmax(0, 1fr);
  }

  /* senkrechte Linie, durchgehend ueber beide Zeilen */
  .hero__text > .hero__checks li:nth-child(1)::after,
  .hero__text > .hero__checks li:nth-child(3)::after {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--chk-cgap) / -2);
    width: 1px;
    background: rgba(9, 28, 62, 0.11);
  }
  .hero__text > .hero__checks li:nth-child(1)::after {
    height: calc(100% + var(--chk-rgap));
  }
  .hero__text > .hero__checks li:nth-child(3)::after { bottom: 0; }

  /* waagerechte Linie zwischen den beiden Zeilen */
  .hero__text > .hero__checks li:nth-child(1)::before,
  .hero__text > .hero__checks li:nth-child(2)::before {
    content: "";
    position: absolute;
    bottom: calc(var(--chk-rgap) / -2);
    height: 1px;
    background: rgba(9, 28, 62, 0.11);
  }
  .hero__text > .hero__checks li:nth-child(1)::before {
    left: 0;
    right: calc(var(--chk-cgap) / -2);
  }
  .hero__text > .hero__checks li:nth-child(2)::before {
    left: calc(var(--chk-cgap) / -2);
    right: 0;
  }
}

@media (max-width: 359.98px) {
  .hero__text > .hero__checks { --chk-cgap: 0.8rem; }
}

/* ==========================================================================
   Zurueck zu linksbuendig, ohne Trennlinien
   Die Merkmale spannen wieder ueber die volle Breite (zwei gleiche Spalten),
   die Bewertungszeile steht wie Ueberschrift und Text am linken Rand.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__text > .hero__rating--mob {
    justify-content: flex-start;
    justify-self: start;
  }
  .hero__text > .hero__checks {
    --chk-cgap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    justify-self: stretch;
    column-gap: var(--chk-cgap);
  }
  .hero__text > .hero__checks li::before,
  .hero__text > .hero__checks li::after { content: none; }
}

@media (max-width: 359.98px) {
  .hero__text > .hero__checks { --chk-cgap: 0.7rem; }
}

/* Trennlinien wirklich abschalten: die Regeln oben stehen an :nth-child,
   ein einfaches li::before/::after wiegt weniger und greift nicht. */
@media (max-width: 1099.98px) {
  .hero__text > .hero__checks li:nth-child(1)::before,
  .hero__text > .hero__checks li:nth-child(2)::before,
  .hero__text > .hero__checks li:nth-child(1)::after,
  .hero__text > .hero__checks li:nth-child(3)::after {
    content: none;
    background: none;
  }
}

/* ==========================================================================
   Mobiler Hero: vertikaler Rhythmus
   Vier Gruppen, die Abstaende innerhalb einer Gruppe sind kleiner als die
   Abstaende zwischen den Gruppen:
     1 Headline + Frage        2 Beschreibung + Signatur
     3 Bewertung + Vorteile    4 Kontakt
   Alle Werte als Aussenabstand, keine Positionierung.
   ========================================================================== */
@media (max-width: 1099.98px) {
  /* Gruppe 1 -> 2: Frage sitzt dicht am Beschreibungstext */
  .hero__lead-q { margin-bottom: 0.45rem; }        /* 7.2px */

  /* Beschreibung: erste Zeile steht allein, aber im selben Block */
  .hero__lead-l1 { margin-bottom: 0.25rem; }        /* 4px */
  .hero__lead-body {
    margin-bottom: 0;
    line-height: 1.45;
  }
  .hero__lead-name { margin-top: 0.8rem; }          /* 12.8px */

  /* Gruppe 2 -> 3: Die Stage endet buendig, der Abstand kommt allein
     von der Bewertungszeile. Sonst addieren sich zwei Werte. */
  .hero__stage { padding-bottom: 0; }
  .hero__text > .hero__rating--mob { margin-top: 1.5rem; }   /* 24px */

  /* Innerhalb Gruppe 3 */
  .hero__text > .hero__checks {
    margin-top: 1.25rem;                            /* 20px */
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Gruppe 3 -> 4: die CTA-Zone setzt sich deutlich ab */
  .hero .hero__cta .btn--primary { margin-top: 1.75rem; }    /* 28px */
  .hero .hero__cta .btn--wa { margin-top: 0.6rem; }          /* 9.6px */
}

/* Merkmale: Schriftgroesse waechst mit der Breite mit, damit die vier Titel
   auch auf 320px einzeilig bleiben und beide Spalten gleich hoch sind. */
@media (max-width: 1099.98px) {
  .hero__check-tt { font-size: clamp(0.75rem, 3.55vw, 0.85rem); }
  .hero__check-sub { font-size: clamp(0.65rem, 3.05vw, 0.73rem); }
}
@media (max-width: 359.98px) {
  .hero__text > .hero__checks { --chk-cgap: 0.55rem; }
  .hero__text > .hero__checks li { column-gap: 6px; grid-template-columns: 16px minmax(0, 1fr); }
  .hero__check-ic, .hero__check-ic svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   Untere Kontaktleiste: Telefon links, Direktchat quadratisch in der Mitte,
   WhatsApp rechts. Farbfuehrung wie im Hero: Blau primaer, Weiss sekundaer.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .action-bar {
    gap: 0.5rem;
    padding: 0.4rem 0.75rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(9, 28, 62, 0.08);
    box-shadow: 0 -8px 24px -18px rgba(9, 28, 62, 0.5);
  }
  .action-bar a,
  .action-bar button {
    height: 42px;
    min-height: 42px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
  }

  /* Telefon: der dominante Weg, gleiche Farbe wie der Hero-Button */
  .action-bar__call {
    grid-column: 3;
    background: var(--accent);
    color: #fff;
    box-shadow:
      0 1px 2px rgba(9, 28, 62, 0.08),
      0 8px 18px -12px rgba(1, 72, 195, 0.55);
  }
  .action-bar__call:active { background: #0b3ea0; }

  /* Direktchat: quadratisch, dunkelblau, mittig */
  .action-bar__chat {
    grid-column: 2;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
  }

  /* WhatsApp: sekundaer, weiss mit gruenem Zeichen */
  .action-bar__wa {
    grid-column: 1;
    background: #fff;
    color: var(--ink);
    border: 1px solid rgba(9, 28, 62, 0.1);
    box-shadow: 0 1px 2px rgba(16, 33, 54, 0.06);
  }
  .action-bar__wa svg { color: #25a366; }
  .action-bar__wa:active { background: #f2f6fb; }
}

/* Direktchat in Mint-Pastell statt Dunkelblau. Das Zeichen bleibt dunkelblau,
   damit der Kontrast auf der hellen Flaeche ausreicht. */
@media (max-width: 1099.98px) {
  .action-bar__chat {
    background: #d9edea;
    border: 1px solid rgba(9, 62, 58, 0.1);
    box-shadow: 0 1px 2px rgba(16, 33, 54, 0.06);
  }
  .action-bar__chat svg { color: var(--brand-dark-flat); }
  .action-bar__chat:active { background: #c8e4e0; }
}

/* Kontaktleiste: keine Umrandungen mehr. Weiss auf Weiss traegt sonst nicht,
   deshalb uebernehmen WhatsApp und Direktchat denselben leichten Schatten
   wie die sekundaeren Buttons im Hero. */
@media (max-width: 1099.98px) {
  .action-bar a,
  .action-bar button { border: 0; }

  .action-bar__wa,
  .action-bar__chat {
    background: #fff;
    border: 0;
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.08),
      0 10px 22px -16px rgba(9, 28, 62, 0.45);
  }
  .action-bar__wa:active,
  .action-bar__chat:active { background: #f2f6fb; }
  .action-bar__chat svg { color: var(--brand-dark-flat); }
}

/* Schatten in der Kontaktleiste etwas kraeftiger, damit die Buttons klarer
   auf der weissen Leiste aufliegen. */
@media (max-width: 1099.98px) {
  .action-bar__wa,
  .action-bar__chat {
    box-shadow:
      0 1px 2px rgba(16, 33, 54, 0.1),
      0 6px 14px -8px rgba(9, 28, 62, 0.42),
      0 14px 26px -18px rgba(9, 28, 62, 0.5);
  }
  .action-bar__call {
    box-shadow:
      0 1px 2px rgba(9, 28, 62, 0.12),
      0 6px 14px -8px rgba(1, 72, 195, 0.5),
      0 14px 26px -16px rgba(1, 72, 195, 0.55);
  }
}

/* ==========================================================================
   Signatur und Bewertung bilden einen Block
   Beide mittig, eng beieinander, und mit groesserem Abstand nach oben und
   unten von Beschreibung und Vorteilen abgesetzt.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .hero__lead-name {
    margin-top: 1.375rem;      /* 22px Abstand zur Beschreibung */
    text-align: center;
  }
  .hero__text > .hero__rating--mob {
    margin-top: 0.5rem;        /* 8px, haelt die Bewertung an der Signatur */
    justify-content: center;
    justify-self: center;
  }
  .hero__text > .hero__checks { margin-top: 1.5rem; }   /* 24px */
}

/* Bewertungszeile auf die Breite der Signatur bringen, damit beide Zeilen
   als ein Block stehen. Werte aus der gemessenen Breite abgeleitet. */
@media (max-width: 1099.98px) {
  .hero__text > .hero__rating--mob { gap: 0.3rem; }
  .hero__text > .hero__rating--mob .hero__rating-stars svg { width: 14px; height: 14px; }
  .hero__text > .hero__rating--mob .hero__rating-score { font-size: 0.85rem; }
  .hero__text > .hero__rating--mob .hero__rating-text { font-size: 0.65rem; }
  .hero__text > .hero__rating--mob .hero__rating-g svg { width: 14px; height: 14px; }
}

/* Haken als gefuelltes Kreis-Zeichen im Akzentblau */
@media (max-width: 1099.98px) {
  .hero__check-ic { color: var(--accent); }
  .hero__check-ic svg { width: 100%; height: 100%; }
}

/* Die Zeile "Seit ueber 18 Jahren ..." steht jetzt hinter der Aufzaehlung.
   Der Abstand wandert deshalb von unten nach oben. */
@media (max-width: 1099.98px) {
  .hero__lead-body > .hero__lead-l1:last-child { margin: 0.25rem 0 0; }
}

/* Stadtzeile in der H1 der Stadtseiten. Steht immer in einer eigenen Zeile,
   damit "Schadengutachten" wie auf der Startseite ungebrochen bleibt. */
.hero__h1-city { display: block; }

/* Auf den Stadtseiten steht hinter "Schadengutachten" noch die Stadtzeile.
   Dadurch griff :last-of-type nicht mehr auf das richtige Wort und die
   ganze Ueberschrift blieb dunkel. Ein spaeteres Geschwister-Element
   trifft "Schadengutachten" auf allen Seiten. */
@media (max-width: 1099.98px) {
  .hero__stage h1 .hero__accent ~ .hero__accent { color: var(--accent); }
  .hero__stage h1 .hero__h1-city { color: var(--brand-dark-flat); }
}

/* ==========================================================================
   Menue: Startpunkt der jeweiligen Stadt steht ganz oben
   Er ist der einzige Eintrag mit Flaeche, damit die Liste darunter ruhig
   bleibt und man sofort sieht, auf welcher Stadtseite man ist.
   ========================================================================== */
.site-drawer nav .site-drawer__home {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
  font-weight: 700;
  color: var(--brand-dark-flat);
  background: var(--accent-soft);
}
.site-drawer nav .site-drawer__home::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10.2V21h6v-6h6v6h6V10.2z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 3 10.2V21h6v-6h6v6h6V10.2z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.site-drawer nav .site-drawer__home:hover {
  background: var(--accent);
  color: #fff;
}

/* Beide Akzentwoerter der Ueberschrift in Royalblau: "Unfall" und
   "Schadengutachten". "Kfz", "und" und die Stadtzeile bleiben dunkelblau. */
@media (max-width: 1099.98px) {
  .hero__stage h1 .hero__accent { color: var(--accent); }
}

/* ==========================================================================
   Kopfzeile: Logo, Navigation und Telefonknopf teilen sich den Platz
   Bisher durften alle drei gleich stark schrumpfen. Weil die Navigation
   nicht kleiner wird, war das Logo zwischen 1100 und 1300 px auf wenige
   Pixel zusammengedrueckt. Jetzt behalten Logo und Knopf ihre Breite,
   die Navigation passt sich in Stufen an - und unter 1250 px, wo zehn
   Punkte schlicht nicht mehr hinpassen, uebernimmt das Menue.
   ========================================================================== */
@media (min-width: 1100px) {
  .site-top__row > .site-logo,
  .site-top__row > .site-actions { flex: 0 0 auto; }
  .site-nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
}

/* Zu schmal fuer die volle Leiste: Burger statt Navigation.
   In dieser Breite steht der Kopf auf hellem Grund, die Striche des
   Burgers sind dort aber weiss - deshalb dieselbe Faerbung wie im
   gescrollten Zustand. */
@media (min-width: 1100px) and (max-width: 1249.98px) {
  .site-nav { display: none; }
  .site-burger {
    display: inline-flex;
    border-color: var(--line-strong);
    background: var(--surface);
  }
  .site-burger span,
  .site-burger span::before,
  .site-burger span::after { background: var(--ink); }
}

@media (min-width: 1250px) and (max-width: 1439.98px) {
  .site-logo img { height: 48px; }
  .site-nav { gap: 0.1rem; }
  .site-nav a { font-size: 0.85rem; padding-inline: 0.3rem; }
}

@media (min-width: 1440px) and (max-width: 1799.98px) {
  .site-logo img { height: 62px; }
  .site-nav { gap: 0.15rem; }
  .site-nav a { font-size: 0.92rem; padding-inline: 0.5rem; }
}

/* Bilderreihe: Vergroesserung bei Maus-Over wieder auf den urspruenglichen
   Wert. Die Stufen fuer breite Bildschirme entfallen damit ebenfalls. */
@media (min-width: 1100px) {
  .hero__rail-item:hover { transform: scale(1.22); }
}

/* ==========================================================================
   Rechtsseiten: Impressum und Datenschutz
   Gleiches Raster wie die uebrigen Abschnitte, der Text steht in ruhigen
   weissen Karten. Eine Spalte, damit lange Absaetze lesbar bleiben.
   ========================================================================== */
.legal {
  display: grid;
  gap: 0.9rem;
  max-width: 54rem;
  margin: 0 auto;
}
.legal__card {
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-lg, 18px);
  background: var(--surface, #fff);
  box-shadow:
    0 1px 2px rgba(16, 33, 54, 0.05),
    0 18px 34px -26px rgba(9, 28, 62, 0.4);
}
.legal__card h2 {
  margin: 0 0 0.55rem;
  font-size: 1.12rem;
  font-weight: var(--fw-bold, 700);
  letter-spacing: -0.015em;
  color: var(--brand-dark-flat);
}
.legal__card h3 {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.98rem;
  font-weight: var(--fw-bold, 700);
  color: var(--ink);
}
.legal__card p,
.legal__card li {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--ink-soft, #44506a);
}
.legal__card p:last-child,
.legal__card li:last-child { margin-bottom: 0; }
.legal__card ul,
.legal__card ol { margin: 0 0 0.2rem; padding-left: 1.15rem; }
.legal__card a { color: var(--accent); text-underline-offset: 2px; }

.legal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

@media (max-width: 599.98px) {
  .legal__card { padding: 1.15rem 1.1rem; }
  .legal__card h2 { font-size: 1.04rem; }
}

/* Rechtsseiten haben nur einen Abschnitt: der Zaehler im Kicker ergibt
   dort keinen Sinn. Kopf und Karten stehen in derselben Spalte. */
.band--legal .kicker::before { content: none; }
.band--legal .section-head {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

/* Auf dem Handy traegt sonst der Hero das Logo, im Kopf ist es dort auf
   1 px zusammengedrueckt. Rechtsseiten haben keinen Hero - dort muss das
   Logo im Kopf seine Breite behalten. */
body.legal-page .site-top__row > .site-logo { flex: 0 0 auto; }
body.legal-page .site-top__row > .site-actions { flex: 0 0 auto; }

/* home.css blendet auf Rechtsseiten die Navigation in jeder Breite ein und
   den Burger aus - das stammt aus der alten Fassung und sprengt auf dem
   Handy die Kopfzeile. Unter 1100 px gilt hier dasselbe wie sonst. */
@media (max-width: 1099.98px) {
  body.legal-page .site-nav { display: none; }
  body.legal-page .site-tel { display: none; }
  body.legal-page .site-burger { display: grid; }
}
/* Zwischen 1100 und 1250 px passt die volle Leiste auch hier nicht */
@media (min-width: 1100px) and (max-width: 1249.98px) {
  body.legal-page .site-nav { display: none; }
  body.legal-page .site-burger { display: inline-flex; }
}

/* ==========================================================================
   Fusszeile: Spaltentitel sind keine Ueberschriften mehr
   Sie beschriften Linkgruppen, gliedern aber keinen Inhalt. Als <h4> zaehlten
   sie in der SEO-Pruefung als Ueberschriften mit und verschoben das
   Verhaeltnis Ueberschriften zu Text. Optik unveraendert.
   ========================================================================== */
.site-footer .footer-head {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}
.site-footer .footer-head.footer-partner-head { margin-top: 1.5rem; }

/* Dasselbe fuer die Danke-Zeile im Schadenmelde-Fenster: sie war eine h3,
   ist aber eine Statusmeldung. Die Werte stammen aus der bisherigen Regel
   .claim__done h3, damit sich optisch nichts aendert. */
.claim__done .claim__thanks-title {
  margin: 0;
  color: #000;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Cookie-Einstellungen oeffnen ein Fenster, sie fuehren nirgendwo hin.
   Als <a href="#"> zaehlten sie in der SEO-Pruefung als interne Links mit
   mehrfach gleichem Linktext. Jetzt Schaltflaeche, Optik unveraendert. */
.consent-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.consent-link:hover { color: var(--accent); }
.site-footer .footer-bottom .consent-link {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer .footer-bottom .consent-link:hover { text-decoration: underline; }
@media (max-width: 1099.98px) {
  .site-footer .footer-bottom .consent-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.15rem;
  }
}

/* ==========================================================================
   Cookie-Banner verdeckt nichts mehr
   Der Banner liegt fest am unteren Rand. Auf dem Handy lag er dadurch
   beim ersten Besuch genau ueber "Jetzt anrufen" und WhatsApp. Solange er
   steht, bekommt die Seite unten Platz in Bannerhoehe - die Knoepfe sind
   dann durch Scrollen erreichbar. Der Wert kommt aus sv-consent.js.
   ========================================================================== */
body.sv-consent-open {
  padding-bottom: calc(var(--sv-consent-h, 0px) + 0.9rem);
  transition: padding-bottom 0.28s var(--ease, ease);
}
/* Steht zusaetzlich die Kontaktleiste, addieren sich beide Hoehen */
@media (max-width: 1099.98px) {
  body.sv-consent-open.action-bar-visible {
    padding-bottom: calc(
      var(--sv-consent-h, 0px) + 54px + 0.9rem + env(safe-area-inset-bottom, 0px)
    );
  }
}

/* ------------------------------------------------------------------
   Mobil: nur EIN Chat-Einstieg
   Der schwebende Chat-Knopf unten rechts entfaellt auf Handy und
   Tablet - der Direktchat wird ueber die Kontaktleiste (CTA-Bar)
   und ueber den Hero-Knopf geoeffnet. Damit gibt es dort kein
   zweites Chat-Symbol mehr.
   ------------------------------------------------------------------ */
@media (max-width: 1099.98px) {
  .wa-chat__launcher,
  .wa-chat.has-unread:not(.is-open) .wa-chat__launcher,
  .wa-chat.has-toast:not(.is-open) .wa-chat__launcher {
    display: none;
  }

  /* Die Nachrichtenblase von Carsten haengt sonst am entfernten
     Knopf - sie sitzt jetzt direkt ueber der Kontaktleiste. */
  .wa-chat.has-unread:not(.is-open) .wa-chat__toast,
  .wa-chat.has-toast:not(.is-open) .wa-chat__toast {
    bottom: 0;
  }
  .wa-chat.has-unread,
  .wa-chat.has-toast {
    width: auto;
  }
}


/* ==========================================================================
   Schaden-Melden-Overlay: dieselbe Gestaltung auch auf dem Desktop
   Die Formularstile lagen bisher nur im Mobil-Block, weil das Overlay dort
   nur ueber die Mobilansicht erreichbar war. Seit der Hero-Button "Schaden
   online melden" es auch am Desktop oeffnet, standen die Felder dort ohne
   Gestaltung (Browser-Standard). Hier dieselben Regeln fuer >=1100px.
   ========================================================================== */
@media (min-width: 1100px) {
  .claim__form {
      display: grid;
      gap: 1.35rem;
    }
  .claim__group {
      margin: 0;
      padding: 0;
      border: 0;
      min-width: 0;
    }
  .claim__legend {
      margin: 0 0 0.7rem;
      padding: 0;
      color: var(--ink);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
  .claim__opt {
      font-style: normal;
      font-weight: 500;
      color: var(--muted);
    }
  .claim__row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.65rem;
      align-items: start;
    }
  .claim__row .claim__field {
      margin: 0;
      min-width: 0;
    }
  .claim__field {
      display: grid;
      gap: 0.35rem;
      margin: 0 0 0.65rem;
    }
  .claim__field:last-child {
      margin-bottom: 0;
    }
  .claim__label {
      color: var(--ink-soft);
      font-size: 0.74rem;
      font-weight: 600;
    }
  .claim__label em {
      font-style: normal;
      font-weight: 500;
      color: var(--muted);
    }
  .claim__field input {
      box-sizing: border-box;
      width: 100%;
      height: 3rem;
      min-height: 3rem;
      max-height: 3rem;
      padding: 0.75rem 0.9rem;
      border: 1px solid var(--line-strong);
      border-radius: 6px;
      background: #fff;
      color: var(--ink);
      font: inherit;
      font-size: 1rem;
      appearance: none;
      -webkit-appearance: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
  .claim__field input::placeholder {
      color: #9aa3ad;
    }
  .claim__field input:focus {
      outline: none;
      border-color: var(--accent-deep);
      box-shadow: 0 0 0 3px rgba(1, 58, 159, 0.12);
    }
  .claim__field input.is-invalid {
      border-color: #c0392b;
    }
  .claim__choice {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.65rem;
      margin-bottom: 0.75rem;
      align-items: stretch;
    }
  .claim__card {
      position: relative;
      display: flex;
      margin: 0;
      height: 100%;
      min-width: 0;
      cursor: pointer;
    }
  .claim__card input {
      position: absolute;
      inset: 0;
      opacity: 0;
      margin: 0;
      cursor: pointer;
    }
  .claim__card-face {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 0.2rem;
      box-sizing: border-box;
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      min-height: 7rem;
      padding: 0.95rem 0.9rem;
      border: 0;
      border-radius: 8px;
      background: var(--chip);
      box-shadow: none;
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }
  .claim__card-ic {
      display: grid;
      place-items: center;
      width: 1.7rem;
      height: 1.7rem;
      margin-bottom: 0.35rem;
      color: var(--accent-deep);
    }
  .claim__card-ic svg {
      width: 1.55rem;
      height: 1.55rem;
    }
  .claim__card-face strong {
      color: var(--ink);
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.2;
    }
  .claim__card-face > span:last-child {
      color: var(--muted);
      font-size: 0.72rem;
      line-height: 1.35;
      max-width: 100%;
    }
  .claim__card input:focus-visible + .claim__card-face {
      box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.22);
    }
  .claim__card input:checked + .claim__card-face {
      border: 0;
      background: var(--brand-dark-grad);
      box-shadow: none;
      color: #fff;
    }
  .claim__card input:checked + .claim__card-face .claim__card-ic,
    .claim__card input:checked + .claim__card-face strong {
      color: #fff;
    }
  .claim__card input:checked + .claim__card-face > span:last-child {
      color: rgba(255, 255, 255, 0.78);
    }
  .claim__contact[hidden] {
      display: none !important;
    }
  .claim__contact {
      margin-top: 0.15rem;
    }
  .claim__row + .claim__row {
      margin-top: 0.65rem;
    }
  .claim__q {
      margin: 0.85rem 0 0.55rem;
      color: var(--ink);
      font-size: 0.82rem;
      font-weight: 700;
    }
  .claim__q--flush {
      margin-top: 0;
    }
  .claim__seg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.55rem;
      border: 0;
      border-radius: 0;
      overflow: visible;
      background: transparent;
    }
  .claim__seg-item {
      position: relative;
      margin: 0;
      cursor: pointer;
    }
  .claim__seg-item + .claim__seg-item {
      border-left: 0;
    }
  .claim__seg-item input {
      position: absolute;
      inset: 0;
      opacity: 0;
      margin: 0;
      cursor: pointer;
    }
  .claim__seg-item span {
      display: grid;
      place-items: center;
      min-height: 2.85rem;
      border: 0;
      border-radius: 8px;
      color: var(--ink-soft);
      font-size: 0.92rem;
      font-weight: 700;
      background: var(--chip);
      transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    }
  .claim__seg-item input:checked + span {
      background: var(--brand-dark-grad);
      color: #fff;
    }
  .claim__seg-item input:focus-visible + span {
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 24, 72, 0.22);
    }
  .claim__submit {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 3.25rem;
      margin-top: 0.25rem;
      padding: 0.9rem 1.1rem;
      border: 0;
      border-radius: 6px;
      background: var(--accent-deep);
      color: #fff;
      font: inherit;
      font-size: 1.02rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: background 0.15s ease;
    }
  .claim__submit:active {
      background: var(--brand-deep);
    }
  .claim__submit:disabled {
      opacity: 0.72;
      cursor: wait;
    }
  .claim__note {
      margin: 0.55rem 0 0;
      color: var(--muted);
      font-size: 0.74rem;
      text-align: center;
      line-height: 1.4;
    }
  .claim__done {
      display: grid;
      gap: 0.55rem;
      padding: 1.5rem 0.2rem 0.4rem;
      text-align: center;
    }
  .claim__done[hidden] {
      display: none !important;
    }
  .claim__done-ic {
      display: grid;
      place-items: center;
      width: 3rem;
      height: 3rem;
      margin: 0 auto 0.35rem;
      color: var(--accent-deep);
    }
  .claim__done-ic svg {
      width: 3rem;
      height: 3rem;
    }
  .claim__done h3 {
      margin: 0;
      color: #000;
      font-size: 1.2rem;
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.25;
    }
  .claim__done p {
      margin: 0;
      color: var(--ink-soft);
      font-size: 0.9rem;
      line-height: 1.5;
    }
  .claim__form.is-sent {
      display: none;
    }
}

/* Desktop-Feinschliff: Panel an den Inhalt anpassen statt volle Hoehe */
@media (min-width: 1100px) {
  .claim-popup__panel {
    width: min(36rem, 92vw);
    max-width: min(36rem, 92vw);
    height: auto;
    max-height: min(88vh, 56rem);
    margin: auto;
    border-radius: 18px;
    box-shadow: 0 40px 90px -40px rgba(9, 28, 62, 0.75);
  }
  .claim-popup__body {
    padding: 1.25rem 1.5rem 1.6rem;
  }
  .claim-popup__header {
    padding: 1.25rem 1.5rem 0.9rem;
  }
}

/* Groesseres Panel und weich gezeichneter Hintergrund */
@media (min-width: 1100px) {
  .claim-popup__panel {
    width: min(42rem, 92vw);
    max-width: min(42rem, 92vw);
    max-height: min(90vh, 62rem);
  }
  .claim-popup__body { padding: 1.4rem 1.85rem 1.9rem; }
  .claim-popup__header { padding: 1.5rem 1.85rem 1rem; }
  .claim-popup__backdrop {
    background: rgba(6, 20, 44, 0.42);
    -webkit-backdrop-filter: blur(9px) saturate(115%);
    backdrop-filter: blur(9px) saturate(115%);
  }
}

/* ==========================================================================
   Reihenfolge beim Oeffnen: erst legt sich die Unschaerfe weich ueber die
   Seite, danach graut der Hintergrund ab, zuletzt faehrt das Panel herein.
   Dafuer liegt die Abdunklung in einer eigenen Ebene (::after) - sonst
   liefen Unschaerfe und Farbe zwangslaeufig gleichzeitig.
   ========================================================================== */
@media (min-width: 1100px) {
  .claim-popup {
    transition:
      opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 1.3s linear;
  }
  .claim-popup__backdrop {
    background: transparent;
    opacity: 1;
    -webkit-backdrop-filter: blur(0px) saturate(100%);
    backdrop-filter: blur(0px) saturate(100%);
    transition:
      -webkit-backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1),
      backdrop-filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .claim-popup.is-open .claim-popup__backdrop {
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    backdrop-filter: blur(10px) saturate(115%);
  }
  /* Abdunklung kommt nach der Unschaerfe */
  .claim-popup__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 20, 44, 0.44);
    opacity: 0;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  }
  .claim-popup.is-open .claim-popup__backdrop::after { opacity: 1; }

  /* Panel zuletzt */
  .claim-popup__panel {
    transform: translate3d(0, 1.4rem, 0) scale(0.985);
  }
  .claim-popup.is-open .claim-popup__panel {
    transform: translate3d(0, 0, 0) scale(1);
    transition:
      opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.52s,
      transform 0.48s cubic-bezier(0.16, 1, 0.3, 1) 0.52s;
  }

  /* Schliessen in umgekehrter Reihenfolge */
  .claim-popup:not(.is-open) .claim-popup__panel {
    transition:
      opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1),
      transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .claim-popup:not(.is-open) .claim-popup__backdrop::after {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.16s;
  }
  .claim-popup:not(.is-open) .claim-popup__backdrop {
    transition:
      -webkit-backdrop-filter 0.36s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
      backdrop-filter 0.36s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
  }
}