/* =========================================================
   STYLES-PREISE.CSS
   Preisseiten unter /preise/
   Praefix: pr-
   Das Seitenraster kommt aus styles-leistungen.css
   (.ls-section, .ls-section--stone, .ls-section-header).
   Diese Datei ergaenzt nur, was dort fehlt.
   ========================================================= */


/* =========================================================
   01 - PREISSTUFEN-KARTE (in .ls-audience-card)
   ========================================================= */

.pr-stufe-preis {
  font-family: var(--head);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 2px;
}

.pr-stufe-netto {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: -6px;
}


/* =========================================================
   02 - ANKERSATZ
   ========================================================= */

.pr-anchor {
  font-family: var(--head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin-top: clamp(28px, 3.5vw, 40px);
  margin-bottom: 0;
}

/* Jeder Satz ein eigener inline-block: dadurch bricht die
   Zeile nur zwischen den beiden Saetzen um, nie mitten im
   Satz ("...klaeren den / Rest."). Auf breiten Schirmen
   bleiben beide in einer Zeile, auf schmalen stehen sie
   sauber untereinander. */
.pr-anchor span,
.cta-strip-lead span {
  display: inline-block;
}

/* Der zweite Satz ist das Versprechen, er traegt den Akzent */
.pr-anchor span:last-child {
  color: var(--green-mid);
}


/* =========================================================
   02b - HERO DER PREISSEITEN
   Buttonspalte oben buendig zum Fliesstext, kein
   zusaetzlicher Nummernblock. Die Preisaussage steht
   im Textteil, damit der Hero die Titelfrage beantwortet.
   ========================================================= */

.pr-cta-note {
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  margin: 6px 0 0;
}


/* =========================================================
   02c - ABSCHLUSSBLOCK EINER SEKTION
   Fasst Ankersatz, Hinweis und Folgelink zu einem Block
   zusammen, statt sie einzeln unter die Sektion zu haengen.
   ========================================================= */

.pr-close {
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.pr-close .pr-anchor {
  margin: 0;
}

.pr-close .btn-ghost {
  margin: 0;
}

.pr-close .gf-preis-hinweis {
  margin: 0;
  flex-basis: 100%;
  color: var(--ink-soft);
  line-height: 1.8;
}


/* =========================================================
   02d - ZWEI HINWEISKAESTEN NEBENEINANDER
   ========================================================= */

.pr-boxes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}

/* Unter 700px ist kein Platz fuer eine 330px-Mindestspalte
   (Container hat bei 360px Viewportbreite nur ~312px Innenraum).
   Die Karte wurde dadurch breiter als ihr Container und lief
   rechts ueber den Rand hinaus. Eine Spalte, volle Breite. */
@media (max-width: 700px) {
  .pr-boxes-grid {
    grid-template-columns: 1fr;
  }
}

.pr-boxes-grid > .pr-notice {
  margin-top: 0;
  height: 100%;
}


/* =========================================================
   02e - ZWISCHENUEBERSCHRIFT UEBER EINER TABELLE
   ========================================================= */

.pr-table-head {
  font-family: var(--head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: clamp(36px, 4vw, 52px);
  margin-bottom: 16px;
}


/* =========================================================
   02f - SUMMENZEILE IM BEISPIELANGEBOT
   ========================================================= */

.gf-preis-table tr.pr-total td {
  font-weight: 700;
  color: var(--ink);
  border-top: 2px solid var(--ink);
}


/* =========================================================
   02g - TABELLENVARIANTE DER PREISSEITEN
   Setzt .gf-preis-table-wrap / .gf-preis-table nur dort
   ausser Kraft, wo zusaetzlich .pr-table gesetzt ist.
   styles-gf.css bleibt unangetastet.
   ========================================================= */

.gf-preis-table-wrap.pr-table {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  overflow-x: auto;
  margin: 0;
}

.pr-table .gf-preis-table {
  font-size: 0.9rem;
  min-width: 560px;
}

/* Kopfzeile: ruhige Stone-Flaeche, lesbarer Text, feine Unterkante */
.pr-table .gf-preis-table thead {
  background: var(--stone);
}

.pr-table .gf-preis-table th {
  font-family: var(--head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--ink);
  padding: 18px 30px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: bottom;
}

/* Datenzeilen: kein Zebra, kein Hover, nur Haarlinien */
.pr-table .gf-preis-table tbody tr,
.pr-table .gf-preis-table tbody tr:nth-child(even) {
  background: transparent;
}

.pr-table .gf-preis-table td {
  padding: 22px 30px;
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
  vertical-align: top;
  color: var(--ink-soft);
}

.pr-table .gf-preis-table td:first-child {
  color: var(--ink);
  font-weight: 400;
  padding-right: 40px;
}

.pr-table .gf-preis-table th:first-child,
.pr-table .gf-preis-table td:first-child {
  width: 50%;
}

.pr-table .gf-preis-table tbody tr:last-child td {
  border-bottom: none;
}

/* Zahlenspalten: nur zwei Tonwerte */
.pr-table .gf-preis-table th.num,
.pr-table .gf-preis-table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pr-table .gf-preis-table td.num {
  color: var(--ink);
  font-weight: 500;
}

.pr-table .gf-preis-table td.num-soft {
  color: var(--ink-soft);
  font-weight: 400;
}

/* Summenzeile: keine Farbflaeche, nur eine Linie und Gewicht */
.pr-table .gf-preis-table tr.pr-total td {
  background: transparent;
  border-top: 1px solid var(--ink);
  border-bottom: none;
  color: var(--ink);
  font-weight: 700;
  padding-top: 20px;
  padding-bottom: 20px;
}

@media (max-width: 900px) {
  .pr-table .gf-preis-table th {
    padding: 16px 22px;
  }
  .pr-table .gf-preis-table td {
    padding: 18px 22px;
  }
  .pr-table .gf-preis-table td:first-child {
    padding-right: 28px;
  }
}

/* -----------------------------------------------------
   Unter 640px: Tabelle wird zur Kartenliste.
   Kein horizontales Scrollen, die Preisspalte bleibt
   immer im Bild. Die Spaltennamen kommen aus data-label.

   Ueberarbeitet: Jede Zelle ist reiner Blockfluss statt
   Flex. Der vorherige Flex-Ansatz behandelte Label,
   Bruttotext und den verschachtelten Netto-<span> als
   DREI gleichrangige Flex-Kinder in einer Zeile. Damit
   landete der Nettowert als eigenes Element rechts aussen
   statt sichtbar unter dem Bruttowert zu stehen, und
   align-items:baseline behandelt einen block-Span als
   Flex-Kind uneinheitlich. Ergebnis: Brutto und Netto
   lasen sich nicht mehr als eine Einheit, und die Zeilen
   wirkten ungleichmaessig hoch.
   Jetzt: Label als eigene kleine Zeile oben, Wert darunter.
   Alle Zellen einer Karte teilen sich dasselbe Padding.
   ----------------------------------------------------- */
@media (max-width: 640px) {

  .gf-preis-table-wrap.pr-table {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  .pr-table .gf-preis-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .pr-table .gf-preis-table thead {
    display: none;
  }

  .pr-table .gf-preis-table tbody {
    display: block;
  }

  /* tbody tr statt tr: die Zebra-Regel weiter oben nutzt
     ebenfalls "tbody tr" und setzt background:transparent.
     Mit nur "tr" verliert diese Regel den Spezifitaets-
     vergleich, die Karten blieben durchsichtig und zeigten
     den Stone-Hintergrund der Sektion, also dieselbe Farbe
     wie die Seite. */
  /* Auch nth-child(even) mit adressieren: die Zebra-Regel
     weiter oben nutzt genau diesen Selektor mit
     background:transparent und hat eine hoehere Spezifitaet.
     Ohne ihn blieb jede zweite Karte durchsichtig und zeigte
     den Stone-Hintergrund der Sektion, die Karten wechselten
     sichtbar zwischen weiss und grau. */
  .pr-table .gf-preis-table tbody tr,
  .pr-table .gf-preis-table tbody tr:nth-child(even) {
    display: block;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 4px;
    /* Weiss auf Stone-Hintergrund mit nur 1px hellem Rand
       war kaum von der Seite zu unterscheiden. Ein dezenter
       Schatten uebernimmt die Abgrenzung, der Rand bleibt. */
    box-shadow: 0 1px 3px rgba(28, 28, 26, 0.06);
    margin-bottom: 12px;
  }

  .pr-table .gf-preis-table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Jede Zelle: reiner Blockfluss, ein einheitliches Padding
     fuer alle Zellen einer Karte, egal ob Position, Preis
     oder Einheit. */
  .pr-table .gf-preis-table td,
  .pr-table .gf-preis-table td:first-child {
    display: block;
    width: auto;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }

  .pr-table .gf-preis-table td:empty {
    display: none;
  }

  .pr-table .gf-preis-table tr td:last-child {
    border-bottom: none;
  }

  /* Label als eigene kleine Zeile ueber dem Wert, nicht
     mehr als Flex-Geschwister daneben. */
  .pr-table .gf-preis-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--head);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--green-mid);
    margin-bottom: 5px;
  }

  /* Erste Zelle traegt Grafik und Bezeichnung, kein Label */
  .pr-table .gf-preis-table td:first-child::before {
    display: none;
  }

  /* Zahlenzellen: Brutto und Netto stehen jetzt normal
     untereinander im Blockfluss, kein Flex-Kontext mehr.
     Der Netto-Wert (Abschnitt 15) bleibt block mit
     margin-top und stapelt sich damit zuverlaessig. */
  .pr-table .gf-preis-table td.num {
    text-align: left;
  }

  /* Ueberall sonst auf der Seite (Rechenbeispiel, Summenbox)
     steht ein Eurobetrag in der Kopfschrift und in Fett.
     Hier stand bisher dieselbe Zahl in der duennen Fliess-
     schrift mit mittlerem Gewicht, das wirkte inkonsistent
     und zugleich schwer. Angeglichen an das uebrige Muster. */
  .pr-table .gf-preis-table td.num {
    font-family: var(--head);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .pr-table .gf-preis-table td.num-soft {
    font-family: var(--body);
    font-size: 0.85rem;
    font-weight: 400;
  }

  .pr-table .gf-preis-table td.num span {
    font-family: var(--body);
    font-size: 0.82rem;
    font-weight: 400;
    margin-top: 4px;
  }

  .pr-table .gf-preis-table tr.pr-total {
    border-color: var(--ink);
  }

  .pr-table .gf-preis-table tr.pr-total td {
    border-top: none;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}


/* =========================================================
   02h - KARTE PREISSTUFEN (mobil)
   Der eigentliche Vergleichswert ist der Preis. Vorher stand
   er in vier gestapelten Zeilen, waehrend rechts die halbe
   Kartenbreite leer blieb. Jetzt: Silhouette und Beschreibung
   oben, darunter eine Trennlinie, dann EINE Preiszeile mit
   Brutto links und Netto rechtsbuendig daneben. Beide Werte
   auf einer gemeinsamen Grundlinie, damit sie sich direkt
   vergleichen lassen. Aus vier Zeilen werden zwei.
   ========================================================= */
@media (max-width: 640px) {

  /* Preiszeile als Flexbox statt starrem Grid: bei 320px
     Geraetebreite brauchen Brutto und Netto zusammen rund
     265px, verfuegbar sind dort nur 232px. Ein Grid haette
     ueberlaufen, Flex mit Umbruch setzt den Nettowert dann
     rechtsbuendig darunter. */
  .pr-table .gf-preis-table[aria-label="Preise Dachrinnenreinigung je laufendem Meter"] tr {
    display: block;
    padding: 18px 20px;
  }

  .pr-table .gf-preis-table[aria-label="Preise Dachrinnenreinigung je laufendem Meter"] td {
    display: block;
    min-width: 0;
    padding: 0;
    border-bottom: none;
    text-align: left;
  }

  .pr-table .gf-preis-table[aria-label="Preise Dachrinnenreinigung je laufendem Meter"] td::before {
    content: none;
  }

  /* Silhouette und Beschreibung: volle Breite */
  .pr-table .gf-preis-table[aria-label="Preise Dachrinnenreinigung je laufendem Meter"] td:nth-child(1) {
    display: block;
  }

  /* Traufhoehe schliesst den Infoteil ab, Trennlinie darunter */
  .pr-table .gf-preis-table[aria-label="Preise Dachrinnenreinigung je laufendem Meter"] td:nth-child(2) {
    display: block;
    margin-top: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
    font-size: 0.78rem;
    color: var(--ink-soft);
  }

  /* Bruttopreis: fuehrender Wert, links */
  .pr-table .gf-preis-table[aria-label="Preise Dachrinnenreinigung je laufendem Meter"] td:nth-child(3) {
    font-family: var(--head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
  }

  /* Nettopreis: nachgeordnet, rechtsbuendig auf gleicher Grundlinie */
  .pr-table .gf-preis-table[aria-label="Preise Dachrinnenreinigung je laufendem Meter"] td:nth-child(4) {
    margin-top: 3px;
    text-align: left;
    font-family: var(--body);
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--ink-soft);
  }
}


/* =========================================================
   02i - KARTE "WEITERE POSITIONEN" (mobil)
   Der Positionsname bekommt die volle Kartenbreite. Vorher
   teilte er sich die Zeile mit dem Betrag und wurde dadurch
   auf drei Zeilen gequetscht ("Abtransport und Entsorgung,
   erste Behaelterfuellung bis 78 Liter"), waehrend rechts
   daneben Leerraum stand. Jetzt: Name oben ueber die ganze
   Breite, darunter der Bruttobetrag gross mit dem Nettowert
   direkt daneben, darunter die Einheit klein. Drei ruhige
   Zeilen statt einem unausgeglichenen Zweispalter.
   Eindeutig nur auf diese Tabelle begrenzt.
   ========================================================= */
@media (max-width: 640px) {

  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] tr {
    display: block;
    padding: 18px 20px;
  }

  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] td {
    display: block;
    min-width: 0;
    padding: 0;
    border-bottom: none;
    text-align: left;
  }

  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] td::before {
    content: none;
  }

  /* Positionsname, volle Breite */
  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] td:nth-child(1) {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.45;
    margin-bottom: 10px;
  }

  /* Betragszeile: Brutto fuehrend links, Netto rechtsbuendig
     daneben. Beide Werte tragen white-space:nowrap, zusammen
     brauchen sie bei 360px rund 280px, die Karte bietet aber
     nur 272px, auf 320px-Geraeten fehlen ueber 40px. Deshalb
     flex-wrap: passt es nebeneinander, bleibt es eine Zeile,
     sonst rutscht der Nettowert rechtsbuendig darunter statt
     aus der Karte zu laufen. */
  /* Immer gestapelt, nie umbruchabhaengig. Der vorherige
     Umbruchansatz brach nur bei langen Betraegen um, dadurch
     sah jede Karte anders aus. Bei 320px Geraetebreite passt
     es ohnehin in keiner Karte nebeneinander. Gleiche Anord-
     nung wie in der Desktop-Tabelle, dort steht Netto
     ebenfalls unter Brutto. */
  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] td:nth-child(2) {
    display: block;
    min-width: 0;
    font-family: var(--head);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
  }

  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] td:nth-child(2) span {
    display: block;
    margin-top: 3px;
    margin-left: 0;
    text-align: left;
    font-family: var(--body);
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--ink-soft);
  }

  /* "siehe Preisstufen" ist kein Betrag und darf nicht wie
     einer aussehen. num-soft kennzeichnet genau diese Zellen. */
  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] td:nth-child(2).num-soft {
    font-family: var(--body);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ink-soft);
  }

  /* Einheit als ruhige Fusszeile */
  .pr-table .gf-preis-table[aria-label="Weitere Positionen Dachrinnenreinigung"] td:nth-child(3) {
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink-soft);
  }
}


/* =========================================================
   02h - HAUSTYP-SILHOUETTE IN DER PREISTABELLE
   Alle vier Grafiken teilen sich eine Grundlinie und sind
   zueinander massstaeblich. Gruen markiert nur die Rinne.
   ========================================================= */

.pr-haus {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.pr-haus span {
  min-width: 0;
}

.pr-haus-svg {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: block;
}

.pr-haus span {
  display: block;
}

@media (max-width: 720px) {
  .pr-haus {
    gap: 14px;
  }
  .pr-haus-svg {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
}


/* =========================================================
   03 - SUMMENZEILE (kleinster Auftrag)
   ========================================================= */

.pr-sum {
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--green-pale);
  border-left: 3px solid var(--green);
  border-radius: 0 4px 4px 0;
}

.pr-sum-label {
  font-family: var(--head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 6px;
}

.pr-sum-wert {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.pr-sum-text {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}


/* =========================================================
   04 - ZWEISPALTER: ENTHALTEN / NICHT ENTHALTEN
   Wird auch fuer Asbest-Nachweise und Vorbereitung genutzt.
   ========================================================= */

.pr-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 48px);
}

.pr-scope-card {
  background: var(--white);
  padding: 28px 28px 32px;
}

.pr-scope-card h3 {
  font-family: var(--head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 18px;
}

.pr-scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-scope-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-soft);
}

.pr-scope-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.pr-scope-card--in .pr-scope-list li::before {
  background: var(--green);
}

.pr-scope-card--out .pr-scope-list li::before {
  background: var(--ink-faint);
}

.pr-scope-list strong {
  font-weight: 600;
  color: var(--ink);
}

.pr-scope-text {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-soft);
  margin: 0;
}


/* =========================================================
   04b - EINFACHE PUNKTLISTE (Preislogik der Uebersicht)
   ========================================================= */

.pr-list {
  list-style: none;
  margin: clamp(28px, 3.5vw, 40px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.pr-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-soft);
}

.pr-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}


/* =========================================================
   05 - HINWEIS-BLOCK (neutral, ohne Signalfarbe)
   Kontrastiert immer gegen den Sektionshintergrund.
   ========================================================= */

.pr-notice {
  margin-top: 24px;
  padding: 24px 28px;
  background: var(--stone);
  border: 1px solid var(--line);
  border-radius: 4px;
}

.ls-section--stone .pr-notice {
  background: var(--white);
}

.pr-notice p {
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0;
}

.pr-notice p + p {
  margin-top: 14px;
}

.pr-notice strong {
  font-weight: 600;
  color: var(--ink);
}


/* =========================================================
   05b - LEADTEXT IM CTA-STRIP
   ========================================================= */

.cta-strip-lead {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 460px;
  margin-top: 16px;
}


/* =========================================================
   06 - FUSSBEREICH DER PREISSEITEN
   ========================================================= */

.pr-foot {
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.pr-foot-stand {
  font-family: var(--head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-bottom: 12px;
}

.pr-foot p {
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0;
}

.pr-foot p + p {
  margin-top: 10px;
}

.pr-foot a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s;
}

.pr-foot a:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}


/* =========================================================
   07 - PREISUEBERSICHT /preise/index.html
   Nutzt .pr-scope-grid als Container.
   ========================================================= */

.pr-index-card {
  background: var(--white);
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pr-index-card--soon {
  background: var(--stone);
}

.pr-index-card h3 {
  font-family: var(--head);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.pr-index-card p {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.pr-index-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  width: fit-content;
  margin-top: 4px;
  transition: color 0.2s, border-color 0.2s;
}

.pr-index-link:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

.pr-index-link svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

.pr-index-soon {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}


/* =========================================================
   08 - RESPONSIV
   ========================================================= */

@media (max-width: 720px) {
  .pr-scope-card,
  .pr-index-card {
    padding: 22px 20px 26px;
  }

  .pr-sum,
  .pr-notice {
    padding: 20px;
  }

  .pr-stufe-preis {
    font-size: 1.4rem;
  }
}


/* =========================================================
   09 - HINWEISTEXT AUF STONE-FLAECHE
   --ink-faint ist auf Stone zu schwach.
   ========================================================= */

.ls-section--stone .gf-preis-hinweis {
  color: var(--ink-soft);
}


/* =========================================================
   10 - HINWEISTEXT DIREKT UNTER EINER TABELLE
   Stand vorher zu dicht an der Tabellenkante und zu klein.
   ========================================================= */

.gf-preis-table-wrap.pr-table + .gf-preis-hinweis {
  margin-top: 28px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--ink-soft);
}


/* =========================================================
   11 - ANKERZAHL UNTER DER H1
   ========================================================= */

.pr-hero-anker {
  /* Die H1 bringt 40px Abstand nach unten mit, der Ankersatz
     selbst hatte keinen und stand deshalb direkt am Fliesstext
     darunter. Ein eigener Abstand nach unten setzt ihn ab.
     (Ein kleinerer margin-top waere wirkungslos: benachbarte
     Aussenabstaende verschmelzen, die 40px der H1 gewinnen.) */
  margin-top: 18px;
  margin-bottom: clamp(26px, 3.5vw, 34px);
  font-family: var(--head);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--green-mid);
  max-width: 620px;
}


/* =========================================================
   12 - PREIS-INDEX: LISTENEINTRAEGE
   ========================================================= */

.pr-listen {
  border-top: 1px solid var(--line);
}

.pr-listen-item {
  border-bottom: 1px solid var(--line);
  padding: clamp(28px, 3.5vw, 40px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "typ link" "titel link" "text link" "meta link";
  align-items: start;
  gap: 4px 40px;
}

.pr-listen-typ {
  grid-area: typ;
  font-family: var(--head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}

.pr-listen-item h2 {
  grid-area: titel;
  font-family: var(--head);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.pr-listen-item p {
  grid-area: text;
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 6px 0 0;
}

.pr-listen-meta {
  grid-area: meta;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 12px;
}

.pr-listen-item .pr-index-link {
  grid-area: link;
  align-self: center;
  margin-top: 0;
}

@media (max-width: 720px) {
  .pr-listen-item {
    grid-template-columns: 1fr;
    grid-template-areas: "typ" "titel" "text" "meta" "link";
  }
  .pr-listen-item .pr-index-link {
    margin-top: 18px;
  }
}


/* =========================================================
   13 - STUFENLABEL IN DER PREISTABELLE
   ========================================================= */

.pr-haus-stufe {
  display: block;
  font-family: var(--head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
  margin-bottom: 5px;
}


/* =========================================================
   14 - HINWEIS MIT SILHOUETTE (Hoehere Gebaeude)
   ========================================================= */

.pr-notice--haus {
  display: flex;
  align-items: center;
  gap: 22px;
}

.pr-notice--haus .pr-haus-svg {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

/* -----------------------------------------------------
   Unter 720px: Textumfluss statt Zweispalter.
   Als Flexbox belegt die Silhouette 58px plus 22px Abstand.
   Vom verfuegbaren Raum bleiben dem Text dann nur rund 220px,
   er lief ueber acht sehr kurze Zeilen, waehrend neben der
   Grafik Leerraum stehen blieb. Mit float laeuft der Text
   neben der Grafik und darunter ueber die volle Breite
   weiter. Kein Stapeln, keine schmale Textspalte.
   ----------------------------------------------------- */
@media (max-width: 720px) {
  .pr-notice--haus {
    display: block;
  }

  .pr-notice--haus .pr-haus-svg {
    float: left;
    width: 46px;
    height: 46px;
    flex: none;
    margin: 2px 14px 4px 0;
  }

  /* Verhindert, dass ein folgendes Element in den Umfluss rutscht */
  .pr-notice--haus::after {
    content: "";
    display: block;
    clear: both;
  }
}


/* =========================================================
   15 - NETTOWERT UNTER DEM BRUTTOWERT IN EINER ZELLE
   ========================================================= */

.pr-table .gf-preis-table td.num span {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  color: var(--ink-soft);
}


/* =========================================================
   16 - RECHENBEISPIELE
   ========================================================= */

.pr-beispiel {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(24px, 3vw, 30px) clamp(24px, 3vw, 32px);
  /* Der gruene 3px-Balken liegt links VOR dem Innenabstand.
     Ohne Ausgleich beginnt der Text links 27px von der Karten-
     kante, endet rechts aber schon nach 24px. Diese 3px machen
     den Block optisch einseitig. */
  padding-right: calc(clamp(24px, 3vw, 32px) + 3px);
  background: var(--white);
  border: 1px solid var(--line);
  /* Gruener Akzentbalken links: dasselbe Muster wie
     .ls-hint-box und .pr-sum, damit hervorgehobene
     Bloecke auf der Seite einheitlich aussehen. */
  border-left: 3px solid var(--green);
  border-radius: 0 4px 4px 0;
}

.pr-beispiel-kopf {
  font-family: var(--head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.pr-beispiel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.pr-beispiel-fall {
  min-width: 0;
}

.pr-beispiel-fall + .pr-beispiel-fall {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

@media (min-width: 561px) {
  .pr-beispiel-fall + .pr-beispiel-fall {
    padding-top: 0;
    border-top: none;
    padding-left: 28px;
    border-left: 1px solid var(--line);
  }
}

.pr-beispiel-titel {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 14px;
}

/* Positionen als eigene Zeile mit dem Betrag rechtsbuendig
   daneben, wie auf einer Rechnung. Die vorherige Fassung
   schrieb die Rechnung als Satz mit "plus" aus, das macht
   Betraege schwerer vergleichbar als eine echte Aufstellung. */
.pr-beispiel-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--ink-soft);
}

/* Bezeichnung darf schrumpfen, der Betrag nie. Ohne min-width:0
   erzwingt das laengste Wort die Spaltenbreite und die Zeile
   bricht unkontrolliert um. */
.pr-beispiel-zeile span:first-child {
  min-width: 0;
}

.pr-beispiel-zeile span:last-child {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}


/* Rangfolge wie auf einem Beleg: Positionen zurueckhaltend,
   Zwischensumme abgesetzt und in Ink, Endsumme fuehrend.
   Vorher sahen alle drei Ebenen nahezu gleich aus. */
.pr-beispiel-zeile--zwischen {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
}

.pr-beispiel-zeile--zwischen span:last-child {
  font-weight: 600;
}

.pr-beispiel-zeile--summe {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.pr-beispiel-zeile--summe span {
  font-family: var(--head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

@media (max-width: 640px) {
  /* Bei der laengsten Zeile ("Umsatzsteuer 19 Prozent") blieben
     nur 27px Restluft, der Betrag stand faktisch an der Kante.
     Eine Stufe kleiner schafft rund 60px Luft in jeder Zeile,
     ohne dass eine Zeile umbricht. */
  .pr-beispiel-zeile {
    font-size: 0.82rem;
  }
  .pr-beispiel-zeile--summe span {
    font-size: 0.95rem;
  }
}

/* Sehr schmale Geraete (320px): dort reicht der Platz fuer
   "Umsatzsteuer 19 Prozent" neben dem Betrag nicht mehr.
   Eine Stufe kleiner haelt alle Zeilen einzeilig, ohne die
   Betraege anzutasten. */
/* Sehr schmale Geraete: Innenabstand etwas zurueck, damit
   trotz kleinerer Karte noch echte Restluft neben dem
   laengsten Betrag bleibt. Bei 24px Padding blieb dort
   rechnerisch 1px, das ist keine belastbare Reserve. */
/* -----------------------------------------------------
   Mobil: gruener Akzentbalken nach oben statt nach links.
   Links kostet er 3px vor dem Innenabstand und macht die
   Raender ungleich, auf schmalen Schirmen faellt das auf.
   Oben liegt er ueber die volle Breite, die Seitenraender
   sind exakt gleich und koennen groesser ausfallen.
   ----------------------------------------------------- */
@media (max-width: 640px) {
  .pr-beispiel {
    border-left: 1px solid var(--line);
    border-top: 3px solid var(--green);
    border-radius: 4px;
    padding: 24px 28px 26px;
  }
}

@media (max-width: 360px) {
  .pr-beispiel {
    padding-left: 20px;
    padding-right: 20px;
  }
  .pr-beispiel-zeile {
    font-size: 0.8rem;
    gap: 12px;
  }
  .pr-beispiel-zeile--summe span {
    font-size: 0.92rem;
  }
}

.pr-beispiel-fuss {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-soft);
}


/* =========================================================
   17 - KLAERUNGSBLOECKE IM LEISTUNGSUMFANG
   ========================================================= */

.pr-klaerung {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.pr-klaerung-item {
  background: var(--white);
  padding: 26px 28px 30px;
}

.ls-section--stone .pr-klaerung-item {
  background: var(--white);
}

.pr-klaerung-item h3 {
  font-family: var(--head);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 12px;
}

.pr-klaerung-item p {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.72;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .pr-klaerung-item {
    padding: 22px 20px 26px;
  }
}


/* =========================================================
   18 - HERO-CTA-SPALTE MIT FESTER BREITE
   Verhindert, dass der lange Telefontext die Spalte
   aufblaeht (btn hat white-space: nowrap).
   ========================================================= */

/* Keine eigene Breitenregel fuer .ls-hero-2col__cta mehr.
   Die Komponente stammt aus styles-leistungen.css und
   funktioniert dort unveraendert auf anderen Leistungsseiten
   (siehe graffitientfernung.html). Der fruehere Ueberlauf kam
   nicht aus dieser Klasse, sondern aus Inhalt, der hier laenger
   war als auf den funktionierenden Referenzseiten: ein zu langer
   zweiter Button-Text und ein drittes Element in der CTA-Spalte,
   das im Original nicht existiert. Beides wurde im HTML behoben,
   nicht hier. Diese Seite nutzt die Komponente jetzt unveraendert. */


/* =========================================================
   19 - FUSSHINWEIS OHNE EIGENE OBERLINIE
   Auf dem Preis-Index schliesst bereits die Liste mit einer
   Haarlinie ab. Eine zweite Linie darunter wirkt wie ein
   Fehler.
   ========================================================= */

.pr-foot--plain {
  margin-top: 26px;
  padding-top: 0;
  border-top: none;
}


/* =========================================================
   AKTIVER PUNKT IM MOBILMENUE
   styles-gf.css definiert .nav-links a.active, fuer
   .mobile-nav a fehlt die Entsprechung. Gehoert bei der
   seitenweiten Navigationsumstellung nach styles-gf.css.
   ========================================================= */

.mobile-nav a.active {
  color: var(--green);
  font-weight: 500;
}


/* =========================================================
   20 - INLINE-LINKS IM FLIESSTEXT
   Gruene Faerbung allein reicht als Linkhinweis nicht.
   Unterstreichung ist dauerhaft sichtbar, nicht erst
   beim Hover.
   ========================================================= */

.pr-klaerung-item p a,
.pr-scope-text a,
.pr-notice p a,
.ls-faq-answer a {
  color: var(--green-mid);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(30, 107, 49, 0.5);
  transition: text-decoration-color 0.2s;
}

.pr-klaerung-item p a:hover,
.pr-scope-text a:hover,
.pr-notice p a:hover,
.ls-faq-answer a:hover {
  text-decoration-color: var(--green-mid);
}


/* =========================================================
   20 - BRUTTO/NETTO-KENNZEICHNUNG NUR MOBIL
   Auf dem Desktop stehen "Brutto je lfm" und "Netto je lfm"
   in den Spaltenkoepfen. In der mobilen Kartenansicht gibt
   es keine Spaltenkoepfe mehr, dort standen zwei nackte
   Zahlen nebeneinander ohne Hinweis, welche welche ist.
   ========================================================= */

.pr-mobil-einheit {
  display: none;
}

@media (max-width: 640px) {
  /* Hoehere Spezifitaet noetig: Abschnitt 15 setzt display:block
     auf JEDEN span in einer Preiszelle (dort fuer den Nettowert
     gedacht). Ohne diese Regel wird "brutto" in eine eigene
     Zeile gezwungen statt neben dem Betrag zu stehen. */
  .pr-table .gf-preis-table td.num span.pr-mobil-einheit {
    display: inline;
    margin-top: 0;
    margin-left: 5px;
    font-family: var(--body);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ink-soft);
    letter-spacing: 0;
  }
}


/* =========================================================
   21 - SILBENTRENNUNG DER H1
   styles-gf.css setzt in der Typografie-Basis
   "overflow-wrap: break-word" fuer alle Ueberschriften.
   Passt "Dachrinnenreinigung" nicht in die Zeile, wird es
   dadurch hart abgeschnitten, ohne Trennzeichen ("...reinigun
   / g?"). Mit hyphens:auto trennt der Browser stattdessen
   nach den Silbenregeln des deutschen Woerterbuchs
   (html lang="de") und setzt einen Trennstrich.
   Bewusst OHNE feste Breitengrenze: Silbentrennung greift
   nur, wenn ein Wort nicht in die Zeile passt. Auf dem
   Desktop steht die H1 in einer bis zu 680px breiten Spalte,
   dort passt das Wort und es wird nicht getrennt. Eine
   geratene Pixelgrenze waere hier die falsche Loesung, weil
   die tatsaechliche Wortbreite von der Hausschrift abhaengt.
   overflow-wrap bleibt als letzte Reserve bestehen, greift
   aber erst, wenn auch die Trennung nicht ausreicht.
   ========================================================= */

.page-hero .ls-hero-2col__head h1 {
  /* hyphens:manual = der Browser trennt NUR an der im Markup
     gesetzten Stelle (&shy; nach "Dachrinnen"), nicht nach
     Woerterbuch. Mit "auto" trennte er bei "Dachrinnenreini-
     gung", korrekt, aber unschoen. Die Wortfuge ist die
     bessere Stelle.
     Warum das auf dem Desktop nicht stoert, nachgemessen:
     "Was kostet die Dachrinnen-" braucht dort 728px, die
     Spalte bietet 680px. Die Trennstelle passt also gar nicht
     in Zeile 1 und wird nicht genutzt, die Zeile bricht am
     Leerzeichen. Mobil dagegen passt "Dachrinnen-" mit 192px
     in die 312px breite Zeile und greift. */
  hyphens: manual;
  -webkit-hyphens: manual;
}