/* Automatisch aus style.css herausgeloest (CSS-Diaet, 02.09.2026).
   REGEL: Stile, die nur EINE Seite braucht, wohnen in css/seiten/<seite>.css.
   Gemeinsames wohnt in style.css. Wer hier etwas aendert, prueft mit
   werkzeuge/vor-upload-pruefen.sh und zieht die Cache-Stempel hoch. */


/* ===== Seite /preise/ (pr-*) - neu 07.08.2026 ===== */
/* ============================================================
   MOCKUP /preise/  (pr-*)
   Nur Bestandstokens. Zahlen von Michi am 07.08.2026:
   Imagefilm 4.000-8.000 / Betreuung ab 1.500 / Werbeanzeigen ab
   2.000 + Budget / Website ab 1.800. Budgetempfehlung ~30 EUR am Tag.
   ============================================================ */

/* ---------- Hero ---------- */
.pr-hero { position: relative; padding: 132px 0 var(--space-md); background: var(--white); overflow: hidden; isolation: isolate; }
.pr-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 40% at 82% 4%, rgba(237,191,139,0.18) 0%, transparent 70%),
    radial-gradient(42% 38% at 6% 26%, rgba(16,100,102,0.05) 0%, transparent 72%);
}
.pr-hero h1 {
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.05; letter-spacing: -0.026em;
  margin: 0 0 22px; text-wrap: balance; max-width: 18ch;
}
.pr-hero h1 .pr-wort {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  letter-spacing: -0.012em; position: relative; padding-bottom: 2px;
}
.pr-hero h1 .pr-wort::after {
  content: ""; position: absolute; left: .06em; right: .06em; bottom: .02em;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--peach-dark), rgba(226,168,104,0.18));
}
.pr-antwort { font-size: 17.5px; line-height: 1.68; color: var(--ink-soft); max-width: 62ch; margin: 0 0 16px; }
.pr-antwort b { color: var(--ink); font-weight: 700; }
.pr-netto { font-size: 14.5px; color: var(--teal-muted); margin: 0 0 30px; }

/* ---------- Hero-Raster: Text links, der Beleg rechts ---------- */
.pr-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.pr-hero-media { margin: 0; }
/* overflow: visible, damit der Schlagschatten des Belegs nicht abgeschnitten wird */
.pr-hero-media svg { width: 100%; height: auto; display: block; overflow: visible; }

/* AUSNAHME IM SCHRIFTSYSTEM, bewusst gesetzt (Michi, 07.08.2026):
   Der Beleg im Preise-Hero benutzt als einziges Element der Website eine
   Schreibmaschinenschrift. Ohne sie sieht der Kassenbon nach Website-Karte
   aus statt nach Papier - genau das war der Befund. Nur Systemschriften,
   also kein zusaetzlicher Download. Nicht anderswo wiederverwenden. */
.pr-bon-mo { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }
/* Ein Bon liegt nie exakt gerade. Die Drehung ist statisch, also auch bei
   reduzierter Bewegung sichtbar - sie ist Gestaltung, keine Animation. */
.pr-beleg { transform: rotate(-1.4deg); }

@media (max-width: 940px) {
  /* width: 100% ist Pflicht, sonst verhindert margin-inline:auto das Aufziehen
     im Raster und das SVG faellt auf seine Standardbreite von 300px zurueck. */
  .pr-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .pr-hero-media { width: 100%; max-width: 420px; margin-inline: auto; }}

@media (prefers-reduced-motion: reduce) {
  .pr-hero-media svg, .pr-hero-media .pb-null { transition: none !important; }}


/* ---------- Preisliste ---------- */
.pr-liste-sek { background: var(--section-tint); padding: var(--space-md) 0; }
.pr-liste { list-style: none; margin: 34px 0 0; padding: 0; }
.pr-zeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 40px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.pr-zeile:last-child { border-bottom: 1px solid var(--border); }
.pr-zeile-kopf { min-width: 0; }
.pr-zeile h3 { font-size: 21px; line-height: 1.25; margin: 0 0 6px; color: var(--ink); font-weight: 700; }
.pr-zeile-was { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; max-width: 52ch; }
.pr-zeile-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 700; color: var(--teal-dark);
  text-decoration: none; border-bottom: 1.5px solid transparent;
  transition: border-color .2s ease, gap .2s ease;
}
.pr-zeile-link:hover { border-bottom-color: var(--teal-dark); gap: 11px; }
.pr-zeile-link svg { width: 14px; height: 14px; }

.pr-preis { text-align: right; white-space: nowrap; }
.pr-preis-zahl {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05; color: var(--teal-dark);
  font-variant-numeric: tabular-nums; letter-spacing: -0.012em;
}
.pr-preis-zahl .pr-ab { font-size: 0.5em; font-style: normal; color: var(--teal-muted); margin-right: 4px; letter-spacing: 0; }
.pr-preis-einheit { display: block; font-size: 12.5px; color: var(--teal-muted); margin-top: 6px; }
.pr-preis-plus {
  display: inline-block; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--peach-text); background: var(--peach-tint);
  border-radius: 999px; padding: 4px 10px;
}

/* ---------- Werbebudget: dunkel, der eine Warnhinweis der Seite ---------- */
.pr-budget { background: var(--ink); color: rgba(255,255,255,0.82); padding: var(--space-md) 0; }
.pr-budget h2 { color: var(--white); }
/* Text links, der Geldfluss rechts. Die Spaltenbreiten sind so gewaehlt,
   dass beide Saeulen aehnlich hoch werden (334 zu 391 px bei 1280). Vorher
   war die Grafik 290 px hoeher als der Text, dadurch stand links unten Luft. */
.prb-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; margin-top: 36px; }
.prb-text p { font-size: 16px; line-height: 1.66; margin: 0 0 14px; max-width: 54ch; }
.prb-text p:last-child { margin-bottom: 0; }
.prb-bild { margin: 0; }
/* overflow: visible, sonst schneidet der Rahmen den Schlagschatten ab */
.prb-bild svg { width: 100%; height: auto; display: block; overflow: visible; }
.prb-tx { font-family: var(--font); }
.prb-tz { font-family: var(--font-serif); }

/* ---------- Warum Ab-Preise: Kopf links, Zusagen rechts ---------- */
.pr-warum { background: var(--white); padding: var(--space-md) 0; }
.prw-raster { display: grid; grid-template-columns: .88fr 1.12fr; gap: 60px; align-items: start; }
.prw-kopf h2 { margin-bottom: 16px; }
.prw-kopf > p:last-child { font-size: 16.5px; line-height: 1.66; margin: 0; color: var(--ink-soft); }
.prw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.prw-liste li { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
                padding: 22px 0; border-top: 1px solid var(--border); }
.prw-liste li:first-child { padding-top: 0; border-top: 0; }
.prw-liste li:last-child { border-bottom: 1px solid var(--border); }
.prw-h { width: 30px; height: 30px; border-radius: 50%; background: var(--peach);
         display: grid; place-items: center; margin-top: 2px; }
.prw-h svg { width: 16px; height: 16px; color: var(--teal-dark); }
.prw-liste h3 { font-size: clamp(19px, 2vw, 23px); line-height: 1.28; margin: 0 0 6px; color: var(--ink); font-weight: 700; }
.prw-liste p { font-size: 15.5px; line-height: 1.62; margin: 0; color: var(--ink-soft); max-width: 62ch; }

@media (max-width: 900px) {
  .prb-grid { grid-template-columns: 1fr; gap: 30px; }
  .prw-raster { grid-template-columns: 1fr; gap: 26px; }}


@media (max-width: 640px) {
  .pr-hero { padding-top: 104px; }
  .pr-hero h1 { max-width: none; }
  .pr-antwort, .pr-netto { text-align: center; margin-left: auto; margin-right: auto; }
  .pr-zeile { grid-template-columns: 1fr; gap: 4px; padding: 22px 0; }
  .pr-preis { text-align: left; margin-top: 4px; }
  .pr-zeile-was { max-width: none; }}