/* Tarifkarten-Bauteil — gemeinsame Quelle fuer Startseite (landing.html) und /plans.
   Enthaelt NUR die Karten und den Abrechnungs-Umschalter. Kein Seitenlayout,
   kein Hero. Wer die Karten aendert, aendert sie hier — einmal fuer beide Seiten. */
:root{
  --tier-blue:#0163ff;
  --tier-blue-bright:#5c94ff;
  --tier-black:#050506;
  --tier-panel:#101217;
  --tier-panel-2:#151820;
  --tier-line:#252a33;
  --tier-line-strong:#414957;
  --tier-muted:#858c9b;
}

.billing-toggle{display:grid;width:auto;min-width:280px;max-width:100%;grid-template-columns:1fr 1fr;padding:5px;border:1px solid var(--tier-line);border-radius:14px;background:var(--tier-panel);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.billing-toggle button{min-width:0;min-height:48px;border:0;border-radius:10px;background:transparent;padding:9px 14px;color:#a1a1a1;font-size:.82rem;font-weight:650;white-space:nowrap;transition:background .18s,color .18s;cursor:pointer;font-family:inherit}
.billing-toggle button span{margin-left:3px;font-size:.75rem;font-weight:600;color:#aaa}
.billing-toggle button:hover{color:#fff}
.billing-toggle button.is-active{background:var(--tier-blue);color:#fff;box-shadow:0 2px 12px rgba(1,99,255,.28)}
.billing-toggle button:focus-visible{outline:2px solid #d4d4d4;outline-offset:2px}

.tier-savings{color:var(--tier-muted);font-size:.8rem;font-weight:600}

.tier-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.tier-card{position:relative;display:flex;min-width:0;flex-direction:column;min-height:590px;padding:30px 23px 26px;background:var(--tier-panel);border:1px solid var(--tier-line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.12);transition:border-color .18s ease,background .18s ease}
.tier-card:hover{border-color:var(--tier-line-strong);background:var(--tier-panel-2)}
.tier-card[data-requested="true"]{border-color:var(--tier-blue);box-shadow:0 0 0 1px rgba(1,99,255,.24),0 18px 48px rgba(0,0,0,.24)}
.tier-card h3{margin:0 0 10px;font-family:var(--font-display,"Bricolage Grotesque",sans-serif);font-size:clamp(2rem,3vw,2.55rem);font-weight:720;letter-spacing:-.04em}
.tier-card-for{min-height:45px;margin:0;color:#8d8d8d;font-size:.88rem;line-height:1.5}
.tier-price{display:flex;min-height:62px;align-items:baseline;margin:18px 0 0;color:#f4f4f4}
.tier-price-currency{align-self:flex-start;margin:10px 0 0 4px;color:#d7d7d7;font-size:1.05rem;font-weight:650}
.tier-price-currency-pre{margin:10px 4px 0 0}
.tier-price strong{font-family:var(--font-display,"Bricolage Grotesque",sans-serif);font-size:clamp(3rem,4.3vw,4rem);font-weight:430;letter-spacing:-.06em;line-height:1;color:#f4f4f4}
.tier-price-period{margin-left:7px;color:#a0a0a0;font-size:.78rem}
.tier-billing-copy{margin:8px 0 22px;color:#8e8e8e;font-size:.78rem;min-height:39px}/* 09.08.: 2 Zeilen Reserve (19.3px x 2) — haelt die Knoepfe auf einer Linie, wenn der Enterprise-Text umbricht */
.tier-card .btn{margin:0 0 28px;border-color:var(--tier-blue);background:var(--tier-blue);color:#fff;box-shadow:0 8px 24px rgba(1,99,255,.18)}
.tier-card .btn:hover{border-color:var(--tier-blue-bright);background:#0152d6;color:#fff}
.tier-card .btn:active{transform:translateY(1px)}
.tier-features{list-style:none;display:grid;gap:13px;margin:0;padding:0;color:#a7a7a7;font-size:.86rem}
.tier-features li{position:relative;padding-left:22px;line-height:1.45}
.tier-features li::before{content:"✓";position:absolute;left:0;top:0;color:var(--tier-blue-bright);font-size:.9rem;font-weight:700}
.tier-features .tier-feature-primary{color:#dbe5ff}

@media(max-width:1080px){
  .tier-grid{grid-template-columns:repeat(2,1fr)}
  .tier-card{min-height:570px}
}

@media(max-width:590px){
  .tier-grid{grid-template-columns:1fr}
  .tier-card{min-height:0;padding:24px 20px}
  .billing-toggle button{padding-inline:8px}
  .billing-toggle button span{margin-left:3px;font-size:.68rem}
}

@media(prefers-reduced-motion:reduce){
  .tier-card,.billing-toggle button{transition:none}
}