/* ===== Preise (Prefix: pr-) =====
   Loest den alten Zustand ab: vier gleich grosse Preiskarten mit je sechs
   Haken, darunter eine Groessentabelle und fuenf FAQ. Vier Karten
   nebeneinander beantworten die Frage "was kostet das denn nun" nicht,
   sie stellen sie viermal.

   Die Seite haengt jetzt an einer einzigen Zahl: 75 Euro je Stunde, netto.
   Der dokumentierte Tagessatz von 600 Euro IST diese Zahl mal acht
   (CLAUDE.md, Session 2026-08-26 (3): "Tinos Vorgabe Untergrenze 75 EUR je
   Stunde, daraus site-weit ab 600 EUR je Tag"). Jeder Modulpreis auf der
   Seite ist ein exaktes Vielfaches von 75, damit der Leser nachrechnen
   kann. Wer einen Modulpreis aendert, haelt das Vielfache ein.

   Drei Kaufarten, drei Sektionen, in dieser Reihenfolge:
     einzelne Aufgabe (Modul)  ->  laufende Begleitung  ->  grosses Projekt

   Prefix: die Seite trug bis hierher "price-" und "faq-" ohne Seitenkuerzel
   und war damit die einzige Ausnahme von der Praefix-Regel. CLAUDE.md sagt
   dazu "beim naechsten Anfassen der Seite umbenennen". Erledigt.

   Sprache: Hero-Muster der Startseite seit Phase 3 (warmes Papier, grosse
   Display-Type, ein Wort auf der gelben Marke, Newsreader als zweite
   Zeile, Kennzahlen im 1px-Raster). Rhythmus hell -> dunkel -> hell. */

/* --- Hero ----------------------------------------------------------- */
.pr-hero { background: var(--bg-light); padding: 3.75rem 0 0; }
.pr-brotkrumen { font-size: .8rem; color: var(--subtle); margin-bottom: 2.25rem; }
.pr-brotkrumen a { color: var(--primary-dark); }

/* Masse wie .hk-eyebrow in style.css: .75rem und ein 2px-Strich. Diese
   Seite lief auf .72rem und 1px und war damit die einzige, deren
   Sektionslabel eine Stufe kleiner und duenner stand als auf allen
   anderen. Layout bleibt eigen, die Marke braucht kein margin-bottom,
   weil .pr-h1 den Abstand traegt. */
.pr-eyebrow { display: flex; align-items: center; gap: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary-dark); }
.pr-eyebrow::before { content: ""; width: 32px; height: 2px; background: currentColor; flex: none; }

/* 600 statt 800: Bricolage laeuft bei diesem Grad sonst zu. Dieselbe
   Einstellung wie .gbu-h1, nur eine Stufe groesser, weil die Zeile
   kurz ist. */
.pr-h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2.3rem, 6vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    color: var(--text);
    margin: 1.5rem 0 0;
    max-width: 14ch;
    text-wrap: balance;
}
/* Gelbe Marke wie auf der Startseite. --accent-bright ist Flaechenfarbe,
   --text darauf traegt 12,06:1. Der leichte Dreh nimmt dem Rechteck das
   Schablonenhafte. nowrap, damit "75 €" nie zwischen Zahl und Zeichen
   bricht. */
.pr-marke { display: inline-block; background: var(--accent-bright); color: var(--text); padding: 0 .09em .04em; transform: rotate(-1.6deg); white-space: nowrap; }
.pr-h1-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.3rem, 3vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--primary);
    margin: .7rem 0 0;
    max-width: 26ch;
}

.pr-hero-unten { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-top: 2.75rem; }
.pr-hero-sub { color: var(--body); font-size: 1rem; line-height: 1.6; margin: 0 0 1.5rem; max-width: 54ch; }
.pr-hero-btns { display: flex; flex-wrap: wrap; gap: .75rem; }

.pr-tldr { background: var(--white); border-left: 4px solid var(--primary); border-radius: 0 3px 3px 0; padding: 1.2rem 1.4rem; }
.pr-tldr-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: .45rem; }
.pr-tldr p { margin: 0; color: var(--text); font-size: .95rem; line-height: 1.6; }

/* Kennzahlen: 1px-Raster auf --border, die Zellen tragen die Papierfarbe.
   Dasselbe Muster wie .hk-index-kennzahlen und .gbu-kennzahlen. */
.pr-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); margin-top: 3.5rem; }
.pr-kennzahl { background: var(--bg-light); padding: 1.5rem 1.2rem 1.8rem 0; }
.pr-kennzahl:not(:first-child) { padding-left: 1.2rem; }
.pr-kennzahl-wert { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.5vw, 2.15rem); letter-spacing: -.03em; line-height: 1; color: var(--text); }
.pr-kennzahl-txt { font-size: .85rem; color: var(--subtle); margin-top: .4rem; }

/* --- Knoepfe: gleiche Masse wie auf der Startseite --- */
.pr-btn { display: inline-block; background: var(--primary-dark); color: var(--white); padding: 16px 26px; border-radius: 50px; font-size: 15px; font-weight: 700; text-decoration: none; border: 1px solid var(--primary-dark); transition: background .15s ease; }
.pr-btn:hover { background: var(--primary); border-color: var(--primary); }
.pr-btn--umriss { background: transparent; color: var(--text); border-color: rgba(16, 22, 20, .5); }
.pr-btn--umriss:hover { background: var(--text); border-color: var(--text); color: var(--bg-light); }

/* --- Abschnitte ----------------------------------------------------- */
.pr-abschnitt { padding: 3.5rem 0; }
.pr-abschnitt--papier { background: var(--bg-light); }
.pr-abschnitt h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; color: var(--text); margin: 0 0 1rem; max-width: 820px; }
.pr-abschnitt h3 { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 1.75rem 0 .55rem; }
.pr-abschnitt p { color: var(--body); line-height: 1.6; margin: 0 0 1rem; max-width: 60ch; }
.pr-abschnitt a { color: var(--primary-dark); }
.pr-lead { font-size: 1.05rem; }

/* --- Zwei Spalten mit Trennlinie: drin / nicht drin --- */
.pr-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; margin-top: 2rem; border-top: 1px solid var(--border); }
.pr-spalte { padding: 1.4rem 1.5rem 1.4rem 0; border-right: 1px solid var(--border); }
.pr-spalte:last-child { border-right: none; }
.pr-spalte + .pr-spalte { padding-left: 1.5rem; }
.pr-spalte h3 { margin: 0 0 .7rem; font-size: 1rem; }
.pr-spalte ul { list-style: none; padding: 0; margin: 0; }
.pr-spalte li { position: relative; padding-left: 1.15rem; margin-bottom: .45rem; color: var(--body); font-size: .93rem; line-height: 1.55; }
.pr-spalte li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.pr-spalte--ohne li::before { background: none; border-radius: 0; top: .52em; width: 8px; height: 1px; background: var(--muted); }

/* --- HR-Module: Preisliste im 1px-Raster ---
   Bewusst kein Kartenraster. Das Design-System fuehrt "schon wieder ein
   Karten-Raster" als Anti-Pattern fuer Aufzaehlungs-Sektionen, und eine
   Preisliste liest sich als Liste besser als als Kachelwand. */
.pr-module { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 2rem 0 1.25rem; }
.pr-modul { background: var(--white); padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; transition: background .15s ease; }
.pr-modul:hover { background: var(--bg-teal); }
.pr-modul-num { display: block; font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pr-modul h3 { font-size: 1.02rem; font-weight: 700; color: var(--text); margin: .55rem 0 0; }
.pr-modul p { font-size: .92rem; color: var(--body); line-height: 1.55; margin: .5rem 0 0; max-width: none; }
.pr-modul-mehr { margin-top: auto; padding-top: .9rem; font-size: .85rem; font-weight: 600; }
.pr-modul-mehr a::after { content: " \2192"; }
.pr-modul-mehr a:hover { text-decoration: underline; }

.pr-hinweis { font-size: .9rem; color: var(--subtle); max-width: 66ch; }
/* Auf dem dunklen Band traegt --subtle nicht, dort 72 % Weiss. */
.pr-abschnitt--dunkel .pr-hinweis--dunkel { color: rgba(255, 255, 255, .72); }

/* --- Dunkler Abschnitt: laufende Mandate --- */
.pr-abschnitt--dunkel { background: var(--dark); }
.pr-abschnitt--dunkel h2, .pr-abschnitt--dunkel h3 { color: var(--white); }
.pr-abschnitt--dunkel p { color: var(--on-dark); }
.pr-abschnitt--dunkel strong { color: var(--white); }
.pr-abschnitt--dunkel a { color: var(--primary-glow); }
.pr-gross { font-family: var(--font-serif); font-style: italic; font-weight: 300; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45; color: var(--white); max-width: 32ch; margin: 0 0 1.5rem; }

.pr-laufend { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 2rem 0 1.5rem; }
.pr-laufend-karte { border: 1px solid rgba(255, 255, 255, .18); border-radius: 3px; background: rgba(255, 255, 255, .06); padding: 1.5rem 1.6rem; display: flex; flex-direction: column; }
.pr-laufend-karte--haupt { border-color: var(--primary-glow); }
.pr-laufend-label { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary-glow); }
.pr-laufend-karte h3 { margin: .55rem 0 .1rem; font-size: 1.15rem; }
.pr-laufend-wert { font-family: var(--font-display); font-weight: 600; font-size: 2rem; letter-spacing: -.03em; line-height: 1.1; color: var(--white); margin-top: .7rem; }
.pr-laufend-einheit { font-size: .85rem; color: rgba(255, 255, 255, .72); margin-top: .2rem; }
.pr-laufend-karte ul { list-style: none; padding: 0; margin: 1.1rem 0 0; }
.pr-laufend-karte li { position: relative; padding-left: 1.1rem; margin-bottom: .45rem; color: var(--on-dark); font-size: .92rem; line-height: 1.55; }
.pr-laufend-karte li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.pr-laufend-karte--haupt li::before { background: var(--primary-glow); }
.pr-laufend-fuss { font-size: .85rem; margin: 0; padding-top: .9rem; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .72); }

/* --- Projekte mit Festpreis: Zeilenliste, keine Karten --- */
.pr-projekte { list-style: none; padding: 0; margin: 2rem 0 1.25rem; border-top: 1px solid var(--border); }
.pr-projekt { padding: 1.35rem 0; border-bottom: 1px solid var(--border); }
.pr-projekt h3 { margin: 0 0 .35rem; font-size: 1.08rem; }
/* Die globale Regel p a, li a trifft auch ein <a> in dieser Ueberschrift,
   weil sie in einem <li> steht. Bei einer Ueberschrift markiert die
   Groesse die Klickbarkeit, der Strich waere dort Laerm. */
.pr-projekt h3 a { text-decoration: none; }
.pr-projekt h3 a:hover { text-decoration: underline; }
.pr-projekt p { margin: 0; font-size: .93rem; max-width: 62ch; }

/* --- FAQ: natives details, wie auf der Startseite --- */
.pr-faq { margin-top: 2rem; border-top: 1px solid var(--border); }
.pr-faq-item { border-bottom: 1px solid var(--border); }
.pr-faq-item summary { list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative; font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.pr-faq-item summary::-webkit-details-marker { display: none; }
.pr-faq-item summary::after { content: "+"; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 400; color: var(--primary); line-height: 1; }
.pr-faq-item[open] summary::after { content: "\2013"; }
.pr-faq-item p { margin: 0 0 1.15rem; font-size: .97rem; max-width: 66ch; }

/* --- Mobil ---------------------------------------------------------- */
@media (max-width: 900px) {
    .pr-hero-unten { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
    .pr-spalte { padding: 1.3rem 0; border-right: none; border-bottom: 1px solid var(--border); }
    .pr-spalte + .pr-spalte { padding-left: 0; }
    .pr-spalte:last-child { border-bottom: none; }
}

@media (max-width: 640px) {
    .pr-hero { padding-top: 2.5rem; }
    .pr-abschnitt { padding: 2.5rem 0; }
    /* Drei Zellen tragen bis hier, darunter wird gestapelt. Ein Raster
       aus zwei Spalten liesse die dritte allein in der zweiten Reihe. */
    .pr-kennzahlen { grid-template-columns: minmax(0, 1fr); }
    .pr-kennzahl { padding: 1.1rem 0 1.2rem; }
    .pr-kennzahl:not(:first-child) { padding-left: 0; }

    .pr-projekt { grid-template-columns: minmax(0, 1fr); }
    }