/* ════════════════════════════════════════════════════════════════
   pricing.css — Aussehen der Verkaufsseiten Pro und Business
   ────────────────────────────────────────────────────────────────
   Gehört zu includes/pricing_page.php.

   FARBEN kommen aus denselben zwei Einstellungen wie Startseite und
   Ratgeberseiten (--accent-blue, --landing-bg). Vorher stand hier
   ein fest verdrahtetes Violett (#6b5cff), das mit der Anwendung
   nichts zu tun hatte — die Seite sah dadurch aus wie von woanders.

   AUFBAU: Die drei Stufen liegen als Bänder untereinander, nicht als
   drei Spalten nebeneinander. Jedes Band trägt oben einen Balken, der
   mit der Stufe weiter reicht — die Bildsprache des Produkts selbst.
   Auf schmalen Schirmen bleibt das unverändert lesbar, weil Bänder
   von Haus aus untereinander stehen; drei Spalten müssten dort erst
   umbrechen und verlieren dabei ihren Vergleichscharakter.

   Bewusst ohne Schlagschatten. Tiefe entsteht über Flächen, feine
   Linien und Abstand.
   ════════════════════════════════════════════════════════════════ */

:root {
    --pp-ink:       #1d1d1f;
    --pp-ink-soft:  #4a4a55;
    /* Etwas dunkler als optisch noetig: Die gedaempften Zeilen stehen
       teils auf dem lila Seitengrund, wo #6f6f7d nur 4,4:1 erreichte
       und damit unter der Lesbarkeitsschwelle lag. */
    --pp-ink-mute:  #5c5c68;
    --pp-line:      rgba(29, 29, 31, 0.12);
    --pp-line-soft: rgba(29, 29, 31, 0.07);
    --pp-flaeche:   #ffffff;
    --pp-flaeche-2: rgba(255, 255, 255, 0.55);
    --pp-akzent:    var(--accent-blue, #938FC5);
    --pp-maxw:      1060px;

    /* ─── Abgeleitete Akzenttöne ─────────────────────────────────
       Die Akzentfarbe ist im Adminpanel frei wählbar und kann jede
       Helligkeit haben. Weisse Schrift direkt auf ihr wäre bei einem
       hellen Wert — der Standard #938FC5 etwa — kaum zu lesen.
       Deshalb tragen Flächen mit heller Schrift NICHT den Akzent
       selbst, sondern eine abgedunkelte Fassung davon; farbiger Text
       auf Weiss bekommt umgekehrt eine eigene, dunklere Variante.

       Die Rückfallwerte darunter sind neutral und in jedem Fall
       lesbar — sie greifen in Browsern ohne color-mix. */
    --pp-akzent-ink:  #3f3f4a;
    --pp-akzent-tief: #1d1d1f;
    --pp-akzent-hell: rgba(29, 29, 31, 0.06);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --pp-akzent-ink:  color-mix(in srgb, var(--pp-akzent) 62%, #16161c);
        --pp-akzent-tief: color-mix(in srgb, var(--pp-akzent) 76%, #14141a);
        --pp-akzent-hell: color-mix(in srgb, var(--pp-akzent) 14%, #ffffff);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.pricing-page {
    margin: 0;
    background: var(--landing-bg, #e0dde6);
    color: var(--pp-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
}

.pp-wrap { max-width: var(--pp-maxw); margin: 0 auto; padding: 0 24px; }

/* ═══════════ Kopfzeile — gleich wie auf den Ratgeberseiten ═══════ */

.pp-topbar { padding: 14px 24px 0; }

.pp-header {
    max-width: var(--pp-maxw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pp-logo {
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.6px;
    color: var(--pp-ink);
    text-decoration: none;
}
.pp-logo:hover { opacity: 0.75; }

.pp-nav { display: flex; gap: 22px; margin-left: auto; }
.pp-nav a {
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-ink-soft);
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.pp-nav a:hover { color: var(--pp-ink); }
.pp-nav a[aria-current="page"] {
    color: var(--pp-ink);
    border-bottom-color: var(--pp-akzent);
}

.pp-login {
    padding: 9px 18px;
    border-radius: 10px;
    background: var(--pp-ink);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.pp-login:hover { opacity: 0.85; }

/* ═══════════ Auftakt ═══════════ */

.pp-hero { padding: 68px 0 44px; text-align: center; }

.pp-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--pp-akzent-ink);
    margin: 0 0 14px;
}

.pp-hero h1 {
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.1;
    letter-spacing: -1.4px;
    font-weight: 900;
    margin: 0 0 16px;
}

.pp-lead {
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.6;
    color: var(--pp-ink-soft);
    max-width: 560px;
    margin: 0 auto;
}

/* ─── Umschalter Monat/Jahr ─── */
.pp-toggle-wrap { display: flex; justify-content: center; margin-top: 30px; }

.pp-pricing-toggle {
    position: relative;
    display: inline-flex;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--pp-line-soft);
}
.pp-toggle-pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    border-radius: 9px;
    background: var(--pp-ink);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.pp-toggle-btn {
    position: relative;
    z-index: 1;
    padding: 9px 20px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pp-ink-soft);
    cursor: pointer;
    border-radius: 9px;
    transition: color 0.2s;
    white-space: nowrap;
}
.pp-toggle-btn.active { color: #fff; }
.pp-saving {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--pp-akzent-tief);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.pp-toggle-btn.active .pp-saving { background: rgba(255, 255, 255, 0.24); }

/* ═══════════ Die drei Stufen ═══════════ */

.pp-stufen { padding: 12px 0 8px; }

.pp-stufe {
    position: relative;
    display: grid;
    grid-template-columns: 260px 1fr 232px;
    gap: 32px;
    align-items: start;
    padding: 30px 30px 28px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: var(--pp-flaeche-2);
    border: 1px solid var(--pp-line-soft);
    overflow: hidden;
}

/* Die hervorgehobene Stufe ist die, für die diese Seite steht. */
.pp-stufe.is-empfohlen {
    background: var(--pp-flaeche);
    border-color: rgba(29, 29, 31, 0.14);
}

/* Der Balken oben: reicht mit jeder Stufe weiter — wie eine Aufgabe
   im Diagramm, die einen längeren Zeitraum belegt. Er muss kräftig
   genug sein, damit die Reihe der drei Bänder als Zeitstrahl gelesen
   wird; als Haarlinie geht die Idee unter. */
.pp-balken {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 7px;
    background: rgba(29, 29, 31, 0.05);
}
.pp-balken-fuell {
    display: block;
    height: 100%;
    width: var(--pp-fuellung, 100%);
    background: var(--pp-akzent);
    opacity: 0.55;
    border-radius: 0 4px 4px 0;
}
.pp-stufe.is-empfohlen .pp-balken-fuell { opacity: 1; }
.pp-stufe.is-bald .pp-balken-fuell {
    /* Noch nicht freigeschaltet: gestreift statt gefüllt. */
    background: repeating-linear-gradient(
        -45deg,
        var(--pp-akzent) 0 6px,
        rgba(29, 29, 31, 0.06) 6px 12px
    );
    opacity: 0.55;
}

.pp-stufe-titel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pp-stufe-titel h2 {
    font-size: 25px;
    font-weight: 900;
    letter-spacing: -0.7px;
    margin: 0;
}
.pp-tag {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--pp-akzent-tief);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}
.pp-tag-bald {
    background: rgba(29, 29, 31, 0.1);
    color: var(--pp-ink-soft);
}

.pp-situation {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--pp-ink-mute);
    margin: 8px 0 0;
}

/* ─── Inhalt: nur das, was gegenüber der Stufe darunter dazukommt ─ */
.pp-ueber {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--pp-akzent-ink);
    margin: 0 0 10px;
}
.pp-liste { list-style: none; margin: 0; padding: 0; }
.pp-liste li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 9px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--pp-ink-soft);
}
.pp-liste li:last-child { margin-bottom: 0; }
/* Kein Häkchen-Symbol, sondern ein kurzer Balken — dasselbe Zeichen
   wie im Diagramm, und ruhiger als dreissig grüne Haken. */
.pp-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background: var(--pp-akzent);
    opacity: 0.75;
}

/* ─── Preis und Handlungsknopf ─── */
.pp-stufe-preis { text-align: right; }

.pp-preis {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}
.pp-preis-wert {
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -1.6px;
    line-height: 1;
}
.pp-preis-waehrung { font-size: 22px; font-weight: 800; }
.pp-preis-einheit {
    font-size: 13px;
    font-weight: 600;
    color: var(--pp-ink-mute);
    width: 100%;
    text-align: right;
}
/* Steht der Preis noch nicht fest, tritt an seine Stelle ein Satz —
   keine Zahl, kein durchgestrichener Platzhalter. */
.pp-preis-offen {
    display: block;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--pp-ink-mute);
    line-height: 1.35;
}
.pp-preis-sub {
    font-size: 12.5px;
    color: var(--pp-ink-mute);
    margin-top: 6px;
}

.pp-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--pp-ink);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.18s, transform 0.14s, background 0.18s;
}
.pp-cta:hover { opacity: 0.88; }
.pp-cta:active { transform: translateY(1px); }
.pp-cta[disabled] { opacity: 0.55; cursor: default; }
.pp-cta svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Nur der schlichte Handlungsknopf wird gefuellt. Ohne die
   Ausnahmen faerbte diese Regel auch die Umriss-Varianten ein —
   deren dunkle Schrift stand dann auf der Akzentflaeche und war
   nicht mehr zu lesen. Sie ist spezifischer als .pp-cta-melden
   und gewinnt unabhaengig von der Reihenfolge. */
.pp-stufe.is-empfohlen .pp-cta:not(.pp-cta-still):not(.pp-cta-melden) {
    background: var(--pp-akzent-tief);
}

.pp-cta-still {
    background: transparent;
    color: var(--pp-ink);
    border-color: var(--pp-line);
}
.pp-cta-still:hover { background: rgba(29, 29, 31, 0.05); opacity: 1; }

.pp-cta-melden {
    background: transparent;
    color: var(--pp-akzent-ink);
    border-color: var(--pp-akzent);
}
.pp-cta-melden:hover { background: var(--pp-akzent-hell); opacity: 1; }

.pp-cta-fuss {
    font-size: 11.5px;
    color: var(--pp-ink-mute);
    margin-top: 8px;
}

/* ═══════════ Gegenrede ═══════════ */

.pp-gegen { padding: 30px 0 8px; }
.pp-gegen-karte {
    padding: 26px 30px;
    border-radius: 16px;
    border: 1px dashed var(--pp-line);
    background: transparent;
}
.pp-gegen-karte h2 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    margin: 0 0 8px;
}
.pp-gegen-karte p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--pp-ink-soft);
    margin: 0;
    max-width: 70ch;
}

/* ═══════════ Vergleich ═══════════ */

.pp-vergleich { padding: 56px 0 40px; }
.pp-vergleich h2,
.pp-faq h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 900;
    letter-spacing: -0.8px;
    margin: 0 0 22px;
}

/* Waagerecht scrollbar statt gequetscht: Vier Spalten mit Sätzen wie
   „Cloud, alle Geräte" passen auf einem Telefon nicht nebeneinander.
   Der Rahmen scrollt, die Seite selbst bleibt ruhig. */
.pp-tabelle-rahmen {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid var(--pp-line-soft);
    background: var(--pp-flaeche);
    -webkit-overflow-scrolling: touch;
}
.pp-tabelle {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 14px;
}
.pp-tabelle th,
.pp-tabelle td {
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid var(--pp-line-soft);
    vertical-align: middle;
}
.pp-tabelle tbody tr:last-child th,
.pp-tabelle tbody tr:last-child td { border-bottom: 0; }

.pp-tabelle thead th {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--pp-ink);
    background: rgba(29, 29, 31, 0.03);
    white-space: nowrap;
}
.pp-tabelle thead th.is-empfohlen { color: var(--pp-akzent-ink); }
.pp-th-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pp-ink-mute);
}
.pp-tabelle tbody th {
    font-weight: 600;
    color: var(--pp-ink-soft);
    white-space: nowrap;
}
.pp-tabelle td { color: var(--pp-ink-soft); }
.pp-tabelle td.is-empfohlen {
    background: var(--pp-akzent-hell);
    color: var(--pp-ink);
    font-weight: 600;
}
.pp-ja { width: 17px; height: 17px; fill: var(--pp-akzent-ink); display: block; }
.pp-nein { color: rgba(29, 29, 31, 0.28); font-weight: 700; }
.pp-vh {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ═══════════ Fragen ═══════════ */

.pp-faq { padding: 20px 0 50px; }
.pp-faq-item {
    border-top: 1px solid var(--pp-line-soft);
    padding: 4px 0;
}
.pp-faq-item:last-of-type { border-bottom: 1px solid var(--pp-line-soft); }
.pp-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 34px 16px 0;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--pp-ink);
}
.pp-faq-item summary::-webkit-details-marker { display: none; }
.pp-faq-item summary::after {
    content: "";
    position: absolute;
    right: 8px; top: 50%;
    width: 9px; height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--pp-ink-mute);
    border-bottom: 2px solid var(--pp-ink-mute);
    transform: rotate(45deg);
    transition: transform 0.2s;
}
.pp-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.pp-faq-body {
    padding: 0 40px 18px 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pp-ink-soft);
    max-width: 74ch;
}

/* ═══════════ Abschluss ═══════════ */

.pp-final { padding: 8px 0 64px; }
.pp-final-karte {
    padding: 44px 40px;
    border-radius: 20px;
    background: var(--pp-flaeche);
    border: 1px solid var(--pp-line-soft);
    text-align: center;
}
.pp-final-karte h2 {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 900;
    letter-spacing: -0.9px;
    margin: 0 0 12px;
}
.pp-final-karte p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--pp-ink-soft);
    max-width: 62ch;
    margin: 0 auto 26px;
}
.pp-final-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.pp-final-btns .pp-cta { width: auto; min-width: 210px; margin-top: 0; }
.pp-final-btns .pp-cta:not(.pp-cta-still):not(.pp-cta-melden) { background: var(--pp-akzent-tief); }
.pp-final-btns .pp-cta-still { background: transparent; }

/* ═══════════ Fusszeile ═══════════ */

.pp-footer {
    border-top: 1px solid var(--pp-line-soft);
    padding: 28px 0 40px;
    font-size: 13.5px;
    color: var(--pp-ink-mute);
}
.pp-footer .pp-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pp-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.pp-footer-links a { color: var(--pp-ink-mute); text-decoration: none; }
.pp-footer-links a:hover { color: var(--pp-ink); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   Kleine Schirme
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .pp-stufe {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 26px 22px 24px;
    }
    /* Auf dem Telefon zuerst Name und Situation, dann Preis samt Knopf,
       zuletzt die Aufzählung: Wer scrollt, soll die Entscheidung treffen
       können, bevor er die Einzelheiten liest. Im Quelltext steht die
       Aufzählung vor dem Preis, weil das nebeneinander die richtige
       Reihenfolge ist — hier wird nur die Anzeige getauscht. */
    .pp-stufe-kopf    { order: 1; }
    .pp-stufe-preis   { order: 2; text-align: left; }
    .pp-stufe-inhalt  { order: 3; }
    .pp-preis         { justify-content: flex-start; }
    .pp-preis-einheit { text-align: left; }
    .pp-cta-fuss      { text-align: left; }
}

@media (max-width: 720px) {
    .pp-nav { display: none; }
    .pp-login { margin-left: auto; }
    .pp-hero { padding: 44px 0 34px; }
    .pp-gegen-karte { padding: 22px 20px; }
    .pp-final-karte { padding: 32px 22px; }
    .pp-final-btns .pp-cta { width: 100%; min-width: 0; }
    .pp-footer .pp-wrap { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
    .pp-wrap, .pp-topbar { padding-left: 16px; padding-right: 16px; }
    .pp-preis-wert { font-size: 34px; }
    .pp-stufe-titel h2 { font-size: 22px; }
    .pp-toggle-btn { padding: 9px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-toggle-pill, .pp-cta, .pp-faq-item summary::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   Anmeldefenster auf dieser Seite
   ────────────────────────────────────────────────────────────────
   auth_overlay.php ist für die Startseite gebaut, wo es die halbe
   Seite füllt. Hier muss es ein Fenster über allem sein. Diese
   Regeln standen vorher als Stilblock mitten in pro.php UND in
   business.php — also zweimal gepflegt.
   ════════════════════════════════════════════════════════════════ */

body.pricing-page #auth-overlay {
    position: fixed !important;
    inset: 0;
    z-index: 9500;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
body.pricing-page #auth-overlay .auth-card {
    background: #fff;
    border-radius: 20px;
    padding: 34px 30px;
    max-width: 420px;
    width: 100%;
    color: var(--pp-ink);
    position: relative;
    text-align: center;
    border: 1px solid var(--pp-line-soft);
}
body.pricing-page #auth-overlay h2 {
    font-size: 23px; font-weight: 900; color: var(--pp-ink); margin: 0 0 6px;
}
body.pricing-page #auth-overlay #auth-subtitle {
    font-size: 14px; color: var(--pp-ink-mute); margin: 0 0 20px;
}
body.pricing-page #auth-overlay .glass-input {
    width: 100%; padding: 12px 14px; margin-bottom: 10px;
    border-radius: 11px; border: 1px solid var(--pp-line);
    background: #f7f7fa; color: var(--pp-ink);
    font-size: 14px; font-family: inherit; outline: none;
}
body.pricing-page #auth-overlay .glass-input:focus {
    border-color: var(--pp-akzent); background: #fff;
}
body.pricing-page #auth-overlay .password-wrap { position: relative; width: 100%; margin-bottom: 10px; }
body.pricing-page #auth-overlay .password-wrap .glass-input { margin-bottom: 0; }
body.pricing-page #auth-overlay .pw-toggle-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; padding: 4px;
    color: var(--pp-ink-mute); display: flex; align-items: center;
}
body.pricing-page #auth-overlay .pw-toggle-btn svg { width: 18px; height: 18px; fill: currentColor; }
body.pricing-page #auth-overlay .action-btn,
body.pricing-page #auth-overlay .btn-primary {
    display: block; width: 100%; padding: 13px 24px; margin-top: 8px;
    background: var(--pp-ink); color: #fff; border: none; border-radius: 11px;
    font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
body.pricing-page #auth-overlay .action-btn:hover { opacity: 0.88; }
body.pricing-page #auth-overlay .auth-footer {
    margin-top: 18px; font-size: 13px; color: var(--pp-ink-mute);
}
body.pricing-page #auth-overlay .auth-toggle-btn {
    background: none; border: none; color: var(--pp-akzent-ink);
    font-weight: 700; font-size: 13px; cursor: pointer; padding: 0 4px;
    font-family: inherit;
}
body.pricing-page #auth-overlay .auth-toggle-btn:hover { text-decoration: underline; }
body.pricing-page #auth-overlay .auth-close-btn {
    position: absolute; top: 12px; right: 12px; width: auto; padding: 6px 10px;
    background: rgba(29, 29, 31, 0.05); border: none; border-radius: 8px;
    color: var(--pp-ink-mute); font-size: 11px; font-weight: 600;
    font-family: inherit; cursor: pointer;
    display: flex; align-items: center; gap: 4px;
}
body.pricing-page #auth-overlay .auth-close-btn:hover {
    background: rgba(29, 29, 31, 0.1); color: var(--pp-ink);
}
/* Für die Meldungen im Anmeldefenster steht hier bewusst NICHTS mehr.
   Sie hatten eine eigene Fassung mit anderem Radius, anderer Schrift
   und einem margin-bottom, das bei absoluter Lage ohnehin wirkungslos
   war — drei Orte für dasselbe Element. Es gilt jetzt allein die
   Festlegung in auth.css. */
body.pricing-page #auth-overlay #g_id_onload,
body.pricing-page #auth-overlay .g_id_signin { display: flex; justify-content: center; }