/*
 * Plattform (/leistungen, /en/features) und Preisrechner (/preisrechner, /en/pricing-calculator)
 * im Stil der Startseite (Landing V8, DESIGN.md). Farben und Raster kommen aus public-pages.css (:root),
 * Buttons und Textlinks aus site-chrome.css. Alles hängt an .pp, damit die Tailwind-Grundstile und die
 * allgemeinen .public-site-Regeln nicht dazwischenfunken.
 * Präfixe: pp- Seitenbausteine, pricing- Preisrechner.
 */

.pp {
  --pp-y: clamp(80px, 7.6vw, 120px);
  --pp-radius: 16px;
  --pp-line: var(--line-light);
  --pp-text-3: #697665;
  --pp-card: #fff;
  --pp-dark-line: #50614d;
  --pp-dark-text: #bdcbb9;
  --pp-dark-muted: #afc0ac;
  color: var(--ink);
  font-family: var(--font-body);
}

/* Plattformseite: Nebentext in --gray-600, damit Kleintext auch auf Papier 4.5:1 erreicht (#697665 lag bei 4.35:1). */
.pp--platform { --pp-text-3: var(--gray-600); }

/* Grundstile ohne Gewicht (:where), damit jede Bausteinklasse sie überschreibt. */
:where(.pp) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.pp) :where(ul, ol) { list-style: none; padding: 0; }
:where(.pp) :where(a) { color: inherit; text-decoration: none; }
.pp .pp-line { display: block; }
.pp .pp-nowrap { white-space: nowrap; }
.pp .pp-accent { color: var(--mint-dark); }
.pp .pp-num { font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Kicker: kleines Quadrat oder Kapitelnummer mit Strich, dann das versale Label. */
.pp .pp-kicker { display: flex; align-items: center; gap: 12px; color: var(--mint-dark); font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pp .pp-kicker::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; background: currentColor; }
.pp .pp-kicker--index::before { display: none; }
.pp .pp-kicker__index { display: inline-flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pp .pp-kicker__index::after { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .7; }

/* Überschriften ohne automatische Silbentrennung: public-pages.css setzt hyphens:auto auf h1. */
.pp .pp-h1 { margin-top: 28px; font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 80px); font-weight: 500; line-height: 1.04; letter-spacing: -.045em; text-wrap: balance; hyphens: manual; }
.pp .pp-h2 { margin-top: 20px; font-family: var(--font-display); font-size: clamp(34px, 3.7vw, 56px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.pp .pp-lead { color: var(--text-2); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.6; text-wrap: pretty; }

/* ---------- Hero ---------- */
.pp-hero { padding-top: clamp(56px, 6.4vw, 104px); background: var(--paper); }
.pp-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; align-items: end; }
.pp-hero__main { grid-column: 1 / span 8; min-width: 0; }
.pp-hero__lead { grid-column: 9 / span 4; margin-bottom: 8px; }
.pp-hero__lead .pp-lead { font-size: clamp(18px, 1.35vw, 20px); }

/* Sprungmarken unter dem Hero, wie die Logo-Leiste der Startseite auf einer Haarlinie. */
.pp-index { display: flex; align-items: center; gap: 28px; margin-top: clamp(48px, 5.6vw, 88px); padding-block: 18px; border-top: 1px solid var(--pp-line); }
.pp-index__label { flex: 0 0 auto; color: var(--text-2); font-size: 13px; line-height: 1.4; }
.pp-index ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-index a { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 15px; border: 1px solid var(--pp-line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.pp-index a span { color: var(--pp-text-3); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.pp-index a:hover { border-color: var(--ink); background: #fff; }

/* ---------- Kapitel ---------- */
.pp-chapter { padding-block: var(--pp-y); background: var(--paper); scroll-margin-top: var(--header-h); }
.pp-chapter--white { --pp-card: var(--paper); background: #fff; }

.pp-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 24px; align-items: end; margin-bottom: clamp(40px, 4.4vw, 64px); }
.pp-head__main { grid-column: 1 / span 7; min-width: 0; }
.pp-head__aside { grid-column: 9 / span 4; display: grid; gap: 18px; justify-items: start; margin-bottom: 6px; }
.pp-head__aside .pp-lead { font-size: clamp(17px, 1.25vw, 19px); }
.pp-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px; border: 1px solid var(--pp-line); border-radius: 999px; color: var(--text-2); font-size: 12px; font-weight: 500; line-height: 1.3; }
.pp-tag strong { color: var(--ink); font-weight: 600; }

/* Karten: weiß auf Papier (auf weißen Kapiteln umgekehrt), 1 px Linie, kein Schatten. */
.pp-cards { display: grid; grid-template-columns: repeat(var(--pp-cols, 3), minmax(0, 1fr)); gap: var(--gutter); }
.pp-cards--2 { --pp-cols: 2; }
.pp-cards--4 { --pp-cols: 4; }
.pp-cards + .pp-cards, .pp-grid + .pp-cards, .pp-apps + .pp-cards { margin-top: var(--gutter); }
.pp-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: clamp(24px, 2.2vw, 32px); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); background: var(--pp-card); }
.pp .pp-card__title { font-family: var(--font-display); font-size: clamp(21px, 1.6vw, 24px); font-weight: 500; line-height: 1.22; letter-spacing: -.02em; text-wrap: balance; }
.pp .pp-card__text { color: var(--text-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.pp .pp-card__label { color: var(--pp-text-3); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pp .pp-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--pp-line); color: var(--text-2); font-size: 14px; line-height: 1.5; }
.pp .pp-card__foot strong { display: block; margin-bottom: 4px; color: var(--pp-text-3); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pp .pp-card__text + .pp-card__foot { margin-top: auto; }

/* Zwölf Spalten für ungleiche Karten (Workflows 7, Zeitpläne 5). */
.pp-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.pp-span-4 { grid-column: span 4; }
.pp-span-5 { grid-column: span 5; }
.pp-span-6 { grid-column: span 6; }
.pp-span-7 { grid-column: span 7; }
.pp-span-8 { grid-column: span 8; }

/* Kennwerte einer Funktion als Tabelle mit Haarlinien. */
.pp-spec { margin-top: 12px; border-top: 1px solid var(--pp-line); }
.pp-spec > div { display: grid; grid-template-columns: minmax(118px, 32%) minmax(0, 1fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--pp-line); }
.pp .pp-spec dt { padding-top: 2px; color: var(--pp-text-3); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; }
.pp .pp-spec dd { color: var(--ink); font-size: 15px; line-height: 1.5; }

/* Die vier Bausteine mit den Beispielansichten der Startseite. */
.pp-block { padding: 12px 12px clamp(24px, 2.2vw, 30px); gap: 18px; }
.pp-block__shot { aspect-ratio: 1600 / 1080; overflow: hidden; border: 1px solid var(--pp-line); border-radius: 12px; background: var(--paper-2); }
.pp-block__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pp-block__body { display: grid; gap: 10px; padding-inline: clamp(12px, 1.2vw, 20px); }
.pp .pp-block__label { display: flex; align-items: center; gap: 12px; color: var(--mint-dark); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pp .pp-block__label .pp-num { font-size: 13px; letter-spacing: .04em; }
.pp .pp-block__sub { color: var(--pp-text-3); font-size: 14px; line-height: 1.5; }

/* App-Katalog als Raster: Gruppe mit Tintenlinie oben, Einträge mit Haarlinien, keine Aufzählungszeichen. */
.pp-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 3.6vw, 56px) var(--gutter); }
.pp-apps__group { min-width: 0; padding-top: 18px; border-top: 1px solid var(--ink); }
.pp .pp-apps__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.pp .pp-apps__title .pp-num { color: var(--pp-text-3); font-size: 14px; }
.pp .pp-apps ul { margin-top: 12px; }
.pp .pp-apps li { padding-block: 9px; border-bottom: 1px solid var(--pp-line); color: var(--ink); font-size: 15px; line-height: 1.45; }
.pp .pp-apps li small { display: block; margin-top: 2px; color: var(--pp-text-3); font-size: 13px; }

/* ---------- Dunkles Kapitel: individuelle Lösungen ---------- */
/* Wie „Gebaut für Ihren Betrieb" auf der Startseite: Tinte als Fläche, Mint als einziger Akzent, Karten als
 * Glasfläche mit 1-px-Linie. Umgestellt werden nur Tokens für die Nachfahren, die Fläche selbst bleibt var(--ink).
 * Kontraste auf #19291e: Fließtext #bdcbb9 9:1, Nebentext #afc0ac 8:1, Mint 12:1. */
.pp-chapter--ink { --pp-card: rgb(255 255 255 / .04); --pp-line: var(--pp-dark-line); --pp-text-3: var(--pp-dark-muted); --text-2: var(--pp-dark-text); background: var(--ink); color: var(--white); }
.pp .pp-chapter--ink :is(.pp-kicker, .pp-accent, .pp-proof__value) { color: var(--mint); }
.pp .pp-chapter--ink :is(.pp-spec dd, .pp-tag strong) { color: var(--white); }
.pp-chapter--ink :focus-visible { outline-color: var(--mint); }
/* Karten gleicher Zeile gleich hoch: „Wir bauen / Sie stellen" steht bündig unten, mindestens 24 px unter dem Text. */
.pp-chapter--ink .pp-grid .pp-card__text { margin-bottom: 12px; }
.pp-chapter--ink .pp-grid .pp-spec { margin-top: auto; }

/* Belegte Kennzahlen unter den Karten, gebaut wie die Kennzahlen im Abschluss. */
.pp-proof { margin-top: clamp(48px, 5vw, 80px); padding-top: 20px; border-top: 1px solid var(--pp-line); }
.pp .pp-proof__label { color: var(--pp-text-3); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pp-proof__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(24px, 2.6vw, 40px); }
.pp-proof__list > li { display: grid; align-content: start; gap: 12px; min-width: 0; }
.pp .pp-proof__name { color: var(--text-2); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pp .pp-proof__value { font-family: var(--font-display); font-size: clamp(40px, 4.2vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pp .pp-proof__text { max-width: 24rem; color: var(--text-2); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

/* ---------- Abschluss auf Tinte ---------- */
.pp-close { padding-block: clamp(48px, 4.4vw, 64px) clamp(80px, 8vw, 120px); background: var(--ink); color: var(--paper); }
.pp-close__line { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: clamp(48px, 5.6vw, 88px); padding-top: 17px; border-top: 1px solid var(--pp-dark-line); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.pp-close__line > :last-child { color: var(--pp-dark-muted); font-weight: 400; letter-spacing: .04em; text-transform: none; text-align: right; }
.pp-close__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 8.33%; align-items: end; }
.pp .pp-close__title { font-family: var(--font-display); font-size: clamp(44px, 5.4vw, 88px); font-weight: 500; line-height: 1; letter-spacing: -.055em; color: var(--white); text-wrap: balance; }
.pp .pp-close__title .pp-accent { color: var(--mint); }
.pp .pp-close__copy > p { margin-bottom: 28px; color: var(--pp-dark-text); font-size: 17px; line-height: 1.6; }
.pp-close__copy .button { width: 100%; }
.pp-close__copy .text-link { width: 100%; margin-top: 12px; border-color: #52634d; color: #d6e1d2; font-weight: 500; }
.pp-close__copy .text-link:hover { color: var(--mint); }
.pp-close :focus-visible { outline-color: var(--mint); }
.pp-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(56px, 6vw, 96px); padding-top: 24px; border-top: 1px solid var(--pp-dark-line); }
.pp .pp-metrics strong { display: block; font-family: var(--font-display); font-size: clamp(32px, 3.2vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--white); }
.pp .pp-metrics span { display: block; margin-top: 10px; color: var(--pp-dark-muted); font-size: 14px; line-height: 1.45; }

/* ---------- Zwischengrößen und Handy ---------- */
@media (max-width: 1180px) {
  .pp-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-cards--4 { --pp-cols: 2; }
}

/* Schmale Drittelkarten zwischen 1001 und 1240 px: „Wir bauen / Sie stellen" untereinander statt in zwei engen Spalten. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .pp-chapter--ink .pp-span-4 .pp-spec > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 1000px) {
  .pp-hero__main, .pp-hero__lead, .pp-head__main, .pp-head__aside { grid-column: 1 / -1; }
  .pp-hero__lead .pp-lead { max-width: 40rem; }
  .pp-head__aside { margin-bottom: 0; }
  .pp-cards { --pp-cols: 2; }
  .pp-span-4, .pp-span-5, .pp-span-6, .pp-span-7, .pp-span-8 { grid-column: 1 / -1; }
  .pp-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-close__grid { grid-template-columns: 1fr; gap: 40px; }
  .pp-close__copy { max-width: 560px; }
}

@media (max-width: 680px) {
  .pp { --pp-y: 72px; }
  .pp-hero { padding-top: 40px; }
  .pp .pp-h1 { margin-top: 20px; }
  .pp-index { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 40px; padding-block: 16px 0; }
  .pp-index ul { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margin)); padding: 0 var(--margin) 16px; scrollbar-width: none; }
  .pp-index ul::-webkit-scrollbar { display: none; }
  .pp-head { margin-bottom: 32px; }
  .pp-cards, .pp-cards--2, .pp-cards--4 { --pp-cols: 1; gap: 16px; }
  .pp-grid { gap: 16px; }
  .pp-cards + .pp-cards, .pp-grid + .pp-cards, .pp-apps + .pp-cards { margin-top: 16px; }
  .pp-card { padding: 24px 22px; }
  .pp-block { padding: 10px 10px 24px; }
  .pp-block__body { padding-inline: 12px; }
  .pp-spec > div { grid-template-columns: 1fr; gap: 4px; }
  .pp-apps { grid-template-columns: 1fr; gap: 32px; }
  .pp-proof { margin-top: 40px; padding-top: 16px; }
  .pp-proof__list { grid-template-columns: 1fr; gap: 0; margin-top: 8px; }
  .pp-proof__list > li { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 16px; row-gap: 4px; padding-block: 18px; border-bottom: 1px solid var(--pp-line); }
  .pp .pp-proof__value { grid-column: 1; grid-row: 1 / span 2; font-size: 30px; }
  .pp .pp-proof__name { grid-column: 2; grid-row: 1; }
  .pp .pp-proof__text { grid-column: 2; grid-row: 2; font-size: 14px; }
  .pp-close__line { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pp-close__line > :last-child { text-align: left; }
  .pp .pp-close__title { font-size: clamp(40px, 11.5vw, 56px); }
  .pp-metrics { grid-template-columns: 1fr; gap: 0; margin-top: 48px; padding-top: 0; }
  .pp-metrics > li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--pp-dark-line); }
  .pp .pp-metrics strong { font-size: 28px; white-space: nowrap; }
  .pp .pp-metrics span { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pp *, .pp *::before, .pp *::after { transition: none !important; }
}

/* =====================================================================
 * Preisrechner (/preisrechner, /en/pricing-calculator)
 * Logik und Datenattribute bleiben im Partial program-overview-price-calculator; hier nur die Gestaltung.
 * Zustände setzt das Skript als .is-active (Fortschritt, Schnellauswahl), .is-selected (Paket),
 * .is-complete (Zeichenzähler) und .hidden (Onboarding, Fehlertexte).
 * ===================================================================== */

.pricing-hero { padding-bottom: clamp(48px, 5vw, 80px); }
.pricing-section { padding-block: clamp(40px, 4vw, 64px) clamp(64px, 7vw, 104px); background: #fff; }
.pricing .pricing-footnote { margin-top: clamp(28px, 3vw, 40px); color: var(--pp-text-3); font-size: 13px; line-height: 1.55; }

.pricing { position: relative; color: var(--ink); }
.pricing [hidden], .pricing .hidden { display: none !important; }

/* Fortschritt */
.pricing-progress { display: grid; gap: 14px; margin-bottom: clamp(32px, 3.6vw, 56px); }
.pricing-progress__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pricing .pricing-progress__label { color: var(--pp-text-3); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pricing .pricing-progress__step { color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pricing-progress__bar { display: flex; gap: 6px; }
.pricing-progress__seg { flex: 1 1 0; height: 3px; border-radius: 3px; background: var(--pp-line); transition: background-color .3s var(--ease); }
.pricing-progress__seg.is-active { background: var(--mint-dark); }

/* Jeder Schritt: Frage links, Auswahl rechts; unter 1000 px untereinander. */
.pricing-split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(32px, 5vw, 96px); row-gap: 32px; align-items: start; }
.pricing-step__intro { display: grid; align-content: start; gap: 16px; min-width: 0; }
.pricing-step__main { display: grid; align-content: start; gap: clamp(20px, 2.2vw, 28px); min-width: 0; }
.pricing .pricing-kicker { display: flex; align-items: center; gap: 12px; color: var(--mint-dark); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pricing .pricing-kicker::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; background: currentColor; }
.pricing .pricing-title { font-family: var(--font-display); font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.pricing .pricing-text { color: var(--text-2); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.pricing .pricing-note { color: var(--pp-text-3); font-size: 13px; line-height: 1.55; }

/* Kennzeichen als Haarlinien-Liste, ohne Symbole */
.pricing-facts { display: grid; margin-top: 8px; border-top: 1px solid var(--pp-line); }
.pricing-facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.pricing .pricing-facts li { padding-block: 11px; border-bottom: 1px solid var(--pp-line); color: var(--ink); font-size: 15px; line-height: 1.4; }

/* Schritt 1: Ausgangslage */
.pricing-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pricing-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(22px, 2vw, 28px); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.pricing-tile:hover { border-color: var(--ink); background: #fff; }
.pricing-tile__number { color: var(--pp-text-3); font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pricing-tile__title { margin-top: 4px; font-family: var(--font-display); font-size: clamp(19px, 1.5vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.pricing-tile__text { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pricing-tile__action { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--pp-line); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pricing-tile__action > span { font-size: 18px; font-weight: 400; transition: transform .2s var(--ease); }
.pricing-tile:hover .pricing-tile__action > span { transform: translateX(3px); }

.pricing-logos { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--pp-line); }
.pricing .pricing-logos__label { color: var(--pp-text-3); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pricing-logos__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; }
.pricing-logos__row img { display: block; width: auto; height: 26px; max-width: 112px; object-fit: contain; }
.pricing-logos__row img.pricing-logos__tall { height: 34px; }

/* Schritt 2: Pakete */
.pricing-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pricing-tier { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: clamp(22px, 2vw, 28px); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.pricing-tier:hover { border-color: var(--ink); }
.pricing-tier.is-selected { border-color: var(--ink); background: #fff; }
.pricing-tier__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.pricing-tier__name { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.pricing-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: var(--mint); font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pricing-tier__price { margin-top: 16px; font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 38px); font-weight: 500; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-tier__period { color: var(--pp-text-3); font-size: 13px; }
.pricing-tier__features { display: grid; margin-top: 16px; border-top: 1px solid var(--pp-line); }
.pricing-tier__features > span { padding-block: 9px; border-bottom: 1px solid var(--pp-line); color: var(--text-2); font-size: 14px; line-height: 1.4; }

.pricing-quote { display: grid; gap: 18px; padding: clamp(22px, 2.2vw, 30px); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); }
.pricing .pricing-quote blockquote { color: var(--ink); font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 23px); font-weight: 400; line-height: 1.35; letter-spacing: -.015em; text-wrap: pretty; }
.pricing-quote figcaption { display: flex; align-items: center; gap: 14px; }
.pricing-quote figcaption > img:first-child { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.pricing-quote__person strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pricing-quote__person span { display: block; color: var(--pp-text-3); font-size: 13px; line-height: 1.4; }
.pricing-quote__logo { width: auto; height: 24px; margin-left: auto; }

/* Schritt 3: Nutzer */
.pricing .pricing-hint { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid var(--pp-line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.45; }
.pricing .pricing-hint::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; background: var(--mint-dark); }
.pricing-users { display: grid; gap: 24px; padding: clamp(22px, 2.6vw, 36px); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); background: var(--paper); }
.pricing .pricing-users__value { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); }
.pricing-users__value [data-calc-display] { color: var(--ink); font-size: clamp(64px, 7vw, 104px); font-weight: 500; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pricing-users__unit { color: var(--text-2); font-size: 20px; }
.pricing-range { display: block; width: 100%; height: 6px; margin: 8px 0; border-radius: 999px; background: var(--pp-line); cursor: pointer; -webkit-appearance: none; appearance: none; }
.pricing-range::-webkit-slider-thumb { width: 28px; height: 28px; border: 4px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--pp-line); cursor: pointer; transition: transform .2s var(--ease); -webkit-appearance: none; appearance: none; }
.pricing-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.pricing-range::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid #fff; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px var(--pp-line); cursor: pointer; }
.pricing .pricing-range:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: 8px; }
.pricing-presets { display: grid; gap: 10px; }
.pricing .pricing-presets__label { color: var(--pp-text-3); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pricing-presets__row { display: flex; flex-wrap: wrap; gap: 8px; }
.pricing-preset { min-width: 52px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--pp-line); border-radius: 999px; background: #fff; color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.pricing-preset:hover { border-color: var(--ink); }
.pricing-preset.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }

.pricing-onboarding { padding: clamp(20px, 2vw, 26px); border: 1px solid var(--pp-line); border-radius: var(--pp-radius); background: #fff; }
.pricing-onboarding__label { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; }
.pricing .pricing-onboarding__check { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; border: 1px solid #9ca895; border-radius: 4px; color: var(--mint-dark); cursor: pointer; }
.pricing .pricing-onboarding__check:focus { box-shadow: none; outline: none; }
.pricing .pricing-onboarding__check:focus-visible { outline: 2px solid var(--mint-dark); outline-offset: 3px; }
.pricing-onboarding__body { display: grid; flex: 1; gap: 6px; min-width: 0; }
.pricing-onboarding__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.pricing-onboarding__title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; font-weight: 500; }
.pricing-onboarding__price { font-family: var(--font-display); font-size: 19px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-onboarding__items { color: var(--mint-dark); font-size: 14px; font-weight: 600; }
.pricing-onboarding__text { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pricing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pricing .button:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Schritt 4: Ergebnis als dunkler Abschluss */
.pricing-result { display: grid; gap: clamp(22px, 2.4vw, 32px); padding: clamp(24px, 3vw, 40px); border-radius: var(--pp-radius); background: var(--ink); color: var(--white); }
.pricing-result__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); row-gap: 28px; }
.pricing-result__grid--single { grid-template-columns: minmax(0, 1fr); }
.pricing-result__panel { position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; }
.pricing-result__grid > .pricing-result__panel + .pricing-result__panel::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(clamp(32px, 4vw, 64px) / -2); width: 1px; background: var(--pp-dark-line); }
.pricing .pricing-result__label { color: var(--pp-dark-muted); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; }
.pricing .pricing-result__amount { color: var(--mint); font-family: var(--font-display); font-size: clamp(44px, 4.6vw, 64px); font-weight: 500; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing .pricing-result__amount--secondary { color: var(--white); font-size: clamp(36px, 3.6vw, 52px); }
.pricing .pricing-result__desc { color: var(--white); font-size: 15px; line-height: 1.5; }
.pricing .pricing-result__sub { color: var(--pp-dark-muted); font-size: 13px; line-height: 1.5; }
.pricing-result__rows { display: grid; margin-top: 4px; border-top: 1px solid var(--pp-dark-line); }
.pricing-result__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--pp-dark-line); }
.pricing .pricing-result__rows dt { color: var(--pp-dark-text); font-size: 15px; line-height: 1.4; }
.pricing .pricing-result__rows dd { color: var(--white); font-family: var(--font-display); font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-result__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-top: 8px; }
.pricing .pricing-result__total span { color: var(--white); font-size: 16px; font-weight: 600; }
.pricing .pricing-result__total strong { color: var(--mint); font-family: var(--font-display); font-size: clamp(40px, 4.2vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing .pricing-result__effective { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-top: 18px; border-top: 1px solid var(--pp-dark-line); color: var(--pp-dark-text); font-size: 15px; }
.pricing .pricing-result__effective strong { color: var(--white); font-family: var(--font-display); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pricing .pricing-result__effective small { color: var(--pp-dark-muted); font-family: var(--font-body); font-size: 14px; font-weight: 400; }
.pricing-result__list { display: grid; align-content: start; border-top: 1px solid var(--pp-dark-line); }
.pricing .pricing-result__list li { padding-block: 11px; border-bottom: 1px solid var(--pp-dark-line); color: var(--pp-dark-text); font-size: 15px; line-height: 1.45; }
.pricing-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 4px; }
.pricing-result__actions .button { flex: 1 1 300px; }
.pricing-result__restart { min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid #52634d; background: none; color: #d6e1d2; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.pricing-result__restart:hover { color: var(--mint); }
.pricing-result :focus-visible, .pricing-success :focus-visible { outline-color: var(--mint); }

.pricing-breakdown { border: 1px solid var(--pp-line); border-radius: var(--pp-radius); background: #fff; }
.pricing-breakdown summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 22px; font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.pricing-breakdown summary::-webkit-details-marker { display: none; }
.pricing-breakdown summary::after { content: '+'; font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1; transition: transform .2s var(--ease); }
.pricing-breakdown[open] summary::after { transform: rotate(45deg); }
.pricing .pricing-breakdown ul { margin: 0 22px 10px; border-top: 1px solid var(--pp-line); }
.pricing .pricing-breakdown li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--pp-line); }
.pricing .pricing-breakdown li:last-child { border-bottom: 0; }
.pricing .pricing-breakdown li strong { display: block; font-size: 15px; font-weight: 500; }
.pricing .pricing-breakdown li small { display: block; margin-top: 2px; color: var(--pp-text-3); font-size: 13px; }
.pricing-breakdown__amount { font-family: var(--font-display); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricing-breakdown__amount.is-free { color: var(--mint-dark); font-family: var(--font-body); font-size: 14px; font-weight: 600; }

/* Briefing */
.pricing .pricing-price-note { justify-self: start; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid var(--pp-line); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 500; }
.pricing-form { display: grid; gap: 22px; }
.pricing-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.pricing-field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.pricing .pricing-field__label { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.pricing .pricing-input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--pp-line); border-radius: 8px; background: #fffdfa; color: var(--ink); font-size: 16px; line-height: 1.5; }
.pricing select.pricing-input { padding-right: 42px; }
.pricing textarea.pricing-input { min-height: 156px; resize: vertical; }
.pricing .pricing-input::placeholder { color: var(--pp-text-3); }
.pricing .pricing-input:focus { border-color: var(--mint-dark); box-shadow: none; outline: 2px solid var(--mint-dark); outline-offset: 1px; }
.pricing-field__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: 13px; }
.pricing .pricing-counter { color: var(--pp-text-3); font-variant-numeric: tabular-nums; }
.pricing .pricing-counter.is-complete { color: var(--mint-dark); }
.pricing .pricing-field__error { display: block; color: #c5452f; font-size: 13px; line-height: 1.4; }
.pricing .pricing-alert { padding: 14px 18px; border: 1px solid #c5452f; border-radius: 8px; background: #fff; color: #c5452f; font-size: 15px; }
.pricing-form__submit { display: grid; justify-items: start; gap: 14px; }
.pricing-success { display: grid; justify-items: start; gap: 18px; padding: clamp(24px, 3vw, 40px); border-radius: var(--pp-radius); background: var(--ink); color: var(--white); }
.pricing .pricing-success p { color: var(--pp-dark-text); font-size: 15px; line-height: 1.55; }

/* Zurück */
.pricing-back { margin-top: clamp(32px, 3.6vw, 48px); padding-top: 18px; border-top: 1px solid var(--pp-line); }
.pricing-back__button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pricing-back__button:hover { color: var(--ink); }

@media (max-width: 1000px) {
  .pricing-split { grid-template-columns: minmax(0, 1fr); }
  .pricing-step__intro { max-width: 42rem; }
}

@media (max-width: 680px) {
  .pricing-section { padding-top: 32px; }
  .pricing-tiles, .pricing-tiers, .pricing-form__row, .pricing-result__grid, .pricing-facts--grid { grid-template-columns: minmax(0, 1fr); }
  .pricing-result__grid > .pricing-result__panel + .pricing-result__panel::before { display: none; }
  .pricing-result__grid > .pricing-result__panel + .pricing-result__panel { padding-top: 24px; border-top: 1px solid var(--pp-dark-line); }
  .pricing-users__value [data-calc-display] { font-size: 64px; }
  .pricing-result__actions .button, .pricing-actions .button, .pricing-form__submit .button { width: 100%; flex-basis: 100%; }
  .pricing-logos__row { gap: 14px 24px; }
  .pricing-logos__row img { height: 22px; }
  .pricing-logos__row img.pricing-logos__tall { height: 30px; }
}

/* Sehr schmale Telefone: lange Wörter wie „Unternehmenswissen" passen bei 34 px nicht in die Spalte. */
@media (max-width: 420px) {
  .pp .pp-h2 { font-size: 30px; hyphens: auto; overflow-wrap: break-word; }
}