/* /pricing im Startseiten-Design (23.10.2026). Palette, Schrift, Kopf, Fuss und Buttons kommen aus
   landing-v4.css, Hero und Abschnittsraster aus produkt.css; hier steht nur, was die Preisseite
   zusaetzlich braucht: Plankarten, die Pack-Tabelle, die Entscheidungshilfe und die Regelliste.
   Seite wird von tools/pricing-build.mjs erzeugt, nicht von Hand geaendert. */
.pm{--tint:143,122,201}
.pm-hero h1{max-width:18ch}
.pm-hero .p-lead{max-width:68ch}
.pm-hero .p-lead b,.pm-sub b,.pm-scale b{color:var(--text);font-weight:560}
.pm-hero .p-lead a,.pm-sub a,.pm-scale a,.pm-rules a{color:#b3b3af;text-decoration:underline;text-decoration-color:#f2f2f066;text-underline-offset:3px}
.pm-vat{margin:18px auto 0;max-width:60ch;font-size:12px;line-height:1.6;color:var(--dim)}
.pm-vat+.pm-vat{margin-top:2px}
.pm-hero .p-lead{margin-top:22px}
.pm-cta{display:flex;flex-wrap:wrap;gap:12px}
.pm-hero .pm-cta{justify-content:center;margin-top:32px}
.pm-end .pm-cta{margin-top:24px}

/* Abschnitte: Linie, Eyebrow, Titel, Text. Keine zweite Spalte, die Karten brauchen die volle Breite. */
.pm-sheet{padding:72px 0;border-top:1px solid var(--line)}
.pm-kicker{margin-bottom:14px;font:10px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8f8f8a}
.pm-sheet h2,.pm-end h2{font-size:clamp(26px,2.8vw,38px);font-weight:520;line-height:1.12;letter-spacing:-.026em;text-wrap:balance;max-width:24ch}
.pm-sub{margin-top:16px;max-width:72ch;font-size:15px;line-height:1.65;color:var(--muted)}
.pm-sub code{font:13px var(--mono);color:#b3b3af}
.pm-ledger{margin-top:26px;max-width:92ch;font:11px/1.8 var(--mono);color:var(--dim)}

/* Plankarten: fuenf Stueck, die mittlere Reihe (Max) traegt die Marke. */
.pm-karten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:36px}
.pm-karte{position:relative;display:flex;flex-direction:column;padding:22px 20px 20px;border:1px solid #f2f2f027;border-radius:10px;background:linear-gradient(180deg,#1b1b24,#14141b);transition:border-color .2s ease,background-color .2s ease}
.pm-karte.pm-mark{border-color:#f2f2f070;background:linear-gradient(180deg,#2a2a32,#14141b);box-shadow:0 0 0 1px #f2f2f01f,0 18px 50px #00000066,0 0 50px rgba(var(--tint),.1)}
@media (hover:hover) and (pointer:fine){.pm-karte:hover{border-color:#f2f2f063}}
.pm-plan{font-size:15px;font-weight:560;letter-spacing:-.02em}
.pm-price{margin-top:18px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pm-price b{font-size:27px;font-weight:540;letter-spacing:-.026em;line-height:1;white-space:nowrap}
.pm-price span{font-size:12px;color:var(--dim)}
.pm-year{margin-top:8px;font-size:12px;line-height:1.5;color:var(--muted);min-height:2.4em}
.pm-was{display:inline-block;margin-left:2px;padding:1px 8px;border:1px solid rgba(var(--tint),.4);border-radius:10px;font-size:10.5px;color:#b3b3af;white-space:nowrap}
.pm-spec{margin:18px 0 0;padding-top:6px;border-top:1px solid var(--line)}
.pm-spec div{padding:10px 0;border-bottom:1px solid var(--line)}
.pm-spec div:last-child{border-bottom:0}
.pm-spec dt{font:10px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pm-spec dd{margin:3px 0 0;font-size:13px;line-height:1.5;color:var(--text)}

/* Pack-Tabelle */
.pm-tabelle{width:100%;max-width:640px;margin-top:32px;border-collapse:collapse}
.pm-tabelle th,.pm-tabelle td{vertical-align:baseline;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);text-align:left;font-size:15px;font-weight:400;line-height:1.4}
.pm-tabelle thead th{padding-top:0;font:10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.pm-tabelle .pm-plan{font-weight:560}
.pm-tabelle .pm-mark .pm-plan::after{content:"";display:inline-block;width:5px;height:5px;margin-left:10px;border-radius:50%;background:#b3b3af;vertical-align:middle}

/* Entscheidungshilfe: ein Satz je Plan, links die Lage, rechts die Antwort. */
.pm-fig{margin-top:8px;max-width:900px}
.pm-cap{margin-bottom:6px;font-size:15px;color:var(--muted)}
.pm-fig p:not(.pm-cap){display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:8px 32px;padding:18px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.65;color:var(--muted)}
.pm-fig p:not(.pm-cap):last-child{border-bottom:1px solid var(--line)}
.pm-k{color:var(--text);font-weight:540}
.pm-fig p:not(.pm-cap)>.pm-k{grid-column:1}

.pm-rules{list-style:none;margin:30px 0 0;padding:0;max-width:78ch;counter-reset:r}
.pm-rules li{counter-increment:r;display:grid;grid-template-columns:40px minmax(0,1fr);padding:15px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.65;color:var(--muted)}
.pm-rules li:first-child{padding-top:4px}
.pm-rules li::before{content:counter(r,decimal-leading-zero);font:13px/1.65 var(--mono);color:var(--accent)}
.pm-rules li:last-child{border-bottom:0}
.pm-scale{margin-top:4px;max-width:76ch;font-size:16px;line-height:1.7;color:var(--muted)}

.pm-end{padding:80px 0 72px;border-top:1px solid var(--line);text-align:center}
.pm-end h2{margin-inline:auto}
.pm-end .pm-sub{margin-inline:auto}
.pm-end .pm-cta{justify-content:center}

@media (max-width:1180px){.pm-karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .pm-sheet{padding:56px 0}
  .pm-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-fig p:not(.pm-cap){grid-template-columns:minmax(0,1fr);gap:4px}
}
@media (max-width:650px){
  .pm-karten{grid-template-columns:minmax(0,1fr)}
  .pm-hero .pm-cta{flex-direction:column;align-items:stretch}
  .pm-tabelle th,.pm-tabelle td{vertical-align:baseline;padding-right:8px;font-size:14px}
  .pm-end{padding:56px 0}
}