/* ============================================================
   home-redesign.css — Homepage-Schicht (nur body.page-home)
   Ziel: klassisch, warm, vertrauenswuerdig, fuer aeltere
   Kundschaft gut lesbar. KEIN SaaS/AI-Look. Weiche Tiefe/Glow
   erlaubt, aber geerdet. Unterseiten bleiben unberuehrt.
   ============================================================ */

/* ------------------------------------------------------------
   Nummern auf den Leistungs-Karten raus (leben jetzt im Ablauf)
   ------------------------------------------------------------ */
body.page-home .service-card-index {
  display: none;
}

/* Strich ("—") vor den Section-Labels raus */
body.page-home .kicker::before {
  content: none;
}

/* Staubige/koernige Textur auf der grossen Headline-Zeile ("Umzugsunternehmen") */
body.page-home .hero-title .title-line:first-child {
  color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"),
    linear-gradient(#ffffff, #f2f4f8);
  background-size: 150px 150px, 100% 100%;
  background-blend-mode: multiply;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.page-home .service-card,
body.page-home .benefit-card,
body.page-home .review-card {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
body.page-home .service-card:hover {
  transform: translateY(-5px);
}

/* ============================================================
   1. HERO — andere Positionierung, kein Raster, kein Marquee
   ============================================================ */
/* AI-Raster ueber dem Video raus */
body.page-home .hero::before {
  content: none;
}

/* Weg vom "Foto mit Text drueber" -> ruhiges Premium-Navy.
   Das Video bleibt als leise, dunkle Textur im Hintergrund. */
body.page-home .hero {
  background:
    radial-gradient(135% 120% at 12% 12%, #1b2d49 0%, #101f35 48%, #0a1526 100%);
}
body.page-home .hero-video {
  opacity: 0.3;
  filter: saturate(0.6) contrast(1.04) brightness(0.7);
}
body.page-home .hero-scrim {
  background:
    linear-gradient(90deg, rgba(10, 20, 34, 0.95) 0%, rgba(10, 20, 34, 0.68) 44%, rgba(10, 20, 34, 0.34) 100%),
    linear-gradient(0deg, rgba(9, 19, 32, 0.72) 0%, transparent 46%);
}
/* weicher, warmer Lichtakzent hinter der Headline */
body.page-home .hero-copy {
  position: relative;
}
body.page-home .hero-copy::before {
  content: "";
  position: absolute;
  top: -8%;
  left: -12%;
  z-index: -1;
  width: 60%;
  height: 60%;
  background: radial-gradient(closest-side, rgba(45, 107, 255, 0.22), transparent 72%);
  pointer-events: none;
}

/* Inhalt vertikal mittig statt oben -> andere Komposition */
body.page-home .hero-inner {
  align-items: center;
  min-height: 66vh;
  gap: 48px;
}

/* Inhaber-/Bewertungskarte aus dem Hero raus (Desktop + Mobile) */
body.page-home .owner-stage {
  display: none;
}
body.page-home .hero-inner {
  grid-template-columns: 1fr;
}

/* Headline einen Tick groesser, warme Lesbarkeit */
body.page-home .hero-lead {
  color: rgba(255, 255, 255, 0.86);
}

/* Fakten-Zeile unter den Buttons (geerdet, keine Boxen-Icons) */
body.page-home .hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
body.page-home .hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  font-weight: 600;
}
body.page-home .hero-trust li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 0 4px rgba(45, 107, 255, 0.16);
}

/* Schlagwort-Streifen unten im Hero komplett raus (war Quatsch) */
body.page-home .service-ribbon {
  display: none;
}

@media (max-width: 640px) {
  body.page-home .hero-inner {
    min-height: 0;
    align-items: start;
  }
  body.page-home .hero-trust {
    gap: 8px 18px;
    margin-top: 20px;
  }
  body.page-home .hero-trust li {
    font-size: 0.86rem;
  }
}

/* ============================================================
   2. INTRO ("Warum Kunden anrufen") — 2-spaltig, ruhige Liste
   ============================================================ */
body.page-home .intro {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 60px;
  align-items: start;
}
body.page-home .intro-head {
  margin-bottom: 0;
  position: sticky;
  top: 116px;
}
body.page-home .intro-cards {
  grid-template-columns: 1fr;
  gap: 0;
}
/* Kaertchen -> ruhige Listenzeilen: Icon links, Titel + Text gestapelt */
body.page-home .intro-cards .benefit-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 22px;
  row-gap: 8px;
  align-items: start;
  padding: 30px 4px;
  border: none;
  border-top: 1px solid var(--line-light);
  border-radius: 0;
  background: transparent;
}
body.page-home .intro-cards .benefit-card:first-child {
  border-top: none;
  padding-top: 4px;
}
body.page-home .intro-cards .benefit-card:hover {
  transform: none;
  border-color: var(--line-light);
}
/* Icon aus der Box holen -> schlicht, warm */
body.page-home .benefit-icon {
  grid-column: 1;
  grid-row: 1;
  width: 46px;
  height: 46px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--blue);
}
body.page-home .benefit-icon svg {
  width: 40px;
  height: 40px;
}
body.page-home .intro-cards .benefit-card h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
body.page-home .intro-cards .benefit-card p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
}

@media (max-width: 860px) {
  body.page-home .intro {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  body.page-home .intro-head {
    position: static;
  }
}

/* ============================================================
   3. BEWERTUNGEN — klassische Testimonials mit Zitat, warm
   ============================================================ */
/* Score-Leiste raus (Chef-Wunsch) */
body.page-home .reviews-hero {
  display: none;
}

/* Karten: blauer Balken raus, grosses Anfuehrungszeichen rein */
body.page-home .review-card::before {
  content: none;
}
body.page-home .review-card {
  border-radius: 18px;
  background: #ffffff;
  border-color: #ece4d6;
  box-shadow: 0 16px 38px rgba(20, 20, 20, 0.06);
  padding-top: 22px;
}
body.page-home .review-quote {
  position: relative;
  padding-top: 34px;
}
body.page-home .review-quote::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: -4px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.2rem;
  line-height: 1;
  color: var(--blue);
  opacity: 0.24;
}
body.page-home .review-card:hover {
  box-shadow: 0 24px 50px rgba(20, 20, 20, 0.10);
  border-color: #e0d8ca;
}

/* ============================================================
   OPERATION — Marken-Bild in der Mitte: Schatten + weisser Rand
   ============================================================ */
body.page-home .operation-media {
  position: relative;
  box-shadow:
    0 44px 90px rgba(0, 0, 0, 0.55),
    0 10px 40px rgba(45, 107, 255, 0.2);
}
/* weisser Gradient-Rand (oben-links hell, unten auslaufend) */
body.page-home .operation-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.08) 42%,
    rgba(255, 255, 255, 0) 72%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================
   4. EINSATZGEBIET — eckig-runde Karten-Pills + geblurrtes Foto
   ============================================================ */
/* leises, geblurrtes Stadt-Foto als Hintergrund-Textur */
body.page-home .area {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
body.page-home .area::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("img/hero-video-poster.webp") center 30% / cover no-repeat;
  filter: blur(7px) brightness(0.42) saturate(0.85);
  opacity: 0.42;
  transform: scale(1.08);
  pointer-events: none;
}
/* Pills -> eckig-runde Karten (nicht komplett rund), frosted */
body.page-home .area-pill {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(150, 180, 225, 0.22);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease),
    background 0.28s var(--ease);
}
body.page-home .area-pill:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(150, 180, 225, 0.4);
}
body.page-home .area-pill.is-active {
  border-radius: 12px;
}

/* ============================================================
   5. ABLAUF — klassischer Schritt-Zeitstrahl (bleibt)
   ============================================================ */
body.page-home .process-line {
  background: transparent;
  gap: 26px;
  padding: 0;
  border-radius: 0;
}
body.page-home .process-line li {
  position: relative;
  padding: 66px 6px 0 0;
  background: transparent;
  overflow: visible;
}
body.page-home .process-line li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 58px;
  right: -26px;
  height: 2px;
  background: rgba(150, 180, 225, 0.22);
  transform: none;
  width: auto;
}
body.page-home .process-line li::before {
  content: none;
}
body.page-home .process-line li > span {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: var(--blue);
  color: #fff;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  box-shadow: 0 10px 26px rgba(45, 107, 255, 0.34);
}

@media (max-width: 700px) {
  body.page-home .process-line {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  body.page-home .process-line li {
    padding: 2px 0 0 66px;
    min-height: 50px;
  }
  body.page-home .process-line li:not(:last-child)::after {
    display: none;
  }
}

/* ============================================================
   FAQ — originales 2-Spalten-Layout, aber auf dunklem Grund
   ============================================================ */
body.page-home .faq {
  background: var(--black);
}
body.page-home .faq .kicker.dark {
  color: var(--blue-bright);
}
body.page-home .faq h2 {
  color: #ffffff;
}
body.page-home .faq .section-head p:last-child {
  color: var(--muted-dark);
}
body.page-home .faq-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(150, 180, 225, 0.16);
}
body.page-home .faq-card:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(120, 160, 255, 0.42);
  box-shadow: none;
}
body.page-home .faq-card[open] {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(120, 160, 255, 0.34);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.4);
}
body.page-home .faq-card summary {
  color: #ffffff;
}
body.page-home .faq-card summary::after {
  color: var(--blue-bright);
}
body.page-home .faq-card p {
  color: var(--muted-dark);
}
body.page-home .faq-card[open] > p {
  border-top-color: rgba(150, 180, 225, 0.16);
}
body.page-home .faq-foot {
  color: var(--muted-dark);
}
body.page-home .faq-foot a {
  color: var(--blue-bright);
}
body.page-home .faq-foot a:hover {
  color: #ffffff;
}

/* ============================================================
   CHEF-FEEDBACK 22.07. — HERO-SUBLINE MOBIL EINZEILIG (Punkt 2)
   "Planbar statt chaotisch." (24 Zeichen) darf bei 390px nicht
   auf zwei Zeilen brechen. Die 15ch-Bremse aus home.css wird
   aufgehoben, die Groesse laeuft ueber vw, Desktop unveraendert.
   ============================================================ */
@media (max-width: 700px) {
  body.page-home .hero-title .title-accent {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1rem, 6.6vw, 1.65rem);
  }
}

/* ============================================================
   CHEF-FEEDBACK 22.07. — HERO: BEWERTUNGSZEILE STATT BULLETS
   (Punkt 3, Vorbild Hannover). .hero-trust ist jetzt wieder der
   Avatar-Link aus home.css; die Bullet-Overrides weiter oben
   werden hier neutralisiert.
   ============================================================ */
body.page-home .hero-trust {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}

/* "23 Google-Bewertungen" nie mitten im Wort umbrechen: notfalls
   bricht die Zeile sauber vor der Zahl um. */
body.page-home .hero-trust-bottom strong {
  white-space: nowrap;
  /* Der Flex-Container verschluckt das Leerzeichen vor der Zahl. */
  margin-left: 0.35em;
}

@media (max-width: 700px) {
  body.page-home .hero-trust {
    gap: 14px;
  }
  body.page-home .hero-trust-bottom {
    font-size: 0.8rem;
  }
}

/* ============================================================
   CHEF-FEEDBACK 22.07. — LEISTUNGS-KARTEN GESTAFFELT (Punkt 12)
   Die Transition-Kurzform weiter oben hatte die Reveal-Opacity
   und die Verzoegerung ausgehebelt; hier kommt beides zurueck,
   Karte 2 und 3 laufen 100/200 ms spaeter ein. :not(:hover)
   haelt den Hover-Lift verzoegerungsfrei.
   ============================================================ */
body.page-home .service-cards .service-card {
  transition:
    opacity 560ms var(--motion-out),
    transform 520ms var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

body.page-home .service-cards .service-card:nth-child(2):not(:hover) {
  transition-delay: 100ms;
}

body.page-home .service-cards .service-card:nth-child(3):not(:hover) {
  transition-delay: 200ms;
}

/* ============================================================
   CHEF-FEEDBACK 22.07. — REDUZIERTE BEWEGUNG
   Staffel-Verzoegerungen und Panel-Delay fallen weg, wenn das
   System weniger Bewegung wuenscht (Rest regelt home.css global).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body.page-home .service-cards .service-card:nth-child(2):not(:hover),
  body.page-home .service-cards .service-card:nth-child(3):not(:hover) {
    transition-delay: 0ms;
  }
}

/* ============================================================
   AREA — sichtbarer Einstieg ins Einsatzgebiet
   Der Hub-Link stand nur versteckt in den Klapp-Panels; der Button
   macht den Einstieg zu den Standortseiten sichtbar (Chef-Punkt 11).
   ============================================================ */
body.page-home .area-more {
  margin-top: 0;
  display: flex;
  justify-content: flex-start;
}

/* ============================================================
   ÜBER UNS — Angebots-CTA als Button statt Textlink
   Der Textlink ging in der dunklen Section unter; als Button
   ist der Abschluss der Section eindeutig anklickbar.
   ============================================================ */
body.page-home .operation-copy .operation-cta {
  margin-top: 26px;
  align-self: flex-start;
}

@media (max-width: 640px) {
  body.page-home .operation-copy .operation-cta {
    width: 100%;
    justify-content: center;
    /* Der lange Wortlaut passt bei voller Breite knapp nicht in eine
       Zeile, deshalb hier eine Spur kleiner statt Umbruch. */
    font-size: clamp(0.88rem, 4vw, 1rem);
    text-align: center;
  }
}

/* ============================================================
   CHEF-FEEDBACK 22.07. — STANDORT-PILLS DIREKT VERLINKT (Punkt 3)
   Die Orte klappten frueher ein Panel auf. Jetzt fuehrt jede Pill
   direkt auf ihre Standortseite. Ein dauerhaft sichtbarer Pfeil
   macht klar, dass die Pills verlinkt sind; Hover/Focus schieben
   den Pfeil und heben Rahmen, Fuellung und Textfarbe an.
   ============================================================ */
body.page-home .area-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
}
body.page-home .area-pill-arrow {
  flex: none;
  opacity: 0.65;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
body.page-home .area-pill:hover,
body.page-home .area-pill:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(150, 180, 225, 0.55);
}
body.page-home .area-pill:hover .area-pill-arrow,
body.page-home .area-pill:focus-visible .area-pill-arrow {
  transform: translateX(3px);
  opacity: 1;
}
/* Der Hub-Link "Region Braunschweig" bekommt einen leisen Akzent,
   damit er sich vom einzelnen Ort abhebt. */
body.page-home .area-pill-region {
  border-color: rgba(85, 144, 255, 0.5);
  background: rgba(85, 144, 255, 0.12);
}

/* ============================================================
   CHEF-FEEDBACK 22.07. — FAQ-ABSCHLUSS ALS BUTTON (Punkt 4)
   Aus der Textzeile "Frage nicht dabei? Direkt anrufen" wird ein
   echter Sekundaer-Button im Stil der dunklen Sections. Frage als
   Text darueber, Button darunter; mobil volle Breite, einzeilig.
   ============================================================ */
body.page-home .faq-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
body.page-home .faq-foot-text {
  color: var(--muted-dark);
  font-size: 1rem;
  font-weight: 700;
}
/* Hoehere Spezifitaet als der geerbte .faq-foot a-Linkstil (Farbe/Underline),
   damit der Button wie ein echter Sekundaer-Button in Weiss erscheint. */
body.page-home .faq-foot .faq-foot-btn,
body.page-home .faq-foot a.faq-foot-btn {
  gap: 10px;
  min-height: 52px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
body.page-home .faq-foot .faq-foot-btn:hover {
  color: #ffffff;
  text-decoration: none;
}
body.page-home .faq-foot-btn svg {
  flex: none;
}

@media (max-width: 760px) {
  body.page-home .faq-foot .faq-foot-btn {
    width: 100%;
    /* Nummer + Text bleiben in einer Zeile; notfalls minimal kleiner. */
    font-size: clamp(0.84rem, 3.9vw, 1rem);
  }
}

/* ============================================================
   CHEF-FEEDBACK 22.07. — BEWERTUNGS-SECTION AUFGEWERTET
   Drei Wuensche:
   1) Headline mehr Luft nach oben (mehr Padding ueber dem Kicker).
   2) Google-Karten animiert beim Reinscrollen (staffeln + Sterne).
   3) Echtes vierfarbiges Google-G sichtbar (Kopf-Badge + pro Karte).
   Alles ueber die vorhandene Reveal-Mechanik (data-reveal/is-visible/
   stagger-ready) und CSS. Kein GSAP, kein Dauer-Loop.
   ============================================================ */

/* --- 1) Mehr Luft ueber der Headline -------------------------
   Oberer Abstand vom dunklen Vorgaenger-Abschnitt zur Ueberschrift
   wird groesser; unten bleibt der bestehende Rhythmus erhalten.
   Mobil bewusst moderat, damit die Seite nicht ueberdehnt. */
body.page-home .evidence {
  position: relative;
  padding-top: clamp(96px, 13vh, 168px);
}

/* Desktop: Kopf und Google-Widget als eine Zeile, das Widget steht
   vertikal mittig zum Textblock statt oben in der Ecke. */
@media (min-width: 981px) {
  body.page-home .evidence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    row-gap: 48px;
  }
  body.page-home .evidence .section-head {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin-bottom: 0;
    max-width: 720px;
  }
  body.page-home .evidence .reviews-google {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    padding: 20px 28px;
    gap: 14px;
  }
  body.page-home .evidence .reviews-google-logo {
    width: 34px;
    height: 34px;
  }
  body.page-home .evidence .reviews-google-score {
    font-size: 1.7rem;
  }
  body.page-home .evidence .reviews-grid,
  body.page-home .evidence .reviews-disclaimer {
    grid-column: 1 / -1;
  }
}

/* --- 3) Google-Badge im Section-Kopf ------------------------
   Prominenter, aber ruhiger Vertrauens-Anker mit echtem G-Logo,
   Score und Rezensions-Zahl. Zentriert unter der Headline. */
body.page-home .reviews-google {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: -8px;
  padding: 12px 20px;
  background: #ffffff;
  border: 1px solid #ece4d6;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(20, 20, 20, 0.06);
}
body.page-home .reviews-google-logo {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
}
body.page-home .reviews-google-score {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink, #16202e);
  letter-spacing: -0.01em;
}
body.page-home .reviews-google-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
body.page-home .reviews-google-copy strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #16202e);
}
body.page-home .reviews-google-count {
  font-size: 0.82rem;
  color: #7c7264;
}

/* --- 3) Google-G als Quellen-Hinweis pro Karte --------------- */
body.page-home .review-source {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
body.page-home .review-source-g {
  width: 15px;
  height: 15px;
  flex: none;
  display: inline-block;
  position: relative;
  top: 0.5px;
}

/* --- 2) Karten gestaffelt einblenden -------------------------
   Die reviews-grid ist bereits data-reveal + stagger-ready; die
   globale Staffelung (85ms) wird hier auf ~110ms Versatz gebracht,
   passend zu den Leistungs-Karten (0/110/220 ms). */
body.page-home .reviews-grid.stagger-ready > .review-card {
  transition:
    opacity 560ms var(--motion-out),
    transform 620ms var(--motion-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

/* --- 2) Sterne laufen pro Karte nacheinander ein -------------
   Nur mit JS aktiv (html.js). Die Sterne-Leiste ist ein einzelnes
   Wiederhol-Hintergrundbild; ueber eine steps(5)-Clip-Animation
   wischen die fuenf Sterne von links einzeln herein. Start leicht
   nach der jeweiligen Karte. */
html.js body.page-home .reviews-grid .review-card .review-stars {
  clip-path: inset(0 100% 0 0);
}
html.js body.page-home .reviews-grid.is-visible .review-card .review-stars {
  animation: ma-stars-sweep 620ms steps(5) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 240ms);
}
@keyframes ma-stars-sweep {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* --- Reduzierte Bewegung: alles sofort sichtbar -------------- */
@media (prefers-reduced-motion: reduce) {
  body.page-home .reviews-grid.stagger-ready > .review-card {
    transition-delay: 0ms;
  }
  html.js body.page-home .reviews-grid .review-card .review-stars,
  html.js body.page-home .reviews-grid.is-visible .review-card .review-stars {
    clip-path: none;
    animation: none;
  }
}

/* --- Mobil: Badge kompakt, Karten gestapelt (Grid regelt home.css) --- */
@media (max-width: 480px) {
  body.page-home .reviews-google {
    gap: 10px;
    padding: 11px 16px;
  }
  body.page-home .reviews-google-score {
    font-size: 1.32rem;
  }
  body.page-home .reviews-google-copy strong {
    font-size: 0.9rem;
  }
}

/* ============================================================
   FAQ-ABSCHLUSS LINKSBUENDIG (Chef-Wunsch 22.07.)
   Der Block sass mittig unter dem FAQ-Raster, jetzt sitzt er
   links auf der Rasterkante.
   ============================================================ */
body.page-home .faq-foot {
  align-items: flex-start;
  text-align: left;
  justify-content: flex-start;
}

/* ============================================================
   ÜBER-UNS-HEADLINE AUF HANDY IN SEKTIONSGROESSE
   Die schmale Desktop-Spalte braucht die kleinere Stufe; sobald
   die Section einspaltig stapelt, soll die Headline genauso gross
   sein wie alle anderen Sektions-Ueberschriften.
   ============================================================ */
@media (max-width: 1080px) {
  body.page-home .operation-copy h2 {
    font-size: clamp(1.9rem, 6.2vw, 2.6rem);
  }
}

/* ============================================================
   LEISTUNGS-CARDS — Headline auf dem Handy einzeilig
   "Möbelmontage & Küchenmontage" brach bei 390px um; die Card-
   Titel skalieren mobil eine Stufe kleiner (einheitlich fuer
   alle Karten der Reihe).
   ============================================================ */
@media (max-width: 640px) {
  body.page-home .service-card-body h3 {
    font-size: clamp(1rem, 4.5vw, 1.22rem);
    white-space: nowrap;
  }
}