/* ==========================================================================
   /preise: Version B ("pn-" = Preise neu)
   --------------------------------------------------------------------------
   Eigene Datei, wie alle Seiten-Styles: wird in der Route NACH den globalen
   Stylesheets geladen. Nutzt die Tokens und Utilities des Exports
   (--fg-1, .section, .container, .h-display, .price-table, .note, .faq, …)
   und ergänzt nur, was die drei Stufen, die Slot-Erklärung und die
   Leistungsmatrix brauchen.

   Version A baute ihre Zwischenüberschriften per Inline-Style im JSX
   (fontFamily, fontSize, marginTop). Deshalb hatte die Seite drei
   verschiedene h3-Behandlungen und keinen Rhythmus. Hier steht jede
   Wiederholung genau einmal.

   Responsive-Overrides für Mobile und Tablet liegen wie überall in
   assets/responsive.css, hier stehen nur die Breakpoints, die direkt an
   diesen Bausteinen hängen.
   ========================================================================== */

/* ---------- Wiederkehrender Sektionskopf ---------- */

.pn-head { margin-bottom: 56px; }
.pn-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.pn-final-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* ---------- Die Plattformgebuehr ----------
   Ein Panel, keine Kartenreihe. Drei gleich hohe Karten nebeneinander mit
   je eigenem Preisfeld lesen sich als Tarifwahl, und chester hat keine
   Tarife: es gibt genau einen laufenden Posten. Ausserdem sassen die
   Trennlinien in den drei Karten auf unterschiedlicher Hoehe, weil die
   Metazeilen unterschiedlich lang sind. Beides faellt mit dem Panel weg. */

.pn-gebuehr { border: 1px solid hsl(var(--h-primary) / 0.35); border-radius: 24px;
  background: var(--paper); overflow: hidden;
  box-shadow: 0 18px 44px -30px hsl(var(--h-primary) / 0.5); }

.pn-gebuehr-kopf { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; padding: 34px 36px 30px;
  border-bottom: 1px solid var(--border-1); background: var(--accent); }

.pn-claim-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.pn-claim { font-family: var(--font-serif); font-weight: 700; font-size: 34px; line-height: 1.15;
  letter-spacing: -0.025em; color: var(--primary); max-width: 20ch; }
.pn-gebuehr-meta { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.pn-gebuehr-cta { flex: 0 0 auto; }

.pn-gebuehr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 34px; padding: 32px 36px 34px; }
.pn-gebuehr-item { display: flex; gap: 13px; align-items: flex-start; min-width: 0; }
.pn-gebuehr-ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary); }
.pn-gebuehr-item h4 { margin: 0; font-family: var(--font-sans); font-size: 15.5px; font-weight: 700; color: var(--fg-1); }
.pn-gebuehr-item p { margin: 5px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

.pn-note { max-width: 900px; margin-left: auto; margin-right: auto; margin-top: 32px; }

/* ---------- Betriebsmodell: gehostet oder On-Premise ----------
   Zwei gleichwertige Karten, keine hervorgehoben. On-Premise stand vorher
   nur in einer Matrixzeile und im Nebensatz einer FAQ-Antwort; fuer eine IT
   mit eigenem Rechenzentrum haengt daran aber oft die Entscheidung. */

.pn-betrieb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pn-betrieb-karte { padding: 32px; border-radius: 22px; background: var(--paper);
  border: 1px solid var(--border-1); }
.pn-betrieb-ic { width: 44px; height: 44px; border-radius: 13px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent);
  color: var(--primary); margin-bottom: 18px; }
.pn-betrieb-karte h3 { font-family: var(--font-serif); font-weight: 700; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 10px; color: var(--fg-1); }
.pn-betrieb-karte p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.pn-betrieb-chips { list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--border-1); display: grid; gap: 10px; }
.pn-betrieb-chips li { display: flex; gap: 9px; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--fg-2); }
.pn-betrieb-chips li svg { flex: 0 0 auto; color: hsl(150 60% 32%); }

/* Die drei Paketgroessen als Zeilen in der zweiten Karte, damit sie neben
   die BYOK-Karte passen statt als dreispaltige Tabelle darunter zu stehen. */
.pn-pakete { list-style: none; margin: 20px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--border-1); display: grid; gap: 12px; }
.pn-pakete li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.pn-paket-t { display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-family: var(--font-serif); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.pn-paket-t span { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--fg-3); }
.pn-paket-n { flex: 0 0 auto; font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--primary); white-space: nowrap; }

/* ---------- Die drei Wege in die Einfuehrung ----------
   Bewusst gleichwertig: kein hervorgehobener Kasten, kein Preisfeld, kein
   eigener CTA. Sonst liest sich die Reihe wieder als Tarifwahl, und die
   Einfuehrung ist keine Leistung, die ueber uns laufen muss. */

.pn-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pn-weg { padding: 28px; border-radius: 20px; background: var(--paper); border: 1px solid var(--border-1); }
.pn-weg-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--accent); color: var(--primary); margin-bottom: 16px; }
.pn-weg h3 { font-family: var(--font-serif); font-weight: 700; font-size: 21px; letter-spacing: -0.015em;
  line-height: 1.2; margin: 0 0 9px; color: var(--fg-1); }
.pn-weg p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* ---------- Vertrauens-Band ---------- */

.pn-band { background: var(--page-bg-surface); border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1); padding: 34px 0; }
.pn-band-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 32px; }
.pn-band-item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.pn-band-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--paper);
  border: 1px solid var(--border-1); color: var(--primary); }
.pn-band-item h4 { margin: 0; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--fg-1); }
.pn-band-item p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-2); }

/* ---------- Slot-Mechanik: drei Stufen, drei Groessen ---------- */

.pn-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.pn-stufe { display: flex; flex-direction: column; padding: 28px 26px;
  border-radius: 22px; border: 1px solid var(--border-1); background: var(--paper); }
.pn-stufe-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.pn-stufe-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary); }
.pn-stufe-claim { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); white-space: nowrap; }
.pn-stufe h3 { font-family: var(--font-serif); font-weight: 700; font-size: 23px; line-height: 1.18;
  letter-spacing: -0.02em; margin: 0 0 10px; color: var(--fg-1); }
.pn-stufe-was { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.pn-stufe-basis { margin: 0 0 12px; padding-top: 16px; border-top: 1px solid var(--border-1);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3); }

/* Die drei Groessen als Zeilen: Buchstabe, Spanne, Slots. */
.pn-groessen { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 8px; }
.pn-groessen li { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; }
.pn-g { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px;
  border-radius: 7px; background: var(--page-bg-surface); border: 1px solid var(--border-1);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--fg-2); }
.pn-g-spanne { font-size: 13.5px; line-height: 1.3; color: var(--fg-2); }
.pn-g-slots { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--fg-1); white-space: nowrap; }

/* Legende unter den drei Stufen: eine Zeile, kein Kasten. Als .note nahm
   sie drei Zeilen in einem violetten Block und trennte die Stufen vom
   Rechenbeispiel darunter staerker, als der Inhalt es hergibt. */
.pn-legende { align-items: flex-start; margin-top: 18px; }
.pn-legende svg { margin-top: 4px; }
.pn-legende strong { color: var(--fg-1); }

/* ---------- Rechenbeispiel ---------- */

.pn-rechnung { margin-top: 28px; border: 1px solid var(--border-1); border-radius: 22px;
  background: var(--paper); overflow: hidden; }
.pn-rechnung-kopf { display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap; padding: 28px 30px; background: var(--accent); border-bottom: 1px solid var(--border-1); }
.pn-rechnung-kopf h3 { font-family: var(--font-serif); font-weight: 700; font-size: 24px;
  letter-spacing: -0.02em; line-height: 1.18; margin: 0 0 8px; color: var(--fg-1); }
.pn-rechnung-kopf p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--fg-2); max-width: 54ch; }
.pn-rechnung-summe { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; }
.pn-rechnung-zahl { font-family: var(--font-serif); font-weight: 700; font-size: 52px; line-height: 1;
  letter-spacing: -0.03em; color: var(--primary); }
.pn-rechnung-lbl { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }

.pn-posten { list-style: none; margin: 0; padding: 0; }
.pn-posten li { display: grid; grid-template-columns: 1fr 210px 60px; gap: 20px; align-items: center;
  padding: 15px 30px; border-bottom: 1px solid var(--border-1); }
.pn-posten li:last-child { border-bottom: 0; }
.pn-posten li.is-rolle { background: var(--page-bg-surface); }
.pn-posten li.is-rolle .pn-posten-t { font-weight: 700; }
.pn-posten-t a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-1); }
.pn-posten-t a:hover { color: var(--primary); border-bottom-color: var(--primary); }
.pn-posten-t { font-size: 15px; line-height: 1.4; color: var(--fg-1); min-width: 0; }
.pn-posten-stufe { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-3); }
.pn-posten-slots { font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  color: var(--fg-1); text-align: right; }

/* ---------- Leistungsmatrix ---------- */

.pn-matrix { border: 1px solid var(--border-1); border-radius: 20px; background: var(--paper); overflow: hidden; }
.pn-matrix-head { display: grid; grid-template-columns: 1fr 190px; gap: 24px; padding: 16px 28px;
  background: var(--page-bg-surface); border-bottom: 1px solid var(--border-1);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.pn-matrix-row { display: grid; grid-template-columns: 1fr 190px; gap: 24px; padding: 20px 28px;
  border-bottom: 1px solid var(--border-1); align-items: center; }
.pn-matrix-row:last-child { border-bottom: 0; }
.pn-matrix-cell { min-width: 0; }
.pn-matrix-cell h4 { margin: 0; font-family: var(--font-sans); font-size: 15.5px; font-weight: 700; color: var(--fg-1); }
.pn-matrix-cell p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-2); }
.pn-matrix-val { display: flex; justify-content: flex-start; }

.pn-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 100px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--page-bg-surface); border: 1px solid var(--border-1); color: var(--fg-2); }
.pn-tag.is-in { background: hsl(150 62% 94%); border-color: hsl(152 50% 78%); color: hsl(152 68% 26%); }
.pn-tag.is-quote { background: var(--accent); border-color: hsl(var(--h-primary) / 0.22); color: var(--primary); }
.pn-tag.is-sep { background: hsl(44 93% 93%); border-color: hsl(38 80% 76%); color: hsl(28 86% 33%); }

/* ---------- Breakpoints dieser Seite ---------- */

@media (max-width: 1080px) {
  .pn-wege { grid-template-columns: 1fr; }
  .pn-betrieb { grid-template-columns: 1fr; }
  .pn-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pn-stufen { grid-template-columns: 1fr; }
  .pn-posten li { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .pn-posten-stufe { grid-row: 2; grid-column: 1; }
  .pn-posten-slots { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
}

@media (max-width: 640px) {
  .pn-head { margin-bottom: 40px; }
  .pn-claim { font-size: 26px; max-width: none; }
  .pn-gebuehr-kopf { padding: 26px 22px 24px; align-items: flex-start; }
  .pn-gebuehr-cta { width: 100%; justify-content: center; }
  .pn-gebuehr-grid { grid-template-columns: 1fr; padding: 26px 22px 28px; gap: 22px; }
  .pn-weg { padding: 24px 22px; }
  .pn-betrieb-karte { padding: 26px 22px; }
  .pn-band-grid { grid-template-columns: 1fr; }
  .pn-stufe { padding: 24px 22px; }
  .pn-rechnung-kopf { padding: 24px 22px; }
  .pn-rechnung-zahl { font-size: 42px; }
  .pn-posten li { padding: 14px 22px; }
  .pn-matrix-head { display: none; }
  .pn-matrix-row { grid-template-columns: 1fr; gap: 12px; padding: 20px 22px; }
}