/*
 * Preisblock der Plattform — die Paketkarten mit Monat/Jahr-Umschalter, der
 * Fair-Trial-Streifen und die Preisnotiz (templates/landing/_plans.html.twig).
 * Eine Datei, weil der Block auf zwei Seiten steht: im #pricing-Abschnitt der
 * Landing und auf /preise. Er setzt die Plattform-Tokens der Seite voraus
 * (--surface, --line, --pine, --gold, --font-display …; DESIGN.md, Platform).
 */
.bill-toggle { display: flex; justify-content: center; margin: 0 auto 2rem; }
.bill-toggle .seg {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 100px;
}
.bill-toggle button {
    min-height: 44px;
    font: inherit; font-size: .9rem; font-weight: 600;
    border: 0; background: transparent; color: var(--muted);
    padding: .5rem 1.2rem; border-radius: 100px; cursor: pointer;
    display: inline-flex; align-items: center; gap: .5rem;
    transition: background .2s, color .2s;
}
.bill-toggle button[aria-pressed="true"] { background: var(--pine); color: #fff; }
.bill-toggle .save {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    background: var(--gold); color: var(--pine);
    padding: .18rem .55rem; border-radius: 100px; white-space: nowrap;
}
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; max-width: 820px; margin: 0 auto; }
.plan {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 22px; padding: 2.2rem;
    display: flex; flex-direction: column; position: relative;
}
.plan .promo-flag {
    position: absolute; top: 1.3rem; right: 1.3rem;
    font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: var(--gold); color: var(--pine);
    padding: .28rem .65rem; border-radius: 100px;
}
.plan .tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan h3 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; margin: .35rem 0 .2rem; }
.plan .sub { font-size: .92rem; color: var(--muted); margin-bottom: 1.4rem; }
.plan .price { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.plan .price b { font-family: var(--font-display); font-weight: 600; font-size: 2.7rem; letter-spacing: -.02em; line-height: 1; }
.plan .price > span { font-size: .95rem; color: var(--muted); font-weight: 500; }
.plan .cancel { font-size: .84rem; color: var(--muted); margin: .45rem 0 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.plan.pro .price > span, .plan.pro .cancel { color: #A8BFB4; }
.plan.pro .cancel { border-bottom-color: rgba(255,255,255,.12); }
.plan .headline { font-size: .9rem; font-weight: 600; color: var(--gold); margin: -0.2rem 0 .2rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.plan ul { list-style: none; margin: 0 0 2rem; display: grid; gap: 0; font-size: .92rem; }
.plan li { padding: .55rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .6rem; align-items: baseline; }
.plan li:last-child { border-bottom: 0; }
.plan li::before { content: "✓"; font-weight: 700; color: var(--jade); flex: none; }
.plan .btn { margin-top: auto; justify-content: center; }
.plan.pro { background: var(--pine); border-color: var(--pine); color: #fff; position: relative; }
.plan.pro .tag { color: var(--gold); }
.plan.pro .sub { color: #A8BFB4; }
.plan.pro li { border-bottom-color: rgba(255,255,255,.12); }
.plan.pro li::before { color: var(--gold); }
.plan.pro li b { color: var(--gold); font-weight: 600; }
.plans-note { text-align: center; color: var(--muted); font-size: .92rem; max-width: 820px; margin: 1rem auto 0; }
.plans-note .promise { display: block; font-weight: 600; color: var(--ink); margin-bottom: .2rem; }
/* Fair-Trial-Streifen: die Kein-Abo-Zusage direkt unter der Preistafel */
.trial-fair {
    max-width: 820px; margin: 1.4rem auto 0; text-align: center;
    background: var(--sage); border-radius: 16px; padding: 1.25rem 1.5rem;
}
.trial-fair-items {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: .4rem 1.9rem; font-weight: 600; font-size: .95rem;
}
.trial-fair-items i { font-style: normal; font-weight: 700; color: var(--jade); margin-right: .4rem; }
.trial-fair p { font-size: .88rem; color: var(--muted); margin-top: .6rem; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
/* Sehr schmale Telefone: der Umschalter darf umbrechen statt die Seite zu verbreitern. */
@media (max-width: 360px) {
    .bill-toggle .seg { flex-wrap: wrap; justify-content: center; }
    .bill-toggle button { padding: .5rem .9rem; }
}