/* ==========================================================================
   Schlichtes Design im Apple-Stil - nur Desktop (ab 1100 px)
   Wird nach home.css und home-extra.css geladen und legt sich als letzte
   Ebene darueber. Grundsaetze:
   - Weiss und helles Grau (#f2f4f5) wechseln sich ab, keine dunklen Flaechen
   - Schrift dunkelgrau (#14171a), Nebentexte grau, ein Akzent: Markenblau
   - grosse, ruhige Ueberschriften, viel Luft, runde Ecken, kaum Schatten
   - Karten heben sich nur ueber die Flaechenfarbe ab, nicht ueber Rahmen
   Zum Abschalten den <link> auf diese Datei aus den Seiten entfernen.
   ========================================================================== */

/* Hinweiskarte "Unsicher, was jetzt zu tun ist?" im Hero: vorerst nur auf
   dem Desktop, die Handyansicht bleibt unveraendert. */
.hero__help { display: none; }
/* Vertrauenszeile im Hero (Google-Bewertung + DEKRA): der Rahmen wirkt
   ausserhalb des Desktops nicht, das DEKRA-Abzeichen ist vorerst nur dort */
.hero__proof { display: contents; }
.hero__cert { display: none; }

@media (min-width: 1100px) {
  :root {
    --ap-ink: #14171a;
    --ap-ink-2: #6e6e73;
    --ap-ink-3: #86868b;
    --ap-bg: #ffffff;
    --ap-bg-2: #f2f4f5;
    --ap-line: #d2d2d7;
    --ap-accent: #0148c3;
    --ap-accent-hover: #013a9f;
    --ap-accent-soft: rgba(1, 72, 195, 0.07);
    --ap-radius: 22px;
    --ap-radius-sm: 14px;
    --ap-pad: clamp(5.5rem, 9vw, 8.5rem);
  }

  body {
    color: var(--ap-ink);
    background: var(--ap-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ------------------------------------------------------------------------
     Abschnitte: Abstaende und Flaechenwechsel
     ------------------------------------------------------------------------ */
  body section.band {
    padding-block: var(--ap-pad);
    background: var(--ap-bg);
  }
  body #ablauf-kurz,
  body #leistungen-fahrzeuge,
  body #standorte,
  body .stepband {
    background: var(--ap-bg-2);
  }
  body #ueber-mich,
  body #google-bewertungen,
  body #faq,
  body #auszahlung,
  body #einsatzgebiet {
    background: var(--ap-bg);
  }

  /* Kopf eines Abschnitts: mittig, gross, ruhig */
  body .section-head {
    max-width: 52rem;
    margin: 0 auto clamp(3rem, 5vw, 4.5rem);
    text-align: center;
  }
  body .section-head h2,
  body .section-head--center h2 {
    margin: 0 0 1rem;
    font-size: clamp(2.4rem, 3.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.035em;
    color: var(--ap-ink);
  }
  body .section-head p {
    max-width: 40rem;
    margin-inline: auto;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ap-ink-2);
  }
  /* Kopf in einer Spalte (Auszahlung, Kontakt): linksbuendig */
  body .payout .section-head,
  body .cta .section-head {
    margin: 0 0 2rem;
    text-align: left;
  }
  body .payout .section-head p { margin-inline: 0; }

  /* Kleine Zeile ueber der Ueberschrift: nur Text in Markenblau */
  body .kicker,
  body .kicker--light,
  body .cta .kicker {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ap-accent);
  }
  body .kicker::before { content: none; }

  /* ------------------------------------------------------------------------
     Buttons: Pillen, flach, ohne Verlauf und Schatten
     ------------------------------------------------------------------------ */
  body .btn {
    border-radius: 980px;
    box-shadow: none;
    background-image: none;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  body .btn--primary,
  body .btn--light,
  body .btn--claim {
    background: var(--ap-accent);
    border-color: var(--ap-accent);
    color: #fff;
  }
  body .btn--primary:hover,
  body .btn--light:hover,
  body .btn--claim:hover {
    background: var(--ap-accent-hover);
    border-color: var(--ap-accent-hover);
    color: #fff;
    transform: none;
    box-shadow: none;
  }

  /* ------------------------------------------------------------------------
     Kopfleiste: hell und leicht durchscheinend
     ------------------------------------------------------------------------ */
  body .site-top:not(.is-scrolled) {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
  }
  body .site-top:not(.is-scrolled) .site-nav a,
  body .site-top:not(.is-scrolled) .site-contact {
    color: rgba(20, 23, 26, 0.8);
    font-weight: 500;
  }
  body .site-top:not(.is-scrolled) .site-nav a:hover,
  body .site-top:not(.is-scrolled) .site-nav a.is-active,
  body .site-top:not(.is-scrolled) .site-contact:hover {
    color: var(--ap-ink);
  }
  body .site-top .site-tel { border-radius: 980px; }

  /* ------------------------------------------------------------------------
     Hero
     ------------------------------------------------------------------------ */
  body .hero {
    background: var(--ap-bg);
  }
  body .hero::before,
  body .hero::after { background: none; }
  body .hero__eyebrow-line { display: none; }
  body .hero__eyebrow {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ap-accent);
  }
  body .hero h1 {
    color: var(--ap-ink);
    letter-spacing: -0.04em;
  }
  body .hero__lead {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ap-ink-2);
  }
  body .hero__lead strong,
  body .hero__lead b { color: var(--ap-ink); }
  body .hero__rating {
    border: 0;
    background: var(--ap-bg-2);
    box-shadow: none;
  }
  body .hero .hero__cta .btn {
    border-radius: 980px;
    box-shadow: none;
  }
  body .hero .hero__cta .btn--direkt {
    background: var(--ap-bg-2);
    border-color: transparent;
  }
  body .hero__facts {
    border: 0;
    border-radius: var(--ap-radius);
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 40px -12px rgba(0, 0, 0, 0.12);
  }

  /* ------------------------------------------------------------------------
     Gutachten (Erklaerung)
     ------------------------------------------------------------------------ */
  body .explain__media,
  body .explain__media img {
    border-radius: var(--ap-radius);
    box-shadow: none;
  }
  body .explain__list li {
    border-color: var(--ap-line);
  }
  body .explain__list h3 {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    color: var(--ap-ink);
  }
  body .explain__list p { color: var(--ap-ink-2); }
  body .note-important {
    border: 0;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-bg-2);
    color: var(--ap-ink-2);
  }
  body .note-important strong { color: var(--ap-ink); }

  /* ------------------------------------------------------------------------
     Ueber mich: helle Karte statt dunkelblauer
     ------------------------------------------------------------------------ */
  body .profile__card {
    background: var(--ap-bg-2);
    color: var(--ap-ink-2);
    border-radius: var(--ap-radius);
    box-shadow: none;
  }
  body .profile__card::before,
  body .profile__card::after { content: none; }
  body .profile__card h2 {
    color: var(--ap-ink);
    letter-spacing: -0.035em;
  }
  body .profile__card .profile__role { color: var(--ap-accent); }
  body .profile__card .profile__lead { color: var(--ap-ink); }
  body .profile__card .profile__text { color: var(--ap-ink-2); }
  body .profile__card a:not(.btn) { color: var(--ap-accent); }
  body .profile__card .profile__list { border-color: var(--ap-line); }
  body .profile__card .profile__list li { color: var(--ap-ink); }
  body .profile__card .profile__list li::before {
    background-color: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .profile__shots picture,
  body .profile__shots img {
    border-radius: var(--ap-radius);
    box-shadow: none;
  }

  /* ------------------------------------------------------------------------
     Ablauf in 4 Schritten
     ------------------------------------------------------------------------ */
  body .step-card {
    padding: 2rem 1.75rem;
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-bg);
    box-shadow: none;
  }
  body .step-card:hover {
    border-color: transparent;
    box-shadow: 0 10px 40px -16px rgba(0, 0, 0, 0.14);
  }
  body .step-card::after {
    top: 1.6rem;
    right: 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ap-ink-3);
    opacity: 1;
    -webkit-text-stroke: 0;
  }
  body .step-card__icon {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
    border-radius: 12px;
  }
  body .step-card h3 {
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    color: var(--ap-ink);
  }
  body .step-card p { color: var(--ap-ink-2); }

  /* ------------------------------------------------------------------------
     Auszahlung
     ------------------------------------------------------------------------ */
  body .payout__points li { color: var(--ap-ink-2); }
  body .payout__points li strong { color: var(--ap-ink); }
  body .payout__cta {
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-bg-2);
    box-shadow: none;
  }
  body .calc-card {
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-bg-2);
    box-shadow: none;
    overflow: hidden;
  }
  body .calc-card__head {
    background: none;
    border-color: var(--ap-line);
  }
  body .calc-card__rows > div { border-color: var(--ap-line); }
  body .calc-card__total {
    background: var(--ap-bg);
  }

  /* ------------------------------------------------------------------------
     Fahrzeugtypen: gerade Kacheln, Beschriftung im Bild
     ------------------------------------------------------------------------ */
  body .fleet-collage {
    --fleet-skew: 0deg;
    --fleet-unskew: 0deg;
    margin-inline: 0;
    column-gap: 1.25rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body .fleet-item:nth-child(even) { --fleet-ratio: 4 / 5; }
  body .fleet-tile {
    aspect-ratio: 4 / 5;
    border-radius: var(--ap-radius);
    box-shadow: none;
    transform: none;
  }
  body .fleet-item:hover .fleet-tile {
    transform: none;
    box-shadow: none;
  }
  body .fleet-tile__media { inset: 0; transform: none; }
  body .fleet-tile::after {
    height: 45%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  }
  body .fleet-tile__bar,
  body .fleet-item:nth-child(even) .fleet-tile__bar {
    padding: 1.4rem 1.5rem;
    background: none;
  }
  body .fleet-tile__bar-inner {
    transform: none;
    text-align: left;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
  }

  /* ------------------------------------------------------------------------
     Bewertungen
     ------------------------------------------------------------------------ */
  body .gscore {
    border: 0;
    background: none;
    box-shadow: none;
  }
  body .gscore__head {
    border-radius: var(--ap-radius);
    background: var(--ap-bg-2);
    color: var(--ap-ink);
    overflow: hidden;
  }
  body .gscore__head::before,
  body .gscore__head::after { content: none; }
  body .gscore__label { color: var(--ap-ink-2); }
  body .gscore__value { color: var(--ap-ink); }
  body .gscore__count { color: var(--ap-ink-2); }
  body .gscore__count strong { color: var(--ap-ink); }
  body .gscore__cta {
    border-radius: 980px;
    background: var(--ap-accent);
    color: #fff;
  }
  body .gscore__reviews {
    gap: 1.25rem;
    margin-top: 1.25rem;
    border: 0;
    background: none;
  }
  body .grev {
    border: 0;
    border-radius: var(--ap-radius-sm);
    background: var(--ap-bg-2);
  }
  body .grev__text { color: var(--ap-ink-2); }
  body .gscore__foot {
    border: 0;
    background: none;
  }

  /* ------------------------------------------------------------------------
     Standorte
     ------------------------------------------------------------------------ */
  body .city-switch { justify-content: center; }
  body .city-switch a {
    border: 0;
    border-radius: 980px;
    background: var(--ap-bg);
    color: var(--ap-ink);
    box-shadow: none;
  }
  body .city-switch a:hover {
    background: var(--ap-bg);
    color: var(--ap-accent);
  }
  body .city-switch a[aria-current="page"] {
    background: var(--ap-accent);
    color: #fff;
  }

  /* ------------------------------------------------------------------------
     FAQ: Liste mit Haarlinien statt Kaesten
     ------------------------------------------------------------------------ */
  body .faq details,
  body .faq--cols__grid details {
    border: 0;
    border-bottom: 1px solid var(--ap-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  body .faq summary {
    padding-inline: 0;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ap-ink);
  }
  body .faq details p {
    padding-inline: 0;
    color: var(--ap-ink-2);
  }

  /* ------------------------------------------------------------------------
     Kontakt
     ------------------------------------------------------------------------ */
  body .cta {
    padding-block: var(--ap-pad);
    background: var(--ap-bg-2);
    color: var(--ap-ink);
  }
  body .cta::before,
  body .cta::after { content: none; }
  body .cta h2 {
    font-size: clamp(2.4rem, 3.6vw, 3.5rem);
    letter-spacing: -0.035em;
    color: var(--ap-ink);
  }
  body .cta__text p { color: var(--ap-ink-2); font-size: 1.15rem; }
  body .cta__card {
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-bg);
    box-shadow: none;
  }
  body .cta__row { border-color: var(--ap-line); }

  /* ------------------------------------------------------------------------
     Fusszeile
     ------------------------------------------------------------------------ */
  body .site-footer {
    background: var(--ap-bg-2);
    border-top: 1px solid var(--ap-line);
    color: var(--ap-ink-2);
  }
  body .site-footer .footer-claim {
    color: var(--ap-ink);
    letter-spacing: -0.03em;
  }
  body .site-footer .footer-head { color: var(--ap-ink); }
  body .site-footer a:not(.btn) { color: var(--ap-ink-2); }
  body .site-footer a:not(.btn):hover { color: var(--ap-ink); }

  /* ------------------------------------------------------------------------
     Feinschliff: Lesegroessen, Ueberschriftbreite, ein Akzent fuer Haken
     ------------------------------------------------------------------------ */
  body .section-head { max-width: 62rem; }
  body .section-head h2 { font-size: clamp(2.3rem, 3.3vw, 3.3rem); }

  body .explain__list p,
  body .step-card p,
  body .payout__points li,
  body .grev__text,
  body .faq details p,
  body .cta__text p,
  body .profile__card .profile__text {
    font-size: 1rem;
    line-height: 1.6;
  }
  body .explain__list-icon {
    border: 0;
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  /* Haken und Punkte in Markenblau statt Gruen */
  body .payout__points li::before,
  body .profile__list li::before {
    color: var(--ap-accent);
    background-color: var(--ap-accent-soft);
  }
  body .faq summary {
    padding-block: 1.35rem;
    font-size: 1.1rem;
  }
  body .faq summary::after,
  body .faq summary .faq__icon {
    background: none;
    color: var(--ap-ink-3);
  }
  body .grev {
    padding: 1.5rem;
  }
  body .cta__row-label {
    font-size: 1.1rem;
    color: var(--ap-ink);
  }
  body .cta__row-icon {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .cta__row-icon--wa {
    background: rgba(37, 211, 102, 0.12);
    color: #1f9d55;
  }

  /* ------------------------------------------------------------------------
     Hero neu: Text links senkrecht mittig, Foto als abgerundete Kachel
     rechts mit Abstand zum Rand, Vorteile als ruhiges 2x2-Raster unter den
     Buttons statt als breite Karte ueber dem Foto.
     ------------------------------------------------------------------------ */
  body .hero {
    --hero-photo-w: 42%;
    --hero-inset: clamp(1rem, 1.6vw, 1.75rem);
  }
  body .hero .hero__media {
    top: var(--hero-inset);
    bottom: var(--hero-inset);
    right: var(--hero-inset);
    left: auto;
    width: var(--hero-photo-w);
    border-radius: 32px;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body .hero .hero__media img { object-position: 55% 20%; }

  /* Textspalte endet mit Luft vor dem Foto */
  body .hero > .hero__content {
    margin-top: 0;
    margin-right: calc(var(--hero-photo-w) + var(--hero-inset) + clamp(2rem, 3.5vw, 4.5rem));
    max-width: 50rem;
  }
  body .hero .hero__text {
    justify-content: center;
    padding-block: clamp(2rem, 4vh, 3.5rem);
  }
  body .hero .hero__text h1 { margin-top: 0; }
  body .hero .hero__lead { max-width: 36rem; }

  /* Buttons: so breit wie ihr Inhalt, umbrechen statt quetschen */
  body .hero .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: none;
    margin-bottom: 0;
  }
  body .hero .hero__cta .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    min-height: 58px;
    padding: 0.6rem 1.35rem 0.6rem 0.7rem;
  }
  /* Keine kleinen Pfeile in den Pillen - spart Breite, wirkt ruhiger */
  body .hero .hero__cta .btn__chev { display: none; }
  /* Symbole frei stehend, ohne Kaestchen dahinter */
  body .hero .hero__cta .btn {
    gap: 0.6rem;
    padding-left: 1.4rem;
  }
  body .hero .hero__cta .btn__ic {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  body .hero .hero__cta .btn__ic svg {
    width: 1.2rem;
    height: 1.2rem;
  }
  body .hero .hero__cta .btn.btn--wa .btn__ic,
  body .hero .hero__cta .btn.btn--claim .btn__ic { background: none; }

  /* Mittlere Desktopbreiten: Foto etwas schmaler, Abstaende knapper */
  @media (max-width: 1699.98px) {
    body .hero { --hero-photo-w: 38%; }
    body .hero .hero__text { padding-block: 1.5rem; }
    body .hero .hero__text .hero__facts {
      margin-top: 2rem;
      padding-top: 1.5rem;
      gap: 1.25rem 2rem;
    }
  }

  /* Vorteile: 2x2, ohne Karte, durch eine Haarlinie abgesetzt */
  body .hero .hero__text .hero__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2.5rem;
    width: auto;
    max-width: none;
    margin-right: 0;
    margin-top: clamp(2.5rem, 4.5vh, 3.5rem);
    padding: clamp(1.75rem, 3.5vh, 2.25rem) 0 0;
    border: 0;
    border-top: 1px solid var(--ap-line);
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  body .hero .hero__fact {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0;
    border: 0;
  }
  body .hero .hero__fact-ic { flex: 0 0 auto; margin: 0; }
  body .hero .hero__fact-tx {
    display: grid;
    gap: 0.15rem;
  }
  /* Kleinere Laptops: Foto schmaler, damit die drei Buttons in eine Reihe
     passen */
  @media (max-width: 1439.98px) {
    body .hero { --hero-photo-w: 34%; }
  }
  body .hero .hero__fact::before,
  body .hero .hero__fact::after { content: none; }
  body .hero .hero__fact-ic {
    border: 0;
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .hero .hero__fact-title {
    font-size: 1rem;
    color: var(--ap-ink);
  }
  body .hero .hero__fact-desc {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ap-ink-2);
  }

  /* Rechtsseiten: Textkarten flaechig statt mit Schatten */
  body .legal__card {
    border-radius: var(--ap-radius);
    background: var(--ap-bg-2);
    box-shadow: none;
  }
  body .legal__card h2 { color: var(--ap-ink); }
  body .legal__card p,
  body .legal__card li { color: var(--ap-ink-2); }

  /* ------------------------------------------------------------------------
     Flaechenwechsel, seit das Schrittband direkt nach dem Hero steht:
     Hero W | Schritte G | Gutachten W | Ueber mich G | Ablauf W |
     (Einsatzgebiet W) | Auszahlung G | Fahrzeuge W | Bewertungen G |
     Standorte W | FAQ G | Kontakt W | Fusszeile G
     Karten nehmen jeweils die Gegenfarbe ihres Abschnitts an.
     ------------------------------------------------------------------------ */
  body #entlastung,
  body #ablauf-kurz,
  body #einsatzgebiet,
  body #leistungen-fahrzeuge,
  body #standorte,
  body .cta { background: var(--ap-bg); }
  body .stepband,
  body #ueber-mich,
  body #auszahlung,
  body #google-bewertungen,
  body #faq { background: var(--ap-bg-2); }

  body .profile__card { background: var(--ap-bg); }
  body .step-card { background: var(--ap-bg-2); }
  body .payout__cta,
  body .calc-card { background: var(--ap-bg); }
  body .calc-card__total { background: var(--ap-bg-2); }
  body .gscore__head,
  body .grev { background: var(--ap-bg); }
  body .city-switch a { background: var(--ap-bg-2); }
  body .city-switch a:hover { background: #e6e9eb; }
  body .city-switch a[aria-current="page"] { background: var(--ap-accent); }
  body .cta__card { background: var(--ap-bg-2); }

  /* ------------------------------------------------------------------------
     Hinweiskarte im Hero: milchiges Glas unten auf dem Foto
     ------------------------------------------------------------------------ */
  body .hero .hero__help {
    position: absolute;
    left: clamp(0.9rem, 1.4vw, 1.4rem);
    right: clamp(0.9rem, 1.4vw, 1.4rem);
    bottom: clamp(0.9rem, 1.4vw, 1.4rem);
    z-index: 2;
    display: block;
    max-width: 30rem;
    padding: clamp(1.2rem, 1.6vw, 1.6rem) clamp(1.25rem, 1.7vw, 1.7rem);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(1.6) blur(20px);
    backdrop-filter: saturate(1.6) blur(20px);
    box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.35);
    color: var(--ap-ink);
    pointer-events: auto;
  }
  body .hero__help p { margin: 0; }
  body .hero__help-kicker {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ap-accent);
  }
  body .hero__help-title {
    margin-top: 0.2rem !important;
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ap-ink);
  }
  body .hero__help-text {
    margin-top: 0.55rem !important;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ap-ink-2);
  }
  body .hero__help-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.1rem;
    margin-top: 1rem;
  }
  body .hero__help-call {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 980px;
    background: var(--ap-accent);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  body .hero__help-call svg { width: 1rem; height: 1rem; }
  body .hero__help-call:hover { background: var(--ap-accent-hover); color: #fff; }
  body .hero__help-wa {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ap-accent);
    text-decoration: none;
  }
  body .hero__help-wa::after { content: " \203A"; }
  body .hero__help-wa:hover { text-decoration: underline; text-underline-offset: 3px; }
  /* Das alte Abzeichen "Begutachtung vor Ort" wuerde mit der Karte kollidieren */
  body .hero .hero__media-badge { display: none; }

  /* ------------------------------------------------------------------------
     Hero entschlackt: weniger Text, eine klare Handlung
     ------------------------------------------------------------------------ */
  /* Keine senkrechten Trennlinien zwischen den Vorteilen. home-extra.css
     setzt sie mit !important (.hero__fact + .hero__fact), deshalb hier auch. */
  body .hero .hero__facts > .hero__fact:nth-child(n) {
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* Vertrauenszeile: Google-Bewertung und DEKRA-Abzeichen nebeneinander,
     beide exakt gleich gebaut (Hoehe, Grund, Schrift, Polsterung).
     Eigener Klassenname .hero__proof - .hero__trust ist in home.css schon
     als Raster mit Trennlinie belegt. */
  body .hero .hero__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.85rem 0 1rem;
  }
  body .hero .hero__proof .hero__rating,
  body .hero .hero__proof .hero__cert {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    height: 2.4rem;
    margin: 0;
    padding: 0 1rem 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--ap-bg-2);
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ap-ink);
    white-space: nowrap;
  }
  body .hero .hero__proof .hero__rating-stars svg {
    width: 0.95rem;
    height: 0.95rem;
  }
  body .hero .hero__proof .hero__rating-score {
    font-size: 0.875rem;
    font-weight: 700;
  }
  body .hero .hero__proof .hero__rating-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ap-ink-2);
  }
  body .hero .hero__proof .hero__rating-g svg {
    width: 1rem;
    height: 1rem;
  }
  body .hero .hero__proof .hero__cert svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--ap-accent);
  }
  /* FAQ in zwei Spalten: eine ungerade letzte Frage laeuft ueber die volle
     Breite, damit keine einzelne Frage halb in der letzten Zeile steht */
  body .faq--cols__grid > details:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Zwei Kontaktwege reichen: Schaden melden und WhatsApp */
  body .hero .hero__cta .btn--direkt { display: none; }
  /* Karte auf dem Foto: Frage als Titel, ein Satz darunter */
  body .hero__help { max-width: 26rem; }
  body .hero__help-title { margin-top: 0 !important; text-wrap: balance; }
  body .hero__help-text { margin-top: 0.4rem !important; font-size: 0.98rem; }
}

/* ==========================================================================
   Akzentfarbe Signalrot (Desktop)
   Signalrot statt Markenblau (vorher Orange): Markenfarbe mit
   Wiedererkennungswert zum schwarzen Logo, steht im Kfz-Umfeld fuer Unfall
   und Hilfe und hebt sich von Versicherungen und Pruefstellen ab, die fast
   alle blau auftreten. Sparsam eingesetzt fuer
   Buttons, Links, Akzentwoerter und kleine Symbole. Die blaue Kopfleiste
   im gescrollten Zustand bleibt auf Wunsch blau.
   ========================================================================== */
@media (min-width: 1100px) {
  :root {
    --accent: #d7141f;
    --accent-deep: #b0101a;
    --accent-soft: #fdecec;
    --accent-ice: #f4a3a8;
    --accent-hot: #d7141f;
    --ap-accent: #d7141f;
    --ap-accent-hover: #b0101a;
    --ap-accent-soft: rgba(215, 20, 31, 0.1);
  }

  /* Buttons mit fest eingetragenem Blauverlauf */
  body .hero .hero__cta .btn--claim,
  body .btn--claim,
  body .btn--primary,
  body .btn--light {
    background: var(--ap-accent);
    background-image: none;
    border-color: var(--ap-accent);
  }
  body .hero .hero__cta .btn--claim:hover,
  body .btn--claim:hover,
  body .btn--primary:hover,
  body .btn--light:hover {
    background: var(--ap-accent-hover);
    border-color: var(--ap-accent-hover);
  }

  /* Telefonknopf in der Kopfleiste (oben weiss) */
  body .site-top:not(.is-scrolled) .site-tel {
    background: var(--ap-accent);
    color: #fff;
  }
  body .site-top:not(.is-scrolled) .site-tel:hover { background: var(--ap-accent-hover); }
  body .site-top:not(.is-scrolled) .site-nav a::after { background: var(--ap-accent); }

  /* Schrittband: Nummern, "=" und Ergebniskarte */
  body .stepband__num {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .stepband__result {
    background: linear-gradient(160deg, #e8323c 0%, #d7141f 55%, #b0101a 100%);
    box-shadow: 0 24px 50px -28px rgba(176, 16, 26, 0.55);
  }
  body .stepband__cta { color: var(--ap-accent); }
  body .stepband__cta:hover { background: #fdecec; }

  /* Kopfleiste auch beim Scrollen hell statt blau: gleiches milchiges Weiss
     wie oben, dunkle Schrift, Logo im Original, Telefonknopf in Akzentfarbe */
  body .site-top.is-scrolled {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 24px -18px rgba(0, 0, 0, 0.25);
  }
  body .site-top.is-scrolled .site-logo img { filter: none; }
  body .site-top.is-scrolled .site-nav a,
  body .site-top.is-scrolled .site-contact {
    color: rgba(20, 23, 26, 0.8);
    font-weight: 500;
  }
  body .site-top.is-scrolled .site-nav a:hover,
  body .site-top.is-scrolled .site-nav a.is-active,
  body .site-top.is-scrolled .site-contact:hover {
    color: var(--ap-ink);
  }
  body .site-top.is-scrolled .site-nav a::after { background: var(--ap-accent); }
  body .site-top.is-scrolled .site-tel {
    background: var(--ap-accent);
    color: #fff;
  }
  body .site-top.is-scrolled .site-tel:hover { background: var(--ap-accent-hover); }
  body .site-top.is-scrolled .site-burger {
    border-color: var(--ap-line);
    background: #fff;
  }
  body .site-top.is-scrolled .site-burger span,
  body .site-top.is-scrolled .site-burger span::before,
  body .site-top.is-scrolled .site-burger span::after { background: var(--ap-ink); }
}

/* ==========================================================================
   Weisse Buttons werden schwarz mit weisser Schrift (Desktop):
   "Schaden melden" in der Ergebniskarte, Chat-Knopf (Direktchat),
   "Nach oben", Google-Abzeichen und Teilen-Knoepfe in der Fusszeile
   ========================================================================== */
@media (min-width: 1100px) {
  :root { --ap-black: #14171a; --ap-black-hover: #000000; }

  body .stepband__cta,
  body .site-footer .footer-rating,
  body .site-footer .footer-share-list a,
  body .back-top {
    border-color: var(--ap-black);
    background: var(--ap-black);
    color: #fff;
    box-shadow: none;
  }
  body .stepband__cta:hover,
  body .site-footer .footer-rating:hover,
  body .site-footer .footer-share-list a:hover,
  body .back-top:hover {
    border-color: var(--ap-black-hover);
    background: var(--ap-black-hover);
    color: #fff;
  }
  body .site-footer .footer-rating span:not(.footer-rating__stars),
  body .site-footer .footer-share-list a svg,
  body .site-footer .footer-share-list a i { color: #fff; }

  /* Chat-Knopf unten rechts (Direktchat) */
  body .wa-chat__launcher {
    background: var(--ap-black);
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  }
  body .wa-chat__launcher:hover {
    background: var(--ap-black-hover);
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.55);
  }
}

/* ==========================================================================
   Alle Buttons schwarz mit weisser Schrift (Desktop). Signalrot bleibt der
   Akzent fuer Woerter, Links, Symbole, das "=" und die Ergebniskarte.
   ========================================================================== */
@media (min-width: 1100px) {
  body .btn--claim,
  body .btn--primary,
  body .btn--light,
  body .hero .hero__cta .btn--claim,
  body .site-top .site-tel,
  body .site-top:not(.is-scrolled) .site-tel,
  body .site-top.is-scrolled .site-tel,
  body .hero__help-call,
  body .gscore__cta,
  body .city-switch a[aria-current="page"] {
    border-color: var(--ap-black);
    background: var(--ap-black);
    background-image: none;
    color: #fff;
  }
  body .btn--claim:hover,
  body .btn--primary:hover,
  body .btn--light:hover,
  body .hero .hero__cta .btn--claim:hover,
  body .site-top .site-tel:hover,
  body .site-top:not(.is-scrolled) .site-tel:hover,
  body .site-top.is-scrolled .site-tel:hover,
  body .hero__help-call:hover,
  body .gscore__cta:hover {
    border-color: var(--ap-black-hover);
    background: var(--ap-black-hover);
    color: #fff;
  }
}
@media (min-width: 1100px) {
  /* Restliche Knoepfe in Akzentfarbe: Anruf in der Fusszeile, Senden im Chat,
     Sprunglink "Zum Inhalt springen" */
  body .site-footer .footer-top .btn,
  body .site-footer .footer-top .btn--light,
  body .wa-chat__send,
  body .skip {
    border-color: var(--ap-black);
    background: var(--ap-black);
    background-image: none;
    color: #fff;
  }
  body .site-footer .footer-top .btn:hover,
  body .wa-chat__send:hover {
    border-color: var(--ap-black-hover);
    background: var(--ap-black-hover);
    color: #fff;
  }
}
@media (min-width: 1100px) {
  /* Ausgeblendete Knoepfe ebenfalls schwarz (Telefon im Hero, Senden in der
     Chat-Vorschau), falls sie eingeblendet werden */
  body .hero .hero__cta .btn--primary,
  body .wa-chat__preview-send {
    border-color: var(--ap-black);
    background: var(--ap-black);
    background-image: none;
    color: #fff;
  }

  /* Keine Leucht- oder Hebeeffekte beim Ueberfahren: nur der Farbton der
     Flaeche aendert sich leicht */
  body .btn,
  body .btn:hover,
  body .btn:focus-visible,
  body .hero .hero__cta .btn,
  body .hero .hero__cta .btn:hover,
  body .hero .hero__cta .btn--claim:hover,
  body .hero .hero__cta .btn--wa:hover,
  body .hero .hero__cta .btn--primary:hover,
  body .site-tel,
  body .site-tel:hover,
  body .hero__help-call:hover,
  body .gscore__cta:hover,
  body .stepband__cta:hover,
  body .city-switch a:hover,
  body .back-top:hover,
  body .footer-rating:hover,
  body .footer-share-list a:hover,
  body .wa-chat__launcher,
  body .wa-chat__launcher:hover,
  body .wa-chat__send:hover,
  body .wa-chat__preview-send:hover {
    box-shadow: none;
    transform: none;
    filter: none;
  }
  /* WhatsApp-Gruen beim Ueberfahren nur etwas dunkler */
  body .hero .hero__cta .btn--wa:hover { background: #1f9a5b; }
}

/* ==========================================================================
   Hinweiskarte angepinnt (Desktop): sobald der Hero aus dem Bild ist,
   gleitet eine Kopie der Karte oben rechts unter der Kopfleiste ein.
   Gesteuert von js/hero-help-pin.js ueber .is-visible.
   ========================================================================== */
.hero__help--pinned { display: none; }

@media (min-width: 1100px) {
  body .hero__help.hero__help--pinned {
    display: block;
    position: fixed;
    top: calc(var(--header-h, 76px) + 1rem);
    right: clamp(1rem, 2vw, 1.75rem);
    left: auto;
    bottom: auto;
    z-index: 190;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    padding: 1.3rem 1.4rem 1.25rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.05),
      0 24px 50px -22px rgba(0, 0, 0, 0.35);
    color: var(--ap-ink);
    /* Ausgangszustand: leicht nach oben versetzt, unsichtbar */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px) scale(0.97);
    transform-origin: top right;
    transition:
      opacity 0.35s ease,
      transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1),
      visibility 0s linear 0.55s;
  }
  body .hero__help.hero__help--pinned.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
      opacity 0.45s ease,
      transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1),
      visibility 0s;
  }
  body .hero__help--pinned .hero__help-title {
    padding-right: 1.75rem;
    font-size: 1.12rem;
  }
  body .hero__help--pinned .hero__help-text { font-size: 0.92rem; }
  body .hero__help--pinned .hero__help-actions { margin-top: 0.85rem; }

  /* Schliessen */
  body .hero__help-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: var(--ap-ink-2);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  body .hero__help-close svg { width: 0.9rem; height: 0.9rem; }
  body .hero__help-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--ap-ink);
  }
}

@media (min-width: 1100px) and (prefers-reduced-motion: reduce) {
  body .hero__help.hero__help--pinned,
  body .hero__help.hero__help--pinned.is-visible {
    transform: none;
    transition: opacity 0.2s ease, visibility 0s;
  }
}

/* --------------------------------------------------------------------------
   Angepinnte Karte (weiss): Telefon schwarz ueber die volle Breite, darunter
   WhatsApp und Direktchat als zwei gleich breite hellgraue Knoepfe
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {

  body .hero__help--pinned .hero__help-actions {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
  }
  body .hero__help--pinned .hero__help-call {
    justify-content: center;
    width: 100%;
    padding: 0.7rem 1rem;
  }
  body .hero__help--pinned .hero__help-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  body .hero__help--pinned .hero__help-wa,
  body .hero__help--pinned .hero__help-chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    border-radius: 980px;
    background: var(--ap-bg-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ap-ink);
    text-decoration: none;
    transition: background 0.2s ease;
  }
  body .hero__help--pinned .hero__help-wa::after { content: none; }
  body .hero__help--pinned .hero__help-wa svg,
  body .hero__help--pinned .hero__help-chat svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
  }
  body .hero__help--pinned .hero__help-wa:hover,
  body .hero__help--pinned .hero__help-chat:hover {
    background: #e8e8ed;
    color: var(--ap-ink);
    text-decoration: none;
  }
}
@media (min-width: 1100px) {
  /* Solange das Chatfenster offen ist, tritt die angepinnte Karte zurueck -
     sonst schaut sie oben hinter dem Chat hervor */
  body:has(.wa-chat.is-open) .hero__help.hero__help--pinned.is-visible {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px) scale(0.97);
    transition:
      opacity 0.25s ease,
      transform 0.35s ease,
      visibility 0s linear 0.35s;
  }
}

/* ==========================================================================
   HANDY UND TABLET (bis 1099 px): dasselbe Design wie auf dem Desktop
   Weiss und #f2f4f5 im Wechsel, Schrift #14171a, Akzent Signalrot #d7141f,
   Buttons schwarz mit weisser Schrift, WhatsApp gruen. Keine dunkelblauen
   Flaechen mehr. Aufbau und Reihenfolge der Handyansicht bleiben, nur Farben,
   Flaechen, Schrift und Karten werden angeglichen.
   ========================================================================== */
@media (max-width: 1099.98px) {
  :root {
    --ap-ink: #14171a;
    --ap-ink-2: #6e6e73;
    --ap-ink-3: #86868b;
    --ap-bg: #ffffff;
    --ap-bg-2: #f2f4f5;
    --ap-line: #d2d2d7;
    --ap-accent: #d7141f;
    --ap-accent-hover: #b0101a;
    --ap-accent-soft: rgba(215, 20, 31, 0.1);
    --ap-black: #14171a;
    --ap-black-hover: #000000;
    --ap-radius: 20px;
    --ap-wa: #25a35a;
    --ap-wa-hover: #1f9a5b;

    --accent: #d7141f;
    --accent-deep: #b0101a;
    --accent-soft: #fdecec;
    --accent-ice: #f4a3a8;
    --accent-hot: #d7141f;
    --ink: #14171a;
    --ink-soft: #6e6e73;
  }

  body {
    color: var(--ap-ink);
    -webkit-font-smoothing: antialiased;
  }

  /* ---------------- Flaechenwechsel wie auf dem Desktop ------------------ */
  body section.band { padding-block: 4rem; background: var(--ap-bg); }
  body #entlastung,
  body #ablauf-kurz,
  body #einsatzgebiet,
  body #leistungen-fahrzeuge,
  body #standorte,
  body .cta { background: var(--ap-bg); }
  body .stepband,
  body #ueber-mich,
  body #auszahlung,
  body #google-bewertungen,
  body #faq { background: var(--ap-bg-2); }

  /* ---------------- Ueberschriften und kleine Zeile darueber ------------- */
  body .kicker,
  body .kicker--light,
  body .cta .kicker {
    display: inline-block;
    margin: 0 0 0.6rem;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ap-accent);
  }
  body .kicker::before { content: none; }
  body .section-head h2,
  body .profile__card h2,
  body .cta h2 {
    font-size: clamp(1.75rem, 7vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ap-ink);
  }
  body .section-head p { color: var(--ap-ink-2); }

  /* ---------------- Buttons: schwarz, WhatsApp gruen, keine Effekte ------ */
  body .btn,
  body .btn:hover {
    box-shadow: none;
    transform: none;
    background-image: none;
  }
  body .btn--primary,
  body .btn--claim,
  body .btn--light,
  body .site-footer .footer-top .btn,
  body .gscore__cta,
  body .stepband__cta,
  body .back-top,
  body .wa-chat__send,
  body .wa-chat__preview-send {
    border-color: var(--ap-black);
    background: var(--ap-black);
    color: #fff;
    box-shadow: none;
  }
  body .btn--primary:hover,
  body .btn--claim:hover,
  body .btn--light:hover,
  body .gscore__cta:hover,
  body .stepband__cta:hover,
  body .back-top:hover {
    border-color: var(--ap-black-hover);
    background: var(--ap-black-hover);
    color: #fff;
  }
  body .btn--primary .btn__ic,
  body .btn--primary .btn__label,
  body .btn--primary .btn__sub,
  body .btn--primary .btn__chev { color: #fff; }
  body .btn--primary .btn__ic { background: rgba(255, 255, 255, 0.16); }

  body .btn--wa,
  body .hero .btn--wa {
    border-color: var(--ap-wa);
    background: var(--ap-wa);
    color: #fff;
    box-shadow: none;
  }
  body .btn--wa:hover { background: var(--ap-wa-hover); border-color: var(--ap-wa-hover); }
  body .btn--wa .btn__ic,
  body .btn--wa .btn__label,
  body .btn--wa .btn__chev,
  body .btn--wa svg { color: #fff; fill: currentColor; }
  body .btn--wa .btn__ic { background: rgba(255, 255, 255, 0.18); }

  /* ---------------- Kopfleiste und Menue --------------------------------- */
  body .site-top,
  body .site-top.is-scrolled {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
  }
  body .site-burger,
  body .site-top.is-scrolled .site-burger {
    border-color: transparent;
    background: transparent;
  }
  body .site-burger span,
  body .site-burger span::before,
  body .site-burger span::after { background: var(--ap-ink); }

  body .site-drawer__panel {
    background: #fff;
    color: var(--ap-ink);
  }
  body .site-drawer__panel::before,
  body .site-drawer__panel::after { content: none; }
  body .site-drawer__logo img { filter: none; }
  body .site-drawer__close {
    background: var(--ap-bg-2);
    color: var(--ap-ink);
  }
  body .site-drawer nav a {
    color: var(--ap-ink);
    border-color: var(--ap-line);
  }
  body .site-drawer nav a:hover { background: var(--ap-bg-2); color: var(--ap-ink); }
  body .site-drawer nav .site-drawer__home,
  body .site-drawer nav .site-drawer__home:hover {
    background: var(--ap-black);
    color: #fff;
  }
  body .site-drawer__contact {
    background: var(--ap-bg-2);
    color: var(--ap-ink-2);
  }
  body .site-drawer__contact a { color: var(--ap-ink); }

  /* ---------------- Untere Kontaktleiste --------------------------------- */
  body .action-bar {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(1.8) blur(20px);
    backdrop-filter: saturate(1.8) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
  }
  body .action-bar__call {
    border-color: var(--ap-black);
    background: var(--ap-black);
    color: #fff;
    box-shadow: none;
  }
  body .action-bar__wa {
    border-color: var(--ap-wa);
    background: var(--ap-wa);
    color: #fff;
    box-shadow: none;
  }
  body .action-bar__wa svg { color: #fff; fill: currentColor; }
  body .action-bar__chat {
    border-color: var(--ap-bg-2);
    background: var(--ap-bg-2);
    color: var(--ap-ink);
    box-shadow: none;
  }

  /* ---------------- Hero (Handy-Aufbau bleibt) --------------------------- */
  body .hero__lead-q { color: var(--ap-ink); }
  body .hero__lead-body,
  body .hero__lead-l1 { color: var(--ap-ink-2); }
  body .hero__check-ic { color: var(--ap-accent); }
  body .hero__check-tt { color: var(--ap-ink); }
  body .hero__check-sub { color: var(--ap-ink-2); }

  /* ---------------- Gutachten -------------------------------------------- */
  body .explain__media,
  body .explain__media img { border-radius: var(--ap-radius); box-shadow: none; }
  body .explain__list-icon {
    border: 0;
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .explain__list li { border-color: var(--ap-line); }
  body .explain__list h3 { color: var(--ap-ink); }
  body .explain__list p { color: var(--ap-ink-2); }
  body .note-important {
    border: 0;
    border-radius: 14px;
    background: var(--ap-bg-2);
    color: var(--ap-ink-2);
  }

  /* ---------------- Ueber mich: helle Karte ------------------------------ */
  body .profile__card {
    background: var(--ap-bg);
    color: var(--ap-ink-2);
    border-radius: var(--ap-radius);
    box-shadow: none;
  }
  body .profile__card::before,
  body .profile__card::after { content: none; }
  body .profile__card .profile__role { color: var(--ap-accent); }
  body .profile__card .profile__lead { color: var(--ap-ink); }
  body .profile__card .profile__text { color: var(--ap-ink-2); }
  body .profile__card a:not(.btn) { color: var(--ap-accent); }
  body .profile__card .profile__list { border-color: var(--ap-line); }
  body .profile__card .profile__list li { color: var(--ap-ink); }
  body .profile__list li::before {
    background-color: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .profile__shots picture,
  body .profile__shots img { border-radius: var(--ap-radius); box-shadow: none; }

  /* ---------------- Ablauf ----------------------------------------------- */
  body .step-card {
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-bg-2);
    box-shadow: none;
  }
  body .step-card::after {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ap-ink-3);
    opacity: 1;
    -webkit-text-stroke: 0;
  }
  body .step-card__icon {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .step-card h3 { color: var(--ap-ink); }
  body .step-card p { color: var(--ap-ink-2); }

  /* ---------------- Auszahlung ------------------------------------------- */
  body .payout__points li { color: var(--ap-ink-2); }
  body .payout__points li::before {
    background-color: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .payout__cta,
  body .calc-card {
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-bg);
    box-shadow: none;
  }

  /* ---------------- Fahrzeugtypen: Beschriftung im Bild ------------------ */
  body .fleet-tile { border-radius: var(--ap-radius); box-shadow: none; }
  body .fleet-tile::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  }
  body .fleet-tile__bar,
  body .fleet-item:nth-child(even) .fleet-tile__bar {
    padding: 1.1rem 1.25rem;
    background: none;
  }
  body .fleet-tile__bar-inner {
    text-align: left;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
  }

  /* ---------------- Bewertungen ------------------------------------------ */
  body .gscore { border: 0; background: none; box-shadow: none; }
  body .gscore__head {
    border-radius: var(--ap-radius);
    background: var(--ap-bg);
    color: var(--ap-ink);
    overflow: hidden;
  }
  body .gscore__head::before,
  body .gscore__head::after { content: none; }
  body .gscore__body { background: var(--ap-bg); }
  body .gscore__label { color: var(--ap-ink-2); }
  body .gscore__value { color: var(--ap-ink); }
  body .gscore__count { color: var(--ap-ink-2); }
  body .gscore__count strong { color: var(--ap-ink); }
  body .gscore__reviews {
    gap: 0.75rem;
    margin-top: 0.75rem;
    border: 0;
    background: none;
  }
  body .grev {
    border: 0;
    border-radius: 16px;
    background: var(--ap-bg);
  }
  body .grev__text { color: var(--ap-ink-2); }
  body .gscore__foot { border: 0; background: none; }

  /* ---------------- Standorte -------------------------------------------- */
  body .city-switch a {
    border: 0;
    border-radius: 980px;
    background: var(--ap-bg-2);
    color: var(--ap-ink);
    box-shadow: none;
  }
  body .city-switch a[aria-current="page"] {
    background: var(--ap-black);
    color: #fff;
  }

  /* ---------------- FAQ: Liste mit Haarlinien ---------------------------- */
  body .faq details,
  body .faq--cols__grid details {
    border: 0;
    border-bottom: 1px solid var(--ap-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  body .faq summary {
    padding-inline: 0;
    font-weight: 600;
    color: var(--ap-ink);
  }
  body .faq summary::after {
    background: none;
    color: var(--ap-ink-3);
  }
  body .faq details p { padding-inline: 0; color: var(--ap-ink-2); }

  /* ---------------- Kontakt ---------------------------------------------- */
  body .cta {
    background: var(--ap-bg);
    color: var(--ap-ink);
  }
  body .cta::before,
  body .cta::after { content: none; }
  body .cta__text p { color: var(--ap-ink-2); }
  body .cta__card {
    border: 0;
    border-radius: var(--ap-radius);
    background: var(--ap-bg-2);
    box-shadow: none;
  }
  body .cta__row { border-color: var(--ap-line); }
  body .cta__row-label { color: var(--ap-ink); }
  body .cta__row-icon {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .cta__row-icon--wa {
    background: rgba(37, 211, 102, 0.12);
    color: #1f9d55;
  }

  /* ---------------- Fusszeile -------------------------------------------- */
  body .site-footer {
    background: var(--ap-bg-2);
    border-top: 1px solid var(--ap-line);
    color: var(--ap-ink-2);
  }
  body .site-footer .footer-claim,
  body .site-footer .footer-head { color: var(--ap-ink); }
  body .site-footer a:not(.btn) { color: var(--ap-ink-2); }
  body .site-footer .footer-rating,
  body .site-footer .footer-share-list a {
    border-color: var(--ap-black);
    background: var(--ap-black);
    color: #fff;
  }
  body .site-footer .footer-rating span:not(.footer-rating__stars),
  body .site-footer .footer-share-list a svg { color: #fff; }

  /* ---------------- Schrittband ------------------------------------------ */
  body .stepband__num {
    background: var(--ap-accent-soft);
    color: var(--ap-accent);
  }
  body .stepband__op:nth-last-child(2) { background: var(--ap-accent); }
  body .stepband__result {
    background: linear-gradient(160deg, #e8323c 0%, #d7141f 55%, #b0101a 100%);
    box-shadow: 0 24px 50px -28px rgba(176, 16, 26, 0.55);
  }

  /* ---------------- Rechtsseiten ----------------------------------------- */
  body .legal__card {
    border-radius: var(--ap-radius);
    background: var(--ap-bg-2);
    box-shadow: none;
  }
}

/* Bewertungen: Buchstaben-Avatare neutral grau statt hellblau (alle Breiten) */
body .grev__avatar {
  background: #e8e8ed;
  color: #6e6e73;
}

@media (max-width: 1099.98px) {
  /* Hero auf dem Handy: "Jetzt anrufen" schwarz, "WhatsApp" gruen
     (die alten Regeln .hero .hero__cta .btn--... sind spezifischer) */
  body .hero .hero__cta .btn--primary {
    border-color: var(--ap-black);
    background: var(--ap-black);
    color: #fff;
    box-shadow: none;
  }
  body .hero .hero__cta .btn--primary .btn__label,
  body .hero .hero__cta .btn--primary .btn__sub,
  body .hero .hero__cta .btn--primary .btn__chev { color: #fff; }
  body .hero .hero__cta .btn--primary .btn__ic {
    background: #fff;
    color: var(--ap-black);
  }

  body .hero .hero__cta .btn--wa {
    border-color: var(--ap-wa);
    background: var(--ap-wa);
    color: #fff;
    box-shadow: none;
  }
  body .hero .hero__cta .btn--wa .btn__label,
  body .hero .hero__cta .btn--wa .btn__sub,
  body .hero .hero__cta .btn--wa .btn__chev,
  body .hero .hero__cta .btn--wa .btn__ic { color: #fff; }
  body .hero .hero__cta .btn--wa .btn__ic { background: none; }
}
@media (max-width: 1099.98px) {
  body .hero .hero__cta .btn--primary .btn__ic svg,
  body .hero .hero__cta .btn--primary .btn__ic path {
    color: var(--ap-black);
    fill: var(--ap-black);
  }
}
@media (max-width: 1099.98px) {
  /* Oeffnungszeiten in der Kontaktkarte: dunkel statt weiss */
  body .cta__hours,
  body .cta__hours * { color: var(--ap-ink-2); }
  body .cta__hours { border-color: var(--ap-line); }
  /* FAQ-Fragen linksbuendig */
  body .faq summary { text-align: left; }
}

@media (max-width: 1099.98px) {
  /* Hero-Hintergrund weiss statt hellblauem Verlauf */
  body .hero { background: #fff; }
  /* Abdunklung des Fotos neutral statt dunkelblau */
  body .hero__stage::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.16) 26%, rgba(0, 0, 0, 0.04) 60%, rgba(0, 0, 0, 0) 100%);
  }
  body .hero__text::before { background: none; }
  /* Linie unter der Ueberschrift und Kreise der Haken in Signalrot */
  body .hero h1::after { background: var(--ap-accent); }
  body .hero__checks li::before,
  body .about-teaser__more li::before { background: var(--ap-accent-soft); }

  /* Kein Glanzstreifen auf den Buttons */
  body .btn::before,
  body .hero .hero__cta .btn::before { content: none; }

  /* WhatsApp-Symbol weiss auf Gruen */
  body .hero .hero__cta .btn--wa svg,
  body .hero .hero__cta .btn--wa svg path,
  body .action-bar__wa svg,
  body .action-bar__wa svg path {
    color: #fff;
    fill: #fff;
  }
}

/* Chatfenster (alle Breiten): Kopf schwarz statt Orange-Blau-Verlauf,
   Verlauf mit Blauschimmer im Nachrichtenbereich neutral */
body .wa-chat__header {
  background: var(--ap-black, #14171a);
  background-image: none;
}
body .wa-chat__thread {
  background: #f2f4f5;
  background-image: none;
}
/* Avatare: auch die geraden (eigene Regel .grev:nth-child(even)) grau */
body .gscore__reviews .grev:nth-child(n) .grev__avatar {
  background: #e8e8ed;
  color: #6e6e73;
}

@media (max-width: 1099.98px) {
  /* Menue: "Schaden online melden" als schwarzer Knopf ganz oben */
  body .site-drawer nav .site-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.9rem;
    padding: 0.9rem 1.1rem;
    border: 0;
    border-radius: 980px;
    background: var(--ap-black);
    font-weight: 600;
    color: #fff;
    text-align: center;
  }
  body .site-drawer nav .site-drawer__cta:hover {
    background: var(--ap-black-hover);
    color: #fff;
  }
}

/* ==========================================================================
   Handy/Tablet-Hero: Google-Bewertung und DEKRA-Abzeichen als zwei gleiche
   Pillen untereinander (Stil wie auf dem Desktop). Das Abzeichen bekommt
   eine eigene Zeile im Hero-Raster, Haken und Knoepfe ruecken eine nach unten.
   ========================================================================== */
.hero__cert--mob { display: none; }

@media (max-width: 1099.98px) {
  body .hero .hero__text > .hero__rating--mob,
  body .hero .hero__text > .hero__cert--mob {
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    height: 2.4rem;
    padding: 0 1rem 0 0.85rem;
    border: 0;
    border-radius: 999px;
    background: var(--ap-bg-2);
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ap-ink);
    white-space: nowrap;
  }
  body .hero .hero__text > .hero__rating--mob { grid-row: 2; margin: 1rem 0 0; }
  body .hero .hero__text > .hero__cert--mob { grid-row: 3; margin: 0.5rem 0 0; }

  body .hero .hero__text > .hero__rating--mob .hero__rating-stars svg {
    width: 0.95rem;
    height: 0.95rem;
  }
  body .hero .hero__text > .hero__rating--mob .hero__rating-score {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ap-ink);
  }
  body .hero .hero__text > .hero__rating--mob .hero__rating-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ap-ink-2);
  }
  body .hero .hero__text > .hero__rating--mob .hero__rating-g svg {
    width: 1rem;
    height: 1rem;
  }
  body .hero .hero__text > .hero__cert--mob svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--ap-accent);
  }

  /* Folgende Zeilen eine nach unten */
  body .hero .hero__text > .hero__checks { grid-row: 4; }
  body .hero .hero__cta .btn--primary { grid-row: 5; }
  body .hero .hero__cta .btn--wa { grid-row: 6; }
}
@media (max-width: 1099.98px) {
  /* Beide Pillen nur so breit wie ihr Inhalt (alte Regel setzt 100 %) */
  body .hero .hero__text > .hero__rating--mob,
  body .hero .hero__text > .hero__cert--mob {
    width: max-content;
    max-width: 100%;
    min-width: 0;
  }
}
@media (max-width: 379.98px) {
  /* Sehr schmale Handys: Pillen etwas kompakter, damit nichts ueberlaeuft */
  body .hero .hero__text > .hero__rating--mob,
  body .hero .hero__text > .hero__cert--mob { gap: 0.35rem; padding: 0 0.75rem 0 0.65rem; font-size: 0.78rem; }
  body .hero .hero__text > .hero__rating--mob .hero__rating-score,
  body .hero .hero__text > .hero__rating--mob .hero__rating-text { font-size: 0.78rem; }
  body .hero .hero__text > .hero__rating--mob .hero__rating-stars svg { width: 0.8rem; height: 0.8rem; }
}

/* ==========================================================================
   Schrittband auf Handy und Tablet: senkrechte Gleichung statt Wischreihe.
   Jeder Schritt eine weisse Karte (Bild links, Text rechts), dazwischen die
   Rechenzeichen, unten die Ergebniskarte in Signalrot ueber die volle Breite.
   ========================================================================== */
@media (max-width: 1099.98px) {
  body .stepband { padding-block: 3.5rem; }
  body .stepband__inner { gap: 2rem; }
  body .stepband__title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  body .stepband__text { font-size: 1rem; }

  body .stepband__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    max-width: 34rem;
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  /* Schrittkarte quer */
  body .stepband__item {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    width: auto;
    padding: 0.5rem 1.1rem 0.5rem 0.5rem;
    border-radius: 22px;
    scroll-snap-align: none;
  }
  body .stepband__item:hover { transform: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
  body .stepband__item:hover img { transform: none; }
  body .stepband__item picture {
    aspect-ratio: 3 / 4;
    border-radius: 15px;
  }
  body .stepband__cap {
    gap: 0.15rem;
    padding: 0;
  }
  body .stepband__num { margin-bottom: 0.3rem; }
  body .stepband__cap strong { font-size: 1.05rem; }
  body .stepband__cap small { font-size: 0.88rem; }

  /* Rechenzeichen mittig zwischen den Karten */
  body .stepband__op {
    align-self: center;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.1rem;
  }

  /* Ergebniskarte */
  body .stepband__result {
    width: auto;
    padding: 1.75rem 1.5rem 1.5rem;
    border-radius: 22px;
    scroll-snap-align: none;
  }
  body .stepband__result-label + .stepband__opt { margin-top: 0.9rem; }
  body .stepband__opt strong { font-size: 1.65rem; }
  body .stepband__or { margin: 0.75rem 0; }
  body .stepband__result-foot {
    margin-top: 0;
    padding-top: 1.25rem;
  }
}
@media (max-width: 1099.98px) {
  /* Hero-Ueberschrift: "Kfz" und "und" in Fast-Schwarz statt Dunkelblau,
     die Akzentwoerter in Signalrot */
  body .hero h1,
  body .hero__stage h1 { color: var(--ap-ink); }
  body .hero h1 .hero__accent,
  body .hero__stage h1 .hero__accent { color: var(--ap-accent); }
}

@media (max-width: 1099.98px) {
  /* Hero-Knoepfe auf dem Handy: "Jetzt anrufen" in Signalrot, "WhatsApp" weiss */
  body .hero .hero__cta .btn--primary {
    border-color: var(--ap-accent);
    background: var(--ap-accent);
    color: #fff;
  }
  body .hero .hero__cta .btn--primary:hover,
  body .hero .hero__cta .btn--primary:active {
    border-color: var(--ap-accent-hover);
    background: var(--ap-accent-hover);
  }
  body .hero .hero__cta .btn--primary .btn__ic { background: #fff; color: var(--ap-accent); }
  body .hero .hero__cta .btn--primary .btn__ic svg,
  body .hero .hero__cta .btn--primary .btn__ic path {
    color: var(--ap-accent);
    fill: var(--ap-accent);
  }

  body .hero .hero__cta .btn--wa {
    border: 1px solid var(--ap-line);
    background: #fff;
    color: var(--ap-ink);
  }
  body .hero .hero__cta .btn--wa:hover,
  body .hero .hero__cta .btn--wa:active {
    border-color: var(--ap-line);
    background: var(--ap-bg-2);
  }
  body .hero .hero__cta .btn--wa .btn__label,
  body .hero .hero__cta .btn--wa .btn__sub { color: var(--ap-ink); }
  body .hero .hero__cta .btn--wa .btn__chev { color: var(--ap-ink-3); }
  /* WhatsApp-Symbol in WhatsApp-Gruen auf Weiss */
  body .hero .hero__cta .btn--wa .btn__ic,
  body .hero .hero__cta .btn--wa svg,
  body .hero .hero__cta .btn--wa svg path {
    color: #25a35a;
    fill: #25a35a;
  }
}

/* ==========================================================================
   Handy/Tablet-Hero: neue Reihenfolge, alle Inhalte bleiben
   Foto + Text | Jetzt anrufen | WhatsApp | Bewertung | DEKRA | Haken
   So ist der Anruf auch auf kleinen Handys ohne Scrollen erreichbar.
   ========================================================================== */
@media (max-width: 1099.98px) {
  body .hero .hero__cta .btn--primary { grid-row: 2; margin-top: 1.25rem; }
  body .hero .hero__cta .btn--wa { grid-row: 3; margin-top: 0.6rem; }
  body .hero .hero__text > .hero__rating--mob { grid-row: 4; margin-top: 1.4rem; }
  body .hero .hero__text > .hero__cert--mob { grid-row: 5; margin-top: 0.5rem; }
  body .hero .hero__text > .hero__checks { grid-row: 6; margin-top: 1.4rem; }

  /* Namenszeile als ruhiger Absender, linksbuendig wie der Text */
  body .hero .hero__lead-name {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    color: var(--ap-ink-2);
  }
}
@media (max-width: 1099.98px) {
  body .hero .hero__stage .hero__lead .hero__lead-name,
  body .hero .hero__stage .hero__lead-name {
    margin-top: 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    color: var(--ap-ink-2);
  }
}

@media (max-width: 1099.98px) {
  /* Einheitlich linksbuendig: Abzeichen an der Textkante, in den Knoepfen
     Symbol und Beschriftung links, Pfeil rechts */
  body .hero .hero__text > .hero__rating--mob,
  body .hero .hero__text > .hero__cert--mob { justify-self: start; }

  body .hero .hero__cta .btn--primary,
  body .hero .hero__cta .btn--wa {
    justify-content: flex-start;
    text-align: left;
    gap: 0.85rem;
    padding-left: 0.85rem;
    padding-right: 1.1rem;
  }
  body .hero .hero__cta .btn--primary .btn__text,
  body .hero .hero__cta .btn--wa .btn__text {
    flex: 1 1 auto;
    align-items: flex-start;
    text-align: left;
  }
  body .hero .hero__cta .btn--primary .btn__chev,
  body .hero .hero__cta .btn--wa .btn__chev { margin-left: auto; }
  /* WhatsApp-Symbol so breit wie der Kreis beim Anruf, damit die Texte
     beider Knoepfe auf einer Linie beginnen */
  body .hero .hero__cta .btn--wa .btn__ic {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
  }
}
@media (max-width: 1099.98px) {
  /* WhatsApp-Symbol so breit wie der Anruf-Kreis: Beschriftungen fluchten */
  body .hero .hero__cta .btn--wa .btn__ic {
    width: 34px;
    height: 34px;
  }

  /* Abschnittskoepfe auf dem Handy einheitlich linksbuendig */
  body .stepband__intro,
  body .section-head,
  body .section-head--center {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  body .stepband__intro .stepband__text,
  body .section-head p { margin-left: 0; margin-right: 0; }
  body .city-switch { justify-content: flex-start; }
}
@media (max-width: 1099.98px) {
  /* FAQ ohne Innenabstand der frueheren Kaesten: Fragen an der Textkante */
  body .faq details,
  body .faq--cols__grid details { padding-left: 0; padding-right: 0; }
}
@media (max-width: 1099.98px) {
  /* Bewertung und DEKRA so breit wie die Knoepfe darueber; Inhalt links,
     Symbole auf der Linie der Knopf-Symbole */
  body .hero .hero__text > .hero__rating--mob,
  body .hero .hero__text > .hero__cert--mob {
    justify-self: stretch;
    width: auto;
    max-width: none;
    justify-content: flex-start;
    padding-left: 0.85rem;
    padding-right: 1.1rem;
  }
}
@media (max-width: 1099.98px) {
  /* Bewertung und DEKRA: volle Breite, Inhalt mittig */
  body .hero .hero__text > .hero__rating--mob,
  body .hero .hero__text > .hero__cert--mob {
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-width: 1099.98px) {
  /* "Jetzt anrufen": Schrift und Pfeil schwarz (spaeter wieder weiss, siehe unten) */
  body .hero .hero__cta .btn--primary,
  body .hero .hero__cta .btn--primary .btn__label,
  body .hero .hero__cta .btn--primary .btn__text,
  body .hero .hero__cta .btn--primary .btn__chev,
  body .hero .hero__cta .btn--primary .btn__chev svg { color: var(--ap-black); }
}
@media (max-width: 1099.98px) {
  body .hero .hero__cta .btn--primary .btn__sub { color: var(--ap-black); }
}
@media (max-width: 1099.98px) {
  /* "Jetzt anrufen": Schrift und Pfeil wieder weiss */
  body .hero .hero__cta .btn--primary,
  body .hero .hero__cta .btn--primary .btn__label,
  body .hero .hero__cta .btn--primary .btn__text,
  body .hero .hero__cta .btn--primary .btn__sub,
  body .hero .hero__cta .btn--primary .btn__chev,
  body .hero .hero__cta .btn--primary .btn__chev svg { color: #fff; }
}
@media (max-width: 1099.98px) {
  /* Menue-Knopf: oben auf dem Foto weiss, nach dem Scrollen auf der hellen
     Leiste schwarz */
  body .site-top:not(.is-scrolled) .site-actions .site-burger span,
  body .site-top:not(.is-scrolled) .site-actions .site-burger span::before,
  body .site-top:not(.is-scrolled) .site-actions .site-burger span::after {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
  body .site-top.is-scrolled .site-actions .site-burger span,
  body .site-top.is-scrolled .site-actions .site-burger span::before,
  body .site-top.is-scrolled .site-actions .site-burger span::after {
    background: var(--ap-ink);
    box-shadow: none;
  }
}
@media (max-width: 1099.98px) {
  /* Rechtsseiten haben kein Foto unter der Leiste: Menue-Knopf immer schwarz */
  body.legal-page .site-top .site-actions .site-burger span,
  body.legal-page .site-top .site-actions .site-burger span::before,
  body.legal-page .site-top .site-actions .site-burger span::after {
    background: var(--ap-ink);
    box-shadow: none;
  }
}

/* ==========================================================================
   Flaechenwechsel, seit "Ueber mich" direkt nach dem Hero steht:
   Hero | Ueber mich G | Schritte W | Gutachten G | Ablauf W | ...
   Ab dem Ablauf bleibt alles wie bisher.
   ========================================================================== */
body .stepband { background: #fff; }
body #entlastung { background: #f2f4f5; }

/* ==========================================================================
   FARBKONZEPT "GRAPHIT UND NEON-LIME", Gestaltung "Studio-Licht"
   (alle Breiten)
   - Flaechen: Weiss und kuehles Hellgrau (#f2f4f5) im Wechsel, der Hero
     auf dem Desktop in hellem Studio-Grau (#f4f5f6). Das Band "Vom Unfall
     zur Auszahlung" in Graphit mit einem weichen Lichtkegel von oben, die
     Karten darin wie Glas: leicht transparent mit feiner heller Kante.
   - Schrift: Graphit (#14171a), Nebentexte kuehles Grau
   - Lime (#c6f432) als Markenfarbe: Markierung der Akzentwoerter im Hero,
     Hauptaktion, Ergebniskarte, Nummern. Nie als Schrift auf Weiss.
   - Links und kleine Symbole auf hellem Grund in dunklem Lime (#3f6212)
   - Buttons: Hauptaktion Lime mit Graphit-Schrift, Nebenaktionen Graphit
   Steht am Ende der Datei und ueberschreibt die frueheren Farbwerte.
   ========================================================================== */
:root {
  --ap-ink: #14171a;
  --ap-ink-2: #5b636d;
  --ap-ink-3: #868d96;
  --ap-bg: #ffffff;
  --ap-bg-2: #f2f4f5;
  --ap-line: #d5dade;
  --ap-black: #14171a;
  --ap-black-hover: #000000;
  --ap-graphite: #121418;
  --ap-graphite-2: #1b1f24;
  --ap-lime: #c6f432;
  --ap-lime-hover: #b6e526;
  --ap-accent: #3f6212;
  --ap-accent-hover: #365314;
  --ap-accent-soft: rgba(198, 244, 50, 0.32);

  --accent: #3f6212;
  --accent-deep: #365314;
  --accent-soft: #eefbcf;
  --accent-ice: #c6f432;
  --accent-hot: #c6f432;
  --ink: #14171a;
  --ink-soft: #5b636d;
}

/* Hero-Ueberschrift: Akzentwoerter in Graphit mit Lime-Markierung */
body .hero h1 .hero__accent,
body .hero__stage h1 .hero__accent {
  color: var(--ap-ink);
  background: linear-gradient(180deg, transparent 58%, var(--ap-lime) 58%, var(--ap-lime) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.05em;
}

/* Desktop: Hero in hellem Studio-Grau, "Ueber mich" danach weiss mit
   grauer Karte, damit sich die Flaechen weiter abwechseln */
@media (min-width: 1100px) {
  body .hero { background: #f4f5f6; }
  body #ueber-mich { background: #fff; }
  body #ueber-mich .profile__card { background: var(--ap-bg-2); }
  /* Bewertung und DEKRA im Hero: weisse Pillen auf dem Studio-Grau */
  body .hero .hero__proof .hero__rating,
  body .hero .hero__proof .hero__cert { background: #fff; }
}
/* Linie unter der Ueberschrift (Handy) in Lime */
body .hero h1::after { background: var(--ap-lime); }

/* Hauptaktion "Schaden online melden": Lime mit Graphit-Schrift */
body .btn--claim,
body .hero .hero__cta .btn--claim,
body .btn--claim:hover,
body .hero .hero__cta .btn--claim:hover {
  border-color: var(--ap-lime);
  background: var(--ap-lime);
  background-image: none;
  color: var(--ap-ink);
}
body .btn--claim .btn__ic,
body .btn--claim .btn__label,
body .btn--claim .btn__text,
body .btn--claim .btn__chev,
body .hero .hero__cta .btn--claim .btn__ic,
body .hero .hero__cta .btn--claim .btn__label { color: var(--ap-ink); }

/* WhatsApp auf dem Desktop: Graphit, Symbol gruen */
@media (min-width: 1100px) {
  body .hero .hero__cta .btn--wa,
  body .hero .hero__cta .btn--wa:hover {
    border: 1px solid var(--ap-black);
    background: var(--ap-black);
    color: #fff;
  }
  body .hero .hero__cta .btn--wa .btn__label { color: #fff; }
  body .hero .hero__cta .btn--wa .btn__ic,
  body .hero .hero__cta .btn--wa .btn__ic svg { color: #25d366; fill: currentColor; }
}

/* Handy: "Jetzt anrufen" in Lime mit Graphit-Schrift */
@media (max-width: 1099.98px) {
  body .hero .hero__cta .btn--primary,
  body .hero .hero__cta .btn--primary:hover,
  body .hero .hero__cta .btn--primary:active {
    border-color: var(--ap-lime);
    background: var(--ap-lime);
  }
  body .hero .hero__cta .btn--primary,
  body .hero .hero__cta .btn--primary .btn__label,
  body .hero .hero__cta .btn--primary .btn__text,
  body .hero .hero__cta .btn--primary .btn__sub,
  body .hero .hero__cta .btn--primary .btn__chev,
  body .hero .hero__cta .btn--primary .btn__chev svg { color: var(--ap-ink); }
  body .hero .hero__cta .btn--primary .btn__ic {
    background: var(--ap-ink);
    color: var(--ap-lime);
  }
  body .hero .hero__cta .btn--primary .btn__ic svg {
    color: var(--ap-lime);
    fill: var(--ap-lime);
  }
}

/* Aktiver Menuepunkt in Graphit (eine duenne Lime-Linie waere auf Weiss
   kaum zu sehen), aktuelle Stadt in Lime */
body .site-top .site-nav a::after,
body .site-top:not(.is-scrolled) .site-nav a::after,
body .site-top.is-scrolled .site-nav a::after { background: var(--ap-ink); }
body .city-switch a[aria-current="page"],
body .city-switch a[aria-current="page"]:hover {
  border-color: var(--ap-lime);
  background: var(--ap-lime);
  color: var(--ap-ink);
}

/* ---------------- Band "Vom Unfall zur Auszahlung": Studio-Licht ---------------- */
body section.stepband {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ap-graphite);
}
/* Weicher Lichtkegel von oben, nach unten in tiefes Graphit */
body section.stepband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, #2b3036 0%, #1a1d21 38%, var(--ap-graphite) 62%);
}
@media (max-width: 1099.98px) {
  body section.stepband::before {
    background: radial-gradient(160% 45% at 50% -4%, #2b3036 0%, #1a1d21 45%, var(--ap-graphite) 75%);
  }
}
body section.stepband .stepband__title { color: #fff; }
body section.stepband .stepband__title span { color: rgba(255, 255, 255, 0.5); }
body section.stepband .stepband__text { color: rgba(255, 255, 255, 0.68); }
/* Karten wie Glas: leicht transparent, feine helle Kante, oben ein
   Lichtsaum */
body section.stepband .stepband__item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body section.stepband .stepband__cap,
body section.stepband .stepband__cap strong { color: #fff; }
body section.stepband .stepband__cap small { color: rgba(255, 255, 255, 0.6); }
body section.stepband .stepband__num {
  background: rgba(198, 244, 50, 0.14);
  color: var(--ap-lime);
}
body section.stepband .stepband__op {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}
body section.stepband .stepband__op:nth-last-child(2) {
  background: var(--ap-lime);
  color: var(--ap-ink);
}
body section.stepband .stepband__result {
  background: var(--ap-lime);
  background-image: none;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.8);
  color: var(--ap-ink);
}
body section.stepband .stepband__result-label { color: rgba(20, 23, 26, 0.62); }
body section.stepband .stepband__opt { color: rgba(20, 23, 26, 0.72); }
body section.stepband .stepband__opt strong { color: var(--ap-ink); }
body section.stepband .stepband__or { color: rgba(20, 23, 26, 0.6); }
body section.stepband .stepband__or::before,
body section.stepband .stepband__or::after { background: rgba(20, 23, 26, 0.2); }
body section.stepband .stepband__result-foot,
body section.stepband .stepband__result-note { color: var(--ap-ink); }
body section.stepband .stepband__cta,
body section.stepband .stepband__cta:hover {
  background: var(--ap-ink);
  color: #fff;
}

/* Chat-Knopf unten rechts: Graphit mit Lime-Symbol, auf hellen Flaechen
   ruhig und im dunklen Band ueber das Symbol sichtbar */
body .wa-chat__launcher,
body .wa-chat__launcher:hover {
  background: var(--ap-black);
  color: var(--ap-lime);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 12px 30px -12px rgba(0, 0, 0, 0.45);
}
body .wa-chat__launcher svg { color: var(--ap-lime); fill: currentColor; }

/* Handy-Menue: Hauptaktion wie im Hero in Lime */
body .site-drawer nav .site-drawer__cta,
body .site-drawer nav .site-drawer__cta:hover {
  border-color: var(--ap-lime);
  background: var(--ap-lime);
  color: var(--ap-ink);
}

/* ==========================================================================
   FEINSCHLIFF: minimale Rundungen (alle Breiten)
   Karten, Bilder und Buttons mit 6 px, kleine Marken und Symbolflaechen mit
   4 px. Personenfotos (Avatare) bleiben rund. Die alten Regeln setzen die
   Rundungen an vielen Stellen sehr spezifisch, deshalb hier mit !important.
   ========================================================================== */
:root {
  --ap-radius: 6px;
  --ap-radius-sm: 4px;
  --ap-r: 6px;
  --ap-r-sm: 4px;
}

/* Karten, Flaechen, Bilder */
body .hero__media,
body .hero__help,
body .hero__help--pinned,
body .profile__card,
body .reveal,
body .profile__shots-wide,
body .profile__shots picture,
body .stepband__item,
body .stepband__result,
body .explain__media,
body .note-important,
body .payout__cta,
body .calc-card,
body .calc-card__total,
body .fleet-tile,
body .gscore,
body .gscore__head,
body .grev,
body .claim-popup__panel,
body .claim__card-face,
body .cta__card,
body .legal__card,
body .site-drawer__contact,
body .wa-chat__panel,
body .wa-chat__toast-bubble,
body .sv-consent__card,
body main img:not(.payout__cta-photo):not(.hero__card-photo):not(.grev__avatar) { border-radius: var(--ap-r) !important; }

/* Bilder in Karten: eine Spur kleiner als die Karte */
body .stepband__item picture,
body .stepband__item img { border-radius: var(--ap-r-sm) !important; }

/* Buttons, Pillen, Eingabefelder */
body .btn,
body .site-tel,
body .skip,
body .site-burger,
body .site-drawer nav .site-drawer__cta,
body .site-drawer__close,
body .hero__help-call,
body .hero__help-wa,
body .hero__help-chat,
body .hero__help-close,
body .hero__rating,
body .hero__cert,
body .stepband__cta,
body .gscore__cta,
body .city-switch a,
body .footer-rating,
body .footer-share-list a,
body .action-bar__wa,
body .action-bar__chat,
body .action-bar__call,
body .back-top,
body .claim-popup__close,
body .wa-chat__launcher,
body .wa-chat__close,
body .wa-chat__send,
body .wa-chat__attach,
body .sv-consent__btn,
body input,
body textarea,
body select { border-radius: var(--ap-r) !important; }

/* Kleine Marken und Symbolflaechen: Kreise werden zu ruhigen Quadraten */
body .stepband__num,
body .stepband__op,
body .hero__fact-ic,
body .explain__list-icon,
body .cta__row-icon,
body .hero .hero__cta .btn__ic,
body .hero__check-ic,
body .kicker { border-radius: var(--ap-r-sm) !important; }

/* Startseite: "Gutachten" steht dort direkt vor "Auszahlung" (beide grau),
   deshalb hier weiss. Auf den Staedteseiten liegt das Einsatzgebiet
   dazwischen, dort bleibt es grau. */
body:not(:has(#einsatzgebiet)) #entlastung { background: #fff; }
body:not(:has(#einsatzgebiet)) #entlastung .note-important { background: var(--ap-bg-2); }

/* ==========================================================================
   Band "Vom Unfall zur Auszahlung": Unfallfoto als Wasserzeichen
   Graustufen-Foto einer Mercedes-Front mit zerkratztem Stossfaenger
   (Original bilder/unfallfahrzeuge/oberhausen/IMG-20250819-WA0017.jpg,
   als
   bilder/optimized/ablauf-hintergrund-unfall*.webp/.jpg) mit sehr
   geringer Deckkraft ueber dem Lichtkegel, zu den Raendern hin
   ausgeblendet. Der Grund bleibt dunkel.
   ========================================================================== */
body section.stepband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../bilder/optimized/ablauf-hintergrund-unfall.jpg?v=6");
  background-image: image-set(
    url("../bilder/optimized/ablauf-hintergrund-unfall.webp?v=6") type("image/webp"),
    url("../bilder/optimized/ablauf-hintergrund-unfall.jpg?v=6") type("image/jpeg")
  );
  background-repeat: no-repeat;
  /* Leicht vergroessert: Scheinwerfer, Stossfaenger und Rad liegen hinter
     der Ueberschrift, nicht hinter den Karten */
  background-size: 110% auto;
  background-position: 50% 30%;
  opacity: 0.11;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 35%, #000 30%, transparent 100%);
  mask-image: radial-gradient(80% 70% at 50% 35%, #000 30%, transparent 100%);
}
@media (max-width: 1099.98px) {
  body section.stepband::after {
    background-image: url("../bilder/optimized/ablauf-hintergrund-unfall-1200.jpg?v=6");
    background-image: image-set(
      url("../bilder/optimized/ablauf-hintergrund-unfall-1200.webp?v=6") type("image/webp"),
      url("../bilder/optimized/ablauf-hintergrund-unfall-1200.jpg?v=6") type("image/jpeg")
    );
    background-size: auto 34%;
    background-position: 30% 4%;
    -webkit-mask-image: radial-gradient(130% 20% at 50% 16%, #000 35%, transparent 100%);
    mask-image: radial-gradient(130% 20% at 50% 16%, #000 35%, transparent 100%);
  }
}

/* ==========================================================================
   ABSCHLUSS DER SEITE (alle Breiten)
   - Kontakt "Noch Fragen?" hell, Fussbereich als einziger dunkler
     Abschluss in Carbon (#0c0e11); Logo weiss, Texte in abgestuftem Weiss,
     Telefonknopf in Lime
   ========================================================================== */
/* Kontakt "Noch Fragen?" bleibt hell: weiss nach dem grauen FAQ, damit
   nur der Fussbereich dunkel abschliesst (zwei dunkle Bloecke direkt
   uebereinander wirken zu schwer). Karte grau, Symbole wie im Rest der
   Seite auf zartem Lime. */
html body section.cta {
  background: #fff;
  color: var(--ap-ink);
}
html body section.cta .kicker { color: var(--ap-accent); }
html body section.cta h2 { color: var(--ap-ink); }
html body section.cta .cta__text p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ap-ink-2);
}
html body section.cta .cta__card {
  border: 0;
  background: var(--ap-bg-2);
  box-shadow: none;
  color: var(--ap-ink);
}
html body section.cta .cta__row,
html body section.cta .cta__row-label { color: var(--ap-ink); }
html body section.cta .cta__row { border-color: var(--ap-line); }
html body section.cta .cta__row span:not(.cta__row-label):not(.cta__row-icon) { color: var(--ap-ink-2); }
html body section.cta .cta__row-icon {
  background: var(--ap-accent-soft);
  color: var(--ap-accent);
}
html body section.cta .cta__row:hover .cta__row-label { color: var(--ap-accent); }
/* Oeffnungszeiten: vorher weiss auf hellgrau und damit unsichtbar */
html body section.cta .cta__hours {
  border-color: var(--ap-line);
  color: var(--ap-ink-2);
}

/* ---------------- Fussbereich ---------------- */
html body .site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #0c0e11;
  /* Unter dem Fussbereich haelt die Seite Platz fuer Cookie-Hinweis und
     Kontaktleiste frei. Der Schatten faerbt diesen Streifen in derselben
     Farbe ein, ohne das Layout zu veraendern. */
  box-shadow: 0 320px 0 #0c0e11;
  color: rgba(255, 255, 255, 0.62);
}
html body .site-footer .footer-hours li { border-color: rgba(255, 255, 255, 0.12); }
html body .site-footer .footer-top,
html body .site-footer .footer-partner,
html body .site-footer .footer-bottom { border-color: rgba(255, 255, 255, 0.08); }
html body .site-footer .footer-claim { color: #fff; }
html body .site-footer .footer-top .btn,
html body .site-footer .footer-top .btn--light,
html body .site-footer .footer-top .btn:hover,
html body .site-footer .footer-top .btn--light:hover {
  border-color: var(--ap-lime);
  background: var(--ap-lime);
  color: var(--ap-ink);
}
html body .site-footer .footer-top .btn svg { color: var(--ap-ink); }
/* Logo ist schwarz: auf dem dunklen Grund weiss darstellen */
html body .site-footer .footer-grid img { filter: invert(1) brightness(2); }
html body .site-footer .brand-tag { color: rgba(255, 255, 255, 0.5); }
html body .site-footer .footer-head { color: #fff; }
html body .site-footer a:not(.btn) { color: rgba(255, 255, 255, 0.62); }
html body .site-footer a:not(.btn):hover { color: #fff; }
html body .site-footer address,
html body .site-footer .footer-hours,
html body .site-footer .footer-hours li,
html body .site-footer .footer-contact li { color: rgba(255, 255, 255, 0.62); }
html body .site-footer .footer-hours strong,
html body .site-footer .footer-hours span:last-child { color: #fff; }
html body .site-footer .footer-contact svg,
html body .site-footer .footer-contact i { color: var(--ap-lime); }
/* Google-Bewertung und Teilen-Knoepfe als dezente Glasflaechen */
html body .site-footer .footer-rating,
html body .site-footer .footer-share-list a {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
html body .site-footer .footer-rating:hover,
html body .site-footer .footer-share-list a:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
html body .site-footer .footer-rating span:not(.footer-rating__stars),
html body .site-footer .footer-share-list a svg,
html body .site-footer .footer-share-list a i { color: #fff; }
html body .site-footer .footer-partner__label,
html body .site-footer .footer-bottom,
html body .site-footer .footer-bottom p { color: rgba(255, 255, 255, 0.42); }
html body .site-footer .footer-bottom a,
html body .site-footer .footer-bottom .consent-link { color: rgba(255, 255, 255, 0.55); }
html body .site-footer .footer-bottom a:hover,
html body .site-footer .footer-bottom .consent-link:hover { color: #fff; }

/* ---------------- Hinweis "Wichtig" unter "Gutachten" ---------------- */
/* Volle Inhaltsbreite statt schmalem Kasten, mit Lime-Kante links */
html body .note-important {
  max-width: none;
  width: 100%;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--ap-lime);
  border-radius: 0 var(--ap-r) var(--ap-r) 0 !important;
  background: var(--ap-bg);
  font-size: 1rem;
  line-height: 1.6;
}
body:not(:has(#einsatzgebiet)) #entlastung .note-important { background: var(--ap-bg-2); }

/* Logo in passender Groesse (480 px statt 4663 px Original, 15 statt 61 KB).
   Das Original bleibt fuer strukturierte Daten erhalten. Hier die
   Hintergrund-Variante im Handy-Hero. */
body .hero__stage .hero__eyebrow::before {
  background-image: url("../bilder/optimized/heiken-logo-480.png");
}

/* ==========================================================================
   Letzte Farbreste aus dem alten Blau-Design auf die neue Palette legen
   (Variablen aus home.css und dem Cookie-Hinweis in js/sv-consent.js).
   Betrifft u. a. den Button "Akzeptieren", den Datenschutz-Link im
   Cookie-Hinweis und den Namen und Avatar in der Chat-Vorschau.
   ========================================================================== */
:root {
  --sv-blue: #14171a;
  --bg-tint: #f2f4f5;
  --muted: #868d96;
  --line: #e6e9eb;
  --line-strong: #d5dade;
  --chip: #f2f4f5;
  --brand: #14171a;
  --brand-lift: #2a2f35;
  --brand-deep: #0c0e11;
  --brand-dark-flat: #121418;
  --brand-dark-grad: linear-gradient(160deg, #1f2328 0%, #121418 100%);
}
body .wa-chat__toast-face { border-color: rgba(20, 23, 26, 0.12); }

/* ==========================================================================
   HERO "FAHRZEUG-UMSCHALTER" (Desktop ab 1100 px)
   Clean und hell. Oben links nur: Ueberschrift, Umschalter Pkw / Motorrad /
   E-Scooter / E-Bike, ein Satz zum gewaehlten Fahrzeug, Buttons und eine
   leise Vertrauenszeile. Rechts eine quadratische Bildkarte, die beim
   Umschalten das passende Foto zeigt (js/hero-fahrzeuge.js).
   Einleitungstext und Vorteile stehen darunter in einem hellgrauen
   Streifen, der noch zum Hero gehoert (nichts geloescht, Handy wie gehabt).
   Technik: Raster auf .hero, .hero__content und .hero__text per
   display: contents aufgeloest; der Streifen ist .hero::after.
   ========================================================================== */
.hero__seal,
.hero__reach,
.hero__vehicles,
.hero__vehicle-text,
.hero__vehicle-photo { display: none; }
@media (min-width: 1100px) {
  html body .hero {
    display: grid;
    grid-template-columns:
      var(--content-left) minmax(0, 1fr) clamp(2.5rem, 5vw, 6rem) minmax(0, 0.95fr) var(--content-left);
    grid-template-rows: 1fr auto auto auto auto auto 1fr auto;
    min-height: 0;
    padding: 0;
    background: #fff;
  }
  html body .hero > .hero__content,
  html body .hero .hero__text { display: contents; }
  html body .hero .hero__seal,
  html body .hero .hero__reach,
  html body .hero .hero__media-badge,
  html body .hero .hero__media .hero__help { display: none; }

  /* ---------- Linke Spalte ---------- */
  html body .hero .hero__text h1 {
    grid-column: 2;
    grid-row: 2;
    max-width: 14ch;
    margin: 0 0 1.5rem;
    font-size: clamp(3rem, 4.6vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
  }
  html body .hero .hero__vehicles {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.3rem;
    border-radius: var(--ap-r);
    background: var(--ap-bg-2);
  }
  html body .hero .hero__vehicles button {
    padding: 0.6rem 1.1rem;
    border: 0;
    border-radius: var(--ap-r-sm) !important;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ap-ink-2);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  html body .hero .hero__vehicles button:hover { color: var(--ap-ink); }
  html body .hero .hero__vehicles button[aria-selected="true"] {
    background: #fff;
    box-shadow: 0 1px 4px rgba(20, 23, 26, 0.14);
    color: var(--ap-ink);
  }
  html body .hero .hero__vehicles button:focus-visible {
    outline: 2px solid var(--ap-ink);
    outline-offset: 2px;
  }
  html body .hero .hero__vehicle-text {
    grid-column: 2;
    grid-row: 4;
    display: block;
    max-width: 34rem;
    min-height: 1.6em;
    margin: 1rem 0 1.75rem;
    font-size: clamp(1.08rem, 1.2vw, 1.25rem);
    line-height: 1.5;
    color: var(--ap-ink-2);
  }
  html body .hero .hero__cta {
    grid-column: 2;
    grid-row: 5;
    justify-self: start;
  }
  /* Vertrauenszeile leise, ohne Pillen */
  html body .hero .hero__proof {
    grid-column: 2;
    grid-row: 6;
    justify-self: start;
    flex-wrap: nowrap;
    gap: 0.5rem 1.1rem;
    margin: 1.4rem 0 0;
  }
  html body .hero .hero__proof .hero__rating,
  html body .hero .hero__proof .hero__cert {
    height: auto;
    gap: 0.4rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--ap-ink-2);
  }
  html body .hero .hero__proof .hero__rating-score,
  html body .hero .hero__proof .hero__rating-text { font-size: 0.84rem; }
  html body .hero .hero__proof .hero__rating-stars svg { width: 0.85rem; height: 0.85rem; }

  /* ---------- Bildkarte rechts ---------- */
  html body .hero > .hero__media {
    grid-column: 4;
    grid-row: 1 / 8;
    align-self: center;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: clamp(2.5rem, 6vh, 4.5rem) 0;
    overflow: hidden;
    border-radius: var(--ap-r) !important;
    background: var(--ap-bg-2);
    -webkit-mask-image: none;
    mask-image: none;
  }
  html body .hero > .hero__media::before,
  html body .hero > .hero__media::after { content: none; }
  html body .hero > .hero__media picture,
  html body .hero > .hero__media img,
  html body .hero .hero__vehicle-photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0 !important;
    object-fit: cover;
    filter: none;
  }
  html body .hero .hero__vehicle-photo {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  html body .hero .hero__vehicle-photo.is-visible { opacity: 1; }

  /* ---------- Hellgrauer Streifen: Einleitung und Vorteile ---------- */
  html body .hero::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 8;
    z-index: 0;
    background: var(--ap-bg-2);
  }
  html body .hero .hero__lead {
    grid-column: 2;
    grid-row: 8;
    z-index: 1;
    max-width: 40rem;
    margin: 0;
    padding: clamp(2.25rem, 5vh, 3.25rem) 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ap-ink-2);
  }
  html body .hero .hero__text .hero__facts {
    grid-column: 4;
    grid-row: 8;
    z-index: 1;
    align-self: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    width: 100%;
    margin: 0;
    padding: clamp(2.25rem, 5vh, 3.25rem) 0;
    border: 0;
  }
  html body .hero .hero__text .hero__facts > .hero__fact:nth-child(n) { margin: 0; }

  /* Hero endet mit grauem Streifen: "Ueber mich" danach weiss, Karte grau */
  html body #ueber-mich { background: #fff; }
  html body #ueber-mich .profile__card { background: var(--ap-bg-2); }
}
@media (prefers-reduced-motion: reduce) {
  html body .hero .hero__vehicle-photo { transition: none; }
}
/* Fotoebene des Fahrzeug-Umschalters unterhalb des Desktops sicher aus
   (die alten Regeln fuer .hero__media img sind spezifischer) */
@media (max-width: 1099.98px) {
  html body .hero .hero__media img.hero__vehicle-photo { display: none; }
}