/* ---------------------------------------------------------------------------
   Produktseite der OKR-Anwendung — eigenständiger Auftritt

   Additiv zu `site.css`, `wissen.css` und `okr.css` aus dem New-Work-Studio-
   Auftritt. Nichts davon wird verändert; alles Neue trägt ein Präfix:

     .pr-*   Preise (Kopfpreis, Rechenbeispiele, Einführung, Zusagen)
     .pa-*   helle Bühne mit Produkt daneben
     .tb-*   Vertrauensband unter der Bühne

   Warum eine eigene Datei und keine Ergänzung in `site.css`: Diese Website ist
   ein eigenes Produkt und soll den Marken-Auftritt nicht verändern können.
   Kommt sie später dorthin, wandert genau diese Datei mit.
--------------------------------------------------------------------------- */

/* ---------- Vertrauensband unter der Bühne ------------------------------ */
/* Kein Logo-Teppich. Der Mittelstand glaubt keiner Logo-Reihe, die er nicht
   kennt — er glaubt einer nachprüfbaren Angabe. Deshalb Zahlen und Fakten,
   die belegt sind, und ausdrücklich keine erfundenen Kundenlogos. */
.tb {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.tb-punkt strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--opsz-display);
  font-weight: var(--fw-display);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: var(--tracking-display-serif);
  color: var(--text-heading);
}
.tb-punkt span {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-body);
}

/* ---------- Helle Bühne mit Produktbild (Variante A) -------------------- */
.pa-hero { padding: 56px var(--gutter) 0; }
.pa-hero-grid {
  display: grid;
  /* Die Bildspalte ist die breitere: Die Attrappe trägt zwei Objective-Spalten
     nebeneinander, und darin brechen die Zieltitel sonst nach zwei Wörtern um.
     Der Text kommt mit weniger aus — er hat ohnehin ein Zeilenmaß. */
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: var(--space-10);
  align-items: center;
}
.pa-hero h1 {
  margin: var(--space-5) 0 var(--space-6);
  font-size: 50px;
  line-height: 1.04;
  letter-spacing: var(--tracking-display-serif);
  font-weight: var(--fw-display);
  color: var(--text-heading);
}
.pa-hero .w-sub {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-body);
  max-width: 32em;
}
/* Die Bühnenattrappe steht leicht angeschnitten und gekippt — sie soll nach
   Anwendung aussehen, nicht nach Abbildung einer Anwendung. */
.pa-schaufenster { position: relative; }
.pa-schaufenster .okr-mock { box-shadow: 0 28px 60px rgba(20, 21, 43, .14); }
/* In der Bühne steht die Attrappe enger als im eigenen Abschnitt: weniger
   Innenabstand, kleinere Schrift, damit die Zeilen ganz bleiben. */
.pa-schaufenster .okr-mock-kopf { gap: var(--space-8); padding: var(--space-6); }
.pa-schaufenster .okr-mock-raster > div { padding: var(--space-5); }
.pa-schaufenster .okr-obj-titel { font-size: 14.5px; line-height: 1.35; }
.pa-schaufenster .okr-kr { font-size: 12.5px; padding: 6px 0; }
.pa-schaufenster .okr-kr-wert { font-size: 11px; }

/* Die Preisangabe direkt unter den Knöpfen — SaaS-Konvention: Wer den Preis
   sofort sieht, springt nicht zum Preisabschnitt und wieder zurück. */
.pa-preiszeile {
  margin: var(--space-5) 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-label);
}
.pa-preiszeile strong { color: var(--text-heading); font-weight: var(--fw-semibold); }

/* ---------- Preise ------------------------------------------------------ */
.pr-raster {
  display: grid;
  /* Links die eine Preiskarte (dunkel), rechts die Rechenbeispiele (hell).
     Seit 18.09.2026 ein Kopfpreis statt Stufen, Growth-Plan §2a.7. */
  max-width: 880px;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}
.pr-karte {
  display: flex;
  flex-direction: column;
  padding: 32px 30px 34px;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-card);
}
/* Die empfohlene Stufe ist die einzige gefüllte Fläche im Raster — eine
   Betonung, nicht drei. Night statt Indigo, damit das Lime der Häkchen das
   einzige Signal bleibt. */
.pr-karte.is-empfohlen {
  position: relative;
  overflow: hidden;
  background: var(--nws-night);
  border-color: transparent;
  box-shadow: var(--shadow-hero);
}
/* Der Zierring ist absolut positioniert und muss es bleiben — ohne die
   Ausnahme setzt diese Regel ihn zurück in den Fluss und schiebt die halbe
   Karte 200 px nach unten. */
.pr-karte.is-empfohlen > *:not(.ring) { position: relative; z-index: 2; }
/* Die Stufen ohne Auszeichnung bekommen denselben Platz freigehalten, sonst
   startet die empfohlene Karte 39 px tiefer als ihre Nachbarn und die drei
   Namen stehen nicht mehr auf einer Linie. */
.pr-karte:not(.is-empfohlen)::before {
  content: '';
  display: block;
  height: 23px;
  margin-bottom: var(--space-4);
}
.pr-marke {
  align-self: flex-start;
  margin-bottom: var(--space-4);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--nws-lime-ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.pr-name {
  font-size: 20px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
}
.pr-karte.is-empfohlen .pr-name { color: #fff; }
.pr-fuer {
  margin: 7px 0 var(--space-6);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-label);
}
.pr-karte.is-empfohlen .pr-fuer { color: var(--nws-on-dark-muted); }

.pr-preis {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--opsz-display);
  font-weight: var(--fw-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: var(--tracking-display-serif);
  color: var(--text-heading);
}
.pr-karte.is-empfohlen .pr-preis { color: var(--accent); }
.pr-preis .pr-einheit {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--text-label);
}
.pr-karte.is-empfohlen .pr-preis .pr-einheit { color: var(--nws-on-dark-muted); }
.pr-basis {
  margin: 10px 0 var(--space-6);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-label);
  min-height: 2.9em;
}
.pr-karte.is-empfohlen .pr-basis { color: var(--nws-on-dark-muted); }

.pr-liste { margin: 0; padding: 0; list-style: none; }
/* Achtung beim Ergänzen: Der Text eines Punktes gehört in genau ein <span>.
   Die Zeile ist ein Flex-Container, jedes weitere Element darin würde zu einem
   eigenen Flex-Kind und stünde als eigene Spalte neben dem Text. */
.pr-liste li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-body);
}
.pr-karte.is-empfohlen .pr-liste li { color: var(--nws-on-dark); }
.pr-liste li::before {
  content: '✓';
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--primary);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}
.pr-karte.is-empfohlen .pr-liste li::before {
  background: var(--accent);
  color: var(--nws-lime-ink);
}
/* Was eine Stufe NICHT kann, gehört genauso auf die Karte wie das, was sie
   kann — sonst muss der Leser es aus der Lücke schließen und misstraut. */
.pr-liste li.is-ohne { color: var(--text-label); }
.pr-liste li.is-ohne::before {
  content: '–';
  background: transparent;
  border: 1px solid var(--border-hairline);
  color: var(--text-label);
}

/* Rechenbeispiele: eine echte Tabelle, damit Screenreader Zeile und Spalte
   zusammen vorlesen. Die Zahlen sind aus Growth-Plan §2a.7 D übernommen. */
.pr-beispiele .pr-name { display: block; }
.pr-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-body);
}
.pr-tabelle th,
.pr-tabelle td {
  padding: 9px 0;
  text-align: left;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: baseline;
}
.pr-tabelle thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-label);
}
.pr-tabelle tbody th { font-weight: var(--fw-semibold); color: var(--text-heading); }
.pr-tabelle td {
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--opsz-display);
  font-weight: var(--fw-display);
  font-size: 20px;
  letter-spacing: var(--tracking-display-serif);
  color: var(--text-heading);
  white-space: nowrap;
}
.pr-tabelle td:nth-child(2) { color: var(--primary); }
.pr-beleg {
  margin: var(--space-4) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-body);
}
.pr-beleg-stand { color: var(--text-label); }
.pr-aktion { margin-top: auto; padding-top: var(--space-6); }
.pr-aktion .btn { width: 100%; }
.pr-fuss {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-label);
  text-align: center;
}
.pr-karte.is-empfohlen .pr-fuss { color: var(--nws-on-dark-muted); }

/* Das Einführungspaket steht unter dem Raster, nicht darin: Es ist kein
   Abonnement, sondern eine einmalige Leistung — und der eigentliche Grund,
   warum die Routine hält. */
.pr-sprint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-10);
  align-items: center;
  margin-top: var(--space-5);
  padding: 34px 36px;
  border-radius: var(--radius-card);
  background: var(--surface-tint);
  border: 1px solid #dedcfa;
}
.pr-sprint h3 { margin: var(--space-3) 0 var(--space-3); }
.pr-sprint p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.pr-sprint-preis {
  text-align: right;
}
.pr-sprint-preis strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--opsz-display);
  font-weight: var(--fw-display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: var(--tracking-display-serif);
  color: var(--text-heading);
}
.pr-sprint-preis span {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-label);
}

/* Gründungskunden und Ausstiegsrecht: zwei gleich schwere Zusagen, keine
   Karten mit Preis. Dieselbe Tint-Fläche wie die Einführung, damit die drei
   Blöcke unter dem Raster als eine Gruppe lesbar sind. */
.pr-zusagen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.pr-zusage {
  padding: 30px 32px;
  border-radius: var(--radius-card);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
}
.pr-zusage h3 { margin: var(--space-3) 0 var(--space-3); }
.pr-zusage p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }

.pr-note {
  margin: var(--space-6) 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-label);
  max-width: 70ch;
}

/* ---------- Illustration im Abschnittskopf ------------------------------ */
/* Gleiches Muster wie `illu.css` im Auftritt, aber als <img> statt als
   Hintergrundbild: Diese Seiten sollen auch beim Weiterreichen als Datei
   vollständig sein. Unter 900 px wird das Bild ausgeblendet — dort zählt
   die Aussage, nicht die Zier. */
.pk-illu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: var(--space-10);
  align-items: center;
}
.pk-illu .w-head { margin-bottom: 0; max-width: 620px; }
.pk-illu img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-card);
}
@media (max-width: 900px) {
  .pk-illu { grid-template-columns: 1fr; }
  .pk-illu img { display: none; }
}

/* ---------- Schmale Fenster --------------------------------------------- */
@media (max-width: 1000px) {
  .pa-hero-grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .pa-hero h1 { font-size: 36px; }
  .pr-raster { grid-template-columns: 1fr; }
  .pr-sprint { grid-template-columns: 1fr; gap: var(--space-6); }
  .pr-sprint-preis { text-align: left; }
  .pr-zusagen { grid-template-columns: 1fr; }
  .tb { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5); }
}
@media (max-width: 620px) {
  .pa-hero { padding-top: 36px; }
  .tb { grid-template-columns: 1fr; }
}

/* ---------- Abschlussband mit E-Mail-Knopf (Weg 1: mailto) -------------- */
/* `.w-cta` ist ein umbrechender Flex-Container. Ohne feste Breiten nimmt die
   Textspalte die ganze Zeile und die Aktion rutscht darunter, während rechts
   eine leere Hälfte bleibt. Deshalb links breit-flexibel, rechts fest. */
.w-cta > :first-child { flex: 1 1 420px; min-width: 0; }
.w-cta > .pa-cta-mail { flex: 0 1 300px; }
/* Ohne eigenen Zeilenabstand erbt die Überschrift den Fließtextwert — in der
   Serife stehen die Zeilen dann sichtbar zu weit auseinander. */
.w-cta h2 { line-height: var(--lh-heading); }

.pa-cta-mail .btn { width: 100%; }
.pa-cta-note {
  margin: var(--space-3) 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--nws-on-dark-muted);
}
.pa-cta-note a { color: var(--accent); }

/* ---------- Wortmarke auf schmalen Fenstern ----------------------------- */
/* Die Unterzeile läuft mit 0.34em Sperrung auf dem Telefon aus der Leiste
   heraus und schiebt die ganze Seite waagerecht — gemessen bei 375 px:
   398 px Dokumentbreite. Weniger Sperrung und eine Spur kleiner, dann passt
   sie. Der Wert bleibt oberhalb unverändert, dort ist er die Marke. */
@media (max-width: 700px) {
  .lockup-by { font-size: 8.5px; letter-spacing: .18em; }
}

/* ---------- Anmelden oben rechts ---------------------------------------- */
/* Seit www.progrado.de auf die Produktseite führt, kommen auch Nutzer hierher,
   die nur in die App wollen. Deshalb ist „Anmelden" ein Knopf neben dem CTA
   und kein Menüpunkt mehr: Er bleibt auf dem Telefon sichtbar, wenn das Menü
   zu ist (`site.css` blendet dort nur `a:not(.btn)` aus).
   `site.css` gibt jedem `.btn` in der Leiste `margin-left: auto`; bei zwei
   Knöpfen würde das eine Lücke zwischen sie reißen. Der zweite Knopf bekommt
   deshalb nur den normalen Abstand. Unter 600 px stehen beide nebeneinander
   in einer Zeile unter der Wortmarke statt je in voller Breite. */
@media (max-width: 1000px) {
  .nav-links .nav-login + .btn { margin-left: 10px; }
}
@media (max-width: 600px) {
  /* Feste Anteile (40/60) statt `flex: 1`: Ohne Basis über der Zeilenbreite
     würden die Knöpfe in die erste Zeile neben die Wortmarke rutschen.
     `min-width: 0`, weil ein Knopf sonst auf seine Textbreite wächst und
     die Zeile sprengt. */
  .nav-links .nav-login,
  .nav-links .nav-login + .btn { flex: 0 1 auto; min-width: 0; padding: 0 12px; font-size: 14px; }
  .nav-links .nav-login { flex-basis: calc(40% - 5px); margin: 12px 10px 0 0; }
  .nav-links .nav-login + .btn { flex-basis: calc(60% - 5px); margin: 12px 0 0; }
}