/* Die Preisseite in der Formensprache der Startseite.
 *
 * DER BEFUND (04.09.2026, Arpad): About, Hilfe und AGB sehen richtig aus,
 * die Preisseite nicht. Das ist kein Widerspruch, sondern die Grenze der
 * beiden Brueckendateien:
 *
 *   `kompat.css`  belegt die alten Variablen mit neuen Werten um — Farbe,
 *                 Schrift, Radius, Abstand stimmen dadurch ueberall.
 *   `seiten.css`  legt die Geometrie der Startseite ueber die Unterseiten —
 *                 Spaltenbreite, Satzspiegel, Rhythmus.
 *
 * Beide fassen BAUTEILE nicht an. Eine Fliesstextseite besteht fast nur aus
 * `section`, `container` und `card` — die deckt `seiten.css` ab, und deshalb
 * sieht sie richtig aus. Die Preisseite besteht fast nur aus Bauteilen, die
 * es auf der Startseite gar nicht gibt: Tarifkarten, Buendelkarten, Preise,
 * Spar-Plaketten. Die kommen weiter aus `landing.css` — mit neuen Farben in
 * alter Form.
 *
 * WAS HIER PASSIERT: kein Markup wird angefasst, keine Klasse umbenannt,
 * kein funktionaler Haken beruehrt (`data-checkout`, `data-slug`,
 * `data-period`, `data-bundle`, `data-group`, die Preis-IDs aus
 * `js/pricing.js`). Diese Datei setzt nur die Form der Bauteile neu. Dieselbe
 * Entscheidung wie bei `kompat.css` und `seiten.css` und aus demselben Grund:
 * Was sich aendert, ist ueberpruefbar, weil kein Layout beim Umschreiben
 * verrutschen kann.
 *
 * DIE FUENF STELLEN, an denen die alte Form erkennbar war — jede einzeln,
 * damit man beim Vergleich weiss, wonach man sucht:
 *
 *   1. VERLAUF. Die Tarifkarte hatte einen Farbverlauf von `--surface-2`
 *      nach `--surface`. Die Karten der Startseite (`.uc-karte`) sind flach.
 *      Ein Verlauf auf einer Karte ist das deutlichste Merkmal der alten
 *      Fassung — er faellt auch dem auf, der nicht sagen koennte, warum.
 *   2. GLUEHSCHATTEN. Die hervorgehobene Karte trug
 *      `0 24px 60px -26px var(--primary-glow)`. Die Startseite markiert
 *      Auswahl mit einem Balken in der Karte (`inset 3px 0 0 0`), nicht mit
 *      Licht darum herum.
 *   3. SCHWEBENDE PLAKETTE. `.plan__badge` sass mit `top:-11px` ueber der
 *      Kartenkante. Auf der Startseite steht die Auszeichnung IM Fluss.
 *   4. SCHREIBMASCHINENSCHRIFT. Plaketten liefen auf `--font-mono`. Im neuen
 *      System traegt die Monoschrift nur Technisches, nichts Werbliches.
 *   5. FESTE GRADE. `.price__now` stand auf harten 2.5rem, an keiner Skala.
 *      Jetzt auf `--fs-h3`, damit der Preis mit den Ueberschriften mitwaechst.
 *
 * Laedt NACH `seiten.css` und VOR `mobil.css`: Die Bauteile gehoeren hinter
 * die Geometrie, und die Regeln fuers Telefon muessen ueber allem stehen.
 */

/* ------------------------------------------------------------------
   1. Die Tarifkarte
   ------------------------------------------------------------------ */

/* Die Werte stammen aus `.uc-karte` in site.css — derselben Karte, die auf
   der Startseite unter „Loesungen" steht. Nicht nachempfunden, uebernommen:
   Zwei Karten, die fast gleich aussehen, sind schlimmer als zwei, die
   verschieden aussehen. */
body[data-page="pricing"] .plan {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}

body[data-page="pricing"] .plan:hover {
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

/* Die hervorgehobene Karte: Balken statt Schein. Der Balken sitzt links
   innen, wie bei der gewaehlten Karte auf der Startseite
   (`.uc-karte.uc-gewaehlt`). */
body[data-page="pricing"] .plan--featured {
  border-color: var(--accent);
  background: var(--surface-card);
  box-shadow: inset 3px 0 0 0 var(--accent);
}

body[data-page="pricing"] .plan--featured:hover {
  background: var(--surface-hover);
}

/* ------------------------------------------------------------------
   2. Die Plakette am Kartenkopf
   ------------------------------------------------------------------ */

/* Aus der Schwebe zurueck in den Fluss. `position: static` loest die
   Verschiebung um -11px und die Zentrierung mit; beides stand nur dort,
   weil die Plakette ueber der Kante haengen sollte. */
body[data-page="pricing"] .plan__badge {
  position: static;
  transform: none;
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  font-family: var(--font-core);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: none;
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  color: var(--accent);
  border: var(--border-width) solid var(--border-accent);
}

/* Auf der hervorgehobenen Karte traegt die Plakette die Akzentflaeche —
   ein festes Paar aus der Palette, damit der Kontrast nicht geraten ist. */
body[data-page="pricing"] .plan--featured .plan__badge {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

/* ------------------------------------------------------------------
   3. Name, Beschreibung, Preis
   ------------------------------------------------------------------ */

body[data-page="pricing"] .plan__name {
  font-family: var(--font-core);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
}

body[data-page="pricing"] .plan__tag {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

body[data-page="pricing"] .price__now {
  font-family: var(--font-core);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
}

/* „/mo" ist keine Zahl und darf nicht wie eine aussehen. */
body[data-page="pricing"] .price__now .per {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-normal);
}

body[data-page="pricing"] .price__orig {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

body[data-page="pricing"] .price__meta {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

/* ------------------------------------------------------------------
   4. Plaketten, Kontingent, Verlaengerungshinweis
   ------------------------------------------------------------------ */

body[data-page="pricing"] .badge-save {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  border: var(--border-width) solid var(--border-accent);
  color: var(--accent);
  font-family: var(--font-core);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
}

/* Das Kontingent ist die zweitwichtigste Zahl der Karte — nach dem Preis,
   vor allem anderen. Es bekommt deshalb eine eigene Flaeche statt einer
   weiteren Textzeile. */
body[data-page="pricing"] .plan__hours {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  color: var(--text-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
}

body[data-page="pricing"] .plan__renew {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

/* ------------------------------------------------------------------
   5. Die Merkmalsliste
   ------------------------------------------------------------------ */

body[data-page="pricing"] .plan__features li {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* Der Haken ist das einzige Farbige in der Liste. Genau deshalb wirkt er. */
body[data-page="pricing"] .plan__features li svg {
  color: var(--accent);
}

/* Die Zeile mit dem Schloss sagt etwas anderes als die Haken — sie nennt
   eine Zusage, keine Menge. Sie bleibt farblich zurueckhaltend. */
body[data-page="pricing"] .plan__features li.local svg {
  color: var(--text-secondary);
}

/* Eine Zwischenzeile („Everything in Standard, plus:") ist eine
   Ueberschrift in der Liste, kein Merkmal. */
body[data-page="pricing"] .plan__features li.heading {
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

/* ------------------------------------------------------------------
   6. Die Buendelkarten (1, 3, 6 Gespraeche)
   ------------------------------------------------------------------ */

/* Sie tragen `.plan` mit und erben damit Flaeche, Rand und Radius von oben.
   Hier steht nur, was ihnen eigen ist. */
body[data-page="pricing"] .bundle__credits {
  font-size: var(--fs-body-s);
  color: var(--text-secondary);
}

body[data-page="pricing"] .bundle__cap {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

body[data-page="pricing"] .bundle__badge {
  position: static;
  transform: none;
  align-self: flex-start;
}

/* ------------------------------------------------------------------
   7. Das E-Mail-Tor der Studententarife
   ------------------------------------------------------------------ */

body[data-page="pricing"] .stgate {
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
}

body[data-page="pricing"] .stgate__lead,
body[data-page="pricing"] .stgate__note {
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

/* ------------------------------------------------------------------
   8. Hinweiszeilen unter den Karten
   ------------------------------------------------------------------ */

body[data-page="pricing"] .legal-note,
body[data-page="pricing"] .credits-note {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* ==================================================================
   9. Block statt Mitte  (Arpad, 04.09.2026)
   ==================================================================

   DER BEFUND: „zentriert macht es generell sehr unordentlich."

   Er hat recht, und der Grund ist nicht Geschmack. Zentrierter Satz hat
   auf beiden Seiten eine ausgefranste Kante. Solange ein zentrierter
   Block allein steht, faellt das nicht auf. Auf dieser Seite stehen
   sechs davon untereinander — Kopf, Reiter, Umschalter, Hinweisband,
   Fussnoten —, und weil jeder eine andere Textlaenge hat, hat jeder eine
   andere Breite. Das Auge sucht die linke Kante und findet sechs
   verschiedene. Genau das liest sich als „unordentlich".

   Die Startseite macht es umgekehrt: EINE linke Kante, an der alles
   haengt. Die alten Regeln setzen dagegen `text-align: center` und
   `margin: 0 auto` mit engen Maximalbreiten (620 px im Kopf, 720 px im
   Hinweisband). Beides wird hier zurueckgenommen — die Breite gibt ab
   jetzt der Container vor, nicht das Bauteil.
   ------------------------------------------------------------------ */

/* Kopf: Ueberschrift und Vorspann linksbuendig, ohne eigene Maximalbreite.
   `--measure-prose` bleibt als Lesebremse fuer den Vorspann stehen — eine
   Zeile mit 190 Zeichen ist auch linksbuendig unlesbar. */
body[data-page="pricing"] .section__head {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--space-6);
  text-align: left;
}

body[data-page="pricing"] .section__head .section__lead {
  max-width: var(--measure-prose);
  margin-left: 0;
  margin-right: 0;
}

/* Reiterleiste und Umschalter an dieselbe Kante. */
body[data-page="pricing"] .ptabs {
  justify-content: flex-start;
}

body[data-page="pricing"] .billing {
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

/* Das Hinweisband zur Wissensbasis lief auf 720 px und brach deshalb in
   zwei Zeilen. Auf voller Breite passt es in eine — und eine Pille ueber
   die volle Breite sieht aus wie ein verunglueckter Knopf, deshalb der
   ruhigere Radius. */
body[data-page="pricing"] .local-banner {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: var(--space-6);
  justify-content: flex-start;
  text-align: left;
  border-radius: var(--radius-md);
}

/* Fussnoten: linksbuendig, volle Breite, enger gesetzt. */
body[data-page="pricing"] .legal-note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--space-4);
  text-align: left;
}

body[data-page="pricing"] .credits-note {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* ==================================================================
   10. Enterprise als Band ueber die volle Breite
   ==================================================================

   Vorher: `max-width: 560px` und in der mittleren von drei Rasterspalten.
   Das war die Antwort auf ein echtes Problem — zwischen den Tarifkarten
   stehend las sich Enterprise wie ein vierter kaufbarer Tarif. Die
   Loesung war richtig, die Form nicht: Eine schmale Karte allein in der
   Mitte sieht aus wie ein Rest, den man vergessen hat wegzuraeumen.

   Jetzt wieder ein Band ueber die volle Breite — und weil eine Karte
   ueber 1400 px mit drei Zeilen Inhalt leer wirkt, liegt der Inhalt in
   drei Spalten nebeneinander: links wer und was, in der Mitte was drin
   ist, rechts die Warteliste. Das Band ist damit breit UND gefuellt.
   ------------------------------------------------------------------ */

body[data-page="pricing"] .entband {
  display: block;
  max-width: none;
  margin: var(--space-10) 0 0;
}

body[data-page="pricing"] .entband > .plan--enterprise {
  grid-column: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(280px, 340px);
  column-gap: var(--space-8);
  row-gap: var(--space-2);
  align-items: start;
  padding: var(--pad-card);
}

/* Linke Spalte: Plakette, Name, Beschreibung, Preis — in dieser Reihenfolge
   untereinander, wie auf einer Tarifkarte auch. */
body[data-page="pricing"] .entband .plan__badge,
body[data-page="pricing"] .entband .plan__name,
body[data-page="pricing"] .entband .plan__tag,
body[data-page="pricing"] .entband .price {
  grid-column: 1;
}

/* Mittlere und rechte Spalte laufen ueber alle vier Zeilen der linken. */
body[data-page="pricing"] .entband .plan__features {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  margin: 0;
}

body[data-page="pricing"] .entband .waitlist {
  grid-column: 3;
  grid-row: 1 / span 4;
}

/* Unter 900 px gibt es keine drei Spalten mehr — dann wird gestapelt, in
   der Reihenfolge, in der es im Markup steht. Das ist genau die
   Reihenfolge, in der man es auch lesen will. */
@media (max-width: 900px) {
  body[data-page="pricing"] .entband > .plan--enterprise {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  body[data-page="pricing"] .entband .plan__badge,
  body[data-page="pricing"] .entband .plan__name,
  body[data-page="pricing"] .entband .plan__tag,
  body[data-page="pricing"] .entband .price,
  body[data-page="pricing"] .entband .plan__features,
  body[data-page="pricing"] .entband .waitlist {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Die beiden Zeilen, die am 04.09. unter die Pakete gewandert sind: der
   Schlusssatz und der USt-Hinweis. Beide trugen ihre Mitte aus der alten
   Position mit (`\.billing__vat` steht auf `text-align: center`, weil es
   frueher unter dem Umschalter sass). Hier steht, wo sie jetzt stehen. */
body[data-page="pricing"] .section__lead--schluss {
  max-width: var(--measure-prose);
  margin: var(--space-8) 0 0;
  color: var(--text-body);
}

body[data-page="pricing"] .billing__vat {
  text-align: left;
}

/* ==================================================================
   12. Korrektur nach dem ersten Rendern (04.09.2026)
   ==================================================================

   FEHLER 1 — UNSICHTBARE PLAKETTEN. Oben stand
   `background: var(--surface-accent); color: var(--accent)`. Das sah nach
   „getoente Flaeche mit Akzentschrift" aus, ist aber Gruen auf Gruen:
   `thalassa-0831-palette.css` belegt BEIDE Namen mit
   `var(--color-primary-500)`. Im Bild waren die Spar-Plaketten leere gruene
   Balken. Ein Name, der nach Flaeche klingt, ist noch keine Flaechenfarbe —
   das haette ich nachsehen muessen, statt es abzuleiten.

   Richtig ist eine echte helle Tönung mit dunkler Schrift, oder die
   Akzentflaeche mit dem dafuer vorgesehenen Gegenstueck
   (`--text-on-accent`). Beide Paare stehen so in der Palette.

   FEHLER 2 — ZERFRANSTE OBERKANTE. Die Plakette aus der Schwebe in den
   Fluss zu holen war richtig, hatte aber eine Folge: Karten MIT Plakette
   fangen tiefer an als Karten ohne. In einer Reihe von drei Karten sieht
   das aus wie ein Versehen. Sie sitzt jetzt in der Karte oben rechts —
   im Kasten, nicht darueber, und ohne die anderen zu verschieben.

   FEHLER 3 — GEDEHNTE PLAKETTE IM BAND. Im Raster wirkt `align-self`
   senkrecht, nicht waagerecht; die Enterprise-Plakette lief deshalb ueber
   die ganze Spalte. Dafuer ist `justify-self` zustaendig.
   ------------------------------------------------------------------ */

/* --- Plaketten: helle Tönung, dunkelgruene Schrift ------------------ */
body[data-page="pricing"] .plan__badge,
body[data-page="pricing"] .badge-save {
  background: var(--color-primary-50);
  border-color: var(--color-primary-100);
  color: var(--color-primary-700);
}

/* Auf der hervorgehobenen Karte bleibt die volle Akzentflaeche — mit dem
   Gegenstueck, das die Palette dafuer vorsieht. */
body[data-page="pricing"] .plan--featured .plan__badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* --- Plakette in die Karte, oben rechts ----------------------------- */
/* Nur in den Kartenrastern. Im Enterprise-Band bleibt sie im Fluss: dort
   ist sie die Zeile, mit der das Band anfaengt. */
body[data-page="pricing"] .pricing-grid .plan__badge,
body[data-page="pricing"] .bundle-grid .plan__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  left: auto;
  bottom: auto;
  max-width: 60%;
  text-align: right;
  z-index: 1;
}

/* Damit der Name nicht unter die Plakette laeuft. */
body[data-page="pricing"] .pricing-grid .plan__name,
body[data-page="pricing"] .bundle-grid .plan__name {
  padding-right: 0;
  margin-top: var(--space-5);
}

/* --- Enterprise: Plakette nicht ueber die Spalte dehnen -------------- */
body[data-page="pricing"] .entband .plan__badge {
  position: static;
  justify-self: start;
  align-self: start;
  max-width: none;
  text-align: left;
}

/* ==================================================================
   13. Kompakt: alles Kaufbare ohne Scrollen  (Arpad, 04.09.2026)
   ==================================================================

   DIE VORGABE: „ich will nicht scrollen muessen, um die Pakete von oben
   bis unten sehen zu koennen." Enterprise darf darunter liegen, die drei
   kaufbaren Karten nicht.

   GEMESSEN, nicht geschaetzt (1440x900, vor dieser Aenderung):

     Kopf          y= 169  h=138
     Reiter        y= 347  h= 43
     Umschalter    y= 394  h= 46
     Hinweisband   y= 490  h= 40
     Karten        y= 554  h=618   -> Unterkante 1172

   Die Falte liegt bei 900, auf einem MacBook Air mit Browserleiste eher
   bei 780. Zu sparen waren also rund 390 px. Sie kommen aus fuenf Posten,
   keiner davon ist ein Zusammenquetschen:

     ~90 px  Das Hinweisband zur Wissensbasis steht jetzt UNTER den Karten.
             Es ist eine Beruhigung, kein Entscheidungsgrund — oben kostete
             es 40 px Hoehe plus 50 px Abstand und stand zwischen dem
             Nutzer und dem, weswegen er gekommen ist.
     ~46 px  Reiter und Zeitraum-Umschalter in EINER Zeile statt zwei.
     ~40 px  Abstand ueber dem Kopf.
     ~45 px  Kopf: kleinerer Titelgrad, engere Innenabstaende.
    ~170 px  Karteninneres: Innenabstand, Zeilenabstand der Merkmale, die
             Luft um den Preis.

   Was NICHT kleiner wird: die Schriftgrade der Merkmalsliste und des
   Preises. Eine Seite, auf der alles sichtbar und nichts lesbar ist, hat
   das Problem nicht geloest, sondern verschoben.
   ------------------------------------------------------------------ */

/* --- Reiter und Umschalter in einer Zeile --------------------------- */
body[data-page="pricing"] .pricing-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

body[data-page="pricing"] .pricing-controls .ptabs {
  margin: 0;
  flex: 1 1 auto;
}

/* Der Umschalter war eine SPALTE (Sparzeile ueber den Knoepfen). In einer
   Zeile wird er zur Reihe — sonst waere die Zeile so hoch wie vorher zwei. */
body[data-page="pricing"] .pricing-controls .billing {
  margin: 0;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

body[data-page="pricing"] .pricing-controls .billing__rows {
  margin: 0;
}

/* Unter 1100 px reicht die Breite nicht mehr fuer beides nebeneinander.
   Dann bricht die Zeile um — und die Sparzeile faellt weg, weil derselbe
   Satz auf dem Knopf daneben steht („Annual >10% off"). */
@media (max-width: 1100px) {
  body[data-page="pricing"] .pricing-controls { justify-content: flex-start; }
  body[data-page="pricing"] .pricing-controls .billing__save { display: none; }
}

/* --- Kopf --------------------------------------------------------- */
body[data-page="pricing"] .section--ruled {
  padding-top: var(--space-6);
}

body[data-page="pricing"] .section__head {
  margin-bottom: var(--space-4);
}

body[data-page="pricing"] .section__head .section__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
}

body[data-page="pricing"] .section__head .section__lead {
  margin-top: var(--space-2);
}

/* --- Karteninneres ------------------------------------------------- */
body[data-page="pricing"] .pricing-grid .plan {
  padding: var(--space-5);
  gap: var(--space-2);
}

body[data-page="pricing"] .pricing-grid .price {
  margin: var(--space-1) 0;
}

body[data-page="pricing"] .pricing-grid .plan__features {
  margin: var(--space-2) 0;
}

body[data-page="pricing"] .pricing-grid .plan__features li {
  margin: 5px 0;
}

/* 10 px waren fuer eine Beschreibung zu klein — das ist kein Kleingedrucktes,
   sondern der Satz, an dem man den Tarif erkennt. */
body[data-page="pricing"] .plan__tag {
  font-size: var(--fs-body-m);
}

body[data-page="pricing"] .checkout-status:empty {
  display: none;
}

/* ==================================================================
   14. Zahlungsarten: die Fusszeile neu
   ==================================================================

   DER BEFUND (Arpad, Telefonansicht): „unten bei Secure checkout & VAT ist
   es verrutscht, oberhalb der Kreditkartensymbole."

   Die Ursache steht in `landing.css`: Die Zeile ist ein `inline-flex` mit
   `align-items: center`, in Monoschrift, VERSALIEN und mit gesperrter
   Laufweite. Auf 1440 px passt das in eine Zeile und sieht gut aus. Auf
   390 px bricht derselbe Satz in vier Zeilen — und weil das Schloss-Symbol
   senkrecht ZENTRIERT ist, steht es dann auf halber Hoehe neben dem
   Textblock statt neben der ersten Zeile. Genau das sieht „verrutscht" aus.

   Drei Aenderungen, jede gegen eine Ursache:
     1. Das Symbol richtet sich an der ERSTEN Zeile aus, nicht an der Mitte.
     2. Auf dem Telefon faellt die Monoschrift samt Versalien und Sperrung
        weg. Gesperrte Versalien in Monoschrift sind die schlechteste
        Kombination, die es fuer einen Umbruch gibt.
     3. Der Block steht links wie alles andere auf dieser Seite, statt
        zentriert.
   ------------------------------------------------------------------ */

body[data-page="pricing"] .pay-methods {
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* KEIN Flex mehr. Das ist die eigentliche Ursache: Als `inline-flex` wird
   jedes Kind zum Flex-Element — auch die Marke `<span data-tax-word>VAT</span>`
   mitten im Satz. Sie bekam dadurch links und rechts eine Luecke aus `gap`,
   und beim Umbruch zerfiel der Satz sichtbar in drei Stuecke:
   „Secure checkout &" · „VAT" · „handling by Stripe …".
   Als Block bleibt der Text EIN Fluss und bricht wie Text bricht. Das
   Schloss haengt links daneben, statt eine Spalte zu beanspruchen. */
body[data-page="pricing"] .pay-methods__label {
  display: block;
  position: relative;
  padding-left: 22px;
  text-align: left;
  line-height: var(--lh-body);
  max-width: var(--measure-prose);
}

body[data-page="pricing"] .pay-methods__label svg {
  position: absolute;
  left: 0;
  top: 0.2em;
}

body[data-page="pricing"] .pay-row {
  justify-content: flex-start;
}

@media (max-width: 700px) {
  body[data-page="pricing"] .pay-methods__label {
    font-family: var(--font-core);
    font-size: var(--fs-body-m);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
  }
}

/* --- Nachmessung 04.09., zweiter Durchgang -------------------------- */
/* `--fs-h2` war GROESSER als der Ausgangswert — ich hatte die Skala nach
   oben statt nach unten gegriffen. Auf einer Preisseite traegt der Titel
   nichts, was ein Grad kleiner nicht auch truege. */
body[data-page="pricing"] .section__head .section__title {
  font-size: var(--fs-h3);
}

/* Der Platz ueber dem Namen ist nur da, damit die Karte mit Plakette
   nicht darunter laeuft. 20 px waren mehr, als die Plakette hoch ist. */
body[data-page="pricing"] .pricing-grid .plan__name,
body[data-page="pricing"] .bundle-grid .plan__name {
  margin-top: var(--space-3);
}

/* Der Preisblock stand auf drei Zeilen mit eigenen Abstaenden. Die
   Zahl bleibt gross, die beiden Beizeilen ruecken an sie heran. */
body[data-page="pricing"] .pricing-grid .price {
  gap: 0;
  margin: 0;
}

body[data-page="pricing"] .pricing-grid .price__orig,
body[data-page="pricing"] .pricing-grid .price__meta {
  line-height: var(--lh-snug);
}

/* --- Dritter Durchgang: die letzten 46 px --------------------------- */
/* Nach dem zweiten Durchgang endeten die Karten bei 946 statt 900. Was
   hier passiert, nimmt KEINEN Inhalt weg — es sind nur die Luftraeume
   zwischen den Bausteinen. Weiter runter ginge nur noch ueber Inhalt
   (eine Merkmalszeile, der durchgestrichene Altpreis, die
   Verlaengerungszeile), und das ist keine Gestaltungs-, sondern eine
   Produktentscheidung. */
body[data-page="pricing"] .pricing-grid .plan {
  padding: var(--space-4);
  gap: var(--space-1);
}

body[data-page="pricing"] .pricing-grid .plan__features li {
  margin: 4px 0;
}

/* Der Knopf sitzt UNTEN, nicht hinter der Liste.
   BEFUND (Arpad, 04.09.): „bei Standard ist es jetzt hoeher." Stimmt —
   Standard hat eine Merkmalszeile weniger als Professional und Premium.
   Die Karten sind im Raster gleich hoch, ihr INHALT aber verschieden lang,
   und damit endete der kuerzeste Inhalt weiter oben. `margin-top: auto`
   schiebt den Knopf an die Unterkante: Die Kaufknoepfe stehen dadurch in
   einer Linie, egal wie viele Zeilen darueber stehen.
   Der Mindestabstand zur Liste kommt aus deren `margin-bottom` — `auto`
   verteilt nur, was darueber hinaus frei ist. */
body[data-page="pricing"] .pricing-grid .plan .btn {
  margin-top: auto;
}

body[data-page="pricing"] .pricing-grid .plan__features {
  margin-bottom: var(--space-3);
}

/* ==================================================================
   11. Aufladen des Uebersetzungsguthabens  (04.09.2026)
   ==================================================================

   Drei Knoepfe in einer Zeile, GHOST und nicht PRIMARY. Der Grund ist
   nicht Geschmack: Auf dieser Seite gibt es genau eine Hauptentscheidung
   — welcher Tarif oder welches Ticket. Das Uebersetzungsguthaben ist ein
   Zusatz zu dieser Entscheidung, kein vierter Weg daneben. Drei weitere
   gefuellte Knoepfe haetten die Seite in sechs gleichrangige Angebote
   verwandelt, und der Blick haette keinen Anker mehr.

   `flex-wrap` statt eines Rasters: Auf dem Telefon stehen die drei
   untereinander, ohne dass eine Medienabfrage sie dorthin zwingen muss.
   (Merke aus dem Mobil-Debugging vom 02.09.: Inline-Stile kennen keine
   Medienabfrage — was von selbst umbricht, kann nicht falsch umbrechen.)
   ------------------------------------------------------------------ */


/* ==================================================================
   Uebersetzung als eigenes Band  (Arpad, 04.09.2026)
   ==================================================================

   DER BEFUND: „ich sehe nichts vom Guthaben aufladen an der Webseite."

   Er hatte recht, und es lag nicht am Auge. Der Block sass in
   `groupTickets` — dem Reiter „Single meeting". Beim Laden der Seite ist
   „Plans" offen, `groupTickets` ist zu, und damit war das gesamte
   Uebersetzungsangebot fuer jeden unsichtbar, der nicht zufaellig auf
   einen Reiter klickte, der ein anderes Produkt zeigt.

   Ein Zusatzverkauf gehoert nicht hinter eine Bedingung. Deshalb steht er
   jetzt als eigenes Band unter den Tarifen: immer sichtbar, unabhaengig
   davon, welcher Reiter gerade offen ist.

   ZWEI SPALTEN, NICHT EINE. Links das Versprechen, rechts der Preis mit
   den Knoepfen. Untereinander gestellt las sich der Preis wie eine
   Fussnote zum Text; nebeneinander ist er die Antwort darauf. Unter
   900 px kippt es auf eine Spalte, weil zwei Spalten dort beide zu schmal
   werden — der Preisblock zuerst breit, dann darunter.
   ================================================================== */

body[data-page="pricing"] .xlate {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: var(--space-8);
  align-items: start;
  margin: var(--space-10) 0 var(--space-8);
  padding: var(--space-8) 0 0;
  border-top: var(--border-width) solid var(--border-subtle);
}

body[data-page="pricing"] .xlate__eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

body[data-page="pricing"] .xlate__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--text-heading);
  text-wrap: balance;
}

body[data-page="pricing"] .xlate__lede {
  margin: 0 0 var(--space-5);
  max-width: var(--measure-prose);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--text-body);
}

body[data-page="pricing"] .xlate__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

body[data-page="pricing"] .xlate__points li {
  padding-left: var(--space-5);
  position: relative;
}

/* Kein Aufzaehlungspunkt aus der Schrift: Der Haken sagt „ist enthalten",
   und genau das ist die Aussage jeder dieser vier Zeilen. */
body[data-page="pricing"] .xlate__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

body[data-page="pricing"] .xlate__points strong {
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
}

body[data-page="pricing"] .xlate__buy {
  background: var(--surface-accent);
  border: var(--border-width) solid var(--border-accent);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
}

body[data-page="pricing"] .xlate__rate {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}

body[data-page="pricing"] .xlate__rate-unit {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--fs-body-s);
  color: var(--text-muted);
}

body[data-page="pricing"] .xlate__compare {
  margin: 0 0 var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-body);
}

body[data-page="pricing"] .xlate__compare strong {
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
}

/* Untereinander und volle Breite: Drei Preise nebeneinander laden zum
   Vergleichen ein — es gibt aber nichts zu vergleichen, der Minutensatz
   ist ueberall derselbe. Untereinander ist es das, was es ist: dieselbe
   Leistung in drei Mengen. */
body[data-page="pricing"] .xlate__buttons {
  display: grid;
  gap: var(--space-3);
}

body[data-page="pricing"] .xlate__buttons .btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

body[data-page="pricing"] .xlate__fine {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  body[data-page="pricing"] .xlate {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
}