/* =========================================================
   Startseite – 1:1 aus Figma-Frame "www.3u-reinigung.ch"
   (Node 2:133885, 1440x6464 – NICHT die "(Responsive)"-Variante).

   Aufbau: der Bereich unter dem Hero ist eine absolut positionierte
   1440px-Bühne. Jede style-Angabe im HTML ist der Figma-y-Wert minus 798
   (= Hero-Höhe der Vorlage). Dadurch summieren sich – anders als beim
   früheren Fluss-Layout mit gerechneten Innenabständen – keine Rundungen
   mehr auf, und die Seite trifft die Vorlage exakt.

   Hero-Sonderfall: auf ausdrücklichen Kundenwunsch aus einer früheren
   Runde ist der Hero maximal eine Bildschirmhöhe hoch (statt fix 798px).
   Alles darunter behält die Figma-Abstände, weil .home-body direkt im
   Fluss auf den Hero folgt.
   ========================================================= */

main.home {
  position: relative;
  background: var(--color-gray-100);   /* Figma "Rechteck 4144" #FAFAFA */
}

/* =========================================================
   HERO (Figma y0–798)
   ========================================================= */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-cream);
  min-height: 100vh;
  /* Mindesthöhe der Vorlage, damit der Hero auf sehr flachen Fenstern
     nicht unter die Figma-Höhe fällt. */
  height: 798px;
  max-height: none;
}
/* Seigaiha-Wellenmuster ("Gruppe maskieren 1") über die ganze Hero-Fläche.

   Runde 17, Punkt 13.3: Die Figma-Ausgabe ist ein 1440x798-Bild. Gekachelt
   passte seine rechte Kante nicht auf die linke – auf breiten Bildschirmen
   sah man die Naht ("als ob das Muster einfach rechts reinkopiert wurde").
   seigaiha-tile.svg ist stattdessen eine ECHTE Kachel: 65 x 39, die Periode
   des Gitters aus der Vorlage (Motivabstand 32.5 waagrecht, 19.5 senkrecht,
   versetzte Reihen, erstes Motiv auf 5/5). Nachgemessen: ein 4x4-Kachelfeld
   ist Bildpunkt für Bildpunkt gleich wie derselbe Ausschnitt der Vorlage und
   exakt periodisch – das Muster ist damit auf jeder Breite nahtlos. */
.home-hero-pattern {
  position: absolute; inset: 0;
  background-image: url("../assets/img/seigaiha-tile.svg");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 65px 39px;
  z-index: 0; pointer-events: none;
}
/* Tropfen-Grafik "Gruppe 21965": im Figma bei x974/y332, 610x610, am
   rechten Frame-Rand angeschnitten – das Asset ist bereits auf die
   sichtbaren 466px beschnitten. Vertikal wandert sie mit, wenn der Hero
   höher als 798px ist (gleicher Abstand zur Unterkante wie in der Vorlage:
   798-332-610 = -144, die Grafik ragt also unten heraus). */
/* Die 798px-Bühne der Vorlage sitzt vertikal mittig im (evtl. höheren)
   Hero. Im Figma ist der Inhaltsblock 233–555 innerhalb von 798 ohnehin
   praktisch mittig, die Vorlage wird bei exakt 798px also 1:1 getroffen. */
.home-hero-stage {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-720px, -50%);
  width: 1440px;
  height: 798px;
  z-index: 1;
}
.home-hero-graphic {
  position: absolute;
  left: 974px; top: 332px;
  width: 466px; height: 610px; max-width: none;
  z-index: 0; pointer-events: none;
}
.home-hero h1 {
  position: absolute; left: 144px; top: 233px; width: 907px;
  margin: 0;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 55px; line-height: 60.5px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.home-hero .home-hero-lead {
  position: absolute; left: 144px; top: 377px; width: 377px;
  margin: 0;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}
/* CTA-Schaltfläche "Rechteck 6599": 377x55, Navy, Radius 3.
   Kundenwunsch 6.1 – der Text sass zu hoch; jetzt echte Flex-Zentrierung
   statt Innenabstand. */
.home-hero .home-hero-cta {
  position: absolute; left: 144px; top: 500px;
  width: 377px; height: 55px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 3px;
  background: var(--color-navy);
  overflow: hidden;
  cursor: pointer;
}
.home-hero .home-hero-cta .btn-fill {
  position: absolute; inset: 0;
  background: var(--color-gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-hero .home-hero-cta .btn-label {
  position: relative; z-index: 1;
  font-family: var(--font-body); font-weight: 500;
  font-size: 18px; line-height: 18px;
  color: var(--color-white);
}
.home-hero .home-hero-cta:hover .btn-fill { transform: scaleX(1); }

/* Scroll-Hinweis unten mittig (dezenter Strich mit laufendem Segment),
   blendet beim ersten Scrollen aus – siehe initScrollHint() in effects.js. */
.home-scroll-hint {
  position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  z-index: 2; pointer-events: none;
  transition: opacity 520ms ease;
}
.home-scroll-hint.is-hidden { opacity: 0; }
.home-scroll-hint-line {
  position: relative; display: block; width: 1px; height: 54px;
  background: rgba(21, 21, 21, 0.16); overflow: hidden;
}
.home-scroll-hint-line-fill {
  position: absolute; left: 0; top: 0; width: 1px; height: 18px;
  background: var(--color-navy);
  animation: scrollHintRun 2200ms cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes scrollHintRun {
  0%   { transform: translateY(-18px); }
  60%  { transform: translateY(54px); }
  100% { transform: translateY(54px); }
}
.home-scroll-hint-label {
  font-family: var(--font-label); font-weight: 500;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-gold);
}

/* =========================================================
   BÜHNE UNTER DEM HERO (Figma y798–5299 → 4501px)
   ========================================================= */
.home-body {
  position: relative;
  width: 100%;
  /* Runde 37, Punkt 1.1: Die Buehne war 4 501 px hoch, ihr letzter Inhalt
     (der Wisch-Hinweis unter den Bewertungen) endete aber schon bei 4 080.
     Die 421 px Leerlauf kamen oben auf die 233 px Innenabstand des
     Ratgeber-Bereichs - zwischen Bewertungskarten und "Tipps und Tricks"
     standen dadurch 706 px. Mit 4 172 px sind es die gewuenschten 377.
     Im Fluss gilt "height: auto" (responsive.css), dort aendert sich
     nichts - und dort war es laut Rueckmeldung auch in Ordnung. */
  height: 4172px;
}
.home-stage {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-720px);
  width: 1440px; height: 100%;
  z-index: 3;
}
/* Cremeband des Kalkulator-Abschnitts, "Rechteck 6664" y1942–3117 */
/* Im Figma liegt "Rechteck 6664" NACH der senkrechten Linie im Ebenenstapel,
   verdeckt sie also im Kalkulator-Abschnitt. Genau so hier: Band ueber der
   Linie (z-index 1), Inhalt weiterhin darueber (z-index 3). */
.home-band-calc {
  position: absolute; left: 0; top: 1144px;
  width: 100%; height: 1175px;
  background: var(--color-cream);
  z-index: 1;
}

/* ---------- Graue Rasterlinien ----------
   Ebenenordnung site-weit einheitlich (Kundenwunsch 9.6):
   Linien 0  <  Flächen/Grafiken 1–2  <  Inhalt 3. */
.home-line-v {
  position: absolute;
  left: calc(50% - 720px + 76px);
  top: 0;
  width: 1px; height: 5169px;
  background: rgba(21, 21, 21, 0.16);
  transform: scaleY(0); transform-origin: top;
  pointer-events: none;
  z-index: 0;
}
.home-line-h {
  position: absolute; left: 0;
  width: 100%; height: 1px;
  background: rgba(21, 21, 21, 0.16);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
  z-index: 0;
  transition: transform 1500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.home-line-h.is-drawn { transform: scaleX(1); }
.home-line-h.linie-von-rechts { transform-origin: right; }
.home-line-h-01 { top: 579px; }    /* Figma "Linie 1371" y1377 */
.home-line-h-02 { top: 2695px; }   /* Figma "Linie 1411" y3493 */

/* Grosse blasse Zifferngrafiken. Sie liegen ÜBER den Linien, aber unter
   dem Inhalt – die Linien laufen im Figma genau durch ihre Mitte. */
.home-numeral {
  position: absolute;
  left: calc(50% - 720px);
  z-index: 1;
  pointer-events: none; user-select: none;
}
.home-numeral img { display: block; max-width: none; }
.home-numeral-01 { top: 390px; }    /* Figma y1188, Mitte 1376.5 ≈ Linie 1377 */
.home-numeral-02 { top: 2505px; }   /* Figma y3303, Mitte 3491.5 ≈ Linie 3493 */

/* ---------- Gemeinsame Textbausteine der Bühne ---------- */
.home-stage .home-h2 {
  position: absolute; margin: 0;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 55px; line-height: 60.5px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.home-stage .home-text {
  position: absolute;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}
.home-stage .home-text p { margin: 0; }
/* Im Figma trennt eine Leerzeile die Absätze – das entspricht genau einer
   Zeilenhöhe (30px). */
.home-stage .home-text p + p { margin-top: 30px; }
.home-stage .home-more,
.home-stage .home-svc-more {
  position: absolute;
  color: var(--color-navy);
  height: 18px;
  font-size: 18px; line-height: 18px;
}
/* Runde 19, Punkt 7: derselbe Abstand, aber als rechter Rand am Pfeil statt
   als Flex-"gap" - genau wie in effects.css und aus demselben Grund (Safari
   kennt Flex-gap erst ab 14.1). Wert unveraendert: Figma, Pfeil endet bei
   x165, Text ab x186. */
.home-stage .home-more .arrow-icon,
.home-stage .home-svc-more .arrow-icon { margin-right: 21px; }

/* ---------- Dienstleistungs-Spalten ---------- */
/* Feste Höhe (Icon y0 bis Ende "mehr erfahren" y377), damit der
   IntersectionObserver eine echte Fläche zum Beobachten hat - eine
   0px-hohe Box loest den Reveal nicht zuverlaessig aus. */
/* Runde 20: Die Residential-Spalte fuehrt jetzt vier statt drei Dienste
   (Umzugsreinigung ergaenzt - sie steht unter /services/residential und
   gehoerte deshalb in die Liste). Eine Zeile ist 31 px hoch, die
   Schaltflaeche darunter behaelt ihre 21 px Abstand: 359 -> 390, Hoehe
   377 -> 408. Alle drei Spalten wachsen gleich mit, damit "mehr erfahren"
   weiterhin auf einer Linie steht. */
.home-svc { position: absolute; width: 233px; height: 408px; }
.home-svc-icon { position: absolute; left: 0; top: 0; display: block; }
.home-svc-icon img { display: block; max-width: none; }
.home-svc h3 {
  position: absolute; left: 0; top: 144px; width: 233px; margin: 0;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 34px; line-height: 37.4px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.home-svc .home-svc-label {
  position: absolute; left: 0; top: 194px; width: 233px;
  font-family: var(--font-label); font-weight: 500;
  font-size: 15px; line-height: 15px; letter-spacing: 0.144em;
  text-transform: uppercase; color: var(--color-gold);
}
.home-svc ul {
  position: absolute; left: 0; top: 245px; width: 233px;
  list-style: none; margin: 0; padding: 0;
}
.home-svc li { height: 31px; }     /* Figma: 1448 / 1479 / 1510 */
.home-svc li a {
  font-weight: 300; font-size: 15px; line-height: 16.5px;
  color: var(--color-black);
}
.home-svc .home-svc-more { left: 0; top: 390px; }

/* ---------- Preiskalkulator-Teaser (statisch) ---------- */
.home-stage .home-calc-kind {
  position: absolute;
  font-weight: 300; font-size: 10px; line-height: 11px;
  color: var(--color-black);
}
.home-stage .home-calc-question {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px; line-height: 16.5px;
  color: var(--color-black);
}
.home-calc-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--color-black);
  font-size: 8px; font-weight: 700; line-height: 1;
  cursor: help;
}
/* Weisse Leiste "Rechteck 4279" 808x55, Radius 5, vier Felder à 202px.
   Im Figma gibt es KEINE Trennstriche zwischen den Feldern. */
.home-stage .home-calc-options {
  position: absolute;
  display: flex;
  width: 808px; height: 55px;
  background: var(--color-white);
  border-radius: 5px;
  overflow: hidden;
}
.home-calc-options button {
  flex: 0 0 202px; width: 202px; height: 55px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px; line-height: 21px; text-align: center;
  color: var(--color-gray-600);
  transition: background 260ms ease, color 260ms ease;
}
.home-calc-options button:hover { background: rgba(208, 176, 132, 0.16); color: var(--color-navy); }
/* Kundenwunsch 9.7: es ist keine Option vorausgewählt. */
.home-calc-options button.is-active { background: var(--color-gold); color: var(--color-white); }
/* Goldener Preisstreifen "Rechteck 4249" 344x144 (Figma y2596). */
.home-stage .home-calc-price {
  position: absolute;
  width: 344px; height: 144px;
  background: var(--color-gold);
}
.home-calc-price .home-calc-price-label {
  position: absolute; left: 34px; top: 42px;
  font-family: var(--font-label); font-weight: 500;
  font-size: 15px; line-height: 16.5px; letter-spacing: 0.089em;
  text-transform: uppercase; color: var(--color-gray-200);
}
.home-calc-price .home-calc-price-value {
  position: absolute; left: 34px; top: 60px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 34px; line-height: 37.4px;
  color: var(--color-white);
}

/* ---------- Kennzahlen und Stichworte ---------- */
.home-stats { position: absolute; display: flex; }
.home-stats > div { width: 233px; text-align: center; }
.home-stat-value {
  display: block;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 34px; line-height: 23.1px;
  color: var(--color-navy);
}
.home-stat-label {
  display: block; margin-top: 22px;
  font-family: var(--font-label); font-weight: 500;
  font-size: 15px; line-height: 15px; letter-spacing: 0.144em;
  text-transform: uppercase; color: var(--color-gold);
}
/* Kundenwunsch 6.3: statt der vier Stichworte der Vorlage stehen hier
   sechs – sie brauchen darum die volle Rasterbreite (1152px) statt der
   700px des Figma-Originals. Schrift/Farbe wie in der Vorlage. */
.home-values {
  position: absolute; width: 1152px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.home-values span {
  font-family: var(--font-headline); font-weight: 400;
  /* Runde 11, Punkt 2: von 34 auf 21 verkleinert (Kundenwunsch) - die sechs
     Stichworte standen sonst fast so gross wie die Kennzahlen darueber. */
  font-size: 21px; line-height: 23.1px;
  color: var(--color-navy);
  white-space: nowrap;
}
.home-values-caption {
  position: absolute; width: 1152px; text-align: center;
  font-family: var(--font-label); font-weight: 500;
  font-size: 15px; line-height: 15px; letter-spacing: 0.144em;
  text-transform: uppercase; color: var(--color-gold);
}

/* ---------- Bewertungen ----------
   Figma: zwei Karten 610x321 bei x144 und x843 (Abstand 89px), die zweite
   läuft rechts aus dem Rahmen. Da es fünf echte Google-Bewertungen sind,
   ist die Reihe horizontal ziehbar (siehe home-faq.js). */
.home-testimonial-row {
  position: absolute;
  display: flex; gap: 89px;
  width: 1296px;                 /* 144 → rechter Rahmenrand */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
}
.home-testimonial-row::-webkit-scrollbar { display: none; }
.home-testimonial-row.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.home-testimonial-card {
  position: relative;
  flex: 0 0 610px; width: 610px; height: 321px;
  background: var(--color-white);
  border-radius: 5px;
  scroll-snap-align: start;
}
.home-testimonial-card h3 {
  position: absolute; left: 55px; top: 93px; width: 377px; margin: 0;
  font-family: var(--font-headline); font-weight: 400;
  font-size: 34px; line-height: 37.4px;
  letter-spacing: var(--font-headline-tracking);
  color: var(--color-navy);
}
.home-testimonial-stars {
  position: absolute; left: 438px; top: 100px;
  display: flex; gap: 3px;               /* Figma: Raster 24px bei 21px Stern */
  color: var(--color-gold);
}
.home-testimonial-stars svg { display: block; width: 21px; height: 20px; }
.home-testimonial-card p {
  position: absolute; left: 55px; top: 159px; width: 500px; margin: 0;
  font-weight: 300; font-size: 13px; line-height: 26px;
  letter-spacing: 0.034em;
  color: var(--color-black);
}
.home-testimonial-hint {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-label); font-weight: 500;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-gray-400);
  pointer-events: none;
}
.home-testimonial-hint-icon svg { display: block; width: 34px; height: 18px; }

/* =========================================================
   FAQ (Figma ab y5299) – ab hier im Fluss, damit das Aufklappen
   die Seite sauber verlängert.
   ========================================================= */
/* .home-tail ist ein spaeteres positioniertes Geschwister von .home-body und
   wuerde mit einem eigenen Hintergrund die darueber hinausragende senkrechte
   Linie ueberdecken - genau daran endete sie bisher auf Hoehe des FAQ statt
   am CTA-Band. Der Hintergrund kommt darum von main.home (gleiche Farbe),
   der Schwanz selbst bleibt durchsichtig. */
.home-tail {
  position: relative;
  background: transparent;
  padding-bottom: 377px;            /* Figma: Link endet 5590, CTA-Band 5967 */
}
.home-tail-stage {
  position: relative;
  width: 1440px; margin: 0 auto;
  z-index: 3;
}
.home-faq-list { position: relative; }
/* Ein Eintrag ist geschlossen exakt 91px hoch (Figma: Fragen bei
   5299 / 5390 / 5481): Frage 39px + Vorschauzeile 16.5px + 35.5px Abstand.
   Im Figma gibt es KEINE Trennlinien zwischen den Einträgen. */
.home-faq-item { position: relative; padding: 0 0 35.5px; }
.home-faq-question {
  position: relative;
  display: block; width: 1152px; margin: 0 0 0 144px; padding: 0 0 22.5px;
  border: none; background: none; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px; line-height: 16.5px;
  color: var(--color-black);
}
.home-faq-toggle {
  position: absolute; left: 1123px; top: 2px;   /* Figma x1267 = 144+1123 */
  width: 31px; height: 17px;
  color: var(--color-navy);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-faq-toggle svg { display: block; width: 100%; height: 100%; }
.home-faq-item.is-open .home-faq-toggle { transform: rotate(180deg); }
/* Vorschauzeile: im Figma steht unter jeder Frage genau eine angeschnittene
   Zeile mit "…". Beim Aufklappen blendet sie aus und der Volltext
   (aus /kontakt/fragen) fährt auf. */
.home-faq-preview {
  width: 1152px; margin-left: 144px;
  max-height: 17px; overflow: hidden;
  font-weight: 300; font-size: 15px; line-height: 16.5px;
  color: var(--color-black);
  white-space: nowrap; text-overflow: ellipsis;
  transition: max-height 380ms cubic-bezier(0.16, 1, 0.3, 1), opacity 240ms ease;
}
.home-faq-item.is-open .home-faq-preview { max-height: 0; opacity: 0; }
.home-faq-answer {
  width: 1152px; margin-left: 144px;
  max-height: 0; overflow: hidden;
  transition: max-height 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-faq-answer p {
  margin: 0; padding-top: 4px;
  font-weight: 300; font-size: 15px; line-height: 30px;
  color: var(--color-black);
}
.home-faq-link.arrow-link {
  margin-left: 144px;
  color: var(--color-navy);
  height: 18px;
  font-size: 18px; line-height: 18px;
}
.home-faq-link.arrow-link .arrow-icon { margin-right: 21px; }

/* =========================================================
   Schmalere Fenster: das Layout ist bewusst nicht responsiv
   (Desktop-Fixbreite 1440px laut Auftrag) – die Bühne bleibt
   1440px breit und wird mittig beschnitten.
   ========================================================= */
@media (max-width: 1440px) {
  main.home { overflow-x: clip; overflow-y: visible; }
}

/* ---------- Bewertungen: Ergaenzungen Runde 11/12, Punkt 3 ----------
   21 echte Google-Bewertungen statt fuenf.

   Runde 12 - Mass der Karte: Die Vorlage legt den Namen auf y93 und den Text
   auf y159; die Karte ist 321 hoch. Der Text wird darum auf GENAU DREI GANZE
   Zeilen begrenzt (3 x 26 = 78, Unterkante 237). Damit betraegt der Abstand
   vom Text zum unteren Kartenrand 84 px und der vom Namen zum oberen Rand
   93 px - praktisch gleich gross, wie gewuenscht. Und weil immer bei einer
   ganzen Zeile geschnitten wird, gibt es keine angeschnittene Zeile mehr.

   Von den 21 Zitaten fassen 15 in drei Zeilen; die restlichen sechs bekommen
   "weiterlesen" und klappen nach unten auf, ohne die Nachbarkarten
   mitzudehnen (align-items:flex-start). Gekuerzt wird nichts - es sind
   Kundenzitate, der volle Text steht im Quelltext (auch fuer Suchmaschinen). */
.home-testimonial-row { align-items: flex-start; }
.home-testimonial-card { height: 321px; }
.home-testimonial-card h3 span {
  font-family: var(--font-body); font-weight: 300;
  font-size: 15px; letter-spacing: normal;
  color: var(--color-gray-600);
  white-space: nowrap;
}
.home-testimonial-card p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 21 Luft unter dem Textblock, damit die Schaltflaeche den Text nicht mehr
   ueberlagert (Runde 11 sass sie auf bottom:21 mitten im Text). */
.home-testimonial-more {
  position: absolute; left: 55px; top: 258px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 13px; line-height: 21px;
  color: var(--color-gold);
  z-index: 1;
  transition: color 200ms ease;
}
.home-testimonial-more:hover { color: var(--color-navy); }
.home-testimonial-card.is-open {
  z-index: 5;
  box-shadow: var(--pk-shadow);
}
.home-testimonial-card.is-open p {
  display: block;
  -webkit-line-clamp: unset;
}

/* Blaettern – gleiche Formensprache wie die Plus/Minus-Knoepfe im Kalkulator */
.home-testimonial-nav {
  position: absolute;
  display: flex; gap: 13px;
}
.home-testimonial-nav button {
  width: 34px; height: 34px; padding: 0;
  box-sizing: border-box;
  display: grid; place-items: center;
  border: 1px solid var(--color-gray-200); border-radius: 5px;
  background: var(--color-white); cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease, transform 140ms ease;
}
/* Runde 12: identische Pfeilzeichnung wie im Kalkulator (viewBox 8x13, 1:1
   dargestellt, Strichstaerke 1) - vorher 1.4 auf 13 px, also zu fett. */
.home-testimonial-nav svg { display: block; width: 8px; height: 13px; }
.home-testimonial-nav svg path { stroke: var(--color-black); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.home-testimonial-nav button[data-dir="-1"] svg { transform: rotate(180deg); }
.home-testimonial-nav button:hover { border-color: var(--color-gold); background: var(--color-cream); }
.home-testimonial-nav button:active { transform: scale(0.94); }
.home-testimonial-nav button[disabled] { opacity: 0.35; cursor: default; }
.home-testimonial-nav button[disabled]:hover { border-color: var(--color-gray-200); background: var(--color-white); }
.home-testimonial-nav button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }