/* Startseiten-Hero mit Richtpreis-Rechner.
   Farben, Groessen und Abstaende stammen aus der Designreferenz
   design_handoff_hero_preisrechner/reference-1a-only.dc.html. */

.hero-preisrechner {
  --hpr-rot: #9F131C;
  --hpr-rot-dunkel: #7C0F16;
  --hpr-preis-flaeche: #F8EDEE;
  --hpr-preis-rahmen: #EBD3D5;
  --hpr-preis-text: #7A5257;
  --hpr-tinte: #14171A;
  --hpr-text: #4A4F53;
  --hpr-text-punkte: #3A3F43;
  --hpr-text-leise: #6E7377;
  --hpr-grund: #FBFAF8;
  --hpr-rahmen: #DFDAD2;
  --hpr-linie: #E7E2DA;
  --hpr-leise: #9A948C;
  --hpr-whatsapp: #25D366;
  --hpr-whatsapp-dunkel: #1DA851;

  --hpr-display: Archivo, "Lato", system-ui, sans-serif;
  --hpr-text-schrift: "Source Sans 3", "Lato", system-ui, sans-serif;
  --hpr-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Gleiche Inhaltsbreite wie .hero-steinreinigung__inner */
  --hpr-inhalt: 1440px;

  font-family: var(--hpr-text-schrift);
  color: var(--hpr-text);
}

.hero-preisrechner *,
.hero-preisrechner *::before,
.hero-preisrechner *::after { box-sizing: border-box; }

/* Randlos ueber die volle Breite, wie der Hero darunter - die Referenz zeigt
   den Ausschnitt als gerahmte Karte, das ist die Darstellung im Design-Canvas
   und nicht die Einbettung auf der Seite. Der Inhalt laeuft stattdessen gegen
   dieselbe Maximalbreite wie der bestehende Hero (1440px). */
.hero-preisrechner__rahmen {
  background: var(--hpr-grund);
}

.hero-preisrechner__buehne {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  overflow: hidden;
  /* Foto und Verlauf liegen randlos darunter; den Inhalt zentriert das
     seitliche Padding, damit die absoluten Ebenen die volle Breite behalten. */
  padding: 52px max(28px, calc((100% - var(--hpr-inhalt)) / 2 + 28px)) 44px;
}

.hero-preisrechner__foto {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--hero-foto);
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

/* Verlauf aus der Referenz: deckend links, damit der Text lesbar bleibt,
   nach rechts auslaufend, wo mehr vom Foto sichtbar sein soll.
   Die Stops sind gegenueber der Referenz nach rechts gezogen. Dort faellt
   die Deckung ab 34% der Buehnenbreite ab, der Fliesstext reicht aber bis
   47% - gemessen kam er damit auf 3,39:1 (noetig sind 4,5:1 bei 19px).
   Richtung und Charakter bleiben; die dichte Zone endet jetzt dort, wo die
   Textspalte endet und die Rechner-Karte beginnt.
   Deckkraft nachtraeglich abgesenkt (mehr Foto sichtbar) - gegen den
   Fliesstext (der schwaechste Fall) gemessen: 4,5:1 bleibt erhalten, siehe
   Commit-Notiz. */
.hero-preisrechner__schleier {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(251, 250, 248, .80)   0%,
    rgba(251, 250, 248, .77)  46%,
    rgba(251, 250, 248, .40)  62%,
    rgba(251, 250, 248, .06)  78%,
    rgba(251, 250, 248, 0)   100%);
}

.hero-preisrechner__text,
.hero-preisrechner__karte {
  position: relative;
  z-index: 2;
}

/* --- Linke Spalte ------------------------------------------------- */
.hero-preisrechner__eyebrow {
  margin: 0 0 16px;
  color: var(--hpr-rot);
  font-family: var(--hpr-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-preisrechner__titel {
  margin: 0 0 20px;
  color: var(--hpr-tinte);
  font-family: var(--hpr-display);
  font-size: 52px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.hero-preisrechner__vorspann {
  max-width: 520px;
  margin: 0 0 28px;
  color: var(--hpr-text);
  font-size: 19px;
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-preisrechner__vorspann p { margin: 0 0 .6em; }
.hero-preisrechner__vorspann p:last-child { margin-bottom: 0; }
.hero-preisrechner__vorspann strong { color: var(--hpr-tinte); }

.hero-preisrechner__punkte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 470px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-preisrechner__punkte li {
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 10px;
  color: var(--hpr-text-punkte);
  font-size: 17px;
  line-height: 1.4;
}

.hero-preisrechner__punkte li::before {
  content: "✓";
  color: var(--hpr-rot);
  font-weight: 700;
}

/* --- Rechner-Karte ------------------------------------------------ */
.hero-preisrechner__karte {
  padding: 28px;
  border: 1px solid var(--hpr-rahmen);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 34px -18px rgba(20, 23, 26, .3);
}

.hero-preisrechner__karte-titel {
  margin: 0 0 4px;
  color: var(--hpr-tinte);
  font-family: var(--hpr-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.hero-preisrechner__karte-unterzeile {
  margin: 0 0 24px;
  color: var(--hpr-text-leise);
  font-size: 15px;
}

.hero-preisrechner__flaeche {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.hero-preisrechner__flaeche-label { color: var(--hpr-text); font-size: 15px; }

.hero-preisrechner__flaeche-wert {
  color: var(--hpr-tinte);
  font-family: var(--hpr-display);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Regler. Die Markierung sitzt an der Pauschalgrenze; ihre Position setzt
   das Skript ueber --hpr-marke, weil sie von den Reglergrenzen abhaengt. */
.hero-preisrechner__reglerzeile {
  position: relative;
  margin: 0 0 4px;
}

.hero-preisrechner__regler {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 26px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.hero-preisrechner__regler::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--hpr-rahmen);
}

.hero-preisrechner__regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--hpr-rot);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.hero-preisrechner__regler::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--hpr-rahmen);
}

.hero-preisrechner__regler::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--hpr-rot);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.hero-preisrechner__regler:focus-visible {
  outline: 3px solid var(--hpr-rot);
  outline-offset: 4px;
}

.hero-preisrechner__marke {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--hpr-marke);
  width: 2px;
  background: var(--hpr-rot);
  pointer-events: none;
}

.hero-preisrechner__markenzeile {
  position: relative;
  height: 14px;
  margin-bottom: 4px;
}

.hero-preisrechner__marke-label {
  position: absolute;
  top: 0;
  left: var(--hpr-marke);
  color: var(--hpr-rot);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}

.hero-preisrechner__skala {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--hpr-leise);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.hero-preisrechner__staffelhinweis {
  margin: 0 0 18px;
  color: var(--hpr-rot);
  font-size: 12px;
  font-weight: 600;
}

.hero-preisrechner__preis {
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--hpr-preis-rahmen);
  border-radius: 10px;
  background: var(--hpr-preis-flaeche);
}

.hero-preisrechner__preis-label {
  margin: 0 0 6px;
  color: var(--hpr-rot-dunkel);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-preisrechner__preis-wert {
  margin: 0;
  color: var(--hpr-tinte);
  font-family: var(--hpr-display);
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.hero-preisrechner__preis-hinweis {
  margin: 8px 0 0;
  color: var(--hpr-preis-text);
  font-size: 15px;
}

.hero-preisrechner__preis-anfahrt {
  margin: 6px 0 0;
  color: var(--hpr-preis-text);
  font-size: 14px;
  font-weight: 600;
}

.hero-preisrechner__knopf {
  display: block;
  width: 100%;
  padding: 17px;
  border: 0;
  border-radius: 9px;
  background: var(--hpr-rot);
  color: #fff;
  font-family: var(--hpr-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease;
}

.hero-preisrechner__knopf:hover,
.hero-preisrechner__knopf:focus {
  background: var(--hpr-rot-dunkel);
  color: #fff;
  text-decoration: none;
}

/* Zweiter Weg neben dem Festpreis-Angebot: WhatsApp. Gleiche Form wie der
   Hauptknopf, aber in der WhatsApp-Farbe des restlichen Auftritts - dadurch
   als eigener Kanal erkennbar und trotzdem klar nachrangig. */
.hero-preisrechner__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 10px;
  padding: 15px 17px;
  border: 0;
  border-radius: 9px;
  background: var(--hpr-whatsapp);
  color: #fff;
  font-family: var(--hpr-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s ease;
}

.hero-preisrechner__whatsapp:hover,
.hero-preisrechner__whatsapp:focus {
  background: var(--hpr-whatsapp-dunkel);
  color: #fff;
  text-decoration: none;
}

.hero-preisrechner__whatsapp i {
  flex: 0 0 auto;
  font-size: 1.3em;
  line-height: 1;
}

.hero-preisrechner__telefon {
  margin: 12px 0 0;
  color: var(--hpr-text-leise);
  font-size: 15px;
  text-align: center;
}

.hero-preisrechner__telefon a {
  color: var(--hpr-rot-dunkel);
  font-weight: 700;
  text-decoration: none;
}

.hero-preisrechner__telefon a:hover { text-decoration: underline; }

.hero-preisrechner__fussnote {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hpr-linie);
  color: var(--hpr-leise);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Trust-Leiste ------------------------------------------------- */
.hero-preisrechner__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 32px;
  padding: 18px max(28px, calc((100% - var(--hpr-inhalt)) / 2 + 28px));
  border-top: 1px solid var(--hpr-linie);
  background: #fff;
  color: var(--hpr-text);
  font-size: 15px;
}

.hero-preisrechner__trust-note { color: var(--hpr-tinte); font-weight: 700; }
.hero-preisrechner__trust-strich { color: var(--hpr-rahmen); }

/* --- Unter 900px: eine Spalte, Rechner vor die Aufzaehlung --------- */
@media (max-width: 900px) {
  .hero-preisrechner__buehne {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 36px 20px 32px;
  }

  .hero-preisrechner__foto {
    background-image: var(--hero-foto-mobil, var(--hero-foto));
    background-position: center;
  }

  /* Mobil steht der Text ueber der vollen Breite. Der Verlauf aus der
     Referenz laeuft zum Ende hin auf transparent aus - die Haekchen-Punkte
     stehen dort zuletzt und waeren auf dem offenen Foto unlesbar. Der
     Schleier bleibt deshalb ueber die volle Hoehe deckend, das Foto traegt
     mobil als Textur. */
  .hero-preisrechner__schleier {
    background: linear-gradient(180deg,
      rgba(251, 250, 248, .90)   0%,
      rgba(251, 250, 248, .76)  16%,
      rgba(251, 250, 248, .76)  38%,
      rgba(251, 250, 248, .78)  72%,
      rgba(251, 250, 248, .81) 100%);
  }

  /* Reihenfolge H1 -> Vorspann -> Rechner -> Punkte. display:contents loest
     die Box des Textcontainers auf, damit die Karte zwischen seine Kinder
     rutschen kann - dabei geht aber auch dessen position/z-index verloren.
     Ohne eigene Positionierung malen die Textelemente hinter dem
     Verlaufs-Layer und sind unsichtbar; deshalb bekommen sie sie hier. */
  .hero-preisrechner__text { display: contents; }
  .hero-preisrechner__eyebrow,
  .hero-preisrechner__titel,
  .hero-preisrechner__vorspann,
  .hero-preisrechner__punkte {
    position: relative;
    z-index: 2;
  }
  .hero-preisrechner__eyebrow  { order: 1; }
  .hero-preisrechner__titel    { order: 2; font-size: 34px; }
  .hero-preisrechner__vorspann { order: 3; max-width: none; margin-bottom: 0; }
  .hero-preisrechner__karte    { order: 4; }
  .hero-preisrechner__punkte   { order: 5; max-width: none; }

  .hero-preisrechner__preis-wert { font-size: 30px; }

  /* Beruehrflaeche 48px; der Griff bleibt optisch bei 26px, sonst wirkt er
     auf der schmalen Schiene klobig. */
  .hero-preisrechner__regler { height: 48px; }
  .hero-preisrechner__regler::-webkit-slider-thumb { margin-top: -10px; }

  .hero-preisrechner__trust {
    gap: 8px 18px;
    padding: 16px 20px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-preisrechner__knopf { transition: none; }
}