/* gutachtenoberhausen.de: Ergaenzungen zum Design der Staedteseiten (css/style.css).
   style.css ist eine unveraenderte Kopie aus gutachten/kfz-gutachter-*.de. Hier steht nur,
   was Oberhausen zusaetzlich hat: laengere Hero-Texte, Hilfe-Karte, Schadenmeldung,
   Direktchat, Partnerseiten und Sprungmarken der alten Abschnitts-IDs. */

/* Alte Sprungmarken (#entlastung, #leistungen-fahrzeuge, #google-bewertungen) */
.anker { display: block; height: 0; scroll-margin-top: calc(var(--header-h) + 12px); }

/* Startseite ohne Einsatzgebiet: Wechsel hell/grau beibehalten (sonst zwei weisse Abschnitte) */
body:not(:has(#einsatzgebiet)) #gutachten { background: var(--tint); }
body:not(:has(#einsatzgebiet)) #gutachten .note { background: #fff; }

/* Impressum und Datenschutz: Knoepfe unter den Karten */
.legal__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Handy-Menue: "So erreichen Sie mich" wie im alten Menue */
.nav__kontakt { display: none; }
@media (max-width: 1180px) {
  .nav .nav__kontakt { display: grid; gap: 0; margin-top: 22px; padding: 4px; }
  .nav .nav__kontakt span { margin-bottom: 4px; color: var(--muted); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
  .nav .nav__kontakt a { padding: 9px 0; border: 0; color: var(--petrol-dunkel); font-size: 1rem; }
}

/* TEST 08.10.2026: Akzent Waldgruen var(--petrol) (Smaragd: oberhausen_basis.gruen-sicherung.css, Blau: oberhausen_basis.blau-test.css) */
/* ---------- Hero ---------- */
/* Vorteile: Desktop die vier Vorteile, Handy die vier Haken-Punkte; Google auf beiden */
.hero__highlights .hl--mobil { display: none; }
@media (max-width: 860px) {
  .hero__highlights .hl--desk { display: none; }
  .hero__highlights .hl--mobil { display: flex; }
  .hero__highlights li:last-child { grid-column: auto; }
  .hero__highlights .hl--google { order: 9; grid-column: 1 / -1; }
}
.hero__eyebrow { display: block; }
.hero__lead-mobil { display: block; }
.hero__lead-desk { display: none; }
.hero__dekra { display: none; }

@media (max-width: 860px) {
  /* "Schadengutachten" ist laenger als ein Stadtname: Schrift so, dass das Wort in eine Zeile passt */
  .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.9rem); }
  .hero__eyebrow { margin: 0 0 .6em; color: rgba(255, 255, 255, .78); font-size: .95rem; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
  .hero__willkommen--lang .hero__gruss :is(strong, .hero__nm) { display: block; margin-top: .6em; }
  .hero__dekra {
    display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 18px 0 0;
    color: rgba(255, 255, 255, .82); font-size: .9375rem;
  }
  .hero__dekra .icon { width: 18px; height: 18px; color: var(--petrol-hell); flex: none; }
  .intro-start .hero__dekra { animation: mobilEin .6s 1.7s ease both; }
  .intro-warten .hero__dekra { opacity: 0; }
}

@media (min-width: 861px) {
  .hero__content { grid-template-areas: "logo" "eyebrow" "h1" "willkommen" "cta" "dekra"; max-width: 1080px; }
  .hero__kennzeile { grid-area: eyebrow; }
  .hero__lead-mobil { display: none; }
  .hero__lead-desk { display: inline; }
  /* Zeile ueber der Ueberschrift: wie bisher "Kfz-Gutachter & Sachverstaendiger in ..." */
  .hero__eyebrow {
    margin: 0 0 .7em; color: rgba(255, 255, 255, .86); font-size: clamp(1rem, .85rem + .35vw, 1.25rem);
    font-weight: 500; letter-spacing: -.005em; line-height: 1.3; text-shadow: none;
    animation: heroWort .9s 2.35s cubic-bezier(.2, .7, .2, 1) both;
  }
  /* Ueberschrift etwas kleiner als in den Staedteseiten: der Oberhausener Text ist laenger */
  .hero h1 { font-size: min(clamp(3rem, .6rem + 4.2vw, 6.2rem), 8.6cqi); }
  .hero__willkommen--lang {
    max-width: 50em; font-size: clamp(1.05rem, .9rem + .3vw, 1.25rem); font-weight: 400; line-height: 1.55;
    color: rgba(255, 255, 255, .88); text-wrap: pretty;
  }
  .hero__willkommen--lang strong { color: #fff; font-weight: 600; }
  .hero .hero__cta { margin-top: 2.2rem; }
  .hero__dekra {
    grid-area: dekra; display: inline-flex; align-items: center; gap: .5rem; margin: 1.4rem 0 0;
    color: rgba(255, 255, 255, .82); font-size: .98rem; animation: heroText 1s 3.9s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero__dekra .icon { width: 18px; height: 18px; color: var(--petrol-hell); }
  /* Highlights: Beschreibungen der Vorteile sind laenger als in den Staedteseiten */
  .hero__highlights span { font-size: clamp(.86rem, .7rem + .26vw, .98rem); }
  .hero__highlights { grid-template-columns: 1fr 1.15fr 1fr 1fr .8fr; }
}
@media (min-width: 861px) and (max-height: 820px) {
  .hero__logo { width: clamp(170px, 13vw, 240px); margin-bottom: 22px; }
  .hero h1 { font-size: min(clamp(2.8rem, .6rem + 3.6vw, 5.2rem), 8cqi); }
  .hero .hero__cta { margin-top: 1.6rem; }
  .hero__panel { padding-bottom: 170px; }
}

/* Hinweiskarte "Unsicher, was nach einem Unfall zu tun ist?": wie bisher erst nach dem Hero
   oben rechts angepinnt, nur Desktop; js/oberhausen.js setzt .is-sichtbar */
.hilfe-pin { display: none; }
@media (min-width: 1100px) {
  .hilfe-pin {
    display: block; position: fixed; z-index: 55; top: calc(var(--header-h) + 16px); right: clamp(16px, 2vw, 32px);
    width: 290px; padding: 20px 20px 18px; background: #fff; color: var(--text); border-top: 3px solid var(--petrol-dunkel);
    box-shadow: 0 24px 50px -24px rgba(20, 23, 26, .45), 0 1px 2px rgba(20, 23, 26, .06);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  .hilfe-pin.is-sichtbar { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease; }
  .hilfe-pin__zu {
    position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px;
    padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  }
  .hilfe-pin__zu:hover { background: var(--tint); color: var(--ink); }
  .hilfe-pin__titel { margin: 0 28px .35rem 0; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
  .hilfe-pin__text { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.45; }
  .hilfe-pin__tel {
    display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px;
    background: var(--petrol-dunkel); color: #fff; font-weight: 600; text-decoration: none;
  }
  .hilfe-pin__tel:hover { background: var(--petrol-tief); }
  .hilfe-pin__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
  .hilfe-pin__reihe a {
    display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px;
    border: 1px solid var(--line); color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none;
  }
  .hilfe-pin__reihe a:hover { border-color: var(--ink); }
  .hilfe-pin .icon { width: 18px; height: 18px; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hilfe-pin, .hilfe-pin.is-sichtbar { transition: none; }
}

/* ---------- Hero Desktop: Foto rechts im diagonalen Schnitt (Variante 4, gewaehlt 07.10.2026) ----------
   Ab 1181 px: Video und Text links (linksbuendig), rechts das Foto aus Oberhausen, schraeg
   angeschnitten (die feine Petrol-Kante wurde am 07.10.2026 entfernt). Darunter (861 bis 1180 px) bleibt der Hero mittig ohne Foto,
   dort waere die Textspalte zu schmal. Das Handy hat sein Foto ohnehin im Hero. */
.hero__foto { display: none; }
@media (min-width: 1181px) {
  /* Text beginnt buendig mit der Vorteilsleiste darunter (max. 1440 px breit, mittig) */
  .hero__panel { align-items: flex-start; text-align: left; padding: 88px 50% 160px max(var(--h-rand), calc((100% - 1440px) / 2)); }
  .hero__content { justify-items: start; max-width: 680px; }
  .hero .hero__cta { justify-content: flex-start; gap: 10px; margin-top: 1.8rem; }
  .hero .btn--lime, .hero .btn--white, .hero .btn--ghost { padding: 12px 17px; font-size: .98rem; }
  .hero h1 { font-size: min(clamp(2.8rem, .6rem + 3.3vw, 4.9rem), 12cqi); }
  .hero__willkommen--lang { max-width: 40em; font-size: clamp(1rem, .9rem + .2vw, 1.12rem); line-height: 1.5; }
  .hero__logo { width: clamp(170px, 12vw, 220px); margin-bottom: clamp(18px, 3vh, 30px); }
  .hero__media::before {
    background:
      linear-gradient(90deg, rgba(27, 31, 36, .78) 0%, rgba(27, 31, 36, .45) 45%, rgba(27, 31, 36, .1) 75%),
      linear-gradient(180deg, rgba(27, 31, 36, .62) 0%, rgba(27, 31, 36, 0) 22%),
      linear-gradient(0deg, rgba(27, 31, 36, .7) 0%, rgba(27, 31, 36, 0) 28%);
  }
  .hero__foto {
    display: block; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 48%;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    /* ohne Einblend-Animation: das Foto steht beim Laden sofort da, wie der Hintergrund */
  }
  .hero__foto picture { display: block; width: 100%; height: 100%; }
  .hero__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 2%; }
  .hero__foto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(0deg, rgba(27, 31, 36, .9) 0%, rgba(27, 31, 36, 0) 30%),
      linear-gradient(180deg, rgba(27, 31, 36, .5) 0%, rgba(27, 31, 36, 0) 16%);
  }
}
/* Hintergrund (07.10.2026): leicht unscharfes Unfallbild statt Video, in Schwarz-Weiss und
   abgedunkelt (fest im Bild, _umbau/hintergrund.py, deshalb kein CSS-Filter). Darueber ein
   Farbverlauf am linken Rand in der Akzentfarbe (08.10.2026: Stahlgrau var(--petrol); Farbwechsel siehe Farbkonzept unten). */
@media (min-width: 861px) {
  .hero__bg::after { background: none; }
  /* Smaragdgruen am linken Rand (bis knapp ein Drittel), ueber dem dunklen Schleier, damit es kraeftig bleibt */
  .hero__media::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(15, 118, 110, .52) 0%, rgba(15, 118, 110, .34) 13%, rgba(15, 118, 110, .14) 25%, rgba(15, 118, 110, 0) 36%);
  }
  /* Glas-Effekt (backdrop-filter) der Knoepfe ueber dem laufenden Video kostet bei jedem Bild
     Rechenzeit und laesst den Hero ruckeln: stattdessen halbtransparente Flaeche */
  .hero .btn--white, .hero .btn--ghost { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 20, 24, .38); }
  .hero .btn--white:hover, .hero .btn--ghost:hover { background: rgba(18, 20, 24, .55); }
}

/* Text weiter links, groesser und besser lesbar (07.10.2026): Textblock und Vorteilsleiste
   beginnen am linken Rand (nicht mehr im 1440er Raster), dunklerer Verlauf nur hinter dem Text */
@media (min-width: 1181px) {
  /* Abstand links: deutlich vom Rand weg, waechst mit der Bildschirmbreite (1440: 115 px, 1920: 154 px) */
  :root { --hero-links: clamp(56px, 8vw, 180px); --kopf-logo-w: clamp(150px, 11vw, 190px); }
  /* Textspalte endet bei 52 %, die schraege Fotokante liegt auf Hoehe der Knoepfe bei etwa 55 % */
  .hero__panel { padding: 112px 48% 150px var(--hero-links); }
  .hero__content { max-width: 800px; }
  /* Logo steht oben links in der Menueleiste (07.10.2026), buendig mit dem Text darunter;
     das Logo ueber der Ueberschrift entfaellt. Intro siehe "Logo-Intro" weiter unten. */
  .hero__logo { display: none; }
  .header--video .header__row { padding-left: var(--hero-links); }
  .header--video .logo img { width: var(--kopf-logo-w); }
  body:not(.nav-open) .header--video:not(.is-solid) .logo { opacity: 1; visibility: visible; }
  .hero__eyebrow { font-size: clamp(1.05rem, .8rem + .45vw, 1.4rem); font-weight: 600; color: #fff; }
  .hero h1 { font-size: min(clamp(3rem, .5rem + 4vw, 6rem), 13cqi); text-shadow: 0 2px 26px rgba(0, 0, 0, .55); }
  .hero__willkommen--lang { max-width: 34em; font-size: clamp(1.05rem, .75rem + .45vw, 1.35rem); line-height: 1.5; color: #fff; font-weight: 450; }
  .hero__eyebrow, .hero__willkommen--lang, .hero__dekra { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .6); }
  .hero .hero__cta { margin-top: 2rem; }
  .hero__dekra { font-size: 1.02rem; color: #fff; }
  .hero__highlights { left: var(--hero-links); right: var(--h-rand); width: auto; margin: 0; }
  .hero__media::before {
    background:
      linear-gradient(90deg, rgba(10, 12, 18, .74) 0%, rgba(10, 12, 18, .62) 35%, rgba(10, 12, 18, .32) 50%, rgba(10, 12, 18, 0) 66%),
      linear-gradient(180deg, rgba(20, 23, 27, .5) 0%, rgba(20, 23, 27, 0) 20%),
      linear-gradient(0deg, rgba(20, 23, 27, .7) 0%, rgba(20, 23, 27, 0) 28%);
  }
}
/* Knoepfe (07.10.2026: "CTA Desktop muessen groesser"): deutlich groessere Flaechen und Schrift,
   immer in einer Reihe; auf kleineren Laptops rueckt der Textblock dafuer etwas weniger weit ein */
@media (min-width: 1600px) {
  .hero .hero__cta { gap: 12px; }
  .hero .btn--lime, .hero .btn--white, .hero .btn--ghost { padding: 18px clamp(20px, 1.45vw, 28px); gap: 10px; font-size: clamp(1.02rem, .6rem + .45vw, 1.12rem); }
  .hero__cta .btn--lime .icon, .hero__cta .btn--white .icon, .hero__cta .btn--ghost .icon { width: 21px; height: 21px; }
}
@media (min-width: 1181px) and (max-width: 1599px) {
  .hero .hero__cta { gap: 10px; }
  .hero .btn--lime, .hero .btn--white, .hero .btn--ghost { padding: 16px 19px; gap: 9px; font-size: 1.02rem; }
  .hero__cta .btn--lime .icon, .hero__cta .btn--white .icon, .hero__cta .btn--ghost .icon { width: 19px; height: 19px; }
}
@media (min-width: 1181px) and (max-width: 1439px) {
  :root { --hero-links: clamp(48px, 4.6vw, 66px); }
  .hero .hero__cta { gap: 8px; }
  .hero .btn--lime, .hero .btn--white, .hero .btn--ghost { padding: 15px 15px; gap: 8px; font-size: .98rem; }
}
@media (min-width: 1181px) and (max-width: 1279px) {
  .hero .btn--lime, .hero .btn--white, .hero .btn--ghost { padding: 14px 12px; gap: 7px; font-size: .94rem; }
}
/* Niedrige Bildschirme (Laptops): kompakter, damit die Vorteilsleiste frei bleibt */
@media (min-width: 1181px) and (max-height: 860px) {
  .hero__panel { padding-top: 104px; padding-bottom: 146px; }
  .hero__eyebrow { font-size: 1.05rem; margin-bottom: .5em; }
  .hero h1 { font-size: min(clamp(2.5rem, .5rem + 3vw, 4.2rem), 12cqi); }
  .hero__willkommen--lang { font-size: clamp(.98rem, .8rem + .3vw, 1.08rem); line-height: 1.45; }
  .hero .hero__cta { margin-top: 1.3rem; }
  .hero__dekra { margin-top: .8rem; }
}

/* Sehr niedrige Bildschirme (z. B. 1280 x 720): noch kompakter, Vorteilsleiste kleiner */
@media (min-width: 1181px) and (max-height: 760px) {
  .hero__panel { padding-top: 98px; padding-bottom: 140px; }
  .hero__eyebrow { font-size: .98rem; margin-bottom: .35em; }
  .hero h1 { font-size: min(clamp(2.1rem, .4rem + 2.4vw, 3.3rem), 10.5cqi); margin-bottom: .22em; }
  .hero__willkommen--lang { font-size: .95rem; line-height: 1.42; }
  .hero .hero__cta { margin-top: 1rem; }
  .hero__dekra { margin-top: .6rem; font-size: .92rem; }
  .hero__highlights { bottom: 22px; }
  .hero__highlights .hl__titel { font-size: .95rem; }
  .hero__highlights span { font-size: .82rem; line-height: 1.35; }
}

/* Schrift-Hierarchie im Desktop-Hero (07.10.2026: "irgendwie fehlt die Hierarchie"):
   Variante 3 "ruhig" (vom Nutzer gewaehlt):
   1. Kennzeile gedaempft weiss, normale Schreibweise, gruener Punkt davor
   2. Ueberschrift gross, mit mehr Luft darunter
   3. Frage groesser und leicht (300), klar unter der Ueberschrift
   4. Begruessung kleiner und gedaempft
   5. mehr Abstand zu den Knoepfen; DEKRA-Zeile leise */
@media (min-width: 861px) {
  .hero .hero__eyebrow {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5em .9em; margin: 0 0 1.1em; color: rgba(255, 255, 255, .8);
    font-size: clamp(.95rem, .85rem + .2vw, 1.1rem); font-weight: 500; letter-spacing: .01em; text-transform: none;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  }
  /* Kennzeile als zwei Punkte mit gruenem Symbol (DEKRA: Schild mit Haken, Sachverstaendiger: Siegel) */
  .hero__kennzeile .kz { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
  .hero__kennzeile .icon { flex: none; width: 1.2em; height: 1.2em; color: var(--petrol-hell); stroke-width: 2; }
  /* kurzer Strich als Trenner zwischen den beiden Punkten (07.10.2026) */
  .hero__kennzeile .kz + .kz::before { content: ""; flex: none; width: 14px; height: 2px; margin-right: .55em; background: rgba(255, 255, 255, .55); }
  .hero h1 { margin-bottom: .42em; }
  .hero__lead-desk--kurz { display: block; }
  .hero__lead-desk--kurz .hero__frage { color: #fff; font-size: 1.32em; font-weight: 300; line-height: 1.4; letter-spacing: -.01em; }
  .hero__lead-desk--kurz .hero__gruss { margin-top: .7em; color: rgba(255, 255, 255, .62); font-size: .9em; font-weight: 400; }
  .hero__lead-desk--kurz .hero__gruss :is(strong, .hero__nm) { color: #fff; font-weight: 600; }
  .hero .hero__cta { margin-top: 2.4rem; }
  .hero .hero__dekra { color: rgba(255, 255, 255, .68); font-size: .88rem; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .hero .hero__eyebrow { justify-content: center; }
}
/* ab 1181 px: beide Punkte mit Strich immer in einer Zeile; die Textspalte ist etwa 0,44 x
   Fensterbreite breit, die Kennzeile braucht etwa 43 x Schriftgroesse, daher Schrift ~0,97vw */
@media (min-width: 1181px) {
  .hero .hero__eyebrow { flex-wrap: nowrap; font-size: clamp(.78rem, 1.05vw, 1.15rem); }
}
@media (min-width: 1181px) and (max-height: 860px) {
  .hero .hero__eyebrow { margin-bottom: .8em; }
  .hero .hero__cta { margin-top: 1.7rem; }
}

/* Stadt in der Ueberschrift (07.10.2026): eigene Zeile, farbig abgesetzt wie die Stadt in den
   Staedteseiten; Desktop im Gruen des Verlaufs, Handy im hellen Petrol des Handy-Heros */
.hero h1 .h1-ort { display: block; }
@media (min-width: 861px) {
  .hero h1 .h1-ort { color: var(--akzent-heller); }
}
@media (max-width: 860px) {
  .hero h1 .h1-ort { color: var(--akzent-heller); }
}

/* Handy: Kennzeile mit Symbolen mittig, umbrechend */
@media (max-width: 860px) {
  .hero__kennzeile { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em 1.1em; }
  .hero__kennzeile .kz { display: inline-flex; align-items: center; gap: .45em; }
  .hero__kennzeile .icon { flex: none; width: 1.1em; height: 1.1em; color: var(--akzent-heller); }
}

/* ---------- Handy-Hero an den Desktop angelehnt (08.10.2026) ----------
   linksbuendig, Stadt in Gruen, Kennzeile mit gruenen Symbolen, kurzer Untertitel wie am Desktop,
   gruener Verlauf vom linken Rand, gruene Symbole in der Vorteilsliste. */
@media (max-width: 860px) {
  .hero__panel { text-align: left; }
  .hero__content { text-align: left; }
  .hero h1 .h1-ort { color: var(--akzent-heller); }
  .hero__kennzeile { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: .3em; margin: 0 0 .9em; font-size: .9rem; color: rgba(255, 255, 255, .82); }
  .hero__kennzeile .icon { color: var(--petrol-hell); }
  .hero__kennzeile .kz + .kz::before { display: none; }
  .hero__lead-mobil--kurz .hero__frage { color: #fff; font-size: 1.12rem; font-weight: 300; line-height: 1.45; }
  .hero__lead-mobil--kurz .hero__gruss { margin-top: .6em; color: rgba(255, 255, 255, .66); font-size: .92rem; }
  .hero__lead-mobil--kurz .hero__gruss::before { display: none; }
  .hero .hero__lead-mobil--kurz .hero__gruss :is(strong, .hero__nm) { display: inline; margin: 0; color: #fff; font-weight: 600; }
  .hero__media::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(15, 118, 110, .36) 0%, rgba(15, 118, 110, .16) 22%, rgba(15, 118, 110, 0) 48%),
      /* unterer Teil dunkler, damit die Schrift gut lesbar ist (08.10.2026) */
      linear-gradient(180deg, rgba(8, 10, 12, 0) 16%, rgba(8, 10, 12, .5) 30%, rgba(8, 10, 12, .72) 44%, rgba(8, 10, 12, .82) 100%);
  }
  /* Vorteilsflaeche in den Erkennungsfarben (08.10.2026, Wahl "Raster ohne Kacheln, aber
     uebereinander"): weisser Grund, ein Punkt je Zeile, gruenes Symbol ohne Feld, feine Linien,
     Schrift Anthrazit, Google als letzte Zeile mit Sternen */
  .hero__highlights { display: flex; flex-direction: column; gap: 0; padding: 6px 20px 18px; background: #fff; border: 0; }
  .hero__highlights li.hl--mobil, .hero__highlights li.hl--google {
    flex-direction: row; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #e8eaed;
  }
  .hero__highlights li.hl--google { order: 9; border-bottom: 0; }
  .hero__highlights li.hl--google a { flex-direction: row; align-items: center; gap: 16px; }
  .hero__highlights .icon { width: 28px; height: 28px; padding: 0; background: none; color: var(--petrol); stroke-width: 1.8; flex: none; }
  .hero__highlights .hl__titel { margin-bottom: 2px; color: #2a2e33; font-size: 1rem; font-weight: 700; line-height: 1.25; }
  .hero__highlights span { color: #5d646c; font-size: .875rem; }
  .hero__highlights li.hl--google .icon { color: #2a2e33; }
  .hero__highlights li.hl--google .hl__titel::after { content: "★★★★★"; display: block; margin: 4px 0 3px; color: #fbbc04; letter-spacing: .08em; font-size: 1.45rem; line-height: 1; } /* Sterne gross in eigener Zeile (08.10.2026) */
  /* Google-Zeile (08.10.2026): ohne "aus 30 Rezensionen", stattdessen rechts ein kleiner runder Pfeil-Knopf */
  .hero__highlights li.hl--google a { width: 100%; }
  .hero__highlights li.hl--google a > span { font-size: 0; }
  .hero__highlights li.hl--google .hl__titel { margin-bottom: 0; }
  .hero__highlights li.hl--google a::after {
    content: "›"; display: grid; place-items: center; flex: none; margin-left: auto; width: 34px; height: 34px; padding-bottom: 2px; box-sizing: border-box;
    border: 1px solid #d5dbe1; border-radius: 50% !important; color: #2a2e33; font-size: 1.35rem; line-height: 1;
  }
  /* Ohne Karte (08.10.2026, auf Wunsch): Liste liegt direkt unter dem Hero auf Weiss, keine Ueberlappung,
     kein Schatten; Symbole bleiben in hellgruenen Feldern */
  .hero { background: #fff; }
  .hero__highlights { padding: 10px 20px 14px; }
  .hero__highlights li.hl--mobil, .hero__highlights li.hl--google { padding: 14px 0; }
  .hero__highlights .icon { width: 40px; height: 40px; padding: 9px; box-sizing: border-box; background: var(--akzent-hauch); color: var(--petrol-dunkel); }
  .hero__highlights li.hl--google .icon { background: #f1f3f5; color: #2a2e33; }
  /* Kopf der Schnelluebersicht (08.10.2026): dezenter Titel, darunter die Fahrzeugarten als vier Felder */
  .hl-kopf { display: block; padding: 26px 20px 4px; background: #fff; }
  .hl-kopf__titel { margin: 0; color: var(--petrol-dunkel); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
  .hl-kopf__unter { margin: 4px 0 12px; color: #2a2e33; font-size: 1.15rem; font-weight: 700; }
  .hl-typen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0 0 14px; list-style: none; border-bottom: 1px solid #e8eaed; }
  /* Variante 6 (08.10.2026): Fahrzeugarten und Vorteile mit runden hellgruenen Symbolen */
  .hl-typen li { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; background: none; }
  .hl-typen .icon { width: 56px; height: 56px; padding: 14px; box-sizing: border-box; border-radius: 50% !important; background: var(--akzent-hauch); color: var(--petrol-dunkel); }
  .hero__highlights .icon { border-radius: 50% !important; }
  /* "Schaden auszahlen" zuerst und leicht hervorgehoben: Symbol voll gruen, Ueberschrift etwas groesser */
  .hero__highlights li.hl--top { order: -1; } /* hellgruenes Band auf Wunsch entfernt; hervorgehoben bleibt das volle Symbol */
  .hero__highlights li.hl--top .icon { background: var(--petrol); color: #fff; }
  .hero__highlights li.hl--top .hl__titel { font-size: 1.08rem; }
  .hl-typen span { color: #2a2e33; font-size: .78rem; font-weight: 600; white-space: nowrap; }
}
@media (min-width: 861px) { .hl-kopf { display: none; } }
/* Handy-Animation: Foto zoomt beim Laden leicht heraus und wird scharf; danach gleiten Kennzeile,
   Ueberschrift, Untertitel, Knoepfe und Vorteile nacheinander ein. Beim ersten Besuch steuert das
   Intro der Vorlage nach der Cookie-Wahl (intro-start), sonst laeuft diese Folge (intro-fertig). */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  /* Logo (08.10.2026): bei jedem Aufruf gross in der Bildmitte, dann nach oben links in die
     Menuezeile (Keyframes logoIntroMobil aus style.css, sonst nur beim ersten Besuch).
     Foto bleibt unscharf, bis das Logo losgeht (ab ~1 s), danach kommen die Texte. */
  html:not(.intro-warten):not(.intro-start) .hero__logo-mobil {
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
    -webkit-mask-size: 250% 100%; mask-size: 250% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: logoIntroMobil 2s cubic-bezier(.2, .7, .2, 1) both, logoWischen .75s ease-out both;
  }
  .hero__bg { animation: mobilZoom 1.1s .95s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.intro-warten):not(.intro-start) .hero__kennzeile { animation: mobilEin .7s 1.35s ease both; }
  html:not(.intro-warten):not(.intro-start) .hero h1 { animation: mobilEin .7s 1.5s ease both; }
  html:not(.intro-warten):not(.intro-start) .hero__willkommen { animation: mobilEin .7s 1.68s ease both; }
  html:not(.intro-warten):not(.intro-start) .hero__cta { animation: mobilEin .7s 1.85s ease both; }
  html:not(.intro-warten):not(.intro-start) .hl-kopf { animation: mobilEin .6s 1.95s ease both; }
  html:not(.intro-warten):not(.intro-start) .hero__highlights li { animation: mobilEin .6s 2s ease both; }
  html:not(.intro-warten):not(.intro-start) .hero__highlights li:nth-child(n+6) { animation-delay: 2.08s; }
  html:not(.intro-warten):not(.intro-start) .hero__highlights li:nth-child(n+8) { animation-delay: 2.16s; }
  .intro-start .hero__kennzeile { animation: mobilEin .6s 1.25s ease both; }
  @keyframes mobilZoom { from { transform: scale(1.1); filter: blur(8px); } to { transform: none; filter: none; } }
}

/* Logo-Intro (ab 1181 px): das Logo der Menueleiste entsteht gross (3,2-fach) in der Bildschirmmitte,
   steht kurz und fliegt dann an seinen Platz oben links. --kopf-dx / --kopf-dy = Weg von der Mitte
   zum Platz (Kopfzeile oben 96 px hoch, Logo darin senkrecht mittig). Laeuft nur beim Laden
   (main.js setzt "ohne-intro" nach 5 s oder sofort, wenn die Seite schon gescrollt ist). */
@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .header--video:not(.ohne-intro) .logo__weiss {
    --kopf-dx: calc(50vw - var(--hero-links) - var(--kopf-logo-w) / 2);
    --kopf-dy: calc(50vh - 48px);
    transform-origin: 50% 50%;
    animation: kopfLogoIntro 2.1s .15s both;
  }
  @keyframes kopfLogoIntro {
    0% { opacity: 0; transform: translate(var(--kopf-dx), var(--kopf-dy)) scale(2.8);
         filter: blur(14px) drop-shadow(0 2px 24px rgba(0, 0, 0, .25)); animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
    40% { opacity: 1; transform: translate(var(--kopf-dx), var(--kopf-dy)) scale(3.2);
          filter: blur(0) drop-shadow(0 2px 24px rgba(0, 0, 0, .25)); animation-timing-function: linear; }
    55% { opacity: 1; transform: translate(var(--kopf-dx), var(--kopf-dy)) scale(3.2);
          filter: blur(0) drop-shadow(0 2px 24px rgba(0, 0, 0, .25)); animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
    100% { opacity: 1; transform: none; filter: none; }
  }
}

/* Intro (Desktop): Hintergrund und Foto starten leicht unscharf, solange das Logo gross in der
   Mitte steht, und werden scharf, waehrend es nach oben links wandert. Das Logo bewegt sich ab
   etwa 1,3 s (55 % von 2,1 s ab 0,15 s), bis etwa 2,25 s; die Schaerfe folgt im selben Takt. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  .hero__bg { animation: heroZoom 2.4s cubic-bezier(.2, .7, .2, 1) both, heroScharf .95s 1.3s cubic-bezier(.65, 0, .25, 1) both; }
}
/* Foto rechts mit denselben Bewegungen wie das Autobild (07.10.2026): beim Laden leicht
   herauszoomen (heroZoom aus style.css) und scharf werden, beim Wegscrollen sanft weiter heraus */
@media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
  .hero__foto picture { animation: heroZoom 2.4s cubic-bezier(.2, .7, .2, 1) both, heroScharf .95s 1.3s cubic-bezier(.65, 0, .25, 1) both; }
}
@supports (animation-timeline: scroll()) {
  @media (min-width: 1181px) and (prefers-reduced-motion: no-preference) {
    .hero__foto img { animation: fotoWeg linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    @keyframes fotoWeg { from { scale: 1.03; } to { scale: 1; } }
  }
}
@keyframes heroScharf { from { filter: blur(10px); } to { filter: blur(0); } }

/* ---------- Ueber mich: Rolle unter der Ueberschrift (wie die Kennzeile im Kopf) ---------- */
#ueber-mich .profile__kopf .profile__role { margin: 0; }
/* Kennzeile "Ueber mich" sichtbar (die Vorlage blendet sie aus), damit der Abschnitt direkt
   nach dem Hero als "Ueber mich" erkennbar ist (07.10.2026) */
#ueber-mich .profile__kopf .kicker { display: block; margin-bottom: .8rem; }
@media (max-width: 860px) {
  #ueber-mich .profile__kopf { margin-bottom: .9rem; }
  #ueber-mich .profile__kopf h2 { margin-bottom: .4em; }
}

/* ---------- Fakten: laengere Staerken als in den Staedteseiten, deshalb feste Spalten ---------- */
@media (min-width: 861px) {
  .fakten__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Ablauf mit drei Schritten (Oberhausen) ---------- */
.steps-band--3 .ablauf-schritt p { max-width: 22em; }

/* ---------- Einsatzgebiet: Stadtteile ohne eigene Zwischenzeile ---------- */
#einsatzgebiet .area + .chips { margin-top: 1.6rem; }

/* ---------- Schadenmeldung: Karte im Kontaktbereich, Overlay ueber <dialog> ---------- */
.claim { position: relative; }
.claim__zu {
  display: none; position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; place-items: center;
  padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); cursor: pointer;
}
.claim__zu:hover { background: var(--tint); }
.claim__zu .icon { width: 22px; height: 22px; }
.claim > .termin__titel { padding-right: 48px; }
.claim .form__intro { margin-bottom: 1.4rem; }
.claim .row { margin-bottom: 0; }
.claim .field input[type="date"] { min-height: 50px; }
.claim .field input.is-invalid { border-color: #b3261e; border-width: 2px; }
.claim .choice.is-invalid span { border-color: #b3261e; }
.choice--claim span { justify-content: flex-start; gap: .75rem; padding: .75rem .9rem; text-align: left; }
.choice--claim .icon { width: 20px; height: 20px; flex: none; color: var(--petrol-dunkel); }
.choice.choice--claim .choice__text {
  display: grid; gap: 1px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left;
}
.choice__text strong { font-weight: 700; color: var(--ink); line-height: 1.2; }
.choice__text small { font-size: .82rem; font-weight: 500; color: var(--text); line-height: 1.3; }
.choice--claim input:checked + span { border-color: var(--petrol-dunkel); background: rgba(15, 118, 110, .1); }
.claim__contact { margin-bottom: 4px; }
.claim__submit { margin-top: .4rem; }
.termin-dialog .claim { margin: 0; padding: clamp(24px, 3.5vw, 44px); border: 0; border-radius: 0; box-shadow: none; background: #fff; overflow: auto; }
.termin-dialog .claim__zu { display: grid; }
@media (min-width: 1000px) {
  .claim-dialog[open] { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .termin-dialog .claim { padding: 20px 18px 28px; }
  .choice--claim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .claim .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Fusszeile: zweite Liste und Partnerseiten ---------- */
.footer__titel--abstand { margin-top: 1.8rem !important; }
.footer__partner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem;
}
.footer__partner ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.footer__partner a { color: rgba(255, 255, 255, .78); }
.footer__partner a:hover { color: #fff; }

/* ---------- Kontaktleiste (Handy): Direktchat statt Termin ---------- */
.mbar .mbar__chat {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 50px;
  padding: 0; border: 0; border-radius: var(--radius-sm); background: var(--petrol-dunkel); color: #fff;
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.mbar .mbar__chat .icon { width: 18px; height: 18px; }
.mbar__punkt { position: absolute; top: 8px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 0 2px #fff; }

/* ---------- Direktchat: Farben an das neue Design angepasst (Petrol statt Limette) ---------- */
.wa-chat {
  --accent: var(--petrol-dunkel, #3F6970);
  --accent-deep: var(--petrol-tief, #345A60);
  --accent-ice: var(--petrol-hell, #6F9CA3);
  --accent-soft: rgba(15, 118, 110, .16);
  --ap-black: #14171a;
  --ap-black-hover: #000;
  --ap-lime: var(--petrol-hell, #6F9CA3);
  --ap-r: 0px;
  --brand: #14171a;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --fw-bold: 700;
  --fw-semibold: 600;
  --ink: #14171a;
  --line: #d5dade;
  --muted: #656c75;
}
/* Kontaktleiste unten ist sichtbar: Chat-Hinweise darueber */
@media (max-width: 860px) {
  body.mbar-an .wa-chat.has-unread:not(.is-open),
  body.mbar-an .wa-chat.has-toast:not(.is-open) { bottom: calc(4.7rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Ab hier: Direktchat, unveraendert aus den alten Stylesheets uebernommen ---------- */

/* Nach oben (08.10.2026, auf Wunsch): nur der Pfeil in Anthrazit, ohne Kasten und ohne Schein */
.nach-oben, .nach-oben:hover { background: none; box-shadow: none; color: rgba(42, 46, 51, .6); }
.nach-oben .icon { width: 28px; height: 28px; stroke-width: 1.6; } /* schlanker Winkel (08.10.2026: dezenter) */
.nach-oben:hover .icon { color: #2a2e33; }

/* Menue-Knopf (08.10.2026, auf Wunsch): nur das Symbol, ohne Kasten und ohne Schein.
   Anthrazit, auf dunklen Flaechen weiss (siehe unten) */
html body .header .burger, html body:not(.nav-open) .header--video .burger {
  border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff;
  transition: color .2s ease;
}
html body .header .burger svg { width: 30px; height: 30px; }
html body .header .burger, html body:not(.nav-open) .header--video .burger { color: #2a2e33; }
/* auf dunklen Flaechen weiss (Klasse auf-dunkel aus js/oberhausen.js) */
html body:not(.nav-open) .header .burger.auf-dunkel { color: #fff; }
.nach-oben.auf-dunkel, .nach-oben.auf-dunkel:hover { color: rgba(255, 255, 255, .85); }
.nach-oben.auf-dunkel:hover .icon { color: #fff; }
html body.nav-open .header .burger { color: #2a2e33; }

/* ---------- Farbkonzept auf der ganzen Seite (08.10.2026) ----------
   Die Vorlage (style.css) faerbt Knoepfe, Kicker, Symbole, Ablauf und Fusszeile in Petrol. Hier zeigen
   ihre Variablen und festen Werte auf die aktuelle Akzentfamilie (Haupt var(--petrol), hell var(--petrol-hell),
   heller var(--akzent-heller), dunkel var(--petrol-dunkel), Hauch var(--akzent-hauch)). Beim Farbwechsel diese Werte mittauschen. */
:root {
  --petrol-hell: #2dd4bf;      /* auf dunklem Grund */
  --petrol: #0F766E;           /* Grafiken und Symbole auf hellem Grund */
  --petrol-dunkel: #115e59;    /* Schrift und gefuellte Knoepfe auf hellem Grund */
  --petrol-tief: #2a2e33;      /* Hover der dunklen Knoepfe (Anthrazit) */
  --accent: var(--petrol-hell);
  --accent-hover: #5eead4;
  --akzent-heller: #5eead4;
  --akzent-hauch: #e6f6f4;
  --accent-ink: var(--petrol-dunkel);
  --accent-soft: rgba(15, 118, 110, .16);
}
.termin { --t-soft: rgba(15, 118, 110, .1); }
.ablauf-schritt__nr, .steps-band .flow__label, .ablauf-stand__nr, .ablauf-fortschritt li.is-erreicht { color: var(--petrol-hell); }
.ablauf-fortschritt__linie span { background: var(--petrol-hell); }
.fakten__liste li::before { background-color: var(--petrol); }
.hero .hero__cta .btn--lime { color: var(--petrol-dunkel); } /* weisser Hauptknopf im Hero: Schrift in der Akzentfamilie statt Petrol */
/* Cookie-Hinweis (js/sv-consent.js setzt Petrol per eingefuegtem Style): hoehere Spezifitaet, Akzentfamilie */
html body .sv-consent--mitte .sv-consent__card { border-top-color: var(--petrol); }
html body .sv-consent--mitte .sv-consent__symbol { background: rgba(15, 118, 110, .16); color: var(--petrol); }
html body .sv-consent--mitte .sv-consent__text a { color: var(--petrol-dunkel); }
html body .sv-consent--mitte .sv-consent__liste svg { stroke: var(--petrol); }
html body .sv-consent--mitte .sv-consent__btn--accept { background: var(--petrol-dunkel); }

/* Schnelluebersicht Handy aufgeraeumt (08.10.2026, Variante B): alle Symbole gleich gross im hellen Kreis,
   gleich hohe Zeilen, Sterne neben "5,0 bei Google". Fahrzeugarten auf hellgrauer Flaeche,
   darueber "Auf einen Blick", ueber der Liste der Kicker "Ihre Vorteile" */
@media (max-width: 860px) {
  .hero__highlights .icon, .hero__highlights li.hl--top .icon { width: 40px; height: 40px; padding: 10px; background: var(--akzent-hauch); color: var(--petrol-dunkel); }
  .hero__highlights li.hl--google .icon { background: var(--akzent-hauch); color: #2a2e33; }
  .hero__highlights li.hl--top .hl__titel { font-size: 1rem; }
  .hero__highlights li.hl--mobil, .hero__highlights li.hl--google { min-height: 68px; padding: 12px 0; }
  .hero__highlights li.hl--google .hl__titel::after { display: inline; margin: 0 0 0 .4em; font-size: 1.05rem; vertical-align: -.05em; }
  .hl-typen { gap: 10px; padding: 0; border: 0; }
  .hl-typen li { gap: 6px; }
  .hl-typen .icon { width: 48px; height: 48px; padding: 12px; background: #fff; }
  .hl-kopf { padding: 22px 20px 18px; background: #f3f5f7; }
  .hero__highlights { padding-top: 22px; }
  .hero__highlights::before {
    content: "Ihre Vorteile"; display: block; order: -2; margin: 0 0 4px;
    color: var(--petrol-dunkel); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }
}

/* Leicht abgerundete Ecken (08.10.2026, Wunsch "minimal"): Knoepfe und Bilder 6 px. style.css setzt sonst
   alles scharfkantig (*{border-radius:0 !important}); hier gewinnen die spezifischeren Regeln.
   Das Hero-Bild bleibt randlos, runde Symbole bleiben rund. */
html body .btn, html body .mbar a, html body .contact-card a, html body .kal__raster button, html body .zeiten button,
html body .fz__karte > span, html body .segment label > span, html body .termin__aendern,
html body .sv-consent__btn { border-radius: 6px !important; }
html body main img, html body main video, html body .termin-dialog__bild img, html body .fleet__tile, html body .profile__bild { border-radius: 6px !important; }
html body .hero img, html body .hero video, html body .hero picture, html body .hl-typen .icon, html body .hero__highlights .icon { border-radius: 0 !important; }
html body .hl-typen .icon, html body .hero__highlights .icon, html body .hero__highlights li.hl--google a::after { border-radius: 50% !important; }

/* Kopf der Schnelluebersicht als echte Ueberschrift (08.10.2026): "Das Wichtigste in Kürze" gross in Anthrazit
   mit kurzer Linie darunter, "Schadengutachten für" als ruhige Unterzeile */
@media (max-width: 860px) {
  .hl-kopf .hl-kopf__titel {
    margin: 0; color: #2a2e33; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-transform: none;
  }
  .hl-kopf .hl-kopf__titel::after { content: ""; display: block; width: 36px; height: 3px; margin: 10px 0 14px; background: var(--petrol); }
  .hl-kopf .hl-kopf__unter { margin: 0 0 12px; color: #565d65; font-size: .95rem; font-weight: 600; }
}
/* "Ihre Vorteile" im selben Stil wie "Schadengutachten für" (08.10.2026) */
@media (max-width: 860px) {
  .hero__highlights::before { margin: 0 0 6px; color: #565d65; font-size: .95rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
}
/* Farben getauscht (08.10.2026): Kopf mit Fahrzeugarten weiss, Vorteilsliste auf Hellgrau */
@media (max-width: 860px) {
  .hl-kopf { background: #fff; }
  .hl-typen .icon { background: var(--akzent-hauch); }
  .hero__highlights { background: #f3f5f7; padding-bottom: 22px; }
  .hero__highlights .icon, .hero__highlights li.hl--top .icon, .hero__highlights li.hl--google .icon { background: #fff; }
  .hero__highlights li.hl--mobil, .hero__highlights li.hl--google { border-bottom-color: #e2e6ea; }
  .hero__highlights li.hl--google a::after { background: #fff; }
}
/* Alles weiss (08.10.2026): Kopf und Vorteilsliste auf Weiss, Kreise hellgrau, feine Linie zwischen den Bloecken */
@media (max-width: 860px) {
  .hl-kopf { background: #fff; }
  .hl-typen { padding-bottom: 18px; border-bottom: 1px solid #e8eaed; }
  .hl-typen .icon { background: var(--akzent-hauch); }
  .hero__highlights { background: #fff; padding-top: 18px; }
  .hero__highlights .icon, .hero__highlights li.hl--top .icon, .hero__highlights li.hl--google .icon { background: var(--akzent-hauch); }
  .hero__highlights li.hl--mobil, .hero__highlights li.hl--google { border-bottom-color: #e8eaed; }
  .hero__highlights li.hl--google a::after { background: #fff; }
}
/* "Über mich" im Stil von "Das Wichtigste in Kürze" (08.10.2026, Handy): Kicker wird zur grossen Ueberschrift
   mit kurzer Linie, der Name darunter als Unterzeile */
@media (max-width: 860px) {
  #ueber-mich .profile__kopf .kicker {
    display: block; margin: 0; color: #2a2e33; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-transform: none;
  }
  #ueber-mich .profile__kopf .kicker::after { content: ""; display: block; width: 36px; height: 3px; margin: 10px 0 14px; background: var(--petrol); }
  #ueber-mich .profile__kopf h2 { margin: 0; color: #565d65; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
}
/* Handy (08.10.2026): Linien unter den Ueberschriften entfernt; "Ihr Kfz Gutachter: Carsten Heiken" nur noch
   unsichtbar fuer Suchmaschinen und Screenreader (bleibt die Ueberschrift des Abschnitts) */
@media (max-width: 860px) {
  .hl-kopf .hl-kopf__titel::after, #ueber-mich .profile__kopf .kicker::after { content: none; }
  .hl-kopf .hl-kopf__titel { margin-bottom: 6px; }
  #ueber-mich .profile__kopf .kicker { margin-bottom: 14px; }
  #ueber-mich .profile__kopf h2 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* Schnelluebersicht ohne Animation (08.10.2026): Kopf, Fahrzeugarten und Vorteile stehen sofort da */
@media (max-width: 860px) {
  html body .hl-kopf, html body .hl-kopf *, html body .hero__highlights, html body .hero__highlights li, html body .hero__highlights li * {
    animation: none !important; transition: none !important; opacity: 1; transform: none;
  }
}
/* Mehr Abstand zwischen Hero und Schnelluebersicht (08.10.2026) */
@media (max-width: 860px) { .hl-kopf { padding-top: 44px; } }
/* Einheitliche Abschnitts-Ueberschriften am Handy (08.10.2026), Stil wie "Über mich" / "Das Wichtigste in Kürze":
   eine Ueberschrift, 1,5 rem, sehr fett, ohne kleinen Kicker darueber. Auf dunklen Flaechen bleibt sie weiss. */
@media (max-width: 860px) {
  main section:not(#ueber-mich) .kicker { display: none; }
  main section:not(#ueber-mich):not(.hero) h2 {
    margin-top: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-transform: none;
  }
  main section:not(#ueber-mich):not(.hero):not(#ablauf) h2 { color: #2a2e33; }
}
/* Rundungen vollstaendig (08.10.2026): ":not(#_)" hebt die Spezifitaet ueber die !important-Regeln der Vorlage
   (z. B. body .reveal). Knoepfe, Felder, Karten, Bilder 6 px; Hero-Bild und runde Symbole bleiben wie sie sind. */
html body :is(.btn, button, .mbar a, .mbar button, .contact-card a, .footer__rating, .review, input, select, textarea,
  .kal__nav, .kal__raster button, .zeiten button, .fz__karte > span, .segment label > span, .termin__aendern, .sv-consent__btn):not(#_) { border-radius: 6px !important; }
html body :is(main img, main video, footer img, .termin-dialog__bild img, .fleet__tile, .reveal img, img.reveal):not(#_) { border-radius: 6px !important; }
html body :is(.hero img, .hero video, .hero picture, .hero .reveal, .burger, .nach-oben, .hp input, input[type="radio"], input[type="checkbox"]):not(#_) { border-radius: 0 !important; }
html body :is(.hl-typen .icon, .hero__highlights .icon, .avatar, .callcard img, .form__done .done-icon):not(#_) { border-radius: 50% !important; }
html body .hero__highlights li.hl--google a:not(#_)::after { border-radius: 50% !important; }
html body footer a:not(#_) { border-radius: 6px !important; } /* Symbol-Links mit Rahmen in der Fusszeile */

/* ---------- Handy: einheitliche Ausrichtung und Schriftgroessen (08.10.2026) ----------
   Alles linksbuendig (vorher teils mittig, teils rechts), ein Einleitungstext je Abschnitt in einer Groesse,
   gleiche Abstaende unter den Ueberschriften. */
@media (max-width: 860px) {
  main .head, main .head--center { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
  main .head--center > *, main .head > * { margin-left: 0; margin-right: 0; }
  main section:not(.hero) h2 { margin-bottom: 12px; }
  /* Einleitung direkt unter der Abschnittsueberschrift */
  main section:not(.hero) h2 + p, main #ueber-mich .profile__lead {
    font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  }
  main section:not(.hero):not(#ablauf) h2 + p, main #ueber-mich .profile__lead { color: #565d65; }
  /* Einzelzeilen, die mittig oder rechtsbuendig standen */
  .faq-more, .reviews__foot, .contact-card > p, .fakten, .fakten li { text-align: left; }
  .reviews__foot { justify-content: flex-start; }
  /* Zwischenueberschriften gleich gross */
  main section:not(.hero) h3 { font-size: 1.125rem; line-height: 1.3; }
}
@media (max-width: 860px) {
  html body main .head > p:not(#_), html body main .head--center > p:not(#_), html body #ueber-mich .profile__lead:not(#_) { font-size: 1.0625rem; line-height: 1.6; }
  html body main section:not(#ablauf) .head > p { color: #565d65; }
}
@media (max-width: 860px) {
  html body #standorte ul:not(#_) { justify-content: flex-start; margin-left: 0; margin-right: 0; }
}

/* Handy (08.10.2026): Anrufkarte und Kennzahlen ohne Zeilenbrueche Wort fuer Wort.
   Anrufkarte: Foto und Text nebeneinander, Knopf in voller Breite darunter.
   Kennzahlen: je Zahl eine Zeile (Zahl links, Text rechts) statt drei schmaler Kacheln. */
@media (max-width: 860px) {
  html body .callcard:not(#_) {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px 14px; padding: 18px; text-align: left;
  }
  html body .callcard:not(#_) picture, html body .callcard:not(#_) img { width: 64px; height: 64px; }
  html body .callcard:not(#_) p { margin: 0; font-size: .9rem; line-height: 1.45; color: #565d65; hyphens: none; word-break: normal; }
  html body .callcard:not(#_) .callcard__name { display: block; color: #2a2e33; font-size: 1.05rem; font-weight: 700; }
  html body .callcard:not(#_) .callcard__satz { display: block; color: #2a2e33; font-weight: 600; }
  html body .callcard:not(#_) .btn { grid-column: 1 / -1; width: 100%; justify-content: center; }

  html body .fakten__zahlen:not(#_) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html body .fakten__zahlen:not(#_) li {
    display: flex; flex-direction: row; align-items: baseline; gap: 14px; padding: 14px 18px; text-align: left; font-size: .95rem; line-height: 1.35; hyphens: none;
  }
  html body .fakten__zahlen:not(#_) .fakten__zahl { flex: none; min-width: 84px; margin: 0; font-size: 1.75rem; line-height: 1; }
  html body .fakten__zahlen:not(#_) li { gap: 12px; font-size: .9rem; }
  html body .fakten__liste:not(#_) li { hyphens: none; }
}

/* Terminplaner: Schrittanzeige als Zeitleiste (08.10.2026). Nummern in Kreisen, verbunden durch eine Linie;
   aktueller Schritt dunkel mit Namen, erledigte in der Akzentfarbe, kommende hell. Gilt fuer alle Geraete. */
html body .termin__stepper:not(#_) { display: flex; align-items: center; gap: 0; margin: 0 0 26px; padding: 0; counter-reset: none; }
html body .termin__stepper:not(#_) li { position: relative; display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
html body .termin__stepper:not(#_) li:last-child { flex: 0 0 auto; }
html body .termin__stepper:not(#_) li:has([aria-current]) { flex-grow: 1; }
html body .termin__stepper:not(#_) li:not(:last-child)::after {
  content: ""; flex: 1 1 auto; height: 2px; margin: 0 8px; background: #e2e6ea; border-radius: 2px !important;
}
html body .termin__stepper:not(#_) li:has(.is-erledigt)::after { background: var(--petrol); }
html body .termin__stepper:not(#_) button {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 0; border: 0; background: none; color: #8a929b; font-size: .9rem;
}
html body .termin__stepper:not(#_) button span {
  display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border: 2px solid #d5dbe1; border-radius: 50% !important;
  background: #fff; color: #8a929b; font-size: .8rem; font-weight: 700;
}
html body .termin__stepper:not(#_) button em { display: none; font-style: normal; }
html body .termin__stepper:not(#_) button[aria-current="step"] { color: #2a2e33; font-weight: 700; }
html body .termin__stepper:not(#_) button[aria-current="step"] span { border-color: #2a2e33; background: #2a2e33; color: #fff; }
html body .termin__stepper:not(#_) button[aria-current="step"] em { display: inline; }
html body .termin__stepper:not(#_) button.is-erledigt span { border-color: var(--petrol); background: var(--petrol); color: #fff; }
html body .termin__stepper:not(#_) button.is-erledigt { color: var(--petrol); }
html body .termin__stepper:not(#_) li:not(:last-child)::after { flex: 1 1 0; min-width: 10px; width: auto; display: block; }
html body .termin-dialog .termin__stepper:not(#_) { margin-right: 52px; }
html body .termin__stepper:not(#_) button { width: auto; min-width: 0; }
html body .termin__stepper:not(#_) li:has([aria-current]) { flex: 1 0 auto; }
html body .termin__stepper:not(#_) li:not(:last-child) { min-width: 64px; }
html body .termin__stepper:not(#_) button em { white-space: nowrap; }
/* Einheitliche Abstaende am Handy (08.10.2026): Ueberschrift -> Unterzeile/Einleitung 12 px,
   Kopfbereich -> Inhalt rund 24 bis 32 px, Abschnitte oben 64 px wie alle anderen */
@media (max-width: 860px) {
  html body .hl-kopf:not(#_) { padding-top: 64px; }
  html body .hl-kopf .hl-kopf__titel:not(#_) { margin: 0 0 12px; }
  html body .hl-kopf .hl-kopf__unter:not(#_) { margin: 0 0 20px; }
  html body .hl-typen:not(#_) { padding-bottom: 28px; }
  html body .hero__highlights:not(#_) { padding-top: 28px; }
  html body .hero__highlights:not(#_)::before { margin: 0 0 8px; }
  html body #ueber-mich .profile__kopf .kicker:not(#_) { margin-bottom: 12px; }
}

/* Kennzahlen und Qualifikationen am Handy neu (08.10.2026), im Stil von "Ihre Vorteile":
   weisser Grund, eine Liste mit feinen Linien, links je ein Symbol im hellgrauen Kreis. */
@media (max-width: 860px) {
  html body .fakten:not(#_) { background: #fff; padding: 32px 0 40px; }
  html body .fakten__inhalt:not(#_) { display: block; padding: 0 20px; }
  html body .fakten__zahlen:not(#_), html body .fakten__liste:not(#_) {
    display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; background: none; box-shadow: none; border: 0;
  }
  html body .fakten__zahlen:not(#_) li, html body .fakten__liste:not(#_) li {
    display: flex; flex-direction: row; align-items: center; gap: 16px; min-height: 64px; margin: 0; padding: 10px 0;
    background: none; box-shadow: none; border: 0; border-bottom: 1px solid #e8eaed;
    color: #2a2e33; font-size: 1rem; font-weight: 600; line-height: 1.35; text-align: left; hyphens: none;
  }
  html body .fakten__liste:not(#_) li:last-child { border-bottom: 0; }
  html body .fakten__zahlen:not(#_) li::before, html body .fakten__liste:not(#_) li::before {
    content: ""; flex: none; width: 40px; height: 40px; border-radius: 50% !important;
    background: var(--akzent-hauch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat;
  }
  html body .fakten__zahlen:not(#_) li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.5 13 17 22l-5-3-5 3 1.5-9'/%3E%3C/svg%3E"); }
  html body .fakten__zahlen:not(#_) li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h6'/%3E%3C/svg%3E"); }
  html body .fakten__zahlen:not(#_) li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E"); }
  html body .fakten__zahlen:not(#_) .fakten__zahl {
    display: inline; min-width: 0; margin: 0 -10px 0 0; color: #2a2e33; font-size: 1rem; font-weight: 800; line-height: 1.35;
  }
}
/* Kennzahlen: Zahl und Text direkt nebeneinander (Raster statt Flex mit grossem Abstand) */
@media (max-width: 860px) {
  html body .fakten__zahlen:not(#_) li { display: grid; grid-template-columns: 56px auto minmax(0, 1fr); align-items: center; column-gap: 0; }
  html body .fakten__zahlen:not(#_) li::before { margin-right: 0; }
  html body .fakten__zahlen:not(#_) .fakten__zahl { margin: 0 6px 0 0; }
}
/* Kennzahlen hervorgehoben: Zahl groesser, Text dazu ruhiger (08.10.2026) */
@media (max-width: 860px) {
  html body .fakten__zahlen:not(#_) li { color: #565d65; font-weight: 500; }
  html body .fakten__zahlen:not(#_) .fakten__zahl { margin-right: 8px; color: #2a2e33; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
}

/* Cookie-Hinweis Variante 4 (08.10.2026): Logo mittig oben, Text mittig, ohne Liste. Logo per CSS, sv-consent.js unveraendert */

  html body .sv-consent--mitte .sv-consent__symbol { display: none; }
  html body .sv-consent--mitte .sv-consent__card:not(#_) { border-top: 0; border-radius: 14px !important; overflow: hidden; }
  html body .sv-consent--mitte .sv-consent__card:not(#_)::before { content: ""; display: block; height: 40px; background: url(../bilder/heiken-logo.png) left center / contain no-repeat; }
  html body .sv-consent--mitte .sv-consent__btn:not(#_) { border-radius: 8px !important; }
  html body .sv-consent--mitte .sv-consent__liste:not(#_) { border-radius: 10px !important; }

  html body .sv-consent--mitte .sv-consent__card:not(#_)::before { height: 44px; background-position: center; }
  html body .sv-consent--mitte .sv-consent__kopf, html body .sv-consent--mitte .sv-consent__text, html body .sv-consent--mitte .sv-consent__hinweis { text-align: center; justify-content: center; }
  html body .sv-consent--mitte .sv-consent__liste:not(#_) { display: none; }

/* Cookie-Hinweis: "Alle akzeptieren" in Grossbuchstaben (08.10.2026) */
html body .sv-consent--mitte .sv-consent__btn--accept:not(#_) { text-transform: uppercase; letter-spacing: .06em; }
/* Zeile ueber "Online Termin" etwas kraeftiger (08.10.2026): heller, etwas groesser, Name voll weiss */
html body .hero .hero__gruss:not(#_) { color: rgba(255, 255, 255, .82); font-size: 1rem; font-weight: 500; }
html body .hero .hero__gruss:not(#_) :is(strong, .hero__nm) { color: #fff; font-weight: 700; }

/* Kennzahlen Variante 4 (08.10.2026): Zahlen weiss auf gruenem Band, Qualifikationen in umrandeter Karte mit Haken (nur Handy) */
@media (max-width: 860px) {
html body .fakten:not(#_) .fakten__zahlen:not(#_) li::before { content: none; }
html body .fakten:not(#_) .fakten__zahlen:not(#_) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: 8px; }
html body .fakten:not(#_) .fakten__zahlen:not(#_) li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; border-bottom: 0; font-size: .78rem; line-height: 1.3; font-weight: 500; color: #565d65; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
html body .fakten:not(#_) .fakten__zahlen:not(#_) .fakten__zahl { margin: 0; font-size: 1.5rem; line-height: 1.1; }
html body .fakten:not(#_) .fakten__liste:not(#_) li { min-height: 0; padding: 11px 0; }
html body .fakten:not(#_) .fakten__liste:not(#_) li::before { width: 20px; height: 20px; background: none url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 20px no-repeat; border-radius: 0 !important; }

html body .fakten:not(#_) .fakten__zahlen:not(#_) { gap: 0; padding: 18px 8px; background: var(--petrol); border-radius: 14px !important; }
html body .fakten:not(#_) .fakten__zahlen:not(#_) li { align-items: center; text-align: center; padding: 0 6px; color: rgba(255,255,255,.88); border-left: 1px solid rgba(255,255,255,.25); }
html body .fakten:not(#_) .fakten__zahlen:not(#_) li:first-child { border-left: 0; }
html body .fakten:not(#_) .fakten__zahlen:not(#_) .fakten__zahl { color: #fff; }
html body .fakten:not(#_) .fakten__liste:not(#_) { margin-top: 10px; padding: 2px 16px; border: 1px solid #e8eaed; border-radius: 14px !important; }
}
/* Sehr schmale Handys: gruenes Zahlenband etwas kompakter, damit "Schadengutachten" passt */
@media (max-width: 360px) {
  html body .fakten:not(#_) .fakten__zahlen:not(#_) { padding-left: 4px; padding-right: 4px; }
  html body .fakten:not(#_) .fakten__zahlen:not(#_) li { padding: 0 3px; font-size: .7rem; }
  html body .fakten:not(#_) .fakten__zahlen:not(#_) .fakten__zahl { font-size: 1.3rem; }
}

/* Kennzahlen am Handy unter den Fotos von "Über mich" (08.10.2026): Kopie .fakten--profil im Raster von
   #ueber-mich direkt nach der Collage; der eigene Abschnitt .fakten ist am Handy ausgeblendet, am Desktop umgekehrt */
@media (min-width: 861px) { html body #ueber-mich .fakten--profil:not(#_) { display: none; } }
@media (max-width: 860px) {
  html body section.fakten:not(#_) { display: none; }
  html body #ueber-mich .fakten--profil:not(#_) { order: 3; display: block; margin: 0 0 32px; padding: 0; background: none; }
  html body #ueber-mich .fakten--profil .fakten__inhalt:not(#_) { padding: 0; }
  html body #ueber-mich .collage:not(#_) { margin-bottom: 16px; }
  /* keine Silbentrennung in den Zahlenfeldern */
  html body .fakten:not(#_) .fakten__zahlen:not(#_) li { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
}

/* Handy-Logo ohne Rahmen (08.10.2026): Die Wisch-Maske schnitt den weichen Schatten des Logos am Bildrand ab,
   dadurch entstand eine durchsichtige Umrandung. Jetzt ohne Maske; das Einwischen laeuft ueber clip-path mit
   Luft fuer den Schatten (inset mit negativem Rand). */
@media (max-width: 860px) {
  html body .hero .hero__logo-mobil:not(#_) { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html:not(.intro-warten):not(.intro-start) body .hero .hero__logo-mobil:not(#_),
  html.intro-start body .hero .hero__logo-mobil:not(#_) {
    animation: logoIntroMobil 2s cubic-bezier(.2, .7, .2, 1) both, logoWischenFrei .75s ease-out both;
  }
  @keyframes logoWischenFrei {
    from { clip-path: inset(-40px 100% -40px -40px); }
    to { clip-path: inset(-40px -40px -40px -40px); }
  }
}

/* ---------- Hero nach Audit (08.10.2026) ----------
   Anruf-Knopf mit Handlungsverb, Kostenhinweis und Google-Sterne direkt unter den Knoepfen,
   besserer Kontrast, am Handy Anrufen und WhatsApp nebeneinander. */
.hero .cta-kurz { display: none; }
.hero__vertrauen {
  display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: rgba(255, 255, 255, .9);
  font-size: .95rem; font-weight: 500; line-height: 1.4; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.hero__vertrauen .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--petrol-hell); stroke-width: 2.6; }
.hero__sterne {
  display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; color: rgba(255, 255, 255, .85);
  font-size: .9rem; text-decoration: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.hero__sterne > span[aria-hidden] { color: #fbbc04; letter-spacing: .06em; }
.hero__sterne-z { color: #fff; font-weight: 700; }
.hero__sterne:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
/* Lesbarkeit: weicher Schatten hinter heller Hero-Schrift */
.hero h1, .hero .hero__kennzeile, .hero .hero__lead-mobil--kurz, .hero .hero__lead-desk--kurz { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
@media (max-width: 860px) {
  /* Verlauf hinter dem Text rund 15 bis 20 Prozent dunkler */
  html body .hero__media:not(#_)::after {
    background:
      linear-gradient(90deg, rgba(15, 118, 110, .36) 0%, rgba(15, 118, 110, .16) 22%, rgba(15, 118, 110, 0) 48%),
      linear-gradient(180deg, rgba(8, 10, 12, .1) 0%, rgba(8, 10, 12, .62) 26%, rgba(8, 10, 12, .84) 42%, rgba(8, 10, 12, .92) 100%);
  }
  /* Online Termin volle Breite, darunter Anrufen und WhatsApp nebeneinander */
  html body .hero .hero__cta:not(#_) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  html body .hero .hero__cta:not(#_) .btn--lime { grid-column: 1 / -1; }
  html body .hero .hero__cta:not(#_) .btn { width: 100%; min-width: 0; justify-content: center; }
  .hero .cta-lang { display: none; }
  .hero .cta-kurz { display: inline; }
  .hero__vertrauen { font-size: .9rem; }
}
/* Desktop: Anruf-Knopf zweizeilig ("Jetzt anrufen" + Nummer), damit alle drei Knoepfe in eine Reihe passen;
   Kostenhinweis und Sterne unter den Knoepfen (eigene Rasterzeilen im Hero) */
html body .hero .hero__content:not(#_) { grid-template-areas: "logo" "eyebrow" "h1" "willkommen" "cta" "vertrauen" "sterne" "dekra"; }
html body .hero .hero__vertrauen:not(#_) { grid-area: vertrauen; }
html body .hero .hero__sterne:not(#_) { grid-area: sterne; justify-self: start; }
.hero .cta-lang { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.hero .cta-z1 { font-weight: 700; }
.hero .cta-z2 { font-size: .82em; font-weight: 500; opacity: .85; }
@media (max-width: 860px) { .hero .cta-lang { display: none; } }
/* Google-Zeile im Hero (08.10.2026): mittig unter den Knoepfen und mit der Hero-Animation eingeblendet */
html body .hero .hero__sterne:not(#_) { justify-self: center; justify-content: center; }
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html body .hero .hero__sterne:not(#_) { animation: heroText 1s 3.9s cubic-bezier(.2, .7, .2, 1) both; }
}
@media (max-width: 860px) {
  html body .hero .hero__sterne:not(#_) { display: flex; width: 100%; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html:not(.intro-warten):not(.intro-start) body .hero .hero__sterne:not(#_) { animation: mobilEin .7s 2s ease both; }
  html.intro-start body .hero .hero__sterne:not(#_) { animation: mobilEin .6s 1.7s ease both; }
  html.intro-warten body .hero .hero__sterne:not(#_) { opacity: 0; }
}
/* Pfeil nach oben: nie im ersten Bild, auch nicht bevor main.js die Klasse "js" setzt (beim Neuladen) */
html body .nach-oben:not(.is-sichtbar):not(#_) { opacity: 0; visibility: hidden; }
/* Desktop: Text und Knoepfe stehen linksbuendig, die Google-Zeile buendig darunter; mittig nur am Handy */
@media (min-width: 861px) { html body .hero .hero__sterne:not(#_) { justify-self: start; } }
/* Hero-Knoepfe (08.10.2026): "Online Termin" mit Anthrazit-Schrift; am Handy WhatsApp links, Anrufen rechts */
html body .hero .hero__cta .btn--lime:not(#_), html body .hero .hero__cta .btn--lime:not(#_) .icon { color: #2a2e33; }
@media (max-width: 860px) {
  html body .hero .hero__cta:not(#_) .btn--ghost { order: 1; }
  html body .hero .hero__cta:not(#_) .btn--white { order: 2; }
}
/* Handy-Hero luftiger (08.10.2026): etwas kleinere Schrift, gleichmaessige Abstaende, flachere Knoepfe */
@media (max-width: 860px) {
  html body .hero .hero__kennzeile:not(#_) { margin: 0 0 14px; font-size: .85rem; gap: .35em; }
  html body .hero h1:not(#_) { margin: 0 0 18px; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 1.95rem); line-height: 1.12; }
  html body .hero .hero__lead-mobil--kurz .hero__frage:not(#_) { margin: 0; font-size: 1.02rem; line-height: 1.5; }
  html body .hero .hero__lead-mobil--kurz .hero__gruss:not(#_) { margin-top: 12px; font-size: .95rem; }
  html body .hero .hero__cta:not(#_) { margin-top: 26px; gap: 10px; }
  html body .hero .hero__cta:not(#_) .btn { min-height: 48px; padding-top: 12px; padding-bottom: 12px; font-size: .97rem; }
  html body .hero .hero__sterne:not(#_) { margin-top: 16px; font-size: .85rem; }
}
/* Handy-Hero: oberer Bereich (Kopf, Gesicht) wieder heller, dunkel erst ab dem Text (08.10.2026) */
@media (max-width: 860px) {
  html body .hero__media:not(#_)::after {
    background:
      linear-gradient(90deg, rgba(15, 118, 110, .3) 0%, rgba(15, 118, 110, .12) 22%, rgba(15, 118, 110, 0) 48%),
      linear-gradient(180deg, rgba(8, 10, 12, 0) 0%, rgba(8, 10, 12, 0) 24%, rgba(8, 10, 12, .45) 36%, rgba(8, 10, 12, .8) 48%, rgba(8, 10, 12, .9) 100%);
  }
}

/* "genau richtig" im Hero mit Unterstrich wie von Hand mit dem Fueller gezogen (08.10.2026).
   Der Strich zeichnet sich nach dem Einblenden des Textes von links nach rechts. */
.hero .unterstrich {
  padding-bottom: .22em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5C40 4.5 80 3.2 120 4.6c26 .9 50 2.6 76 1.6' fill='none' stroke='%232dd4bf' stroke-width='4.2' stroke-linecap='round'/%3E%3Cpath d='M10 10.2c45-2.6 95-3.3 150-1.8' fill='none' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") left bottom / 100% .5em no-repeat; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .hero .unterstrich { animation: unterstrichZiehen .9s 2.4s cubic-bezier(.3, .7, .2, 1) both; }
  @keyframes unterstrichZiehen { from { background-size: 0 .5em; } to { background-size: 100% .5em; } }
}

/* "genau richtig": neuer Fuellerstrich ohne Animation (08.10.2026): ein kraeftiger, leicht schraeger
   Schwung, links dicker, nach rechts duenner, etwas breiter als das Wort */
html body .hero .unterstrich:not(#_) {
  position: relative; padding-bottom: 0; background: none; animation: none; white-space: nowrap;
}
html body .hero .unterstrich:not(#_)::after {
  content: ""; position: absolute; left: -3%; right: -4%; bottom: -.32em; height: .52em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M4 13.5C38 9.2 86 6.4 134 6.6c34 .2 64 1.6 92 3.9 3 .3 4.6 1.6 4.4 3.1-.2 1.4-1.8 2.1-4.6 1.8-27-2.4-57-3.7-91-3.8-47-.1-95 2.6-129 6.9-3.2.4-5.3-.6-5.5-2.2-.2-1.5 1.2-2.6 3.9-2.8z' fill='%232dd4bf'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform: rotate(-1.2deg); pointer-events: none;
}

/* "genau richtig": gerader Fuellerstrich (08.10.2026, "nicht so krumm"): fast waagerecht, ohne Drehung,
   links etwas kraeftiger, nach rechts schmaler */
html body .hero .unterstrich:not(#_)::after {
  left: -1%; right: -2%; bottom: -.22em; height: .3em; transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M5 4.2C70 3.4 150 3.2 234 4.6c2.6.1 3.9 1 3.9 2.1 0 1.1-1.3 1.8-3.9 1.8C150 8.2 70 8.6 5 9.6 2.2 9.6.6 8.6.6 6.9 .6 5.2 2.2 4.3 5 4.2z' fill='%232dd4bf'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* "genau richtig": Variante 6 (08.10.2026): weiss und fett, feine Petrol-Linie mit etwas Abstand zur Schrift */
html body .hero .unterstrich:not(#_)::after { content: none; }
html body .hero .unterstrich:not(#_) {
  background: none; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--petrol-hell);
  text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-skip-ink: none;
}
/* Handy-Hero mittig (08.10.2026): Kennzeile, Ueberschrift, Frage, Name, Knoepfe und Google-Zeile zentriert */
@media (max-width: 860px) {
  html body .hero .hero__panel:not(#_), html body .hero .hero__content:not(#_),
  html body .hero h1:not(#_), html body .hero .hero__lead-mobil--kurz:not(#_) { text-align: center; }
  html body .hero .hero__kennzeile:not(#_) { align-items: center; justify-content: center; }
  html body .hero .hero__lead-mobil--kurz .hero__gruss:not(#_) { justify-content: center; }
  html body .hero .hero__sterne:not(#_) { justify-content: center; }
}
/* Handy-Hero (08.10.2026): Inhalt hoeher, mehr Luft zwischen den Bloecken, mehr Abstand nach unten */
@media (max-width: 860px) {
  html body .hero .hero__panel:not(#_) { padding-bottom: 56px; }
  html body .hero .hero__kennzeile:not(#_) { margin-bottom: 18px; }
  html body .hero h1:not(#_) { margin-bottom: 22px; }
  html body .hero .hero__lead-mobil--kurz .hero__gruss:not(#_) { margin-top: 16px; }
  html body .hero .hero__cta:not(#_) { margin-top: 34px; gap: 12px; }
  html body .hero .hero__sterne:not(#_) { margin-top: 20px; }
  /* Verlauf passend zum hoeheren Text etwas frueher dunkel */
  html body .hero__media:not(#_)::after {
    background:
      linear-gradient(90deg, rgba(15, 118, 110, .3) 0%, rgba(15, 118, 110, .12) 22%, rgba(15, 118, 110, 0) 48%),
      linear-gradient(180deg, rgba(8, 10, 12, 0) 0%, rgba(8, 10, 12, 0) 18%, rgba(8, 10, 12, .5) 30%, rgba(8, 10, 12, .82) 42%, rgba(8, 10, 12, .9) 100%);
  }
}
/* Handy-Hero (08.10.2026): DEKRA-Zeilen unter die Google-Bewertung, Ueberschrift groesser */
@media (max-width: 860px) {
  html body .hero .hero__content:not(#_) { display: flex; flex-direction: column; }
  html body .hero .hero__kennzeile:not(#_) { order: 10; margin: 18px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .78); }
  html body .hero h1:not(#_) { font-size: clamp(1.95rem, 1.4rem + 2.6vw, 2.25rem); line-height: 1.1; }
}
/* Handy-Hero (08.10.2026): Name und Qualifikationen in einem eigenen Kasten ueber den Knoepfen.
   Die einzelne Namenszeile und die Kennzeile werden am Handy dafuer ausgeblendet; Desktop unveraendert. */
.hero__person { display: none; }
@media (max-width: 860px) {
  html body .hero .hero__kennzeile:not(#_), html body .hero .hero__lead-mobil--kurz .hero__gruss:not(#_) { display: none; }
  html body .hero .hero__person:not(#_) {
    display: block; margin: 24px 0 0; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px !important; background: rgba(255, 255, 255, .07); text-align: center;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .hero__person-name { margin: 0 0 8px; color: rgba(255, 255, 255, .85); font-size: .95rem; }
  .hero__person-name :is(strong, .hero__nm) { color: #fff; font-weight: 700; }
  .hero__person-quali { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none;
    color: rgba(255, 255, 255, .78); font-size: .82rem; }
  .hero__person-quali li { display: inline-flex; align-items: center; gap: 6px; }
  .hero__person-quali .icon { width: 15px; height: 15px; color: var(--petrol-hell); flex: none; }
  html body .hero .hero__cta:not(#_) { margin-top: 20px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html:not(.intro-warten):not(.intro-start) body .hero .hero__person:not(#_) { animation: mobilEin .7s 1.78s ease both; }
  html.intro-warten body .hero .hero__person:not(#_) { opacity: 0; }
}
.hero__person-name :is(strong, .hero__nm) { white-space: nowrap; }
/* Personenkasten Variante 7 ohne Umrandung (08.10.2026): Name gross in eigener Zeile, kein Rahmen, kein Glas */
@media (max-width: 860px) {
  html body .hero .hero__person:not(#_) { border: 0; background: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html body .hero .hero__person:not(#_) .hero__person-name { font-size: .8rem; color: rgba(255, 255, 255, .65); }
  html body .hero .hero__person:not(#_) .hero__person-name :is(strong, .hero__nm) { display: block; margin-top: 2px; font-size: 1.25rem; color: #fff; }
  /* alle drei Knoepfe weiss mit Anthrazit-Schrift */
  html body .hero .hero__cta:not(#_) .btn { background: #fff; border: 1px solid #fff; color: #2a2e33; }
  html body .hero .hero__cta:not(#_) .btn .icon, html body .hero .hero__cta:not(#_) .btn .wa .icon { color: #2a2e33; }
}
/* Personenkasten (08.10.2026): leicht geblurrter Glas-Kasten bleibt, nur ohne Umrandung */
@media (max-width: 860px) {
  html body .hero .hero__person:not(#_) {
    border: 0; padding: 14px 16px; background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 12px !important;
  }
}
/* Name im Hero als Link zu "Über mich" (08.10.2026): sieht aus wie Text, beim Antippen unterstrichen */
.hero .hero__name-link { color: inherit; text-decoration: none; }
.hero .hero__name-link:hover :is(strong, .hero__nm), .hero .hero__name-link:focus-visible :is(strong, .hero__nm) { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--petrol-hell); }
@media (max-width: 860px) { html body .hero .hero__person:not(#_) .hero__name-link :is(strong, .hero__nm) { display: block; margin-top: 2px; font-size: 1.25rem; color: #fff; } }
/* Dezente Zeile ueber der H1 am Handy (08.10.2026): "Kfz Gutachter <Stadt>"; am Desktop ausgeblendet */
.hero__ort-kicker { display: none; }
@media (max-width: 860px) {
  html body .hero .hero__ort-kicker:not(#_) {
    display: block; margin: 0 0 10px; color: rgba(255, 255, 255, .7); font-size: .78rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; text-align: center;
  }
}
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html:not(.intro-warten):not(.intro-start) body .hero .hero__ort-kicker:not(#_) { animation: mobilEin .7s 1.4s ease both; }
  html.intro-warten body .hero .hero__ort-kicker:not(#_) { opacity: 0; }
}
/* Handy-Hero (08.10.2026): weniger Rand links und rechts, Text wird breiter */
@media (max-width: 860px) { html body .hero .hero__panel:not(#_) { padding-left: 12px; padding-right: 12px; } }
/* Personenblock ohne Glas-Kasten (08.10.2026, auf Wunsch): kein Hintergrund, kein Weichzeichner */
@media (max-width: 860px) {
  html body .hero .hero__person:not(#_) { background: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Handy-Hero (08.10.2026): Knoepfe direkt unter "genau richtig", Google-Zeile darunter, dann Name und Qualifikationen */
@media (max-width: 860px) {
  html body .hero .hero__cta:not(#_) { order: 1; margin-top: 26px; }
  html body .hero .hero__sterne:not(#_) { order: 2; }
  html body .hero .hero__person:not(#_) { order: 3; margin-top: 22px; }
}
/* Handy-Hero (08.10.2026): Google-Bewertung ueber den Knoepfen */
@media (max-width: 860px) {
  html body .hero .hero__sterne:not(#_) { order: 1; margin-top: 18px; }
  html body .hero .hero__cta:not(#_) { order: 2; margin-top: 14px; }
}

/* ===== Handy-Hero HELL (08.10.2026, Wunsch): Foto oben, nach unten in Weiss auslaufend, dunkle Schrift,
   dunkle Knoepfe mit heller Schrift. Zum Zuruecknehmen diesen Block entfernen. ===== */
@media (max-width: 860px) {
  html body .hero .hero__tile:not(#_), html body .hero:not(#_) { background: #fff; }
  html body .hero__media:not(#_)::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .7) 33%,
      rgba(255, 255, 255, .95) 43%, #fff 52%, #fff 100%);
  }
  html body .hero h1:not(#_), html body .hero h1:not(#_) .h1-rest { color: #2a2e33; text-shadow: none; }
  html body .hero h1:not(#_) .h1-ort { color: var(--petrol); }
  html body .hero .hero__lead-mobil--kurz:not(#_), html body .hero .hero__lead-mobil--kurz .hero__frage:not(#_) { color: #3d434a; text-shadow: none; }
  html body .hero .unterstrich:not(#_) { color: #2a2e33; text-decoration-color: var(--petrol); }
  html body .hero .hero__sterne:not(#_) { color: #565d65; text-shadow: none; }
  html body .hero .hero__sterne:not(#_) .hero__sterne-z { color: #2a2e33; }
  html body .hero .hero__cta:not(#_) .btn { background: #2a2e33; border-color: #2a2e33; color: #fff; }
  html body .hero .hero__cta:not(#_) .btn .icon, html body .hero .hero__cta:not(#_) .btn .wa .icon { color: #fff; }
  html body .hero .hero__cta:not(#_) .btn--lime { background: var(--petrol); border-color: var(--petrol); }
  html body .hero .hero__person:not(#_) .hero__person-name { color: #6b727a; }
  html body .hero .hero__person:not(#_) .hero__name-link :is(strong, .hero__nm) { color: #2a2e33; }
  html body .hero .hero__person:not(#_) .hero__person-quali { color: #565d65; }
  html body .hero .hero__person:not(#_) .hero__person-quali .icon { color: var(--petrol); }
}
/* Heller Handy-Hero: Weiss beginnt tiefer (08.10.2026) */
@media (max-width: 860px) {
  html body .hero__media:not(#_)::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .75) 44%,
      rgba(255, 255, 255, .95) 52%, #fff 60%, #fff 100%);
  }
}
@media (max-width: 860px) { html body .hero .hero__panel:not(#_) { padding-bottom: 22px; } }
/* Heller Handy-Hero mit Blur-Verlauf statt weisser Flaeche (08.10.2026): das Foto bleibt unten sichtbar,
   wird aber weichgezeichnet und hell ueberlagert; der Uebergang laeuft ueber eine Maske */
@media (max-width: 860px) {
  html body .hero__media:not(#_)::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, .7) 100%);
    -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, #000 50%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 30%, #000 50%, #000 100%);
  }
}
@media (max-width: 860px) {
  html body .hero__media:not(#_)::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .72) 45%, rgba(255, 255, 255, .84) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05);
  }
}
/* Heller Handy-Hero (08.10.2026): Blur und weisse Ueberlagerung komplett entfernt, kein weisser Hintergrund */
@media (max-width: 860px) {
  html body .hero__media:not(#_)::after { content: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }
  html body .hero .hero__tile:not(#_), html body .hero:not(#_) { background: #0e1012; }
}
/* Heller Handy-Hero: auch die dunkle Schicht der Vorlage unten im Foto entfernt (08.10.2026) */
@media (max-width: 860px) {
  html body .hero__media:not(#_)::before { content: none; background: none; }
  html body .hero__bg:not(#_)::after { content: none; background: none; }
}
/* Heller Handy-Hero (08.10.2026): Foto frei, Text in einem weissen Container mit runden Ecken und weichem Schatten */
@media (max-width: 860px) {
  html body .hero .hero__content:not(#_) {
    padding: 22px 16px 20px; background: #fff; border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .12);
  }
  html body .hero .hero__panel:not(#_) { padding-bottom: 14px; }
}
/* Weisser Container bis zum Bildrand (08.10.2026): volle Breite, unten buendig, nur oben runde Ecken */
@media (max-width: 860px) {
  html body .hero .hero__panel:not(#_) { padding-left: 0; padding-right: 0; padding-bottom: 0; }
  html body .hero .hero__content:not(#_) {
    padding: 26px 16px 28px; border-radius: 22px 22px 0 0 !important; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
  }
}
/* Heller Handy-Hero (08.10.2026): weisse Karte samt Text gleitet von unten herein, erst nachdem das weisse Logo
   aus der Mitte nach oben links gewandert ist (sonst stuende das Logo auf der weissen Karte) */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html body .hero .hero__content:not(#_) > * { animation: none !important; }
  html:not(.intro-warten):not(.intro-start) body .hero .hero__content:not(#_) { animation: karteHoch .9s 1.45s cubic-bezier(.2, .8, .2, 1) both; }
  html.intro-start body .hero .hero__content:not(#_) { animation: karteHoch .9s 1.45s cubic-bezier(.2, .8, .2, 1) both; }
  html.intro-warten body .hero .hero__content:not(#_) { transform: translateY(110%); }
  @keyframes karteHoch { from { transform: translateY(110%); } to { transform: none; } }
}
@media (max-width: 860px) { html body .hero .hero__panel:not(#_) { overflow: hidden; } }
/* Karte gleitet zeitgleich mit dem Logo nach oben (08.10.2026): Logo wandert von 1,0 s bis 2,0 s (logoIntroMobil 50 bis 100 %) */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  html:not(.intro-warten):not(.intro-start) body .hero .hero__content:not(#_),
  html.intro-start body .hero .hero__content:not(#_) { animation: karteHoch 1s 1s cubic-bezier(.2, .7, .2, 1) both; }
}
/* Handy-Logo schwarz (08.10.2026): das weisse Logo per Filter schwarz eingefaerbt, ohne dunklen Schatten */
@media (max-width: 860px) {
  html body .hero .hero__logo-mobil:not(#_) { filter: brightness(0) drop-shadow(0 1px 6px rgba(255, 255, 255, .45)); }
}
/* Handy-Hero ohne jede Animation (08.10.2026): Logo steht sofort oben links (weiss), Foto sofort scharf,
   weisse Karte sofort an ihrem Platz; Foto etwas dunkler */
@media (max-width: 860px) {
  html body .hero .hero__logo-mobil:not(#_) {
    animation: none !important; top: 18px; left: 18px; width: 128px; transform: none; opacity: 1;
    -webkit-mask-image: none; mask-image: none; clip-path: none;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35));
  }
  html body .hero .hero__bg:not(#_), html body .hero .hero__bg:not(#_) img, html body .hero .hero__media:not(#_) img { animation: none !important; transform: none; filter: none; }
  html body .hero .hero__content:not(#_), html body .hero .hero__content:not(#_) > * { animation: none !important; transform: none; opacity: 1; }
  html.intro-warten body .hero .hero__logo-mobil:not(#_), html.intro-warten body .hero .hero__content:not(#_) { opacity: 1; transform: none; }
  html body .hero__media:not(#_)::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(8, 10, 12, .28); }
}
/* Handy-Hero (08.10.2026): Petrol-Effekt von links auf dem Foto, dazu die leichte Abdunklung */
@media (max-width: 860px) {
  html body .hero__media:not(#_)::after {
    background:
      linear-gradient(90deg, rgba(15, 118, 110, .5) 0%, rgba(15, 118, 110, .22) 30%, rgba(15, 118, 110, 0) 60%),
      rgba(8, 10, 12, .28);
  }
}
/* Handy-Hero (08.10.2026): Foto wieder normal hell, nur der Petrol-Effekt von links bleibt */
@media (max-width: 860px) {
  html body .hero__media:not(#_)::after {
    background: linear-gradient(90deg, rgba(15, 118, 110, .5) 0%, rgba(15, 118, 110, .22) 30%, rgba(15, 118, 110, 0) 60%);
  }
}
/* "Das Wichtigste in Kürze" am Handy auf Hellgrau, damit es sich von der weissen Hero-Karte absetzt (08.10.2026) */
@media (max-width: 860px) {
  html body .hl-kopf:not(#_), html body .hero__highlights:not(#_) { background: #f3f5f7; }
  html body .hl-typen:not(#_) { border-bottom-color: #e2e6ea; }
  html body .hl-typen:not(#_) .icon, html body .hero__highlights:not(#_) .icon,
  html body .hero__highlights:not(#_) li.hl--google .icon, html body .hero__highlights:not(#_) li.hl--top .icon { background: #fff; }
  html body .hero__highlights:not(#_) li.hl--mobil, html body .hero__highlights:not(#_) li.hl--google { border-bottom-color: #e2e6ea; }
}
/* Handy-Hero (08.10.2026): Petrol-Verlauf auf dem Foto wieder entfernt, Foto ganz ohne Ueberlagerung */
@media (max-width: 860px) { html body .hero__media:not(#_)::after { content: none; background: none; } }
/* Handy-Logo in Anthrazit wie der Anrufen-Knopf (#2a2e33), per Filter aus dem weissen Logo (08.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__logo-mobil:not(#_) {
    filter: brightness(0) invert(16%) sepia(8%) saturate(520%) hue-rotate(175deg) drop-shadow(0 1px 6px rgba(255, 255, 255, .5));
  }
}

/* Ablauf am Handy: Bild senkrecht mittig zum Textblock (09.10.2026) */
@media (max-width: 860px) {
  html body #ablauf .ablauf-schritt:not(#_) { align-items: center; }
}

/* Hero am Handy: Foto mit rotem Auto nur im oberen Bereich, Auto und Gutachter sichtbar (09.10.2026) */
@media (max-width: 860px) {
  html body .hero__bg:not(#_) img { height: 340px !important; object-position: 62% 40% !important; }
}

/* Hero am Handy: weisse Karte immer ab 300px, Foto (340px) liegt darunter, kein schwarzer Streifen (09.10.2026) */
@media (max-width: 860px) {
  html body .hero__panel:not(#_) { justify-content: flex-start !important; padding-top: 300px !important; }
  html body .hero__panel:not(#_) .hero__content:not(#_) { flex-grow: 1; }
}

/* Hero H1 am Handy etwas groesser (09.10.2026) */
@media (max-width: 860px) {
  html body .hero h1:not(#_) { font-size: clamp(30px, 9.2vw, 40px) !important; line-height: 1.08 !important; }
}

/* Handy: Logo weiss oben links in der Ecke auf dem Foto, mit leichtem Schatten (09.10.2026, Variante 1) */
@media (max-width: 860px) {
  html body .hero .hero__logo-mobil:not(#_):not(#_) { display: block !important; opacity: 1 !important; animation: none !important; transform: none !important;
    top: 18px; left: 18px; width: 160px; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .45)) !important; }
}
/* Handy: gruener Verlauf von links ueber dem Foto wie im Desktop-Hero (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__media:not(#_):not(#_)::after { content: ""; display: block !important; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    opacity: 1 !important; animation: none !important; transform: none !important;
    background: linear-gradient(90deg, rgba(15, 118, 110, .6) 0%, rgba(15, 118, 110, .4) 20%, rgba(15, 118, 110, .16) 40%, rgba(15, 118, 110, 0) 60%) !important; }
}
/* Handy wie Desktop-Hero (09.10.2026): Foto monochrom, leicht dunkler, oben etwas dunkler, gruener Verlauf von links */
@media (max-width: 860px) {
  html body .hero .hero__bg:not(#_) img { filter: grayscale(1) !important; }
  html body .hero .hero__media:not(#_):not(#_)::after {
    background: linear-gradient(90deg, rgba(15, 118, 110, .6) 0%, rgba(15, 118, 110, .4) 20%, rgba(15, 118, 110, .16) 40%, rgba(15, 118, 110, 0) 60%),
      linear-gradient(rgba(20, 23, 27, .4) 0%, rgba(20, 23, 27, 0) 30%),
      linear-gradient(rgba(10, 12, 18, .18), rgba(10, 12, 18, .18)) !important; }
}
/* Handy: ganzes Hero-Foto gleichmaessig in unserem Gruen getoent (monochromes Foto darunter), oben leicht dunkler (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__media:not(#_):not(#_)::after {
    background: rgba(15, 118, 110, .35) !important; }
}
/* Handy: "Das Wichtigste in Kuerze" mit Unterzeile und Zwischentitel "Ihre Vorteile" mittig (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hl-kopf:not(#_), html body .hero .hl-kopf:not(#_) .hl-kopf__titel, html body .hero .hl-kopf:not(#_) .hl-kopf__unter { text-align: center !important; }
  html body .hero .hero__highlights:not(#_)::before { text-align: center !important; width: 100%; }
}
/* Handy: Hero-Foto komplett ohne Overlay (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__media:not(#_):not(#_)::after, html body .hero .hero__media:not(#_):not(#_)::before { content: none !important; display: none !important; }
}
/* Handy: Hero-Foto wieder in echter Farbe (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__bg:not(#_):not(#_) img { filter: none !important; }
}
/* Handy: Plus zwischen den beiden Qualifikationen im Hero (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__person-quali:not(#_) li + li { position: relative; margin-top: 14px; }
  html body .hero .hero__person-quali:not(#_) li + li::before { content: "+"; position: absolute; top: -15px; left: 50%; translate: -50% 0;
    color: #9aa1a8; font-size: .8rem; font-weight: 400; line-height: 1; }
}
/* Kleine Handys: Hero-Foto und H1 etwas niedriger (09.10.2026) */
@media (max-width: 420px), (max-width: 860px) and (max-height: 700px) {
  html body .hero__bg:not(#_) img { height: 284px !important; }
  html body .hero__panel:not(#_) { padding-top: 250px !important; }
  html body .hero h1:not(#_) { font-size: clamp(26px, 8vw, 32px) !important; }
}
/* Handy: Hero-Foto kraeftiger und farbenfroher (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__bg:not(#_):not(#_):not(#_) img { filter: saturate(1.35) contrast(1.08) brightness(1.03) !important; }
  html body img[src*=".jpg"]:not(#_):not(#_) { filter: saturate(1.35) contrast(1.08) brightness(1.03); }
}
/* Handy: Untertext im Hero so breit wie die Bewertungszeile darunter, ohne Zeilen-Balance (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__lead-mobil--kurz .hero__frage:not(#_) { max-width: 17.2em; margin-left: auto; margin-right: auto; text-wrap: pretty; }
}
/* Handy: Akzentfarbe Petrol satt (09.10.2026, wieder statt Limette).
   Limette war: #4d7c0f / #3f6212 / #a3e635 / #bef264, Hauch #f1f8e2, rgba(77, 124, 15, x) */
@media (max-width: 860px) {
  :root {
    --petrol: #00857a;
    --petrol-dunkel: #006b62;
    --petrol-hell: #14e0c4;
    --akzent-heller: #4cf2d8;
    --akzent-hauch: #e3f7f4;
    --accent-hover: #4cf2d8;
    --accent-soft: rgba(0, 133, 122, .16);
  }
  .termin { --t-soft: rgba(0, 133, 122, .1); }
  html body .choice--claim input:checked + span { background: rgba(0, 133, 122, .1); }
  html body .sv-consent--mitte .sv-consent__symbol { background: rgba(0, 133, 122, .16); }
}
/* Handy: weisse Hero-Karte unten laenger und mit runden Ecken; dahinter die Startfarbe des
   Verlaufs von "Das Wichtigste in Kuerze", damit die Ecken auf Petrol sitzen (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__panel:not(#_) .hero__content:not(#_) { padding-bottom: 46px !important; border-radius: 22px !important; }
  html body .hero .hero__tile:not(#_):not(#_), html body .hero .hero__media:not(#_):not(#_) { background: #0a9688 !important; }
}
/* Handy: Name und Qualifikationen unter den Knoepfen als Mini-Profil mit rundem Portraet (09.10.2026) */
@media (max-width: 860px) {
  html body .hero .hero__person:not(#_):not(#_) { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 5px; align-items: center;
    margin-top: 26px !important; padding: 20px 0 0 !important; border: 0 !important; border-top: 1px solid #e2e6ea !important; border-radius: 0 !important;
    background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-align: left !important; }
  html body .hero .hero__person:not(#_):not(#_)::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50% !important;
    background: var(--akzent-hauch) url("../bilder/optimized/carsten-heiken-portrait-240.webp") center 18% / cover no-repeat;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--petrol); }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-name { grid-column: 2; align-self: end; margin: 0 !important; font-size: .78rem !important; text-align: left !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__name-link :is(strong, .hero__nm) { display: block !important; margin-top: 1px !important; font-size: 1.15rem !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali { grid-column: 2; align-self: start; align-items: flex-start !important; gap: 3px !important; margin: 0 !important; font-size: .82rem !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali li { justify-content: flex-start !important; text-align: left !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali li + li { margin-top: 0 !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali li + li::before { content: none !important; display: none !important; }
}
/* Desktop: neue Knoepfe im Hero und Mini-Profil "Ueber mich" darunter wie am Handy (09.10.2026).
   Name und Qualifikationen stehen jetzt im Profil; Kennzeile ueber der H1 und Gruss ueber den Knoepfen entfallen am Desktop */
@media (min-width: 861px) {
  html body .hero .hero__content:not(#_):not(#_) .hero__kennzeile, html body .hero .hero__content:not(#_):not(#_) .hero__lead-desk .hero__gruss { display: none !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 720px); justify-self: start; gap: 12px !important; margin-top: 2rem !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .icon { display: block !important; width: 22px !important; height: 22px !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px !important; width: 100%; min-width: 0; min-height: 66px; padding: 0 16px !important;
    border: 0 !important; border-radius: 12px !important; font-size: 1.12rem !important; white-space: nowrap; font-weight: 700 !important; letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn:hover { transform: translateY(-2px); }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--lime, html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--lime .icon { color: #062b28 !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--lime { background: var(--petrol-hell) !important; box-shadow: none !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--lime:hover { background: var(--akzent-heller) !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--white, html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--white .icon { color: #2a2e33 !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--white { background: #fff !important; box-shadow: none !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--white:hover { background: #f1f4f5 !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--white .cta-z1 { display: none; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--white .cta-z2 { font-size: 1em !important; font-weight: 700 !important; opacity: 1 !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--ghost { background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); color: #fff !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--ghost:hover { background: rgba(255, 255, 255, .16) !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn--ghost .icon { color: #25d366 !important; }

  html body .hero .hero__person:not(#_):not(#_) { display: grid !important; grid-area: vertrauen; grid-template-columns: 76px auto; column-gap: 16px; row-gap: 4px; align-items: center;
    justify-content: start; justify-self: start; max-width: 100%; margin: 30px 0 0 !important; padding: 22px 0 0 !important; border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 0 !important; background: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-align: left !important; }
  html body .hero .hero__person:not(#_):not(#_)::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; border-radius: 50% !important;
    background: #1b2a2a url("../bilder/optimized/carsten-heiken-portrait-240.webp") center 18% / cover no-repeat;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px var(--petrol-hell); }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-name { grid-column: 2; align-self: end; margin: 0 !important; color: rgba(255, 255, 255, .7) !important; font-size: .85rem !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__name-link { color: inherit; }
  html body .hero .hero__person:not(#_):not(#_) .hero__name-link :is(strong, .hero__nm) { display: block !important; margin-top: 1px; color: #fff !important; font-size: 1.25rem !important; font-weight: 700 !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali { grid-column: 2; align-self: start; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px 16px !important;
    margin: 0 !important; padding: 0 !important; list-style: none; color: rgba(255, 255, 255, .85) !important; font-size: .9rem !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali li { display: inline-flex; align-items: center; gap: 7px; margin: 0 !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali li + li::before { content: none !important; display: none !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali .icon { display: block; width: 16px; height: 16px; color: var(--petrol-hell) !important; }
  /* Google-Bewertung ueber den Knoepfen, als Etikett mit Google-Logo (09.10.2026) */
  html body .hero .hero__content:not(#_):not(#_) { grid-template-areas: "logo" "eyebrow" "h1" "willkommen" "sterne" "cta" "vertrauen" "dekra" !important; }
  html body .hero .hero__sterne:not(#_):not(#_) { display: flex !important; align-items: center; justify-content: center; gap: 12px; width: min(100%, 720px); justify-self: start; margin-top: 28px !important; padding: 0 !important;
    border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    color: rgba(255, 255, 255, .85) !important; font-size: 1.05rem !important; line-height: 1; text-decoration: none; }
  html body .hero .hero__sterne:not(#_):not(#_)::before { content: ""; flex: none; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23FFC107' d='M43.6 20.5H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.6-.4-3.5z'/%3E%3Cpath fill='%23FF3D00' d='m6.3 14.7 6.6 4.8C14.7 15.1 19 12 24 12c3.1 0 5.8 1.2 7.9 3.1l5.7-5.7C34 6.1 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z'/%3E%3Cpath fill='%234CAF50' d='M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.1 26.7 36 24 36c-5.2 0-9.6-3.3-11.3-7.9l-6.5 5C9.5 39.6 16.2 44 24 44z'/%3E%3Cpath fill='%231976D2' d='M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.2-4.1 5.6l6.2 5.2C37 39.2 44 34 44 24c0-1.3-.1-2.6-.4-3.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
  html body .hero .hero__sterne:not(#_):not(#_) .hero__sterne-z { color: #fff !important; font-size: 1.6rem !important; font-weight: 800 !important; letter-spacing: -.02em; }
  html body .hero .hero__sterne:not(#_):not(#_) span[aria-hidden="true"] { color: #fbbc04 !important; font-size: 1.5rem !important; letter-spacing: 3px; }
  html body .hero .hero__sterne:not(#_):not(#_) > span:last-child { margin-left: 4px; }
  html body .hero .hero__sterne:not(#_):not(#_):hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta { margin-top: 18px !important; }
}
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
  html:not(.intro-warten) body .hero .hero__person:not(#_):not(#_) { animation: heroText 1s 3.8s cubic-bezier(.2, .7, .2, 1) both; }
}
/* Desktop: Tablet-Bereich mit mittigem Hero, Profil und Sterne ebenfalls mittig */
@media (min-width: 861px) and (max-width: 1180px) {
  html body .hero .hero__person:not(#_):not(#_) { justify-self: center; }
  html body .hero .hero__sterne:not(#_):not(#_) { justify-self: center; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta { justify-self: center !important; }
}
/* Desktop ab 1181px mit wenig Hoehe: Platz reicht fuer ein etwas groesseres Profilbild als im Tablet-Bereich */
@media (min-width: 1181px) and (max-height: 820px) {
  html body .hero .hero__person:not(#_):not(#_) { grid-template-columns: 70px auto !important; }
  html body .hero .hero__person:not(#_):not(#_)::before { width: 70px !important; height: 70px !important; }
}
/* Tablet quer mit wenig Hoehe: im Profil nur Name und Qualifikationen, ohne Vorzeile, damit die Vorteilsleiste frei bleibt */
@media (min-width: 861px) and (max-width: 1180px) and (max-height: 760px) {
  html body .hero .hero__person:not(#_):not(#_) .hero__name-link { font-size: 0 !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__name-link :is(strong, .hero__nm) { margin-top: 0 !important; }
  html body .hero .hero__person:not(#_):not(#_) { margin-top: 14px !important; padding-top: 12px !important; }
}
/* Sehr niedrige Fenster im Tablet-Bereich: Profil im Hero weglassen, es folgt direkt darunter im Abschnitt "Ueber mich" */
@media (min-width: 861px) and (max-width: 1180px) and (max-height: 720px) {
  html body .hero .hero__person:not(#_):not(#_) { display: none !important; }
}
/* Desktop mit wenig Hoehe: Profil kompakter, damit die Vorteilsleiste unten frei bleibt */
@media (min-width: 861px) and (max-height: 820px), (min-width: 861px) and (max-width: 1180px) {
  html body .hero .hero__content:not(#_):not(#_) .hero__cta { margin-top: 14px !important; }
  html body .hero .hero__sterne:not(#_):not(#_) { margin-top: 18px !important; }
  html body .hero .hero__content:not(#_):not(#_) .hero__cta .btn { min-height: 58px; }
  html body .hero .hero__person:not(#_):not(#_) { grid-template-columns: 62px auto; margin-top: 20px !important; padding-top: 14px !important; row-gap: 2px; }
  html body .hero .hero__person:not(#_):not(#_)::before { width: 62px; height: 62px; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-name { font-size: .8rem !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__name-link :is(strong, .hero__nm) { font-size: 1.1rem !important; }
  html body .hero .hero__person:not(#_):not(#_) .hero__person-quali { font-size: .85rem !important; }
}
/* Handy: "Das Wichtigste in Kuerze" mit gruenem Verlauf und Glas-Karten (09.10.2026, Variante 4 aus mockup-wichtigstes.html).
   Ersetzt Variante 3 (Anthrazit #1f2326 mit Limette). Farben in Petrol; in Limette war der Verlauf #5a8a14 -> #3f6212 -> #2c4a0b */
@media (max-width: 860px) {
  html body .hero .hl-kopf:not(#_):not(#_):not(#_):not(#_) { background: linear-gradient(180deg, #0a9688, var(--petrol-dunkel)) !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_) { background: linear-gradient(180deg, var(--petrol-dunkel), #00463f) !important; }
  html body .hero .hl-kopf:not(#_):not(#_):not(#_):not(#_) .hl-kopf__titel { color: #fff !important; }
  html body .hero .hl-kopf:not(#_):not(#_):not(#_):not(#_) .hl-kopf__unter { color: rgba(255, 255, 255, .78) !important; }
  html body .hero .hl-kopf:not(#_):not(#_):not(#_):not(#_) .hl-typen { border-bottom-color: rgba(255, 255, 255, .18) !important; }
  html body .hero .hl-kopf:not(#_):not(#_):not(#_):not(#_) .hl-typen li span { color: #fff !important; }
  html body .hero .hl-kopf:not(#_):not(#_):not(#_):not(#_) .hl-typen li svg { background: #fff !important; color: var(--petrol-dunkel) !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_)::before { color: var(--akzent-heller) !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_) > li { margin-bottom: 0 !important; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 0 !important; background: none !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_) > li svg { background: var(--akzent-heller) !important; color: #00463f !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_) > li span { color: rgba(255, 255, 255, .78) !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_) > li .hl__titel { color: #fff !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_) .hl--google a { color: #fff !important; }
  html body .hero .hero__highlights:not(#_):not(#_):not(#_):not(#_) .hl--google a::after { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .35) !important; }
}
.wa-chat {display: none;}
@media (min-width: 1100px) {
  .wa-chat {display: block;
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 500;}
}
@media (max-width: 1099.98px) {
  .wa-chat.has-unread,
  .wa-chat.has-toast {display: block;
    position: fixed;
    right: 0.8rem;
    bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    z-index: 190;
    width: 56px;
    overflow: visible;}
  .wa-chat.has-unread:not(.is-open) .wa-chat__panel,
  .wa-chat.has-toast:not(.is-open) .wa-chat__panel {display: none;}
  .wa-chat.has-unread:not(.is-open) .wa-chat__launcher,
  .wa-chat.has-toast:not(.is-open) .wa-chat__launcher {width: 56px;
    height: 56px;
    border-radius: 16px;}
  .wa-chat.has-unread:not(.is-open) .wa-chat__launcher svg,
  .wa-chat.has-toast:not(.is-open) .wa-chat__launcher svg {width: 24px;
    height: 24px;}
  .wa-chat.has-unread:not(.is-open) .wa-chat__toast,
  .wa-chat.has-toast:not(.is-open) .wa-chat__toast {bottom: calc(56px + 0.7rem);
    width: min(300px, calc(100vw - 1.6rem));}
  .wa-chat.is-forced.is-open {display: flex;
    align-items: stretch;
    justify-content: stretch;
    position: fixed;
    top: var(--vv-top, 0px);
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: var(--vv-height, 100dvh);
    z-index: 500;
    padding: 0;
    overflow: hidden;
    background: #fff;}
  .wa-chat.is-forced.is-open.is-keyboard {padding: 0;}
  .wa-chat.is-forced.is-open .wa-chat__launcher {display: none;}
  .wa-chat.is-forced.is-open .wa-chat__panel {position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    animation: none;}
  .wa-chat.is-forced.is-open.is-entering .wa-chat__panel {animation: wa-chat-fs-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;}
  .wa-chat.is-forced.is-closing .wa-chat__panel {animation: wa-chat-fs-out 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;}
  .wa-chat.is-forced.is-open.is-keyboard .wa-chat__panel {max-width: none;
    border-radius: 0;}
  .wa-chat.is-forced.is-open .wa-chat__header {gap: 0.55rem;
    padding: 0.55rem 0.75rem;}
  .wa-chat.is-forced.is-open .wa-chat__avatar {width: 40px;
    height: 40px;
    flex-basis: 40px;}
  .wa-chat.is-forced.is-open .wa-chat__privacy {display: none;}
}
@keyframes wa-chat-fs-in {from {
    transform: translateY(108%);
    opacity: 0.85;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }}
@keyframes wa-chat-fs-out {from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(108%);
    opacity: 0.9;
  }}
@media (prefers-reduced-motion: reduce) {
  .wa-chat.is-forced.is-open.is-entering .wa-chat__panel,
  .wa-chat.is-forced.is-closing .wa-chat__panel {animation: none;}
}
html.is-chat-open,
html.is-chat-open body {overflow: hidden;
  overscroll-behavior: none;}
html.is-chat-open body {position: fixed;
  left: 0;
  right: 0;
  width: 100%;}
.wa-chat__launcher {position: relative;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--accent) 0%, var(--brand) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(42, 46, 51, 0.32);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);}
.wa-chat__launcher:hover {transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(42, 46, 51, 0.4);}
.wa-chat__launcher svg {width: 28px;
  height: 28px;}
.wa-chat__badge {position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35);}
.wa-chat__toast {position: absolute;
  right: 0;
  bottom: calc(64px + 0.95rem);
  display: block;
  
  width: min(320px, calc(100vw - 2.5rem));
  max-width: none;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  z-index: 2;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);}
.wa-chat__toast.is-visible {opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;}
.wa-chat__toast.is-leaving {opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;}
.wa-chat__toast-bubble {position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.95rem 0.8rem 0.75rem;
  border-radius: 18px 18px 6px 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow:
    0 16px 36px -14px rgba(42, 46, 51, 0.35),
    0 0 0 1px rgba(71, 85, 105, 0.04);}
.wa-chat__toast-face {width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex: 0 0 72px;
  border: 2px solid rgba(71, 85, 105, 0.12);
  background: var(--brand);}
.wa-chat__toast-copy {display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 0.1rem;}
.wa-chat__toast-copy .wa-chat__name {font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
.wa-chat__toast-text {font-size: 0.92rem;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;}
.wa-chat.is-open .wa-chat__toast {display: none;}
@media (prefers-reduced-motion: reduce) {
  .wa-chat__toast {transition: opacity 0.15s linear;
    transform: none;}
  .wa-chat__toast.is-visible,
  .wa-chat__toast.is-leaving {transform: none;}
}
.wa-chat__panel {position: absolute;
  right: 0;
  bottom: calc(64px + 0.85rem);
  width: min(420px, calc(100vw - 2rem));
  height: min(640px, calc(100dvh - 5.25rem));
  display: flex;
  flex-direction: column;
  
  background: rgba(255, 255, 255, 0.74);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: none;
  border-radius: 22px;
  overflow: hidden;
  overscroll-behavior: contain;
  box-shadow:
    0 2px 6px rgba(42, 46, 51, 0.1),
    0 18px 40px -18px rgba(42, 46, 51, 0.35),
    0 52px 90px -40px rgba(42, 46, 51, 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);}
.wa-chat.is-open .wa-chat__panel {opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;}
.wa-chat__header {display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1rem 1.05rem 1.05rem;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(255, 255, 255, 0.2), transparent 58%),
    linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  color: #fff;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 24px -18px rgba(42, 46, 51, 0.8);}
.wa-chat__avatar {width: 80px;
  height: 80px;
  flex: 0 0 80px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.22);}
.wa-chat__meta {flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  line-height: 1.25;}
.wa-chat__meta .wa-chat__name {font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;}
.wa-chat__meta span {font-size: 0.78rem;
  opacity: 0.88;
  font-weight: 500;}
.wa-chat__close {width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;}
.wa-chat__close:hover {background: rgba(255, 255, 255, 0.22);}
.wa-chat__thread {flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 1rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(71, 85, 105, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(247, 249, 252, 0.5) 0%, rgba(236, 242, 249, 0.62) 100%);}
.wa-chat__row {display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  max-width: 100%;}
.wa-chat__row--visitor {justify-content: flex-end;}
.wa-chat__row--owner,
.wa-chat__row--system {justify-content: flex-start;}
.wa-chat__face {width: 56px;
  height: 56px;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  box-shadow:
    inset 0 0 0 1px rgba(16, 33, 54, 0.06),
    0 6px 14px -6px rgba(16, 33, 54, 0.18);}
.wa-chat__face img {width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;}
.wa-chat__bubble {max-width: calc(100% - 60px);
  padding: 0.7rem 0.85rem 0.45rem;
  border-radius: 14px;
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
  word-wrap: break-word;}
.wa-chat__bubble--owner,
.wa-chat__bubble--system {background: rgba(255, 255, 255, 0.94);
  border: none;
  border-bottom-left-radius: 5px;
  box-shadow:
    0 1px 2px rgba(16, 33, 54, 0.05),
    0 10px 22px -14px rgba(16, 33, 54, 0.35);}
.wa-chat__bubble--visitor {background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 8px 18px rgba(71, 85, 105, 0.22);}
.wa-chat__bubble--visitor time {color: rgba(255, 255, 255, 0.72);}
.wa-chat__bubble time {display: block;
  text-align: right;
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 0.35rem;}
.wa-chat__bubble img {display: block;
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 0.4rem;}
.wa-chat__bubble--media {padding: 0;
  overflow: hidden;
  background: none;
  box-shadow: 0 6px 16px -8px rgba(16, 33, 54, 0.4);}
.wa-chat__bubble--media img {margin-bottom: 0;
  border-radius: 0;}
.wa-chat__bubble--media time {position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  margin: 0;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(12, 20, 32, 0.55);
  color: #fff;}
.wa-chat__bubble--media .wa-chat__caption {display: block;
  padding: 0.5rem 0.75rem 0.6rem;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;}
.wa-chat__bubble--media:has(.wa-chat__caption) time {position: static;
  padding: 0 0.75rem 0.5rem;
  background: none;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.72);}
.wa-chat__bubble--media:has(.wa-chat__caption) {background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);}
.wa-chat__grid {display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: min(260px, 100%);}
.wa-chat__grid--single {grid-template-columns: 1fr;
  width: auto;}
.wa-chat__grid img {width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  border-radius: 0;}
.wa-chat__grid--single img {width: auto;
  aspect-ratio: auto;
  max-height: 260px;}
.wa-chat__grid-more {position: relative;}
.wa-chat__grid-more::after {content: attr(data-more);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(12, 20, 32, 0.55);
  color: #fff;
  font-size: 1.05rem;
  font-weight: var(--fw-bold);}
.wa-chat__grid img {cursor: zoom-in;}
.wa-chat__uploading {align-self: center;
  width: min(240px, 80%);
  margin: 0.2rem 0 0.4rem;
  padding: 0.45rem 0.7rem 0.55rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(16, 33, 54, 0.06);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;}
.wa-chat__uploading-bar {height: 4px;
  margin-top: 0.4rem;
  border-radius: 999px;
  background: rgba(16, 33, 54, 0.12);
  overflow: hidden;}
.wa-chat__uploading-bar span {display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.25s var(--ease);}
.wa-chat__status {align-self: center;
  margin: 0.2rem 0 0.4rem;
  padding: 0.35rem 0.7rem;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(16, 33, 54, 0.06);}
.wa-chat__status-dots {display: inline-flex;
  gap: 2px;
  margin-left: 0.15rem;
  align-items: flex-end;
  min-width: 1.1rem;}
.wa-chat__status-dots i {width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent);
  display: block;
  animation: wa-status-dots 1.2s infinite ease-in-out;}
.wa-chat__status-dots i:nth-child(2) {animation-delay: 0.2s;}
.wa-chat__status-dots i:nth-child(3) {animation-delay: 0.4s;}
@keyframes wa-status-dots {0%,
  80%,
  100% {
    opacity: 0.2;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-1px);
  }}
@media (prefers-reduced-motion: reduce) {
  .wa-chat__status-dots i {animation: none;
    opacity: 0.7;}
}
.wa-chat__composer {display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 0.85rem 0.5rem;
  background: rgba(255, 255, 255, 0.82);
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(16, 33, 54, 0.07);
  flex: 0 0 auto;}
.wa-chat__attach {width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s;}
.wa-chat__attach:hover {background: var(--accent-soft);
  color: var(--accent);}
.wa-chat__attach svg {width: 22px;
  height: 22px;}
.wa-chat__preview {position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  background: rgba(12, 20, 32, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);}
.wa-chat__preview[hidden] {display: none !important;}
.wa-chat__preview-inner {position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 3rem 0.9rem 0.9rem;}
.wa-chat__preview-close {position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;}
.wa-chat__preview-close:hover {background: rgba(255, 255, 255, 0.28);}
.wa-chat__preview-stage {flex: 1 1 auto;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 0.4rem;
  min-height: 0;
  overflow: hidden;}
.wa-chat__preview-stage img {display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.6);}
.wa-chat__preview-stage--grid {grid-template-columns: repeat(2, 1fr);
  align-content: center;
  width: min(320px, 100%);
  margin-inline: auto;}
.wa-chat__preview-stage--grid img {width: 100%;
  aspect-ratio: 1;
  object-fit: cover;}
.wa-chat__preview-more {margin: 0.7rem 0 0;
  text-align: center;
  font-size: 0.88rem;
  font-weight: var(--fw-semibold);
  color: rgba(255, 255, 255, 0.92);}
.wa-chat__preview-more[hidden] {display: none;}
.wa-chat__preview-bar {display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  flex: 0 0 auto;}
.wa-chat__preview-add {display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;}
.wa-chat__preview-add:hover {background: rgba(255, 255, 255, 0.28);}
.wa-chat__preview-bar input[type="text"] {flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 14px;
  padding: 0.7rem 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  outline: none;}
.wa-chat__preview-bar input[type="text"]:focus {background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);}
.wa-chat__preview-send {display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;}
.wa-chat__preview-send:hover {background: var(--accent-deep);}
.wa-chat__preview-send svg {width: 20px;
  height: 20px;}
.wa-chat__composer input {flex: 1 1 auto;
  min-width: 0;
  border: none;
  border-radius: 14px;
  padding: 0.82rem 1rem;
  font: inherit;
  font-size: 0.97rem;
  background: rgba(240, 244, 249, 0.9);
  color: var(--ink);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(16, 33, 54, 0.07);
  transition: box-shadow 0.15s, background 0.15s;}
.wa-chat__composer input:focus {background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--accent-ice),
    0 0 0 3px rgba(71, 85, 105, 0.15);}
.wa-chat__send {width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(71, 85, 105, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;}
.wa-chat__send:hover {transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(71, 85, 105, 0.34);}
.wa-chat__send:disabled {opacity: 0.55;
  cursor: wait;
  transform: none;}
.wa-chat__send svg {width: 20px;
  height: 20px;
  margin-left: 2px;}
.wa-chat__privacy {margin: 0;
  padding: 0 1rem 0.8rem;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;}
.wa-chat__privacy a {color: var(--accent);
  text-decoration: none;
  font-weight: 600;}
.wa-chat__privacy a:hover {text-decoration: underline;}
@media (prefers-reduced-motion: reduce) {
  .wa-chat__panel,
  .wa-chat__launcher {transition: none;}
}
@media (max-width: 1099.98px) {
  .wa-chat__launcher,
  .wa-chat.has-unread:not(.is-open) .wa-chat__launcher,
  .wa-chat.has-toast:not(.is-open) .wa-chat__launcher {display: none;}
  .wa-chat.has-unread:not(.is-open) .wa-chat__toast,
  .wa-chat.has-toast:not(.is-open) .wa-chat__toast {bottom: 0;}
  .wa-chat.has-unread,
  .wa-chat.has-toast {width: auto;}
}
@media (min-width: 1100px) {
  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);}
}
@media (min-width: 1100px) {
  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) {
  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;}
  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;}
}
@media (min-width: 1100px) {
  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;}
}
@media (max-width: 1099.98px) {
  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 .wa-chat__header {background: var(--ap-black, #14171a);
  background-image: none;}
body .wa-chat__thread {background: #f2f4f5;
  background-image: none;}
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;}
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;}
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;}
body .wa-chat__toast-face {border-color: rgba(20, 23, 26, 0.12);}

/* Direktchat: dezente Rundungen an den Ecken (09.10.2026); die Vorlage setzt sonst alles auf 0 */
html body .wa-chat:not(#_):not(#_) .wa-chat__panel { border-radius: 14px !important; overflow: hidden; }
html body .wa-chat:not(#_):not(#_) .wa-chat__launcher { border-radius: 14px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__bubble { border-radius: 4px 12px 12px 12px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__row--visitor .wa-chat__bubble, html body .wa-chat:not(#_):not(#_) .wa-chat__bubble--visitor { border-radius: 12px 4px 12px 12px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__avatar, html body .wa-chat:not(#_):not(#_) .wa-chat__face, html body .wa-chat:not(#_):not(#_) .wa-chat__face img, html body .wa-chat:not(#_):not(#_) .wa-chat__toast-face { border-radius: 10px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__close, html body .wa-chat:not(#_):not(#_) .wa-chat__attach, html body .wa-chat:not(#_):not(#_) .wa-chat__preview-close, html body .wa-chat:not(#_):not(#_) .wa-chat__preview-add { border-radius: 8px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__send, html body .wa-chat:not(#_):not(#_) .wa-chat__preview-send { border-radius: 10px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__composer :is(input, textarea) { border-radius: 10px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__toast, html body .wa-chat:not(#_):not(#_) .wa-chat__toast-bubble { border-radius: 12px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__preview-inner, html body .wa-chat:not(#_):not(#_) .wa-chat__preview-stage img { border-radius: 12px !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__badge { border-radius: 999px !important; }
/* Direktchat im Vollbild (unter 1100 px, vom Besucher geoeffnet): Fenster bis zum Bildschirmrand, darum dort ohne runde Ecken.
   "is-forced" allein heisst nur "selbst geoeffnet" und kommt auch am Desktop vor */
@media (max-width: 1099.98px) {
  html body .wa-chat.is-forced.is-open:not(#_):not(#_) .wa-chat__panel { border-radius: 0 !important; }
}

/* Direktchat in der Akzentfarbe statt Schwarz (09.10.2026): Kopf, Startknopf, Senden und eigene Nachrichten in Petrol.
   Ueber die Farbvariablen gilt am Handy automatisch das kraeftigere Petrol */
html body .wa-chat:not(#_):not(#_) .wa-chat__header { background: linear-gradient(135deg, var(--petrol), var(--petrol-dunkel)) !important; color: #fff; }
html body .wa-chat:not(#_):not(#_) .wa-chat__launcher, html body .wa-chat:not(#_):not(#_) .wa-chat__launcher:hover { background: var(--petrol) !important; color: #fff !important;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45) !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__launcher:hover { background: var(--petrol-dunkel) !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__launcher svg { color: #fff !important; fill: currentColor; }
html body .wa-chat:not(#_):not(#_) .wa-chat__send, html body .wa-chat:not(#_):not(#_) .wa-chat__preview-send { background: var(--petrol) !important; border-color: var(--petrol) !important; color: #fff !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__send:hover, html body .wa-chat:not(#_):not(#_) .wa-chat__preview-send:hover { background: var(--petrol-dunkel) !important; border-color: var(--petrol-dunkel) !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__bubble--visitor, html body .wa-chat:not(#_):not(#_) .wa-chat__bubble--media:has(.wa-chat__caption) {
  background: linear-gradient(160deg, var(--petrol), var(--petrol-dunkel)) !important; color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .3) !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__thread { background: #eef6f5 url("../bilder/chat-doodle.svg?v=9") 0 0 / 600px 600px repeat !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__composer input:focus { border-color: var(--petrol) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
html body .wa-chat:not(#_):not(#_) .wa-chat__privacy a { color: var(--petrol-dunkel) !important; }

/* Termin-Fenster (Overlay): dezente Rundungen wie beim Direktchat (09.10.2026) */
html body dialog.termin-dialog:not(#_):not(#_) { border-radius: 16px !important; overflow: hidden; }
html body dialog.termin-dialog:not(#_):not(#_) .termin__wahl { border-radius: 12px !important; }
html body dialog.termin-dialog:not(#_):not(#_) .kal__nav, html body dialog.termin-dialog:not(#_):not(#_) .kal__tag, html body dialog.termin-dialog:not(#_):not(#_) .termin__nav .btn { border-radius: 8px !important; }