/* Gruppe E: Preisseite. Präfix .pe-, Seite: body.seite-preise
   Kopf: Einstieg 190 als Zählwerk mit Maßlinie, Preiszettel flach auf dem Tisch (Papier, Perforation, Stiftkreis).
   Preisliste: Leistungsverzeichnis auf Papier, ganze Zeile klickbar, Preise rechtsbündig in Tabellenziffern. */

/* Papiergrau auf dieser Seite dunkler: Text am abgedunkelten Papierrand ≥ 4,5:1 (#55534D auf #D7D5CE 5,2:1) */
.seite-preise :is(.pe-zettel, .pe-blatt, .pe-beleg) { --druck-leise: #55534D; }

/* Preis-Satz (Vorlage für alle Seiten): Figtree, Tabellenziffern, nie umbrechen; „auf Anfrage“ leise.
   Lokale Absicherung, bis das Fundament .preis global setzt. */
.seite-preise .preis { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.seite-preise .preis--anfrage { font-family: var(--sans); font-weight: 400; color: var(--druck-leise); }

/* ---------- Seitenkopf ---------- */
.pe-kopf .seitenkopf__raster { align-items: start; }
.pe-einstieg { margin-top: clamp(28px, 3.4vw, 40px); }
.pe-einstieg__titel { margin: 0; font-size: 1rem; font-weight: 600; color: var(--weiss); }
.pe-einstieg__messung { width: fit-content; margin-top: 10px; }
.pe-einstieg__preis { display: flex; align-items: flex-start; margin: 0; }
.pe-einstieg__zahl { font-size: clamp(4.75rem, 2.6rem + 7.4vw, 9rem); }
.pe-einstieg__euro { margin: 0.5em 0 0 0.12em; font-family: var(--titel); font-stretch: 104%; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1; color: var(--grau); }
.pe-einstieg__mass { margin-top: 2px; }
.pe-einstieg__netto { margin: 8px 0 0; font-size: 1rem; color: var(--grau); }
.pe-kopf .knoepfe { margin-top: clamp(28px, 3.4vw, 40px); }
.pe-kopf .seitenkopf__fakten { margin-top: 28px; flex-direction: column; gap: var(--abstand-2); }
.pe-kopf .seitenkopf__fakten li + li::before { content: none; }

/* Preiszettel liegt flach auf der Bühne, leicht gedreht wie hingelegt */
.pe-tisch { justify-self: end; width: 100%; max-width: 440px; }
/* Oberkante auf Höhe der H1, Drehung um die rechte Oberkante: kein Überstand über den Satzspiegel */
/* ab 1001 px füllt der Zettel die rechte Spalte der 7/5-Teilung: linke Kante auf der Spaltenlinie */
@media (min-width: 1001px) { .pe-tisch { max-width: none; margin-top: 0; transform: rotate(0.8deg); transform-origin: 100% 0; } }
.pe-zettel { padding-top: 46px; }
.pe-zettel .preiszettel__name { font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.012em; }
.pe-zettel .zeilen dd { font-family: var(--sans); font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; }
.pe-zettel .summe strong { font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.015em; }
.pe-zettel .pe-summe--kreis strong { color: var(--druck); border-bottom: 0; padding: 0 2px; margin-right: 16px; }
.pe-zettel .pe-summe--kreis .stiftkreis svg { left: -18px; top: -12px; width: calc(100% + 36px); height: calc(100% + 24px); }

/* ---------- Preisliste: Leistungsverzeichnis auf Papier ---------- */
.pe-blatt { --pe-pos: 3.25rem; --pe-auf: 20px; margin-top: clamp(32px, 5vw, 56px); padding: 52px clamp(18px, 4vw, 56px) clamp(24px, 3.6vw, 44px); }
.pe-blatt__kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 2px solid var(--druck); }
.pe-blatt__zeichen { width: 22px; height: auto; aspect-ratio: 785 / 850; color: var(--druck); }
.pe-blatt__titel { margin: 0; font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem); letter-spacing: -0.012em; color: var(--druck); }
.pe-blatt__stand { margin: 0; font-size: 1rem; color: var(--druck-leise); text-align: right; }

/* Spalten: Pos. | Leistung | Preis netto | Auf */
.pe-spalten { display: grid; grid-template-columns: var(--pe-pos) minmax(0, 1fr) auto; gap: 0 16px; margin: 0; padding: 14px calc(var(--pe-auf) + 16px) 10px 0; font-size: max(1rem, 16px); color: var(--druck-leise); border-bottom: 1px solid var(--papier-linie-stark); }
.pe-spalten span:nth-child(3) { text-align: right; }

.pe-blatt .preisliste { margin: 0; border-top: 0; }
.pe-blatt .preisliste > li { border-bottom: 1px solid var(--papier-linie-stark); }
.pe-blatt .preisliste summary {
  grid-template-columns: var(--pe-pos) auto minmax(16px, 1fr) auto var(--pe-auf); gap: 0 16px; align-items: baseline;
  min-height: 64px; padding: 20px 0; margin: 0;
  transition: background-color var(--d-kurz) var(--kurve), box-shadow var(--d-kurz) var(--kurve);
}
.pe-pos { font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; color: var(--druck-leise); }
.pe-blatt .preisliste__name { color: var(--druck); }
.pe-blatt .preisliste__punkte { border-bottom: 1px dotted var(--papier-linie-stark); transform: translateY(-5px); }
.pe-blatt .preisliste__preis { font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em; color: var(--druck); white-space: nowrap; text-align: right; }
.pe-blatt .preisliste__preis--frage { font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--druck-leise); }
.pe-blatt .pe-preis--check { color: var(--tinte); padding-bottom: 1px; border-bottom: 3px double var(--tinte); }
.pe-blatt .preisliste__auf { align-self: center; }
.pe-blatt .preisliste__auf::before, .pe-blatt .preisliste__auf::after { background: var(--druck); }
.pe-blatt .preisliste summary:focus-visible { outline: 2px solid var(--tinte); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .pe-blatt .preisliste summary:hover { background-color: rgb(22 22 26 / 0.045); box-shadow: -12px 0 0 rgb(22 22 26 / 0.045), 12px 0 0 rgb(22 22 26 / 0.045); }
  .pe-blatt .preisliste summary:hover .preisliste__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: var(--papier-linie-stark); }
}

/* Aufgeklappt: Inhalt eingerückt unter der Leistung */
.pe-blatt .preisliste__mehr { padding: 0 calc(var(--pe-auf) + 16px) 28px calc(var(--pe-pos) + 16px); gap: 14px 48px; color: var(--druck-leise); }
.pe-blatt .preisliste__mehr p { max-width: 62ch; }
.pe-blatt .preisliste__mehr b { color: var(--druck); }
.pe-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 32px; }

/* Unterpositionen: Name, Leitpunkte, Preis rechtsbündig */
.pe-unter { grid-column: 1 / -1; margin: 0 0 4px; max-width: 34rem; border-top: 1px solid var(--papier-linie); }
.pe-unter > div { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--papier-linie); }
.pe-unter dt { flex: 0 1 auto; min-width: 0; color: var(--druck); }
.pe-unter .pe-pos { display: inline-block; min-width: 2.5em; margin-right: 10px; }
.pe-unter dd { flex: 1 0 auto; display: flex; align-items: baseline; gap: 12px; margin: 0; justify-content: flex-end; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--druck); }
.pe-unter dd::before { content: ""; flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--papier-linie-stark); transform: translateY(-4px); }

/* Preisregel Google Ads: Regel als eigener Absatz, Rechenbeispiel als kleine Rechnung auf dem Blatt */
.pe-blatt .pe-regel { grid-column: 1 / -1; max-width: 64ch; color: var(--druck); font-size: 1.0625rem; line-height: 1.6; }
.pe-rechnung { grid-column: 1 / -1; margin: 4px 0 6px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.pe-rechnung__zahlen { border-collapse: collapse; font-family: var(--mono); font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums; color: var(--druck); border-top: 1px solid var(--papier-linie-stark); border-bottom: 2px solid var(--druck); }
.pe-rechnung__zahlen td { padding: 9px 0 9px 18px; text-align: right; white-space: nowrap; border-bottom: 1px dotted var(--papier-linie-stark); }
.pe-rechnung__zahlen td:first-child { padding-left: 0; }
.pe-rechnung__zahlen td:nth-child(2) { color: var(--druck-leise); }
.pe-rechnung__zahlen s { color: var(--druck-leise); text-decoration-thickness: 1.5px; margin-right: 6px; }
.pe-rechnung__zahlen .doppelt { color: var(--tinte); }
.pe-rechnung + p { grid-column: 1 / -1; }
.pe-rechnung figcaption { max-width: 44ch; padding-top: 8px; color: var(--druck-leise); }

.pe-blatt .preis-hinweis { margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--druck); max-width: none; color: var(--druck-leise); font-size: 1rem; }

/* ---------- Beleg als Notizzettel ---------- */
.pe-beleg { max-width: 60ch; }

/* ---------- Arbeitsprobe: Werte als Messreihe ---------- */
.pe-probe .h2 { max-width: 22ch; overflow-wrap: normal; hyphens: manual; }
.pe-werte { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: clamp(36px, 4.4vw, 56px) 0 0; border-top: 1px solid var(--linie-stark); }
.pe-werte > div { padding: 18px 20px 18px 0; }
.pe-werte > div + div { padding-left: 20px; border-left: 1px solid var(--linie); }
.pe-werte dt { font-size: 1rem; color: var(--grau); }
.pe-werte dd { margin: 8px 0 0; font-family: var(--titel); font-stretch: 104%; font-weight: 650; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--weiss); }
.pe-von { white-space: nowrap; font-family: var(--sans); font-stretch: 100%; font-weight: 400; font-size: 1rem; letter-spacing: 0; color: var(--grau); }
.pe-werte__stand { margin-top: 16px; font-size: 1rem; color: var(--grau-2); }

/* ---------- Schlussband ---------- */
.pe-band__knopf { margin-top: 32px; }

/* ---------- Breiten ---------- */
@media (max-width: 1000px) {
  .pe-tisch { justify-self: start; }
  .pe-werte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-werte > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .pe-werte > div:nth-child(n+4) { border-top: 1px solid var(--linie); }
  .pe-rechnung { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pe-blatt { --pe-pos: 2.25rem; padding: 46px 16px 22px; }
  .pe-blatt__kopf { grid-template-columns: auto 1fr; }
  .pe-blatt__stand { grid-column: 1 / -1; text-align: left; }
  .pe-spalten { gap: 0 10px; padding-right: calc(var(--pe-auf) + 10px); }
  .pe-blatt .preisliste summary {
    grid-template-columns: var(--pe-pos) minmax(0, 1fr) auto var(--pe-auf);
    grid-template-areas: "pos name name auf" ". punkte preis auf";
    gap: 6px 10px; padding: 16px 0;
  }
  .pe-blatt .pe-pos { grid-area: pos; }
  .pe-blatt .preisliste__name { grid-area: name; }
  .pe-blatt .preisliste__punkte { grid-area: punkte; }
  .pe-blatt .preisliste__preis { grid-area: preis; }
  .pe-blatt .preisliste__auf { grid-area: auf; }
  .pe-blatt .preisliste__mehr { grid-template-columns: minmax(0, 1fr); padding: 0 0 24px; }
  .pe-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-werte > div:nth-child(n) { padding-left: 0; border-left: 0; border-top: 1px solid var(--linie); }
  .pe-werte > div:nth-child(1), .pe-werte > div:nth-child(2) { border-top: 0; }
  .pe-werte > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linie); }
  .pe-werte__stand, .pe-werte dt, .pe-rechnung figcaption { font-size: 1rem; }
  .pe-werte dt { hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 380px) {
  .pe-rechnung__zahlen td { padding-left: 10px; }
  .pe-rechnung__zahlen s { display: block; margin: 0 0 2px; }
}

/* Handy: hinweisnahe Texte mindestens 16 px */
@media (max-width: 720px) {
  .pe-zettel .preiszettel__fuss, .pe-kopf .seitenkopf__fakten, .pe-blatt .preis-hinweis { font-size: 1rem; }
}
/* Knopfpaare am Handy immer gestapelt: Knopf oben, Pfeil-Link darunter, linksbündig */
@media (max-width: 480px) {
  .seite-preise .knoepfe { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* K4: keine Worttrennung in Überschriften, Etiketten und Karten; Werte der Steckbriefe bleiben ganz */
body main :is(h1, h2, h3, .h2, .h3, dt, dd, th, td, summary, strong, b) { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
@media (max-width: 380px) {
  .pe-werte dt { font-size: 1rem; letter-spacing: 0; }
  .pe-werte > div { padding-right: 12px; }
  .pe-werte > div:nth-child(even) { padding-left: 12px; }
}